@import url("fonts.css");

/* ============================================================
   Plumbing only. Nothing here is a design decision — no colour,
   no typeface, no layout. Each site writes its own visual system
   on top; this file only carries the things that must be right
   on every site and are invisible when they are.
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* A sideways-scrollable page drags position:fixed elements out of view on
     phones. Clip rather than scroll. (clip, not hidden: hidden would make html
     a scroll container and break scroll-padding and sticky.) */
  overflow-x: clip;
}

body { margin: 0; }
body.is-locked { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
/* A <button> inherits the user agent's grey `buttonface` unless something says
   otherwise. An outline/ghost button that sets only border-color and color then
   renders as light-grey with (often white) text on it — invisible. Reset here;
   any variant that wants a fill sets one and wins on specificity. */
button { background: transparent; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Reveal-on-scroll. The JS failsafe shows everything if the observer
   never runs, so content can never be stranded invisible. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease, ease), transform .7s var(--ease, ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media print {
  .site-header, .lightbox, .skip-link, .gallery-more, .filters, .map-consent, .callbar { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}

/* ============================================================
   Skiathos Mountain Bikes — trail-map system.
   Forest-dark ground, topographic contour motif, route cards
   with difficulty bars. Condensed uppercase, outdoors signage.
   ============================================================ */
:root {
  --forest:    #10231b;
  --forest-2:  #163024;
  --bark:      #1e3b2d;
  --line:      #274736;
  --line-2:    #356149;
  --sand:      #f5f2e9;
  --paper:     #ffffff;
  --ink:       #142019;
  --body:      #d3ddd6;
  --body-dark: #47564e;
  --dim:       #90a399;
  --dim-dark:  #5d6d64;
  --lime:      #9ed64a;
  --lime-2:    #4a6d18;   /* green that clears AA on the sand ground */
  --sun:       #f0a020;
  --sea:       #2f9bb5;

  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --sans: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(1.1rem, 4vw, 3rem);
  --wrap: 1220px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

body { background:var(--forest); color:var(--body); font-family:var(--sans); font-size:1.02rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
a { color:var(--lime); text-underline-offset:3px; }
a:hover { color:#b9e678; }
h1,h2,h3,h4 { font-family:var(--display); font-weight:700; color:#fff; line-height:1.05; text-transform:uppercase; letter-spacing:.005em; }
:focus-visible { outline:3px solid var(--lime); outline-offset:2px; }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }
.skip-link { position:absolute; left:1rem; top:-100px; z-index:300; background:var(--lime); color:#0d1c14; padding:.7rem 1.2rem; font-weight:700; text-decoration:none; }
.skip-link:focus { top:1rem; }
.tag { display:inline-flex; align-items:center; gap:.5rem; font-family:var(--display); font-size:.85rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); }
.tag::before { content:""; width:22px; height:2px; background:var(--lime); }

/* ---------- Header ---------- */
.site-header { position:sticky; top:0; z-index:100; background:rgba(16,35,27,.94); backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--line); }
.header-inner { display:flex; align-items:center; gap:1rem; min-height:72px; position:relative; }
.brand { margin-right:auto; display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; }
.brand img { height:40px; width:auto; }
.brand .bn { font-family:var(--display); font-weight:700; font-size:1.12rem; text-transform:uppercase; color:#fff; line-height:1.05; max-width:9ch; }
.nav { display:flex; align-items:center; gap:clamp(.5rem,1.4vw,1.4rem); }
.nav a { font-family:var(--display); font-weight:600; font-size:1rem; letter-spacing:.04em; text-transform:uppercase; color:var(--body); text-decoration:none; padding:.35rem 0; border-bottom:2px solid transparent; transition:color .2s var(--ease), border-color .2s var(--ease); }
.nav a:hover { color:#fff; border-bottom-color:var(--line-2); }
.nav a[aria-current="page"] { color:var(--lime); border-bottom-color:var(--lime); }
.header-cta { display:inline-flex; align-items:center; gap:.45rem; background:var(--lime); color:#0d1c14; font-family:var(--display); font-weight:700; font-size:.98rem; text-transform:uppercase; letter-spacing:.03em; padding:.55rem 1.1rem; text-decoration:none; transition:background-color .2s var(--ease); }
.header-cta:hover { background:#b9e678; color:#0d1c14; }
.header-cta svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.nav-toggle { display:none; width:42px; height:42px; border:0; background:transparent; cursor:pointer; padding:0; align-items:center; justify-content:center; }
.nav-toggle span { display:block; width:22px; height:2px; background:#fff; position:relative; transition:background-color .2s var(--ease); }
.nav-toggle span::before,.nav-toggle span::after { content:""; position:absolute; left:0; width:22px; height:2px; background:#fff; transition:transform .3s var(--ease), top .2s var(--ease); }
.nav-toggle span::before { top:-7px; } .nav-toggle span::after { top:7px; }
.site-header.is-open .nav-toggle span { background:transparent; }
.site-header.is-open .nav-toggle span::before { top:0; transform:rotate(45deg); }
.site-header.is-open .nav-toggle span::after { top:0; transform:rotate(-45deg); }
@media (max-width:960px) {
  .nav-toggle { display:inline-flex; }
  .header-cta span { display:none; }
  .nav { position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; background:var(--forest-2); border-top:1px solid var(--line); padding:0 var(--gutter) 1rem; max-height:0; overflow:hidden; visibility:hidden; transition:max-height .35s var(--ease), visibility .35s; }
  .site-header.is-open .nav { max-height:75vh; visibility:visible; overflow-y:auto; }
  .nav a { font-size:1.15rem; padding:.9rem 0; border-bottom:1px solid var(--line); }
  .nav a[aria-current="page"] { border-bottom-color:var(--line); }
}

/* ---------- Hero ---------- */
.hero { position:relative; min-height:78svh; display:grid; align-items:end; overflow:hidden; }
.hero-bg { position:absolute; inset:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-bg::after { content:""; position:absolute; inset:0; background:
  linear-gradient(to right, rgba(16,35,27,.9) 0%, rgba(16,35,27,.55) 48%, rgba(16,35,27,.25) 100%),
  linear-gradient(to bottom, rgba(16,35,27,.5) 0%, transparent 30%, rgba(16,35,27,.92) 100%); }
.hero-inner { position:relative; z-index:2; padding-block:6rem clamp(2.5rem,6vw,4rem); }
.hero h1 { margin-top:1rem; font-size:clamp(2.4rem,7vw,5rem); max-width:16ch; }
.hero h1 .lime { color:var(--lime); }
.hero p { margin-top:1.1rem; max-width:46ch; font-size:clamp(1.02rem,1.5vw,1.2rem); }
.hero-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.9rem; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; background:transparent; align-items:center; justify-content:center; gap:.5rem; padding:.85rem 1.7rem; border:2px solid transparent; font-family:var(--display); font-weight:700; font-size:1.05rem; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; cursor:pointer; transition:background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.btn svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.btn--lime { background:var(--lime); color:#0d1c14; } .btn--lime:hover { background:#b9e678; color:#0d1c14; }
.btn--ghost { border-color:var(--line-2); color:#fff; } .btn--ghost:hover { border-color:var(--lime); color:var(--lime); }
.btn--dark { background:var(--forest); color:#fff; } .btn--dark:hover { background:var(--bark); color:var(--lime); }

/* ---------- Page head ---------- */
.pagehead { border-bottom:1px solid var(--line); background:var(--forest-2); }
.pagehead .wrap { padding-block:clamp(2.25rem,5.5vw,3.75rem); }
.pagehead h1 { margin-top:.9rem; font-size:clamp(2rem,5vw,3.4rem); max-width:20ch; }
.pagehead p { margin-top:.9rem; max-width:62ch; }

/* ---------- Sections ---------- */
.section { padding-block:clamp(2.75rem,6.5vw,5rem); }
.section--light { background:var(--sand); color:var(--body-dark); }
.section--light h1,.section--light h2,.section--light h3 { color:var(--ink); }
.section--light .tag { color:var(--lime-2); } .section--light .tag::before { background:var(--lime-2); }
.section--light a { color:var(--lime-2); }
.sec-head { max-width:50rem; margin-bottom:clamp(1.6rem,3.5vw,2.5rem); }
.sec-head h2 { margin-top:.85rem; font-size:clamp(1.7rem,4vw,2.7rem); }
.sec-head p { margin-top:.85rem; }

/* ---------- Offer tiles (home) ---------- */
.offers { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); }
.offer { background:var(--forest-2); padding:1.75rem 1.75rem 1.9rem; text-decoration:none; display:flex; flex-direction:column; transition:background-color .25s var(--ease); }
.offer:hover { background:var(--bark); }
.offer svg { width:30px; height:30px; stroke:var(--lime); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; margin-bottom:1rem; }
.offer h3 { font-size:1.35rem; }
.offer p { margin-top:.5rem; font-size:.94rem; color:var(--dim); }
.offer .go { margin-top:auto; padding-top:1rem; font-family:var(--display); font-weight:700; font-size:.95rem; text-transform:uppercase; letter-spacing:.05em; color:var(--lime); }

/* ---------- Route cards ---------- */
.routes { display:grid; gap:1.5rem; }
.route { background:var(--paper); border-left:5px solid var(--lime-2); padding:clamp(1.4rem,3vw,2rem); }
.route.hard { border-left-color:#d1462f; }
.route.medium { border-left-color:var(--sun); }
.route-top { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem 1rem; justify-content:space-between; }
.route .no { font-family:var(--display); font-weight:700; font-size:.85rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim-dark); }
.route h3 { color:var(--ink); font-size:clamp(1.25rem,2.6vw,1.7rem); margin-top:.2rem; }
.route p { margin-top:.85rem; color:var(--body-dark); font-size:.97rem; }
.route-stats { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem; }
.stat { display:inline-flex; align-items:baseline; gap:.4rem; background:var(--sand); padding:.4rem .85rem; font-size:.85rem; color:var(--body-dark); }
.stat b { font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink); }
.diff { display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .85rem; font-family:var(--display); font-weight:700; font-size:.9rem; text-transform:uppercase; letter-spacing:.06em; }
.diff.hard { background:#fbe6e2; color:#8f2617; }
.diff.medium { background:#fdf0dc; color:#7d5006; }
.diff .bars { display:inline-flex; gap:2px; }
.diff .bars i { width:4px; height:12px; background:currentColor; opacity:.28; display:block; }
.diff.medium .bars i:nth-child(-n+2), .diff.hard .bars i { opacity:1; }

/* ---------- Kit list ---------- */
.kit { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1.5rem; }
.kit h3 { color:var(--ink); font-size:1.15rem; margin-bottom:.7rem; }
.kit ul { list-style:none; display:grid; gap:.4rem; }
.kit li { position:relative; padding-left:1.35rem; font-size:.95rem; }
.kit li::before { content:""; position:absolute; left:0; top:.62rem; width:8px; height:8px; border:2px solid var(--lime-2); border-radius:50%; }

/* ---------- Bike list ---------- */
.bikes { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:1.25rem; }
.bike { background:var(--paper); padding:1.1rem; text-align:center; }
.bike img { width:100%; aspect-ratio:4/3; object-fit:contain; }
.bike h3 { color:var(--ink); font-size:1.02rem; margin-top:.75rem; }

/* ---------- FAQ rows ---------- */
.qa { border-top:1px solid var(--line); }
.qa .row { border-bottom:1px solid var(--line); display:grid; grid-template-columns:14rem 1fr; gap:.4rem 2rem; padding-block:1.35rem; }
.qa dt { font-family:var(--display); font-weight:700; font-size:1.2rem; text-transform:uppercase; color:var(--lime); }
.qa dd { margin:0; }
@media (max-width:700px) { .qa .row { grid-template-columns:1fr; } }
.section--light .qa { border-color:#ddd8c9; } .section--light .qa .row { border-color:#ddd8c9; }
.section--light .qa dt { color:var(--lime-2); }

/* ---------- Gallery ---------- */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:3px; }
.tile { position:relative; display:block; padding:0; border:0; cursor:zoom-in; overflow:hidden; background:var(--forest-2); aspect-ratio:1/1; }
.tile img { width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease), filter .3s var(--ease); filter:saturate(.9); }
.tile:hover img,.tile:focus-visible img { transform:scale(1.06); filter:saturate(1.1); }
.tile::after { content:""; position:absolute; inset:0; border:3px solid transparent; transition:border-color .25s var(--ease); }
.tile:hover::after,.tile:focus-visible::after { border-color:var(--lime); }
.tile[hidden] { display:none; }
.tile.is-entering { animation:tileIn .35s var(--ease) both; }
@keyframes tileIn { from{opacity:0} to{opacity:1} }
.gallery-more { display:flex; justify-content:center; margin-top:1.6rem; }

/* ---------- Contact ---------- */
.contact-band { background:var(--lime); color:#0d1c14; }
.contact-band .wrap { padding-block:clamp(2.25rem,5vw,3.5rem); display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:center; justify-content:space-between; }
.contact-band h2 { color:#0d1c14; font-size:clamp(1.6rem,3.6vw,2.4rem); max-width:18ch; }
.contact-band .who { margin-top:.5rem; font-weight:600; }
.contact-band .btn--dark { border-color:transparent; }
/* The band is lime; the default lime link colour would be invisible on it. */
.contact-band a:not(.btn) { color:#0d1c14; text-decoration:underline; text-underline-offset:3px; }
.contact-band a:not(.btn):hover { color:#26402f; }

/* ---------- Footer ---------- */
.site-footer { background:#0b1811; border-top:1px solid var(--line); padding-block:2rem; font-size:.88rem; color:var(--dim); }
.footer-inner { display:flex; flex-wrap:wrap; gap:1rem 2rem; align-items:center; justify-content:space-between; }
.site-footer img { height:34px; width:auto; opacity:.9; }
.footer-links { display:flex; gap:1.2rem; list-style:none; flex-wrap:wrap; }
.site-footer a { color:var(--body); text-decoration:none; }
.site-footer a:hover { color:var(--lime); }

/* ---------- Lightbox ---------- */
.lightbox { position:fixed; inset:0; z-index:300; display:none; background:rgba(7,16,11,.98); opacity:0; transition:opacity .25s var(--ease); }
.lightbox.is-open { display:block; } .lightbox.is-visible { opacity:1; }
.lb-stage { position:absolute; inset:0; display:grid; place-items:center; padding:clamp(3.5rem,8vw,5rem) clamp(1rem,7vw,5.5rem); }
.lb-figure { margin:0; display:grid; place-items:center; gap:1rem; max-width:100%; max-height:100%; }
.lb-img { max-width:100%; max-height:calc(100svh - 11rem); width:auto; height:auto; object-fit:contain; border:2px solid var(--line-2); transition:opacity .2s var(--ease); }
.lb-img.is-loading { opacity:.35; }
.lb-caption { color:var(--dim); font-size:.85rem; text-align:center; max-width:60ch; }
.lb-btn { position:absolute; z-index:2; display:grid; place-items:center; width:46px; height:46px; cursor:pointer; background:var(--forest-2); border:1px solid var(--line-2); color:#fff; transition:background-color .2s var(--ease), border-color .2s var(--ease); }
.lb-btn:hover { background:var(--lime); border-color:var(--lime); color:#0d1c14; }
.lb-btn:disabled { opacity:.3; cursor:default; }
.lb-btn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lb-close { top:clamp(1rem,3vw,1.6rem); right:clamp(1rem,3vw,1.6rem); }
.lb-prev { left:clamp(.5rem,2.4vw,1.6rem); top:50%; transform:translateY(-50%); }
.lb-next { right:clamp(.5rem,2.4vw,1.6rem); top:50%; transform:translateY(-50%); }
.lb-counter { position:absolute; top:clamp(1rem,3vw,1.7rem); left:50%; transform:translateX(-50%); font-family:var(--display); font-weight:700; font-size:1rem; letter-spacing:.1em; color:var(--dim); }
@media (max-width:640px) { .lb-prev{left:.4rem} .lb-next{right:.4rem} .lb-btn{width:42px;height:42px} .lb-img{max-height:calc(100svh - 9rem)} }
.cta-row { margin-top:1.75rem; }

/* [hidden] must win. A rule like `.gallery-more { display:flex }` outranks the
   browser's own `[hidden] { display:none }`, which left an empty "Show 0 more"
   button on screen whenever a gallery had nothing further to reveal. */
[hidden] { display: none !important; }