/* ============================================================
   GLOBAL KIDS PLAY SCHOOL — SITE EXPANSION ADDITIONS
   Purely additive: new component classes only, built from the
   same :root tokens defined in main.css. Nothing here overrides
   or modifies an existing selector.
   ============================================================ */

.breadcrumb-row{
  max-width:1180px;margin:0 auto;padding:18px 28px 0;
  font-size:13px;font-weight:700;color:var(--ink-soft);
}
.breadcrumb-row a{color:var(--sky-deep);}
.breadcrumb-row span{margin:0 8px;opacity:.5;}

.page-hero{
  position:relative;padding:60px 0 54px;overflow:hidden;
  background:radial-gradient(circle at 85% 10%, #FFF3D6 0%, transparent 55%),
             radial-gradient(circle at 5% 90%, #E4F8FC 0%, transparent 55%),
             var(--cloud);
  text-align:center;
}
.page-hero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.1;color:var(--ink);max-width:800px;margin:0 auto;}
.page-hero p.lede{margin:18px auto 0;font-size:18px;color:var(--ink-soft);max-width:600px;}
.page-hero .hero-cta-row{justify-content:center;margin-top:30px;}

.quick-answer{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--sun-deep);
  border-radius:var(--radius-md);padding:26px 30px;margin:0 auto 50px;max-width:780px;
  box-shadow:var(--shadow-soft);
}
.quick-answer .eyebrow{margin-bottom:10px;}
.quick-answer p{color:var(--ink);font-size:16px;line-height:1.75;margin:0;}

.faq-list{max-width:780px;margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);padding:22px 0;}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:16.5px;color:var(--ink);
}
body.lang-ja .faq-item summary{font-family:'Zen Maru Gothic',sans-serif;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';flex-shrink:0;color:var(--coral-deep);font-size:22px;font-family:'Nunito',sans-serif;}
.faq-item[open] summary::after{content:'\2013';}
.faq-item .faq-a{color:var(--ink-soft);font-size:15px;line-height:1.75;margin-top:14px;max-width:700px;}

.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.related-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.related-grid{grid-template-columns:1fr;}}
.related-card{
  background:#fff;border-radius:var(--radius-md);border:1px solid var(--line);
  padding:24px 22px;box-shadow:var(--shadow-soft);transition:transform .25s ease;
}
.related-card:hover{transform:translateY(-4px);}
.related-card h4{font-size:17px;margin-bottom:8px;}
.related-card p{font-size:13.5px;color:var(--ink-soft);margin-bottom:14px;}
.related-card a{font-weight:800;font-size:13px;color:var(--coral-deep);}

.chip-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px;}
.chip-row a{
  font-size:13.5px;font-weight:700;padding:9px 18px;border-radius:99px;
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);box-shadow:var(--shadow-soft);
  transition:all .25s ease;
}
.chip-row a:hover{border-color:var(--coral);color:var(--coral-deep);}

/* ===== MEGA FOOTER (full-width, fixes the old flex clumping bug) ===== */
footer .wrap{max-width:1400px;}
.footer-brand-row{padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,0.12);margin-bottom:36px;}
.footer-brand-row .brand{margin-bottom:14px;}
.footer-brand-row p{color:rgba(255,255,255,0.65);font-size:14.5px;max-width:600px;}
.footer-mega-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:28px 24px;
  width:100%;
}
@media(max-width:1100px){.footer-mega-grid{grid-template-columns:repeat(4, 1fr);}}
@media(max-width:760px){.footer-mega-grid{grid-template-columns:repeat(2, 1fr);}}
@media(max-width:460px){.footer-mega-grid{grid-template-columns:1fr;}}
.footer-mega-grid .footer-col h5{
  font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--sun);
  margin-bottom:14px;font-family:'Nunito',sans-serif;font-weight:800;
}
.footer-mega-grid .footer-col ul li{margin-bottom:8px;}
.footer-mega-grid .footer-col ul li a{color:rgba(255,255,255,0.72);font-size:13.5px;line-height:1.4;}
.footer-mega-grid .footer-col ul li a:hover{color:#fff;}
.footer-contact-row{
  display:flex;flex-wrap:wrap;gap:24px;justify-content:center;
  margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.12);
  font-size:13px;color:rgba(255,255,255,0.7);
}
.footer-contact-row i{color:var(--sun);margin-right:6px;}
.footer-contact-row a{color:rgba(255,255,255,0.85);}
.footer-contact-row a:hover{color:#fff;}