/* =============================================================================
   catalog.css — Catalog.beer Phase 0 theme (drop-in over Bootstrap 5.3.x)
   -----------------------------------------------------------------------------
   Load AFTER bootstrap.min.css in classes/resources/head.html:

     <link rel="stylesheet" href="…/bootstrap.min.css">
     <link rel="stylesheet" href="/assets/css/catalog.css">   <!-- this file -->

   Reskins the whole site (color + type) by overriding Bootstrap's own CSS
   variables. No template/markup changes required. Delete the <link> to roll
   back instantly. Tune the --cb-* palette below in one place.

   Fonts: self-hosted, Latin subset, woff2 only (assets/fonts/). No external
   font requests — faster load and no third-party privacy exposure.
   ========================================================================== */

/* ---- Instrument Sans — body / UI ---- */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-500.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-700.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-italic.woff2") format("woff2");
}

/* ---- Instrument Serif — headings / names ---- */
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-400.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/instrument-serif-italic.woff2") format("woff2");
}

/* ---- JetBrains Mono — code / IDs / breadcrumbs ---- */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2");
}

:root {
  /* ---- palette (the one place to tune) ---- */
  --cb-paper:    #FAF7F2;
  --cb-paper-2:  #F3EDE2;
  --cb-paper-3:  #E9E2D3;
  --cb-ink:      #1B1A17;
  --cb-ink-2:    #39352F;
  --cb-muted:    #6B6660;
  --cb-muted-2:  #9A948A;
  --cb-line:     #E4DDCF;
  --cb-line-2:   #D6CDB9;
  --cb-amber:    #D49A3D;   /* accent / active / badges      */
  --cb-amber-deep:#B26B1E;  /* button hover / emphasis        */
  --cb-link:     #9A4A2E;   /* warm rust link                 */
  --cb-link-hover:#B26B1E;

  --cb-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --cb-sans:  "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cb-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- map Bootstrap's tokens onto the palette ---- */
  --bs-body-bg: var(--cb-paper);
  --bs-body-color: var(--cb-ink-2);
  --bs-body-color-rgb: 57, 53, 47;
  --bs-emphasis-color: var(--cb-ink);

  --bs-secondary-color: var(--cb-muted);
  --bs-secondary-bg: var(--cb-paper-2);
  --bs-tertiary-color: var(--cb-muted-2);
  --bs-tertiary-bg: var(--cb-paper-2);

  --bs-border-color: var(--cb-line);
  --bs-border-color-translucent: rgba(27, 26, 23, 0.12);

  --bs-link-color: var(--cb-link);
  --bs-link-color-rgb: 154, 74, 46;
  --bs-link-hover-color: var(--cb-link-hover);
  --bs-link-hover-color-rgb: 178, 107, 30;

  --bs-primary: var(--cb-amber);
  --bs-primary-rgb: 212, 154, 61;
  --bs-primary-text-emphasis: var(--cb-amber-deep);
  --bs-primary-bg-subtle: var(--cb-paper-2);
  --bs-primary-border-subtle: var(--cb-line-2);

  /* navbar .bg-dark, .btn-dark, .text-bg-dark → warm ink */
  --bs-dark: var(--cb-ink);
  --bs-dark-rgb: 27, 26, 23;

  --bs-font-sans-serif: var(--cb-sans);
  --bs-body-font-family: var(--cb-sans);
  --bs-font-monospace: var(--cb-mono);
}

/* ---- type: display serif for headings & names ---- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--cb-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--cb-ink);
}
.lead { font-weight: 400; }
code, kbd, samp, pre, .font-monospace { font-family: var(--cb-mono); }

/* ---- inputs: keep crisp white on warm paper; amber focus ---- */
.form-control, .form-select {
  background-color: #fff;
  border-color: var(--cb-line-2);
}
.form-control:focus, .form-select:focus {
  border-color: var(--cb-amber-deep);
  box-shadow: 0 0 0 0.2rem rgba(212, 154, 61, 0.28);
}
.form-control::placeholder { color: var(--cb-muted-2); }

/* ---- primary button: editorial ink, amber on hover ---- */
.btn-primary {
  --bs-btn-bg: var(--cb-ink);
  --bs-btn-border-color: var(--cb-ink);
  --bs-btn-color: var(--cb-paper);
  --bs-btn-hover-bg: var(--cb-amber-deep);
  --bs-btn-hover-border-color: var(--cb-amber-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--cb-amber-deep);
  --bs-btn-active-border-color: var(--cb-amber-deep);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--cb-muted);
  --bs-btn-disabled-border-color: var(--cb-muted);
}

/* ---- accents: links get a warm underline on hover, not permanent blue ---- */
a { text-underline-offset: 0.12em; }

/* ---- surfaces ---- */
.card { --bs-card-border-color: var(--cb-line); --bs-card-bg: #fff; }
.bg-light { background-color: var(--cb-paper-2) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--cb-line) !important; }

/* ---- breadcrumb: quieter, monospaced crumbs read as "archive" ---- */
.breadcrumb {
  font-family: var(--cb-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.breadcrumb-item.active { color: var(--cb-ink); }

/* ---- alerts: warm success ---- */
.alert-success {
  --bs-alert-color: #1F5A3A;
  --bs-alert-bg: #E7F0E8;
  --bs-alert-border-color: #CFE3D4;
}

/* ---- badges/pills use amber accent ---- */
.badge.text-bg-primary { color: #1B1A17 !important; background-color: var(--cb-amber) !important; }

/* ============================ chrome: navbar + footer ============================
   Used by navbar.html (cream) and plain-footer.html (redesigned). */

/* wordmark — serif "Catalog" + mono ".beer"; ink on light surfaces, no background */
.cb-wordmark { font-family: var(--cb-serif); font-size: 1.4rem; line-height: 1; letter-spacing: -.01em; color: var(--cb-ink); text-decoration: none; }
.cb-wordmark .tld { font-family: var(--cb-mono); font-size: .8rem; color: var(--cb-muted); }

/* cream navbar */
.navbar.cb-nav { background: var(--cb-paper); border-bottom: 1px solid var(--cb-line); }
.cb-nav .nav-link { color: var(--cb-ink-2); }
.cb-nav .nav-link.active { color: var(--cb-ink); font-weight: 600; }
.cb-nav .nav-link:hover, .cb-nav .nav-link:focus { color: var(--cb-amber-deep); }
.cb-nav .navbar-toggler { border-color: var(--cb-line-2); }
.navbar-nav .nav-link { white-space: nowrap; }
.cb-count { font-family: var(--cb-mono); font-size: .62rem; background: var(--cb-paper-3); color: var(--cb-muted); border-radius: 99px; padding: .05rem .45rem; margin-left: .3rem; vertical-align: 1px; }

/* footer */
.cb-footer { background: var(--cb-paper-2); }
.cb-foot-h { font-family: var(--cb-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cb-muted); margin-bottom: 10px; }
.cb-foot-links { list-style: none; padding: 0; margin: 0; }
.cb-foot-links li { margin-bottom: 5px; }
.cb-foot-links a { text-decoration: none; }
.cb-cc svg { fill: var(--cb-ink-2); }
.cb-foot-lead { font-family: var(--cb-serif); font-size: 1.05rem; color: var(--cb-ink); }