/*
 * leydenandbeam.com: what the mockup's inline styles cannot carry (docs/website/WEBSITE-BUILD.md §3). The pages keep
 * the mockup's own inline styles; this file adds the fonts (self-hosted, OFL), the two page rules every mockup page
 * sets, hover and focus, the header's switch to its phone layout, the guide filters, and the guide body.
 */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/source-serif-4.f2ea9c12d2.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/source-serif-4-italic.96e6393209.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("/fonts/source-sans-3.19143dca07.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 200 900; font-display: swap; src: url("/fonts/source-sans-3-italic.5fbc14d56c.woff2") format("woff2"); }

/* the two rules every mockup page sets */
body { margin: 0; background: #F4EFE6; }
a { color: #13456E; }
a:hover { color: #0B2F4D; }
img { max-width: 100%; }
/* hidden means hidden, over a page's inline display (the lookup's result, a filtered guide card) */
[hidden] { display: none !important; }
picture { display: contents; }
picture > source { display: none; } /* or, as flex items, each would add the parent's gap */

/* the navy pill buttons: their hover color (§3), over the inline background */
a[style*="background: #13456E"]:hover, button[style*="background: #13456E"]:hover { background: #0B2F4D !important; color: #FFFFFF !important; }

/* keyboard focus, visible on every ground */
:focus-visible { outline: 3px solid #13456E; outline-offset: 3px; border-radius: 4px; }
a[style*="background: #13456E"]:focus-visible { outline-color: #D9961C; }

.lb-skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 18px; border-radius: 999px; background: #13456E; color: #FFFFFF; font: 700 1rem/1.4 "Source Sans 3", system-ui, sans-serif; text-decoration: none; }
.lb-skip:focus { top: 12px; color: #FFFFFF; }

/* the header: the wide layout until the five links and two buttons no longer fit, then the phone layout and its menu */
.lb-head-narrow { display: none; }
@media (max-width: 1080px) {
  .lb-head-wide { display: none; }
  .lb-head-narrow { display: block; }
}

/* the guide library's filters (the mockup's pill and pressed styles) */
.lb-filter { font: inherit; font-weight: 700; font-size: 0.95rem; min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer; background: #FFFDF9; color: #2E2A26; border: 2px solid #CFC4B5; }
.lb-filter[aria-pressed="true"] { background: #13456E; color: #FFFFFF; border: 2px solid #13456E; }
.lb-filter:hover { border-color: #13456E; }

/* a guide's body: the mockup's GuideArticle values, element by element */
.lb-guide-body p { margin: 0 0 1.1em; font-family: "Source Serif 4", Georgia, serif; font-size: 1.14rem; line-height: 1.7; color: #2E2A26; text-wrap: pretty; }
.lb-guide-body h2 { margin: 1.6em 0 0.5em; font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: clamp(1.6rem, 2.6cqi, 2rem); line-height: 1.2; text-wrap: balance; scroll-margin-top: 16px; }
.lb-guide-body h3 { margin: 1.4em 0 0.4em; font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: 1.3rem; line-height: 1.3; scroll-margin-top: 16px; }
.lb-guide-body ul { margin: 0 0 1.2em; padding-left: 1.3em; font-family: "Source Serif 4", Georgia, serif; font-size: 1.14rem; line-height: 1.65; }
.lb-guide-body ol { margin: 0 0 1.2em; padding-left: 1.5em; font-family: "Source Serif 4", Georgia, serif; font-size: 1.14rem; line-height: 1.65; }
.lb-guide-body li { margin-bottom: 0.5em; }
.lb-guide-body a { font-weight: 600; }
.lb-guide-body > :first-child { margin-top: 0; }
.lb-guide-body blockquote { margin: 0 0 1.2em; padding-left: 18px; border-left: 3px solid #D9961C; color: #4A433D; }
.lb-guide-body code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
.lb-guide-body pre { margin: 0 0 1.2em; padding: 16px 18px; background: #FFFDF9; border: 1px solid #E4D9C8; border-radius: 12px; overflow-x: auto; }
.lb-guide-body hr { border: 0; border-top: 1px solid #E4D9C8; margin: 2em 0; }
.lb-guide-body .lb-table { overflow-x: auto; margin: 0 0 1.2em; }
.lb-guide-body table { border-collapse: collapse; font-size: 1rem; }
.lb-guide-body th, .lb-guide-body td { text-align: left; vertical-align: top; padding: 8px 12px; border-bottom: 1px solid #E4D9C8; }

/* under reduced motion the build panel does not tilt (§3) */
@media (prefers-reduced-motion: reduce) {
  [style*="rotate("] { transform: none !important; }
  html { scroll-behavior: auto; }
}