/* Project cards (.grid-item) and product cards (.product-card) used the very-faint
   --md-default-fg-color--lightest for their outline, so the squircle ring barely showed in
   either mode. Point them at the search cards' visible tone (--tw-line ~17% fg) so the ring
   reads consistently — corners.js draws the ring from this border colour.
   (.product-card is the store agent's; overridden here in extra.css rather than store.css.) */
.grid-item,
.product-card,
.store-mini-img { border-color: var(--tw-line, var(--md-default-fg-color--lighter)) !important; }

/* Nav close (X) uses the Font Awesome xmark to match the search bar's close; the hamburger stays
   the sharp Material glyph. Hold the X box at the hamburger's 24px so swapping menu<->X never
   resizes the button: a size change there reflows the right cluster and stutters the palette/cart
   on open. Colour is inherited from .close. */
.close { width: 24px; justify-content: center; align-items: center; }
.close i { font-size: 1.05rem; }

/* Match the cart's page overlay to the custom search overlay (.tw-scrim): a plain
   scheme-adaptive dim, no blur. Overrides store.css's color-mix + backdrop blur. */
.cart-scrim { background: rgba(18, 19, 22, 0.46) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
[data-md-color-scheme="slate"] .cart-scrim { background: rgba(0, 0, 0, 0.58) !important; }

/* Store landing title "theodore.net Store": dim the lowercase brand mark to ~80% so it reads as a
   brand mark beside the capitalised "Store". The .brand span is injected at build time by
   hooks/store_title_brand.py (docs/store/index.md is store-agent-owned, so it isn't edited
   directly). Reset the italic that index.css's ".introabt h2 span" rule would otherwise apply. */
.introabt h2 .brand { opacity: 0.65; font-style: normal; }

[data-md-color-scheme="slate"] {
    --md-default-bg-color: hsla(228, 7%, 14%, 1);
    --md-footer-bg-color--dark: hsla(228, 8%, 7%, 0.58);
    --md-footer-bg-color: hsla(220, 7%, 7%, 1);
    --md-code-bg-color: hsla(228, 7%, 12%, 1);
    --md-code-hl-number-color: var(--md-code-fg-color);
    --md-code-hl-special-color: var(--md-code-fg-color);
    --md-code-hl-function-color: var(--md-code-fg-color);
    --md-code-hl-constant-color: var(--md-code-fg-color);
    --md-code-hl-keyword-color: var(--md-code-fg-color);
    --md-code-hl-string-color: var(--md-code-fg-color);
    --md-code-hl-name-color: var(--md-code-fg-color);
    --md-code-hl-operator-color: var(--md-code-fg-color);
    --md-code-hl-punctuation-color: var(--md-code-fg-color);
    --md-code-hl-comment-color: var(--md-default-fg-color--light);
    --md-code-hl-generic-color: var(--md-code-fg-color);
    --md-code-hl-variable-color: var(--md-code-fg-color);
}

/* Lighter, Figma-matching type: grayscale antialiasing instead of the browser's
   default subpixel, which renders type heavier on the web.
   ref: https://santos.fyi/writing/correcting-subpixel-on-web */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Font display optimization for theme/icon fonts */
@font-face {
  font-family: 'Fira Sans';
  font-display: swap;
}

@font-face {
  font-family: 'Ubuntu Mono';
  font-display: swap;
}

@font-face {
  font-family: 'Font Awesome 6 Free';
  font-display: swap;
}

@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-display: swap;
}

@font-face {
  font-family: 'Font Awesome 6 Regular';
  font-display: swap;
}

/* --- Nav menu open: cover the header, don't fade/shift the icons --------------------------------
   The slide-in overlay (.main-navigation) used to sit BEHIND the sticky header (z-index 3 < 4), so
   the logo + right-side icons stayed on top and had to be faded/recoloured to get out of the way —
   which read as a "separate disappearance" and never truly covered them. Raise the overlay ABOVE
   the header so it simply covers them the way it covers the page. The icons then need no fade or
   recolour on open: they stay exactly where they are and the overlay sweeps over them. (Neutralised
   here in one place rather than across every per-page stylesheet that duplicates these toggle
   rules.) */
body .main-navigation {
  z-index: 50;
  /* Opaque cover in the proper FOREGROUND colour: = --md-default-fg-color at full opacity. (The fg
     var carries ~0.13-0.18 alpha; left translucent it lets the icons bleed through, and composited
     over the page it greys out — both wrong. So pin the fg's own colour, solid.) Light = black fg. */
  background-color: #000;
}
body[data-md-color-scheme="slate"] .main-navigation {
  background-color: hsl(225, 15%, 90%); /* slate = the lighter fg, opaque */
}
.toggle .logo,
.toggle .md-header__option,
.toggle .md-header__button.md-icon[for="__search"],
.toggle .md-search,
.toggle .tw-search,
.toggle .store-cart-btn {
  opacity: 1 !important;
  visibility: visible !important;
}
.toggle .md-header__option,
.toggle .md-header__button.md-icon[for="__search"],
.toggle .store-cart-btn {
  color: var(--md-default-fg-color) !important;
}

/* The overlay covers the header's toggle button when open, so the close X is a BODY-LEVEL fixed
   element ABOVE the overlay (z-index 60), pinned by header.js over the hamburger's exact spot. The
   hamburger stays visible until the overlay slides over it, then the X is revealed in its place: the
   icon swaps AT the cover, already in its final colour, so there's no early change and no
   colour-transition flash. Sized to the other close icons. */
#nav-close {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  color: var(--md-default-bg-color);
}
#nav-close.show {
  opacity: 1;
  pointer-events: auto;
  /* reveal once the overlay has slid OVER the hamburger (it sits near the right edge, so it's
     covered at ~0.7 of the slide), not when the whole slide finishes settling */
  transition: opacity 0s calc(var(--nav-duration, 0.25s) * 0.7);
}
#nav-close i { font-size: 1.05rem; }

/* Keep the hamburger visible while the overlay slides in (it's covered when the overlay arrives);
   #nav-close is the X, so the header's own .close stays hidden the whole time. */
.toggle .menu { display: inline !important; }
.toggle .close { display: none !important; }