/*
 * ============================================================
 * common.css — Shared site shell (loaded on EVERY page)
 * ============================================================
 * Ad slot, page-layout grid (content | right-ad), and footer.
 * Nav + hero live in critical.css; homepage-only sections live in home.css.
 * Rules are grouped layout-origin first, then component-origin, to preserve
 * the original cascade order.
 * ============================================================
 */

/* ══════════════════════════
   AD SLOT — Banner wrapper
══════════════════════════ */
.ad-slot{
  background:#EEF6FF;
  display:flex;justify-content:center;
  padding:clamp(14px,2.5vw,24px) var(--px);
}
.ad-slot__box{
  width:100%;
  max-width:728px;
  height:clamp(80px,14vw,100px);
  background:#dbeeff;
  border:2px dashed #b5d4f4;
  border-radius:var(--r-md);
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
  color:#7aabda;
  letter-spacing:0.08em;
  text-transform:uppercase;
}

/* ══════════════════════════
   PAGE LAYOUT — shared 2-column grid (content | right-ad)
   Default for all content pages. Only the content column
   changes per page; do not alter without an explicit request.
══════════════════════════ */
/* ── < 1280px — content only, centered ── */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 900px);
  grid-template-areas: "content";
  justify-content: center;
  gap: 0;
  width: 100%;
  padding: 32px 16px;
  align-items: start;
  background: linear-gradient(to bottom, var(--bg-top), var(--bg-bot));
}
.col-ad--right { display: none; }

/* ── ≥ 1280px — content + one 300px ad ── */
@media (min-width: 1280px) {
  .page-layout {
    grid-template-columns: 900px 300px;
    grid-template-areas: "content right-ad";
    justify-content: center;
    gap: 40px;
    padding: 32px 0;
  }
  .col-ad--right { display: block; }
}

/* ── Column assignments ── */
.col-content   { grid-area: content; min-width: 0; }
.col-ad--right { grid-area: right-ad; }

/* ── Sidebar column — must stretch full height for sticky to work ── */
.col-ad {
  align-self: stretch;
}

/* ── Sidebar ad box ── */
.col-ad .ad-slot__box {
  position: sticky;
  top: 90px; /* clears the sticky nav */
  background: var(--card-bg);
  border: 1px solid var(--card-bdr);
  border-radius: var(--r-md);
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: grid;
  place-items: center;
  height: 600px;
  width: 100%;
}

/* ══════════════════════════
   FOOTER — Structural wrapper
══════════════════════════ */
.footer{
  background:#efefef;
  padding:clamp(48px,6vw,72px) var(--px) 0;
  border-top:1px solid rgba(0,0,0,0.06);
}
.footer__inner{
  max-width:1280px;margin:0 auto;
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:clamp(48px,7vw,96px);
  padding-bottom:clamp(40px,5vw,60px);
  border-bottom:1px solid rgba(0,0,0,0.05);
}

/* Bottom bar */
.footer__bottom{
  max-width:1280px;margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:clamp(16px,2vw,24px) 0;
}

/* Footer responsive */
@media(max-width:900px){
  .footer__inner{grid-template-columns:1fr 1fr;}
  .footer__brand{grid-column:1/span 2;}
}
@media(max-width:560px){
  .footer__inner{grid-template-columns:1fr;}
  .footer__brand{grid-column:1;}
  .footer__bottom{flex-direction:column;text-align:center;}
}

/* ══════════════════════════
   FOOTER — Brand & nav link components
══════════════════════════ */

/* Col 1 — Brand */
.footer__brand{}
.footer__logo{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;
  margin-bottom:20px;
}
.footer__logo-text{
  font-size:24px;font-weight:800;
  color:#1A2238;
  letter-spacing:0.01em;
  font-style:italic;
}
.footer__tagline{
  font-size:13px;font-weight:600;
  color:#6b7280;
  line-height:1.6;
  margin-bottom:20px;
  max-width:220px;
}

/* KidSAFE seal */
.footer__kidsafe{
  display:flex;align-items:center;gap:8px;margin-top:4px;
}
.footer__kidsafe img{
  width:48px;height:auto;
  opacity:0.7;
  transition:opacity 0.2s;
}
.footer__kidsafe img:hover{opacity:0.9;}
.footer__kidsafe-text{
  font-size:11px;font-weight:600;
  color:#6b7280;
  line-height:1.4;
  max-width:120px;
}

/* Cols 2-4 — Links */
.footer__col-title{
  font-size:11px;font-weight:800;
  text-transform:uppercase;letter-spacing:0.12em;
  color:#1A2238;
  opacity:0.9;
  margin-bottom:16px;
}
.footer__links{
  display:flex;flex-direction:column;gap:10px;
  list-style:none;padding:0;margin:0;
}
.footer__links a{
  font-size:14px;font-weight:600;
  color:#6b7280;
  text-decoration:none;
  transition:color 0.2s ease;
}
.footer__links a:hover{color:#1A2238;}

/* Bottom bar */
.footer__copy{
  font-size:12px;font-weight:600;
  color:#6b7280;
}
.footer__bottom-links{
  display:flex;gap:20px;flex-wrap:wrap;
}
.footer__bottom-links a{
  font-size:12px;font-weight:600;
  color:#6b7280;
  text-decoration:none;
  transition:color 0.2s;
}
.footer__bottom-links a:hover{color:#1A2238;}