@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;600;700&display=swap');

/* ============================================================
   JF PRICE — user48.css
   Status: STABLE / VERIFIED
   Last verified: 2026-01-28
   Purpose:
   - Finalized header layout and navigation styling
   - Products page category titles intentionally suppressed
   - Legacy layout experiments preserved as comments only
   Notes:
   - Do NOT reintroduce pixel nudges for header centering
   - Header alignment is structural, not optical
   ============================================================ */


/* ============================================================
   TYPOGRAPHY — PAGE TITLES
   ============================================================ */
main h1,
main .h1 {
  font-family: "EB Garamond", serif !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}


/* ============================================================
   GLOBAL CANVAS
   ============================================================ */
body {
  background-color: #c7b59a; /* JF Price tan */
}


/* ============================================================
   HEADER & MAIN NAVIGATION
   - Full-width background
   - Inner grid constrained to content width (see below)
   ============================================================ */
.header,
.header-container,
.container-header {
  background-color: #0f1115 !important;
}

/* Menu + dropdowns */
.container-header .navbar,
.container-header nav,
.container-header .mod-menu,
.container-header .dropdown-menu {
  background-color: #0f1115 !important;
}

/* Menu text */
.container-header a,
.container-header .nav-link {
  color: #ffffff;
}

.container-header a:hover,
.container-header .nav-link:hover {
  color: #d9d9d9;
}


/* ============================================================
   HEADER — REMOVE DEFAULT CASSIOPEIA BLUE STRIP
   ============================================================ */
header.header.container-header.full-width {
  background: #0f1115 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

header.header.container-header.full-width::before,
header.header.container-header.full-width::after {
  background: #0f1115 !important;
  border: 0 !important;
  box-shadow: none !important;
}

header.header.container-header.full-width + .site-grid {
  border-top: 0 !important;
  box-shadow: none !important;
}

header.header.container-header.full-width + .site-grid::before,
header.header.container-header.full-width + .site-grid::after {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}


/* ============================================================
   CORE LAYOUT — INNER CONTENT SHEET
   ============================================================ */
.site-grid .container-component {
  background-color: #e2e2e2;
  padding: 2.5rem 2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}


/* ============================================================
   TYPOGRAPHY — SECTION TITLES
   ============================================================ */
main h2 {
  font-family: "Fira Sans", system-ui, sans-serif;
  font-weight: 600;
  color: #3a3a36;
  letter-spacing: 0.01em;
}

main h2 a {
  color: inherit;
  text-decoration: none;
}

main h2 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}


/* ============================================================
   RESPONSIVE — MOBILE SPACING
   ============================================================ */
@media (max-width: 768px) {
  .site-grid .container-component {
    padding: 1.25rem 1rem;
  }
}


/* ============================================================
   DROPDOWN MENUS
   ============================================================ */
.container-header .dropdown-menu li > a:hover,
.container-header .dropdown-menu li > a:focus {
  background-color: #2b2e33;
  color: #ffffff;
}

.container-header .mod-menu__sub > li > a {
  transition: background-color 0.15s ease,
              color 0.15s ease,
              padding-left 0.15s ease;
}

.container-header .mod-menu__sub > li > a:hover,
.container-header .mod-menu__sub > li > a:focus {
  background-color: #2b2e33 !important;
  color: #ffffff !important;
  padding-left: 1.25rem;
}

.container-header .mod-menu__sub > li.active > a {
  background-color: #1e2024;
  color: #ffffff;
}


/* ============================================================
   BREADCRUMBS — OPTICAL POSITIONING
   ============================================================ */
.mod-breadcrumbs {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.site-grid .grid-child.container-component {
  margin-top: -1.25rem !important;
}


/* ============================================================
   FOOTER — UNIFIED BLACK
   ============================================================ */
footer,
.footer,
.container-footer,
.container-footer.full-width,
.site-footer,
footer .container,
footer .grid-child,
.container-footer .container,
.container-footer .grid-child {
  background: #000 !important;
  color: #ffffff;
}


/* ============================================================
   CATEGORY LISTS — FLOAT SAFETY
   ============================================================ */
.category-list .category-desc,
.categories-list .category-desc {
  overflow: auto;
}

.category-list .category-desc img,
.categories-list .category-desc img {
  max-width: 320px;
  height: auto;
  float: left;
  margin: 0 1rem 1rem 0;
  display: block;
}

.category-list .category,
.categories-list .category {
  clear: both;
}


/* ============================================================
   EXTERNAL CTA BUTTON
   ============================================================ */
.jf-cta-external {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.65rem 1.6rem;

  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  color: #111;
  background-color: transparent;
  border: 2px solid #111;
  text-decoration: none;
  border-radius: 2px;

  transition: all 0.25s ease;
}

.jf-cta-external:hover,
.jf-cta-external:focus {
  color: #fff;
  background-color: #111;
  text-decoration: none;
  transform: translateY(-1px);
}


/* ============================================================
   MAIN MENU — CENTERED (DESKTOP)
   ============================================================ */
@media (min-width: 992px) {

  .container-header .container-topbar {
    display: grid;
    grid-template-columns: 1fr;
  }

  .container-header .mod-menu {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 0;
  }
}


/* ============================================================
   HEADER TITLE GRAPHIC — FINAL, STRUCTURAL SOLUTION
   - Constrains header inner grid to body width
   - This is the ONLY centering mechanism that should be used
   ============================================================ */
header.container-header .grid-child {
  max-width: 1200px;   /* must match site content width */
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   DEPRECATED / SUPERSEDED — DO NOT REACTIVATE
   These were early optical nudges and are kept for history only.
   Header centering is now structural (see above).
   ============================================================ */

/*
.container-below-top .grid-child {
  background-position: 52% center;
}

#mod-custom110 img {
  transform: translateX(12px);
}
*/


/* ============================================================
   PRODUCTS PAGE — HIDE CATEGORY TREE TITLES
   Menu type: "List All Categories in an Article Category Tree"
   Client preference: do NOT display category titles.
   Navigation is preserved via linked images and descriptions.
   Scoped to Products menu item only (itemid-110).
   ============================================================ */
body.itemid-110 .com-content-categories__item-title,
body.itemid-110 .com-content-categories__item-title-wrapper {
  display: none !important;
}