/* ==========================================================================
   Keeping Vert Dead — main.css
   Global dark theme + sticky nav. Loaded on every page.
   Overrides Storefront's light defaults; loaded after the parent sheet.
   ========================================================================== */

/* ── Base ── */
body,
body.site,
#page {
  background-color: var(--kvd-bg);
  color: var(--kvd-text);
  font-family: var(--kvd-font-body);
}

body a {
  color: var(--kvd-text);
}
body a:hover {
  color: var(--kvd-accent);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--kvd-font-display);
  color: var(--kvd-text);
  letter-spacing: 0.02em;
  font-weight: 400;
}

/* Storefront wraps content in a white .col-full content area — darken it. */
#content,
.site-content {
  background-color: var(--kvd-bg);
}

/* ── Buttons (shared) ── */
.kvd-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .button,
.woocommerce #respond input#submit {
  display: inline-block;
  font-family: var(--kvd-font-display);
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75em 1.75em;
  border: 2px solid var(--kvd-accent);
  border-radius: 2px;
  background-color: var(--kvd-accent);
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.kvd-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce .button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--kvd-accent-hover);
  border-color: var(--kvd-accent-hover);
  color: #ffffff;
}

.kvd-btn--outline {
  background-color: transparent;
  color: var(--kvd-text);
}
.kvd-btn--outline:hover {
  background-color: var(--kvd-accent);
  color: #ffffff;
}

/* ==========================================================================
   Sticky dark header
   Storefront markup is two stacked blocks inside #masthead:
     #masthead.site-header
       > .col-full                                   (branding / logo)
       > .storefront-primary-navigation > .col-full
           > nav.main-navigation .primary-navigation ul#menu-primary
   We flatten both into a single flex row: logo left, menu right.
   ========================================================================== */
#masthead.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: var(--kvd-bg);
  border-bottom: 1px solid var(--kvd-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding: 0.5rem 2rem;
  box-sizing: border-box;
}

/* Branding wrapper — shrink to content, drop col-full centering. */
#masthead.site-header > .col-full {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
}
#masthead .site-branding,
#masthead .logo {
  margin: 0;
  padding: 0;
}
#masthead .custom-logo-link {
  display: inline-block;
  line-height: 0;
}
#masthead .custom-logo {
  height: 56px;
  width: auto;
  max-width: none;
  display: block;
}
/* Hide text site title/description — the logo carries the brand. */
#masthead .site-title,
#masthead .site-description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* Nav wrapper — take the rest of the row, right-aligned. */
#masthead .storefront-primary-navigation {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent;
  flex: 1 1 auto;
}
#masthead .storefront-primary-navigation > .col-full {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
#masthead .main-navigation,
#masthead .main-navigation .primary-navigation {
  width: auto;
  float: none;
  background: transparent;
}
#masthead .main-navigation ul.menu,
#masthead .main-navigation .primary-navigation > ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0;
  padding: 0;
  background: transparent;
}
#masthead .main-navigation ul li {
  margin: 0;
  border: 0;
}
#masthead .main-navigation ul li a {
  font-family: var(--kvd-font-display);
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kvd-text);
  padding: 0.25rem 0;
}
#masthead .main-navigation ul li a:hover,
#masthead .main-navigation ul li.current-menu-item > a {
  color: var(--kvd-accent);
}

/* Hide Storefront's widget mini-cart — the PRD nav uses a plain Cart link. */
.site-header-cart {
  display: none;
}

/* Handheld nav toggle, when Storefront prints it. */
button.menu-toggle,
button.menu-toggle:hover {
  background-color: var(--kvd-surface);
  color: var(--kvd-text);
  border: 1px solid var(--kvd-border);
}

/* ── Footer ── */
.site-footer {
  background-color: #0c0c0c;
  color: var(--kvd-text-muted);
  border-top: 1px solid var(--kvd-border);
}
.site-footer a {
  color: var(--kvd-text-muted);
}
.site-footer a:hover {
  color: var(--kvd-accent);
}

/* ── Generic content widths inherited from Storefront .col-full are fine. ── */