/* =========================================================
   State Food Commission Haryana — "Harvest Heritage" theme
   Primary: #2D5A3D (forest green) · Gold: #C89B3C (decorative)
   Accent: #A64B2A (terracotta, citizen action)
   Fonts: Noto Sans (headings + body) + Noto Sans Devanagari (Hindi),
         matching haryanafood.gov.in
   ========================================================= */
:root {
  /* Harvest Heritage core */
  --hh-green:        #2D5A3D;  /* primary — forest green */
  --hh-green-dark:   #1F3D29;  /* hover / topbar / page-banner base */
  --hh-pine:         #16281B;  /* deepest ground: footer, admin sidebar, dept navbar */
  --hh-green-tint:   #E7EFE4;  /* pale leaf tint (icon roundels, hovers) */
  --hh-gold:         #C89B3C;  /* wheat gold — DECORATIVE ONLY on light grounds */
  --hh-gold-deep:    #8A6414;  /* bronze — gold as TEXT/icon on light grounds */
  --hh-gold-tint:    #F6EDD7;  /* pale wheat tint */
  --hh-terracotta:   #A64B2A;  /* accent — the citizen-action color (Grievance) */
  --hh-terracotta-dark: #8C3D20;
  --hh-cream:        #FAF6EE;  /* page ground */
  --hh-parchment:    #F3ECDC;  /* alternate section ground (.section-alt) */
  --hh-surface:      #FFFFFF;  /* cards */
  --hh-surface-warm: #FFFDF7;  /* header, admin topbar */
  --hh-ink:          #212A20;  /* body text */
  --hh-muted:        #5D5A4C;  /* secondary text */
  --hh-border:       #E4DCC9;  /* warm hairline borders */
  --hh-success:      #226038;  --hh-success-bg: #DCEFE2;
  --hh-danger:       #B02A37;  --hh-danger-bg:  #F7E8E0;
  --hh-warn:         #8A6414;  --hh-warn-bg:    #F6EDD7;
  --hh-radius:       .9rem;    /* card radius */
  --hh-radius-lg:    1.15rem;
  --hh-shadow:       0 6px 20px rgba(45, 58, 42, .08);
  --hh-shadow-lift:  0 14px 32px rgba(45, 58, 42, .16);
  --hh-font:         "Noto Sans", "Noto Sans Devanagari", "Segoe UI", system-ui, sans-serif;

  /* Legacy aliases — keep; _AdminLayout inline CSS references these */
  --hsfc-orange:       var(--hh-gold);
  --hsfc-orange-dark:  var(--hh-gold-deep);
  --hsfc-orange-light: var(--hh-gold-tint);
  --hsfc-gray:  var(--hh-muted);
  --hsfc-dark:  var(--hh-ink);
  --hsfc-bg:    var(--hh-parchment);
  --hsfc-green: var(--hh-green);
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--hh-font);
  color: var(--hh-ink);
  background: var(--hh-cream);
  font-size: 1rem;
  line-height: 1.65;
}
h1, h2, h3, .section-title, .hero .hero-content h1, .page-banner h1,
.site-brand .brand-title, .grievance-cta h3 {
  font-family: var(--hh-font);
  font-weight: 600;
}
:lang(hi) { line-height: 1.85; } /* Devanagari matras need headroom */

a {
  color: var(--hh-green);
  text-decoration: underline;
  text-decoration-color: rgba(200,155,60,.55);
  text-underline-offset: 3px;
}
a:hover { color: var(--hh-green-dark); text-decoration-color: var(--hh-gold-deep); }
/* Nav links, card-block links and buttons carry no underline */
.main-nav a, .scheme-card, .news-card, .gallery-tile, .btn, .topbar a,
.site-footer a, .breadcrumb a, .dropdown-item, .notice-tabs .nav-link,
.navbar-brand { text-decoration: none; }

::selection { background: var(--hh-gold-tint); color: var(--hh-ink); }

/* Global focus visibility (GIGW) — bronze on light grounds… */
:focus-visible {
  outline: 3px solid var(--hh-gold-deep);
  outline-offset: 2px;
  border-radius: 2px;
}
/* …bright wheat gold on dark surfaces where bronze would vanish */
.topbar :focus-visible,
.site-footer :focus-visible,
.grievance-cta :focus-visible,
.hero :focus-visible,
.page-banner :focus-visible,
.admin-sidebar :focus-visible,
.back-to-top:focus-visible {
  outline-color: var(--hh-gold);
}

/* Reduced-motion kill switch (WCAG 2.3.3 adjacent) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .scheme-card:hover, .news-card:hover, .gallery-tile:hover img { transform: none !important; }
}

/* Accessibility font scaling */
body.fs-plus { font-size: 1.125rem; }
body.fs-minus { font-size: 0.875rem; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--hh-green-dark); color: #fff; padding: .5rem 1rem;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- Top utility bar ---------- */
.topbar {
  background: var(--hh-green-dark);
  color: var(--hh-cream);
  font-size: .8rem;
  font-weight: 600;
  border-bottom: 2px solid var(--hh-gold);
}
.topbar a, .topbar button {
  color: var(--hh-cream); text-decoration: none; font-weight: 600;
  background: none; border: 0; font-size: .8rem;
}
.topbar a:hover, .topbar button:hover { color: var(--hh-gold); }
.topbar .divider { color: rgba(250,246,238,.45); opacity: 1; margin: 0 .35rem; }

/* ---------- Header ---------- */
.site-header {
  background: var(--hh-surface-warm);
  border-bottom: 1px solid var(--hh-border);
  box-shadow: 0 2px 12px rgba(45,58,42,.06);
  position: sticky; top: 0; z-index: 1030;
}
.site-brand { display: flex; align-items: center; gap: .75rem; }
.site-brand .emblem { height: 52px; width: auto; }
.site-brand .brand-title {
  font-weight: 600; letter-spacing: .01em; font-size: 1.05rem;
  color: var(--hh-green-dark); text-transform: none; line-height: 1.25;
}
.site-brand .brand-sub { font-size: .72rem; color: var(--hh-muted); letter-spacing: .04em; }
/* Noto Sans runs wide: on phones let the title wrap so the menu toggler stays beside it */
@media (max-width: 575.98px) {
  .site-brand { white-space: normal; flex: 1 1 0; min-width: 0; }
}

.main-nav .nav-link {
  color: var(--hh-ink); font-weight: 600; font-size: 1rem; white-space: nowrap;
  padding: 1.2rem .68rem; border-bottom: 3px solid transparent;
}
.main-nav .nav-link:hover { color: var(--hh-green); }
.main-nav .nav-link.active {
  color: var(--hh-green-dark);
  border-bottom-color: var(--hh-gold);
}
.main-nav .dropdown-menu {
  border: 0; border-top: 3px solid var(--hh-gold);
  background: var(--hh-surface-warm);
  box-shadow: var(--hh-shadow-lift); border-radius: 0 0 .5rem .5rem;
}
.main-nav .dropdown-item { font-size: .85rem; font-weight: 500; padding: .5rem 1.25rem; color: var(--hh-ink); }
.main-nav .dropdown-item:hover { background: var(--hh-green-tint); color: var(--hh-green-dark); }

.btn-grievance {
  background: var(--hh-terracotta); color: #fff !important; font-weight: 700;
  border-radius: 2rem; padding: .5rem 1.25rem !important; font-size: .85rem;
  border-bottom: 0 !important;
  box-shadow: 0 3px 10px rgba(166,75,42,.30);
}
.btn-grievance:hover { background: var(--hh-terracotta-dark); }

/* ---------- Hero ---------- */
.hero { position: relative; }
.hero .carousel-item {
  min-height: 420px;
  background-size: cover; background-position: center;
}
/* Safety net: the active slide is always fully visible even if a fade
   transition class lingers (e.g. tab throttled mid-transition). */
.hero.carousel-fade .carousel-item.active,
.hero .carousel.carousel-fade .carousel-item.active { opacity: 1 !important; }
.hero .hero-default {
  min-height: 460px;
  background:
    radial-gradient(900px 420px at 82% -10%, rgba(200,155,60,.28), transparent 62%),
    radial-gradient(700px 300px at 8% 110%, rgba(22,40,27,.55), transparent 60%),
    linear-gradient(150deg, #35684a 0%, #2D5A3D 46%, #1F3D29 100%);
  display: flex; align-items: center;
  position: relative; overflow: hidden;
}
/* Layer 1: field-row texture — fine diagonal furrows, barely-there */
.hero .hero-default::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(115deg,
    rgba(250,246,238,.035) 0 2px, transparent 2px 26px);
}
/* Layer 2: wheat-sheaf band anchored along the bottom, gold at ~30% */
.hero .hero-default::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 190px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='190' viewBox='0 0 160 190'%3E%3Cg fill='none' stroke='%23C89B3C' stroke-opacity='.30' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M80 190V70'/%3E%3Cpath d='M80 78c-14 2-22-6-24-18 12-2 20 6 24 18zM80 78c14 2 22-6 24-18-12-2-20 6-24 18zM80 104c-14 2-22-6-24-18 12-2 20 6 24 18zM80 104c14 2 22-6 24-18-12-2-20 6-24 18zM80 130c-14 2-22-6-24-18 12-2 20 6 24 18zM80 130c14 2 22-6 24-18-12-2-20 6-24 18z'/%3E%3Cpath d='M80 62c0-10 4-16 10-20M80 62c0-10-4-16-10-20'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom / 160px 190px;
  mask-image: linear-gradient(to top, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent);
}
.hero .hero-content { position: relative; z-index: 2; color: #fff; padding-block: 3rem; }
.hero .hero-content h1 {
  font-size: 2.75rem; font-weight: 600; color: var(--hh-cream);
  text-shadow: none; max-width: 720px;
}
/* Gold hairline flourish under the h1 */
.hero .hero-content h1::after {
  content: ""; display: block; width: 96px; height: 3px; margin-top: 1rem;
  background: linear-gradient(90deg, var(--hh-gold), rgba(200,155,60,.25));
  border-radius: 2px;
}
.hero .hero-content p { font-size: 1.1rem; color: rgba(250,246,238,.92); max-width: 620px; }
/* In normal flow (not absolutely positioned) so a slide grows to fit a long
   title and caption instead of clipping them on narrow screens. */
.hero .carousel-caption-full {
  position: relative; min-height: inherit; display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(22,40,27,.78), rgba(22,40,27,.15));
}
@media (max-width: 575.98px) {
  .hero .carousel-caption-full { background: rgba(22,40,27,.62); }
  .hero .carousel-caption-full .hero-content { padding-block: 2rem; }
  .hero .carousel-caption-full .hero-content h1 { font-size: 1.6rem; }
  .hero .carousel-caption-full .hero-content p { font-size: 1rem; }
}
.hero .carousel-control-prev, .hero .carousel-control-next { width: 4%; }

.btn-light-cta {
  background: var(--hh-cream); color: var(--hh-green-dark); font-weight: 700;
  border-radius: 2rem; padding: .6rem 1.6rem;
}
.btn-light-cta:hover { background: var(--hh-gold-tint); color: var(--hh-green-dark); }

/* ---------- Schemes (homepage cards + schemes page) ---------- */
/* Each card, nav item and panel sets --sc inline to the scheme's accent colour;
   the tint and text shades are derived from it so dark mode stays legible. */
.scheme-card, .scheme-nav-item, .scheme-panel {
  --sc: var(--hh-green);
  --sc-tint: color-mix(in srgb, var(--sc) 12%, var(--hh-surface));
  --sc-text: var(--sc);
}
.section-head { max-width: 680px; margin: 0 auto 2.25rem; }
.section-head .section-title { margin-bottom: 1rem; }
.section-kicker {
  color: var(--hh-gold-deep); font-weight: 700; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: .4rem;
}
.scheme-card {
  display: flex; flex-direction: column; gap: .75rem; height: 100%;
  padding: 1.25rem 1rem; color: var(--hh-ink); text-decoration: none;
  background: var(--hh-surface); border: 1px solid var(--hh-border); border-top: 3px solid var(--sc);
  border-radius: var(--hh-radius); box-shadow: var(--hh-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.scheme-card:hover { transform: translateY(-3px); box-shadow: var(--hh-shadow-lift); color: var(--hh-ink); }
.scheme-card .si, .scheme-nav-item .si, .scheme-panel-head .si {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.scheme-card .si {
  width: 48px; height: 48px; border-radius: 11px; font-size: 1.4rem;
  background: var(--sc-tint); color: var(--sc-text);
}
.scheme-card .name { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.scheme-card .desc { color: var(--hh-muted); font-size: .84rem; line-height: 1.5; }
.scheme-card .more { margin-top: auto; color: var(--sc-text); font-weight: 700; font-size: .8rem; }
.scheme-card .more i { font-size: .7rem; }

.scheme-nav { display: flex; flex-direction: column; gap: .5rem; }
.scheme-nav-item {
  display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem;
  background: var(--hh-parchment); color: var(--hh-muted); text-decoration: none;
  border: 1px solid var(--hh-border); border-left: 4px solid transparent; border-radius: .5rem;
  font-weight: 600; font-size: .9rem; line-height: 1.3;
}
.scheme-nav-item:hover { color: var(--hh-ink); }
.scheme-nav-item.active {
  background: var(--hh-surface); color: var(--hh-ink);
  border-left-color: var(--sc); box-shadow: var(--hh-shadow);
}
.scheme-nav-item .si {
  width: 36px; height: 36px; border-radius: 9px; font-size: 1.1rem;
  background: var(--sc-tint); color: var(--sc-text);
}

.scheme-panel {
  background: var(--hh-surface); border: 1px solid var(--hh-border);
  border-radius: var(--hh-radius-lg); overflow: hidden; box-shadow: var(--hh-shadow);
}
.scheme-panel-head { background: var(--sc); color: #fff; padding: 1.6rem 1.75rem; }
.scheme-panel-head .si {
  width: 56px; height: 56px; border-radius: 13px; font-size: 1.6rem;
  background: rgba(255,255,255,.18);
}
.scheme-panel-head h2 { color: #fff; font-size: 1.5rem; font-weight: 600; margin: 0; }
.scheme-panel-head .alt-name { font-size: .95rem; opacity: .9; margin-top: .15rem; }
.scheme-panel-head .lead-text { margin-top: 1.1rem; max-width: 640px; line-height: 1.65; opacity: .95; }
.scheme-panel-head .lead-text p:last-child { margin-bottom: 0; }
.scheme-panel-body { padding: 1.75rem; }
.scheme-h {
  font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--hh-ink);
  display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
}
.text-eligibility { color: var(--hh-green); }
.text-benefit { color: var(--hh-gold-deep); }
.scheme-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
.scheme-list li { position: relative; padding-left: 1.4rem; font-size: .9rem; line-height: 1.5; color: var(--hh-ink); }
.scheme-list li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.scheme-list.check li::before { content: "✓"; content: "✓" / ""; color: var(--hh-green); }
.scheme-list.dot li::before { content: "●"; content: "●" / ""; color: var(--hh-gold-deep); font-size: .7rem; top: .25rem; }
.scheme-docs { margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--hh-border); }
.scheme-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.scheme-chips li {
  background: var(--hh-parchment); border: 1px solid var(--hh-border); border-radius: 999px;
  padding: .4rem .9rem; font-size: .82rem; font-weight: 500; color: var(--hh-ink);
}
.scheme-cta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-scheme {
  --bs-btn-bg: var(--sc); --bs-btn-border-color: var(--sc); --bs-btn-color: #fff;
  --bs-btn-hover-bg: color-mix(in srgb, var(--sc) 85%, #000); --bs-btn-hover-border-color: var(--bs-btn-hover-bg); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--bs-btn-hover-bg); --bs-btn-active-border-color: var(--bs-btn-hover-bg); --bs-btn-active-color: #fff;
  font-weight: 600;
}
@media (max-width: 991.98px) {
  /* Scheme nav becomes a swipeable row above the panel */
  .scheme-nav { position: relative; flex-direction: row; overflow-x: auto; padding-bottom: .35rem; scroll-snap-type: x mandatory; }
  .scheme-nav-item {
    flex: 0 0 auto; max-width: 240px; scroll-snap-align: start;
    border-left-width: 1px; border-bottom: 3px solid transparent;
  }
  .scheme-nav-item.active { border-left-color: var(--hh-border); border-bottom-color: var(--sc); }
  .scheme-panel-head, .scheme-panel-body { padding: 1.25rem; }
}

/* ---------- Sections ---------- */
/* Block padding only: many pages use `container section` on one element, and a
   horizontal 0 here would strip the container's side gutter on phones. */
.section { padding-block: 4.5rem; }
.section-alt {
  background: var(--hh-parchment);
  border-top: 1px solid var(--hh-border);
  border-bottom: 1px solid var(--hh-border);
}
.section-title {
  font-weight: 600; font-size: 1.75rem; margin-bottom: 1.5rem; position: relative;
  color: var(--hh-green-dark);
}
/* Wheat rule: bronze seed-dot leading a gold bar that fades out */
.section-title::after {
  content: ""; display: block; width: 72px; height: 6px; margin-top: .6rem;
  background:
    radial-gradient(circle 3px at 3px 3px, var(--hh-gold-deep) 98%, transparent),
    linear-gradient(90deg, var(--hh-gold) 0 46px, rgba(200,155,60,.35) 46px 100%);
  background-position: 0 0, 10px 2px;
  background-size: 6px 6px, 62px 2px;
  background-repeat: no-repeat;
  border-radius: 3px;
}
.section-title.text-center::after { margin-left: auto; margin-right: auto; }
.text-body-muted { color: var(--hh-muted); }

/* Dignitaries */
.dignitary-card { text-align: center; }
.dignitary-card .photo {
  width: 110px; height: 110px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--hh-surface);
  box-shadow: 0 0 0 2px var(--hh-gold), var(--hh-shadow);
  background: var(--hh-green-tint);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2.5rem; color: var(--hh-green);
}
.dignitary-card .name { font-weight: 700; font-size: .95rem; margin-top: .6rem; color: var(--hh-ink); }
.dignitary-card .desig {
  font-size: .75rem; color: var(--hh-gold-deep); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}

/* Notification tabs */
.notice-tabs { border-bottom: 2px solid var(--hh-border); }
.notice-tabs .nav-link {
  font-weight: 700; color: var(--hh-muted); border: 0;
  border-bottom: 3px solid transparent; border-radius: 0; font-size: .9rem;
}
.notice-tabs .nav-link:hover { color: var(--hh-green-dark); }
.notice-tabs .nav-link.active { color: var(--hh-green-dark); border-bottom-color: var(--hh-gold); background: transparent; }
.notice-list { list-style: none; padding: 0; margin: 0; }
.notice-list li { padding: .85rem 0; border-bottom: 1px dotted var(--hh-border); display: flex; gap: .75rem; }
.notice-list li i { color: var(--hh-gold-deep); margin-top: .2rem; }
.notice-list .date { font-size: .78rem; font-weight: 600; color: var(--hh-muted); }

/* News */
.news-card {
  background: var(--hh-surface); border-radius: var(--hh-radius); padding: 1.25rem;
  border: 1px solid var(--hh-border);
  box-shadow: var(--hh-shadow); height: 100%;
  border-left: 4px solid var(--hh-gold);
  text-decoration: none;
  transition: border-left-color .2s, box-shadow .2s;
}
.news-card:hover { border-left-color: var(--hh-terracotta); box-shadow: var(--hh-shadow-lift); }
.news-card .date {
  color: var(--hh-terracotta); font-weight: 700; font-size: .78rem;
}
.news-card .title { font-weight: 600; font-size: .95rem; color: var(--hh-ink); }
.news-card:hover .title { color: var(--hh-green-dark); }

/* Gallery */
.gallery-tile {
  border-radius: var(--hh-radius); overflow: hidden; position: relative; display: block;
  aspect-ratio: 4/3; background: var(--hh-gold-tint);
  border: 1px solid var(--hh-border);
}
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gallery-tile:hover img { transform: scale(1.06); }
/* Museum-mat inner frame on hover */
.gallery-tile::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid rgba(250,246,238,0);
  border-radius: calc(var(--hh-radius) - 6px);
  transition: border-color .25s; pointer-events: none;
}
.gallery-tile:hover::after { border-color: rgba(250,246,238,.85); }
.gallery-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%; color: var(--hh-gold-deep); font-size: 2rem;
}

/* Grievance CTA */
.grievance-cta {
  background:
    radial-gradient(700px 260px at 90% -20%, rgba(200,155,60,.25), transparent 60%),
    linear-gradient(135deg, var(--hh-green) 0%, var(--hh-green-dark) 100%);
  color: #fff; border-radius: var(--hh-radius-lg); padding: 2.75rem;
  border: 1px solid rgba(200,155,60,.45);
  position: relative; overflow: hidden;
}
/* Wheat band echo, right-aligned, quieter than the hero */
.grievance-cta::before {
  content: ""; position: absolute; right: -10px; bottom: -20px; width: 340px; height: 160px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='190' viewBox='0 0 160 190'%3E%3Cg fill='none' stroke='%23C89B3C' stroke-opacity='.30' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M80 190V70'/%3E%3Cpath d='M80 78c-14 2-22-6-24-18 12-2 20 6 24 18zM80 78c14 2 22-6 24-18-12-2-20 6-24 18zM80 104c-14 2-22-6-24-18 12-2 20 6 24 18zM80 104c14 2 22-6 24-18-12-2-20 6-24 18zM80 130c-14 2-22-6-24-18 12-2 20 6 24 18zM80 130c14 2 22-6 24-18-12-2-20 6-24 18z'/%3E%3Cpath d='M80 62c0-10 4-16 10-20M80 62c0-10-4-16-10-20'/%3E%3C/g%3E%3C/svg%3E") repeat-x bottom / 160px 190px;
  opacity: .55; pointer-events: none;
}
.grievance-cta > * { position: relative; }
.grievance-cta h3 { font-weight: 600; color: var(--hh-cream); }
.grievance-cta p { color: rgba(250,246,238,.92); }

/* About text + optional image (homepage) */
.about-copy { text-align: justify; text-justify: inter-word; }
.about-img {
  width: 100%; aspect-ratio: 10/9; object-fit: cover;
  border-radius: var(--hh-radius-lg); border: 1px solid var(--hh-border);
  box-shadow: var(--hh-shadow);
}

/* Related links (government portal logos) */
.related-links-section { padding: 2.5rem 0; }
.related-links {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem;
}
.related-links a {
  display: flex; align-items: center; justify-content: center; height: 72px; padding: .5rem;
  /* Logos are drawn for a white ground, so keep the tile white in both themes */
  background: #fff; border: 1px solid var(--hh-border); border-radius: var(--hh-radius);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.related-links a:hover { border-color: var(--hh-gold); box-shadow: var(--hh-shadow); }
.related-links img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--hh-pine); color: #D8D2BF; font-size: .85rem;
  border-top: 3px solid var(--hh-gold);
}
.site-footer h6 {
  color: var(--hh-gold); font-weight: 700; text-transform: uppercase;
  font-size: .85rem; letter-spacing: .05em; margin-bottom: 1rem;
  padding-left: .9rem; position: relative;
}
.site-footer h6::before {
  content: ""; position: absolute; left: 0; top: .15em; bottom: .15em;
  width: 3px; background: var(--hh-gold); border-radius: 2px;
}
.site-footer a { color: #D8D2BF; display: block; padding: .2rem 0; text-decoration: none; }
.site-footer a:hover { color: var(--hh-gold); text-decoration: underline; text-decoration-color: var(--hh-gold); }
.site-footer .footer-bottom { background: #0F1D13; color: #C4BFAE; padding: 1rem 0; font-size: .78rem; }
.site-footer .footer-meta { font-size: .78rem; color: #C4BFAE; padding-bottom: .6rem; margin-bottom: .5rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.site-footer .footer-meta i { color: var(--hh-gold); margin-right: .3rem; }
.site-footer i { color: var(--hh-gold); margin-right: .4rem; }

/* Back to top */
.back-to-top {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1050;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--hh-green); color: #fff; border: 0;
  box-shadow: 0 4px 14px rgba(45,90,61,.45);
  display: none; align-items: center; justify-content: center;
}
.back-to-top:hover { background: var(--hh-green-dark); }
.back-to-top.show { display: inline-flex; }

/* ---------- Generic page ---------- */
.page-banner {
  background:
    radial-gradient(600px 220px at 85% -30%, rgba(200,155,60,.25), transparent 60%),
    linear-gradient(135deg, var(--hh-green) 0%, var(--hh-green-dark) 100%);
  color: #fff; padding: 2.75rem 0;
  border-bottom: 3px solid var(--hh-gold);
}
.page-banner h1 { font-weight: 600; font-size: 1.9rem; margin: 0; color: var(--hh-cream); }
.breadcrumb { margin: .35rem 0 0; --bs-breadcrumb-divider-color: rgba(200,155,60,.8); }
.breadcrumb a, .breadcrumb-item.active { color: #EFE9D8; font-size: .8rem; }
.breadcrumb a:hover { color: var(--hh-gold); }
.content-html { line-height: 1.85; color: #3C4237; }
.content-html h2, .content-html h3 { font-weight: 600; margin-top: 1.5rem; color: var(--hh-green-dark); }

/* ---------- Forms / GRS ---------- */
.form-card {
  background: var(--hh-surface); border-radius: var(--hh-radius-lg);
  border: 1px solid var(--hh-border); border-top: 3px solid var(--hh-gold);
  box-shadow: var(--hh-shadow); padding: 2rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--hh-green);
  box-shadow: 0 0 0 .25rem rgba(45,90,61,.20);
}
.required::after { content: " *"; color: var(--hh-danger); }
.btn-hsfc { background: var(--hh-green); border-color: var(--hh-green); color: #fff; font-weight: 600; }
.btn-hsfc:hover, .btn-hsfc:focus {
  background: var(--hh-green-dark); border-color: var(--hh-green-dark); color: #fff;
}
.btn-outline-hsfc { border: 2px solid var(--hh-green); color: var(--hh-green); font-weight: 600; background: transparent; }
.btn-outline-hsfc:hover { background: var(--hh-green); border-color: var(--hh-green); color: #fff; }

/* Status badges — warm-tinted grounds, ink-dark hue-matched text (all AA) */
.status-badge {
  font-size: .72rem; font-weight: 700; padding: .35em .8em; border-radius: 2rem;
  border: 1px solid rgba(33,42,32,.06);
}
.st-Registered { background: #E3EAF6; color: #2C4E80; }  /* slate blue */
.st-Assigned   { background: #F6EDD7; color: #8A6414; }  /* wheat bronze */
.st-InProgress { background: #DFF0F2; color: #14606B; }  /* teal */
.st-Escalated  { background: #F8DDDD; color: #9A2430; }  /* crimson */
.st-Resolved   { background: #DCEFE2; color: #226038; }  /* forest */
.st-Closed     { background: #E9E6DD; color: #4A4A40; }  /* stone */
.st-Reopened   { background: #FBE8D5; color: #8F4E0E; }  /* amber-rust */
.st-Rejected   { background: #EFDDE3; color: #7C2237; }  /* burgundy */

/* Timeline */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--hh-border); }
.timeline li { position: relative; padding: 0 0 1.4rem 2rem; }
.timeline li::before {
  content: ""; position: absolute; left: 2px; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--hh-gold-tint); border: 4px solid var(--hh-green);
}
.timeline li:first-child::before { border-color: var(--hh-terracotta); }
.timeline .t-date { font-size: .78rem; font-weight: 600; color: var(--hh-muted); }

/* ---------- Stat tiles (dashboards) — light ledger cards ---------- */
.stat-tile {
  --tile-accent: var(--hh-green);
  position: relative; overflow: hidden;
  border-radius: var(--hh-radius); padding: 1.25rem 1.4rem;
  background: var(--hh-surface); color: var(--hh-ink);
  border: 1px solid var(--hh-border);
  box-shadow: var(--hh-shadow);
}
.stat-tile::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--tile-accent);
}
.stat-tile::after {
  content: ""; position: absolute; right: -34px; top: -34px;
  width: 110px; height: 110px; border-radius: 50%;
  background: var(--tile-accent); opacity: .08; pointer-events: none;
}
.stat-tile .num {
  font-size: 1.9rem; font-weight: 800; line-height: 1;
  color: var(--hh-ink);
  font-variant-numeric: tabular-nums;
}
.stat-tile .lbl {
  font-size: .78rem; font-weight: 600; color: var(--hh-muted); opacity: 1;
  text-transform: uppercase; letter-spacing: .04em;
}
.tile-orange { --tile-accent: #8A6414; }  /* harvest bronze — Total */
.tile-blue   { --tile-accent: #4C6A92; }  /* slate — Open */
.tile-green  { --tile-accent: #2D5A3D; }  /* forest — Resolved */
.tile-red    { --tile-accent: #A64B2A; }  /* terracotta — Escalated / SLA */
.tile-gray   { --tile-accent: #6B675A; }  /* stone — Citizens */

/* ---------- Tables (admin lists share these) ---------- */
.table { border-color: var(--hh-border); }
.table-light > * { background: var(--hh-parchment) !important; color: var(--hh-ink); }
.table-hover tbody tr:hover { background: rgba(45,90,61,.05); }

/* The header collapses below xl (navbar-expand-xl): the full menu in Noto Sans
   does not fit beside the brand in the 960px lg container. */
@media (max-width: 1199.98px) {
  .main-nav .nav-link { padding: .6rem 1rem; border-bottom: 0; border-left: 3px solid transparent; }
  .main-nav .nav-link.active { border-left-color: var(--hh-gold); border-bottom: 0; }
}
@media (max-width: 991.98px) {
  .hero .carousel-item, .hero .hero-default { min-height: 320px; }
  .hero .hero-content h1 { font-size: 2.1rem; }
}

@media print {
  .topbar, .site-header, .site-footer, .back-to-top, .btn, form { display: none !important; }
}

/* =========================================================================
   HARVEST HERITAGE — DARK THEME
   Activated by data-theme="dark" on <html> (set by the no-flash head script).
   Light theme is unchanged (default :root, no override). This block ONLY
   overrides token VALUES + the handful of hardcoded colors that bypass tokens.
   Legacy --hsfc-* aliases are var()-mapped onto --hh-* in :root, so they
   inherit these values automatically — not redeclared here.
   ------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;                     /* native scrollbars/controls go dark */

  /* --- Greens: set to LIGHT LEAF so all text/link/icon usages pass AA;
     filled-button GROUNDS are re-pinned to solid green below. --- */
  --hh-green:        #7CC49A;  /* leaf — links, inline text, icons, outline-btn text */
  --hh-green-dark:   #9AD3B5;  /* pale leaf — headings, active/hover TEXT states */
  --hh-pine:         #0C130E;  /* deepest ground: footer, admin sidebar, dept navbar */
  --hh-green-tint:   #24382A;  /* DARK leaf tint — roundels, nav/dropdown hover grounds */

  /* --- Gold / wheat --- */
  --hh-gold:         #D9B25A;  /* wheat — decorative AND safe as text */
  --hh-gold-deep:    #E7C878;  /* bright wheat — gold-as-text/icon, focus outline */
  --hh-gold-tint:    #3A2E12;  /* DARK wheat tint — ::selection, gallery bg, warn ground */

  /* --- Terracotta (citizen action) --- */
  --hh-terracotta:      #E06A45; /* citizen-action TEXT (news date, accents) */
  --hh-terracotta-dark: #C0532F; /* grievance BUTTON ground — white text */

  /* --- Grounds --- */
  --hh-cream:        #111712;  /* PAGE ground (deep warm near-black green) */
  --hh-parchment:    #182016;  /* alt section ground (.section-alt, table-light) */
  --hh-surface:      #1B2419;  /* cards */
  --hh-surface-warm: #1E2A1D;  /* site header, admin topbar */

  /* --- Text --- */
  --hh-ink:          #E8EEE3;  /* body text */
  --hh-muted:        #A9B0A0;  /* secondary */
  --hh-border:       #2E3A2B;  /* hairline borders (non-text) */

  /* --- Status hues (light text + deep tinted ground) --- */
  --hh-success:      #6FBF8E;  --hh-success-bg: #16281B;
  --hh-danger:       #F08276;  --hh-danger-bg:  #2E1512;
  --hh-warn:         #E7C878;  --hh-warn-bg:    #33290F;

  /* --- Non-color tokens: geometry unchanged, shadows deepened for dark --- */
  --hh-radius:       .9rem;
  --hh-radius-lg:    1.15rem;
  --hh-shadow:       0 6px 20px rgba(0,0,0,.45);
  --hh-shadow-lift:  0 14px 32px rgba(0,0,0,.60);
}

/* ---- smooth switch (disabled by the reduced-motion block above) --------- */
:root[data-theme="dark"] body { transition: background-color .3s ease, color .3s ease; }

/* ---- generic page body text (hardcoded #3C4237 → invisible on dark) ----- */
:root[data-theme="dark"] .content-html { color: var(--hh-ink); }

/* ---- TOP UTILITY BAR ---------------------------------------------------- */
:root[data-theme="dark"] .topbar { background: #16281B; border-bottom-color: var(--hh-gold); }
:root[data-theme="dark"] .topbar a,
:root[data-theme="dark"] .topbar button { color: #E8EEE3; }
:root[data-theme="dark"] .topbar a:hover,
:root[data-theme="dark"] .topbar button:hover { color: var(--hh-gold); }
:root[data-theme="dark"] .topbar .divider { color: rgba(232,238,227,.40); }

/* ---- SKIP LINK ---------------------------------------------------------- */
:root[data-theme="dark"] .skip-link { background: #1F3D29; color: #fff; }

/* ---- FILLED GREEN BUTTONS — re-pin GROUND to solid green (token is leaf now) */
:root[data-theme="dark"] .btn-hsfc { background: #2D5A3D; border-color: #2D5A3D; color: #fff; }
:root[data-theme="dark"] .btn-hsfc:hover,
:root[data-theme="dark"] .btn-hsfc:focus { background: #367049; border-color: #367049; color: #fff; }
:root[data-theme="dark"] .btn-outline-hsfc:hover { background: #2D5A3D; border-color: #2D5A3D; color: #fff; }
:root[data-theme="dark"] .back-to-top { background: #2D5A3D; }
:root[data-theme="dark"] .back-to-top:hover { background: #367049; }
:root[data-theme="dark"] .scheme-card,
:root[data-theme="dark"] .scheme-nav-item,
:root[data-theme="dark"] .scheme-panel {
  --sc-tint: color-mix(in srgb, var(--sc) 30%, var(--hh-surface));
  --sc-text: color-mix(in srgb, var(--sc) 45%, #fff);
}

/* ---- LIGHT-CTA on the green hero (bg was var(--hh-cream), now dark) ------ */
:root[data-theme="dark"] .btn-light-cta { background: #E8EEE3; color: #1F3D29; }
:root[data-theme="dark"] .btn-light-cta:hover { background: #D9B25A; color: #1F3D29; }

/* ---- GRIEVANCE (citizen action) button — hardcodes color:#fff !important - */
:root[data-theme="dark"] .btn-grievance { background: var(--hh-terracotta-dark); color: #fff !important; }
:root[data-theme="dark"] .btn-grievance:hover { background: #A64B2A; }

/* ---- HERO / PAGE-BANNER / GRIEVANCE-CTA panels -------------------------- */
:root[data-theme="dark"] .hero .hero-content h1 { color: #F1F5EC; }
:root[data-theme="dark"] .page-banner {
  background:
    radial-gradient(600px 220px at 85% -30%, rgba(217,178,90,.18), transparent 60%),
    linear-gradient(135deg, #2D5A3D 0%, #1F3D29 100%);
}
:root[data-theme="dark"] .page-banner h1 { color: #F1F5EC; }
:root[data-theme="dark"] .grievance-cta {
  background:
    radial-gradient(700px 260px at 90% -20%, rgba(217,178,90,.20), transparent 60%),
    linear-gradient(135deg, #2D5A3D 0%, #1F3D29 100%);
  border-color: rgba(217,178,90,.35);
}
:root[data-theme="dark"] .grievance-cta h3 { color: #F1F5EC; }

/* ---- FORM CONTROLS (dark field + light text + visible border) -----------
   Border lifted to #647A5C so the input boundary clears WCAG 1.4.11 (3:1):
   3.71:1 vs field #151C14, 3.41:1 vs card, 3.60:1 vs page. */
:root[data-theme="dark"] .form-control,
:root[data-theme="dark"] .form-select {
  background-color: #151C14; color: var(--hh-ink); border-color: #647A5C;
}
:root[data-theme="dark"] .form-control::placeholder { color: var(--hh-muted); }
:root[data-theme="dark"] .form-control:focus,
:root[data-theme="dark"] .form-select:focus {
  border-color: var(--hh-green);
  box-shadow: 0 0 0 .25rem rgba(124,196,154,.30);
}

/* ---- TABLES ------------------------------------------------------------- */
:root[data-theme="dark"] .table-hover tbody tr:hover { background: rgba(255,255,255,.05); }

/* ---- STATUS BADGES .st-* — dark-tinted ground + light hue-matched text --- */
:root[data-theme="dark"] .status-badge { border-color: rgba(255,255,255,.06); }
:root[data-theme="dark"] .st-Registered { background:#1B2740; color:#9DBCEB; }
:root[data-theme="dark"] .st-Assigned   { background:#33290F; color:#E7C878; }
:root[data-theme="dark"] .st-InProgress { background:#10333A; color:#6FCAD6; }
:root[data-theme="dark"] .st-Escalated  { background:#3A1620; color:#F08A96; }
:root[data-theme="dark"] .st-Resolved   { background:#16281B; color:#6FBF8E; }
:root[data-theme="dark"] .st-Closed     { background:#26251F; color:#BDB9AC; }
:root[data-theme="dark"] .st-Reopened   { background:#3A2410; color:#E8A765; }
:root[data-theme="dark"] .st-Rejected   { background:#331521; color:#E58AA0; }

/* ---- STAT-TILE ACCENTS — brightened so they don't go muddy on dark ------ */
:root[data-theme="dark"] .stat-tile.tile-orange { --tile-accent:#D9B25A; }
:root[data-theme="dark"] .stat-tile.tile-blue   { --tile-accent:#7FA0D0; }
:root[data-theme="dark"] .stat-tile.tile-green  { --tile-accent:#7CC49A; }
:root[data-theme="dark"] .stat-tile.tile-red    { --tile-accent:#E06A45; }
:root[data-theme="dark"] .stat-tile.tile-gray   { --tile-accent:#A9B0A0; }

/* ---- BOOTSTRAP TEXT UTILITIES (explicit fallback alongside data-bs-theme) - */
:root[data-theme="dark"] .text-success { color: var(--hh-success) !important; }
:root[data-theme="dark"] .text-danger  { color: var(--hh-danger)  !important; }

/* =========================================================
   Gallery lightbox / image preview
   Overlay sits on a dark pine backdrop in BOTH themes, so its
   controls use light-on-dark colors directly (no token swap).
   ========================================================= */
button.gallery-tile {
  /* the tile is now a <button>; reset UA button chrome, keep the frame look */
  padding: 0; margin: 0; width: 100%; text-align: inherit;
  font: inherit; color: inherit;
}
.gallery-tile[data-lightbox] { cursor: zoom-in; }
.gallery-tile:focus-visible {
  outline: 3px solid var(--hh-gold-deep);
  outline-offset: 2px;
}

.hh-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .22s ease;
}
.hh-lightbox.is-open { opacity: 1; }
.hh-lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(12, 19, 14, .92); /* deep pine, translucent */
}
.hh-lightbox__stage {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; width: 100%; height: 100%;
  padding: clamp(3rem, 8vw, 5rem) clamp(3rem, 7vw, 5.5rem);
  box-sizing: border-box;
}
.hh-lightbox__figure {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  gap: .85rem; max-width: 100%; min-width: 0;
}
.hh-lightbox__img {
  max-width: 90vw; max-height: 85vh; width: auto; height: auto;
  object-fit: contain; border-radius: var(--hh-radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  transform: scale(.96); transition: transform .22s ease;
  background: var(--hh-pine);
}
.hh-lightbox.is-open .hh-lightbox__img { transform: scale(1); }
.hh-lightbox__meta {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  color: var(--hh-cream); text-align: center; max-width: 90vw;
}
.hh-lightbox__caption { font-size: .95rem; font-weight: 600; }
.hh-lightbox__counter { font-size: .82rem; color: rgba(250, 246, 238, .7); }

/* Circular gold/cream controls, readable on the dark overlay */
.hh-lightbox__btn {
  position: absolute; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; padding: 0;
  border-radius: 50%; border: 1px solid rgba(200, 155, 60, .55);
  background: rgba(22, 40, 27, .72); color: var(--hh-cream);
  font-size: 1.1rem; cursor: pointer; line-height: 1;
  transition: background .18s, color .18s, transform .18s;
}
.hh-lightbox__btn:hover { background: var(--hh-gold); color: var(--hh-pine); }
.hh-lightbox__btn:focus-visible {
  outline: 3px solid var(--hh-gold);
  outline-offset: 2px;
}
.hh-lightbox__close { top: 1rem; right: 1rem; }
.hh-lightbox__prev  { left: 1rem;  top: 50%; transform: translateY(-50%); }
.hh-lightbox__next  { right: 1rem; top: 50%; transform: translateY(-50%); }
.hh-lightbox__prev:hover { transform: translateY(-50%) scale(1.08); }
.hh-lightbox__next:hover { transform: translateY(-50%) scale(1.08); }

@media (max-width: 575.98px) {
  .hh-lightbox__stage { padding: 3.5rem .5rem; }
  .hh-lightbox__btn { width: 2.6rem; height: 2.6rem; font-size: 1rem; }
  .hh-lightbox__prev { left: .35rem; }
  .hh-lightbox__next { right: .35rem; }
  .hh-lightbox__img { max-width: 96vw; max-height: 74vh; }
}

/* Honour the reduced-motion preference: no fade / scale animation */
@media (prefers-reduced-motion: reduce) {
  .hh-lightbox,
  .hh-lightbox__img { transition: none !important; }
  .hh-lightbox__img { transform: none !important; }
}