/*
Theme Name: Family Link
Theme URI: https://www.family-link.app
Author: Family Link
Description: Marketing theme for Family Link — the missing link for single and divorced parents. Two homes. One team.
Version: 1.0.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: family-link
*/

:root {
  --fl-teal: #0d9488;
  --fl-teal-dark: #0f766e;
  --fl-coral: #f97316;
  --fl-ink: #0f172a;
  --fl-ink-soft: #334155;
  --fl-muted: #64748b;
  --fl-bg: #f8fafc;
  --fl-card: #ffffff;
  --fl-line: #e2e8f0;
  --fl-gold: #f59e0b;
  --fl-radius: 18px;
  --fl-shadow: 0 10px 30px rgba(15, 23, 42, .08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--fl-ink);
  background: var(--fl-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--fl-teal-dark); text-decoration: none; }
.fl-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------- header ---------- */
.fl-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fl-line);
}
.fl-header .fl-wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.fl-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--fl-ink); }
.fl-logo svg { width: 34px; height: 34px; }
.fl-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; font-weight: 600; font-size: .95rem; min-width: 0; }
.fl-nav a { color: var(--fl-ink-soft); }
.fl-nav a:hover { color: var(--fl-teal-dark); }
.fl-nav .fl-btn { color: #fff; white-space: nowrap; }
.fl-nav .fl-login { white-space: nowrap; }
.fl-menu { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fl-menu::-webkit-scrollbar { display: none; }
.fl-menu ul { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; }
.fl-menu li { white-space: nowrap; }
.fl-menu li.current-menu-item > a, .fl-menu li.current_page_item > a { color: var(--fl-teal-dark); }
@media (max-width: 720px) {
  .fl-header .fl-wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
  .fl-nav { flex-basis: 100%; }
}

/* ---------- buttons ---------- */
.fl-btn {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--fl-teal); color: #fff; font-weight: 700; font-size: 1rem;
  border: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 18px rgba(13,148,136,.35);
}
.fl-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(13,148,136,.45); }
.fl-btn.fl-btn-ghost {
  background: transparent; color: var(--fl-teal-dark);
  border: 2px solid var(--fl-teal); box-shadow: none;
}
.fl-btn.fl-btn-coral { background: var(--fl-coral); box-shadow: 0 6px 18px rgba(249,115,22,.35); }

/* ---------- hero ---------- */
.fl-hero {
  position: relative; overflow: hidden;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(13,148,136,.18), transparent 60%),
              radial-gradient(900px 500px at 10% 110%, rgba(249,115,22,.14), transparent 60%),
              linear-gradient(180deg, #ffffff 0%, var(--fl-bg) 100%);
  padding: 84px 0 70px;
  text-align: center;
}
.fl-beta-pill {
  display: inline-block; margin-bottom: 22px; padding: 7px 16px; border-radius: 999px;
  background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; font-weight: 700; font-size: .85rem;
}
.fl-hero h1 { font-size: clamp(2.3rem, 6vw, 3.8rem); line-height: 1.1; font-weight: 900; letter-spacing: -.02em; }
.fl-hero h1 .fl-accent { color: var(--fl-teal); }
.fl-hero .fl-sub {
  max-width: 640px; margin: 22px auto 34px; font-size: 1.15rem; color: var(--fl-ink-soft);
}
.fl-hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.fl-hero-note { margin-top: 16px; font-size: .9rem; color: var(--fl-muted); }

/* ---------- sections ---------- */
.fl-section { padding: 72px 0; }
.fl-section.fl-alt { background: #fff; border-top: 1px solid var(--fl-line); border-bottom: 1px solid var(--fl-line); }
.fl-kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 800; color: var(--fl-coral); }
.fl-section h2 { font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.01em; margin: 8px 0 12px; }
.fl-section .fl-lead { color: var(--fl-ink-soft); max-width: 660px; font-size: 1.05rem; }
.fl-center { text-align: center; }
.fl-center .fl-lead { margin: 0 auto; }

/* feature grid */
.fl-grid { display: grid; gap: 20px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fl-card {
  background: var(--fl-card); border: 1px solid var(--fl-line); border-radius: var(--fl-radius);
  padding: 26px; box-shadow: var(--fl-shadow);
}
.fl-card .fl-emoji { font-size: 2rem; }
.fl-card h3 { margin: 12px 0 8px; font-size: 1.15rem; }
.fl-card p { color: var(--fl-ink-soft); font-size: .97rem; }

/* the game */
.fl-game {
  margin-top: 40px; padding: 34px; border-radius: var(--fl-radius);
  background: linear-gradient(135deg, var(--fl-ink) 0%, #134e4a 100%); color: #e2e8f0;
  box-shadow: var(--fl-shadow);
}
.fl-game h3 { font-size: 1.5rem; color: #fff; margin-bottom: 10px; }
.fl-game p { max-width: 720px; }
.fl-game .fl-win { color: #5eead4; font-weight: 800; }

/* referee steps */
.fl-steps { display: grid; gap: 20px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); counter-reset: step; }
.fl-step { position: relative; background: var(--fl-card); border: 1px solid var(--fl-line); border-radius: var(--fl-radius); padding: 26px; box-shadow: var(--fl-shadow); }
.fl-step::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--fl-coral); color: #fff; font-weight: 800;
  margin-bottom: 12px;
}
.fl-step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.fl-step p { color: var(--fl-ink-soft); font-size: .95rem; }

/* courses */
.fl-courses { display: grid; gap: 18px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.fl-course {
  background: var(--fl-card); border: 1px solid var(--fl-line); border-radius: var(--fl-radius);
  padding: 22px; box-shadow: var(--fl-shadow); display: flex; flex-direction: column; gap: 8px;
}
.fl-course .fl-emoji { font-size: 1.8rem; }
.fl-course h3 { font-size: 1.08rem; }
.fl-course p { color: var(--fl-ink-soft); font-size: .93rem; flex: 1; }
.fl-course-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.fl-chip { padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.fl-chip-free { background: #ccfbf1; color: var(--fl-teal-dark); }
.fl-chip-soon { background: #f1f5f9; color: var(--fl-muted); }
.fl-chip-kids { background: #ffedd5; color: #c2410c; }
.fl-price { margin-left: auto; font-weight: 800; color: var(--fl-ink); font-size: .95rem; }

/* pricing */
.fl-plans { display: grid; gap: 20px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.fl-plan {
  background: var(--fl-card); border: 1px solid var(--fl-line); border-radius: var(--fl-radius);
  padding: 30px; box-shadow: var(--fl-shadow); display: flex; flex-direction: column;
}
.fl-plan.fl-featured { border: 2px solid var(--fl-teal); position: relative; }
.fl-plan.fl-featured::after {
  content: "Best value"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--fl-teal); color: #fff; font-size: .75rem; font-weight: 800;
  padding: 4px 14px; border-radius: 999px;
}
.fl-plan h3 { font-size: 1.1rem; color: var(--fl-muted); font-weight: 700; }
.fl-plan .fl-amount { font-size: 2.4rem; font-weight: 900; margin: 8px 0; }
.fl-plan .fl-amount span { font-size: 1rem; color: var(--fl-muted); font-weight: 600; }
.fl-plan ul { list-style: none; margin: 14px 0 22px; flex: 1; }
.fl-plan li { padding: 7px 0; color: var(--fl-ink-soft); font-size: .95rem; }
.fl-plan li::before { content: "✓  "; color: var(--fl-teal); font-weight: 800; }
.fl-beta-banner {
  margin-top: 34px; text-align: center; padding: 20px; border-radius: var(--fl-radius);
  background: #fff7ed; border: 1px dashed #fdba74; color: #9a3412; font-weight: 700;
}

/* final cta */
.fl-final { text-align: center; padding: 80px 0; }
.fl-final h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; }
.fl-final p { color: var(--fl-ink-soft); margin: 14px 0 30px; }

/* footer */
.fl-footer { border-top: 1px solid var(--fl-line); padding: 34px 0; background: #fff; }
.fl-footer .fl-wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; color: var(--fl-muted); font-size: .9rem; }

/* generic content pages */
.fl-page { padding: 60px 0; }
.fl-page h1 { font-size: 2rem; margin-bottom: 18px; }
.fl-page .fl-content p { margin-bottom: 14px; color: var(--fl-ink-soft); }

/* dedicated topic pages */
.fl-pagehero {
  background: linear-gradient(180deg, #ffffff 0%, var(--fl-bg) 100%);
  padding: 56px 0 40px; text-align: center; border-bottom: 1px solid var(--fl-line);
}
.fl-pagehero h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 900; letter-spacing: -.02em; }
.fl-pagehero .fl-lead { margin: 14px auto 0; }
.fl-pagehero .fl-emoji-hero { font-size: 2.6rem; display: block; margin-bottom: 8px; }

/* teaser rows on the front page */
.fl-teaser {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: var(--fl-card); border: 1px solid var(--fl-line); border-radius: var(--fl-radius);
  padding: 28px; box-shadow: var(--fl-shadow); margin-top: 26px;
}
.fl-teaser .fl-teaser-emoji { font-size: 2.4rem; }
.fl-teaser .fl-teaser-body { flex: 1; min-width: 240px; }
.fl-teaser h3 { font-size: 1.25rem; margin-bottom: 6px; }
.fl-teaser p { color: var(--fl-ink-soft); }

/* foul cards on the referee page */
.fl-fouls { display: grid; gap: 14px; margin-top: 30px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.fl-foul { background: var(--fl-card); border: 1px solid var(--fl-line); border-left: 4px solid var(--fl-coral); border-radius: 12px; padding: 16px 18px; }
.fl-foul strong { display: block; margin-bottom: 4px; color: var(--fl-ink); }
.fl-foul span { color: var(--fl-muted); font-size: .9rem; }

/* mini FAQ */
.fl-faq { max-width: 700px; margin: 30px auto 0; text-align: left; }
.fl-faq details { background: var(--fl-card); border: 1px solid var(--fl-line); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.fl-faq summary { font-weight: 700; cursor: pointer; }
.fl-faq p { margin-top: 8px; color: var(--fl-ink-soft); }