/* certmonk.app shared chrome: fonts, buttons, header with a no-script phone menu, footer and
   store badges. Linked by the landing page, the 404 page and every guide page, so the site has
   one header, one footer and one set of buttons. Self-hosted fonts, no scripts, no inline styles
   (CSP style-src 'self'). The header and footer markup lives in lib/render.mjs and is copied
   into public/index.html and public/404.html (a test keeps them identical). */
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/fonts/plus-jakarta-sans-latin-var.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --cm-deep: #0b2a26; --cm-primary: #1f7a5e; --cm-primary-hover: #17664f; --cm-primary-ink: #ffffff;
  --cm-ember: #ff9a3c; --cm-gold: #ffd36e; --cm-ink: #16292c;
  --cm-hero: linear-gradient(135deg, #0b2a26 0%, #123c36 60%, #1f7a5e 100%);
}
@media (prefers-color-scheme: dark) {
  :root { --cm-primary: #34c08f; --cm-primary-hover: #58cfa4; --cm-primary-ink: #0e1a19; }
}
*, *::before, *::after { box-sizing: border-box; }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

.skip-link { position: absolute; left: -999px; top: 8px; background: var(--cm-ember); color: var(--cm-ink); padding: 8px 14px; border-radius: 8px; z-index: 50; font-weight: 700; }
.skip-link:focus { left: 8px; }
.site-header :focus-visible, .site-footer :focus-visible { outline: 3px solid var(--cm-gold); outline-offset: 3px; border-radius: 8px; }

/* Buttons (landing .btn and guide .button share one look) */
.btn, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 10px; font-weight: 700; font-size: 16px; line-height: 1.2; text-align: center; text-decoration: none; border: 2px solid transparent; transition: background-color .18s ease-out, transform .18s ease-out, box-shadow .18s ease-out; }
.btn:hover, .button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(11,42,38,.18); }
.btn-lg, .button.large { min-height: 52px; padding: 0 26px; font-size: 18px; }
.btn-sm, .button.small { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn-primary, .button.primary { background: var(--cm-primary); color: var(--cm-primary-ink); }
.btn-primary:hover, .button.primary:hover { background: var(--cm-primary-hover); color: var(--cm-primary-ink); }
.btn-light { background: #fff; color: var(--cm-deep); }
.btn-light:hover { color: var(--cm-deep); }
.btn-ghost { color: #fff; border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { color: #fff; }
.btn-ember { background: var(--cm-ember); color: var(--cm-ink); }
.btn-ember:hover { color: var(--cm-ink); }
@media (prefers-reduced-motion: reduce) { .btn, .button { transition: none; } .btn:hover, .button:hover { transform: none; } }

/* Store badges: official artwork, never recolored or stretched, one height */
.badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0; padding: 0; list-style: none; }
.badges a { display: block; line-height: 0; border-radius: 8px; }
.badges img { display: block; height: 48px; width: auto; }

/* Header */
.site-header { background: var(--cm-deep); border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #ffd36e, #ff9a3c, #e8561b) 1; position: relative; z-index: 30; }
.site-header .wrap { display: flex; align-items: center; gap: 10px; height: 68px; }
.site-header .brand { margin-right: auto; display: block; line-height: 0; border-radius: 8px; flex: none; }
.site-header .brand img { width: 128px; height: auto; display: block; }
@media (min-width: 400px) { .site-header .brand img { width: 140px; } }
.site-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.site-nav a { display: block; color: #e6f1ec; text-decoration: none; font-weight: 600; font-size: 15.5px; padding: 10px 12px; border-radius: 8px; }
.site-nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.site-header .btn-sm { padding: 0 14px; white-space: nowrap; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; border: 1.5px solid rgba(255,255,255,.45); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary i, .menu summary i::before, .menu summary i::after { content: ""; display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; position: relative; }
.menu summary i::before { position: absolute; top: -6px; }
.menu summary i::after { position: absolute; top: 6px; }
.menu[open] summary i { background: transparent; }
.menu[open] summary i::before { top: 0; transform: rotate(45deg); }
.menu[open] summary i::after { top: 0; transform: rotate(-45deg); }
.menu .sheet { position: absolute; right: 0; top: 54px; width: min(86vw, 300px); background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 24px 40px -20px rgba(8,20,30,.55); }
.menu .sheet a { display: block; padding: 14px; font-weight: 600; text-decoration: none; color: var(--cm-ink); border-radius: 8px; }
.menu .sheet a:hover { background: #e7f6ee; color: var(--cm-ink); }
.menu .sheet :focus-visible { outline: 3px solid #b4460f; }
@media (max-width: 819px) { .site-nav { display: none; } .menu { display: block; } }

/* Footer */
.site-footer { background: var(--cm-deep); color: #c9ddd5; font-size: 15px; padding: 40px 0; }
.site-footer .foot { display: grid; gap: 18px; }
.site-footer .foot-top { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: space-between; }
.site-footer .brand { display: block; line-height: 0; border-radius: 8px; }
.site-footer .brand img { width: 130px; height: auto; display: block; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer a, .site-footer a:hover { color: #e6f1ec; }
.site-footer p { margin: 0; max-width: 70ch; }
.site-footer .disclaimer { font-size: 14px; }

/* Keep the phone menu independent of the guides' generic details/summary styles */
.site-header details.menu { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; }
.site-header details.menu > summary { padding: 0; margin: 0; border: 1.5px solid rgba(255,255,255,.45); background: none; font-weight: 400; }
.site-header details.menu[open] > summary { border-bottom: 1.5px solid rgba(255,255,255,.45); margin: 0; }
.site-header details.menu > .sheet { margin: 0; }