/* The Big Expedition — site-wide components (header, end card, trailer frames, film player).
   Builds on paper.css. Each block here maps to one Leptos component. */

/* HACH brand colours, sampled from the crest and the belonging logo */
:root { --hach-sky: #84b4d8; --hach-yellow: #f0c000; --hach-green: #006054; --hach-blue: #3c78a8; --hach-amber: #d89c30; }
body { background: #b8966c; }
.torn.sky { --torn-bg: var(--hach-sky); color: var(--ink); }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.big { font: 400 clamp(1.8rem, 4vw, 2.8rem)/1.05 var(--f-slab); }
.lede { font-size: 1.1rem; max-width: 56ch; }
.btn.alt { background: var(--label); }
.btn.navy { background: var(--navy); color: var(--label); }
.btn.coral { background: var(--coral); color: #fff; }
.btn[aria-disabled="true"] { opacity: .55; cursor: default; }
.btn[aria-disabled="true"]:hover { transform: none; }
.hand-note { font: 700 1.35rem/1.1 var(--f-hand); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- SiteHeader ---------- */
.site-head { padding-block: 22px 14px; position: relative; z-index: 20; }
.site-head::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px;   /* the crest: Harris yellow, green, sky-blue shield */
  background: linear-gradient(90deg, var(--hach-yellow) 0 38%, var(--hach-green) 38% 43%, var(--hach-sky) 43% 100%); }
.site-head .wrap { display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap; }
/* breadcrumb back to the whole-school curriculum, above the brand */
.crumbs { flex: 0 0 100%; margin: -8px 0 -4px; font: 600 .78rem/1 var(--f-body); color: #6b5230; }
.crumbs a { color: var(--hach-green, #006054); text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { text-decoration: underline; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand img { width: 38px; }
.brand b { display: block; font: 400 1.1rem/1 var(--f-slab); color: var(--ink); }
.brand small { display: block; font: 600 1rem/1 var(--f-hand); color: #5b4526; margin-top: 3px; }
.tabs { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.tabs a { text-decoration: none; font-size: .9rem; }
.tabs li:nth-child(odd) a { transform: rotate(-1.4deg); } .tabs li:nth-child(even) a { transform: rotate(1.2deg); }
.tabs a[aria-current="page"] { --torn-bg: var(--hach-yellow); }
.tabs a:hover { --torn-bg: #fff8e8; }
@media (max-width: 640px) {
  .site-head nav { flex: 1 1 100%; min-width: 0; max-width: 100%; }   /* keep the scrolling tab row inside the page */
  .tabs { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding: 6px 2px 8px; }
  .tabs a { white-space: nowrap; }
}

/* ---------- EndCard ---------- */
.endcard { text-align: center; padding-block: 64px 70px; }
.endcard .marks { display: flex; gap: 26px; justify-content: center; align-items: center; margin-bottom: 18px; }
.endcard .marks img { width: 84px; }
.endcard .marks img.belong { width: 118px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.endcard .gc { font: 400 .9rem/1 var(--f-label); letter-spacing: .1em; color: #fff; margin: 16px 0 0; }
.endcard .torn { font-family: var(--f-slab); font-size: clamp(1.2rem, 3vw, 1.8rem); display: table; margin: 0 auto 6px; }
.endcard .pk { font: 700 1.8rem/1 var(--f-hand); color: #fff; margin: 16px 0 8px; }
.endcard .stick { --torn-bg: var(--mustard); font-size: 1.5rem; }
.endcard nav { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 28px; font-size: .9rem; }
.endcard nav a { color: #fff; }

/* ---------- TrailerFrame ---------- */
.frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-align: left;
         background: #1d2448; box-shadow: 0 8px 18px rgba(0,0,0,.28); outline: 7px solid #fff; outline-offset: -1px; overflow: hidden; }
.frame > img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame .play { position: absolute; right: 12px; bottom: 12px; width: 58px; height: 58px; border-radius: 50%; background: var(--coral); display: grid; place-items: center;
               box-shadow: 0 3px 0 rgba(0,0,0,.3); transition: transform .15s; }
.frame .play::before { content: ""; margin-left: 5px; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; }
.frame:hover .play, .frame:focus-visible .play { transform: scale(1.08) rotate(-4deg); }
.frame .len { position: absolute; left: 12px; bottom: 12px; font: 400 .8rem/1 var(--f-label); background: rgba(29,36,72,.85); color: #fff; padding: 6px 8px 5px; }
.frame.soon { cursor: default; background: #efe4cf url(/img/tile_cream.webp) 0 0/1200px auto repeat; }
.frame.soon::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle, #1d2448 4px, transparent 4.5px) 0 6px / 20px 16px repeat-x,
  radial-gradient(circle, #1d2448 4px, transparent 4.5px) 0 calc(100% - 6px) / 20px 16px repeat-x; opacity: .35; pointer-events: none; }
.frame.soon > img.art { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%) rotate(-3deg); max-height: 66%; max-width: 70%; width: auto; filter: drop-shadow(0 5px 5px rgba(0,0,0,.25)); }
.frame.soon .stamp { position: absolute; right: 7%; bottom: 13%; transform: rotate(-6deg); font-size: .9rem; --torn-bg: var(--mustard); }
.frame.soon .stamp::after { content: ""; }

/* ---------- FilmPlayer (dialog) ---------- */
dialog.player { border: 0; padding: 0; background: transparent; width: min(960px, calc(100vw - 32px)); max-width: none; }
dialog.player::backdrop { background: rgba(15, 20, 45, .82); }
dialog.player .inner { background: #1d2448; padding: 12px; box-shadow: 0 20px 40px rgba(0,0,0,.5); }
dialog.player video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
dialog.player header { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--label); padding: 4px 4px 12px; }
dialog.player header b { font: 400 1.05rem/1.1 var(--f-label); letter-spacing: .03em; }
dialog.player .close { cursor: pointer; border: 0; background: var(--label); color: var(--ink); font: 400 .85rem/1 var(--f-label); padding: 8px 12px 7px; }

/* ---------- SpeechBubble ---------- */
.bubble { position: relative; background: #fffdf6; padding: 14px 18px; border-radius: 18px; box-shadow: 0 4px 10px rgba(0,0,0,.15); font-size: 1rem; }
.bubble::after { content: ""; position: absolute; left: 28px; bottom: -14px; border-style: solid; border-width: 14px 12px 0 0; border-color: #fffdf6 transparent transparent; }
.bubble b.who { display: block; font: 400 .78rem/1 var(--f-label); letter-spacing: .06em; color: var(--coral); margin-bottom: 4px; }

/* ---------- Region grounds shared by map and trails ---------- */
.g7 { background: #6f9a62 url(/img/tile_teal.webp) 0 0/1200px auto repeat; background-blend-mode: multiply; }
.g8 { background: #d9b067 url(/img/tile_mustard.webp) 0 0/1200px auto repeat; }
.g9 { background: #8e9aa8 url(/img/tile_cream.webp) 0 0/1200px auto repeat; background-blend-mode: multiply; }

/* ---------- Sway: a slow, gentle rock for calm illustrations (the film "boil" is for busier moments) ---------- */
@keyframes sway { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
.sway { transform-origin: 50% 100%; animation: sway 5s ease-in-out infinite alternate; }

@media (prefers-reduced-motion: reduce) { .frame .play { transition: none; } .sway { animation: none; } }