@import url("fonts.fc769774.css");

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: #fbfaf8;
  color: #152242;
  font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* The artifact runtime set this; it changes where paragraphs break. */
  text-wrap: pretty;
}

img { max-width: 100%; }
/* Deliberately NOT `button { font-family: inherit }`: the schedule day tabs
   carry no inline font-family, so the approved design renders them in the
   browser default (Arial). Forcing Lato changes their height by 1px. */
a { color: inherit; text-decoration: none; }

/* Screen-reader-only H1. The hero headline is baked into the hero image, so
   this carries the same words as a real heading for crawlers and AT. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* ---- responsive states the runtime used to drive from JS ---------------- */
#sched-mobile  { display: none; }
#sched-desktop { display: grid; }
#sticky-cta    { display: none; }

/* Cookie bar position lives here rather than inline, so the mobile rules below
   can actually reach it. Desktop values match the approved design exactly. */
#cookie-bar { left: 16px; bottom: 16px; z-index: 30; max-width: 340px; }

@media (max-width: 820px) {
  #sched-mobile  { display: grid; }
  #sched-desktop { display: none; }
  #sticky-cta    { display: flex; }
  /* Client feedback 9 Sep 2026: this section was ragged on a phone. The desktop
     layout is 3 columns with one tall photo set to grid-row: span 2, and that span
     survives the drop to 2 columns, which left a hole and stranded a photo on its
     own. Flatten every tile to the same ratio here, then let the title card and the
     last photo run full width so 8 tiles fill 2 columns evenly. */
  #boarding-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #boarding-grid > * {
    grid-row: auto !important;
    aspect-ratio: 3 / 2 !important;
    height: auto !important;
  }
  #boarding-grid > :first-child {
    grid-column: 1 / -1;
    aspect-ratio: auto !important;
    min-height: 150px;
  }
  #boarding-grid > :last-child { grid-column: 1 / -1; }

  /* The sticky Apply bar (66px, z-index 40) is fixed to the bottom and was
     covering Accept and Decline, leaving the consent choice impossible to make
     and the bar permanently on screen. Sit above it, full width, and outrank it
     so the buttons stay tappable even if the bar grows with larger text. */
  #cookie-bar {
    left: 12px;
    right: 12px;
    bottom: 90px;
    max-width: none;
    z-index: 45;
  }
}

/* ---- interaction affordances ------------------------------------------- */
a, button { transition: opacity .18s ease, background-color .18s ease, color .18s ease; }
a:hover, button:hover { opacity: .82; }
button { cursor: pointer; }

a:focus-visible, button:focus-visible {
  outline: 3px solid #fdc41f;
  outline-offset: 2px;
}

[data-zoom] { cursor: zoom-in; border: 0; padding: 0; background: none; }

/* The three "Apply Now" buttons target the form itself, not the section, which
   opens with the deadline countdown. The offset leaves the down-arrow cue just
   above the form rather than pinning its border to the viewport edge. */
#apply-form { scroll-margin-top: 84px; }

@media (max-width: 820px) {
  #apply-form { scroll-margin-top: 56px; }
}

/* ---- lightbox ----------------------------------------------------------- */
#lightbox { display: none; }
#lightbox.is-open { display: flex; }
body.lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #car-track, #edu-track { transition: none !important; }
}

/* The hint only applies to the mobile day tabs; the desktop grid shows the whole
   week at once, so there is nothing to select. */
#sched-hint { display: none; }

@media (max-width: 820px) {
  #sched-hint { display: block; }
}

/* ---- application form --------------------------------------------------- */
/* The OpenApply embed picks its width from the user agent, not the viewport: a
   fixed 680px on desktop, 100% only for an iPhone/iPad/Android UA. A desktop
   browser narrowed below about 740px therefore overflows the container, so cap
   it. Its own iframeResizer still controls the height. */
#openapplyFrame {
  max-width: 100%;
  /* The embed sets its own inline width, so it sits left in the wider container
     unless it is made a block and given auto side margins. */
  display: block;
  margin-inline: auto;
}

/* ---- the host ----------------------------------------------------------- */
/* A fixed 200px portrait column leaves about 119px for the text on a phone, so
   the two stack below the breakpoint and the portrait stops filling the width. */
@media (max-width: 820px) {
  #host-grid { grid-template-columns: minmax(0, 1fr) !important; }
  #host-grid > img { max-width: 160px; }
}

/* ---- arrival and departure tables --------------------------------------- */
/* Their own times mean they cannot join the weekday grid, but they are short, so
   they run as two columns rather than two full-width blocks. Each keeps the same
   clamp(96px, 8vw, 140px) time column as the main table so the three line up. */
#sched-extra {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 26px;
  /* Saturday has one row fewer than Sunday. Without this the grid stretches it to
     match and the extra height shows as an empty cell under the last time. */
  align-items: start;
}

@media (max-width: 820px) {
  #sched-extra { display: none; }
}

/* ---- side rail ---------------------------------------------------------- */
/* Replicates the rail on https://www.harrowappi.jp/ (its #cta-link). There each
   item is 235px wide, parked at right: -185px so only the 50px icon shows, and
   slides to right: -10px on hover over .6s ease while the bar changes colour.
   Same geometry and timing here; the slide is a transform rather than animating
   `right`, so it runs on the compositor and cannot widen the document.
   Colours are the winter camp's, per the client's 9 Sep feedback: #f6a120 for
   Contact Us and #fdc41f for Apply Now, across the whole bar including the icon. */
#side-rail {
  position: fixed;
  right: -185px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail-link {
  display: flex;
  align-items: center;
  width: 235px;
  background: #152242;
  color: #fff;
  text-decoration: none;
  transition: transform .6s ease, background-color .6s ease;
}

/* 15px + 20px icon + 15px = the 50px that stays on screen at rest */
.rail-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 50px;
  padding: 0 15px;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rail-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}

/* Keyboard focus reveals the label on any device. */
.rail-link:focus-visible          { transform: translateX(-175px); }
.rail-contact:focus-visible       { background: #f6a120; }
.rail-apply:focus-visible         { background: #fdc41f; }

/* Hover only where there is a real pointer. A touch browser applies :hover to the
   last element tapped and holds it until something else is tapped, so without this
   gate the bar slid out on tap and stayed out. On a phone a tap now goes straight
   to the mail app or the form, which is what the icons are there for. */
@media (hover: hover) and (pointer: fine) {
  .rail-link:hover    { transform: translateX(-175px); }
  .rail-contact:hover { background: #f6a120; }
  .rail-apply:hover   { background: #fdc41f; }
}

/* The global a:hover fade would wash out the colour change. */
.rail-link:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .rail-link { transition: none; }
}