/* Site shell: top bar, menu (bottom bar on phones), page intro, and the front page. Loaded after style.css. */
:root {
  --tint: #e6f3ec; --tint-2: #fdeceb; --tint-3: #e8f0fb; --tint-4: #fdf1e0;
  --sos: #b3261e; --shadow: 0 6px 24px rgba(16, 40, 30, .08);
  --bar-h: 56px; --nav-h: 62px;
  --art-sun: #f5c542; --art-cloud: #ffffff; --art-far: #cfe8da; --art-mid: #a9d3bd; --art-field: #ecd786; --art-row: #d4b04a; --art-blue: #8fbce8;
}
@media (prefers-color-scheme: dark) {
  :root { --tint: #173a2e; --tint-2: #3a1d1b; --tint-3: #1b2a40; --tint-4: #3a2c16; --sos: #c62828; --shadow: 0 6px 24px rgba(0, 0, 0, .35);
    --art-sun: #e0b13c; --art-cloud: #2a3a46; --art-far: #1d3a30; --art-mid: #245040; --art-field: #5d4d1f; --art-row: #86702b; --art-blue: #3b6b9c; }
}
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 60; background: var(--panel); border-bottom: 1px solid var(--line); }
/* The blur lives on a separate layer: a backdrop-filter on the bar itself would make it the containing block of
   the position:fixed bottom menu on phones and pin that menu to the top bar instead of the screen. */
@supports (backdrop-filter: blur(8px)) {
  .topbar { background: transparent; }
  .topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: color-mix(in srgb, var(--panel) 90%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
}
.topbar-in { max-width: 1160px; margin: 0 auto; padding: 8px 16px; min-height: var(--bar-h); display: flex; align-items: center; gap: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 800; letter-spacing: .01em; color: var(--accent); text-decoration: none; white-space: nowrap; }
.logo { width: 34px; height: 34px; flex: none; }          /* the logo has no hover effect on purpose */
.brand-n { font-weight: 500; color: var(--ink); }
.brand:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.topbar-r { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.wx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); text-decoration: none; line-height: 1.15; }
.wx-chip[hidden] { display: none; }
.wx-chip .ic { color: var(--accent); }
.wx-txt { display: flex; flex-direction: column; font-size: .8rem; }
.wx-txt b { font-size: .86rem; }
.wx-t { color: var(--muted); white-space: nowrap; }
.nav-i:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- menu: pills in the top bar on wide screens ---------- */
.nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.nav-i { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: .94rem; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500; white-space: nowrap; }
.nav-i:hover { background: var(--tint); }
.l-short { display: none; }                                  /* short labels are for the phone bottom bar only */
.nav-i[aria-current=page] { background: var(--tint); color: var(--accent); font-weight: 700; }
@media (max-width: 1199px) { .wx-chip { display: none; } }
/* tight desktop widths: names only (no icons) so the longer menu names fit one row */
@media (min-width: 900px) and (max-width: 1049px) { .nav-i .ic { display: none; } .brand { font-size: 1.15rem; } .nav { margin-left: 4px; gap: 2px; } .topbar-in { gap: 8px; } }
/* ---------- on phones the menu is a bottom bar that is always there ---------- */
@media (max-width: 899px) {
  body { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; margin: 0; padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; background: #dbe3ea; border-top: 1px solid #c3cfda;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .08); }
  .nav-i { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 2px; border-radius: 12px; font-size: .68rem; font-weight: 600; text-align: center; min-width: 0; }
  .nav-i .ic { width: 22px; height: 22px; }
  .l-full { display: none; }
  .l-short { display: inline; }
  .wx-chip { display: inline-flex; padding: 4px 9px 4px 7px; }
  .wx-txt b { display: none; }
  .brand { font-size: 1.1rem; gap: 8px; }
  .logo { width: 30px; height: 30px; }
  }
@media (max-width: 899px) and (min-width: 560px) { .wx-txt b { display: inline; } .wx-txt { flex-direction: row; gap: 4px; align-items: center; } }
@media (max-width: 399px) { .wx-chip { display: none; } }
@media (max-width: 379px) { .nav-i { font-size: .64rem; padding-left: 0; padding-right: 0; } }
@media (max-width: 359px) { .nav-i { font-size: .6rem; letter-spacing: -.01em; } .nav { padding-left: 2px; padding-right: 2px; } }

/* ---------- page intro on the inner pages ---------- */
.intro { max-width: 960px; width: 100%; margin: 0 auto; padding: 22px 16px 4px; text-align: center; }
.intro h1 { margin: 0 0 4px; font-size: 1.7rem; line-height: 1.2; }
.intro p { margin: 0; color: var(--muted); }
/* the inner pages get a quiet landscape behind the title, like the front page: it is absolutely positioned (pushes nothing)
   and fades out at the sides so the text stays readable */
.intro.has-art { position: relative; isolation: isolate; min-height: 170px; padding: 30px 16px 66px; }
.intro.has-art p { max-width: 620px; margin-inline: auto; }
.intro.has-art > :not(.page-art) { position: relative; }
.page-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .85;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-composite: intersect; }
.art-drop path, .art-wave path, .art-line path { fill: none; stroke-linecap: round; stroke-width: 3; }
.art-drop path { stroke: var(--art-blue); }
.art-wave path { stroke: var(--art-sun); stroke-width: 4; }
.art-line path { stroke: var(--art-row); }
.art-phone { fill: var(--art-mid); }
.art-screen { fill: var(--art-cloud); }
.art-112 { fill: #c62828; font: 800 22px system-ui, sans-serif; }
.art-cross { fill: var(--art-mid); }
.art-note ellipse { fill: var(--art-mid); }
.art-note path { fill: none; stroke: var(--art-mid); stroke-width: 5; stroke-linecap: round; }
.art-bar rect { fill: var(--art-mid); }
@media (max-width: 599px) { .intro.has-art { min-height: 150px; padding-bottom: 56px; } .page-art { opacity: .7; } }

/* ---------- front page ---------- */
/* main is a two-column grid on the other pages (style.css); the front page is a plain full-width block */
main.home { display: block; position: relative; isolation: isolate; flex: 1; width: 100%; max-width: none; margin: 0; padding: 0 0 28px; }
/* the soft background spans the whole page width but never wider than the viewport (no horizontal scroll) */
.home::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 480px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 280px at 82% 18%, var(--tint), transparent 70%),
    radial-gradient(440px 240px at 6% 12%, var(--tint), transparent 70%);
}
.home-in { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.hero { position: relative; padding: 30px 0 16px; }
.hero > :not(.hero-art) { position: relative; }
/* decorative landscape on the right of the front-page header: abstract fields, sun, a bus route with stops, wheat ears */
.hero-art { position: absolute; right: 0; top: 0; z-index: 0; width: min(46%, 560px); height: 100%; pointer-events: none;
  /* fades out on the left (towards the text) and at the bottom (so the field does not end in a hard line) */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to bottom, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 28%), linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-composite: intersect; }
.art-halo { fill: var(--art-sun); opacity: .2; }
.art-sun { fill: var(--art-sun); }
.art-cloud ellipse { fill: var(--art-cloud); }
.art-h1 { fill: var(--art-far); }
.art-h2 { fill: var(--art-mid); }
.art-h3 { fill: var(--art-field); }
.art-rows path { fill: none; stroke: var(--art-row); stroke-width: 1.5; }
@media (max-width: 1099px) { .hero-art { width: 40%; } }
/* on phones and tablets the picture is a quiet background in the corner behind the text: it is absolutely positioned,
   so it never pushes anything down */
@media (max-width: 899px) { .hero-art { width: min(100%, 560px); opacity: .8; } }
.eyebrow { display: inline-block; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--tint); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
@media (max-width: 420px) { .eyebrow { padding: 5px 11px; font-size: .7rem; letter-spacing: .06em; } }
@media (max-width: 340px) { .eyebrow { padding: 5px 10px; font-size: .66rem; letter-spacing: .03em; } }
.hero h1 { margin: 8px 0 6px; font-size: clamp(1.55rem, 4.6vw, 3.1rem); line-height: 1.1; letter-spacing: -.01em; max-width: 20em; text-wrap: balance; }
.hl { color: var(--accent); }
.hero .lead { margin: 0 0 20px; font-size: 1.1rem; color: var(--muted); }
.hero-search { position: relative; max-width: 760px; }
.hs-box { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.hs-box .ic { color: var(--muted); }
.hs-box input { flex: 1; min-width: 0; padding: 10px 4px; font: inherit; font-size: 1.05rem; color: inherit; background: none; border: 0; outline: 0; }
.hs-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.hs-box button { padding: 11px 22px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 700; cursor: pointer; }
.hs-box button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 359px) { .hs-box { padding-left: 10px; gap: 4px; } .hs-box button { padding: 11px 14px; } .hs-box input { font-size: 1rem; } }
.hs-hint { margin: 8px 4px 0; color: var(--muted); font-size: .85rem; }
.sr-list { position: absolute; z-index: 40; left: 0; right: 0; margin: 6px 0 0; padding: 4px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); max-height: 360px; overflow-y: auto; }
.sr-list a, .sr-list .none { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.sr-list a:hover, .sr-list a:focus-visible, .sr-list a[aria-selected=true] { background: var(--tint); outline: 0; }
.sr-k { flex: none; min-width: 5.4em; padding: 2px 8px; border-radius: 999px; background: var(--tint); color: var(--accent); font-size: .72rem; font-weight: 700; text-align: center; }
.sr-n { min-width: 0; overflow-wrap: anywhere; }
.sr-list small { display: block; color: var(--muted); }

.cards { display: grid; gap: 16px; margin-top: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hcard { position: relative; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.hcard::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--tint); opacity: .55; z-index: 0; pointer-events: none; }
.hcard > * { position: relative; z-index: 1; }
.hcard.c-wx::after { background: var(--tint-3); }
.hcard.c-ph::after { background: var(--tint-2); }
.hcard.c-act::after { background: var(--tint-4); }
.hc-head { display: flex; align-items: flex-start; gap: 14px; }
.hc-ic { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--tint); color: var(--accent); }
.hc-ic .ic { width: 26px; height: 26px; }
.c-wx .hc-ic { background: var(--tint-3); color: #2a5fb0; }
.c-ph .hc-ic { background: var(--tint-2); color: var(--sos); }
.c-act .hc-ic { background: var(--tint-4); color: #b86a00; }
@media (prefers-color-scheme: dark) { .c-wx .hc-ic { color: #8fb4ff; } .c-act .hc-ic { color: #f0b45c; } .c-ph .hc-ic { color: #ff8a80; } }
.hc-title { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.hc-title a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.hc-title .go-ic { overflow: hidden; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--ink); }
.hc-title .go-ic .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.hc-title a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.hc-desc { margin: 4px 0 0; color: var(--muted); font-size: .92rem; }
.hc-body { margin-top: 14px; }
.hc-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; color: var(--accent); font-weight: 700; font-size: .9rem; text-decoration: none; }
.hc-link:hover { text-decoration: underline; }
.hc-link .ic { width: 16px; height: 16px; }
.hc-note { margin: 8px 0 0; color: var(--muted); font-size: .78rem; }

/* departures */
.dep-box { padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.dep-h { margin: 0 0 8px; font-size: .95rem; font-weight: 700; }
.deps { list-style: none; margin: 0; padding: 0; }
.dep { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .93rem; }
.dep:first-child { border-top: 0; }
.ln { display: inline-grid; place-items: center; min-width: 2.2em; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: .85rem; }
.dep-to { min-width: 0; overflow-wrap: anywhere; }
.dep-t { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.dep-t b { display: block; }
.dep-t small { color: var(--muted); }
.sk { color: var(--muted); }

/* weather */
.wx-now { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wx-big { font-size: 3.2rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.wx-ico { font-size: 3rem; line-height: 1; }
.wx-sub { color: var(--muted); font-size: .9rem; }
.wx-sub b { color: var(--ink); }
.wx-days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.wx-d { padding: 8px 2px; text-align: center; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; font-size: .78rem; line-height: 1.3; }
.wx-d .ic2 { display: block; font-size: 1.3rem; }
@media (max-width: 360px) { .wx-days { gap: 4px; } .wx-d { font-size: .7rem; padding: 8px 0; } .wx-d b { font-size: .82rem; } }
.wx-d b { font-size: .9rem; }
.wx-d small { color: var(--muted); }

/* phones */
.sos-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; }
.sos-dot { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sos); color: #fff; text-decoration: none; }
.sos-dot .ic { width: 24px; height: 24px; }
.sos-no { display: block; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--sos); text-decoration: none; }
.sos-t2 { display: block; margin-top: 2px; font-weight: 700; color: var(--sos); font-size: .9rem; }
.sos-d2 { display: block; color: var(--muted); font-size: .82rem; }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); font-weight: 600; text-decoration: none; }
.btn-ghost:hover { border-color: var(--accent); }
.btn-ghost:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* activities */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip-l { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: .92rem; font-weight: 500; }
.chip-l:hover { border-color: var(--accent); }
.chip-l:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip-l small { color: var(--muted); }

/* advertising invitation */
.ad-hero { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; padding: 22px 24px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(100deg, var(--tint) 0%, color-mix(in srgb, var(--tint) 55%, var(--panel)) 100%); border: 1px solid var(--line); }
.ad-hero::before { content: ""; position: absolute; right: -40px; bottom: -70px; width: 260px; height: 260px; border-radius: 50%; background: var(--panel); opacity: .45; pointer-events: none; }
.ad-hero > * { position: relative; }
.ad-eyebrow { margin: 0 0 4px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ad-text { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.3; max-width: 30em; }
.ad-text span { color: var(--accent); }
.ad-hero .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; }
@media (max-width: 599px) { .ad-hero { padding: 18px; } .ad-hero .btn { width: 100%; justify-content: center; } }

/* ---------- back-to-top button (shown by site.js after some scrolling) ---------- */
.to-top { position: fixed; z-index: 55; right: max(16px, env(safe-area-inset-right)); bottom: 20px; display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .22); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s; }
.to-top .ic { width: 24px; height: 24px; stroke-width: 2.4; }
.to-top:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 899px) { .to-top { bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .to-top, .to-top.show { transition: none; } html { scroll-behavior: auto; } }
@media (max-width: 899px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav { background: #0a0e12; border-top-color: #2c3743; } }