/* Phonics Playmakers™ — Version 1 homepage */
:root {
  --navy:#082d63;
  --blue:#155a82;
  --blob-red:#e2574c;
  --blob-teal:#4fa8c9;
  --blob-orange:#f2a33d;
  --cream:#fdf8ec;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh;
  font-family:"Trebuchet MS","Segoe UI",Arial,sans-serif;
  color:var(--navy); background-color:#f5f5f5;
}

/* Decorative clay-craft background used on every inner page (About, Resources,
   Member Area, Login, and all product/game pages). The homepage keeps its
   plain background — see body.home below — since its hero artwork already
   carries the same colour story. */
body {
  background-image:
    radial-gradient(circle at -4% -8%, rgba(226,87,76,.30), transparent 24%),
    radial-gradient(circle at 104% -6%, rgba(79,168,201,.30), transparent 26%),
    radial-gradient(circle at 100% 104%, rgba(242,163,61,.28), transparent 24%),
    radial-gradient(circle at -4% 104%, rgba(79,168,201,.22), transparent 22%),
    radial-gradient(rgba(8,45,99,.05) 1.6px, transparent 1.8px);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: auto, auto, auto, auto, 26px 26px;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
  background-color: var(--cream);
}
body.home {
  background-image: none;
  background-color: #f5f5f5;
}
.site-header {
  width:min(1200px,calc(100% - 32px));
  margin:12px auto 0; min-height:58px;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:8px 12px 8px 20px;
  background:rgba(255,255,255,.96);
  border:1px solid #e1e1e1; border-radius:14px;
  box-shadow:0 5px 18px rgba(0,0,0,.08);
  position:relative; z-index:10;
}
.brand {
  color:var(--navy); text-decoration:none; font-weight:800;
  font-size:1.1rem; white-space:nowrap;
}
.main-nav { display:flex; align-items:stretch; }
.main-nav a {
  color:var(--navy); text-decoration:none; font-weight:700;
  padding:10px 18px; border-left:1px solid #e1e1e1;
  transition:background .18s ease,color .18s ease;
}
.main-nav a:hover,.main-nav a:focus-visible {
  background:#eef5fb; color:#b32921; outline:none;
}
.hero {
  width:min(1200px,calc(100% - 32px)); margin:12px auto 0;
  position:relative; overflow:hidden; border-radius:4px;
  line-height:0; box-shadow:0 8px 28px rgba(0,0,0,.12);
}
.hero-image { display:block; width:100%; height:auto; }

/* Freebie cards overlaid on the hero image (desktop/tablet). A vertical rail
   on each side so more freebies can simply be added as extra cards later —
   the column just grows, no fixed slots to redesign around. */
.freebie-rail {
  position:absolute; top:44%; z-index:6;
  display:flex; flex-direction:column; gap:12px; width:17%;
}
.freebie-rail-left { left:2%; }
.freebie-rail-right { right:2%; }

.freebie-card {
  display:flex; flex-direction:column; align-items:center; gap:5px;
  background:rgba(255,255,255,.95); border:2px solid #f2b500; border-radius:14px;
  padding:10px 8px; text-decoration:none; text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,.2);
  transition:transform .15s ease, box-shadow .15s ease;
}
.freebie-card:hover, .freebie-card:focus-visible {
  transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,.28); outline:none;
}
.freebie-tag {
  background:#d71920; color:#fff; font-weight:800; font-size:.78rem;
  letter-spacing:.06em; padding:4px 14px; border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.freebie-name {
  color:var(--navy); font-weight:700; font-size:.82rem; line-height:1.25;
}

/* Same freebies as a plain, readable grid below the hero — used instead of
   the overlay on narrow screens where tiny text on top of artwork stops
   being usable. Hidden on desktop/tablet (see .freebie-rail above). */
.freebie-strip {
  display:none;
  width:min(1200px,calc(100% - 32px)); margin:16px auto 0;
  padding:22px 24px; text-align:center; background:white;
  border-radius:18px; box-shadow:0 5px 18px rgba(0,0,0,.07);
}
.freebie-strip h2 { margin:0 0 14px; font-size:1.3rem; color:var(--navy); }
.freebie-grid {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
.freebie-strip .freebie-card { box-shadow:0 2px 8px rgba(0,0,0,.1); }
.welcome {
  width:min(900px,calc(100% - 32px)); margin:28px auto;
  padding:28px 32px; text-align:center; background:white;
  border-radius:18px; box-shadow:0 5px 18px rgba(0,0,0,.07);
}
.welcome h1 { margin:0 0 10px; font-size:clamp(1.6rem,3vw,2.3rem); }
.welcome p { margin:0 auto 20px; max-width:700px; font-size:1.05rem; line-height:1.6; }
.welcome .product-button {
  display:inline-block; text-decoration:none; color:#fff; background:var(--navy);
  border-radius:10px; padding:12px 26px; font-weight:700;
}
.welcome .product-button:hover { background:#d71920; }
footer { padding:12px 20px 28px; text-align:center; color:#5b6470; font-size:.85rem; }

@media (max-width:800px) {
  .site-header { flex-direction:column; align-items:stretch; gap:4px; padding:10px; }
  .brand { text-align:center; padding:4px; }
  .main-nav { justify-content:center; flex-wrap:wrap; }
  .main-nav a { padding:8px 12px; }
  .freebie-rail { display:none; }
  .freebie-strip { display:block; }
  .freebie-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
  .site-header,.hero,.welcome,.freebie-strip { width:calc(100% - 16px); }
  .site-header { margin-top:8px; }
  .main-nav a { font-size:.88rem; padding:7px 9px; }
  .hero { margin-top:8px; }
  .welcome { padding:22px 18px; }
  .freebie-grid { grid-template-columns:1fr; }
}