/* Little Greenhouse — brand tokens, pulled directly from the Android app's own
   CSS (app/src/main/assets/index.html), not an invented web palette. */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg:#FFF1F4; --bg-deep:#FCE4EA;
  --card:#FFFFFF; --card-warm:#FFF9FB;
  --ink:#4A2B33; --muted:#9A7782;
  --line:#F3D9DF; --line-strong:#EBC6D0;

  --mens:#C4536F; --mens-soft:#FBDDE5; --mens-text:#bf4e6a;
  --foll:#5C9FC4; --foll-soft:#DCEEF6; --foll-text:#397ca1;
  --ovu:#D79A2B;  --ovu-soft:#FBEEC9;  --ovu-text:#a56800;
  --lut:#8E72BE;  --lut-soft:#E9E0F5;  --lut-text:#8468b4;
  --fert:#4FA98C; --fert-soft:#D6EFE6; --fert-text:#278164;
  --preg:#D88CA6; --preg-soft:#F6DCE6; --preg-text:#ab5f79;

  --rose:#E07A97; --rose-deep:#C4536F;
  --appr:#4B9B9B;
  --warn:#C4536F; --warnbg:#FBE2E6;

  /* Aliases so existing page CSS (written against --green/--rose-deep etc.)
     keeps working while being repointed at the real brand values. */
  --green:#4FA98C; --green-light:#D6EFE6;
  --lav:#8E72BE; --lav-light:#E9E0F5;
  --border:#F3D9DF; --card2:#FBEAEF;
}
/* No automatic @media (prefers-color-scheme: dark) switch here, deliberately —
   this site always shows the brand's own light palette regardless of the
   visitor's OS theme, rather than auto-flipping dark. The manual override
   below is kept in case an explicit in-page dark-mode toggle gets added
   later, but nothing currently sets data-theme="dark" on its own. */
:root[data-theme="dark"]{
  --bg:#211820; --bg-deep:#2B1F28; --card:#2B1F28; --card-warm:#32232C;
  --ink:#F3E6E8; --muted:#C7A8B0; --line:#3A2A34; --line-strong:#4A3540;
  --mens:#E88AA6; --green:#6FC08E; --green-light:#233A2C;
  --lav:#C3ACDB; --lav-light:#2C2535; --rose-deep:#E88AA6;
  --border:#3A2A34; --card2:#32232C;
}

/* Color-blind friendly palette, toggled via the button in colorblind-toggle.js.
   The brand's phase colors (mens/fert in particular) sit on a red-green axis that's
   hard to distinguish under deuteranopia/protanopia, the most common forms of color
   blindness (~8% of men). This shifts the problem pairs onto a vermillion/teal axis
   instead, which stays distinguishable across the common forms of color vision
   deficiency, while leaving neutral tones (ink/muted/bg/card) alone since those are
   already contrast-driven, not hue-dependent. */
:root[data-colorblind="true"]{
  --mens:#D9634F; --mens-soft:#F7DCD4; --mens-text:#B84A37;
  --fert:#1E8E8E; --fert-soft:#D3EEEE; --fert-text:#166B6B;
  --preg:#B97A9E; --preg-soft:#EDDCE6; --preg-text:#8F5A7C;
  --rose:#D9634F; --rose-deep:#B84A37;
  --green:#1E8E8E; --green-light:#D3EEEE;
}

body{ font-family:'Quicksand','Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; }
h1,h2,h3{ font-family:'Quicksand','Noto Sans',system-ui,sans-serif; font-weight:600; }

/* ---- Language switcher (shared across all pages) ---- */
.lg-langswitch{ position:relative; font-family:inherit; }
.lg-lang-current{
  font-family:'Quicksand','Noto Sans',sans-serif; font-weight:600; font-size:14px;
  letter-spacing:.02em; color:var(--ink); background:var(--card-warm);
  border:1px solid var(--line-strong); border-radius:10px; padding:8px 14px;
  cursor:pointer; min-width:54px;
}
.lg-lang-current:hover{ border-color:var(--mens); }
.lg-lang-menu{
  position:absolute; right:0; top:calc(100% + 6px); margin:0; padding:6px;
  list-style:none; background:var(--card); border:1px solid var(--line-strong);
  border-radius:12px; box-shadow:0 10px 28px rgba(74,43,51,.14);
  min-width:160px; max-height:320px; overflow-y:auto;
  display:none; z-index:60;
}
.lg-langswitch.open .lg-lang-menu{ display:block; }
.lg-lang-opt{
  display:block; width:100%; text-align:left; background:none; border:none;
  font-family:'Quicksand','Noto Sans',sans-serif; font-size:14px; color:var(--ink);
  padding:8px 10px; border-radius:8px; cursor:pointer;
}
.lg-lang-opt:hover{ background:var(--mens-soft); }
.lg-lang-opt[aria-selected="true"]{ background:var(--mens-soft); color:var(--mens-text); font-weight:600; }

/* ---- Color-blind friendly toggle (fixed side button) ---- */
.lg-cb-toggle{
  position:fixed; left:16px; bottom:16px; z-index:200;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong);
  background:var(--card); box-shadow:0 6px 18px rgba(74,43,51,.16);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.lg-cb-toggle svg{ width:22px; height:22px; color:var(--ink) }
.lg-cb-toggle[aria-pressed="true"]{ background:var(--rose); border-color:var(--rose); }
.lg-cb-toggle[aria-pressed="true"] svg{ color:#fff }
.lg-cb-toggle:hover{ transform:scale(1.05); }
@media (max-width:760px){ .lg-cb-toggle{ left:12px; bottom:12px; width:40px; height:40px } .lg-cb-toggle svg{ width:19px; height:19px } }

/* Inside a mobile nav drawer (.navlinks), the switcher should read as one more full-width
   row rather than a small floating control — same shape as the links around it. */
@media (max-width:760px){
  .navlinks .lg-langswitch{ width:100%; margin-top:10px; }
  .navlinks .lg-lang-current{
    width:100%; text-align:left; padding:14px 0; border:none; border-bottom:1px solid var(--line);
    border-radius:0; background:none; font-size:16px; display:flex; align-items:center; justify-content:space-between;
  }
  .navlinks .lg-lang-current::after{ content:'\25BE'; color:var(--muted); font-size:13px; }
  .navlinks .lg-lang-menu{
    position:static; box-shadow:none; border:none; background:var(--card-warm); margin-top:4px;
    width:100%; max-height:none;
  }
}