/* VGDSWEBSITE — global site styles layered on top of MudBlazor's defaults.
   Brand tokens mirror the original static site's assets/css/variables.css. */

:root {
  --vgds-river-blue-900: #072B3E;
  --vgds-river-blue-700: #146C94;
  --vgds-forest-green-700: #2F7A47;
  --vgds-aqua-600: #14A79E;
  --vgds-sand-100: #FBF7EF;
}

html, body {
  font-family: "Poppins", "Noto Sans Devanagari", sans-serif;
}

[lang="hi"] {
  font-family: "Noto Sans Devanagari", "Poppins", sans-serif;
}

/* Accessibility: text-size stepper, applied via UiPreferencesService -> uiPreferences.js */
html[data-font-step="lg"] { font-size: 112.5%; }
html[data-font-step="xl"] { font-size: 125%; }

/* Accessibility: high-contrast mode */
html[data-contrast="high"] {
  --vgds-river-blue-700: #7FD4FF;
  --vgds-forest-green-700: #8CE99A;
  --vgds-aqua-600: #FFD866;
}
html[data-contrast="high"] body {
  background: #000 !important;
  color: #fff !important;
}

/* Skip-to-content link, mirroring the static site's accessibility pattern */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--vgds-river-blue-900);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 2000;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

/* Blazor's enhanced navigation gives the page's first <h1> tabindex="-1" and focuses it after
   each navigation, so screen readers announce the new page — a11y feature, not a real keyboard
   interaction. Chromium's :focus-visible heuristic still paints a ring for it though, and the
   VGDS design system's generic [tabindex]:focus-visible rule (main.css) is more specific than a
   plain h1:focus, so it wins and draws an outline box across the hero heading on every load.
   h1[tabindex]:focus-visible has higher specificity than [tabindex]:focus-visible, so this wins. */
h1:focus,
h1:focus-visible,
h1[tabindex]:focus-visible {
  outline: none;
}

.validation-message {
  color: var(--mud-palette-error, #B23A32);
}

/* Homepage hero: the image stays pinned behind the page while the rest of the hero (kicker,
   heading, buttons) scrolls up over it — a parallax "blend" effect the source prototype's own
   main.css didn't have, added here rather than editing that ported file directly. The <img> in
   Home.razor is now visually-hidden (kept for its alt text) and this div's own background-image
   (set inline, same URL) carries the visible effect instead — background-attachment:fixed only
   pins the image *within* this element's own box while it's on screen; once the hero scrolls
   past, the Key Facts section below covers it normally, same as any other element. Not supported
   on iOS Safari (silently falls back to a normal scrolling image there) — acceptable, common
   degradation for this effect. */
.hero-vgds .hero-media {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Homepage header/hero blend: SiteHeader.razor only adds .site-header-overlay on "/" (see its
   IsHomePage remarks) — there, the header starts transparent, sitting directly over the hero
   image right below GovTopBar (position:absolute takes it out of flow, so the hero renders
   immediately after GovTopBar with no gap), then Home.razor's initHeaderScroll (homePage.js)
   flips it to .scrolled — position:fixed, solid background — once the user scrolls past ~40px,
   at which point it behaves exactly like every other page's header. `top` is set inline by that
   same JS call (to GovTopBar's actual measured height); the value below is only a same-frame
   fallback so nothing renders at top:0 for the instant before JS runs. */
.site-header.site-header-overlay {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  /* A flat `transparent` background let the raw hero photo show through unmodified, so nav
     text contrast rode entirely on how light/dark that particular patch of image happened
     to be — over the lighter open-water area it read as washed-out/"faded" rather than a
     deliberate look. A dark top-down scrim (matching .hero-scrim's own tone) guarantees
     consistent contrast for the white nav text regardless of what's behind it, and reads as
     an intentional part of the hero rather than the header just being see-through. */
  background: linear-gradient(180deg, rgba(7, 43, 62, 0.65) 0%, rgba(7, 43, 62, 0.35) 70%, rgba(7, 43, 62, 0) 100%);
  backdrop-filter: none;
  box-shadow: none;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* MudBlazor reserves padding-top on .mud-main-content sized to an AppBar — dead space on
   the PUBLIC site specifically, which never uses MudAppBar (GovTopBar/SiteHeader are plain
   in-flow elements, not a Mud app bar needing a spacer). Confirmed visible on every public
   page, not just the hero/overlay ones (a flat 48px cream-colored gap between the header
   and the actual page content). Scoped to .vgds-public-shell (MainLayout's own MudLayout)
   rather than the bare .mud-main-content class, since the Admin CMS's own layout
   (AdminLayout.razor) *does* use a real MudAppBar and genuinely needs this spacing — a
   global override would render admin page content underneath its fixed app bar.
   !important because MudBlazor's own media-query-scoped rules for this class otherwise
   keep winning the cascade here regardless of source order. */
.vgds-public-shell .mud-main-content {
  padding-top: 0 !important;
}
.site-header.site-header-overlay .brand-title,
.site-header.site-header-overlay .brand-subtitle,
.site-header.site-header-overlay .navbar-vgds .nav-link {
  color: #fff;
  transition: color 0.25s ease;
}
.site-header.site-header-overlay .navbar-vgds .nav-link:hover,
.site-header.site-header-overlay .navbar-vgds .nav-link:focus-visible,
.site-header.site-header-overlay .navbar-vgds .nav-link.active {
  color: var(--vgds-aqua-400, #5CD8CD);
}
.site-header.site-header-overlay .brand-emblem {
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.site-header.site-header-overlay .navbar-toggler {
  filter: brightness(0) invert(1);
}
/* The expanded mobile menu is a block-level dropdown of its own — give it a solid backing
   so its (still-white-styled) links stay readable over the hero image while unscrolled. */
.site-header.site-header-overlay .navbar-collapse.show {
  background: rgba(7, 43, 62, 0.97);
  border-radius: var(--radius-md, 10px);
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
}

.site-header.site-header-overlay.scrolled {
  position: fixed;
  top: 0;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(160%) blur(6px);
  box-shadow: var(--shadow-sm);
}
.site-header.site-header-overlay.scrolled .brand-title,
.site-header.site-header-overlay.scrolled .navbar-vgds .nav-link {
  color: var(--vgds-ink-900);
}
.site-header.site-header-overlay.scrolled .brand-subtitle {
  color: var(--vgds-text-muted);
}
.site-header.site-header-overlay.scrolled .navbar-vgds .nav-link:hover,
.site-header.site-header-overlay.scrolled .navbar-vgds .nav-link:focus-visible,
.site-header.site-header-overlay.scrolled .navbar-vgds .nav-link.active {
  color: var(--vgds-primary, #146C94);
}
.site-header.site-header-overlay.scrolled .navbar-toggler {
  filter: none;
}

/* SiteFooter link columns */
.footer-heading {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  text-transform: uppercase;
}
.footer-link {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 0.9rem;
  width: fit-content;
}
.footer-link:hover {
  color: var(--vgds-aqua-400, #5CD8CD) !important;
}

/* Honest "not published yet" panel for homepage sections whose source module (News & Events,
   Gallery) doesn't exist yet — styled like the rest of the page's cards instead of a generic
   alert box, without inventing any placeholder data. */
.coming-soon-panel {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: repeating-linear-gradient(135deg, var(--vgds-sand-200, #F5EDDC), var(--vgds-sand-200, #F5EDDC) 10px, var(--vgds-sand-300, #EEE1C6) 10px, var(--vgds-sand-300, #EEE1C6) 20px);
  border: 1px solid var(--vgds-border, #DDE6E8);
  border-radius: var(--radius-lg, 22px);
  padding: 2rem;
  color: var(--vgds-text-muted, #56696F);
}
.coming-soon-panel i {
  font-size: 2rem;
  color: var(--vgds-earth-700, #6E4A2E);
  opacity: 0.7;
  flex-shrink: 0;
}

/* Bug fix: Bootstrap's `.h1`-`.h6` size-utility classes are grouped into the same rule as its
   bare `h1`-`h6` reset, which sets `color: var(--bs-heading-color)` (= `inherit`). A class
   selector (`.h6`, specificity 0,1,0) outranks main.css's plain `h3` selector (0,0,1), so on any
   heading using both a heading tag AND a `.h#` size class (e.g. `<h3 class="h6">`, used for the
   threat cards below), Bootstrap's rule wins and the heading silently inherits its ancestor
   section's color instead of the VGDS dark heading color — invisible white-on-white text inside
   a white `.threat-card` sitting in the dark-green `.bg-forest` section. Card-scoped selectors
   here (0,1,1) outrank the `.h6` portion (0,1,0) without needing `!important`. */
.threat-card h3,
.fact-card h3,
.vgds-card h3 {
  color: var(--vgds-primary-dark, #072B3E);
}

/* Blazor Server's built-in <ErrorBoundary> renders this class for its default
   error content; kept even though MainLayout supplies custom ErrorContent,
   since some framework-level error surfaces still use it. */
.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}
.blazor-error-boundary::after {
  content: "An error has occurred.";
}