/* ==========================================================================
   Kidlatta — shared styles
   Matches current site: white bg, mint-green gradient section, black
   reviews section, flat layout (no cards/shadows), rounded geometric type.
   ========================================================================== */

:root {
  --white: #FFFFFF;
  --ink: #1A1A1A;
  --ink-soft: #333333;
  --green: #7ED957;
  --green-line: #8FD673;
  --mint-top: #EAF9E4;
  --mint-bottom: #FFFFFF;
  --black: #0A0A0A;
  --border: #E6E6E6;

  --max-width: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 3vw, 2.1rem); font-weight: 600; }
h3 { font-size: 1.35rem; font-weight: 500; }

p { margin: 0 0 1em; color: var(--ink-soft); }

a { color: var(--ink); text-decoration: underline; }
a:hover { color: var(--green); }

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 1000;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--sun);
  outline-offset: 2px;
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand img { height: 52px; width: 52px; }

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 8px 14px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--green); }
.nav-links a.current { font-weight: 700; text-decoration: underline; }

.nav-cta {
  background: var(--black);
  color: #fff !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
}
.nav-cta:hover { background: var(--green) !important; color: var(--black) !important; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  padding: 6px;
}
/* Matches .brand img's 52x52 logo size. */
.nav-toggle svg { display: block; width: 52px; height: 52px; }

@media (max-width: 820px) {
  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    margin-top: 12px;
  }
  .nav-links.open { display: flex; }
  .nav-wrap { flex-wrap: wrap; }
  .nav-toggle { display: block; }
  .nav-links a { padding: 14px 4px; border-bottom: 1px solid var(--border); font-size: 1.2rem; }
  .nav-links li:last-child a { border-bottom: none; }
  .nav-cta { display: inline-block; margin-top: 8px; text-align: center; }
}

/* ---------- Hero ----------
   Text + badges are anchored left and layered (z-index) above the hero
   mockup image, which is absolutely positioned and bled off the right
   edge. The section's height is driven by the text column (not the
   image), and capped with clamp() so it — plus the header — reliably
   stays above the fold on both mobile and desktop. */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--mint-top) 0%, var(--mint-bottom) 100%);
}
.hero .container {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(320px, 58vh, 540px);
  padding-top: 32px;
  padding-bottom: 32px;
}
.hero-content {
  position: relative;
  z-index: 2;
  /* Wide enough that both store badges fit on one row at their real
     (official-asset) proportions instead of wrapping. */
  max-width: 460px;
  text-align: left;
}
.hero-mockup {
  position: absolute;
  right: clamp(-40px, -4vw, 0px);
  top: 50%;
  transform: translateY(-50%);
  /* No explicit width: with only max-width + max-height set (and no
     fixed width/height), the browser scales the image down to fit
     both boxes while preserving its intrinsic aspect ratio — giving a
     real, un-distorted cap on both axes instead of stretching it. */
  width: auto;
  height: auto;
  max-width: clamp(200px, 46vw, 560px);
  max-height: clamp(220px, 46vh, 420px);
  z-index: 1;
  pointer-events: none;
}
.hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 700;
  margin: 0 0 4px;
}
.hero .tagline {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}
.hero-badges {
  display: flex;
  gap: 28px;
  margin-top: 28px;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.hero-badges img { height: 56px; width: auto; }

/* Desktop/tablet: a much bigger mockup — filling most of the space
   beside the text rather than a small image stranded near the edge —
   and a smaller "Kidlatta" wordmark so the taglines carry the visual
   weight instead of the title. */
@media (min-width: 641px) {
  /* Container has to grow a bit to fully fit the larger image height,
     or overflow:hidden on .hero would clip it again. */
  .hero .container { min-height: clamp(360px, 66vh, 660px); }
  .hero-mockup {
    right: clamp(-16px, -1vw, 0px);
    max-width: clamp(520px, 66vw, 1040px);
    max-height: clamp(320px, 64vh, 640px);
  }
  .hero h1 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
}

/* Guard rail for short viewports (e.g. landscape phones) so the hero
   never pushes the fold past the visible area. */
@media (max-height: 480px) {
  .hero .container { min-height: clamp(260px, 70vh, 360px); padding-top: 20px; padding-bottom: 20px; }
}

/* Mobile: a simple stacked layout instead of the desktop's overlapping
   bled-right image — text, then badges in one row, then a large photo
   below, all in normal flow (so the section just grows to fit, nothing
   needs the earlier clip-behind-the-badges trick). */
@media (max-width: 640px) {
  .hero .container {
    flex-direction: column;
    align-items: flex-start;
    min-height: auto;
    padding-top: 28px;
    padding-bottom: 28px;
  }
  .hero-badges { flex-wrap: nowrap; gap: 14px; }
  .hero-badges img { height: 42px; width: auto; }
  .hero-mockup {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 50vh;
    margin: 28px 0 0;
    align-self: center;
  }
}

/* ---------- Simple page header ----------
   For the plain title banners on About/FAQ, Articles, Contact, and
   Privacy Policy — same mint-gradient theme as the homepage hero, but
   deliberately NOT `.hero` itself: `.hero` is a flex row built for the
   homepage's text+mockup layout, and reusing it here made a bare
   eyebrow+h1 (plus, on some pages, a centered auto-margin paragraph)
   render as sideways flex items instead of a stacked block. */
.page-header {
  padding: 56px 0 32px;
  background: linear-gradient(180deg, var(--mint-top) 0%, var(--mint-bottom) 100%);
}

.eyebrow {
  display: inline-block;
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin-bottom: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  text-decoration: none;
}
.btn-primary { background: var(--black); color: #fff; }
.btn-primary:hover { background: var(--green); color: var(--black); text-decoration: none; }
.btn-secondary { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn-secondary:hover { background: var(--ink); color: #fff; text-decoration: none; }
.btn-link {
  display: inline-block;
  font-weight: 500;
  text-decoration: underline;
  padding: 0;
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 1rem;
}

/* ---------- Feature list (flat, no cards — matches current site) ---------- */
.features {
  padding: 56px 0;
}
.feature-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 32px;
}
@media (min-width: 700px) {
  .feature-list { grid-template-columns: 1fr 1fr; column-gap: 56px; }
}
.feature-item .icon {
  width: 64px;
  height: 64px;
  margin-bottom: 14px;
  object-fit: contain;
}
.feature-item h3 { margin-bottom: 10px; }
.feature-item p { max-width: 640px; margin-bottom: 0; }
.feature-item a { font-weight: 500; }

/* ---------- Section variants ---------- */
.section { padding: 56px 0; }

.section-mint {
  background: linear-gradient(180deg, var(--mint-top) 0%, var(--mint-bottom) 100%);
}

.section-black {
  background: var(--black);
  color: #fff;
  padding-top: 96px;
}
.section-black h2 { color: #fff; }
.section-black p { color: #E6E6E6; }

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; }
}

/* ---------- Benefits list (plain lines, matches current site) ---------- */
.benefit-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 16px;
}
.benefit-list li {
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--ink);
}
.benefits-screen {
  max-width: 280px;
  margin: 32px auto 0;
  border-radius: 24px;
}
@media (min-width: 821px) {
  .benefits-screen { margin: 0 0 0 auto; }
}

/* ---------- Story ---------- */
.story h2 { margin-bottom: 20px; }
.story p { max-width: 760px; margin-bottom: 1.4em; }
/* No forced height/object-fit here — the photo is portrait (880x1173),
   and stretching it to fill a wide landscape box via cover was cropping
   heads off. Capping only width and letting height follow the photo's
   own aspect ratio guarantees the whole thing stays visible. */
.story-row { align-items: start; gap: 24px; }
.story-photo {
  width: 100%;
  max-width: 250px;
  height: auto;
  border-radius: 16px;
}
@media (max-width: 820px) {
  .story-photo { max-width: 195px; }
}

/* ---------- Reviews (plain quotes, one per column, no cards) ---------- */
.review-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  margin: 28px auto 0;
  max-width: none;
  text-align: center;
}
@media (min-width: 700px) {
  .review-list { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
.review-list blockquote {
  margin: 0;
  padding: 0;
  font-style: normal;
  font-size: 1.05rem;
  color: #E6E6E6;
}

/* ---------- Forms ---------- */
.form-card {
  background: transparent;
  padding: 0;
  max-width: 640px;
  margin: 0 auto;
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--white);
  color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--ink);
  outline: none;
}
.field textarea { min-height: 130px; resize: vertical; }
.radio-group { display: flex; gap: 20px; flex-wrap: wrap; }
.radio-group label { display: flex; align-items: center; gap: 6px; font-weight: 500; }
.radio-group input { width: auto; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input { width: auto; }

.form-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 10px;
}
.form-note.success { color: #2E7D32; }
.form-note.error { color: #C62828; }
.form-status {
  margin-top: 16px;
  font-weight: 600;
  display: none;
}
.form-status.success { color: #2E7D32; display: block; }
.form-status.error { color: #C62828; display: block; }

/* ---------- FAQ ---------- */
.faq-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.faq-item h3 { margin-bottom: 8px; font-size: 1.1rem; }
.faq-item p { margin-bottom: 0; }
.faq-item p:last-child { margin-top: 0.6em; }

/* ---------- Legal text ---------- */
.legal h3 {
  margin-top: 1.6em;
}
.legal ul { padding-left: 20px; color: var(--ink-soft); }
.legal p, .legal li { color: var(--ink-soft); }
.legal a { font-weight: 500; }

/* ---------- Articles ----------
   Each article is a full-width row (not a card in a grid) so a summary
   can sit beside its own photo. Rows without a photo are just the text
   column — .has-photo is only added when the article has one. */
.article-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 32px;
}
.article-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border);
}
.article-card:last-child { border-bottom: none; padding-bottom: 0; }
/* Narrower and taller-than-wide — most uploaded photos are portrait
   phone photos, so this crops far less aggressively than a wide
   landscape box would (was 240x160, now 160x200). */
.article-card.has-photo { grid-template-columns: 1fr 160px; align-items: start; }
@media (max-width: 640px) {
  .article-card.has-photo { grid-template-columns: 1fr; }
}
.article-card .thumb {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--mint-top);
  border: 1px solid var(--border);
}
.article-card .body { padding: 0; }
.article-card h3 { margin-bottom: 8px; }
.empty-state {
  text-align: center;
  padding: 48px 24px;
  background: var(--mint-top);
}

/* ---------- Single article page (article.html) ---------- */
.article-detail { padding-top: 40px; }
.article-detail h1 {
  margin-top: 10px;
  margin-bottom: 6px;
}
/* object-fit: contain (not cover) — the whole photo always stays fully
   visible, never cropped. Matters most for graphics/icons/screenshots
   (like a trophy icon), where cropping cuts off the actual content
   rather than just trimming background like it would on a photo. The
   mint fill shows in any letterboxed space for non-matching ratios. */
.article-detail-photo {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--mint-top);
  border-radius: 16px;
  margin: 24px 0 8px;
}

/* Same aspect-ratio + object-fit + background as .article-detail-photo
   above, just smaller — so the admin upload preview is a genuinely
   accurate preview of how the photo will actually be framed on the
   published article, not just a random-shaped thumbnail. */
.photo-preview {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  background: var(--mint-top);
  border-radius: 12px;
  border: 1px solid var(--border);
  margin-top: 10px;
}
/* Paragraphs already get spacing from the base p{margin-bottom:1em}
   rule — this is just for line length, since .container alone would
   let text run the full 720px width. */
#article-content { max-width: 640px; }

/* ---------- Chart Ideas screenshots ---------- */
.chart-ideas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 8px;
}
.chart-ideas-grid img {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border);
}
@media (max-width: 700px) {
  .chart-ideas-grid { grid-template-columns: 1fr; max-width: 320px; margin-left: auto; margin-right: auto; }
}

/* Condensed "submit an article" CTA — text left, button right — sits
   under the Articles Hub title instead of the old full-width card. */
.article-submit-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  text-align: left;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.article-submit-cta p {
  margin: 0;
  max-width: 520px;
  color: var(--ink-soft);
}
.article-submit-cta .btn { flex-shrink: 0; }

/* ---------- Footer (same white as the header, so the site is
   bookended by matching bars around the dark reviews section) ---------- */
.site-footer {
  background: var(--white);
  color: var(--ink-soft);
  padding: 28px 0;
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-social {
  display: flex;
  align-items: center;
  color: var(--ink);
}
.footer-social:hover { color: var(--green); }
.footer-badges { display: flex; align-items: center; gap: 22px; }
.footer-badges img { height: 44px; width: auto; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.85rem; }
.footer-links span { color: #999; }

/* ---------- Article card meta (public Articles page) ---------- */
.article-meta {
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.article-byline {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: -4px;
}

/* ---------- Admin ---------- */
.admin-user-badge { font-size: 0.85rem; color: var(--ink-soft); }
.admin-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}
.admin-actions { display: flex; gap: 10px; align-items: center; }
.admin-form-panel {
  margin-bottom: 40px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--mint-top);
  /* .site-header is position:sticky at ~89px tall. Without this,
     formWrap.scrollIntoView() (used by "+ New article" and "Edit")
     scrolls the panel flush to the very top of the viewport, so the
     sticky header covers its heading and first field — looking like
     the button did nothing. */
  scroll-margin-top: 105px;
}
.admin-form-panel h3 { margin-bottom: 16px; }
.admin-form-actions { display: flex; gap: 10px; align-items: center; }
.admin-article-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.admin-article-meta {
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.admin-article-title { font-weight: 600; }
.admin-article-author { font-size: 0.9rem; color: var(--ink-soft); }
.admin-row-actions { display: flex; gap: 8px; flex-shrink: 0; }
.admin-row-actions .danger { color: #C62828; }