/* John's Bunkhouse — one stylesheet for the marketing site (and, later, the booking app). */

@font-face {
  font-family: "Fjalla One";
  src: url("/fonts/fjalla-one.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@layer reset, base, layout, components, pages;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body { margin: 0; }
  img, svg { display: block; max-inline-size: 100%; block-size: auto; }
  h1, h2, h3, p, figure, ul, ol, dl, dd, table { margin: 0; }
  ul, ol { padding: 0; }
  summary { list-style: none; }
  summary::-webkit-details-marker { display: none; }
  /* Custom elements are inline until told otherwise. */
  site-header, site-footer, hero-banner, funding-note, text-photo, photo-grid, page-intro, call-to-action { display: block; }
}

@layer base {
  :root {
    color-scheme: light;

    /* Colours taken from the original site. */
    --green: #00873f;
    --green-hover: #00823d;
    --green-bright: #00ab50;
    --grey: #f6f6f6;
    --ink: #1b1b1b;
    --muted: #575757;
    --paper: #ffffff;
    --line: color-mix(in oklab, var(--ink) 12%, var(--paper));
    --focus: color-mix(in oklab, var(--green) 70%, var(--ink));

    /* Type */
    --font-display: "Fjalla One", "Arial Narrow", Impact, sans-serif;
    --font-body: "Source Sans 3", "Source Sans Pro", system-ui, sans-serif;
    --step--1: clamp(0.9rem, 0.87rem + 0.15vw, 1rem);
    --step-0: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
    --step-1: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
    --step-3: clamp(2.1rem, 1.7rem + 2vw, 3.2rem);

    /* Space and measure */
    --space-s: 0.75rem;
    --space-m: 1.5rem;
    --space-l: clamp(2.5rem, 2rem + 3vw, 4.5rem);
    --gutter: clamp(1rem, 0.5rem + 3vw, 2.5rem);
    --content: 72rem;
    --measure: 66ch;
    /* Side padding that centres a --content column: used by header, footer and bands. */
    --pad: max(var(--gutter), (100% - var(--content)) / 2);
  }

  ::selection { background: color-mix(in oklab, var(--green) 22%, var(--paper)); color: var(--ink); }

  html {
    accent-color: var(--green);
    font-family: var(--font-body);
    font-size: 100%;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    font-size: var(--step-0);
    min-block-size: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.1;
    text-wrap: balance;
  }
  h1 { font-size: var(--step-3); color: var(--green); }
  h2 { font-size: var(--step-2); }
  h3 { font-size: var(--step-1); }

  p, li, dd, dt { max-inline-size: var(--measure); text-wrap: pretty; }

  a {
    color: var(--green);
    text-underline-offset: 0.15em;
    text-decoration-thickness: from-font;
    &:hover { color: var(--green-hover); }
  }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

  strong { font-weight: 600; }
  small { font-size: var(--step--1); color: var(--muted); }
  address { font-style: normal; }
  table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
}

@layer layout {
  /* Main is a three-column grid: children sit in the centre column unless they ask for the full bleed. */
  main {
    container: page / inline-size;
    padding-block: var(--space-l);
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--gutter), 1fr)
      [content-start] minmax(0, var(--content))
      [content-end] minmax(var(--gutter), 1fr)
      [full-end];
    row-gap: var(--space-l);
    align-content: start;
    & > * { grid-column: content; }
    & > .full { grid-column: full; }
  }

  /* Bands that run edge to edge but keep their content in the same column as main. */
  site-header, site-footer { padding-inline: var(--pad); }

  /* Vertical rhythm inside a section of prose. */
  .flow > * + * { margin-block-start: var(--space-m); }
  .flow > h2 + *, .flow > h3 + * { margin-block-start: var(--space-s); }
  .flow > * + h2 { margin-block-start: var(--space-l); }
  .flow > * + h3 { margin-block-start: var(--space-m); }

  ul.bullets { padding-inline-start: 1.2em; }
  ul.bullets > li + li { margin-block-start: var(--space-s); }
}

@layer components {
  /* Skip link: visually hidden until it receives keyboard focus. */
  a.skip {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: var(--gutter);
    translate: 0 -150%;
    background: var(--green);
    color: var(--paper);
    padding: 0.6em 1em;
    border-radius: 0 0 3px 3px;
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-decoration: none;
    z-index: 2;
    &:focus-visible { translate: 0 0; outline-offset: 0; }
  }

  /* Header and navigation */
  site-header {
    border-block-end: 1px solid var(--line);
    padding-block: var(--space-m);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-l);
    & .brand {
      font-family: var(--font-display);
      font-size: var(--step-2);
      color: var(--ink);
      text-decoration: none;
      line-height: 1;
      &:hover { color: var(--green); }
    }
    & nav {
      flex: 1;
      & ul {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 1.5rem;
      }
      & a, & summary {
        font-family: var(--font-display);
        font-size: var(--step--1);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--ink);
        text-decoration: none;
        padding-block: 0.4em;
        display: inline-block;
        border-block-end: 2px solid transparent;
        &:hover { color: var(--green); }
      }
      & a[aria-current="page"] { border-block-end-color: var(--green); }
      & summary { cursor: pointer; }
      & summary::after { content: " \25BE"; color: var(--green); }
      & details { position: relative; }
      & details[open] > summary { color: var(--green); }
      & details ul {
        flex-direction: column;
        align-items: start;
        gap: 0;
        padding: 0.5rem 0;
      }
      & li:has(> .cta) { margin-inline-start: auto; }
      & summary.current { border-block-end-color: var(--green); }
      & .cta {
        background: var(--green);
        color: var(--paper);
        padding: 0.55em 1.1em;
        border-radius: 3px;
        border: 0;
        &:hover { background: var(--green-hover); color: var(--paper); }
      }
    }
  }

  /* Narrow screens: the nav drops below the brand and takes the full width. */
  @media (max-width: 59.99rem) {
    site-header nav { flex-basis: 100%; }
  }

  /* On wide screens the Berneray group is a dropdown; on narrow ones it opens in place. */
  @media (min-width: 60rem) {
    site-header nav details ul {
      position: absolute;
      inset-inline-start: -1rem;
      inset-block-start: 100%;
      z-index: 1;
      background: var(--paper);
      border: 1px solid var(--line);
      box-shadow: 0 6px 20px color-mix(in oklab, var(--ink) 12%, transparent);
      padding: 0.5rem 1rem;
      min-inline-size: 14rem;
    }
  }

  /* Footer: funding acknowledgement on top, then copyright and legal links. */
  site-footer {
    background: var(--grey);
    border-block-start: 1px solid var(--line);
    padding-block: var(--space-l);
    font-size: var(--step--1);
    color: var(--muted);
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "funding funding" "copy legal";
    align-items: end;
    gap: var(--space-m);

    & funding-note { grid-area: funding; }
    & > p { grid-area: copy; }
    & > nav { grid-area: legal; }
    & nav ul { list-style: none; display: flex; gap: var(--space-m); }
    & a { color: inherit; }
  }
  @media (max-width: 40rem) {
    site-footer { grid-template-columns: 1fr; grid-template-areas: "funding" "copy" "legal"; gap: var(--space-m); }
  }

  /* Full-bleed photo at the top of the home page */
  hero-banner {
    & img {
      inline-size: 100%;
      block-size: clamp(16rem, 55vw, 34rem);
      object-fit: cover;
      object-position: center 60%;
    }
  }

  /* Funding acknowledgement: logos and one line of small text */
  funding-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-m);
    padding-block-end: var(--space-m);
    border-block-end: 1px solid var(--line);
    & ul { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
    & img { block-size: 2.75rem; inline-size: auto; }
  }

  /* Text beside a photo: <text-photo><section>…</section><figure>…</figure></text-photo>.
     Stacks in a narrow container, photo first. */
  text-photo {
    display: grid;
    gap: var(--space-m) var(--space-l);
    align-items: start;
    grid-template-areas: "photo" "text";
    &.text-first { grid-template-areas: "text" "photo"; }
    & > section { grid-area: text; }
    & > figure { grid-area: photo; }
    & img { inline-size: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; }
    & figcaption { font-size: var(--step--1); color: var(--muted); margin-block-start: 0.5rem; }
  }
  @container page (min-width: 46rem) {
    text-photo {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "text photo";
      &.photo-first { grid-template-areas: "photo text"; }
      &.text-first { grid-template-areas: "text photo"; }
    }
  }

  /* A wide photo at the top of a page */
  figure.banner {
    & img { inline-size: 100%; aspect-ratio: 21 / 8; object-fit: cover; border-radius: 3px; }
    & figcaption { font-size: var(--step--1); color: var(--muted); margin-block-start: 0.5rem; }
  }

  /* The location map: inline SVG generated by tools/map.py */
  figure.map {
    --map-sea: #dbe6ec;
    --map-land: #f3f3f1;
    --map-shore: #b9c3c6;
    --map-water-ink: #5a7a8a;
    --map-main-road: #f1ac40;
    max-inline-size: 600px;
    & svg { inline-size: 100%; block-size: auto; border-radius: 3px; border: 1px solid var(--line); }
    & figcaption { font-size: var(--step--1); color: var(--muted); margin-block-start: 0.5rem; }
    & .sea { fill: var(--map-sea); }
    & .land { fill: var(--map-land); stroke: var(--map-shore); stroke-width: 1; }
    & .road path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
    & .road.side path { stroke: var(--paper); stroke-width: 2.5; }
    & .road.side .casing path { stroke: var(--map-shore); stroke-width: 4; }
    & .road.main path { stroke: var(--map-main-road); stroke-width: 3.5; }
    & .road.main .casing { stroke: color-mix(in oklab, var(--map-main-road) 75%, var(--ink)); stroke-width: 5; }
    & .ferry circle { fill: var(--map-water-ink); stroke: var(--paper); stroke-width: 1.5; }
    & .ferry text { font-size: 13px; fill: var(--map-water-ink); }
    & text { font-family: var(--font-body); font-size: 15px; fill: var(--ink); }
    & .island { font-family: var(--font-display); font-size: 20px; fill: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }
    & .water { font-size: 14px; font-style: italic; fill: var(--map-water-ink); }
    & .marker circle { fill: var(--green); fill-opacity: 0.5; }
    & .marker .dot { fill-opacity: 1; stroke: var(--paper); stroke-width: 1.5; }
    & .scale path { stroke: var(--muted); stroke-width: 1.5; fill: none; }
    & .scale text, & .credit { font-size: 11px; fill: var(--muted); }
  }
  ul.map-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
    & li::before { content: "↗ "; color: var(--muted); }
  }

  /* Gallery */
  photo-grid {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    & figure { display: grid; gap: 0.5rem; }
    & img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
    & figcaption { font-size: var(--step--1); color: var(--muted); }
  }

  /* A section heading with an introduction */
  page-intro {
    display: grid;
    gap: var(--space-s);
    & p { font-size: var(--step-1); color: var(--muted); }
  }

  /* Button-like link */
  call-to-action {
    & a {
      display: inline-block;
      font-family: var(--font-display);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      background: var(--green);
      color: var(--paper);
      text-decoration: none;
      padding: 0.8em 1.6em;
      border-radius: 3px;
      &:hover { background: var(--green-hover); color: var(--paper); }
    }
  }

  /* Entries: amenities, events, things to do */
  article.entry {
    & h2 { font-size: var(--step-1); }
    & .where, & .when {
      font-size: var(--step--1);
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      font-family: var(--font-display);
    }
  }

  /* Prices table */
  table.prices {
    inline-size: min(100%, 36rem);
    & th, & td { text-align: start; padding: 0.5em 0; border-block-end: 1px solid var(--line); }
    & th { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--step--1); color: var(--muted); }
    & td:last-child, & th:last-child { text-align: end; }
  }

  /* Contact details */
  address.contact {
    & a { display: inline-block; }
  }
}

@layer pages {
  /* Home: the hero runs edge to edge, flush under the header. */
  main.home { padding-block-start: 0; }
}