/* Quantolio site chrome, written from scratch for this site.
   Page scaffolding, the skip link, the shared sticky header, its desktop
   menu with the Products dropdown, and the mobile navigation drawer.
   Works together with quantolio-chrome.js and the header fragment in
   src/content/site-header.html. */

/* ------------------------------------------------------------------ */
/* Palette (the store's configured colors)                            */
/* ------------------------------------------------------------------ */

:root {
  --qc-page: #f9f9f9;
  --qc-ink: #273a42;
  --qc-bar: #ffffff;
  --qc-line: rgba(39, 58, 66, 0.1);
  --qc-accent: #1e98d5;
}

[data-scheme="dark"] {
  --qc-page: #1f1f1f;
  --qc-ink: #fafafa;
  --qc-bar: #232323;
  --qc-line: rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------------------ */
/* Page scaffolding                                                    */
/* ------------------------------------------------------------------ */

html {
  box-sizing: border-box;
  font-size: 10px; /* every page sizes itself in rem against a 10px root */
  height: 100%;
}

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

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  margin: 0;
  background: var(--qc-page);
  color: var(--qc-ink);
  font-family: "DM Sans", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  /* Clip sideways overflow without creating a scroll container, so the
     sticky header keeps working; older engines fall back to hidden. */
  overflow-x: hidden;
  overflow-x: clip;
}

#MainContent {
  flex-grow: 1;
}

#MainContent:focus {
  outline: none;
}

/* While the drawer is open the page behind it must not scroll. */
body.qh-scroll-lock {
  overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Skip link                                                           */
/* ------------------------------------------------------------------ */

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

.skip-to-content-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: auto;
  height: auto;
  margin: 0;
  padding: 1.2rem 2rem;
  clip: auto;
  clip-path: none;
  overflow: visible;
  white-space: normal;
  background: var(--qc-bar);
  color: var(--qc-ink);
  font-size: 1.4rem;
  text-decoration: none;
  outline: 0.2rem solid var(--qc-accent);
  outline-offset: -0.2rem;
}

/* ------------------------------------------------------------------ */
/* Header bar                                                          */
/* ------------------------------------------------------------------ */

/* The outer fragment wrapper is the sticky element: an inner element
   could never stick because its parent is exactly as tall as the bar. */
#site-header {
  position: sticky;
  top: 0;
  z-index: 150;
}

sticky-header {
  display: block;
}

.qh-bar {
  background: var(--qc-bar);
  color: var(--qc-ink);
  /* Drawn as a shadow so the hairline adds no layout height. */
  box-shadow: 0 1px 0 var(--qc-line);
}

.qh-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 5.8rem;
  padding: 0.4rem 1.6rem;
}

@media screen and (min-width: 1100px) {
  .qh-row {
    min-height: 6.8rem;
    padding: 0.4rem 5rem;
  }
}

.qh-logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.header__heading-logo {
  display: block;
  width: 100%;
  height: auto;
}

.header__heading-logo--overlay {
  display: none;
}

/* The dark scheme swaps in the light-text logo. */
[data-scheme="dark"] .header__heading-logo {
  display: none;
}

[data-scheme="dark"] .header__heading-logo--overlay {
  display: block;
}

/* Right-side icon cluster: desktop only; the drawer carries its own. */
.qh-tools {
  display: none;
  margin-left: auto;
}

@media screen and (min-width: 1100px) {
  .qh-tools {
    display: flex;
    align-items: center;
  }
}

.header__toggle-scheme {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--qc-ink);
  cursor: pointer;
  transition: color 0.25s;
}

.header__toggle-scheme:hover,
.header__toggle-scheme:focus-visible {
  color: var(--qc-accent);
}

.header__toggle-scheme:focus-visible,
.qh-burger:focus-visible,
.qh-menu a:focus-visible,
.qh-drawer-nav a:focus-visible {
  outline: 0.2rem solid var(--qc-accent);
  outline-offset: 0.2rem;
}

/* ------------------------------------------------------------------ */
/* Desktop inline menu                                                 */
/* ------------------------------------------------------------------ */

.header__inline-menu {
  display: none;
}

@media screen and (min-width: 1100px) {
  .header__inline-menu {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .qh-menu {
    display: flex;
    align-items: center;
    gap: 8rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .qh-menu > li {
    position: relative;
  }

  .qh-menu a {
    display: inline-block;
    padding: 1.2rem 0;
    color: var(--qc-ink);
    font-family: "Roboto Mono", monospace;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.5;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.25s;
  }

  .qh-menu a:hover,
  .qh-menu a:focus-visible {
    color: var(--qc-accent);
  }

  /* Products dropdown */
  .qh-sub {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 20rem;
    margin: 0;
    padding: 1.6rem 0;
    list-style: none;
    background: var(--qc-bar);
    background-clip: padding-box;
    border: 1px solid var(--qc-line);
    border-top: 0.4rem solid transparent; /* hover bridge to the link above */
    border-radius: 0.6rem;
    box-shadow: 0 0.2rem 2rem rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
  }

  .qh-has-sub:hover .qh-sub,
  .qh-has-sub:focus-within .qh-sub {
    opacity: 1;
    visibility: visible;
  }

  .qh-sub a {
    display: block;
    padding: 0.8rem 2.4rem;
    white-space: nowrap;
  }
}

/* ------------------------------------------------------------------ */
/* Mobile drawer                                                       */
/* ------------------------------------------------------------------ */

header-drawer {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

@media screen and (min-width: 1100px) {
  header-drawer {
    display: none;
  }
}

.qh-burger {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--qc-ink);
  cursor: pointer;
}

.qh-burger .qh-icon-close {
  display: none;
}

header-drawer.qh-open .qh-icon-menu {
  display: none;
}

header-drawer.qh-open .qh-icon-close {
  display: block;
}

/* Full-height panel sliding in from the left, below the header bar. */
.qh-drawer {
  position: fixed;
  top: var(--header-height, 5.8rem);
  bottom: 0;
  left: 0;
  z-index: 140;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--qc-bar);
  overflow-y: auto;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s;
}

header-drawer.qh-open .qh-drawer {
  transform: translateX(0);
  visibility: visible;
}

.qh-drawer-nav ul {
  margin: 0;
  padding: 1.6rem 0;
  list-style: none;
}

.qh-drawer-nav a {
  display: block;
  padding: 1.3rem 2.4rem;
  color: var(--qc-ink);
  font-size: 2rem;
  text-decoration: none;
  transition: color 0.25s;
}

.qh-drawer-nav a:hover {
  color: var(--qc-accent);
}

.qh-drawer-sub a {
  padding-left: 4.4rem;
  font-size: 1.7rem;
}

.qh-drawer-foot {
  margin-top: auto;
  padding: 1.6rem 2.4rem;
  border-top: 1px solid var(--qc-line);
}