/* Styles for the half-day trip pages: /trip/ and /trip/signup/.
 *
 * These two pages are deliberately plain static files in public/, not part of
 * the React app — the same decision, and for the same reason, as /press/: a
 * design resync from ChatGPT Sites replaces app/page.tsx and globals.css
 * wholesale, and anything living in there would be lost with them.
 *
 * The filename carries a version. It is served from /trip/, which no nginx
 * cache rule matches, so it revalidates on every visit anyway — but the name
 * moves with the file so that a change can never be waiting behind a cached
 * copy. Bump it to -v2 and update both <link> tags together.
 *
 * The palette is globals.css's, copied in by hand. Two values are NOT the
 * originals and must not be "corrected" back: --olive is #717b4a rather than
 * #747f4c and the small-label brown is #8b6c49 rather than #9a7851, both
 * darkened so white-on-olive and label-on-cream clear WCAG AA.
 */
:root{
  --font:Arial,"Noto Sans Hebrew",sans-serif;
  --paper:#faf7f0; --cream:#f4ecde; --stone:#e5d7c0;
  --ink:#263942; --blue:#314b56; --gold:#ad874f; --olive:#717b4a;
  --muted:#786b60; --label:#8b6c49; --line:#d9c7ab;
  --warn:#8c2f2f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);
     line-height:1.65;-webkit-text-size-adjust:100%}
a{color:var(--olive);text-decoration:none}
a:hover{color:var(--gold);text-decoration:underline}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* ------------------------------------------------------------- topbar --- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:10px clamp(14px,5vw,60px);background:rgba(250,247,240,.96);
  border-bottom:1px solid rgba(173,135,79,.28);backdrop-filter:blur(10px)}
.topbar .logo img{width:124px;height:auto;display:block;mix-blend-mode:multiply;
  aspect-ratio:1969/799}
.topbar nav{display:flex;gap:clamp(10px,2vw,24px);font-size:14px;flex-wrap:wrap;
  align-items:center}
/* The nav collapses before the button does: the button is the point of the page. */
@media(max-width:720px){.topbar nav .drop{display:none}}

/* -------------------------------------------------------------- buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 30px;min-height:48px;border:1px solid var(--olive);
  background:var(--olive);color:#fff;font:700 16px/1.2 var(--font);
  border-radius:4px;cursor:pointer;text-align:center}
.btn:hover{color:#fff;text-decoration:none;box-shadow:0 0 22px rgba(217,184,116,.45)}
.btn.ghost{background:transparent;color:var(--olive)}
.btn.ghost:hover{background:#f2eadc;color:var(--olive);box-shadow:none}
.btn.small{padding:9px 18px;min-height:40px;font-size:14px}
.btn[disabled]{opacity:.55;cursor:default;box-shadow:none}

/* ----------------------------------------------------------------- hero --- */
/* The photograph is the real fortress in daylight, which is what this day
   actually looks like — the flyer's night shot is the show, and it appears
   further down where the show is what is being described. */
.hero{position:relative;color:#fff;background:#243019;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 58%}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(24,32,18,.72) 0%,rgba(24,32,18,.55) 42%,rgba(24,32,18,.86) 100%)}
.hero .inner{position:relative;width:min(940px,92vw);margin:auto;
  padding:clamp(48px,9vw,96px) 0 clamp(38px,7vw,72px);text-align:center}
.hero .badge{display:inline-block;margin:0 0 18px;padding:9px 22px;
  border:1px solid rgba(232,201,141,.75);border-radius:100px;
  color:#f0dcb4;font-size:clamp(13px,2.4vw,16px);font-weight:700;letter-spacing:.02em}
.hero h1{margin:0 0 16px;font-size:clamp(30px,6.4vw,58px);font-weight:700;
  line-height:1.12;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hero p{margin:0 auto 12px;max-width:640px;font-size:clamp(16px,2.6vw,21px);
  color:#f2ece0}
.hero .guide{margin:0 auto 28px;font-size:clamp(14px,2.2vw,16.5px);color:#dfd6c4}
.hero .btn{background:#f0dcb4;border-color:#f0dcb4;color:#2b3520}
.hero .btn:hover{background:#fff;border-color:#fff;color:#2b3520}

/* ----------------------------------------------------------- page shell --- */
.wrap{width:min(940px,92vw);margin:auto;padding:0 0 20px}
section{padding:clamp(32px,6vw,52px) 0;border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
.eyebrow{margin:0 0 8px;color:var(--olive);font-size:12px;font-weight:700;
  letter-spacing:.2em}
h2{margin:0 0 20px;font-size:clamp(23px,3.4vw,34px);font-weight:500;line-height:1.2}
h3{margin:0 0 8px;font-size:18px;font-weight:700;color:var(--blue)}
p{margin:0 0 15px;max-width:660px}
.muted{color:var(--muted)}
.lead{font-size:17.5px}

/* ------------------------------------------------------------ the facts --- */
/* Four numbers somebody has to be able to take in without reading: what it
   costs, how hard it is, how you get around, and who it is for. */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 22px}
.fact{background:#fffdf9;border:1px solid var(--line);border-radius:8px;
  padding:16px 18px;text-align:center}
.fact .k{display:block;color:var(--label);font-size:12.5px;font-weight:700;
  letter-spacing:.06em;margin-bottom:6px}
.fact .v{display:block;font-size:clamp(19px,3vw,25px);font-weight:700;line-height:1.2}
.fact .v small{display:block;font-size:13px;font-weight:400;color:var(--muted);
  margin-top:4px;letter-spacing:0}
@media(max-width:720px){.facts{grid-template-columns:repeat(2,1fr)}}

/* Four items. 200px is the width at which all four sit on one row inside the
   940px column and drop to two, then one, on the way down — a lonely last one
   on a row of its own reads as something missing. */
.included{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.included li{background:var(--cream);border:1px solid var(--line);border-radius:6px;
  padding:12px 16px;font-weight:700;font-size:15px}
.included li span{display:block;font-weight:400;font-size:13.5px;color:var(--muted)}

/* ------------------------------------------------------------- schedule --- */
/* One row per stop: the clock on one side, what happens on the other, joined by
   a rule with a diamond on it — the flyer's own device.
   Times are Latin digits inside an RTL page, so every one of them is wrapped in
   <bdi>; without it "12:30–14:00" reorders into "14:00–12:30". */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{display:grid;grid-template-columns:104px 26px 1fr;align-items:start;
  gap:0;padding:0}
.timeline .t{padding:14px 0;font-weight:700;font-size:15.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--blue)}
.timeline .rail{position:relative;justify-self:center;width:26px;align-self:stretch}
.timeline .rail::before{content:"";position:absolute;inset-block:0;inset-inline-start:50%;
  width:1px;background:var(--line);transform:translateX(-50%)}
.timeline li:first-child .rail::before{inset-block-start:22px}
.timeline li:last-child .rail::before{inset-block-end:calc(100% - 22px)}
.timeline .rail::after{content:"";position:absolute;inset-block-start:16px;
  inset-inline-start:50%;width:9px;height:9px;background:var(--gold);
  transform:translateX(-50%) rotate(45deg)}
/* padding-inline-start, which is the RIGHT side here: the rail sits at the
   inline-start edge of this cell and without it the gold diamond touches the
   first letter of every line. */
.timeline .w{padding:14px 0;padding-inline-start:12px;font-size:16px}
.timeline .w b{font-weight:700}
.timeline .w span{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.timeline li.show .w b{color:var(--olive)}
.timeline li.show .rail::after{background:var(--olive);width:11px;height:11px;
  inset-block-start:15px}
@media(max-width:560px){
  .timeline li{grid-template-columns:78px 20px 1fr}
  .timeline .t{font-size:14px;padding-top:15px}
  .timeline .w{font-size:15px}
}

/* --------------------------------------------------------------- cards --- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.card{background:#fffdf9;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;height:210px;object-fit:cover;display:block}
.card .body{padding:18px 20px 20px}
.card p{margin-bottom:0;font-size:15px}
.card p+p{margin-top:10px}

/* ---------------------------------------------------------------- notes --- */
.notes{list-style:none;margin:0;padding:0}
.notes li{position:relative;padding:0 22px 0 0;margin:0 0 11px;font-size:15.5px;
  max-width:660px}
.notes li::before{content:"";position:absolute;inset-inline-start:6px;top:.62em;
  width:7px;height:7px;background:var(--gold);border-radius:50%}
.callout{background:#f1e6d4;border-inline-start:3px solid var(--gold);
  padding:14px 20px;font-size:15px;color:#5f5148;border-radius:0 6px 6px 0}
.callout p:last-child{margin-bottom:0}

/* ------------------------------------------------------------- cta band --- */
.cta{background:var(--cream);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);text-align:center;
  padding:clamp(34px,6vw,56px) 20px}
.cta h2{margin-bottom:10px}
.cta p{margin:0 auto 22px;max-width:520px;color:var(--muted)}

/* --------------------------------------------------------------- footer --- */
footer{padding:34px 0 44px;color:var(--muted);font-size:13.5px;text-align:center}
footer .flinks{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;
  margin-bottom:12px}
footer img{width:150px;margin:0 auto 16px;display:block;mix-blend-mode:multiply;
  aspect-ratio:1969/799}

/* ---------------------------------------------------------------- form --- */
.form{background:#fffdf9;border:1px solid var(--line);border-radius:10px;
  padding:clamp(20px,4vw,34px)}
.field{margin:0 0 18px}
.field label{display:block;font-weight:700;font-size:15px;margin-bottom:6px}
.field .hint{display:block;font-weight:400;font-size:13.5px;color:var(--muted);
  margin-top:2px}
.field input,.field select{width:100%;padding:12px 13px;min-height:48px;
  border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);
  /* 16px, or iOS zooms the whole page in when the field takes focus. */
  font:16px var(--font)}
.field input:focus,.field select:focus{border-color:var(--olive)}
.field input[aria-invalid=true]{border-color:var(--warn);background:#fdf6f4}
.field .err{display:block;color:var(--warn);font-size:13.5px;font-weight:700;
  margin-top:5px;min-height:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
/* Latin-only fields read left to right even here: an email typed into an RTL
   box puts its @ and its dots in the wrong places on screen. */
.ltr{direction:ltr;text-align:left}
.consent{display:flex;gap:11px;align-items:flex-start;background:var(--cream);
  border:1px solid var(--line);border-radius:6px;padding:14px 16px;margin:0 0 18px}
.consent input{width:20px;height:20px;min-height:0;flex:0 0 auto;margin-top:2px}
.consent label{font-weight:400;font-size:14.5px;margin:0;line-height:1.5}
.formmsg{margin:0 0 16px;padding:13px 16px;border-radius:6px;font-size:15px;
  font-weight:700}
.formmsg.bad{background:#fbf0ec;border-inline-start:3px solid var(--warn);
  color:var(--warn)}
.hidden{display:none!important}
/* The honeypot. Clipped rather than display:none, because some form fillers
   skip what is not rendered — and never reachable by keyboard or screen reader
   (the markup carries aria-hidden and tabindex="-1").
   Clipped and NOT parked at left:-9999px: this is an RTL document, and an
   element 10,000px outside it extends the page's scroll width, which is a real
   horizontal scrollbar on a phone. */
.trap{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.done{text-align:center;padding:clamp(24px,5vw,44px) 0}
.done .tick{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;
  background:var(--olive);color:#fff;font-size:34px;line-height:64px}
.done h2{margin-bottom:12px}
.done p{margin-inline:auto}

/* ------------------------------------------------------------ printing --- */
@media print{
  .topbar,.cta,.btn{display:none}
  body{background:#fff}
  .hero{color:#000;background:#fff}
  .hero>img,.hero .veil{display:none}
  .hero h1,.hero p,.hero .guide{color:#000;text-shadow:none}
  .hero .badge{color:#000;border-color:#999}
  section{page-break-inside:avoid}
}