/* ==========================================================================
   Keshav Hydraulics Blog
   Static, Bootstrap-compatible, JavaScript-free styles
   ========================================================================== */

:root {
  --kh-primary: #0e516b;
  --kh-primary-dark: #083c50;
  --kh-accent: #29abe2;
  --kh-ink: #17232b;
  --kh-muted: #66757d;
  --kh-border: #e6ecef;
  --kh-surface: #f5f8fa;
  --kh-white: #fff;
  --kh-shadow: 0 14px 40px rgba(15, 45, 60, .10);
  --kh-radius: 18px;
}

html { scroll-behavior: smooth; }
body {
  color: var(--kh-ink);
  background: var(--kh-white);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}
a { color: var(--kh-primary); text-underline-offset: 3px; }
a:hover { color: var(--kh-accent); }
img { max-width: 100%; height: auto; }
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 9999;
  padding: .65rem 1rem; background: #fff; color: #000; border-radius: 8px;
}
.skip-link:focus { left: 8px; }

.blog-topbar {
  background: var(--kh-primary-dark);
  color: rgba(255,255,255,.86);
  font-size: .84rem;
}
.blog-topbar a { color: #fff; text-decoration: none; }

.blog-header {
  background: #fff;
  border-bottom: 1px solid var(--kh-border);
}
.blog-brand { display: inline-flex; align-items: center; }
.blog-brand img { width: 198px; height: 55px; object-fit: contain; }

.blog-nav a {
  color: var(--kh-ink);
  font-weight: 600;
  text-decoration: none;
  padding: .55rem .7rem;
  border-radius: 8px;
}
.blog-nav a:hover, .blog-nav a:focus {
  color: var(--kh-primary);
  background: var(--kh-surface);
}
.blog-nav .active { color: var(--kh-primary); }

.mobile-nav summary {
  list-style: none; cursor: pointer;
  border: 1px solid var(--kh-border);
  border-radius: 9px; padding: .45rem .7rem;
  font-weight: 700;
}
.mobile-nav summary::-webkit-details-marker { display:none; }
.mobile-nav nav { padding-top: .6rem; }
.mobile-nav nav a { display:block; padding:.45rem .25rem; text-decoration:none; }

.blog-hero {
  position: relative;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(5,42,57,.90), rgba(5,42,57,.55)),
    url("../img/blog/breadcrumb.webp") center/cover no-repeat;
}
.blog-hero .eyebrow {
  display:inline-block; margin-bottom:.6rem;
  font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:#bcecff;
}
.blog-hero h1 { max-width: 900px; font-size: clamp(2rem, 4vw, 3.5rem); line-height:1.12; }
.blog-hero p { max-width: 760px; color: rgba(255,255,255,.86); }

.breadcrumb-wrap {
  background: rgba(0,0,0,.12);
  border-top: 1px solid rgba(255,255,255,.12);
}
.breadcrumb { margin:0; --bs-breadcrumb-divider-color: rgba(255,255,255,.5); }
.breadcrumb-item, .breadcrumb-item a { color: rgba(255,255,255,.82); }
.breadcrumb-item.active { color:#fff; }

.section-space { padding: 72px 0; }
.section-heading { margin-bottom: 34px; }
.section-heading .eyebrow {
  color: var(--kh-primary); font-size:.78rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
}
.section-heading h2 { font-size:clamp(1.8rem, 3vw, 2.45rem); line-height:1.2; margin:.35rem 0 .7rem; }
.section-heading p { color:var(--kh-muted); max-width:760px; margin-bottom:0; }

.blog-card {
  height: 100%; overflow:hidden; background:#fff;
  border:1px solid var(--kh-border); border-radius:var(--kh-radius);
  box-shadow: 0 8px 28px rgba(15,45,60,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blog-card:hover, .blog-card:focus-within {
  transform: translateY(-7px);
  box-shadow: var(--kh-shadow);
  border-color: rgba(14,81,107,.24);
}
.blog-card-media { aspect-ratio: 16 / 9; overflow:hidden; background:var(--kh-surface); }
.blog-card-media img {
  width:100%; height:100%; object-fit:cover;
  transition: transform .45s ease;
}
.blog-card:hover .blog-card-media img { transform:scale(1.035); }
.blog-card-body { padding: 25px; }
.blog-tag {
  display:inline-flex; padding:.3rem .62rem; border-radius:999px;
  background:#e9f6fb; color:var(--kh-primary);
  font-size:.72rem; font-weight:800; letter-spacing:.03em;
}
.blog-card h3 { font-size:1.28rem; line-height:1.35; margin:14px 0 10px; }
.blog-card h3 a { color:var(--kh-ink); text-decoration:none; }
.blog-card h3 a:hover { color:var(--kh-primary); }
.blog-excerpt { color:var(--kh-muted); font-size:.96rem; margin-bottom:18px; }
.read-more { font-weight:800; text-decoration:none; }
.read-more span { transition:transform .2s ease; display:inline-block; }
.read-more:hover span { transform:translateX(4px); }

.featured {
  background:linear-gradient(180deg,#f6fbfd 0,#fff 100%);
  border:1px solid #dcecf2;
  border-radius:24px;
  padding:12px;
}
.featured .blog-card { box-shadow:none; }
.featured-label {
  display:inline-block; margin: 0 0 13px 8px;
  color:var(--kh-primary); font-weight:800; text-transform:uppercase;
  letter-spacing:.1em; font-size:.72rem;
}

.article-layout { align-items:flex-start; }
.article-main {
  background:#fff; border:1px solid var(--kh-border); border-radius:24px;
  padding: clamp(24px, 4vw, 52px); box-shadow:0 10px 34px rgba(15,45,60,.05);
}
.article-main .lead {
  font-size:1.12rem; color:#3e4e56; line-height:1.85;
}
.article-main h2 {
  margin:2.3rem 0 1rem; font-size:clamp(1.45rem,2.5vw,2rem);
  line-height:1.3; color:var(--kh-primary-dark);
}
.article-main h3 {
  margin:1.8rem 0 .75rem; font-size:1.25rem; color:var(--kh-ink);
}
.article-main p { margin-bottom:1rem; }
.article-main .article-list {
  padding-left:1.25rem; margin: .8rem 0 1.3rem;
}
.article-main .article-list li { padding:.25rem 0; }
.benefit {
  margin:1rem 0; padding:1rem 1.1rem;
  border-left:4px solid var(--kh-accent);
  background:#f7fafb; border-radius:0 10px 10px 0;
}
.benefit p { margin:.35rem 0 0; }
.article-main img.article-inline { border-radius:16px; margin:1rem 0 1.5rem; }

.article-aside {
  position:sticky; top:24px;
}
.aside-card {
  border:1px solid var(--kh-border); border-radius:18px; padding:22px;
  background:#fff; box-shadow:0 8px 25px rgba(15,45,60,.05);
}
.aside-card h2 { font-size:1.05rem; margin:0 0 14px; }
.toc a {
  display:block; padding:.5rem 0; color:var(--kh-muted);
  text-decoration:none; border-bottom:1px solid #f0f3f4;
}
.toc a:hover { color:var(--kh-primary); padding-left:4px; }

.share-row { display:flex; flex-wrap:wrap; gap:8px; }
.share-row a {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:.45rem .7rem; border-radius:9px;
  border:1px solid var(--kh-border); background:#fff; text-decoration:none;
  font-size:.82rem; font-weight:700;
}
.share-row a:hover { border-color:var(--kh-primary); background:#f4fbfd; }

.faq-section { margin-top:3rem; padding-top:1rem; border-top:1px solid var(--kh-border); }
.faq-section details {
  border:1px solid var(--kh-border); border-radius:12px;
  margin:.75rem 0; background:#fff; overflow:hidden;
}
.faq-section summary {
  cursor:pointer; list-style:none; padding:1rem 1.1rem;
  font-weight:800; color:var(--kh-primary-dark);
}
.faq-section summary::-webkit-details-marker { display:none; }
.faq-section summary::after { content:"+"; float:right; font-size:1.25rem; line-height:1; }
.faq-section details[open] summary::after { content:"–"; }
.faq-answer { padding:0 1.1rem 1rem; color:var(--kh-muted); }

.related-section { background:var(--kh-surface); }

.cta-strip {
  background:linear-gradient(135deg,var(--kh-primary-dark),var(--kh-primary));
  color:#fff; border-radius:22px; padding:38px;
}
.cta-strip h2 { font-size:clamp(1.5rem,3vw,2.1rem); }
.cta-strip p { color:rgba(255,255,255,.82); }

.blog-footer { background:#102f3b; color:rgba(255,255,255,.75); }
.blog-footer a { color:#fff; text-decoration:none; }
.blog-footer h2 { color:#fff; font-size:1rem; }
.footer-brand img { width:180px; height:auto; filter:brightness(0) invert(1); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.12); }

@media (max-width: 991.98px) {
  .article-aside { position:static; }
  .section-space { padding:56px 0; }
}
@media (max-width: 767.98px) {
  .blog-brand img { width:170px; height:auto; }
  .blog-topbar .contact-note { display:none; }
  .article-main { border-radius:18px; }
  .cta-strip { padding:28px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; animation:none !important; }
}
@media (prefers-color-scheme: dark) {
  /* Opt-in dark-mode compatibility; respects the visitor's OS setting. */
  body { background:#0e171c; color:#e5edf0; }
  .blog-header, .blog-card, .article-main, .aside-card, .faq-section details { background:#132128; }
  .blog-header { border-color:#263a43; }
  .blog-nav a, .blog-card h3 a, .article-main h3 { color:#e5edf0; }
  .section-heading p, .blog-excerpt, .article-main p, .article-main .lead,
  .toc a, .faq-answer { color:#b8c7cd; }
  .blog-card, .article-main, .aside-card { border-color:#263a43; }
  .featured { background:#102028; border-color:#26434e; }
  .benefit { background:#172a32; }
  .faq-section details { border-color:#2a414b; }
  .share-row a { background:#132128; border-color:#2a414b; color:#dbe8ec; }
  .related-section { background:#0b1419; }
}

img.article-inline.w-100 {
    height: 400px;
    object-fit: contain;
    border: 1px solid;
    border-radius: 16px;
}