/* ═══════════════════════════════════════════════════════════════════════
   HerWork — public marketing pages (welcome, blog, article).
   Loaded after app.css (tokens, .btn, focus styles, reduced motion).
   Mobile-first.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --teal: #0f766e;
  /* Dark enough for text on white (≥4.5:1 at every stop) */
  --grad-text: linear-gradient(135deg, var(--brand-strong) 0%, var(--teal) 50%, var(--sky-700) 100%);
  /* Bright version, only for big text on the dark banner */
  --grad-text-light: linear-gradient(135deg, #8cc63f 0%, #2dd4bf 50%, #38bdf8 100%);
  --grad-hero: linear-gradient(135deg, #e8f5e9 0%, #d0ece4 30%, #bde0f0 65%, #cce8f8 100%);
  --grad-accent: linear-gradient(135deg, var(--parrot), var(--sky));
  --nav-h: 64px;
  --content: 1100px;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
html { scroll-padding-top: calc(var(--nav-h) + 8px); }
.site { display: flex; flex-direction: column; }
.site main { flex: 1; }

.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Top navigation ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-inline: var(--gutter);
  border-bottom: 1px solid rgb(0 0 0 / 0.06);
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.site-logo { display: inline-flex; align-items: center; border-radius: var(--radius-sm); }
.site-logo img { display: block; width: auto; height: 44px; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-actions .btn { padding-inline: clamp(12px, 3vw, 20px); }
@media (max-width: 380px) {
  .nav-actions .btn-outline { display: none; }   /* "Start" stays; it also leads to log in */
}

/* ── Buttons (large variants) ── */
.btn-lg { min-height: 52px; padding: 14px clamp(22px, 5vw, 34px); border-radius: 14px; font-family: var(--font-head); font-size: 16px; }
.btn-glass {
  border: 2px solid rgb(74 116 25 / 0.35);
  background: rgb(255 255 255 / 0.7);
  color: var(--charcoal);
}
.btn-glass:hover { background: #fff; border-color: var(--brand-strong); }

/* ── Section scaffolding ── */
.section { padding: clamp(56px, 9vw, 90px) var(--gutter); }
.section-inner { max-width: var(--content); margin-inline: auto; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-strong);
}
.eyebrow::before { content: ''; width: 24px; height: 2px; border-radius: 2px; background: var(--grad-accent); }
.section-title {
  margin-bottom: 18px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.25;
}
.section-body { max-width: 680px; font-size: 16px; line-height: 1.85; color: var(--slate); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1px solid rgb(74 116 25 / 0.25);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.75);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
}
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-strong); }

/* ── Footer ── */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px var(--gutter) max(28px, env(safe-area-inset-bottom));
  border-top: 1px solid rgb(0 0 0 / 0.06);
  background: #fff;
}
.site-footer .site-logo img { height: 52px; }
.footer-meta { font-size: 13px; line-height: 1.6; color: var(--slate); }
.footer-project { font-family: var(--font-head); font-weight: 700; }
@media (min-width: 640px) { .footer-meta { text-align: end; } }

/* ── Scroll reveal: content is only hidden when JS is running (html.js),
      so it is never lost if the script fails or for crawlers ── */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.65s ease, transform 0.65s ease; }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

/* ═══ Info & policy pages (about, contact, privacy, terms) ═══ */
.doc-hero { padding: clamp(36px, 7vw, 56px) var(--gutter) clamp(28px, 5vw, 40px); background: var(--grad-hero); text-align: center; }
.doc-hero h1 { margin-top: 12px; font-family: var(--font-head); font-weight: 700; font-size: clamp(28px, 5vw, 40px); line-height: 1.2; }
.doc-hero p { max-width: 640px; margin: 12px auto 0; font-size: 16px; line-height: 1.6; color: var(--slate); }
.doc {
  width: min(100% - 2 * var(--gutter), 760px);
  margin: clamp(28px, 5vw, 48px) auto clamp(40px, 7vw, 72px);
  font-size: 16px;
  line-height: 1.75;
  color: var(--charcoal);
}
.doc h2 { margin: 36px 0 10px; font-family: var(--font-head); font-weight: 700; font-size: clamp(19px, 3vw, 22px); line-height: 1.3; scroll-margin-top: calc(var(--nav-h) + 16px); }
.doc h2:first-child { margin-top: 0; }
.doc h3 { margin: 22px 0 6px; font-weight: 700; font-size: 17px; }
.doc p, .doc ul, .doc ol { margin-bottom: 14px; }
.doc ul, .doc ol { padding-inline-start: 22px; }
.doc li + li { margin-top: 6px; }
.doc a { font-weight: 600; color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px; }
.doc .updated { margin-bottom: 24px; font-size: 14px; color: var(--slate); }
.doc .toc { margin-bottom: 28px; padding: 16px 20px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: #fff; }
.doc .toc p { margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.doc .toc ol { margin: 0; font-size: 15px; }
.doc .note { padding: 14px 18px; border-inline-start: 4px solid var(--brand-strong); border-radius: 0 var(--radius) var(--radius) 0; background: var(--parrot-50); }
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 14px; margin: 8px 0 28px; }
.contact-card { display: grid; gap: 6px; padding: 20px; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); background: #fff; }
.contact-card .label { font-size: 13px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.04em; }
.contact-card a { font-size: 17px; overflow-wrap: anywhere; }

/* Footer links (every public page) */
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 14px; }
.footer-links a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--charcoal); font-weight: 500; }
.footer-links a:hover { color: var(--brand-strong); text-decoration: underline; }
.footer-links a[aria-current='page'] { color: var(--brand-strong); font-weight: 700; }
.nav-link { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 10px; font-weight: 600; font-size: 14px; color: var(--charcoal); }
.nav-link:hover { color: var(--brand-strong); }
@media (max-width: 479px) { .nav-link.optional { display: none; } }

/* ═══ Ad slots (ads.js; only blog + article pages) ═══
   Space is reserved only once an ad unit is configured (slot un-hidden by ads.js),
   so nothing jumps around while the ad loads, and no empty gaps without ads. */
.ad-slot { position: relative; display: grid; gap: 6px; margin: 28px 0; }
.ad-slot[hidden] { display: none; }
.ad-slot.ad-wide { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.ad-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--slate); text-align: center; }
.ad-item { list-style: none; grid-column: 1 / -1; }
.ad-item .ad-slot { margin: 0; }

/* Ad shimmer: same shape as the ad that is loading; fades out once AdSense fills the slot */
.ad-skel { display: grid; gap: 10px; padding: 14px; border: 1px solid rgb(0 0 0 / 0.06); border-radius: 14px; background: #fff; transition: opacity 0.25s; }
.ad-skel .skel-bg { display: block; border-radius: 8px; }
.ad-skel .sk-media { height: clamp(90px, 22vw, 180px); }
.ad-skel .sk-line { height: 12px; }
.ad-skel .sk-title { height: 18px; }
.ad-skel .sk-w90 { width: 90%; } .ad-skel .sk-w80 { width: 80%; } .ad-skel .sk-w70 { width: 70%; } .ad-skel .sk-w60 { width: 60%; }
.ad-skel .sk-button { width: 120px; height: 34px; border-radius: 999px; justify-self: center; }
.ad-skel .sk-pill { width: 110px; height: 22px; border-radius: 999px; }
.ad-skel .sk-row { width: 50%; height: 28px; margin-top: auto; border-radius: 999px; }
/* In-feed shimmer looks like an article card */
.ad-skel-in-feed { height: 100%; min-height: 260px; padding: 26px; border-radius: 18px; align-content: start; }
/* Wide top-of-blog banner: a short horizontal shimmer on large screens */
@media (min-width: 768px) {
  .ad-wide .ad-skel-display { grid-template-columns: 200px 1fr; grid-template-rows: repeat(3, auto); align-items: center; }
  .ad-wide .ad-skel-display .sk-media { grid-row: span 3; height: 110px; }
  .ad-wide .ad-skel-display .sk-button { justify-self: start; }
}
/* The empty <ins> takes no room until AdSense fills it; then the shimmer fades away */
.ad-slot.is-filled .ad-skel { opacity: 0; pointer-events: none; position: absolute; inset: 22px 0 auto; }
@media (prefers-reduced-motion: reduce) { .ad-skel { transition: none; } }