/* ---------------------------------------------------------------------------
   /plexus-light — light theme
   ---------------------------------------------------------------------------
   Loaded after the compiled Astro/Tailwind stylesheet. Palette taken from the
   pharminsite.html reference: light base punctuated by dark teal bands, rather
   than a uniformly light page.

   The build uses semantic tokens (text-ink, bg-bg, border-white/*), so the
   whole palette is reachable by overriding ~20 classes instead of editing
   compiled utility CSS.

   Sections carrying `band-dark` (hero, closing CTA) keep white-on-dark
   treatment. Everything else flips to light. Because `.band-dark .x` (0,2,0)
   outranks `.x` (0,1,0), the light rules can be written unscoped and the dark
   bands simply win inside their own subtree.
--------------------------------------------------------------------------- */

:root {
  --l-bg: #f4f7f5;
  --l-bg-2: #eef3f1;
  --l-card: #ffffff;
  --l-line: #dce7e3;
  --l-ink: #0f2a2b;
  --l-ink-soft: #4d6a68;
  --l-ink-muted: #4d6763;
  /* Accent text — deep teal-blue, chosen to clear 4.5:1 on white and on the
     accent tints it also sits on (badges, stat labels, the benefit pills).
     Fills use the brighter teal below. */
  --l-accent-text: #0f6a86;
  --l-teal: #0a353a;
  --l-teal-deep: #062a2e;
  --l-mint: #2bb2cf;
  --l-mint-deep: #1c8fb0;
  --l-shadow: 0 1px 2px rgba(8, 40, 38, .04), 0 10px 30px -18px rgba(8, 40, 38, .28);
}

/* ---------- page base ---------- */

body {
  background-color: var(--l-bg);
  color: var(--l-ink);
}

/* ---------- section bands ---------- */

section.bg-bg:not(.band-dark) { background-color: var(--l-bg); }
section.bg-bg-card:not(.band-dark) { background-color: var(--l-bg-2); }

.band-dark.bg-bg,
section.band-dark, footer.band-dark { background-color: var(--l-teal); }
.band-dark.bg-bg-deep { background-color: var(--l-teal-deep); }

/* ---------- cards ---------- */

.bg-bg-card:not(section) {
  background-color: var(--l-card);
  box-shadow: var(--l-shadow);
}
.band-dark .bg-bg-card:not(section) {
  background-color: rgb(255 255 255 / .04);
  box-shadow: none;
}

/* Some cards use the page-base token rather than the card token (contact
   details, the pricing estimator). Scoping bg-bg to `section` alone left
   these dark, so their text went ink-on-near-black. */
.bg-bg:not(section) { background-color: var(--l-card); }
.band-dark .bg-bg:not(section) { background-color: rgb(255 255 255 / .04); }

/* Mobile nav drawer uses the translucent bg-bg/95 variant. */
[class*="bg-bg/"] { background-color: rgb(244 247 245 / .95); }

/* Card borders need this specificity to beat `.bg-bg-card:not(section)`. */
.bg-bg-card:not(section) { border-color: var(--l-line); }
.band-dark .bg-bg-card:not(section) { border-color: rgb(255 255 255 / .12); }

/* The build's hover lightens toward white, which on a white card is a no-op. */
.hover\:bg-bg-card-hover:hover { background-color: var(--l-bg-2); }
.band-dark .hover\:bg-bg-card-hover:hover { background-color: rgb(255 255 255 / .08); }

/* ---------- text ---------- */

.text-white { color: var(--l-ink); }
.text-ink { color: var(--l-ink); }
.text-ink-dim { color: var(--l-ink-soft); }
.text-ink-muted { color: var(--l-ink-muted); }
.text-accent { color: var(--l-accent-text); }

/* Elements with no colour class inherit from body, which is now dark ink.
   Inside a dark band that inheritance has to flip back to light. */
.band-dark { color: #eaf5f1; }

.band-dark .text-white, .band-dark.text-white { color: #fff; }
.band-dark .text-ink, .band-dark.text-ink { color: #eaf5f1; }
.band-dark .text-ink-dim, .band-dark.text-ink-dim { color: #94b0ac; }
.band-dark .text-ink-muted { color: #7f9a96; }
.band-dark .text-accent, .band-dark.text-accent { color: var(--l-mint); }

/* ---------- borders ---------- */

[class*="border-white/"] { border-color: var(--l-line); }
.band-dark [class*="border-white/"],
.band-dark[class*="border-white/"] { border-color: rgb(255 255 255 / .12); }
.border-accent { border-color: var(--l-mint-deep); }
.band-dark .border-accent { border-color: var(--l-mint); }
.band-dark [class*="border-accent/"],
.band-dark[class*="border-accent/"] { border-color: rgb(120 214 232 / .5); }

/* ---------- translucent white fills ---------- */

[class*="bg-white/"] { background-color: rgb(10 53 58 / .04); }
.band-dark [class*="bg-white/"],
.band-dark[class*="bg-white/"] { background-color: rgb(255 255 255 / .04); }

/* ---------- accent surfaces ---------- */
/* text-bg is the dark-on-accent pairing and stays dark in both themes. */

.bg-accent { background-color: var(--l-mint); }
.bg-accent-dim { background-color: rgb(30 150 185 / .13); }
.band-dark .bg-accent-dim { background-color: rgb(120 214 232 / .16); }
.text-bg { color: var(--l-teal-deep); }

/* ---------- sticky header ---------- */
/* bg-bg/85 and bg-bg/95 are the scrolled and unscrolled states. */

header[id="site-header"][class*="bg-bg/"] {
  background-color: rgb(244 247 245 / .85);
  border-color: var(--l-line);
}

/* ---------- hero glow ---------- */
/* Original glow is mint over near-black; re-tinted for the teal band. */

.band-dark .bg-hero-glow {
  background-image: radial-gradient(ellipse 90% 60% at 50% 0%, rgb(120 214 232 / .14), rgb(6 42 46 / 0) 60%);
}
:not(.band-dark) > .bg-hero-glow { background-image: none; }

/* ---------- shadows ---------- */
/* The build's float shadow is tuned for a black page and reads as soot on light. */

.shadow-card-float {
  --tw-shadow: var(--l-shadow);
  box-shadow: var(--l-shadow);
}
.band-dark .shadow-card-float {
  --tw-shadow: 0 25px 60px -20px rgb(0 0 0 / .5);
  box-shadow: 0 25px 60px -20px rgb(0 0 0 / .5);
}

/* ---------- divider rules ---------- */

hr, .divide-white\/10 > * + * { border-color: var(--l-line); }
.band-dark hr { border-color: rgb(255 255 255 / .12); }

/* ---------- brand mark ---------- */
/* The app-install icon, sized in em so it tracks the wordmark at both the
   header (1.35rem) and footer (1.5rem) sizes. */

a[aria-label="Pharmin home"] {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}

/* The artwork is a dark-teal rounded square with a mint P. It carries its own
   contrast on both the light surfaces and the teal bands, so it is used as-is
   in both — no inversion, which would wreck the gradient. The 22% radius
   matches the artwork's own corners so the edge reads clean at small sizes. */
.pharmin-mark {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  border-radius: 22%;
}

/* ---------- component classes with baked-in colours ---------- */
/* These carry their own hex values rather than the semantic tokens, so each
   needs an explicit light-theme value. Verified against a contrast audit of
   the rendered page rather than read off the stylesheet. */

.eyebrow { color: var(--l-accent-text); }
.band-dark .eyebrow { color: var(--l-mint); }

/* The italicised accent words inside headings. */
.accent-italic { color: var(--l-accent-text); }
.band-dark .accent-italic { color: var(--l-mint); }

/* Tick marks in the pricing feature lists. */
.price-feat svg { color: var(--l-accent-text); }
.band-dark .price-feat svg { color: var(--l-mint); }

.price-amount { color: var(--l-ink); }
.price-feat { color: var(--l-ink-soft); }
.price-period, .price-note { color: var(--l-ink-muted); }

.pill-badge {
  color: var(--l-ink-soft);
  border-color: var(--l-line);
  background-color: var(--l-card);
}
.band-dark .pill-badge {
  color: #cfe3de;
  border-color: rgb(255 255 255 / .16);
  background-color: rgb(255 255 255 / .06);
}

/* The hero's app mockup is deliberately dark UI chrome sitting on the dark
   band. It keeps its own palette; only inherited text needs re-lightening. */
.queue-panel, .message-panel { color: #e8ecf4; }

/* Small print that sat on the dark page and lands on light surfaces. */
.pt-disclaimer, .ph-disclaimer { color: var(--l-ink-muted); }
/* Restoring the missing .text-[#5c6478] utility gave this disclaimer an
   explicit dark grey, which is 2.6:1 on the teal CTA band. */
.text-\[\#5c6478\] { color: var(--l-ink-muted); }
.band-dark .text-\[\#5c6478\] { color: #8fa9a5; }
.inbox-prev { color: var(--l-ink-soft); }
.band-dark .inbox-prev { color: #8b95a9; }

/* Dim greys inherited from the build were tuned for a near-black page and are
   too weak on the lighter teal bands. Raised to clear 4.5:1 on both. */
.band-dark .text-ink-muted { color: #8fa9a5; }
.band-dark .pt-disclaimer,
.band-dark .ph-disclaimer { color: #8fa9a5; }
.band-dark .ph-bubble .t { color: #9ab5b0; }

/* The mint-tinted active row is a light surface; its text must be dark. */
.inbox-row.is-active .inbox-name,
.inbox-row.is-active .inbox-prev { color: var(--l-teal-deep); }

/* Placeholder text in the compose bar. The mock is a light surface on the
   light theme, so this needs the light muted tone, not the dark-band one. */
.inbox-compose { color: var(--l-ink-muted); }
.band-dark .inbox-compose { color: #93aeaa; }

/* Mobile nav drawer inherits the header's light surface. */
#site-header + div [class*="bg-white/"],
.mobile-menu, .mobile-menu a { color: var(--l-ink); }

/* ---------- Features mega-menu ---------- */
.fx-nav{position:static}
.fx-nav-btn{display:inline-flex;align-items:center;gap:.3rem;cursor:pointer;background:none;border:none;font:inherit}
.fx-chev{transition:transform .2s}
.fx-nav-btn[aria-expanded="true"] .fx-chev{transform:rotate(180deg)}
.band-dark .fx-nav-btn{color:var(--l-ink-dim)}
.fx-mega{position:absolute;top:100%;left:0;right:0;margin:.5rem auto 0;max-width:700px;background:var(--l-card);border:1px solid var(--l-line);border-radius:18px;box-shadow:var(--l-shadow);padding:1.4rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:60}
.fx-mega::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.fx-nav:hover .fx-mega,.fx-mega[data-open="true"]{opacity:1;visibility:visible;transform:translateY(0)}
.fx-mega-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem 2.5rem}
.fx-mega-h{font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--l-ink-muted);margin:0 0 .5rem .6rem}
.fx-mega-link{display:flex;gap:.7rem;align-items:flex-start;padding:.6rem;border-radius:12px;transition:background-color .15s}
.fx-mega-link:hover{background:rgb(30 150 185 / .08)}
.fx-mega-ic{flex:none;height:34px;width:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgb(30 150 185 / .12);color:var(--l-accent-text)}
.fx-mega-ic svg{width:18px;height:18px}
.fx-mega-tx b{display:block;font-size:.9rem;font-weight:700;color:var(--l-ink)}
.fx-mega-tx small{display:block;font-size:.75rem;color:var(--l-ink-soft);margin-top:.1rem;line-height:1.3;white-space:nowrap}
@media(max-width:760px){.fx-mega{max-width:calc(100vw - 28px);padding:1rem}.fx-mega-tx small{white-space:normal}}