/* ============================================================
   HeritageBids — Global Stylesheet (WordPress child theme)
   Single source of truth for tokens, fonts, base styles,
   responsive layer, and native-content typography.
   Load site-wide. CD section blocks inherit from this.
   ============================================================ */

/* ---- 1. Self-hosted fonts ----------------------------------
   Files in /wp-content/themes/hello-child/fonts/
   Subsetted woff2 from gwfh.mranftl.com (latin):
   playfair-display 400 + 400italic · inter 300/400/500
--------------------------------------------------------------- */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/playfair-display-v37-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/playfair-display-v37-latin-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/inter-v18-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/inter-v18-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/inter-v18-latin-500.woff2') format('woff2');
}

/* ---- 2. Design tokens --------------------------------------- */
:root {
  --hb-charcoal: #2B2B2B;
  --hb-paper: #F6F3EE;
  --hb-white: #FFFFFF;
  --hb-navy: #0D1F3C;        /* dark feature band ONLY */
  --hb-gold: #C9A84C;        /* micro-accents; text on dark only */
  --hb-muted: #6B6B60;       /* secondary text, AA-passing */
  --hb-line: rgba(43,43,43,0.10);

  --hb-font-display: 'Playfair Display', Georgia, serif;
  --hb-font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --hb-track-eyebrow: 0.3em;
  --hb-pad-section: clamp(56px, 8vw, 120px);
  --hb-maxw: 1440px;
  --hb-maxw-reading: 720px;
}

/* ---- 3. Base (replaces CD's per-page style block) ----------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
body.hb {
  background: var(--hb-white);
  color: var(--hb-charcoal);
  font-family: var(--hb-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.hb h1, body.hb h2, body.hb h3 {
  font-family: var(--hb-font-display);
  font-weight: 400;
  line-height: 1.15;
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- 4. Shared components (for native content + new blocks) -- */
.hb-eyebrow {
  font-family: var(--hb-font-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: var(--hb-track-eyebrow);
  text-transform: uppercase;
  color: var(--hb-muted);
}
.hb-band-navy .hb-eyebrow { color: var(--hb-gold); }

.hb-hairline { border-top: 1px solid var(--hb-line); }
.hb-hairline-gold { border-top: 1px solid var(--hb-gold); }

.hb-band-navy {
  background: var(--hb-navy);
  color: var(--hb-paper);
}

.hb-btn,
.hb-btn-outline {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 32px;
  font-family: var(--hb-font-body);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.hb-btn { background: var(--hb-charcoal); color: var(--hb-paper); border: 1px solid var(--hb-charcoal); }
.hb-btn:hover { background: #3f3f3f; }
.hb-btn-outline { background: transparent; color: var(--hb-charcoal); border: 1px solid rgba(43,43,43,0.35); }
.hb-btn-outline:hover { border-color: var(--hb-charcoal); }
.hb-band-navy .hb-btn { background: var(--hb-paper); color: var(--hb-charcoal); border-color: var(--hb-paper); }
.hb-band-navy .hb-btn-outline { color: var(--hb-paper); border-color: rgba(246,243,238,0.4); }

/* ---- 5. Responsive layer (fixes the CD export's gaps) -------- */
/* CD's own attributes, honored globally */
@media (max-width: 820px) {
  [data-hb-hide-mobile] { display: none !important; }
  [data-hb-stack-mobile] { flex-direction: column !important; gap: 24px !important; }
}
/* Grid collapse: CD uses inline display:grid with fixed columns.
   These utility overrides are applied by adding the attribute to
   grid wrappers during the Phase 2 HTML pass. */
@media (max-width: 1024px) {
  [data-hb-grid] { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  [data-hb-grid] { grid-template-columns: 1fr !important; }
  body.hb h1 { font-size: clamp(34px, 9vw, 48px) !important; }
  body.hb h2 { font-size: clamp(28px, 7vw, 38px) !important; }
}
/* Tap targets */
@media (max-width: 820px) {
  .hb-btn, .hb-btn-outline { width: 100%; min-height: 48px; }
}

/* ---- 6. Native WordPress content (blog posts, editor) -------- */
body.hb .hb-article {
  max-width: var(--hb-maxw-reading);
  margin: 0 auto;
  font-size: 17px;
  line-height: 1.8;
}
body.hb .hb-article h2 {
  font-size: 30px;
  margin: 2.2em 0 0.7em;
}
body.hb .hb-article h3 {
  font-family: var(--hb-font-body);
  font-weight: 500; font-size: 19px;
  margin: 1.8em 0 0.6em;
}
body.hb .hb-article p { margin: 0 0 1.4em; }
body.hb .hb-article a { color: var(--hb-charcoal); text-decoration: underline; text-underline-offset: 3px; }
body.hb .hb-article blockquote {
  border-left: 2px solid var(--hb-gold);
  padding-left: 24px; margin: 2em 0;
  font-family: var(--hb-font-display);
  font-style: italic; font-size: 21px; line-height: 1.5;
}
body.hb .hb-article ul, body.hb .hb-article ol { padding-left: 1.3em; margin: 0 0 1.4em; }
body.hb .hb-article li { margin-bottom: 0.5em; }
body.hb .hb-article img { max-width: 100%; height: auto; }
body.hb .hb-article figcaption {
  font-size: 13px; color: var(--hb-muted);
  margin-top: 10px; text-align: center;
}


/* ---- 7. Mobile layer v2 (responsiveness pass) ----------------- */

/* Safety: no horizontal scroll from any oversized inline block */
body.hb { overflow-x: hidden; }
body.hb img { max-width: 100%; height: auto; }

/* Logged-in view: keep the fixed nav below the WP admin bar */
body.admin-bar nav[style*="position: fixed"] { top: 32px !important; }
@media (max-width: 782px) {
  body.admin-bar nav[style*="position: fixed"] { top: 46px !important; }
}

/* Burger button (hidden on desktop) — !important beats Elementor kit button styles */
.hb-burger {
  display: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none;
  cursor: pointer;
  width: 44px !important; height: 44px !important;
  min-width: 0 !important;
  padding: 10px !important;
  flex-direction: column; justify-content: center; gap: 5px;
  margin-left: 4px;
}
.hb-burger:hover, .hb-burger:focus { background: transparent !important; }
.hb-burger span {
  display: block; height: 1px; width: 22px;
  background: #F6F3EE;
  transition: transform .25s, opacity .25s;
}
.hb-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hb-burger.is-open span:nth-child(2) { opacity: 0; }
.hb-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu panel */
.hb-mobile-menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(43,43,43,0.98);
  flex-direction: column;
  padding: 12px 24px 20px;
  border-top: 1px solid rgba(246,243,238,0.12);
}
.hb-mobile-menu.is-open { display: flex; }
.hb-mobile-menu a {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 400;
  color: #F6F3EE; text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(246,243,238,0.08);
}
.hb-mobile-menu a:last-child { border-bottom: 0; }

@media (max-width: 820px) {
  .hb-burger { display: flex; }
}

/* Mobile spacing + type polish */
@media (max-width: 820px) {
  [data-hb-grid] { gap: 20px !important; }
  body.hb h1 em, body.hb h2 em { letter-spacing: 0; }
  /* details/summary tap comfort in FAQs */
  details.hb-faq-item summary { padding: 22px 0 !important; font-size: 18px !important; }
  details.hb-faq-item p { padding-right: 0 !important; }
}

/* Legal pages: long tables of contents and pre-formatted lines wrap safely */
@media (max-width: 640px) {
  body.hb ol, body.hb ul { padding-left: 1.1em; }
}


/* ---- 8. Mobile: stack flex card rows the grid rule can't reach ------- */
@media (max-width: 820px) {
  /* Category/card rows built as centered flex (gap: 2px pattern) */
  body.hb div[style*="display: flex"][style*="gap: 2px"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
  }
  body.hb div[style*="display: flex"][style*="gap: 2px"] > div {
    width: 100% !important;
    max-width: none !important;
  }
}


@media (max-width: 820px) {
  body.hb div[style*="display: flex"][style*="gap: 2px"] > * {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}


/* ---- 9. Mobile layer v3 ---------------------------------------------- */

/* Nav link group hidden on mobile regardless of data attributes */
@media (max-width: 820px) {
  .hb-nav-links { display: none !important; }
}

/* UNIVERSAL grid collapse: any inline multi-column grid becomes one
   column on phones (covers ratio-based grids the tagger missed,
   including form field grids). */
@media (max-width: 820px) {
  body.hb div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* stacked cells: vertical separators and their spacing make no sense */
  body.hb div[style*="grid-template-columns"] > [style*="border-left"] {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  body.hb div[style*="grid-template-columns"] > [style*="border-right"] {
    border-right: 0 !important;
    padding-right: 0 !important;
  }
  /* form controls never overflow */
  body.hb input, body.hb select, body.hb textarea { max-width: 100%; width: 100%; }
}


/* ---- 10. Mobile layer v4 --------------------------------------------- */
@media (max-width: 820px) {
  /* Sign In lives in the hamburger panel on mobile */
  .hb-signin-desktop { display: none !important; }

  /* Stacked columns: strip 1px vertical separators and their spacing,
     wherever they sit in the tree. Gold accents (#C9A84C) are exempt —
     those are design elements (blockquotes, FAQ rules), not separators. */
  body.hb section [style*="border-left: 1px"]:not([style*="C9A84C"]) {
    border-left: 0 !important;
    padding-left: 0 !important;
  }
  body.hb section [style*="border-right: 1px"]:not([style*="C9A84C"]) {
    border-right: 0 !important;
    padding-right: 0 !important;
  }
}


/* ---- 11. Mobile: uniform alignment for stacked open grid cells -------- */
/* Cells without their own background are "open" columns (process steps,
   stat columns, team columns). Stacked, they all align flush left.
   Cells WITH a background are cards — their padding stays. */
@media (max-width: 820px) {
  body.hb div[style*="grid-template-columns"] > [style]:not([style*="background"]) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}


/* ---- 12. FAQ accordion buttons (beat Elementor kit button styles) ---- */
.hb-faq-q {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #2B2B2B !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.hb-faq-q:hover, .hb-faq-q:focus { background: transparent !important; color: #2B2B2B !important; }
@media (max-width: 820px) {
  .hb-faq-q { padding: 22px 0 !important; font-size: 18px !important; }
  .hb-faq-a p { padding-right: 0 !important; }
}


/* ---- 13. FAQ row geometry: button fills the item exactly, mark stays inside ---- */
.hb-faq-item {
  display: block;
  width: 100%;
  overflow: hidden;
}
.hb-faq-q {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.hb-faq-mark {
  flex: 0 0 auto;
}
.hb-faq-a { width: 100%; }
.elementor-nav-menu a {
  text-transform: none !important;
}