/*
 * The row at the top of every page (the name, Home, Downloads, Buy and Contact, and the language switch), the "Skip to
 * content" link before it, and the footer at the foot of every page: LacreDoc's look.
 * Markup: src/chrome/header.mjs and src/chrome/footer.mjs. Behaviour: header.js, which only flips aria-expanded on the
 * buttons (the phone's menu button and the language switch's); everything that opens or closes is decided here.
 *
 * Every class and custom property starts with sd-, and every rule is two classes deep (.sd-head .sd-x), so a page's own
 * styles never reach the row or the footer by accident; both start from `all: initial` and set their own font.
 */

/* Inter, served from this site (public/fonts), so no page asks another company
   for a font. Latin and Latin Extended, weights 400/500/600: all the site
   writes, in the ranges @fontsource/inter gives each file. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* The row's height, width and side padding, on every page. Named on :root, not on the row, so that the page's
   scroll-padding-top (global.css) can read the height. On a phone the row is shorter. */
:root {
  --sd-row-height: 72px;
  --sd-gutter:     clamp(1rem, 4vw, 2.5rem);
  --sd-page:       1120px;
  /* Every page of the site is dark: scrollbars and form controls are drawn dark too. */
  color-scheme: light;
}
/* A phone, and a phone on its side. */
@media (max-width: 640px), (max-height: 480px) {
  :root { --sd-row-height: 58px; }
}

.sd-skip,
.sd-head,
.sd-foot {
  /* The site's colours and corner: global.css's (--ink for --sd-ink, and so on), repeated so that the row and the
     footer stand on their own; a test holds the two equal. */
  --sd-ink:        #fbfaf7;
  --sd-ink-2:      #ffffff;
  --sd-ink-3:      #f2f0ea;
  --sd-line:       #e2ded5;
  --sd-text:       #17191d;
  --sd-text-dim:   #4a505b;
  --sd-text-faint: #646b77;
  /* LacreDoc's blue (the app icon's, lightened so that it reads on the dark ground). */
  --sd-accent:     #1a62d6;
  --sd-radius:     10px;
  --sd-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sd-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
}

/* ── Skip to content: the page's first link, out of sight until it has the keyboard ── */
/* It jumps past the row to the page's <main id="content">; html's scroll-padding-top keeps what it lands on clear of
   the sticky row. Over the row while it shows. */
.sd-skip {
  all: initial;
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 60;
  box-sizing: border-box;
  padding: 0.7rem 1.1rem;
  border-radius: 8px;
  background: var(--sd-accent);
  color: var(--sd-ink);
  font: 600 0.95rem/1.2 var(--sd-sans);
  cursor: pointer;
  transform: translateY(-200%);
}
.sd-skip:focus {
  transform: none;
  outline: 2px solid var(--sd-text);
  outline-offset: 2px;
}

.sd-head {
  all: initial;
  position: sticky;
  top: 0;
  /* Over everything a page sticks or floats. */
  z-index: 50;
  display: block;
  box-sizing: border-box;
  height: var(--sd-row-height);
  background: color-mix(in srgb, var(--sd-ink) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sd-line);
  color: var(--sd-text);
  font: 400 16px/1.4 var(--sd-sans);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

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

.sd-head :focus-visible {
  outline: 2px solid var(--sd-accent);
  outline-offset: 2px;
}
/* The links fill the row from top to bottom, so a ring drawn outside them would
   be cut off at the top of the window; draw theirs just inside. */
.sd-head .sd-link:focus-visible {
  outline-offset: -4px;
  border-radius: 8px;
}
.sd-head .sd-brand:focus-visible {
  border-radius: 6px;
}

/* ── The bar: the name at the left, the menu at the right ─────────────── */
.sd-head .sd-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--sd-page);
  height: 100%;
  margin: 0 auto;
  padding: 0 var(--sd-gutter);
}

.sd-head .sd-brand {
  flex: none;
  color: var(--sd-text);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  text-decoration: none;
  white-space: nowrap;
}
/* "Lacre" bright, "Doc" quiet. */
.sd-head .sd-brand-second {
  color: var(--sd-text-faint);
  font-weight: 400;
}

.sd-head .sd-nav {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  margin: 0 0 0 auto;
}
.sd-head .sd-nav-list {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sd-head .sd-nav-list > li {
  display: flex;
  margin: 0;
  padding: 0;
}

/* The links and the language button look the same, though one is a button. */
.sd-head .sd-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 100%;
  margin: 0;
  padding: 0 0.9rem;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--sd-text-dim);
  font: 500 1rem/1.2 var(--sd-sans);
  letter-spacing: normal;
  text-decoration: none;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}
.sd-head .sd-link:hover,
.sd-head .sd-trigger[aria-expanded='true'] {
  color: var(--sd-text);
  text-decoration: none;
}
/* The page you are on has a bar of LacreDoc's blue along the row's foot. */
.sd-head .sd-link[aria-current='page'],
.sd-head .sd-link.sd-here {
  color: var(--sd-text);
}
.sd-head .sd-link[aria-current='page']::after,
.sd-head .sd-link.sd-here::after {
  content: '';
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0;
  height: 2px;
  background: var(--sd-accent);
}

.sd-head .sd-chevron {
  flex: none;
  transition: transform 120ms ease;
}
.sd-head .sd-trigger[aria-expanded='true'] .sd-chevron {
  transform: rotate(180deg);
}

/* ── The language switch: after Contact, past a thin rule ── */
/* Only where the build makes more than one language (header.mjs). Its button is an sd-link and an sd-trigger: the
   page's flag and its language's code, and the chevron. Its panel hangs from it, the last thing in the row, so it never
   runs off the right of the page. */
.sd-head .sd-langs {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
  margin: 0 0 0 0.6rem;
  padding: 0 0 0 0.6rem;
}
.sd-head .sd-langs::before {
  content: '';
  position: absolute;
  left: 0;
  top: 30%;
  bottom: 30%;
  width: 1px;
  background: var(--sd-line);
}
/* A flag (chrome/flags/, drawn for the site): 12 px tall, its width from its own proportions, whatever a page's own
   stylesheet says of pictures. Square-cornered, as a flag is; its hairline edge is in the drawing. */
.sd-head .sd-flag {
  display: block;
  flex: none;
  width: auto;
  height: 12px;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
}
/* Between a phone and a wide window the row is narrow for the switch beside the name and the menu: a smaller name and
   closer items there, only on a page that has the switch. */
@media (min-width: 641px) and (max-width: 900px) {
  .sd-head:has(.sd-langs) .sd-brand {
    font-size: 1.45rem;
  }
  .sd-head:has(.sd-langs) .sd-bar {
    gap: 1rem;
  }
  .sd-head:has(.sd-langs) .sd-link {
    padding: 0 0.5rem;
  }
  .sd-head:has(.sd-langs) .sd-link[aria-current='page']::after,
  .sd-head:has(.sd-langs) .sd-link.sd-here::after {
    left: 0.5rem;
    right: 0.5rem;
  }
}

/* ── A panel under its button: the language list ───────────────────────── */
.sd-head .sd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  /* Hangs from the button's right edge, so it runs back over the row and never
     off the right of the page. */
  right: 0;
  width: min(25rem, calc(100vw - 2 * var(--sd-gutter)));
  /* A phone on its side is 360 to 390 px tall, and the panel about 340: it scrolls inside the window rather than
     running off its foot, where nothing could reach it. */
  max-height: calc(100vh - var(--sd-row-height) - 1rem);
  max-height: calc(100dvh - var(--sd-row-height) - 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.4rem;
  background: var(--sd-ink-2);
  border: 1px solid var(--sd-line);
  border-radius: var(--sd-radius);
  box-shadow: 0 22px 60px -20px rgb(23 25 29 / 0.22);
}
.sd-head .sd-trigger[aria-expanded='true'] + .sd-panel {
  display: block;
}
.sd-head .sd-panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sd-head .sd-panel-list > li {
  margin: 0;
  padding: 0;
}

/* ── The language switch's panel, as wide as its rows ── */
/* A row for each language, its flag and its own name, the page's own lit. The flags sit in a column as wide as the
   widest, the Union Jack, each at its left, so that the names line up. */
.sd-head .sd-lang-panel {
  width: max-content;
  min-width: 12rem;
  max-width: calc(100vw - 2 * var(--sd-gutter));
}
.sd-head .sd-lang {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  border-radius: 7px;
  color: var(--sd-text);
  font: 500 0.97rem/1.3 var(--sd-sans);
  text-decoration: none;
  white-space: nowrap;
}
.sd-head .sd-lang:hover,
.sd-head .sd-lang:focus-visible,
.sd-head .sd-lang[aria-current] {
  background: var(--sd-ink-3);
  text-decoration: none;
}
.sd-head .sd-lang .sd-flag {
  width: 24px;
  object-fit: contain;
  object-position: left center;
}

/* ── The menu button: a phone only ────────────────────────────────────── */
.sd-head .sd-menu-button {
  display: none;
  align-items: center;
  gap: 0.6rem;
  min-width: 44px;
  min-height: 44px;
  margin: 0 0 0 auto;
  padding: 0 0.9rem;
  background: none;
  border: 1px solid var(--sd-line);
  border-radius: 8px;
  color: var(--sd-text);
  font: 500 0.95rem/1 var(--sd-sans);
  cursor: pointer;
}
.sd-head .sd-menu-button[aria-expanded='true'] {
  background: var(--sd-ink-3);
}
/* Three bars that become a cross while the menu is open. */
.sd-head .sd-menu-icon,
.sd-head .sd-menu-icon::before,
.sd-head .sd-menu-icon::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.sd-head .sd-menu-icon {
  position: relative;
}
.sd-head .sd-menu-icon::before,
.sd-head .sd-menu-icon::after {
  content: '';
  position: absolute;
  left: 0;
}
.sd-head .sd-menu-icon::before { top: -5px; }
.sd-head .sd-menu-icon::after  { top: 5px; }
.sd-head .sd-menu-button[aria-expanded='true'] .sd-menu-icon {
  background: transparent;
}
.sd-head .sd-menu-button[aria-expanded='true'] .sd-menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.sd-head .sd-menu-button[aria-expanded='true'] .sd-menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ── A phone: the name and a menu button; the items open under the row ── */
@media (max-width: 640px) {
  .sd-head .sd-bar {
    gap: 1rem;
  }
  /* Large, but never so large that the name and the button stop fitting side by
     side at 320 px, the narrowest phone. */
  .sd-head .sd-brand {
    font-size: clamp(1.3rem, 5.6vw, 1.4rem);
  }
  .sd-head .sd-menu-button {
    display: inline-flex;
  }

  /* Fixed to the foot of the row and the width of the screen, not to the button.
     Closed, it is not there. */
  .sd-head .sd-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.4rem var(--sd-gutter) 0.8rem;
    /* A phone on its side scrolls the menu and not the page behind it. */
    max-height: calc(100vh - var(--sd-row-height));
    max-height: calc(100dvh - var(--sd-row-height));
    overflow-y: auto;
    background: var(--sd-ink-2);
    border-bottom: 1px solid var(--sd-line);
    box-shadow: 0 22px 40px -20px rgb(23 25 29 / 0.22);
  }
  .sd-head .sd-menu-button[aria-expanded='true'] ~ .sd-nav {
    display: block;
  }
  /* The switch under the menu's items, past a rule: its button a row of the menu, and its list opening under it, in
     the menu, a thumb's height to each language. */
  .sd-head .sd-langs {
    display: block;
    height: auto;
    margin: 0.4rem 0 0;
    padding: 0.4rem 0 0;
    border-top: 1px solid var(--sd-line);
  }
  .sd-head .sd-langs::before {
    display: none;
  }
  .sd-head .sd-lang-panel {
    min-width: 0;
    max-width: none;
  }
  .sd-head .sd-lang {
    min-height: 48px;
    padding: 0 0.2rem;
    font-size: 1.05rem;
  }

  .sd-head .sd-nav-list {
    display: block;
    height: auto;
  }
  .sd-head .sd-nav-list > li {
    display: block;
  }
  .sd-head .sd-link {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 48px;
    padding: 0.75rem 0;
    font-size: 1.05rem;
  }
  /* The page you are on: a short bar at the left edge, not a line under a word. */
  .sd-head .sd-link[aria-current='page']::after,
  .sd-head .sd-link.sd-here::after {
    top: 22%;
    bottom: 22%;
    left: calc(-1 * var(--sd-gutter));
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 0 2px 2px 0;
  }

  /* The languages open in the menu, under their button, and not as a sheet. */
  .sd-head .sd-panel {
    position: static;
    width: auto;
    /* Part of the menu here, which scrolls the whole list. */
    max-height: none;
    overflow: visible;
    padding: 0 0 0.4rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ── Without JavaScript ─────────────────────────────────────────────────── */
/* The language switch's button and the phone's menu button are worked by header.js. Without it, the languages open
   under the pointer or the keyboard instead, */
@media (scripting: none) {
  .sd-head .sd-langs:hover .sd-panel,
  .sd-head .sd-langs:focus-within .sd-panel {
    display: block;
  }
}
/* and a phone shows the menu open under the name, the languages listed in it, in a row that scrolls away with the page
   (it is too tall to stick). */
@media (max-width: 640px) and (scripting: none) {
  :root { --sd-row-height: 0px; }
  .sd-head {
    position: static;
    height: auto;
  }
  .sd-head .sd-bar {
    flex-wrap: wrap;
    height: auto;
    padding-block: 0.9rem 0.3rem;
  }
  .sd-head .sd-menu-button {
    display: none;
  }
  .sd-head .sd-nav {
    display: block;
    position: static;
    flex-basis: 100%;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .sd-head .sd-trigger {
    display: none;
  }
  .sd-head .sd-panel {
    display: block;
  }
}

/* ── The footer, at the foot of every page ─────────────────────────────── */
/* Three columns (src/chrome/footer.mjs): LacreDoc's name, its line and the contact address; LacreDoc's pages; the pages
   about the site. Under a hairline, the © line and the trademark line, smaller and quieter. It starts from nothing, as
   the row does, every rule in it is two classes deep, and each of its paragraphs sets its own margin and width. */
.sd-foot {
  all: initial;
  display: block;
  box-sizing: border-box;
  padding: 3.5rem 0 2.75rem;
  border-top: 1px solid var(--sd-line);
  color: var(--sd-text-faint);
  font: 400 0.9rem/1.65 var(--sd-sans);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
.sd-foot *,
.sd-foot *::before,
.sd-foot *::after {
  box-sizing: border-box;
}
.sd-foot .sd-foot-inner {
  max-width: var(--sd-page);
  margin: 0 auto;
  padding: 0 var(--sd-gutter);
}
/* A phone first: the name's block across the width, and the two lists side by side under it. From 760 px the three
   are columns, the name's the widest. */
.sd-foot .sd-foot-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.25rem 1.5rem;
}
.sd-foot .sd-foot-brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* The name as the row draws it (.sd-head .sd-brand), smaller: "Lacre" bright, "Doc" quiet. */
.sd-foot .sd-foot-name {
  margin: 0 0 0.7rem;
  max-width: none;
  color: var(--sd-text);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.sd-foot .sd-foot-name-second {
  color: var(--sd-text-faint);
  font-weight: 400;
}
/* The name's words with their space, for a screen reader, out of sight. */
.sd-foot .sd-foot-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sd-foot .sd-foot-line {
  margin: 0 0 0.85rem;
  max-width: none;
  color: var(--sd-text-dim);
  font-size: 0.95rem;
  line-height: 1.5;
}
.sd-foot .sd-foot-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.sd-foot .sd-foot-title {
  margin-bottom: 0.15rem;
  color: var(--sd-text);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sd-foot .sd-foot-link {
  color: var(--sd-text-dim);
  text-decoration: none;
}
.sd-foot .sd-foot-link:hover {
  color: var(--sd-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sd-foot .sd-foot-link:focus-visible {
  outline: 2px solid var(--sd-accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Under the columns, after a hairline: the © line, then the trademark lines, smaller and quieter, one line each where
   the page is wide enough (so not held to a reading measure), a little apart where they wrap. */
.sd-foot .sd-foot-base {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sd-line);
}
.sd-foot .sd-foot-copy {
  margin: 0;
  max-width: none;
  color: var(--sd-text-dim);
  font-size: 0.85rem;
  line-height: 1.5;
}
.sd-foot .sd-foot-fine {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--sd-text-faint);
  font-size: 0.75rem;
  line-height: 1.5;
}
.sd-foot .sd-foot-note {
  margin: 0;
  max-width: none;
}
@media (min-width: 760px) {
  .sd-foot .sd-foot-cols {
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
    gap: 2rem 3rem;
  }
  .sd-foot .sd-foot-brand {
    grid-column: auto;
  }
}
/* A thumb needs 44 px: on a phone each link is that tall (0.65rem above and below a 0.9rem line at 1.65), and the
   column's gap goes. */
@media (max-width: 640px) {
  .sd-foot .sd-foot-col {
    gap: 0;
  }
  .sd-foot .sd-foot-title {
    margin-bottom: 0.25rem;
  }
  .sd-foot .sd-foot-link {
    display: block;
    padding-block: 0.65rem;
  }
  .sd-foot .sd-foot-line {
    margin-bottom: 0.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sd-head .sd-chevron {
    transition: none;
  }
}