/* Permanent production overlays — NEVER regenerate from html-index/vX.
   Load AFTER styles.css. When merging a new visual version:
   1) Replace only styles.css from vX preview/globals
   2) Leave this file untouched
   3) Keep both <link> tags in HTML */

/* --- layout safety --- */
html{overflow-x:clip;max-width:100%}
body{overflow-x:clip;max-width:100%;position:relative}
main{overflow:visible}

/* --- fixed floating nav + hamburger ---
   sticky breaks when ancestors use overflow-x:clip (common mobile scroll fix).
   fixed keeps the bar in the viewport while reading mid-page. */
.nav{border-bottom:0;position:relative}
.nav-bar{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:rgba(248,239,221,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px dashed rgba(8,47,74,.26);
}
/* reserve space so hero/content isn't under the fixed bar */
main{padding-top:90px}
.nav-menu{display:flex;align-items:center;gap:28px;margin-left:auto}
.nav-toggle{
  display:none;width:44px;height:44px;margin-left:auto;padding:0;
  border:2px solid var(--navy,#082f4a);border-radius:10px;background:#fffaf0;
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--navy,#082f4a);transition:transform .2s ease,opacity .2s ease}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Do not lock body scroll on menu open — overflow/position tricks jump the page on mobile. */

/* --- about mark (text under circle, not overlapping) --- */
.carousel-mark{
  position:relative;left:auto;top:auto;transform:none;
  width:220px;height:220px;flex:none;margin:0 auto;
}
.about-mark{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:36px;min-height:410px;height:auto;padding:48px 36px 40px;text-align:center;place-items:unset;
}
.about-mark p{margin:0;position:relative;z-index:1;max-width:16em;line-height:1.35}

/* --- movement decorative rings must stay behind copy --- */
.movement>.wrap,
.movement-head,
.movement-grid{position:relative;z-index:2}
.movement:before,
.movement:after{z-index:0;pointer-events:none}

/* --- cookies --- */
.cookie-banner{
  position:fixed;z-index:1000;left:16px;right:16px;bottom:16px;max-width:720px;margin:auto;
  background:#fffaf0;color:#082f4a;padding:18px 20px;display:none;gap:14px;align-items:flex-start;flex-wrap:wrap;
  border:2px solid #082f4a;border-top:6px solid #efb536;box-shadow:0 12px 32px rgba(8,47,74,.22);font-size:13px;line-height:1.5;
}
.cookie-banner.is-visible{display:flex}
.cookie-banner p{margin:0;flex:1 1 280px;color:#082f4a}
.cookie-banner .cookie-actions{display:flex;gap:10px;flex:none;flex-wrap:wrap}
.cookie-banner button{border:0;cursor:pointer;padding:10px 16px;font-weight:800;border-radius:999px}
.cookie-banner .accept{background:#efb536;color:#082f4a}
.cookie-banner .reject{background:#fffaf0;color:#082f4a;border:2px solid #082f4a}
body.cookie-banner-open{padding-bottom:140px}

/*
  Consent checkbox — permanent fix for "vertical letter stack".
  Root cause: mobile rules like `form input { width:100% }` make the checkbox
  eat the full row width in a flex label, squeezing the span to ~1ch.
  Use grid + never let checkbox/hidden inputs take 100% width.
*/
label.check,
.signup form label.check{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  column-gap:10px;
  row-gap:0;
  width:100%;
  max-width:100%;
  margin-bottom:18px;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:400 !important;
  font-size:12px !important;
  line-height:1.45;
  white-space:normal;
}
label.check input[type="checkbox"],
.signup form label.check input[type="checkbox"]{
  grid-column:1;
  grid-row:1;
  width:18px !important;
  max-width:18px !important;
  min-width:18px;
  height:18px;
  margin:2px 0 0 !important;
  flex:none;
  accent-color:var(--navy,#082f4a);
}
label.check span,
.signup form label.check span{
  grid-column:2;
  grid-row:1;
  min-width:0;
  max-width:100%;
  display:block;
  white-space:normal;
  overflow-wrap:break-word;
  word-break:normal;
  hyphens:auto;
}

/* Never force full width on checkbox / honeypot / hidden */
.signup form input[type="checkbox"],
.signup form input[type="hidden"],
.signup form input.hidden-check,
form#signup-form input[type="checkbox"],
form#signup-form input[type="hidden"]{
  width:auto !important;
  max-width:none !important;
}

.hidden-check{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;left:0!important;
}
.field-hidden{display:none!important}

.thank-you-page{min-height:100vh;display:grid;place-items:center;padding:40px 20px;background:#f8efdd}
.thank-you-card{max-width:520px;background:#fffaf0;padding:48px 36px;box-shadow:10px 12px 0 #082f4a;text-align:center}
.thank-you-card h1{font:400 42px/1.1 Georgia,serif;margin:16px 0 12px;color:#082f4a}
.thank-you-card>p{color:#607471;line-height:1.6;margin:0 0 16px}
.thank-you-note{display:block;text-align:left;margin:8px 0 20px;padding:16px 18px;background:#f8efdd;border-left:5px solid #efb536;color:#082f4a}
.thank-you-note strong{display:block;font:800 12px/1.3 Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;color:#082f4a}
.thank-you-note p{margin:0;font:15px/1.55 Georgia,serif;color:#436560}
.thank-you-pay{font-size:14px}
.thank-you-cta{margin:28px 0 0!important}
.redirect-page{min-height:100vh;display:grid;place-items:center;font-family:Georgia,serif;color:#082f4a;background:#f8efdd}

@media(max-width:850px){
  .nav-toggle{display:inline-flex}
  .nav-menu{
    display:none;position:fixed;left:0;right:0;top:72px;margin:0;padding:18px 16px 22px;
    flex-direction:column;align-items:stretch;gap:14px;background:#fffaf0;
    border-bottom:2px solid var(--navy,#082f4a);box-shadow:0 14px 28px rgba(8,47,74,.14);
    max-height:calc(100dvh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch;
    z-index:201;
  }
  .nav-menu.is-open{display:flex}
  .nav-menu .nav-links{display:flex;flex-direction:column;gap:4px}
  .nav-menu .nav-links a{display:block;padding:12px 8px;font-size:16px;border-bottom:1px dashed rgba(8,47,74,.18)}
  .nav-menu .nav-cta{width:100%;justify-content:center;margin-top:6px}
  main{padding-top:72px}

  html,body{overflow-x:clip;max-width:100vw}
  main{overflow-x:clip;overflow-y:visible;max-width:100%}
  .hero{overflow:hidden;padding-bottom:48px;max-width:100%}
  .hero-arc{display:none}
  .hero-brand{height:auto;min-height:110px;padding-bottom:28px;margin-bottom:8px;align-items:flex-end;max-width:100%;overflow:hidden}
  .hero-brand span:nth-child(1){transform:translateY(18px) rotate(-12deg)}
  .hero-brand span:nth-child(2){transform:translateY(8px) rotate(-8deg)}
  .hero-brand span:nth-child(3){transform:translateY(2px) rotate(-4deg)}
  .hero-brand span:nth-child(4){transform:translateY(-2px) rotate(-1deg)}
  .hero-brand span:nth-child(5){transform:translateY(-4px) rotate(2deg)}
  .hero-brand span:nth-child(6){transform:translateY(0) rotate(4deg)}
  .hero-brand span:nth-child(7){transform:translateY(6px) rotate(7deg)}
  .hero-brand span:nth-child(8){transform:translateY(14px) rotate(11deg)}
  .hero-intro{margin-top:12px;position:relative;z-index:3}
  .schedule-card,.schedule-info,.event,.kids-art,.about-mark,.about-copy,.movement-card{box-shadow:5px 6px 0 rgba(8,47,74,.14)}

  /* movement rings overlap headlines on narrow viewports — hide under 850px */
  .movement{padding:100px 0 90px}
  .movement:before,
  .movement:after{display:none}
  .movement-head,
  .movement-head h2,
  .movement-grid{position:relative;z-index:2}

  .signup{overflow:hidden;padding:72px 0;max-width:100%}
  .signup .wrap{overflow:hidden;width:min(100% - 28px,650px)}
  .signup-grid{gap:28px;overflow:hidden;max-width:100%}
  .signup-grid>div{clip-path:none;transform:none;padding:28px 22px;border-radius:2px}
  .signup-grid>div h2{font-size:clamp(28px,8vw,42px);line-height:1.15;overflow-wrap:anywhere}
  .signup-grid>form{transform:none;box-shadow:5px 6px 0 var(--navy,#082f4a);width:100%;max-width:100%;padding:24px 18px;overflow:hidden}
  /* text fields only — NEVER checkbox/hidden (causes vertical consent text) */
  .signup-grid>form select,
  .signup-grid>form textarea,
  .signup-grid>form input:not([type="checkbox"]):not([type="hidden"]):not(.hidden-check){
    max-width:100%;width:100%;
  }
  .carousel-mark{width:180px;height:180px}
  .about-mark{gap:28px;min-height:0;padding:40px 28px 32px}
  .cookie-banner{left:12px;right:12px;bottom:12px;max-width:calc(100vw - 24px)}
  body.cookie-banner-open{padding-bottom:180px}
}

@media(max-width:500px){
  .hero-brand{font-size:clamp(40px,12.5vw,56px);min-height:88px;padding-bottom:22px;gap:1px}
  .hero-brand span:nth-child(1){transform:translateY(12px) rotate(-10deg)}
  .hero-brand span:nth-child(2){transform:translateY(6px) rotate(-7deg)}
  .hero-brand span:nth-child(3){transform:translateY(2px) rotate(-3deg)}
  .hero-brand span:nth-child(4){transform:translateY(-1px) rotate(0deg)}
  .hero-brand span:nth-child(5){transform:translateY(-2px) rotate(2deg)}
  .hero-brand span:nth-child(6){transform:translateY(1px) rotate(4deg)}
  .hero-brand span:nth-child(7){transform:translateY(5px) rotate(6deg)}
  .hero-brand span:nth-child(8){transform:translateY(10px) rotate(9deg)}
  .signup-grid>div h2{font-size:32px}
}