/* Pixie Play Club responsive refinements.
   Content and visual identity are unchanged; these rules only improve layout across screen sizes. */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  overflow-x:hidden;
}
img,svg,video,canvas,iframe{
  max-width:100%;
}
button,input,select,textarea{
  max-width:100%;
}

/* Keep long contact details, links and labels from forcing horizontal scroll. */
a,p,h1,h2,h3,h4,li,span{
  overflow-wrap:anywhere;
}

/* Tablet / smaller laptop navigation */
@media (max-width:1120px){
  .site-header{
    height:auto!important;
    min-height:88px;
    grid-template-columns:1fr auto!important;
    gap:14px!important;
    padding:8px 28px!important;
  }
  .brand{grid-column:1!important;justify-self:start!important}
  .brand img{width:122px!important;max-height:76px!important}
  .nav-main,.header-actions,.tagline{display:none!important}
  .mobile-menu{display:block!important;grid-column:2!important;justify-self:end!important}
  .mobile-nav{
    right:0!important;
    top:58px!important;
    width:min(340px,calc(100vw - 32px))!important;
    max-height:calc(100vh - 100px);
    overflow-y:auto;
    border-right:1px solid var(--line)!important;
    border-radius:16px;
  }
  [id]{scroll-margin-top:100px!important}
}

/* General tablet reflow */
@media (max-width:900px){
  .hero,
  .standalone-grid,
  .join-intro-grid,
  .programme-hero-grid,
  .day-flow-grid,
  .programme-hero-v14 .wrap,
  .school-hero-grid,
  .split-intro,
  .partner-split,
  .choice-box,
  .story-section,
  .story-details{
    grid-template-columns:1fr!important;
  }

  .home-link-grid,
  .info-grid,
  .age-grid,
  .programme-pillars,
  .expect-grid,
  .age-adapt,
  .partnership-steps,
  .promise-strip,
  .december-mix,
  .join-card-grid,
  .join-values,
  .facts-grid,
  .practical-grid,
  .date-chip-grid,
  .three-day-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .hero{min-height:0!important}
  .hero-copy{padding:62px 7vw 50px!important}
  .hero-photo{min-height:430px;background-position:center!important}
  .page-title{font-size:clamp(2.9rem,9vw,5rem)!important}
  .price-panel,.how-panel,.flow-intro{position:static!important}
  .footer{grid-template-columns:1fr!important;gap:24px!important}
  .footer-brand,.footer-note{text-align:left!important}
  .footer-nav{justify-content:flex-start!important;flex-wrap:wrap!important}
}

/* Phones */
@media (max-width:700px){
  .site-header{
    min-height:76px!important;
    padding:6px 16px!important;
  }
  .brand img{width:104px!important;max-height:66px!important}
  .mobile-menu summary{font-size:1.5rem!important;padding:10px 8px!important}
  .mobile-nav{
    position:fixed!important;
    top:76px!important;
    right:12px!important;
    left:12px!important;
    width:auto!important;
    max-height:calc(100vh - 92px)!important;
    border-radius:16px!important;
    padding:12px 18px 18px!important;
  }
  .mobile-nav a{min-height:44px;display:flex;align-items:center}
  [id]{scroll-margin-top:84px!important}

  .hero{display:flex!important;flex-direction:column!important}
  .hero-copy{padding:48px 20px 42px!important}
  .hero h1{font-size:clamp(2.75rem,14vw,4.5rem)!important;letter-spacing:-.035em!important}
  .hero-lead{font-size:1.05rem!important;margin-top:18px!important}
  .hero-photo{min-height:320px!important;width:100%!important}

  .standalone-page,
  .home-hub,
  .content-band,
  .school-hero-v12,
  .programme-section,
  .programme-hero-v14,
  .join-page,
  .app-page,
  .register-page,
  .contact-page,
  .section,
  .section-soft,
  .story-section{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  .home-link-grid,
  .info-grid,
  .age-grid,
  .programme-pillars,
  .expect-grid,
  .age-adapt,
  .partnership-steps,
  .promise-strip,
  .december-mix,
  .join-card-grid,
  .join-values,
  .facts-grid,
  .practical-grid,
  .date-chip-grid,
  .three-day-grid,
  .contact-cards,
  .register-facts,
  .day-grid{
    grid-template-columns:1fr!important;
  }

  .date-chip:last-child,
  .register-facts div:last-child,
  .day-card:last-child{
    grid-column:auto!important;
  }

  h2{font-size:clamp(2rem,10vw,3rem)!important}
  .page-title{font-size:clamp(2.65rem,13vw,4rem)!important}
  .page-lead,.school-lead,.lead{font-size:1rem!important}

  .button-row,
  .home-app-banner,
  .join-cta,
  .programme-cta .inner,
  .week-heading{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .button-row{gap:10px!important}
  .button-row .btn,
  .big-action,
  .contact-card-button{
    width:100%!important;
  }
  .btn{min-height:46px!important;padding:11px 20px!important}

  .home-link-card{min-height:0!important}
  .home-app-banner{padding:24px!important;gap:18px!important}
  .programme-summary,.offer-card,.price-panel,.how-panel,.contact-card,.join-card,.story-card,.paper-note{padding:22px!important}
  .flow-list{padding-left:18px!important;padding-right:18px!important}
  .flow-list article,.day-row,.timeline article{grid-template-columns:1fr!important;gap:6px!important}
  .clock{min-width:0!important}

  .footer{padding-left:20px!important;padding-right:20px!important}
  .footer-nav{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px 18px!important}
}

/* Narrow phones */
@media (max-width:430px){
  .site-header{padding-left:12px!important;padding-right:12px!important}
  .brand img{width:96px!important}
  .hero-copy{padding-left:16px!important;padding-right:16px!important}
  .hero-photo{min-height:270px!important}
  .standalone-page,
  .home-hub,
  .content-band,
  .school-hero-v12,
  .programme-section,
  .programme-hero-v14,
  .join-page,
  .app-page,
  .register-page,
  .contact-page,
  .section,
  .section-soft,
  .story-section{
    padding-left:16px!important;
    padding-right:16px!important;
  }
  .footer{padding-left:16px!important;padding-right:16px!important}
  .footer-nav{grid-template-columns:1fr!important}
  .page-title{font-size:clamp(2.4rem,14vw,3.35rem)!important}
}

/* Desktop remains the existing design. */
@media (min-width:1121px){
  .mobile-menu{display:none!important}
}


/* Holiday Camps dropdown and updated camp pricing */
.nav-dropdown{position:relative;display:flex;align-items:center;margin:0;padding:0}
.nav-dropdown>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap}
.nav-dropdown>summary::-webkit-details-marker{display:none}
.nav-dropdown>summary::after{content:"⌄";font-size:.85em;line-height:1;transform:translateY(-1px)}
.nav-dropdown.active>summary{color:var(--pink-dark)}
.nav-dropdown-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);min-width:185px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:var(--shadow);z-index:50}
.nav-dropdown:not([open]) .nav-dropdown-menu{display:none}
.nav-dropdown-menu a{display:block!important;padding:10px 12px!important;border-radius:9px!important;white-space:nowrap}
.nav-dropdown-menu a:hover,.nav-dropdown-menu a.active{background:var(--pink-soft,#f9e9ee)}
.mobile-submenu{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:3px 0;padding:2px 0}
.mobile-submenu>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;font-weight:600}
.mobile-submenu>summary::-webkit-details-marker{display:none}
.mobile-submenu>summary::after{content:"+";font-size:1.1rem}
.mobile-submenu[open]>summary::after{content:"–"}
.mobile-submenu a{padding-left:14px!important}
.pricing-heading{max-width:1180px;margin:34px auto 8px}
.pricing-heading h3{font-family:Georgia,'Times New Roman',serif;font-size:clamp(1.6rem,3vw,2.25rem);font-weight:400;margin:0}
.external-offer{margin-top:14px}
.external-offer .price strong{font-size:2.1rem}
.upcoming-register{display:flex;justify-content:center;margin:24px auto 0}
.upcoming-register .btn{min-width:180px;text-align:center}

@media(max-width:1120px){
  .nav-dropdown{display:none!important}
}
@media(max-width:700px){
  .pricing-heading{margin-top:28px}
  .upcoming-register{align-items:stretch}
  .upcoming-register .btn{width:100%!important}
}

/* Prevent the main hamburger icon styles from leaking into the nested Holiday Camps menu. */
.mobile-menu .mobile-submenu>summary{font-size:.95rem!important;line-height:1.25!important;padding:10px 0!important;color:inherit!important}
.mobile-menu .mobile-submenu>summary::before,.mobile-menu .mobile-submenu[open]>summary::before{content:none!important}
.header-contact{font-size:.82rem;padding:10px 19px!important}
.nav-dropdown>summary{padding:8px 0}


/* v21 navigation, content placement and alignment refinements */
@media (min-width:1121px){
  .nav-dropdown-menu{
    left:0!important;
    transform:none!important;
    width:205px!important;
    min-width:205px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:2px!important;
  }
  .nav-dropdown:not([open]) .nav-dropdown-menu{display:none!important}
  .nav-dropdown-menu a{display:block!important;width:100%!important;margin:0!important}
}

/* Generic overview is not tied to a single age range. */
.fact-panel{align-content:start}
.overview-partnership-banner{padding:54px 5vw;background:linear-gradient(135deg,#fae8ee 0%,#fff7f9 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.overview-partnership-banner .inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:30px}
.overview-partnership-banner h2{margin:4px 0 10px}
.overview-partnership-banner p:not(.eyebrow){max-width:680px;color:#61686d;margin:0}

/* Upcoming camp dates and prices share one visual width and rhythm. */
.date-chip-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.camp-pricing-wrap{max-width:1180px;margin:34px auto 0}
.camp-pricing-wrap .pricing-heading{max-width:none;margin:0 0 14px;text-align:left!important}
.camp-pricing-wrap .offer-card{max-width:none;width:100%;margin:14px 0 0}
.camp-pricing-wrap .upcoming-register{max-width:none;width:100%;margin:20px 0 0;justify-content:flex-start}
.essential-parent-info .section-heading{margin-bottom:26px}
.essential-list{max-width:1180px}
.upcoming-app-section{padding-top:14px!important}
.upcoming-app-section .home-app-banner{max-width:1180px;margin:0 auto}

/* Footer content now shares a consistent left/right alignment. */
.footer{align-items:start!important}
.footer-brand{text-align:left!important;justify-self:start!important}
.footer-brand img{display:block!important;margin:0 0 14px 0!important}
.footer-brand p{margin:5px 0!important;text-align:left!important}
.footer-note{text-align:right!important;justify-self:end!important;align-self:start!important}
.footer-note p{margin:5px 0!important}

@media(max-width:900px){
  .overview-partnership-banner .inner{flex-direction:column;align-items:flex-start}
  .date-chip-grid{grid-template-columns:1fr!important}
  .date-chip:last-child{grid-column:auto!important}
  .camp-pricing-wrap .pricing-heading{text-align:center!important}
  .camp-pricing-wrap .upcoming-register{justify-content:stretch}
  .camp-pricing-wrap .upcoming-register .btn{width:100%!important}
  .footer-note{justify-self:start!important;text-align:left!important}
}


/* v22 refined registration banner, partnership alignment and legal footer */
.upcoming-register-banner{
  width:100%;
  margin:26px 0 0;
  padding:34px 38px;
  border:1px solid var(--line);
  border-radius:28px;
  background:linear-gradient(135deg,#fae8ee 0%,#fff7f9 100%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.upcoming-register-banner h3{
  font-size:clamp(1.8rem,3vw,2.7rem);
  margin:4px 0 8px;
}
.upcoming-register-banner p:not(.eyebrow){
  max-width:650px;
  color:#61686d;
  margin:0;
}
.upcoming-register-banner .btn{
  flex:0 0 auto;
  min-width:245px;
  text-align:center;
}

/* Partner page: keep heading, explanation and cards on the same centered grid. */
.shared-responsibilities .content-inner.split-intro{
  max-width:1180px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:54px;
  align-items:start;
}
.shared-responsibilities .split-intro h2{max-width:520px}
.shared-responsibilities .split-intro .rich-copy{max-width:520px;justify-self:end;width:100%;padding-top:2px}
.shared-responsibilities .partner-split{
  max-width:1180px;
  margin:34px auto 0;
  gap:24px;
  align-items:stretch;
}
.shared-responsibilities .partner-panel{height:100%}
.shared-responsibilities .small-callout{max-width:980px}

/* Footer: keep every element on one centered content width and align both columns. */
.footer{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  column-gap:48px!important;
  row-gap:18px!important;
  padding:44px max(4.5vw, calc((100vw - 1180px)/2))!important;
  align-items:start!important;
}
.footer-nav{
  grid-column:1/-1!important;
  justify-content:center!important;
  margin:0 0 8px!important;
}
.footer-brand{justify-self:start!important;text-align:left!important;max-width:390px}
.footer-brand img{margin:0 0 12px!important}
.footer-note{justify-self:end!important;text-align:right!important;max-width:390px}
.footer-legal{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  padding-top:14px;
  margin-top:4px;
  border-top:1px solid var(--line);
  font-size:.78rem;
  color:#6d7377;
}
.footer-legal a{text-decoration:underline;text-underline-offset:3px}
.footer-legal a:hover{color:var(--pink-dark)}

@media(max-width:900px){
  .upcoming-register-banner{flex-direction:column;align-items:flex-start;padding:28px 24px}
  .upcoming-register-banner .btn{width:100%!important;min-width:0}
  .shared-responsibilities .content-inner.split-intro{grid-template-columns:1fr;gap:18px}
  .shared-responsibilities .split-intro .rich-copy{justify-self:start;max-width:720px}
  .footer{grid-template-columns:1fr!important;padding:38px 22px!important}
  .footer-nav{justify-content:flex-start!important}
  .footer-brand,.footer-note{justify-self:start!important;text-align:left!important;max-width:none}
  .footer-legal{justify-content:flex-start}
}


/* v23: full-width upcoming registration CTA and simplified footer */
.upcoming-register-section{
  width:100%;
  padding:54px 5vw;
  background:linear-gradient(135deg,#fae8ee 0%,#fff7f9 100%);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.upcoming-register-section .upcoming-register-banner{
  max-width:1100px;
  width:100%;
  margin:0 auto;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}
.upcoming-register-section .upcoming-register-banner h3{
  margin:4px 0 8px;
}
.upcoming-register-section .upcoming-register-banner p:not(.eyebrow){
  max-width:680px;
  margin:0;
}

/* Footer now has a brand/contact block plus one clean legal line at the bottom. */
.footer{
  grid-template-columns:1fr!important;
  row-gap:18px!important;
}
.footer-brand{
  justify-self:start!important;
  max-width:390px;
}
.footer-legal{
  grid-column:1/-1!important;
  justify-content:flex-start!important;
  width:100%;
  padding-top:16px;
  margin-top:2px;
}
.footer-copyright{white-space:normal}
.footer-note{display:none!important}

@media(max-width:900px){
  .upcoming-register-section{padding:42px 22px}
  .upcoming-register-section .upcoming-register-banner{
    flex-direction:column;
    align-items:flex-start;
  }
  .upcoming-register-section .upcoming-register-banner .btn{
    width:100%!important;
    min-width:0;
  }
  .footer-legal{justify-content:flex-start!important}
}