/* ==========================================================
   FAMILY UNIT 2026 — HEADER
   File: wp-content/themes/familyunit-2026/assets/css/fu-header.css

   STATUS: Final, approved version (matches chat preview v16).
   Font is Plus Jakarta Sans (Google Fonts) — stand-in for GT Standard,
   approved as final, no plans to license GT Standard.
   ========================================================== */

:root {
  --fu-header-height: 38px;
  --fu-header-top-offset: 8px;           /* gap above the menu (transparent over hero on home, white fill elsewhere) */
  --fu-header-bg: #ffffff;
  --fu-header-bg-active: #eaeaea;         /* gray state on hover / panel open */
  --fu-text: #000000;
  --fu-text-dimmed: #aaaaaa;              /* non-active nav items */
  --fu-text-muted: #888888;
  --fu-border: #dddddd;
  --fu-panel-bg: #eaeaea;                 /* search + cart panel background */
  --fu-swatch: #d5d2ce;                   /* product image placeholders, search band */
  --fu-panel-width: 360px;
  --fu-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --fu-transition-speed: 0.32s;
  --fu-color-transition-speed: 0.6s;      /* slow "chill" gray fade, per design notes */
}

/* ---------- Site-wide base font (Plus Jakarta Sans) ----------
   !important + explicit element list so it beats the Elementor kit's
   global typography, which otherwise wins on inheritance and leaves
   body copy / buttons in the wrong face. <i> is deliberately excluded
   so icon fonts (Font Awesome, eicons) keep working. */
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
p, a, label, li {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}

/* ---------- Header shell ----------
   Default (inner pages, and homepage once scrolled past the hero):
   Madhappy-style opaque white bar pinned to the top, with top padding
   that pushes the logo/nav down so white fills the space above the menu. */
.fu-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--fu-header-bg);
  height: calc(var(--fu-header-height) + var(--fu-header-top-offset));
  padding-top: var(--fu-header-top-offset);   /* the white gap above the menu */
  box-sizing: border-box;
  box-shadow: 0 1px 0 var(--fu-border);        /* hairline under the bar */
  transition:
    background var(--fu-color-transition-speed) ease,
    box-shadow var(--fu-transition-speed) var(--fu-ease);
}

/* .fu-header--flush (added by header.php on inner pages) is redundant with
   the default now, kept as a harmless no-op. */
.fu-header--flush {
  top: 0;
}

/* Homepage, sitting over the hero (before scroll): float the white bar
   down by the same offset but leave the space ABOVE it transparent, so the
   hero image shows through — Madhappy's homepage rule. No white filler, no
   hairline while over the hero. The menu itself stays at the same vertical
   position as every other page, so nothing shifts. Once scrolled past the
   hero, fu-header.js adds .is-stuck and the default white-fill bar above
   takes over (so post-hero content can't peek above the menu). */
body.home .fu-header:not(.is-stuck) {
  top: var(--fu-header-top-offset);
  height: var(--fu-header-height);
  padding-top: 0;
  box-shadow: none;
}

/* Reserve space so inner-page content clears the full header (bar + the
   white gap above it). The homepage hero stays full-bleed behind the
   header by design, so .home gets no padding. */
body:not(.home) {
  padding-top: calc(var(--fu-header-height) + var(--fu-header-top-offset));
}

/* Gray state — any nav hover or an open panel triggers this on the whole bar */
.fu-header.is-active {
  background: var(--fu-header-bg-active);
}

.fu-header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 28px 0 32px;
  max-width: 1600px;
  margin: 0 auto;
}

/* ---------- Logo ---------- */
.fu-header__logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.fu-header__logo-img {
  height: 26px;
  width: auto;
  display: block;
}

.fu-header__logo-text {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--fu-text);
  letter-spacing: 0.01em;
}

.fu-header__center {
  flex: 1;
}

/* ---------- Nav ---------- */
.fu-header__nav {
  display: flex;
  align-items: center;
  gap: 22px;
}

/* All nav items (links and buttons) share one identical size/weight,
   forced so the active item can never visually grow relative to the rest. */
.fu-nav-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--fu-text);
  text-decoration: none;
  letter-spacing: 0.01em;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  outline: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color var(--fu-color-transition-speed) ease;
}

/* Dimmed: applied by JS to every item except the one being hovered,
   or except the trigger for whichever panel is open. */
.fu-nav-link.is-dimmed {
  color: var(--fu-text-dimmed);
}

.fu-nav-link.is-dimmed .fu-cart-count {
  background: var(--fu-text-dimmed);
}

/* ---------- Search / Cart label swap ---------- */
.fu-search-label-close {
  display: none;
}

.fu-nav-link.is-panel-open .fu-search-label-open {
  display: none;
}

.fu-nav-link.is-panel-open .fu-search-label-close {
  display: inline;
}

/* ---------- Cart badge ---------- */
.fu-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  background: var(--fu-text);
  color: #fff;
  border-radius: 50%;
  font-size: 0.55rem;
  font-weight: 600;
  line-height: 1;
  padding: 0 3px;
  transition: background var(--fu-color-transition-speed) ease;
}

/* ==========================================================
   OVERLAY (behind search/cart panels)
   ========================================================== */
.fu-overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.22);
  transition: opacity var(--fu-transition-speed) var(--fu-ease);
}

.fu-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Lighter warm-gray wash specifically while search is open */
.fu-overlay.is-search-mode {
  background: rgba(210, 208, 205, 0.72);
}

/* ==========================================================
   SIDE PANELS (shared shell for search + cart)
   ========================================================== */
.fu-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  width: var(--fu-panel-width);
  max-width: 100vw;
  transform: translateX(16px);
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  transition:
    transform var(--fu-transition-speed) var(--fu-ease),
    opacity var(--fu-transition-speed) var(--fu-ease);
}

.fu-panel.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Search panel ---------- */
#fu-search-panel {
  background: var(--fu-panel-bg);
}

.fu-search-panel__inner {
  padding-top: calc(var(--fu-header-height) + var(--fu-header-top-offset));
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Thin full-width darker band, no border — color contrast only */
.fu-search-input-wrap {
  width: 100%;
  background: var(--fu-swatch);
  padding: 7px 24px;
  margin-bottom: 20px;
}

.fu-search-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 0.78rem;
  color: #4a4a4a;
  font-family: inherit;
  font-weight: 400;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  line-height: 1.4;
}

.fu-search-input::placeholder {
  color: var(--fu-text-muted);
  font-size: 0.78rem;
}

.fu-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.fu-search-products {
  padding: 0 24px 28px;
}

.fu-search-products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.fu-search-product-card {
  display: block;
  text-decoration: none;
}

.fu-search-product-card:hover .fu-search-product-card__img {
  opacity: 0.7;
}

.fu-search-product-card__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--fu-swatch);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.18s ease;
}

.fu-search-product-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fu-search-product-card__name {
  font-size: 0.64rem;
  font-weight: 400;
  margin-top: 7px;
  line-height: 1.3;
  color: #666666;
}

/* Loading spinner while products fetch */
.fu-search-products--loading::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid var(--fu-border);
  border-top-color: var(--fu-text);
  border-radius: 50%;
  animation: fu-spin 0.7s linear infinite;
  margin: 32px auto;
  grid-column: 1 / -1;
}

@keyframes fu-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Cart panel ---------- */
#fu-cart-panel {
  background: var(--fu-panel-bg);
}

.fu-cart-panel__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-top: calc(var(--fu-header-height) + var(--fu-header-top-offset));
}

.fu-cart-panel__head {
  padding: 14px 26px 10px;
  border-bottom: 0.5px solid #d8d5d2;
}

.fu-cart-panel__title {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--fu-text);
  letter-spacing: 0.01em;
}

.fu-cart-panel__scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 26px;
}

/* Empty state */
.fu-cart-empty {
  padding: 20px 0 0;
  font-size: 0.78rem;
  color: var(--fu-text);
}

/* Cart line item */
.fu-cart-item {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 0.5px solid #d8d5d2;
  align-items: flex-start;
}

.fu-cart-item__img {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  background: var(--fu-swatch);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fu-cart-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fu-cart-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fu-cart-item__name {
  font-size: 0.75rem; /* bumped ~10% per approved feedback */
  font-weight: 600;
  color: var(--fu-text);
  line-height: 1.3;
}

.fu-cart-item__variant {
  font-size: 0.6rem;
  color: var(--fu-text-muted);
}

.fu-cart-item__qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.fu-qty-btn {
  font-size: 0.8rem;
  color: var(--fu-text);
  cursor: pointer;
  line-height: 1;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  outline: none;
  transition: opacity 0.15s ease;
}

.fu-qty-btn:hover {
  opacity: 0.35;
}

.fu-qty-num {
  font-size: 0.65rem;
  color: var(--fu-text);
  min-width: 12px;
  text-align: center;
}

/* Remove — light gray by default, darkens (never to black) on hover */
.fu-cart-remove {
  font-size: 0.55rem;
  color: #bbbbbb;
  cursor: pointer;
  margin-top: 4px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  outline: none;
  text-align: left;
  display: block;
  transition: color 0.18s ease;
}

.fu-cart-remove:hover {
  color: #666666;
}

.fu-cart-item__price {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--fu-text);
  flex-shrink: 0;
  padding-top: 1px;
}

/* Recommended products — 2 columns, larger cards */
.fu-cart-recs__label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--fu-text);
  padding: 16px 0 10px;
}

.fu-cart-recs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-bottom: 16px;
}

.fu-cart-rec {
  text-decoration: none;
}

.fu-cart-rec__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--fu-swatch);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fu-cart-rec__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fu-cart-rec__name {
  font-size: 0.62rem;
  color: #777777;
  margin-top: 6px;
  line-height: 1.3;
}

/* Cart footer — subtotal + checkout */
.fu-cart-panel__foot {
  border-top: 0.5px solid #d8d5d2;
  padding: 12px 26px 16px;
}

.fu-cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.fu-cart-subtotal__label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--fu-text);
}

.fu-cart-subtotal__amt {
  font-size: 0.68rem;
  color: var(--fu-text);
}

.fu-checkout-btn {
  display: block;
  width: 100%;
  background: var(--fu-text);
  color: #ffffff;
  border: none;
  padding: 11px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.18s ease;
}

.fu-checkout-btn:hover {
  background: #333333;
}

.fu-cart-tax-note {
  font-size: 0.56rem;
  color: var(--fu-text-muted);
  text-align: center;
  margin-top: 6px;
}

/* ==========================================================
   MOBILE
   (Placeholder — full mobile nav pattern to be designed separately.
   These are minimal safety rules so nothing breaks on small screens
   until the dedicated mobile pass.)
   ========================================================== */
@media (max-width: 768px) {
  :root {
    --fu-panel-width: 100vw;
  }

  .fu-header__inner {
    padding: 0 20px;
  }

  .fu-header__nav {
    gap: 16px;
  }
}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fu-header,
  .fu-panel,
  .fu-overlay,
  .fu-nav-link,
  .fu-cart-count {
    transition: none;
  }
}

/* ==========================================================
   SITE FOOTER — moved here so it is styled on EVERY page
   (previously lived in fu-home.css, which only loads on the homepage).
   ========================================================== */
.fu-footer { background: #eaeaea; padding: 36px 32px 28px; }
.fu-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 40px;
}
.fu-footer__col h4 { font-size: 0.72rem; font-weight: 700; color: #000; margin-bottom: 14px; }
.fu-footer__col a {
  display: block; font-size: 0.72rem; font-weight: 500; color: #000;
  text-decoration: none; margin-bottom: 8px; transition: opacity 0.18s ease;
}
.fu-footer__col a:hover { opacity: 0.5; }
.fu-footer__bottom {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 0.5px solid #ccc; padding-top: 18px;
}
.fu-footer__social { display: flex; gap: 18px; }
.fu-footer__social a { font-size: 0.72rem; font-weight: 600; color: #000; text-decoration: none; transition: opacity 0.18s ease; }
.fu-footer__social a:hover { opacity: 0.5; }
.fu-footer__copy { font-size: 0.68rem; color: #999; }
@media (max-width: 768px) { .fu-footer__cols { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================
   PLUGIN OVERRIDES — baked in (was temporary "Additional CSS")
   High-specificity + !important so the header always wins over
   Elementor / WooCommerce stylesheets regardless of load order.
   ========================================================== */

/* Logo: never let plugin CSS blow it up on shop/product pages. */
#fu-header .fu-header__logo-img {
  height: 26px !important;
  width: auto !important;
  max-width: 220px !important;
}

/* Nav items: one uniform style, sentence-case, and BLACK in every
   state — links and buttons alike. No item ever grays on hover. */
#fu-header .fu-header__nav a.fu-nav-link,
#fu-header .fu-header__nav button.fu-nav-link {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  text-decoration: none !important;
  color: var(--fu-text) !important;
}

#fu-header .fu-header__nav a.fu-nav-link:hover,
#fu-header .fu-header__nav a.fu-nav-link:focus,
#fu-header .fu-header__nav a.fu-nav-link:active,
#fu-header .fu-header__nav button.fu-nav-link:hover,
#fu-header .fu-header__nav button.fu-nav-link:focus,
#fu-header .fu-header__nav .fu-nav-link.is-dimmed {
  color: var(--fu-text) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

/* ==========================================================
   MORE PLUGIN OVERRIDES — cart drawer + search bar
   ========================================================== */

/* Search bar: no underline / border / box-shadow on the input. */
#fu-search-panel .fu-search-input,
#fu-search-panel .fu-search-input-wrap {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Cart drawer Remove: small, sentence-case, gray. */
#fu-cart-panel .fu-cart-remove,
.fu-cart-item .fu-cart-remove {
  font-size: 0.6rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  color: #bbbbbb !important;
}
#fu-cart-panel .fu-cart-remove:hover,
.fu-cart-item .fu-cart-remove:hover {
  color: #666666 !important;
}

/* Cart drawer Checkout button: yellow, gains a black border on hover
   (same treatment as the product Add to Cart). */
#fu-cart-panel .fu-checkout-btn {
  background: #ffe600 !important;
  background-color: #ffe600 !important;
  color: #000000 !important;
  border: 2px solid transparent !important;
  transition: border-color 0.2s ease !important;
}
#fu-cart-panel .fu-checkout-btn:hover {
  background: #ffe600 !important;
  border-color: #000000 !important;
}

/* ==========================================================
   GLOBAL: kill WooCommerce's default mauve/purple button color
   (#a46497) everywhere. Our specific buttons (Add to Cart,
   Checkout) override this to yellow further down their own CSS.
   ========================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce #respond input#submit.alt {
  background: #000000 !important;
  background-color: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  text-shadow: none !important;
  border-radius: 0 !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover {
  background: #333333 !important;
  background-color: #333333 !important;
  color: #ffffff !important;
}

/* =========================================================
   SITEWIDE — no CSS-forced ALL-CAPS. Render copy as authored.
   Beats the Elementor kit's uppercase typography. Does NOT
   affect text that was typed in capitals in the dashboard
   (e.g. product names) — that is content, not styling.
   ========================================================= */
body :is(h1, h2, h3, h4, h5, h6, p, a, span, li, label, button,
         strong, em, dt, dd, td, th, .price, .amount),
body .elementor-heading-title,
body.elementor-kit-30 .elementor-heading-title,
body .elementor-button,
body .elementor-icon-list-text,
body .woocommerce-loop-product__title,
body .woocommerce a.button,
body .woocommerce button.button {
  text-transform: none !important;
}