/* === Local override: darker header background for white nav text === */
#header{
  background: #3b2f2a ; /* rich cocoa */
  box-shadow: 0 6px 24px rgba(0,0,0,.08) ;
}
#header::before{ content:none ; }
#header .navmenu a,
#header .logo h1, #header .logo .sitename,
#header .sitename{ color:#fff ; text-shadow:none ; }
#header .navmenu a:hover,
#header .navmenu .active{ color:#ffe2c7 ; }


/* ====== Page-level hardening to prevent 'foggy' header/top ====== */
/* 1) Make sure header sits above any overlays and is readable */
#header{ z-index: 10000 ; /* removed white bg */ box-shadow: 0 6px 24px rgba(0,0,0,.06) ; }
#header .navmenu a, #header .logo h1, #header .logo .sitename, #header .sitename{ color: var(--heading-color, #222) ; }
#header .navmenu a:hover, #header .navmenu li:hover > a, #header .navmenu .active{ color: var(--accent-color, #b48c78) ; }

/* 2) Neutralise global hero overlays that might sit on top and wash out content */
.hero::before, .page-title::before, .section::before, .dc-hero::before{
  content: none ;
  display: none ;
  opacity: 0 ;
}

/* 3) Prevent any accidental inherited opacity/filters on top blocks */
.hero, .dc-hero, main > section:first-of-type{
  opacity: 1 ;
  filter: none ;
  isolation: isolate; /* new stacking context so overlays from parents won't cover children */
}

/* 4) Ensure AOS (if present) doesn't leave elements semi-transparent before scroll */
[data-aos]{ opacity: 1 ; transform: none ; }


/* --- Header/foot stability for light inner pages --- */
#header{ 
  /* removed white bg */ 
  box-shadow: 0 6px 24px rgba(0,0,0,.06) ;
}
#header .sitename, 
#header .logo, 
#header .logo a, 
#header .logo h1, #header .logo .sitename, 
#header .navmenu a{
  color: var(--heading-color, #222) ;
  text-shadow: none ;
}
/* preserve active/hover states from theme while ensuring contrast */
#header .navmenu a:hover, 
#header .navmenu li:hover > a{
  color: var(--accent-color, #b48c78) ;
}
/* Footer minor hardening (keeps layout readable even if theme grid fails) */
#footer{ background: var(--surface-color, #fff); }


:root{
  --dc-bg:#FFF7F1;
  --dc-surface:#FFFFFF;
  --dc-ink:#2b2b2b;
  --dc-muted:#6b6b6b;
  --dc-accent: var(--accent-color, #C8A28F);
  --dc-border: rgba(0,0,0,.08);
}
body{font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--dc-ink); background: var(--dc-bg);}
main{padding-top: 96px;}
.dc-container{max-width:1100px;margin:0 auto;padding:24px;}

.hero{display:grid;gap:20px;grid-template-columns:1.1fr .9fr;align-items:center;background:linear-gradient(180deg,#F8EFE8,rgba(255,255,255,0) 60%);border-bottom:1px solid var(--dc-border)}
.hero h1{font-size: clamp(28px, 4vw, 44px); margin:0 0 8px;}
.hero p.lead{font-size: clamp(16px, 2vw, 18px); color:var(--dc-muted);}
.hero .card{background:var(--dc-surface); border:1px solid var(--dc-border); border-radius:20px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.04);}
@media (max-width: 900px){ .hero{grid-template-columns:1fr}}

.timeline{counter-reset: step; display:grid; gap:14px}
.step{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:start;background:#fff;border:1px solid var(--dc-border);border-radius:16px;padding:14px}
.step .num{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--dc-accent);color:#fff;font-weight:700}
.step h3{margin:.2rem 0 .25rem;font-size:18px}
.step p{margin:0;color:var(--dc-muted)}

.grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
@media (max-width: 1000px){ .grid{grid-template-columns:1fr 1fr}}
@media (max-width: 700px){ .grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid var(--dc-border);border-radius:16px;padding:16px}
.card h3{margin:.2rem 0 .4rem}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.cta .btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:1px solid var(--dc-border);padding:10px 16px;text-decoration:none}
.btn.primary{background:var(--dc-accent);color:#fff;border-color:transparent}
.small{font-size:12px;color:var(--dc-muted)}


/* === Final local override for info pages only === */
.dc-dark-header #header{
  background:#3b2f2a ;
  box-shadow:0 6px 24px rgba(0,0,0,.08) ;
}
.dc-dark-header #header .navmenu a,
.dc-dark-header #header .logo h1, #header .logo .sitename,
.dc-dark-header #header .sitename{ color:#fff ; text-shadow:none ; }
.dc-dark-header #header .navmenu a:hover,
.dc-dark-header #header .navmenu .active{ color:#ffe2c7 ; }


/* === Mobile nav fix for info pages only === */
@media (max-width:1199px){
  .dc-dark-header #header{ background:#3b2f2a ; }
  .dc-dark-header .navmenu .mobile-nav-toggle{ color:#fff ; }
  .dc-dark-header .navmenu ul{
    background: #1E1714 ; /* was white */
    box-shadow: 0 20px 40px rgba(0,0,0,.2);
    border: 1px solid rgba(255,255,255,.08);
  }
  .dc-dark-header .navmenu a{
    color:#fff ;
  }
  .dc-dark-header .navmenu a:hover,
  .dc-dark-header .navmenu .active{
    color:#ffe2c7 ;
  }
  /* if theme uses separators */
  .dc-dark-header .navmenu ul li{ border-color: rgba(255,255,255,.06) ; }
}



/* === Normalised spacing for info pages === */
main{ padding-top: 96px; }
.hero{ padding: 32px 0 24px; }
.section{ padding: 56px 0; }
.hero h1{ margin: 0 0 10px; }
.hero p.lead{ margin: 0 0 8px; }
@media (max-width: 700px){
  .section{ padding: 40px 0; }
  .hero{ padding: 28px 0 18px; }
}
/* CTA bottom alignment */
.section.cta-bottom .cta{ gap: 12px; }
.section.cta-bottom{ padding-top: 32px; padding-bottom: 64px; }



/* header logo spacing & dim helper */
#header .logo img{ margin-right:10px; display:inline-block; vertical-align:middle; }
.dim{ opacity:.7 }



/* breadcrumbs */
.breadcrumbs{ font-size:13px; color:var(--dc-muted,#666); padding:10px 0 0 }
.breadcrumbs a{ color:inherit; text-decoration:none; border-bottom:1px dotted rgba(0,0,0,.25) }
.breadcrumbs a:hover{ color:var(--dc-ink,#222); border-bottom-color:transparent }



/* === Remove stray horizontal strip: hide empty breadcrumbs + zero padding === */
.breadcrumbs{ padding: 0 ; margin: 0 ; }
.breadcrumbs:empty{ display: none ; }

/* === DC: ensure active link color visible on info pages === */
#header .navmenu a.active,
#header .navmenu li.active > a{ color:#F0B400 ; }