:root{
  --brand-600:#0059d3;
  --ring:#8ec5ff;
  --card-bg:rgba(0,30,70,.42);
  --card-blur:12px;
  --tile-bg:rgba(255,255,255,.10);
  --tile-bg-hover:rgba(255,255,255,.16);
  --tile-border:rgba(255,255,255,.22);
  --tile-border-hover:rgba(255,255,255,.32);
  --navbar-h:64px;                 /* adjust for your fixed top bar */
  --icon-size:22px;                 /* consistent icon sizing */
}

/* Accessibility */
.skip-link{
  position:fixed; top:12px; left:12px; z-index:9999;
  background:#111; color:#fff; padding:10px 14px; border-radius:10px;
  text-decoration:none; box-shadow:0 4px 10px rgba(0,0,0,.35);
  transform:translateY(-140%); transition:transform .12s ease;
}
.skip-link:focus{ transform:translateY(0); outline:3px solid var(--ring); }

/* Canvas */
.hero-wrap{
  position:relative;
  min-height:calc(100dvh - var(--navbar-h));
  padding-top:calc(var(--navbar-h) * .25);
  overflow:hidden;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color:#fff;
  background:
    radial-gradient(1200px 600px at 10% -20%, #003c8f 0%, transparent 60%),
    radial-gradient(1200px 700px at 110% 120%, #001a42 0%, transparent 60%),
    linear-gradient(180deg, #00112a 0%, #000a1a 100%);
}

/* Background image */
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-bg *{ pointer-events:none !important; }
.hero-bg .bg-image{
  position:absolute; inset:0; width:100%; height:100%;
  background-image:url("/assets/background.jpg");
  background-image:image-set(
    url("/assets/background.jpg") type("image/jpg"),
    url("/assets/background.jpg") type("image/jpeg")
  );
  background-size:cover;
  background-position:center calc(50% - 5vh);
  filter:saturate(110%) contrast(102%) brightness(82%);
}

/* Vignette + grain */
.bg-grain{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,.00) 0%, rgba(0,0,0,.26) 70%, rgba(0,0,0,.44) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.02) 1px, transparent 1px, transparent 2px);
}

/* Decorative orbs (reduced motion safe) */
.orb{ position:absolute; border-radius:999px; filter:blur(40px); opacity:.42; z-index:2; }
.orb.o1{ width:360px; height:360px; background:radial-gradient(circle at 30% 30%, #1b95ff 0%, rgba(27,149,255,0) 70%); left:-120px; top:8vh; animation:float1 16s ease-in-out infinite; }
.orb.o2{ width:420px; height:420px; background:radial-gradient(circle at 60% 40%, #7c4dff 0%, rgba(124,77,255,0) 70%); right:-140px; bottom:-80px; animation:float2 18s ease-in-out infinite; }
@keyframes float1{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(30px, -20px,0); } }
@keyframes float2{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(-20px, 28px,0); } }
@media (prefers-reduced-motion: reduce){ .orb{ display:none; } }

/* Hero card — left-aligned reading rail */
.hero-card{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  padding:48px 56px; max-width:1040px; width:clamp(340px, 94vw, 1040px);
  margin:7vh auto; text-align:left;
  background:var(--card-bg);
  backdrop-filter:blur(var(--card-blur)) saturate(125%);
  -webkit-backdrop-filter:blur(var(--card-blur)) saturate(125%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;
  box-shadow:0 16px 48px rgba(0,0,0,.46), 0 3px 10px rgba(0,0,0,.36);
}
.hero-eyebrow{
  font-weight:700; font-size:.9rem; letter-spacing:.28px; text-transform:uppercase;
  color:rgba(255,255,255,.70); margin:0 0 .25rem;
}
.hero-title{
  font-size:clamp(2.5rem, 4.8vw, 3.6rem);
  line-height:1.05; margin:.1rem 0 .35rem;
  text-shadow:2px 2px 4px rgba(0,0,0,.55);
}
.hero-sub{
  font-size:1.02rem; line-height:1.45; color:rgba(255,255,255,.88);
  max-width:760px; margin:0 0 1.1rem; text-shadow:1px 1px 3px rgba(0,0,0,.45);
}

/* Module grid — 12-col, equal-width tiles */
.module-grid{
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  gap:16px; width:100%; margin:.75rem 0 0; align-items:stretch;
}
.module-col{ grid-column: span 4; display:flex; }         /* 3-up desktop */
@media (max-width:1100px){ .module-col{ grid-column: span 6; } } /* 2-up */
@media (max-width:640px){ .module-col{ grid-column: span 12; } }  /* 1-up */

/* Tiles — uniform height */
.btn.btn-link.btn-hero{
  --bg: var(--tile-bg); --bg-hover: var(--tile-bg-hover);
  --border: var(--tile-border); --shadow: 0 10px 28px rgba(0,0,0,.38);
  --shadow-hover: 0 14px 32px rgba(0,0,0,.42);

  display:flex; align-items:center; gap:16px; text-align:left;
  text-decoration:none !important; color:#fff;
  background:var(--bg) !important; border:1px solid var(--border) !important; border-radius:16px;
  padding:20px 22px; min-height:112px; height:100%;       /* ← uniform height */
  box-shadow:var(--shadow);
  backdrop-filter:saturate(120%) blur(6px);
  -webkit-backdrop-filter:saturate(120%) blur(6px);
  transition:transform .12s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
  position:relative; flex:1 1 auto;                       /* fill grid cell */
}
.btn.btn-link.btn-hero:hover{
  background:var(--bg-hover) !important; transform:translateY(-1px);
  box-shadow:var(--shadow-hover); border-color:var(--tile-border-hover) !important;
}
.btn.btn-link.btn-hero:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }
.btn.btn-link.btn-hero:active{ transform:translateY(0); }

/* Icon container + inline SVG (rendered via dcc.Markdown) */
.module-icon{
  width:2.4rem; height:2.4rem; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.10);
  flex:0 0 auto;
}
.module-icon .dash-markdown{ display:flex; align-items:center; }
.module-icon .dash-markdown > p{ margin:0; line-height:0; }
.module-icon svg{
  width:var(--icon-size); height:var(--icon-size);
  stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

/* Text block with two-line clamp for hints → consistent heights */
.module-text{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.module-label{ font-weight:800; letter-spacing:.2px; font-size:1.08rem; line-height:1.15; min-height:1.2em; }
.module-hint{
  font-size:.92rem; color:rgba(255,255,255,.75); line-height:1.25;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:calc(1.25em * 2); /* reserve height for 2 lines to equalize cards */
}

/* Badge at top-right of the card */
.badge-chip{
  position:absolute; top:8px; right:8px;
  font-size:.72rem; font-weight:800; letter-spacing:.3px;
  padding:.22rem .46rem; border-radius:999px; border:1px solid rgba(255,255,255,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  color:#fff; text-transform:uppercase; line-height:1;
}

/* Chevron affordance */
.chev{ margin-left:auto; opacity:.65; transition:transform .12s ease, opacity .16s ease; display:inline-flex; }
.chev .dash-markdown > p{ margin:0; line-height:0; }
.btn.btn-link.btn-hero:hover .chev{ transform:translateX(2px); opacity:.95; }
.chev svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; }

/* Tooltips */
.tooltip{ z-index:2000; }
.popover{ z-index:2000; }

/* Motion preferences */
@media (prefers-reduced-motion: reduce){ .btn-hero, .skip-link{ transition:none; } }

:root{
  --nav-bg: #07243f;           /* ~10–15% darker than current */
  --nav-bg-open: #062238;      /* used when dropdown is open */
  --nav-border: rgba(255,255,255,.10);
  --nav-link: rgba(255,255,255,.88);
  --nav-link-muted: rgba(255,255,255,.65);
  --nav-link-active: #fff;
  --accent: #4db1ff;           /* brand accent for active underline */
}

/* Make it feel like one continuous header */
.custom-navbar{
  background: var(--nav-bg) !important;
  box-shadow: 0 1px 0 var(--nav-border);
}

/* When the MM menu is open, keep the bar slightly deeper */
.custom-navbar .dropdown.show > .dropdown-toggle{
  background: transparent;
  color: var(--nav-link-active);
  position: relative;
}
.custom-navbar .dropdown.show > .dropdown-toggle::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);   /* active underline instead of a caret */
}

/* Spacing & targets */
.custom-navbar .nav-link,
.custom-navbar .dropdown-toggle{ padding:.55rem .9rem; }
.custom-navbar .navbar-nav{ gap:.25rem; }

/* Dropdown theming (text-only list, no icons) */
.custom-navbar .dropdown-menu{
  background: #0a2c4c;                   /* close to header but distinct */
  border: 1px solid var(--nav-border);
  min-width: 260px;
}
.custom-navbar .dropdown-item{
  color: var(--nav-link);
  padding:.5rem .85rem;
}
.custom-navbar .dropdown-item:hover{ background: rgba(255,255,255,.07); color:#fff; }
.custom-navbar .dropdown-item.active{
  background: rgba(77,177,255,.18);
  color:#fff;
}
/* If you had icons inside items, hide them (or just remove in code) */
.custom-navbar .dropdown-item i{ display:none; }

/* Visible keyboard focus */
.custom-navbar .nav-link:focus,
.custom-navbar .dropdown-item:focus{
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 2px;
}
.custom-navbar .dropdown.show > .dropdown-toggle::after { content: none !important; }

:root { --nav-h: 56px; }        /* sensible fallback */

.custom-navbar { min-height: var(--nav-h); }
#page-content { padding-top: var(--nav-h) !important; }

/* Ensure no extra border/shadow draws a line */
.custom-navbar { border-bottom: 0 !important; box-shadow: none !important; }
.custom-navbar::before,
.custom-navbar::after { content: none !important; }
:root{
  --nav-h: 56px; /* fallback; JS updates it */
  --nav-dark-bg: #07243f;
  --nav-dark-fg: #ffffff;
  --nav-light-bg: #ffffff;
  --nav-light-fg: #0b2a4a;

  /* Shadows */
  --shadow-strong-dark: 0 10px 28px -10px rgba(6,34,56,.55), 0 1px 0 rgba(255,255,255,.08);
  --shadow-strong-light: 0 10px 30px -12px rgba(6,34,56,.28), 0 1px 0 rgba(6,34,56,.06);
}

/* Keep content below the navbar with no 1px seam */
#page-content{ padding-top: var(--nav-h) !important; }

/* Base navbar */
.custom-navbar{ transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; border-bottom:0; }

/* DARK (home hero) */
.custom-navbar--dark{ background: var(--nav-dark-bg) !important; color: var(--nav-dark-fg); box-shadow:none; }
.custom-navbar--dark.is-scrolled{ box-shadow: var(--shadow-strong-dark); }
.custom-navbar--dark .navbar-nav .nav-link,
.custom-navbar--dark .dropdown-toggle{ color: rgba(255,255,255,.9); }
.custom-navbar--dark .dropdown-menu{ background:#0a2c4c; border:1px solid rgba(255,255,255,.12); }
.custom-navbar--dark .dropdown-item{ color:#fff; }
.custom-navbar--dark .dropdown-item:hover{ background:rgba(255,255,255,.08); }

/* LIGHT (pharma modules) */
.custom-navbar--light{ background: var(--nav-light-bg) !important; color: var(--nav-light-fg); box-shadow:none; }
.custom-navbar--light.is-scrolled{ box-shadow: var(--shadow-strong-light); }
.custom-navbar--light .navbar-brand,
.custom-navbar--light .navbar-nav .nav-link,
.custom-navbar--light .dropdown-toggle{ color: var(--nav-light-fg); }
.custom-navbar--light .dropdown-menu{ background:#fff; border:1px solid rgba(6,34,56,.12); }
.custom-navbar--light .dropdown-item{ color: var(--nav-light-fg); }
.custom-navbar--light .dropdown-item:hover{ background: rgba(6,34,56,.06); }

/* Spacing, targets, focus */
.custom-navbar .nav-link,
.custom-navbar .dropdown-toggle{ padding:.55rem .9rem; }
.custom-navbar .navbar-nav{ gap:.25rem; }
.custom-navbar .nav-link:focus,
.custom-navbar .dropdown-item:focus{ outline:2px solid rgba(0,0,0,.25); outline-offset:2px; }
:root{
  --nav-h: 56px;                /* fallback; JS sets the real height */
  --nav-bg: #07243f;            /* dark navy */
  --nav-fg: #ffffff;

  /* elevated shadows */
  --nav-shadow-strong: 0 10px 28px -10px rgba(6,34,56,.55), 0 1px 0 rgba(255,255,255,.08);

  /* how tall the fade bridge should be under the navbar */
  --nav-fade-h: 28px;
}

/* offset page content so it never sits under the fixed header */
#page-content{ padding-top: var(--nav-h) !important; }

/* ----- Dark navbar everywhere ----- */
.custom-navbar{
  background: var(--nav-bg) !important;
  color: var(--nav-fg);
  border-bottom: 0;
  transition: background-color .25s ease, box-shadow .25s ease, opacity .25s ease;
  z-index: 1040; /* above content */
  backdrop-filter: saturate(120%) blur(6px);          /* subtle ‘glass’ look */
  -webkit-backdrop-filter: saturate(120%) blur(6px);
}

/* Stronger elevation only after scrolling */
.custom-navbar.is-scrolled{ box-shadow: var(--nav-shadow-strong); }

/* Smooth fade bridge from dark header → light module content */
.custom-navbar::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom: calc(-1 * var(--nav-fade-h));  /* hangs below the navbar */
  height: var(--nav-fade-h);
  pointer-events:none;
  background: linear-gradient(to bottom,
              rgba(7,36,63,.85), rgba(7,36,63,0));     /* dark → transparent */
  opacity: 1;
  transition: opacity .25s ease;
}

/* Hide the fade when scrolled so it doesn't overlay content */
.custom-navbar.is-scrolled::after{ opacity: 0; }

/* Text colors in the dark navbar */
.custom-navbar .navbar-nav .nav-link,
.custom-navbar .dropdown-toggle{ color: rgba(255,255,255,.9); }
.custom-navbar .dropdown-menu{
  background:#0a2c4c;
  border:1px solid rgba(255,255,255,.12);
}
.custom-navbar .dropdown-item{ color:#fff; }
.custom-navbar .dropdown-item:hover{ background:rgba(255,255,255,.08); }

/* Hit targets & focus */
.custom-navbar .nav-link,
.custom-navbar .dropdown-toggle{ padding:.55rem .9rem; }
.custom-navbar .nav-link:focus,
.custom-navbar .dropdown-item:focus{ outline:2px solid rgba(255,255,255,.85); outline-offset:2px; }

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  .custom-navbar, .custom-navbar::after{ transition: none; }
}
/* --- Navbar focus behavior ---------------------------------------------- */
/* Hide the white square when the element is focused by mouse (click) */
.custom-navbar .nav-link:focus:not(:focus-visible),
.custom-navbar .dropdown-toggle:focus:not(:focus-visible),
.custom-navbar .dropdown-item:focus:not(:focus-visible),
.custom-navbar .navbar-toggler:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Keep an accessible focus style for keyboard users only (Tab/Shift+Tab) */
:root { --focus-ring: #9ad1ff; }  /* pick a brand-friendly color */
.custom-navbar .nav-link:focus-visible,
.custom-navbar .dropdown-toggle:focus-visible,
.custom-navbar .dropdown-item:focus-visible,
.custom-navbar .navbar-toggler:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 6px; /* optional: softer corner */
}

/* Remove any Bootstrap default focus glow on the toggler */
.custom-navbar .navbar-toggler:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* Optional: remove mobile tap highlight */
.custom-navbar * { -webkit-tap-highlight-color: transparent; }
/* Wrapper around the glass card on the front page */
#front-hero {
  /* fill the viewport below the fixed navbar */
  min-height: calc(100vh - var(--nav-h));
  display: grid;

  /* keep content slightly above center */
  align-content: start;

  /* top/bottom breathing room – responsive but bounded */
  padding-top:  clamp(24px, 9vh, 120px);
  padding-bottom: clamp(24px, 7vh, 96px);
}

/* Center the card horizontally */
#front-hero .hero-card { margin-inline: auto; }
/* --- Fix: dropdown white flash on click/focus --------------------------- */
/* Use Bootstrap 5 CSS variables so :hover / :focus / :active all match your theme */
.custom-navbar .dropdown-menu{
  --bs-dropdown-bg: #0a2c4c;                          /* your dark menu bg */
  --bs-dropdown-border-color: rgba(255,255,255,.12);

  --bs-dropdown-link-color: rgba(255,255,255,.90);    /* default link color */
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg: rgba(255,255,255,.08); /* hover/focus bg */

  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: rgba(77,177,255,.18); /* active/selected bg */

  --bs-dropdown-link-disabled-color: rgba(255,255,255,.45);
}

/* Mouse click focus should not paint a background while routing */
.custom-navbar .dropdown-item:focus:not(:focus-visible){
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Ensure active uses the same dark palette (not Bootstrap’s light default) */
.custom-navbar .dropdown-item:active{
  background-color: var(--bs-dropdown-link-active-bg) !important;
  color: var(--bs-dropdown-link-active-color) !important;
}

/* Keep a clear keyboard-only focus ring */
:root { --focus-ring: #9ad1ff; }
.custom-navbar .dropdown-item:focus-visible{
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
/* Locked/disabled items must never look interactive */
.custom-navbar .dropdown-item.locked,
.custom-navbar .dropdown-item[aria-disabled="true"],
.custom-navbar .nav-link.locked,
.custom-navbar .nav-link.disabled {
  pointer-events: none !important;
  cursor: not-allowed !important;
  user-select: none !important;
    color: var(--bs-dropdown-link-disabled-color, rgba(255,255,255,.45)) !important;
  opacity: .65;
}

/* Kill hover/focus/active paint on locked items */
.custom-navbar .dropdown-item.locked:hover,
.custom-navbar .dropdown-item.locked:focus,
.custom-navbar .dropdown-item.locked:active,
.custom-navbar .dropdown-item[aria-disabled="true"]:hover,
.custom-navbar .dropdown-item[aria-disabled="true"]:focus,
.custom-navbar .dropdown-item[aria-disabled="true"]:active {
  background: transparent !important;
  color: var(--bs-dropdown-link-disabled-color, rgba(255,255,255,.45)) !important;
  outline: none !important;

}

/* If any locked item still has href="#" for some reason, make it inert */
.custom-navbar .dropdown-item[href="#"]{
  pointer-events: none !important;
  cursor: not-allowed !important;
}
.custom-navbar .dropdown-item[href="#"]:hover,
.custom-navbar .dropdown-item[href="#"]:focus,
.custom-navbar .dropdown-item[href="#"]:active{
  background: transparent !important;

}
/* --- Icon centering fix --- */
.btn-hero { /* ensure the button's content aligns vertically */
  align-items: center;
}

/* The square container for the icon */
.module-icon{
  width: 42px;          /* adjust to taste: 48/56/64px */
  height: 42px;
  flex: 0 0 42px;       /* don’t let it shrink/grow */
  display: grid;        /* simplest centering */
  place-items: center;  /* centers child both ways */
}

/* dcc.Markdown inserts <div class="svg-md"><p>…</p></div>. Reset that. */
.module-icon .svg-md,
.module-icon .svg-md > p{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;   /* kills baseline gap */
  width: 100%;
  height: 100%;
  display: grid;               /* let the wrapper fill and center */
  place-items: center;
}

/* Normalize the SVG element itself */
.module-icon svg{
  width: 24px;                 /* scale icon size here */
  height: 24px;
  display: block;              /* removes inline baseline gap */
}