/* style_hp.css — shared HP-design tokens, topbar, sticky NL, footer.
   Used by index.php and about/index.php (and any other HP-style page).
   Page-specific CSS (hero, stats, articles, library, ab-hero, ab-bio, etc.)
   stays inline in the page. */

/* ── Hide blog chrome rendered by header_elegant.php ── */
.pc, .telo, .banner, header.mobil, .prem-mob-bar, .footer-nl-mobile-only,
#footer_name_and_desc, #hashtags, #mobil_divider { display: none !important; }

/* Defensive: even if .telo somehow renders, kill its min-width:750px from
   style_observer.css which would force horizontal overflow on phones. */
.telo { min-width: 0 !important; max-width: 100% !important; width: 100% !important; }

/* iOS Safari: prevent automatic font inflation on non-mobile-optimized pages.
   Root cause of H1 looking 50–60px on phones despite 30px rule. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── Design tokens ── */
.rg {
  --bg: #faf8f3;            /* warm cream — portrait/cover photos breathe */
  --ink: #1a2128;           /* primary text */
  --ink-soft: #536574;      /* secondary text */
  --ink-faint: #778998;     /* tertiary */
  --rule: #e8e4df;          /* separators */
  --rule-soft: #f1ede7;
  --accent: #4a7c59;        /* green — used for ✓, links, consent confirmations */
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --brand: "Gideon Roman", "EB Garamond", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad: 56px;
  --gap: 28px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  position: relative;
  padding-bottom: 160px; /* space for sticky bar (with GDPR row) */
}
.rg.no-sticky { padding-bottom: 0; }
.rg * { box-sizing: border-box; }
.rg a { color: inherit; text-decoration: none; }

/* Image placeholder utility */
.rg .ph {
  background:
    repeating-linear-gradient(45deg, var(--rule) 0 1px, transparent 1px 10px),
    var(--rule-soft);
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 11px;
  display:flex; align-items:center; justify-content:center;
  text-transform:uppercase;
  letter-spacing:.08em;
}

/* ── Topbar ── */
.rg .topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px var(--pad) 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
}
.rg .topbar .brand {
  font-family: var(--brand);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.rg .topbar nav { display:flex; gap: 22px; }
.rg .topbar nav a:hover { color: var(--ink); }
.rg .lang {
  display:flex; gap: 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.rg .lang a { color: var(--ink-soft); }
.rg .lang a.on { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom:1px; }

/* ── Utility text classes ── */
.rg .meta {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}

.rg .kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ── CTA button ── */
.rg .cta {
  display:inline-flex; align-items:center; gap:10px;
  background: var(--ink); color: var(--bg);
  padding: 14px 22px;
  border: none; cursor: pointer;
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.rg .cta.outline { background: transparent; color: var(--ink); border:1px solid var(--ink); }
.rg .cta.accent { background: var(--accent); color: #fff; }
.rg .cta:hover { opacity: .9; }

/* "Read the blog" outlined button (.rg .cta variant used in stats sections) */
.rg .stats-cta { display: inline-flex; align-items: center; padding: 0 22px; }
.rg .hero-blog-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  border: 1px solid var(--ink);
  background: transparent;
  padding: 14px 22px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.rg .hero-blog-link:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ── Stats strip (border-top/border-bottom row of inline stats) ── */
.rg .stats {
  display:flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: 0;
  padding: 22px var(--pad);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
}
.rg .stats .stat { display:inline-flex; align-items: baseline; gap: 10px; padding: 0 22px; position: relative; }
.rg .stats .stat + .stat::before { content: none; }
.rg .stats .num {
  font-size: 22px; font-weight: 400;
  letter-spacing: -0.01em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rg .stats .lbl {
  font-family: var(--sans);
  font-size: 11px; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.14em;
}

/* ── Newsletter form (hero variant — inline border) ── */
.rg .nl {
  display:flex; align-items:stretch; max-width: 460px;
  border: 1px solid var(--ink); background: var(--bg);
}
.rg .nl input {
  flex:1; border:0; background: transparent;
  padding: 14px 16px;
  /* Sans-serif (Inter) — readable, matches sticky bar input. */
  font-family: var(--sans);
  font-size: 14px; color: var(--ink); outline:none;
}
.rg .nl input::placeholder { color: var(--ink-faint); font-style: normal; }
.rg .nl button {
  border:0; background: var(--ink); color: var(--bg);
  padding: 0 22px; cursor:pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
}
.rg .nl-gdpr { display:flex; gap:8px; margin-top: 10px; max-width: 460px; align-items: flex-start; }
.rg .nl-gdpr input { margin-top: 3px; }
.rg .nl-gdpr label { font-family: var(--sans); font-size: 12px; color: var(--ink-faint); line-height: 1.4; }
.rg .nl-gdpr a { border-bottom: 1px solid var(--rule); }
.rg .nl-msg { font-family: var(--sans); font-size: 13px; color: var(--accent); margin-top: 10px; min-height: 18px; }

/* ── Sticky newsletter bar (bottom of viewport) ── */
.rg .sticky {
  position: fixed; left:0; right:0; bottom:0;
  background: var(--ink); color: var(--bg);
  padding: 14px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  font-family: var(--sans); font-size: 13px;
  z-index: 50;
}
/* Newsletter kicker — uppercase tag with envelope icon, makes it immediately
   clear that this dark bar is a newsletter signup (not a generic CTA). */
.rg .sticky .sticky-kicker {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 6px 0;
  display: inline-flex;
  align-items: center;
}
.rg .sticky .nl {
  border-color: var(--bg);
  background: transparent;
  max-width: 380px;
}
/* Sticky NL input — sans-serif (Inter) for readability on dark bg. */
.rg .sticky .nl input {
  color: var(--bg); font-size: 14px; padding: 10px 14px;
  font-family: var(--sans);
}
.rg .sticky .nl input::placeholder {
  color: rgba(255,255,255,.55); font-style: normal;
}
.rg .sticky .nl button { background: var(--bg); color: var(--ink); }
.rg .sticky .sticky-form { display: flex; flex-direction: column; gap: 6px; min-width: 320px; }
.rg .sticky .sticky-gdpr { margin-top: 0; }
.rg .sticky .sticky-gdpr label { color: rgba(255,255,255,.7); }
.rg .sticky .sticky-gdpr label a { color: var(--bg); border-bottom: 1px solid rgba(255,255,255,.4); }
.rg .sticky .sticky-msg { color: rgba(255,255,255,.85); margin-top: 0; min-height: 0; }
.rg .sticky .sticky-msg:empty { display: none; }

/* ── Search box (HP-idiom: square, ink border, sans-serif).
   POSTs to same URL — handler in header_elegant.php redirects to /search/<slug>.
   Inputs MUST keep name='hladane' and submit name='submit' for that handler. */
.rg .search-section {
  padding: 36px var(--pad);
  /* No border-bottom — next section (.featured / .cats / .latest) provides
     its own border-top. Two borders would double up to a thick line. */
  display: flex; justify-content: center;
  /* Defensive width guards — flex children have min-width: 0 so they
     can shrink under intrinsic placeholder width on iPhone 12 mini (375px).
     NOTE: NO `overflow: hidden` here — would clip the live-search dropdown
     that overlays the next section (Featured). */
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
}
.rg .search-section .search-inner {
  width: 100%; max-width: 560px;
  min-width: 0;
}
.rg .search-section .hp-search {
  min-width: 0; max-width: 100%;
}
.rg .search-section .search-label {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px 0;
  text-align: center;
}
.rg .hp-search {
  display: flex; align-items: stretch;
  border: 1px solid var(--ink); background: var(--bg);
}
.rg .hp-search input[type="text"] {
  flex: 1; border: 0; background: transparent;
  padding: 14px 16px;
  font-family: var(--sans); font-size: 14px;
  color: var(--ink); outline: none;
  min-width: 0;
}
.rg .hp-search input[type="text"]::placeholder {
  color: var(--ink-faint); font-style: normal;
}
.rg .hp-search button {
  border: 0; background: var(--ink); color: var(--bg);
  padding: 0 22px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.04em;
}
.rg .hp-search button:hover { opacity: .9; }
.rg .hp-search button svg { width: 15px; height: 15px; display: block; }

/* ── Footer ── */
.rg footer.rg-footer {
  padding: 36px var(--pad) 60px;
  font-family: var(--sans); font-size: 12px;
  color: var(--ink-faint);
  display:flex; justify-content: space-between; align-items: flex-start;
  gap: 24px;
  border-top: 1px solid var(--rule);
}
.rg footer.rg-footer a { color: var(--ink-soft); }
.rg footer.rg-footer .links { display:flex; flex-wrap:wrap; gap: 14px; }
/* Footer lang switcher — visible only on mobile (desktop uses topbar lang) */
.rg footer.rg-footer .footer-lang {
  display: none;
  gap: 14px;
  font-family: var(--sans); font-size: 12px;
}
.rg footer.rg-footer .footer-lang a { color: var(--ink-soft); }
.rg footer.rg-footer .footer-lang a.on {
  color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 1px;
}

/* ── Responsive — shared rules (page-specific layout breakpoints stay inline) ── */
@media (max-width: 900px) {
  .rg { --pad: 24px; }
  .rg .sticky { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px var(--pad); }
  .rg .sticky .nl { max-width: 100%; }
  .rg .sticky .sticky-form { min-width: 0; width: 100%; }
  .rg .stats .stat { padding: 0 12px; }

  /* iOS Safari prevents auto-zoom on input focus only when font-size ≥ 16px.
     Without this, tap on .hp-search input zooms the viewport, which breaks
     scroll bounds and creates horizontal overflow on the page. */
  .rg .hp-search input[type="text"],
  .rg .nl input,
  .rg .sticky .nl input { font-size: 16px; }

  /* Defensive horizontal overflow guard — auto-zoom on inputs can still
     trigger viewport widening on edge cases. Lock body/html overflow-x. */
  html, body { overflow-x: hidden; max-width: 100vw; }
}

@media (max-width: 560px) {
  /* Belt-and-suspenders: prevent any child from forcing horizontal scroll */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .rg { padding-bottom: 0; max-width: 100vw; overflow-x: hidden; }

  /* --pad bumped to 28px (was 20px) — phones need more breathing room from
     edge; with 20px text was visually glued to the screen edge on iOS Safari. */
  .rg { --pad: 28px; }

  /* Newsletter form: stack input + button vertically */
  .rg .nl {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }
  .rg .nl input {
    padding: 14px 14px;
    width: 100%;
  }
  .rg .nl button {
    padding: 12px 16px;
    border-top: 1px solid var(--ink);
    width: 100%;
  }
  .rg .nl-gdpr,
  .rg .nl-msg { max-width: 100%; }

  /* Read-the-blog button mobile sizing */
  .rg .hero-blog-link { padding: 14px 22px; font-size: 14px; }

  /* Stats stack vertically on phones */
  .rg .stats { flex-direction: column; gap: 6px; padding: 22px var(--pad) 26px; }
  .rg .stats .stat { padding: 0; }
  .rg .stats .stat + .stat::before { content: none; }
  .rg .stats .stats-cta {
    padding: 0;
    margin-top: 16px;
    align-self: flex-start;
  }

  /* Sticky NL hidden on mobile — saves valuable mobile space below scroll */
  .rg .sticky { display: none; }

  /* Search box mobile — stack input + button vertically (matches .nl pattern) */
  .rg .search-section { padding: 24px var(--pad); }
  .rg .hp-search { flex-direction: column; width: 100%; max-width: 100%; }
  .rg .hp-search input[type="text"] { padding: 14px; width: 100%; }
  .rg .hp-search button {
    border-top: 1px solid var(--ink);
    padding: 12px 16px; width: 100%;
    gap: 8px;
  }
  .rg .hp-search button::after {
    content: 'Search';
    font-size: 13px;
  }

  /* Topbar mobile — brand left, nav right (lang moved to footer).
     5+ nav items is a lot on phone — allow wrap. */
  .rg .topbar { padding: 16px var(--pad) 0; flex-wrap: wrap; gap: 8px; }
  .rg .topbar .brand { font-size: 18px; }
  .rg .topbar nav {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    justify-content: flex-end;
  }
  .rg .topbar .lang { display: none; }
  /* Footer lang switcher visible only on mobile */
  .rg footer.rg-footer .footer-lang { display: flex; }
  .rg footer.rg-footer { flex-direction: column; gap: 16px; padding: 24px var(--pad) 40px; }
}