/* header.css — the site's header: its name, its menu, and a signed-in
   admin's account menu, with the colours and type they're drawn in.
   Every page has it, the admin screens too, so it's a file of its own,
   loaded by site.html after site.css (so these rules win their ties
   with the page's) and by layout.html after rastrillo's tokens. Selectors are the header's own, so on the admin
   screens it restyles nothing else. */

/* ── properties.css ── */
:root {
  --font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  --font-family-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;;
  --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
}

:root {

  /* Brand colors */
  --brand-yellow: #e1ce5c;
  --brand-blue: #4daeea;
  --brand-red: #e65454;

  /* Palettes */
  --gray-5: color-mix(in oklch, black 5%, white);
  --gray-10: color-mix(in oklch, black 10%, white);
  --gray-20: color-mix(in oklch, black 20%, white);
  --gray-30: color-mix(in oklch, black 30%, white);
  --gray-40: color-mix(in oklch, black 40%, white);
  --gray-50: color-mix(in oklch, black 50%, white);
  --gray-60: color-mix(in oklch, black 60%, white);
  --gray-70: color-mix(in oklch, black 70%, white);
  --gray-80: color-mix(in oklch, black 80%, white);  
  --gray-90: color-mix(in oklch, black 90%, white);  
  --gray-95: color-mix(in oklch, black 95%, white);

  --yellow-10: color-mix(in oklch, var(--brand-yellow)  20%, white);
  --yellow-20: color-mix(in oklch, var(--brand-yellow)  40%, white);
  --yellow-30: color-mix(in oklch, var(--brand-yellow)  60%, white);
  --yellow-40: color-mix(in oklch, var(--brand-yellow)  80%, white);
  --yellow-50: color-mix(in oklch, var(--brand-yellow) 100%, white);
  --yellow-60: color-mix(in oklch, var(--brand-yellow)  80%, black);
  --yellow-70: color-mix(in oklch, var(--brand-yellow)  60%, black);
  --yellow-80: color-mix(in oklch, var(--brand-yellow)  40%, black);
  --yellow-90: color-mix(in oklch, var(--brand-yellow)  20%, black);

  --blue-10: color-mix(in oklch, var(--brand-blue)  20%, white);
  --blue-20: color-mix(in oklch, var(--brand-blue)  40%, white);
  --blue-30: color-mix(in oklch, var(--brand-blue)  60%, white);
  --blue-40: color-mix(in oklch, var(--brand-blue)  80%, white);
  --blue-50: color-mix(in oklch, var(--brand-blue) 100%, white);
  --blue-60: color-mix(in oklch, var(--brand-blue)  80%, black);
  --blue-70: color-mix(in oklch, var(--brand-blue)  60%, black);
  --blue-80: color-mix(in oklch, var(--brand-blue)  40%, black);
  --blue-90: color-mix(in oklch, var(--brand-blue)  20%, black);

  --red-10: color-mix(in oklch, var(--brand-red)  20%, white);
  --red-20: color-mix(in oklch, var(--brand-red)  40%, white);
  --red-30: color-mix(in oklch, var(--brand-red)  60%, white);
  --red-40: color-mix(in oklch, var(--brand-red)  80%, white);
  --red-50: color-mix(in oklch, var(--brand-red) 100%, white);
  --red-60: color-mix(in oklch, var(--brand-red)  80%, black);
  --red-70: color-mix(in oklch, var(--brand-red)  60%, black);
  --red-80: color-mix(in oklch, var(--brand-red)  40%, black);
  --red-90: color-mix(in oklch, var(--brand-red)  20%, black);

  --subtle-border: 1px solid var(--gray-5);
  --background-sea: #c5e1f4;
  /* Darkened to 55% so a link reads at WCAG AA (4.5:1) on every light
     background it sits on: white, sand, the grey cards and the sea. */
  --text-color-link: color-mix(in srgb, var(--brand-blue) 55%, black);

  --background-color: var(--gray-5);
  --background-highlight: var(--yellow-50);
  /* The sand-tinted band behind highlighted sections and the map key. */
  --background-color-highlight: var(--yellow-10);
  --outline-highlight: var(--yellow-70);
  --color-highlight: black;

  --marker-blue: var(--blue-70);
  --marker-red: var(--red-60);

  @supports (color: light-dark(black, white)) {
    --background-color: light-dark(white, var(--gray-95));
    --text-color: light-dark(black, white);
    --text-color-link: light-dark(color-mix(in srgb, var(--brand-blue) 55%, black), color-mix(in srgb, var(--brand-blue) 80%, white));
    --subtle-border: 1px solid light-dark(var(--gray-10), var(--gray-80));
    --background-color-highlight: light-dark(color-mix(in oklch, var(--brand-yellow) 14%, white), color-mix(in oklch, var(--brand-yellow) 10%, var(--gray-95)));
    /* The dark yellow ring vanishes on a dark page; the brand yellow doesn't. */
    --outline-highlight: light-dark(var(--yellow-70), var(--brand-yellow));
    /* Dark mode darkens the sea too, or the page's white text sits on
       pale blue there. */
    --background-sea: light-dark(#c5e1f4, color-mix(in oklch, var(--brand-blue) 30%, var(--gray-95)));
  }
}


/* The menu's tray and its pills, set on the sea. Each has a dark value
   too, so text on the tray still reads at 4.5:1 and the tray still
   stands off the darker sea. */
:root {
  --menu-tray: var(--blue-10);
  --menu-tray-border: var(--blue-30);
  --menu-pill-hover: white;

  @supports (color: light-dark(black, white)) {
    --menu-tray: light-dark(var(--blue-10), color-mix(in oklch, var(--brand-blue) 45%, var(--gray-95)));
    --menu-tray-border: light-dark(var(--blue-30), color-mix(in oklch, var(--brand-blue) 60%, var(--gray-95)));
    --menu-pill-hover: light-dark(white, var(--gray-95));
  }
}

/* The header is a band of sea, and carries its own type and colours,
   so it looks the same over rastrillo's admin screens as over the
   website. */
.site-header {
  background-color: var(--background-sea);
  color: var(--text-color);
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;

  .visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }
}

/* ── nav.css ── */
:root {
  --hamburger-slice-color: var(--text-color);
  --hamburger-size: clamp(16px, 10vmin, 32px); /* Sensible value */

  /* --hamburger-size: 200px; /* 👈 A value to show that the math is correct */
}

#navigation {
  z-index: 1000;
}
#hamburger-toggle {
  opacity: 0;
  cursor: pointer;
  position: absolute;
}
#hamburger {
  display: block;
  cursor: pointer;
  width: var(--hamburger-size);
  height: var(--hamburger-size);
  box-sizing: content-box;
}
#hamburger .slice {
  --slice-height: 2px;
  display: block;
  position: relative;
  width: 100%;
  height: var(--slice-height, 2px);
  border-radius: var(--slice-height);
  transition: all 0.1s ease;
  background-color: var(--hamburger-slice-color);
  opacity: 90%;
}
#hamburger .slice {
  margin-top: 22%; /* Fallback to produce something hamburger-ish if calc is not available */
  margin-top: calc(33% - var(--slice-height));
  top: calc((33% - var(--slice-height)) / -2);
}

#hamburger-toggle:focus-visible ~ #hamburger {
  outline: 3px solid var(--outline-highlight);
  outline-offset: 4px;
}

#hamburger-toggle:checked ~ .menu-panel {
  visibility: visible;
}
#hamburger-toggle:checked ~ #hamburger .slice:nth-child(1) {
  top: calc(50% - 33% + var(--slice-height) / 2);
  transform: rotate(45deg);
}
#hamburger-toggle:checked ~ #hamburger .slice:nth-child(2) {
  opacity: 0;
}
#hamburger-toggle:checked ~ #hamburger .slice:nth-child(3) {
  top: calc(-50% + var(--slice-height) / 2);
  transform: rotate(-45deg);
}

body:has(#hamburger-toggle:checked) {
  main {
    opacity: 0.25;
  }
}

/* On a phone: the name on the left, the hamburger (and a signed-in
   admin's account icon) on the right. */
.site-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-block: 0.625rem;
  position: relative;

  /* The wordmark: the ribs from the logo, then "Tasso" in bold and the
     rest in regular weight. The mark is sized in em so it scales with
     the words. On a phone the name may wrap, so the mark is centred
     beside it; wide, it sits on the one line's baseline. */
  .site-name {
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.1;
    margin: 0;
    padding: 0 0.5rem 0 1rem;
  }

  /* Where the name has to wrap (a narrow phone, with the account icon
     beside the hamburger), even lines rather than a word left hanging. */
  .site-name span {
    text-wrap: balance;
  }

  .site-name,
  .site-name a[href] {
    align-items: center;
    color: inherit;
    display: flex;
    gap: 0.33em;
    text-decoration: none;
  }

  .site-name b {
    font-weight: 700;
  }

  .site-mark {
    fill: currentColor;
    flex-shrink: 0;
    height: 1.06em;
    width: 1.67em;
  }

  .hamburger {
    padding: 0.5rem 0.75rem;
  }
}

/* The open menu drops below the band in the same sea: full-width rows,
   then Contact us as the yellow pill. */
.menu-panel {
  background-color: var(--background-sea);
  box-shadow: 0 30px 30px 0 light-dark(rgba(0, 0, 0, 0.05 ), rgba(255, 255, 255, 0.05));
  left: 0;
  padding: 0 0 1rem;
  position: absolute;
  right: 0;
  top: 100%;
  visibility: hidden;
  z-index: 100;
}

.menu {
  margin: 0;
  padding: 0;

  li {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  a[href] {
    color: var(--text-color);
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    text-wrap: nowrap;

    &:hover {
      text-decoration: underline;
    }

    &:focus-visible {
      outline: 3px solid var(--outline-highlight);
      outline-offset: -3px;
    }
  }

  /* In the open menu the current page is underlined in the brand
     blue: a mark that doesn't depend on colour alone. Not bold, which
     would change its width. */
  a[aria-current="page"] {
    text-decoration: underline 2px var(--brand-blue);
  }
}

/* Contact us: the one thing in the header in the action yellow, since
   an enquiry is what the site is for. On the contact page itself it is
   where you are, so it takes the brand blue like any current page. */
.site-header a.menu-contact {
  background-color: var(--background-highlight);
  border-radius: 1.5625rem;
  color: black;
  display: block;
  margin: 0.5rem 1rem 0;
  padding: 0.5625rem 1.25rem;
  text-align: center;
  text-decoration: none;
  text-wrap: nowrap;

  &:hover {
    background-color: var(--yellow-60);
  }

  &[aria-current="page"] {
    background-color: var(--brand-blue);

    &:hover {
      background-color: color-mix(in srgb, var(--brand-blue) 90%, black);
    }
  }

  &:focus-visible {
    outline: 3px solid var(--outline-highlight);
    outline-offset: 2px;
  }
}

/* Wide: everything centred, the wordmark above the menu. The menu is a
   row of pills in a pale tray, with Contact us beside it. */
@media (width > 600px) {
  #hamburger,
  #hamburger-toggle {
    display: none;
  }

  .site-header {
    flex-direction: column;
    gap: 1.125rem;
    padding: 1.625rem 2rem 1.125rem;

    .site-name {
      font-size: 2.25rem;
      padding: 0;
    }

    /* The bottom margin lifts the fan so its foot sits on the words'
       baseline. */
    .site-name,
    .site-name a[href] {
      align-items: flex-end;
    }

    .site-mark {
      margin-bottom: 0.17em;
    }
  }

  .menu-panel {
    align-items: center;
    background: none;
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    justify-content: center;
    padding: 0;
    position: static;
    visibility: visible;
  }

  /* The tray's radius is half one row's height, so one row is a
     capsule and a wrapped tray still looks meant. */
  #menu {
    background-color: var(--menu-tray);
    border: 1px solid var(--menu-tray-border);
    border-radius: 1.5625rem;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: center;
    padding: 4px;
  }

  .menu {
    a[href] {
      border-radius: 999px;
      padding: 0.5rem 1.125rem;

      &:hover {
        background-color: var(--menu-pill-hover);
        text-decoration: none;
      }

      &:focus-visible {
        outline-offset: 2px;
      }
    }

    /* The filled pill is the mark, not colour alone. Not bold, which
       would widen the word and shift the links after it. */
    a[aria-current="page"] {
      background-color: var(--brand-blue);
      color: black;
      text-decoration: none;

      &:hover {
        background-color: color-mix(in srgb, var(--brand-blue) 90%, black);
      }
    }
  }

  .site-header a.menu-contact {
    margin: 0;
  }
}

/* ── account menu ──
   Only there for a signed-in admin: a user icon that opens a small card
   of links. On a phone it sits beside the hamburger; wide, where the
   name and menu are centred, it sits in the band's top right corner. */
.site-header > nav {
  margin-inline-start: auto;
}

@media (width > 600px) {
  .site-header > nav {
    margin-inline-start: 0;
  }

  .site-header > .account-menu {
    position: absolute;
    right: 0.5rem;
    top: 0.75rem;
  }
}

.account-menu {
  position: relative;

  summary {
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    height: 2.5rem;
    justify-content: center;
    list-style: none;
    margin-inline: 0.25rem 0.5rem;
    width: 2.5rem;

    &::-webkit-details-marker {
      display: none;
    }

    &:hover {
      background-color: color-mix(in srgb, var(--background-color) 90%, black);
    }

    &:focus-visible {
      outline: 3px solid var(--outline-highlight);
      outline-offset: 2px;
    }

    .icon {
      height: 1.5rem;
      width: 1.5rem;
    }
  }

  &[open] summary {
    background-color: var(--brand-blue);
    color: black;
  }

  .account-menu-body {
    background-color: var(--background-color);
    border: var(--subtle-border);
    border-radius: 0.5rem;
    box-shadow: 0 10px 30px 0 light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.5));
    min-width: 14rem;
    padding: 0.5rem 0;
    position: absolute;
    right: 0.5rem;
    top: calc(100% + 0.25rem);
    z-index: 1100;
  }

  .account-menu-who {
    border-bottom: var(--subtle-border);
    line-height: 1.4;
    margin: 0 0 0.5rem;
    padding: 0.25rem 1rem 0.75rem;
    overflow-wrap: anywhere;
  }

  .account-menu-email {
    font-size: 0.875rem;
    opacity: 0.8;
  }

  ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  a[href],
  button {
    background: none;
    border: 0;
    color: var(--text-color);
    cursor: pointer;
    display: block;
    font: inherit;
    padding: 0.5rem 1rem;
    text-align: start;
    text-decoration: none;
    width: 100%;

    &:hover {
      background-color: color-mix(in srgb, var(--background-color) 90%, black);
    }

    &:focus-visible {
      outline: 3px solid var(--outline-highlight);
      outline-offset: -3px;
    }
  }

  /* The screen you're on: a bar in the brand blue beside it, not
     colour alone. Not bold, which would change its width. */
  a[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--brand-blue);
  }

  li {
    line-height: 1.5;
    list-style: none;
    margin: 0;
  }

  /* Sign out stands apart from the screens above it. */
  .account-menu-rule {
    border: 0;
    border-top: var(--subtle-border);
    margin: 0.5rem 0;
  }
}

/* ── admin bar ──
   Under the header on the admin screens: each screen the admin can
   reach, and a button to hide it. A band in a wash of the brand blue,
   so it reads as part of the header, not the page. */
.admin-bar {
  align-items: center;
  background-color: light-dark(var(--blue-10), color-mix(in oklch, var(--brand-blue) 18%, var(--gray-95)));
  border-bottom: var(--subtle-border);
  /* A hairline from the sea-blue header above, so the two read as
     separate bands. */
  border-top: var(--subtle-border);
  color: var(--text-color);
  display: flex;
  font-family: var(--font-family);
  font-size: 16px;
  gap: 0.5rem;
  justify-content: space-between;
  line-height: 1.5;
  padding: 0 0.5rem;

  ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  li {
    margin: 0;
  }

  a[href] {
    border-bottom: 3px solid transparent;
    color: var(--text-color);
    display: block;
    padding: 0.55rem 0.5rem 0.4rem;
    text-decoration: none;

    &:hover {
      border-bottom-color: color-mix(in srgb, var(--brand-blue) 50%, transparent);
    }

    &:focus-visible {
      outline: 3px solid var(--outline-highlight);
      outline-offset: -3px;
    }
  }

  /* The screen you're on: underlined in the brand blue, not colour
     alone. Not bold: a bolder word is a wider one, and the links after
     it would shift along as you moved between screens. */
  a[aria-current="page"] {
    border-bottom-color: var(--brand-blue);
  }

  form {
    margin: 0;
  }

  button {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 0.375rem;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    gap: 0.25rem;
    opacity: 0.8;
    padding: 0.35rem 0.5rem;

    &:hover {
      background-color: color-mix(in srgb, var(--text-color) 8%, transparent);
      opacity: 1;
    }

    &:focus-visible {
      outline: 3px solid var(--outline-highlight);
    }

    .icon {
      height: 1.1rem;
      width: 1.1rem;
    }
  }
}

/* On a phone the links take the bar's width and the button keeps to
   its icon; its name is still said in words. */
@media (width < 600px) {
  .admin-bar {
    align-items: start;

    .admin-bar-hide {
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      position: absolute;
      white-space: nowrap;
      width: 1px;
    }

    button {
      margin-top: 0.3rem;
    }
  }
}

/* ── between pages ──
   Moving from page to page, the current page's blue pill glides from
   the link you left to the one you landed on. Only the pill moves: the
   words stay where they are, and the page itself swaps at once, as it
   always has. A cross-document view transition, so no script is needed
   for it; a browser without them, or a reader who prefers less motion,
   just gets the swap. The opt-in and the animation itself are in
   site.css, which only the website's pages load: the admin screens
   wear this header too, but they don't take part (rastrillo's admin
   screens are not built for cross-document transitions, and a page
   only transitions when both it and the next one opt in). This file
   only names the parts. Only wide, where the current page is a pill; the
   phone menu is closed by the time the next page shows.

   The pill is its own element (.menu-mark), placed behind the current
   link, so it can travel alone. Every link, Contact us too, is named
   as well, so it is lifted out of the page during the transition, and
   the links are layered above the pill (z-index on their groups, not
   page order, which differs between pages: on the contact page the
   pill comes after every link), so it never covers a word it passes. static/js/nav-transition.js skips the glide when the pill
   was scrolled out of sight, so it never swoops in from above. */

.menu li,
.menu-contact-wrap {
  position: relative;
}

.menu-contact-wrap {
  display: block;
}

.menu-mark {
  display: none;
}

@media (width > 600px) {
  .menu-mark {
    background-color: var(--brand-blue);
    border-radius: 999px;
    display: block;
    inset: 0;
    position: absolute;
    view-transition-name: nav-current;
  }

  /* The links draw over the pill, and the current one lets it show
     through; its hover darkens the pill by laying a little black over
     it. */
  .menu a[href],
  .site-header a.menu-contact {
    position: relative;
    view-transition-class: nav-link;
  }

  .menu a[aria-current="page"],
  .site-header a.menu-contact[aria-current="page"] {
    background-color: transparent;

    &:hover {
      background-color: rgb(0 0 0 / 0.1);
    }
  }

  .menu li:nth-child(1) > a { view-transition-name: nav-link-1; }
  .menu li:nth-child(2) > a { view-transition-name: nav-link-2; }
  .menu li:nth-child(3) > a { view-transition-name: nav-link-3; }
  .menu li:nth-child(4) > a { view-transition-name: nav-link-4; }
  .menu li:nth-child(5) > a { view-transition-name: nav-link-5; }
  .menu li:nth-child(6) > a { view-transition-name: nav-link-6; }
  .menu li:nth-child(7) > a { view-transition-name: nav-link-7; }
  .menu li:nth-child(8) > a { view-transition-name: nav-link-8; }
  .site-header a.menu-contact { view-transition-name: nav-contact; }
}