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

/* =====================================================
   J.F. Price — user-13.css
   Purpose: Typography + Canvas + Content Sheet + Header/Menu
   ===================================================== */


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


/* ================================
   Outer canvas (JF Price tan)
   ================================ */
body {
  background-color: #c7b59a; /* JF Price tan */
}


/* ================================
   Header & Main Menu (near-black)
   ================================ */
.header,
.header-container,
.container-header {
  background-color: #0f1115 !important; /* refined charcoal black */
}

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

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

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


/* ================================
   Remove blue strip under header graphic
   (actual working fix: border/shadow edge)
   ================================ */
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;
  box-shadow: none !important;
  border: 0 !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;
  box-shadow: none !important;
  border: 0 !important;
}


/* ================================
   Inner content sheet
   ================================ */
.site-grid .container-component {
  background-color: #e2e2e2; /* light gray content area */
  padding: 2.5rem 2rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}


/* ================================
   H2 — Product / section titles
   ================================ */
main h2 {
  font-family: "Fira Sans", system-ui, sans-serif;
  font-weight: 600;
  color: #3a3a36; /* warm charcoal */
  letter-spacing: 0.01em;
  text-transform: none;
}

/* H2 links: look like headings, not links */
main h2 a {
  color: inherit;
  text-decoration: none;
}

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


/* ================================
   Mobile adjustments
   ================================ */
@media (max-width: 768px) {
  .site-grid .container-component {
    padding: 1.25rem 1rem;
  }
}
/* ================================
   Dropdown menu hover state
   ================================ */

.container-header .dropdown-menu li > a:hover,
.container-header .dropdown-menu li > a:focus {
  background-color: #2b2e33; /* warm industrial charcoal */
  color: #ffffff;
}
/* =====================================================
   Dropdown menu hover — force visible contrast
   ===================================================== */

.container-header .mod-menu__sub > li > a:hover,
.container-header .mod-menu__sub > li > a:focus {
  background-color: #2b2e33 !important; /* warm industrial charcoal */
  color: #ffffff !important;
}
.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 {
  padding-left: 1.25rem;
}
.container-header .mod-menu__sub > li.active > a {
  background-color: #1e2024;
  color: #ffffff;
}
/* ================================
   Breadcrumbs — raise position
   ================================ */

.mod-breadcrumbs {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.site-grid .grid-child.container-component {
  margin-top: -1.25rem !important;
}
/* ================================
   Footer — match menu background
   ================================ */

.container-footer,
.footer,
.footer.full-width,
footer {
  background-color: #0f1115 !important; /* match header/menu */
  color: #ffffff;
}
/* ================================
   Footer — force match header/menu
   ================================ */

/* Footer wrapper */
footer.container-footer {
  background-color: #0f1115 !important;
}

/* Footer inner grid (this is the blue culprit) */
footer.container-footer .grid-child {
  background-color: #0f1115 !important;
  color: #ffffff;
}
/* Category List: keep each category as a clean stacked block */
.category-list .category-desc,
.categories-list .category-desc {
  overflow: auto; /* contains floats */
}

/* If images are inside descriptions, constrain + tame them */
.category-list .category-desc img,
.categories-list .category-desc img {
  max-width: 320px;
  height: auto;
  float: left;
  margin: 0 1rem 1rem 0;
  display: block;
}

/* Ensure each category row clears the previous one */
.category-list .category,
.categories-list .category {
  clear: both;
}
/* Make the footer background extend full width (kills the blue on the sides) */
footer,
.footer,
.container-footer,
.container-footer.full-width,
.site-footer {
  background: #000 !important;
}

/* Also force the inner footer containers to match */
footer .container,
footer .grid-child,
.container-footer .container,
.container-footer .grid-child {
  background: #000 !important;
}
/* =========================================
   JF Price – External CTA Button
   ========================================= */

.jf-cta-external {
    display: inline-block;
    margin-top: 1.25rem;
    padding: 0.65rem 1.6rem;

    font-family: inherit;
    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;
}

/* Hover / Focus */
.jf-cta-external:hover,
.jf-cta-external:focus {
    color: #fff;
    background-color: #111;
    text-decoration: none;
}

/* Optional subtle lift */
.jf-cta-external:hover {
    transform: translateY(-1px);
}