/* Shared behaviour for the converted design pages. Page styling stays inline,
   exactly as exported from Claude Design; this file only replaces what the
   design runtime used to do in JavaScript. */

/* Responsive blocks (were <sc-if wide/narrow> driven by window width).
   display:contents keeps the wrapper out of the flex/grid layout. */
.only-wide, .only-narrow, .only-mobile, .nav-menu { display: contents; }
.only-narrow, .only-mobile, .nav-menu { display: none; }
@media (max-width: 1099.98px) {
  .only-wide { display: none; }
  .only-narrow { display: contents; }
  body.menu-open .nav-menu { display: contents; }
}
@media (max-width: 819.98px) {
  .only-mobile { display: contents; }
}

/* Sticky header: large logo at the top of the page, compact once scrolled
   (body.scrolled is set by site.js). The header is max-width and centred, so
   the box-shadow + clip-path pair paints its background edge to edge. */
html { scroll-padding-top: 96px; }
/* The page wrapper's inline overflow-x:hidden makes it a scroll container,
   which disables sticky; clip trims the same overflow without that. */
body > div:first-child { overflow-x: clip !important; }
header {
  position: sticky; top: 0; z-index: 40;
  background: oklch(0.985 0.015 85);
  box-shadow: 0 0 0 100vmax oklch(0.985 0.015 85);
  clip-path: inset(0 -100vmax);
  transition: padding .25s ease;
}
header::after {  /* hairline under the bar once scrolled */
  content: ""; position: absolute; left: -100vmax; right: -100vmax; bottom: 0;
  border-bottom: 1px solid oklch(0.28 0.06 265 / 0.1); opacity: 0; transition: opacity .25s ease;
}
header img[src*="necfc-logo-v2"] { height: 112px; width: auto; transition: height .25s ease; }
body.scrolled header { padding-top: 8px !important; padding-bottom: 8px !important; }
body.scrolled header::after { opacity: 1; }
body.scrolled header img[src*="necfc-logo-v2"] { height: 60px; }
@media (max-width: 819.98px) {
  html { scroll-padding-top: 76px; }
  header img[src*="necfc-logo-v2"] { height: 84px; }
  body.scrolled header img[src*="necfc-logo-v2"] { height: 52px; }
}

/* Intro animations. html.anim is set by an inline script in <head> (motion
   allowed only). The header drops in; each section's blocks rise and fade in
   as they scroll into view, staggered by site.js, which adds .in. Keep the
   block selector in sync with REVEAL in site.js. */
@keyframes intro-drop { from { opacity: 0; translate: 0 -18px; } }
.anim header { animation: intro-drop .6s cubic-bezier(.2, .7, .2, 1) backwards; }
.anim :is(body > div:first-child > section, main > section, main > div) > * {
  opacity: 0; translate: 0 28px;
  transition: opacity .7s ease, translate .8s cubic-bezier(.2, .7, .2, 1), transform .15s ease, background-color .15s ease, color .15s ease;
}
.anim :is(body > div:first-child > section, main > section, main > div) > .in { opacity: 1; translate: none; }

/* Mobile menu: fills the screen below the header; the links drop in like toy
   blocks, stacking from the bottom up. site.js sets --menu-top to the
   header's bottom edge when the menu opens. */
@media (max-width: 1099.98px) {
  body.menu-open { overflow: hidden; }
  body.menu-open header { clip-path: inset(0 -100vmax -100vh); }  /* open downward so the fixed menu isn't cut off */
  body.menu-open :is(.only-narrow, .only-mobile) > div[style*="position:fixed"] { display: none !important; }
  #mobile-menu nav {
    position: fixed; inset: var(--menu-top, 96px) 0 0; z-index: -1; overflow-y: auto;
    padding: 12px clamp(16px, 5vw, 32px) 32px !important;
    background: oklch(0.985 0.015 85) !important; border-radius: 0 !important; box-shadow: none !important;
    gap: 12px !important; font-size: clamp(28px, 8vw, 40px) !important;
  }
  #mobile-menu nav a:first-child { margin-top: auto; }  /* stack sits on the bottom, still scrolls if short */
  #mobile-menu nav a {
    padding: 22px 26px !important; border-radius: 26px !important;
    box-shadow: 0 6px 0 oklch(0.28 0.06 265 / 0.12);
    animation: block-drop .75s cubic-bezier(.3, .6, .4, 1) backwards;
  }
  #mobile-menu nav a:nth-child(odd) { --tilt: 9deg; }
  #mobile-menu nav a:nth-child(even) { --tilt: -11deg; }
  #mobile-menu nav a:nth-last-child(1) { animation-delay: 0ms; }
  #mobile-menu nav a:nth-last-child(2) { animation-delay: 90ms; }
  #mobile-menu nav a:nth-last-child(3) { animation-delay: 180ms; }
  #mobile-menu nav a:nth-last-child(4) { animation-delay: 270ms; }
  #mobile-menu nav a:nth-last-child(5) { animation-delay: 360ms; }
  #mobile-menu nav a:nth-last-child(6) { animation-delay: 450ms; }
}
@keyframes block-drop {
  0%   { translate: 0 -110vh; rotate: var(--tilt, 8deg); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  55%  { translate: 0 10px; rotate: calc(var(--tilt, 8deg) * -0.4); animation-timing-function: ease-out; }
  72%  { translate: 0 -14px; rotate: calc(var(--tilt, 8deg) * 0.2); animation-timing-function: ease-in; }
  86%  { translate: 0 3px; rotate: 0deg; animation-timing-function: ease-out; }
  100% { translate: none; rotate: none; }
}
/* hamburger → ✕ */
[data-action="toggle-menu"] > span { transition: transform .25s ease, opacity .2s ease; }
[data-action="toggle-menu"][aria-expanded="true"] > span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
[data-action="toggle-menu"][aria-expanded="true"] > span:nth-child(2) { opacity: 0; }
[data-action="toggle-menu"][aria-expanded="true"] > span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

a, button { transition: transform .15s ease, background-color .15s ease, color .15s ease; }
:focus-visible { outline: 3px solid oklch(0.72 0.16 35); outline-offset: 2px; }

/* Tour booking */
[data-tour-step][hidden] { display: none !important; }
.chip { --chip-bd: oklch(0.93 0.02 85); --chip-bg: oklch(0.99 0.005 85); }
.chip[aria-pressed="true"] { --chip-bd: oklch(0.28 0.06 265); --chip-bg: oklch(0.86 0.15 90); }
.chip:hover { --chip-bd: oklch(0.28 0.06 265); }
/* Tour day calendar (built by site.js): weekdays only, chip styling. */
.cal { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cal-title { font-family: Fredoka, sans-serif; font-weight: 600; font-size: 20px; }
.cal-nav {
  font: inherit; font-weight: 800; font-size: 22px; line-height: 1; width: 44px; height: 44px; border-radius: 50%;
  cursor: pointer; border: 3px solid oklch(0.28 0.06 265); background: transparent; color: oklch(0.28 0.06 265);
}
.cal-nav:hover:not(:disabled) { background: oklch(0.86 0.15 90); }
.cal-nav:disabled { opacity: .25; cursor: default; }
.cal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cal-dow { text-align: center; font-weight: 800; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; opacity: .7; padding-bottom: 2px; }
.cal-day {
  font: inherit; font-family: Fredoka, sans-serif; font-weight: 600; font-size: 20px; min-height: 48px; cursor: pointer;
  border-radius: 16px; border: 3px solid var(--chip-bd); background: var(--chip-bg); color: oklch(0.28 0.06 265);
}
.cal-day:disabled { opacity: .3; cursor: default; --chip-bd: transparent; background: transparent; }
.cal-note { margin: 0; font-size: 14px; font-weight: 700; opacity: .7; }

/* Tour "Pick a time": Morning / Afternoon / Late afternoon columns, stacked on phones. */
.slot-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
@media (max-width: 560px) { .slot-groups { grid-template-columns: minmax(0, 1fr); } }

[data-tour-submit]:disabled { opacity: .5; cursor: not-allowed !important; }
[data-tour-submit][aria-busy="true"] { opacity: .7; cursor: progress !important; }
.tour-overlay input:focus { border-color: oklch(0.78 0.11 230) !important; }

/* Enroll step tiles: the tile's link covers the whole card, so the card is
   clickable while the link stays the one thing announced to screen readers. */
.step-card { position: relative; transition: transform .15s ease, box-shadow .15s ease; }
.step-card a::after { content: ""; position: absolute; inset: 0; border-radius: 32px; }
.step-card:hover { transform: translateY(-4px); box-shadow: 0 10px 0 oklch(0.28 0.06 265 / 0.12); }
.step-card:hover a { text-decoration: underline; text-underline-offset: 3px; }

/* "Now" highlight in the daily schedule */
.sched-row.is-now { --now-bg: oklch(0.94 0.06 90); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}