/*
Theme Name: HVC Theme v4
Theme URI: https://hvcoins.com
Author: ACDELL Creative
Author URI: https://acdell.com
Description: Hudson Valley Numismatics — Custom WordPress theme by ACDELL Creative. Full Customizer control, WordPress widget areas, blog system, dark/light mode, CPT support, and block editor styles.
Version: 3.6.9
Requires at least: 6.2
Tested up to: 6.9
Requires PHP: 8.0
License: Proprietary
Text Domain: hvc3
Tags: custom-menu, custom-logo, full-width-template, responsive-layout
*/

/* =========================================================
   DESIGN TOKENS — Money Green + Warm Cream
   All overridden at runtime by Customizer via inline <style>
   ========================================================= */

:root {
  /* Money Greens */
  --c-dark:      #1a3324;
  --c-primary:   #3c6645;
  --c-mid:       #527a57;
  --c-light:     #7aaa80;
  --c-mist:      #c4d9c6;
  --c-pale:      #eaf2eb;

  /* Cream / Coin Accent */
  --c-accent:    #b89a68;
  --c-accent-lt: #d4b98a;
  --c-accent-bg: #f0e8d5;
  --c-accent-dk: #8a7048;

  /* Paper Tones */
  --c-parchment: #f5f0e5;
  --c-cream:     #ede8d5;
  --c-ivory:     #faf7f0;
  --c-footer:    #111d15;

  /* Text */
  --c-ink:       #1a1a1a;
  --c-body:      #2d2d2d;
  --c-slate:     #4a4a4a;
  --c-muted:     #7a7a7a;
  --c-border:    #ddd8cc;
  --c-white:     #ffffff;

  /* Heading color on light bg */
  --c-heading:   #1a3324;

  /* Typography */
  --f-display: 'Cormorant Garamond', Georgia, serif;
  --f-body:    'Raleway', 'Helvetica Neue', sans-serif;
  --f-size:    16px;

  /* Spacing */
  --sp-xs:  .5rem;
  --sp-sm:  1rem;
  --sp-md:  1.5rem;
  --sp-lg:  2.5rem;
  --sp-xl:  4rem;
  --sp-2xl: 6rem;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;

  /* Shadows */
  --sh-sm: 0 2px 8px rgba(0,0,0,.07);
  --sh-md: 0 6px 24px rgba(0,0,0,.11);
  --sh-lg: 0 16px 48px rgba(0,0,0,.15);
  --sh-accent: 0 4px 18px rgba(184,154,104,.28);

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
  --t-fast: 170ms;
  --t-med:  300ms;
}

/* =========================================================
   RESET
   ========================================================= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--f-size);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-body);color:var(--c-body);background:var(--c-ivory);line-height:1.72;overflow-x:clip}
a{color:var(--c-primary);text-decoration:none;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--c-accent)}
img{max-width:100%;height:auto;display:block}
ul{list-style:none}
button,input,textarea,select{font-family:var(--f-body);font-size:inherit}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1,h2,h3,h4,h5,h6{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.2;
  color:var(--c-heading);
  letter-spacing:-.01em;
}
h1{font-size:clamp(2rem,5vw,3.8rem)}
h2{font-size:clamp(1.6rem,3.5vw,2.8rem)}
h3{font-size:clamp(1.3rem,2.5vw,2rem)}
h4{font-size:1.25rem}
h5{font-size:1.05rem}
p{margin-bottom:1.2rem}
p:last-child{margin-bottom:0}
.lead{font-size:1.15rem;font-weight:300;color:var(--c-slate);line-height:1.82}
strong{font-weight:600}

/* =========================================================
   UTILITIES
   ========================================================= */
.container{width:100%;max-width:1240px;margin:0 auto;padding:0 var(--sp-md)}
.container--narrow{max-width:820px}
.container--wide{max-width:1440px}
.section{padding:var(--sp-xl) 0}
.section--lg{padding:var(--sp-2xl) 0}
.section--sm{padding:var(--sp-lg) 0}
.section--dark{background:var(--c-dark);color:var(--c-white)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark h4{color:var(--c-accent-lt)}
.section--green{background:var(--c-primary);color:var(--c-white)}
.section--green h2,.section--green h3{color:var(--c-white)}
.section--cream{background:var(--c-cream)}
.section--parchment{background:var(--c-parchment)}
.text-center{text-align:center}
.gold-text{color:var(--c-accent)}
.white-text{color:var(--c-white)}

/* Label tag */
.label-tag{
  display:inline-block;
  font-family:var(--f-body);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--c-accent);
  margin-bottom:var(--sp-xs);
}

/* Divider */
.divider{width:52px;height:3px;background:linear-gradient(90deg,var(--c-accent),var(--c-accent-lt));margin:var(--sp-sm) 0 var(--sp-md);border-radius:2px}
.divider--center{margin-left:auto;margin-right:auto}

/* Section header */
.section-header{margin-bottom:var(--sp-lg)}
.section-header p{margin-top:var(--sp-sm)}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.82rem 1.9rem;
  font-family:var(--f-body);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:var(--r-sm);border:2px solid transparent;
  cursor:pointer;transition:all var(--t-med) var(--ease);text-decoration:none;white-space:nowrap;
}
.btn--primary{background:var(--c-accent);color:var(--c-dark);border-color:var(--c-accent)}
.btn--primary:hover{background:var(--c-accent-lt);border-color:var(--c-accent-lt);color:var(--c-dark);box-shadow:var(--sh-accent);transform:translateY(-2px)}
.btn--outline{background:transparent;color:var(--c-white);border-color:rgba(255,255,255,.55)}
.btn--outline:hover{background:var(--c-white);color:var(--c-dark);border-color:var(--c-white);transform:translateY(-2px)}
.btn--outline-green{background:transparent;color:var(--c-primary);border-color:var(--c-primary)}
.btn--outline-green:hover{background:var(--c-primary);color:var(--c-white);transform:translateY(-2px)}
.btn--green{background:var(--c-primary);color:var(--c-white);border-color:var(--c-primary)}
.btn--green:hover{background:var(--c-dark);border-color:var(--c-dark);color:var(--c-white);transform:translateY(-2px)}
.btn--sm{padding:.58rem 1.2rem;font-size:.75rem}
.btn--lg{padding:1rem 2.4rem;font-size:.88rem}
.btn--block{width:100%;justify-content:center}
.btn-group{display:flex;flex-wrap:wrap;gap:var(--sp-sm);align-items:center}

/* =========================================================
   SITE HEADER — topbar + green nav + logo
   ========================================================= */

/* ── Black topbar ──────────────────────────────────────── */
.site-topbar {
  background: #000;
  padding: .34rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.topbar-phones {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--c-accent-lt);
}
.topbar-phones .tp-label {
  color: rgba(255,255,255,.85);
  font-weight: 600;
  font-style: italic;
  font-size: .68rem;
  margin-right: .15rem;
}
.topbar-phones .tp-sep { color: rgba(255,255,255,.45); font-size: .75rem; }
.topbar-phones a {
  color: var(--c-accent-lt);
  text-decoration: none;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  transition: color var(--t-fast) var(--ease);
}
.topbar-phones a:hover { color: #fff; }
@media (max-width: 540px) { .site-topbar { display: none; } }

/* ── Green sticky header ────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--c-dark);
  box-shadow: 0 2px 16px rgba(0,0,0,.3);
  transition: box-shadow var(--t-med) var(--ease);
}
.site-header.scrolled {
  background: rgba(26,51,36,.97);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 28px rgba(0,0,0,.45);
}

/* 3-column grid: logo | nav | util */
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-sm);
  padding: .6rem 0;
  min-height: 72px;
}

/* ── Logo ────────────────────────────────────────────────── */
.site-logo { flex-shrink: 0; }
.site-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* The actual logo image — full size in the green bar */
.nav-logo-img,
.site-logo img,
.site-logo .custom-logo-link img {
  height: 54px !important;
  width: auto !important;
  max-width: 240px;
  display: block;
  transition: opacity var(--t-fast) var(--ease);
  /* ensure visibility on dark background */
  filter: brightness(1.05);
}
.site-logo a:hover .nav-logo-img,
.site-logo a:hover img { opacity: .85; }

/* WP wraps the logo in <a class="custom-logo-link"> */
.site-logo .custom-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* ── Primary nav ─────────────────────────────────────────── */
.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
}
.primary-nav > ul {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0; padding: 0;
  gap: 0;
}
.primary-nav > ul > li { position: relative; }

/* Top-level nav links */
.primary-nav > ul > li > a {
  display: flex;
  align-items: center;
  gap: .14rem;
  padding: .5rem .68rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.84);
  border-radius: 3px;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.primary-nav > ul > li > a:hover,
.primary-nav > ul > li.current-menu-item > a,
.primary-nav > ul > li.current-menu-parent > a {
  color: var(--c-accent-lt);
  background: rgba(255,255,255,.07);
}

/* Dropdown arrow */
.nav-arrow {
  font-size: .5rem; opacity: .5;
  display: inline-block;
  transition: transform .2s var(--ease);
  margin-left: .08rem; line-height: 1;
}
.primary-nav > ul > li:hover > a .nav-arrow { transform: rotate(180deg); }

/* ── Dropdown ──────────────────────────────────────────── */
.primary-nav .sub-menu {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 200px;
  padding-top: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
  z-index: 200;
}
.primary-nav > ul > li:hover .sub-menu,
.primary-nav > ul > li:focus-within .sub-menu {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}
.primary-nav .sub-menu-inner {
  background: var(--c-white);
  border-radius: var(--r-md);
  box-shadow: 0 8px 32px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.08);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-accent);
  padding: .45rem .4rem;
  list-style: none; margin: 0;
  position: relative;
}
.primary-nav .sub-menu-inner::before {
  content: ''; position: absolute;
  top: -9px; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent;
  border-top: none; border-bottom-color: var(--c-accent);
}
.primary-nav .sub-menu li { display: block; }
.primary-nav .sub-menu li a {
  display: block;
  padding: .55rem 1rem;
  font-size: .76rem; font-weight: 500;
  letter-spacing: .025em; text-transform: none;
  color: var(--c-body); border-radius: var(--r-sm);
  white-space: nowrap; text-decoration: none;
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              padding-left var(--t-fast) var(--ease);
}
.primary-nav .sub-menu li a:hover {
  color: var(--c-primary); background: var(--c-pale); padding-left: 1.2rem;
}

/* ── Header util ─────────────────────────────────────────── */
.header-util {
  flex-shrink: 0;
  display: flex; align-items: center; gap: .55rem;
}
.header-util .btn--primary {
  font-size: .7rem; padding: .5rem 1.1rem; letter-spacing: .06em;
}

/* ── Hamburger ───────────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  width: 38px; height: 38px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 3px; cursor: pointer; gap: 5px;
  transition: background var(--t-fast) var(--ease);
}
.hamburger:hover { background: rgba(255,255,255,.14); }
.hamburger span {
  display: block; width: 18px; height: 2px;
  background: var(--c-white); border-radius: 2px;
  transition: all var(--t-med) var(--ease);
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Responsive: shrink nav text before hamburger kicks in ── */
@media (max-width: 1280px) {
  .primary-nav > ul > li > a { padding: .48rem .52rem; font-size: .68rem; }
  .nav-logo-img, .site-logo img, .site-logo .custom-logo-link img { height: 48px !important; }
}
@media (max-width: 1100px) {
  .primary-nav > ul > li > a { padding: .46rem .4rem; font-size: .63rem; letter-spacing: .055em; }
  .header-util .btn--primary { font-size: .64rem; padding: .46rem .88rem; }
  .nav-logo-img, .site-logo img, .site-logo .custom-logo-link img { height: 44px !important; }
}
@media (max-width: 960px) {
  .primary-nav > ul > li > a { padding: .44rem .3rem; font-size: .58rem; letter-spacing: .04em; }
  .nav-logo-img, .site-logo img, .site-logo .custom-logo-link img { height: 40px !important; }
}

/* Mobile — hamburger takes over */
@media (max-width: 880px) {
  .primary-nav         { display: none; }
  .header-util .btn--primary { display: none; }
  .hamburger           { display: flex; }
}

/* ── Mobile nav drawer ────────────────────────────────────── */
.mobile-nav {
  display: none;
  background: var(--c-dark);
  border-top: 1px solid rgba(255,255,255,.07);
  max-height: 0; overflow: hidden;
  transition: max-height .35s var(--ease);
}
.mobile-nav.open { max-height: 100vh; overflow-y: auto; }
.mobile-nav > ul { padding: var(--sp-sm) 0 var(--sp-md); list-style: none; margin: 0; }
.mobile-nav > ul > li > a {
  display: flex; justify-content: space-between; align-items: center;
  padding: .82rem var(--sp-md);
  font-size: .88rem; font-weight: 600;
  letter-spacing: .055em; text-transform: uppercase;
  color: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.mobile-nav > ul > li > a:hover,
.mobile-nav > ul > li.current-menu-item > a { color: var(--c-accent-lt); }
.mobile-toggle-icon { font-size: .7rem; opacity: .5; transition: transform .2s var(--ease); flex-shrink: 0; }
.mobile-nav > ul > li.mob-open > a .mobile-toggle-icon { transform: rotate(180deg); }
.mobile-nav .sub-menu { background: rgba(0,0,0,.22); display: none; list-style: none; margin: 0; padding: 0; }
.mobile-nav .sub-menu.mob-open { display: block; }
.mobile-nav .sub-menu .sub-menu-inner { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0; }
.mobile-nav .sub-menu .sub-menu-inner::before { display: none; }
.mobile-nav .sub-menu li a {
  display: block;
  padding: .72rem var(--sp-md) .72rem calc(var(--sp-md) + 1.1rem);
  font-size: .82rem; color: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(255,255,255,.05);
  text-decoration: none; transition: color var(--t-fast) var(--ease);
}
.mobile-nav .sub-menu li a:hover { color: var(--c-accent-lt); }
.mobile-phones {
  display: flex;
  background: rgba(0,0,0,.3);
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mobile-phones a {
  flex: 1; text-align: center; padding: .72rem .4rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .03em;
  color: var(--c-accent-lt);
  border-right: 1px solid rgba(255,255,255,.07);
  text-decoration: none; transition: color var(--t-fast) var(--ease);
}
.mobile-phones a:last-child { border-right: none; }
.mobile-phones a:hover { color: #fff; }
.mobile-nav-cta {
  padding: var(--sp-sm) var(--sp-md) var(--sp-md);
  display: flex; flex-direction: column; gap: .42rem;
}
.mobile-nav-cta .btn { justify-content: center; }

/* ── Gold accent line ─────────────────────────────────────── */
.gold-line {
  height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--c-accent) 20%,
    var(--c-accent-lt) 50%,
    var(--c-accent) 80%, transparent);
}

/* ── Skip link ────────────────────────────────────────────── */
.skip-link { position: absolute; top: -100px; left: 0; padding: .5rem 1rem; background: var(--c-accent); color: var(--c-dark); font-weight: 700; z-index: 9999; transition: top var(--t-fast); }
.skip-link:focus { top: 0; }


/* =========================================================
   HOMEPAGE HERO
   ========================================================= */
/* HERO — Treatment A: NY State map full-bleed cover with dark green overlay */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(26,51,36,.72) 0%, rgba(26,51,36,.45) 60%, rgba(26,51,36,.78) 100%),
    url('assets/img/ny-state-map.jpg') center/cover no-repeat;
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: var(--sp-2xl) 0;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(184,154,104,.14);
  border: 1px solid rgba(184,154,104,.38);
  border-radius: 100px;
  padding: .38rem .95rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent-lt);
  margin-bottom: var(--sp-md);
}
.hero-dot {
  width: 6px; height: 6px;
  background: var(--c-accent-lt);
  border-radius: 50%;
  animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.45; transform:scale(.8); }
}
.hero h1 { color: var(--c-white); max-width: 680px; margin-bottom: var(--sp-md); }
.hero h1 em { color: var(--c-accent-lt); font-style: italic; }
.hero .lead { color: rgba(255,255,255,.78); max-width: 540px; margin-bottom: var(--sp-lg); }
.hero-notice {
  display: inline-block;
  margin-top: var(--sp-sm);
  padding: .55rem 1rem;
  background: rgba(255,255,255,.06);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: .78rem;
  color: rgba(255,255,255,.72);
  font-style: italic;
}
.hero-notice strong { color: var(--c-accent-lt); font-style: normal; }

/* Stats bar below hero */
.stats-bar { background: var(--c-dark); padding: var(--sp-lg) 0; }
.stats-inner { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-item { text-align: center; padding: var(--sp-md); position: relative; }
.stat-item + .stat-item::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: rgba(255,255,255,.1); }
.stat-num { font-family: var(--f-display); font-size: clamp(1.8rem,3.5vw,3rem); font-weight: 700; color: var(--c-accent-lt); line-height: 1; }
.stat-lbl { font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: .3rem; }
@media(max-width:640px) { .stats-inner { grid-template-columns: repeat(2,1fr); } .stat-item+.stat-item::before { display: none; } }

/* =========================================================
   PAGE HERO (inner pages)
   ========================================================= */
.page-hero { background: linear-gradient(135deg,var(--c-dark) 0%,var(--c-primary) 100%); padding: var(--sp-xl) 0; position: relative; overflow: hidden; }
.page-hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(60deg,rgba(184,154,104,.04) 0,rgba(184,154,104,.04) 1px,transparent 1px,transparent 38px); pointer-events: none; }
.page-hero-content { position: relative; z-index: 1; }
.page-hero-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: .65rem; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.35); margin-bottom: .55rem; list-style: none; padding: 0; }
.page-hero-crumbs a { color: rgba(255,255,255,.46); text-decoration: none; transition: color var(--t-fast) var(--ease); }
.page-hero-crumbs a:hover { color: var(--c-accent-lt); }
.page-hero-crumbs .bc-sep { color: rgba(255,255,255,.2); }
.page-hero-crumbs .bc-current { color: rgba(255,255,255,.52); }
.page-hero h1 { color: var(--c-white); margin-bottom: .35rem; }
.page-hero .page-sub { color: rgba(255,255,255,.65); font-size: .98rem; margin: 0; }

/* =========================================================
   CREDENTIAL STRIP
   ========================================================= */
.cred-strip { background: var(--c-pale); border-top: 1px solid var(--c-mist); border-bottom: 1px solid var(--c-mist); padding: .65rem 0; }
.cred-inner { display: flex; align-items: center; justify-content: center; gap: var(--sp-lg); flex-wrap: wrap; }
.cred-item { display: flex; align-items: center; gap: .45rem; font-size: .75rem; font-weight: 600; letter-spacing: .04em; color: var(--c-mid); }
.cred-item .cred-icon { font-size: 1.1rem; }

/* =========================================================
   BUYING MESSAGE WIDGET
   ========================================================= */
.buying-msg-widget { background: var(--c-dark); border-radius: var(--r-md); padding: var(--sp-md); border-left: 3px solid var(--c-accent); position: relative; overflow: hidden; }
.buying-msg-widget::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(45deg,rgba(184,154,104,.04) 0,rgba(184,154,104,.04) 1px,transparent 1px,transparent 18px); pointer-events: none; }
.buying-msg-widget-inner { position: relative; z-index: 1; }
.buying-msg-widget .bmw-tag { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-accent); margin-bottom: .42rem; }
.buying-msg-widget p { font-size: .78rem; color: rgba(255,255,255,.7); line-height: 1.7; margin: 0; }
.buying-msg-widget strong { color: var(--c-accent-lt); font-weight: 600; }

/* =========================================================
   SITE FOOTER
   ========================================================= */
.site-footer { background: var(--c-footer); color: rgba(255,255,255,.65); padding-top: var(--sp-2xl); }
.footer-grid { display: grid; grid-template-columns: 1.55fr repeat(3,1fr); gap: var(--sp-xl); padding-bottom: var(--sp-xl); border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-brand img { height: 48px; margin-bottom: var(--sp-sm); filter: brightness(1.08); }
.footer-brand p { font-size: .82rem; color: rgba(255,255,255,.58); line-height: 1.78; margin: var(--sp-sm) 0; }
.cert-badges { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--sp-sm); }
.cert-badge { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-sm); padding: .3rem .65rem; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-lt); }
.footer-serving { margin-top: var(--sp-md); font-size: .72rem; color: rgba(255,255,255,.35); line-height: 1.72; }
.footer-col h4 { font-family: var(--f-display); font-size: 1.05rem; font-weight: 600; color: var(--c-white); margin-bottom: var(--sp-sm); padding-bottom: .55rem; border-bottom: 1px solid rgba(184,154,104,.28); }
.footer-col ul { display: flex; flex-direction: column; gap: .3rem; }
.footer-col ul li a { font-size: .8rem; color: rgba(255,255,255,.55); display: flex; align-items: center; gap: .38rem; transition: color var(--t-fast) var(--ease); }
.footer-col ul li a::before { content: '›'; color: var(--c-accent); font-weight: 700; }
.footer-col ul li a:hover { color: var(--c-accent-lt); }
.footer-contact-list { display: flex; flex-direction: column; gap: .65rem; }
.fci { display: flex; gap: .55rem; align-items: flex-start; }
.fci-icon { flex-shrink: 0; color: var(--c-accent); font-size: .9rem; margin-top: .1rem; }
.fci-text { font-size: .8rem; color: rgba(255,255,255,.6); line-height: 1.5; }
.fci-text a { color: var(--c-accent-lt); }
.fci-text a:hover { color: var(--c-white); }
.footer-bottom { padding: var(--sp-md) 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-sm); }
.footer-bottom .copy { font-size: .75rem; color: rgba(255,255,255,.3); }
.footer-bottom .copy a { color: rgba(255,255,255,.3); }
.footer-btm-links { display: flex; gap: var(--sp-sm); }
.footer-btm-links a { font-size: .73rem; color: rgba(255,255,255,.3); }
.footer-btm-links a:hover { color: var(--c-accent-lt); }

/* =========================================================
   CONTACT INFO CARD
   ========================================================= */
.contact-info-card { background: linear-gradient(135deg,var(--c-dark),var(--c-primary)); border-radius: var(--r-lg); padding: var(--sp-lg); color: var(--c-white); }
.contact-info-card h3 { color: var(--c-accent-lt); margin-bottom: var(--sp-md); }
.ci-item { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: var(--sp-md); padding-bottom: var(--sp-md); border-bottom: 1px solid rgba(255,255,255,.1); }
.ci-item:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.ci-icon { flex-shrink: 0; font-size: 1.2rem; margin-top: .1rem; color: var(--c-accent-lt); }
.ci-label { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: .18rem; }
.ci-value { font-size: .9rem; color: var(--c-white); margin: 0; }
.ci-value a { color: var(--c-accent-lt); font-weight: 700; }
.ci-value a:hover { color: var(--c-white); }

/* =========================================================
   COMPACT SIDEBAR
   ========================================================= */
.sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: .75rem; }
.sidebar .info-box { margin-bottom: 0; }
.info-box { background: var(--c-parchment); border-radius: var(--r-md); padding: var(--sp-md); border: 1px solid var(--c-border); margin-bottom: var(--sp-sm); }
.info-box--dark { background: linear-gradient(135deg,var(--c-dark),var(--c-primary)); color: var(--c-white); }
.info-box--dark h4 { color: var(--c-accent-lt); border-bottom-color: rgba(184,154,104,.28); }
.info-box h4 { font-size: .95rem; margin-bottom: .65rem; padding-bottom: .5rem; border-bottom: 1px solid var(--c-border); }
.info-box p { font-size: .83rem; color: var(--c-slate); line-height: 1.65; margin-bottom: .55rem; }
.info-box--dark p { color: rgba(255,255,255,.72); }
.info-box ul { display: flex; flex-direction: column; gap: .32rem; list-style: none; }
.info-box ul li { font-size: .82rem; color: var(--c-slate); display: flex; align-items: flex-start; gap: .4rem; }
.info-box ul li::before { content: '✓'; color: var(--c-primary); font-weight: 700; flex-shrink: 0; }
.info-box--dark ul li { color: rgba(255,255,255,.75); }
.info-box--dark ul li::before { color: var(--c-accent-lt); }
.info-box a { color: var(--c-primary); font-weight: 600; }
.info-box--dark a { color: var(--c-accent-lt); }
.info-box .phone-list { display: flex; flex-direction: column; gap: .28rem; }
.info-box .phone-list a { font-size: .88rem; font-weight: 700; color: var(--c-primary); }
.info-box--dark .phone-list a { color: var(--c-accent-lt); }
.info-box .phone-list a:hover { color: var(--c-accent); }
.quick-links { list-style: none; }
.quick-links li { border-bottom: 1px solid var(--c-border); }
.quick-links li:last-child { border-bottom: none; }
.quick-links li a { display: flex; align-items: center; justify-content: space-between; padding: .55rem 0; font-size: .82rem; color: var(--c-primary); font-weight: 500; transition: color var(--t-fast) var(--ease); }
.quick-links li a::after { content: '›'; color: var(--c-accent); font-size: 1rem; }
.quick-links li a:hover { color: var(--c-accent); }

/* =========================================================
   FORMS
   ========================================================= */
.form-group { margin-bottom: var(--sp-sm); }
label, .form-label { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-body); margin-bottom: .32rem; }
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],textarea,select { width: 100%; padding: .72rem .95rem; border: 1.5px solid var(--c-border); border-radius: var(--r-sm); font-family: var(--f-body); font-size: .9rem; color: var(--c-body); background: var(--c-ivory); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); -webkit-appearance: none; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(60,102,69,.12); }
textarea { min-height: 130px; resize: vertical; }
.wpcf7-submit, button[type=submit] { display: inline-flex; align-items: center; gap: .45rem; padding: .82rem 1.9rem; font-family: var(--f-body); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: var(--r-sm); border: 2px solid var(--c-accent); background: var(--c-accent); color: var(--c-dark); cursor: pointer; transition: all var(--t-med) var(--ease); }
.wpcf7-submit:hover, button[type=submit]:hover { background: var(--c-accent-lt); border-color: var(--c-accent-lt); box-shadow: var(--sh-accent); }
.form-wrap { background: var(--c-white); border-radius: var(--r-lg); padding: var(--sp-lg); box-shadow: var(--sh-sm); border: 1px solid var(--c-border); }
.form-wrap h3 { margin-bottom: var(--sp-md); }

/* =========================================================
   ACCORDION
   ========================================================= */
.accordion-item { border: 1px solid var(--c-border); border-radius: var(--r-sm); overflow: hidden; margin-bottom: .45rem; }
.accordion-btn { width: 100%; background: var(--c-white); border: none; cursor: pointer; padding: 1rem var(--sp-md); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-sm); text-align: left; font-family: var(--f-body); font-size: .92rem; font-weight: 600; color: var(--c-body); transition: background var(--t-fast) var(--ease); }
.accordion-btn:hover { background: var(--c-pale); }
.accordion-btn.active { background: var(--c-pale); color: var(--c-dark); }
.acc-icon { flex-shrink: 0; font-size: 1.15rem; color: var(--c-primary); transition: transform var(--t-med) var(--ease); }
.accordion-btn.active .acc-icon { transform: rotate(45deg); }
.accordion-body { display: none; padding: var(--sp-sm) var(--sp-md) var(--sp-md); background: var(--c-pale); color: var(--c-slate); font-size: .88rem; line-height: 1.82; border-top: 1px solid var(--c-border); }
.accordion-body.open { display: block; }

/* =========================================================
   PAGE LAYOUTS
   ========================================================= */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); align-items: start; }
.main-sidebar { display: grid; grid-template-columns: 1fr 280px; gap: var(--sp-xl); align-items: start; }
.three-col { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-md); }
.four-col { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-md); }
.specialties-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: var(--sp-md); }

/* =========================================================
   SERVICE & SPECIALTY CARDS
   ========================================================= */
.service-card { background: var(--c-white); border-radius: var(--r-md); padding: var(--sp-lg) var(--sp-md); text-align: center; border: 1px solid var(--c-border); transition: all var(--t-med) var(--ease); position: relative; overflow: hidden; }
.service-card .s-img { margin: calc(-1 * var(--sp-lg)) calc(-1 * var(--sp-md)) var(--sp-md); height: 180px; overflow: hidden; background: var(--c-primary); }
.service-card .s-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.service-card:hover .s-img img { transform: scale(1.05); }
.service-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--c-primary),var(--c-accent)); transform: scaleX(0); transform-origin: left; transition: transform var(--t-med) var(--ease); }
.service-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--c-mist); }
.service-card:hover::after { transform: scaleX(1); }
.service-card .s-icon { width: 60px; height: 60px; background: linear-gradient(135deg,var(--c-pale),var(--c-mist)); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--sp-md); font-size: 1.55rem; }
.service-card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.service-card p { color: var(--c-slate); font-size: .88rem; line-height: 1.7; margin-bottom: var(--sp-sm); }
.specialty-card { background: var(--c-white); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-border); transition: all var(--t-med) var(--ease); display: flex; flex-direction: column; }
.specialty-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.spec-header { padding: var(--sp-md); background: linear-gradient(135deg,var(--c-dark),var(--c-primary)); color: var(--c-white); }
.spec-header h3 { color: var(--c-accent-lt); font-size: 1.3rem; margin-bottom: .2rem; }
.spec-header .spec-sub { color: rgba(255,255,255,.65); font-size: .8rem; }
.spec-header .spec-icon { font-size: 1.85rem; margin-bottom: .45rem; }
.spec-body { padding: var(--sp-md); flex: 1; display: flex; flex-direction: column; }
.spec-body p { color: var(--c-slate); font-size: .87rem; line-height: 1.72; flex: 1; margin-bottom: var(--sp-sm); }
.spec-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .76rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; color: var(--c-primary); margin-top: auto; }
.spec-link:hover { color: var(--c-accent); }

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials-section { background: linear-gradient(135deg,var(--c-dark),#1f3a28); color: var(--c-white); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(290px,1fr)); gap: var(--sp-md); }
.testi-card { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: var(--sp-md); position: relative; }
.testi-card::before { content: '\201C'; font-family: var(--f-display); font-size: 4.5rem; line-height: 1; color: var(--c-accent); opacity: .38; position: absolute; top: .5rem; left: 1rem; pointer-events: none; }
.testi-card p { font-style: italic; color: rgba(255,255,255,.82); line-height: 1.82; position: relative; z-index: 1; padding-top: 1.5rem; margin-bottom: var(--sp-sm); }
.testi-attr { padding-top: var(--sp-sm); border-top: 1px solid rgba(255,255,255,.1); }
.testi-name { font-weight: 700; font-size: .82rem; color: var(--c-accent-lt); margin: 0; }
.testi-loc { font-size: .75rem; color: rgba(255,255,255,.45); margin: 0; }

/* =========================================================
   TIP CARDS
   ========================================================= */
.tips-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-md); }
.tip-card { display: flex; gap: var(--sp-sm); align-items: flex-start; padding: var(--sp-md); background: var(--c-white); border-radius: var(--r-md); border: 1px solid var(--c-border); }
.tip-icon { flex-shrink: 0; width: 46px; height: 46px; background: var(--c-pale); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.tip-card h4 { font-size: .97rem; margin-bottom: .28rem; }
.tip-card p { font-size: .83rem; color: var(--c-slate); margin: 0; }

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band { background: linear-gradient(135deg,var(--c-primary) 0%,var(--c-dark) 100%); padding: var(--sp-xl) 0; position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 18px); }
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-lg); flex-wrap: wrap; }
.cta-inner h2 { color: var(--c-white); margin-bottom: .4rem; }
.cta-inner p { color: rgba(255,255,255,.72); max-width: 520px; margin: 0; }
.cta-copy { flex: 1 1 400px; }
.cta-subtext { margin-top: .6rem !important; font-size: .9rem !important; }
.cta-phone-line { margin-top: 1rem !important; font-size: .9rem !important; color: rgba(255,255,255,.9) !important; }
.cta-phone-line strong { color: #ffffff; display: block; margin-bottom: .25rem; font-size: .88rem; letter-spacing: .02em; }
.cta-phone-num { color: var(--c-accent) !important; text-decoration: none !important; font-weight: 600; white-space: nowrap; }
.cta-phone-num:hover { color: #ffffff !important; text-decoration: underline !important; }
.cta-phone-sep { color: rgba(255,255,255,.3); }

/* =========================================================
   STAT COUNTER STRIP
   ========================================================= */
.stats-section { background: var(--c-dark); padding: var(--sp-lg) 0; }
.stats-inner { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-item { text-align: center; padding: var(--sp-md); position: relative; }
.stat-item+.stat-item::before { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: rgba(255,255,255,.1); }
.stat-num { font-family: var(--f-display); font-size: clamp(2rem,4vw,3.2rem); font-weight: 700; color: var(--c-accent-lt); line-height: 1; }
.stat-label { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: .3rem; }

/* =========================================================
   PAGINATION
   ========================================================= */
.pagination { display: flex; gap: .3rem; justify-content: center; flex-wrap: wrap; margin-top: var(--sp-lg); }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r-sm); border: 1.5px solid var(--c-border); font-size: .83rem; font-weight: 500; color: var(--c-body); transition: all var(--t-fast) var(--ease); text-decoration: none; }
.pagination .page-numbers:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pagination .page-numbers.current { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }

/* =========================================================
   ENTRY CONTENT (page editor content)
   ========================================================= */
.entry-content h2,.entry-content h3,.entry-content h4 { margin-top: var(--sp-lg); margin-bottom: var(--sp-sm); }
.entry-content p { color: var(--c-slate); line-height: 1.88; }
.entry-content ul,.entry-content ol { padding-left: 1.5rem; margin-bottom: 1.2rem; }
.entry-content li { margin-bottom: .38rem; color: var(--c-slate); }
.entry-content ol { list-style: decimal; }
.entry-content ul { list-style: disc; }
.entry-content a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--c-accent); }
.entry-content blockquote { border-left: 4px solid var(--c-accent); margin: var(--sp-md) 0; padding: var(--sp-sm) var(--sp-md); background: var(--c-cream); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-style: italic; color: var(--c-slate); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
  .stats-inner { grid-template-columns: repeat(2,1fr); }
  .stat-item+.stat-item::before { display: none; }
  .main-sidebar { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}
@media(max-width:880px) {
  .tips-grid { grid-template-columns: 1fr 1fr; }
  .three-col { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .cta-inner { flex-direction: column; text-align: center; }
  .cta-inner .btn-group { justify-content: center; }
  .cta-phone-line { text-align: center; }
}
@media(max-width:540px) {
  :root { --sp-xl: 3rem; --sp-2xl: 4.5rem; }
  .tips-grid { grid-template-columns: 1fr; }
  .three-col { grid-template-columns: 1fr; }
  .four-col { grid-template-columns: 1fr 1fr; }
  .specialties-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-md); }
  .stats-inner { grid-template-columns: repeat(2,1fr); }
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes fadeInUp { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
.animate-in { animation: fadeInUp .55s var(--ease) both; }
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.24s}.d4{animation-delay:.32s}

/* =========================================================
   WP CORE CLASSES
   ========================================================= */
.alignleft { float: left; margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright { float: right; margin-left: 1.5rem; margin-bottom: 1rem; }
.aligncenter { display: block; margin: 0 auto var(--sp-md); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.wp-block-image { margin-bottom: var(--sp-md); }
.wp-block-quote { border-left: 4px solid var(--c-accent); padding-left: var(--sp-md); }
.wp-block-separator { border: none; border-top: 2px solid var(--c-border); margin: var(--sp-lg) 0; }

/* =========================================================
   HIDE HOME NAV ITEM — logo is the home link
   WordPress automatically adds .menu-item-home to the home page item
   ========================================================= */
.primary-nav li.menu-item-home { display: none !important; }
.mobile-nav  li.menu-item-home { display: none !important; }

/* =========================================================
   DARK MODE — Default
   The site loads in dark mode by default.
   Clicking the ☀️ toggle applies .light-mode to <body>
   which restores the original light cream design.

   WHAT STAYS THE SAME IN BOTH MODES:
   · Header / nav (already dark green — unchanged)
   · Footer (already very dark — unchanged)
   · Hero / page hero (already dark green — unchanged)
   · Testimonials section (already dark — unchanged)
   · CTA band (already dark green — unchanged)
   · Stats bar (already dark — unchanged)
   · Info-box--dark sidebar widgets (already dark — unchanged)
   · Buying message widget (already dark — unchanged)
   · Coin show table (built on dark bg — unchanged)
   ========================================================= */

/* ── Dark-mode variable overrides on body:not(.light-mode) ── */
body:not(.light-mode) {
  /* These variables replace the light-mode defaults in :root */
  --c-heading:   #c8b480;     /* warm gold — readable on dark bg */
  --c-body:      #d4cfc4;     /* warm cream text */
  --c-slate:     #a8b0a4;     /* secondary body text */
  --c-muted:     #788a7a;     /* placeholder / meta text */
  --c-border:    #263828;     /* dark green border */
  --c-ivory:     #131a14;     /* main page background */
  --c-parchment: #192119;     /* alternate section bg */
  --c-cream:     #192119;     /* same — section alt */
  --c-pale:      #1a2819;     /* very slightly lighter alt bg */

  background: #131a14;
  color: #d4cfc4;
}

/* ── Headings in light-context areas ── */
/* (Dark sections already have explicit color: #fff or accent-lt) */
body:not(.light-mode) h1,
body:not(.light-mode) h2,
body:not(.light-mode) h3,
body:not(.light-mode) h4,
body:not(.light-mode) h5,
body:not(.light-mode) h6 { color: #c8b480; }

/* Restore white text on dark-bg contexts */
body:not(.light-mode) .hero h1,
body:not(.light-mode) .page-hero h1,
body:not(.light-mode) .cta-inner h2,
body:not(.light-mode) .section--dark h2,
body:not(.light-mode) .section--dark h3,
body:not(.light-mode) .section--green h2,
body:not(.light-mode) .section--green h3,
body:not(.light-mode) .spec-header h3,
body:not(.light-mode) .contact-info-card h3,
body:not(.light-mode) .footer-col h4 { color: inherit; }

/* ── Links ── */
body:not(.light-mode) a { color: #7aaa80; }
body:not(.light-mode) a:hover { color: var(--c-accent-lt); }
/* Preserve link colors inside dark sections */
body:not(.light-mode) .site-header a,
body:not(.light-mode) .site-footer a,
body:not(.light-mode) .hero a,
body:not(.light-mode) .page-hero a,
body:not(.light-mode) .cta-band a,
body:not(.light-mode) .testimonials-section a,
body:not(.light-mode) .info-box--dark a { color: var(--c-accent-lt); }

/* ── Sections ── */
body:not(.light-mode) .section--cream { background: #192119; }
body:not(.light-mode) .section--parchment { background: #192119; }
body:not(.light-mode) .section--cream .label-tag,
body:not(.light-mode) .section--parchment .label-tag { color: var(--c-accent); }
body:not(.light-mode) .section--cream p,
body:not(.light-mode) .section--parchment p,
body:not(.light-mode) .section-header p,
body:not(.light-mode) .lead { color: #a8b0a4; }

/* ── Credential strip ── */
body:not(.light-mode) .cred-strip {
  background: #151e16;
  border-color: #263828;
}
body:not(.light-mode) .cred-item { color: #7aaa80; }

/* ── Service cards ── */
body:not(.light-mode) .service-card {
  background: #1d2b1e;
  border-color: #263828;
}
body:not(.light-mode) .service-card h3 { color: #c8b480; }
body:not(.light-mode) .service-card p { color: #a8b0a4; }
body:not(.light-mode) .service-card .s-icon {
  background: linear-gradient(135deg, #1a3324, #263828);
}

/* ── Tip cards ── */
body:not(.light-mode) .tip-card {
  background: #1d2b1e;
  border-color: #263828;
}
body:not(.light-mode) .tip-card h4 { color: #c8b480; }
body:not(.light-mode) .tip-card p { color: #a8b0a4; }
body:not(.light-mode) .tip-icon { background: #1a3324; }

/* ── Specialty cards (spec-body is light) ── */
body:not(.light-mode) .specialty-card {
  background: #1d2b1e;
  border-color: #263828;
}
body:not(.light-mode) .spec-body { background: #1d2b1e; }
body:not(.light-mode) .spec-body p { color: #a8b0a4; }
body:not(.light-mode) .spec-link { color: #7aaa80; }

/* ── Info box (light variant only — dark variant stays as-is) ── */
body:not(.light-mode) .info-box:not(.info-box--dark) {
  background: #1d2b1e;
  border-color: #263828;
}
body:not(.light-mode) .info-box:not(.info-box--dark) h4 {
  color: #c8b480;
  border-bottom-color: #263828;
}
body:not(.light-mode) .info-box:not(.info-box--dark) p { color: #a8b0a4; }
body:not(.light-mode) .info-box:not(.info-box--dark) ul li { color: #a8b0a4; }
body:not(.light-mode) .info-box:not(.info-box--dark) a { color: #7aaa80; }
body:not(.light-mode) .info-box .phone-list a { color: #7aaa80; }

/* ── Quick links ── */
body:not(.light-mode) .quick-links li { border-bottom-color: #263828; }
body:not(.light-mode) .quick-links li a { color: #7aaa80; }
body:not(.light-mode) .quick-links li a::after { color: var(--c-accent); }

/* ── Accordion ── */
body:not(.light-mode) .accordion-item { border-color: #263828; }
body:not(.light-mode) .accordion-btn {
  background: #1d2b1e;
  color: #d4cfc4;
}
body:not(.light-mode) .accordion-btn:hover { background: #253628; }
body:not(.light-mode) .accordion-btn.active {
  background: #253628;
  color: #c8b480;
}
body:not(.light-mode) .accordion-body {
  background: #192119;
  color: #a8b0a4;
  border-top-color: #263828;
}

/* ── Entry content (WordPress editor blocks) ── */
body:not(.light-mode) .entry-content p { color: #b8b4ac; }
body:not(.light-mode) .entry-content li { color: #b8b4ac; }
body:not(.light-mode) .entry-content h2,
body:not(.light-mode) .entry-content h3,
body:not(.light-mode) .entry-content h4 { color: #c8b480; }
body:not(.light-mode) .entry-content a { color: #7aaa80; }
body:not(.light-mode) .entry-content blockquote {
  background: #192119;
  color: #a8b0a4;
}
body:not(.light-mode) .entry-content strong { color: #d4cfc4; }

/* ── Dropdown nav menus ── */
body:not(.light-mode) .primary-nav .sub-menu-inner {
  background: #1e2d20;
  border-color: #263828;
  border-top-color: var(--c-accent);
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
}
body:not(.light-mode) .primary-nav .sub-menu li a { color: #d4cfc4; }
body:not(.light-mode) .primary-nav .sub-menu li a:hover {
  background: #253628;
  color: #7aaa80;
}

/* ── Forms ── */
body:not(.light-mode) input[type=text],
body:not(.light-mode) input[type=email],
body:not(.light-mode) input[type=tel],
body:not(.light-mode) input[type=url],
body:not(.light-mode) input[type=number],
body:not(.light-mode) textarea,
body:not(.light-mode) select {
  background: #1a2219;
  color: #d4cfc4;
  border-color: #263828;
}
body:not(.light-mode) input::placeholder,
body:not(.light-mode) textarea::placeholder { color: #788a7a; }
body:not(.light-mode) label,
body:not(.light-mode) .form-label { color: #d4cfc4; }
body:not(.light-mode) .form-wrap {
  background: #1d2b1e;
  border-color: #263828;
  box-shadow: none;
}

/* ── Pagination ── */
body:not(.light-mode) .pagination .page-numbers {
  background: #1d2b1e;
  border-color: #263828;
  color: #d4cfc4;
}
body:not(.light-mode) .pagination .page-numbers:hover {
  border-color: #7aaa80;
  color: #7aaa80;
}
body:not(.light-mode) .pagination .page-numbers.current {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* ── WP core blocks ── */
body:not(.light-mode) .wp-block-separator { border-color: #263828; }
body:not(.light-mode) .wp-block-quote {
  background: #192119;
  border-left-color: var(--c-accent);
}

/* ── Layout: main+sidebar area ── */
body:not(.light-mode) .notice-box {
  background: #192119;
  border-color: #263828;
}

/* =========================================================
   SIDEBAR WIDGET BUTTONS — improved contrast
   Fix for "Get an Offer Today" buttons being hard to read
   ========================================================= */
.info-box--dark .btn {
  width: 100%;
  justify-content: center;
  margin-top: .55rem;
}
/* First button: bright gold with dark text — easy to read */
.info-box--dark .btn--primary {
  background: var(--c-accent-lt);
  border-color: var(--c-accent-lt);
  color: #1a3324;
  font-weight: 800;
  letter-spacing: .07em;
}
.info-box--dark .btn--primary:hover {
  background: #fff;
  border-color: #fff;
  color: #1a3324;
  box-shadow: 0 4px 14px rgba(255,255,255,.18);
  transform: translateY(-2px);
}
/* Second button: white outline — clearly distinct */
.info-box--dark .btn--primary + .btn--primary,
.info-box--dark .btn--primary ~ .btn--primary {
  background: transparent;
  border-color: rgba(255,255,255,.55);
  color: #fff;
  font-weight: 600;
}
.info-box--dark .btn--primary + .btn--primary:hover,
.info-box--dark .btn--primary ~ .btn--primary:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
  color: #fff;
  box-shadow: none;
}

/* =========================================================
   DARK / LIGHT MODE TOGGLE BUTTON
   Sits in the topbar, right of the phone numbers
   ========================================================= */
.theme-toggle {
  display: none !important;
  align-items: center;
  gap: .32rem;
  margin-left: .9rem;
  padding: .26rem .62rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--f-body);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  transition: all 200ms ease;
  white-space: nowrap;
  vertical-align: middle;
  line-height: 1;
}
.theme-toggle:hover {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.4);
  color: rgba(255,255,255,.9);
}
.theme-toggle .toggle-icon {
  font-size: .82rem;
  line-height: 1;
}
.theme-toggle .toggle-label { line-height: 1; }
@media(max-width:540px) { .theme-toggle { display: none; } }

/* ── Smooth transitions when switching modes ── */
body,
.service-card,
.tip-card,
.specialty-card,
.spec-body,
.info-box:not(.info-box--dark),
.cred-strip,
.accordion-btn,
.accordion-body,
.primary-nav .sub-menu-inner,
.entry-content,
.form-wrap,
input, textarea, select {
  transition:
    background-color 300ms ease,
    color 300ms ease,
    border-color 300ms ease;
}

/* =========================================================
   LIGHT MODE RESTORE — .light-mode class on <body>
   Restores the original cream/parchment design exactly
   ========================================================= */
body.light-mode {
  background: #faf7f0;
  color: #2d2d2d;
  --c-heading:   #1a3324;
  --c-body:      #2d2d2d;
  --c-slate:     #4a4a4a;
  --c-muted:     #7a7a7a;
  --c-border:    #ddd8cc;
  --c-ivory:     #faf7f0;
  --c-parchment: #f5f0e5;
  --c-cream:     #ede8d5;
  --c-pale:      #eaf2eb;
}
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 { color: #1a3324; }
body.light-mode .hero h1,
body.light-mode .page-hero h1,
body.light-mode .cta-inner h2,
body.light-mode .section--dark h2,
body.light-mode .section--dark h3,
body.light-mode .spec-header h3,
body.light-mode .footer-col h4 { color: inherit; }
body.light-mode a { color: #3c6645; }
body.light-mode a:hover { color: var(--c-accent); }
body.light-mode .site-header a,
body.light-mode .site-footer a,
body.light-mode .info-box--dark a { color: var(--c-accent-lt); }
body.light-mode .section--cream { background: #ede8d5; }
body.light-mode .section--parchment { background: #f5f0e5; }
body.light-mode .cred-strip { background: #eaf2eb; border-color: #c4d9c6; }
body.light-mode .cred-item { color: #527a57; }
body.light-mode .service-card { background: #fff; border-color: #ddd8cc; }
body.light-mode .service-card h3 { color: #1a3324; }
body.light-mode .service-card p { color: #4a4a4a; }
body.light-mode .service-card .s-icon { background: linear-gradient(135deg,#eaf2eb,#c4d9c6); }
body.light-mode .tip-card { background: #fff; border-color: #ddd8cc; }
body.light-mode .tip-card h4 { color: #1a3324; }
body.light-mode .tip-card p { color: #4a4a4a; }
body.light-mode .tip-icon { background: #eaf2eb; }
body.light-mode .specialty-card { background: #fff; border-color: #ddd8cc; }
body.light-mode .spec-body { background: #fff; }
body.light-mode .spec-body p { color: #4a4a4a; }
body.light-mode .spec-link { color: #3c6645; }
body.light-mode .info-box:not(.info-box--dark) { background: #f5f0e5; border-color: #ddd8cc; }
body.light-mode .info-box:not(.info-box--dark) h4 { color: #1a3324; border-bottom-color: #ddd8cc; }
body.light-mode .info-box:not(.info-box--dark) p { color: #4a4a4a; }
body.light-mode .info-box:not(.info-box--dark) a { color: #3c6645; }
body.light-mode .info-box .phone-list a { color: #3c6645; }
body.light-mode .quick-links li { border-bottom-color: #ddd8cc; }
body.light-mode .quick-links li a { color: #3c6645; }
body.light-mode .accordion-item { border-color: #ddd8cc; }
body.light-mode .accordion-btn { background: #fff; color: #2d2d2d; }
body.light-mode .accordion-btn:hover { background: #eaf2eb; }
body.light-mode .accordion-body { background: #eaf2eb; color: #4a4a4a; border-top-color: #ddd8cc; }
body.light-mode .entry-content p { color: #4a4a4a; }
body.light-mode .entry-content li { color: #4a4a4a; }
body.light-mode .entry-content h2,
body.light-mode .entry-content h3,
body.light-mode .entry-content h4 { color: #1a3324; }
body.light-mode .entry-content a { color: #3c6645; }
body.light-mode .entry-content blockquote { background: #ede8d5; color: #4a4a4a; }
body.light-mode .primary-nav .sub-menu-inner { background: #fff; border-color: #ddd8cc; }
body.light-mode .primary-nav .sub-menu li a { color: #2d2d2d; }
body.light-mode .primary-nav .sub-menu li a:hover { background: #eaf2eb; color: #3c6645; }
body.light-mode input[type=text],
body.light-mode input[type=email],
body.light-mode input[type=tel],
body.light-mode input[type=url],
body.light-mode input[type=number],
body.light-mode textarea,
body.light-mode select { background: #faf7f0; color: #2d2d2d; border-color: #ddd8cc; }
body.light-mode label,
body.light-mode .form-label { color: #2d2d2d; }
body.light-mode .form-wrap { background: #fff; border-color: #ddd8cc; box-shadow: var(--sh-sm); }
body.light-mode .pagination .page-numbers { background: #fff; border-color: #ddd8cc; color: #2d2d2d; }
body.light-mode .wp-block-separator { border-color: #ddd8cc; }
body.light-mode .wp-block-quote { background: #ede8d5; }
body.light-mode .section-header p,
body.light-mode .lead { color: #4a4a4a; }

/* =========================================================
   v1.3 FIXES — Header, Buttons, Mobile Nav, Footer Logo
   All values via CSS custom properties from Customizer.
   ========================================================= */

/* ──────────────────────────────────────────────────────────
   FIX 1 — MOBILE NAV: base was display:none so open class
   could not animate. Override to display:block — visibility
   is controlled entirely by max-height + overflow:hidden.
   ────────────────────────────────────────────────────────── */
.mobile-nav {
  display: block;
}

/* ──────────────────────────────────────────────────────────
   FIX 2 — HEADER LAYOUT: more breathing room, taller bar,
   nav links bottom-aligned for that premium editorial look.
   ────────────────────────────────────────────────────────── */
.header-inner {
  padding: .9rem 0 0;
  min-height: 80px;
  align-items: flex-end;
  padding-bottom: 0;
}
.site-logo {
  padding-bottom: .75rem;
}
.nav-logo-img,
.site-logo img,
.site-logo .custom-logo-link img {
  height: 58px !important;
}
.primary-nav {
  align-self: flex-end;
}
.primary-nav > ul {
  align-items: flex-end;
}
.primary-nav > ul > li > a {
  padding: .72rem .68rem .7rem;
  border-radius: 4px 4px 0 0;
  position: relative;
}
.header-util {
  padding-bottom: .65rem;
  align-self: flex-end;
}

/* ──────────────────────────────────────────────────────────
   FIX 3 — PREMIUM NAV HOVER: animated gold underline that
   expands from center. Current-page item stays lit.
   ────────────────────────────────────────────────────────── */
.primary-nav > ul > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 2px;
  background: var(--c-accent-lt);
  border-radius: 2px 2px 0 0;
  transition: left 220ms var(--ease), right 220ms var(--ease);
}
.primary-nav > ul > li > a:hover::after,
.primary-nav > ul > li.current-menu-item > a::after,
.primary-nav > ul > li.current-menu-parent > a::after,
.primary-nav > ul > li.current-page-ancestor > a::after {
  left: 6px;
  right: 6px;
}
.primary-nav > ul > li > a:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.primary-nav > ul > li.current-menu-item > a,
.primary-nav > ul > li.current-menu-parent > a {
  color: var(--c-accent-lt);
  background: rgba(255,255,255,.06);
}

/* ──────────────────────────────────────────────────────────
   FIX 4 — PRIMARY CTA BUTTON: uses Customizer-controlled
   --c-cta, --c-cta-text, --c-cta-hover CSS variables.
   Rich amber gold default = maximum contrast + conversion.
   ────────────────────────────────────────────────────────── */
.btn--primary {
  background: var(--c-cta, #c8901a);
  color: var(--c-cta-text, #ffffff);
  border-color: var(--c-cta, #c8901a);
  box-shadow: 0 2px 10px rgba(200, 144, 26, .25);
}
.btn--primary:hover {
  background: var(--c-cta-hover, #e8a820);
  border-color: var(--c-cta-hover, #e8a820);
  color: var(--c-cta-text, #ffffff);
  box-shadow: 0 6px 24px rgba(200, 144, 26, .45);
  transform: translateY(-2px);
}

/* Header "Appraise Now" — slightly more prominent in nav context */
.header-util .btn--primary {
  font-size: .7rem;
  padding: .55rem 1.2rem;
  letter-spacing: .07em;
  font-weight: 800;
  box-shadow: 0 2px 12px rgba(200,144,26,.35);
}
.header-util .btn--primary:hover {
  box-shadow: 0 4px 20px rgba(200,144,26,.55);
}

/* Dark info-box buttons — keep contrast inside dark widget */
.info-box--dark .btn--primary {
  background: var(--c-cta, #c8901a);
  border-color: var(--c-cta, #c8901a);
  color: var(--c-cta-text, #ffffff);
  font-weight: 800;
}
.info-box--dark .btn--primary:hover {
  background: var(--c-cta-hover, #e8a820);
  border-color: var(--c-cta-hover, #e8a820);
  color: var(--c-cta-text, #ffffff);
}
/* Second button in dark box — clear white outline */
.info-box--dark .btn--primary + .btn--primary,
.info-box--dark .btn--primary ~ .btn--primary {
  background: transparent;
  border-color: rgba(255,255,255,.55);
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}
.info-box--dark .btn--primary + .btn--primary:hover,
.info-box--dark .btn--primary ~ .btn--primary:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
  color: #fff;
  box-shadow: none;
  transform: translateY(-2px);
}

/* Outline button — legible on dark and light backgrounds */
.btn--outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.65);
}
.btn--outline:hover {
  background: #fff;
  color: var(--c-dark);
  border-color: #fff;
  transform: translateY(-2px);
}

/* Mobile nav CTA area buttons */
.mobile-nav-cta .btn--primary {
  background: var(--c-cta, #c8901a);
  color: var(--c-cta-text, #ffffff);
  border-color: var(--c-cta, #c8901a);
}
.mobile-nav-cta .btn--outline {
  border-color: rgba(255,255,255,.5);
  color: rgba(255,255,255,.9);
}

/* Dark mode: ensure CTA button stays vibrant */
body:not(.light-mode) .btn--primary {
  background: var(--c-cta, #c8901a);
  color: var(--c-cta-text, #ffffff);
  border-color: var(--c-cta, #c8901a);
}
body:not(.light-mode) .btn--primary:hover {
  background: var(--c-cta-hover, #e8a820);
  border-color: var(--c-cta-hover, #e8a820);
}

/* ──────────────────────────────────────────────────────────
   FIX 5 — FOOTER LOGO: was squishing due to fixed height
   without explicit width:auto. Now uses object-fit.
   ────────────────────────────────────────────────────────── */
.footer-brand img,
.footer-brand .custom-logo-link img {
  height: auto !important;
  max-height: 64px;
  width: auto !important;
  max-width: 210px;
  display: block;
  object-fit: contain;
  margin-bottom: var(--sp-sm);
  filter: brightness(1.08);
}
.footer-brand .custom-logo-link {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--sp-sm);
}

/* ──────────────────────────────────────────────────────────
   FIX 6 — HAMBURGER: ensure it's always accessible and
   positioned correctly in top-right on mobile.
   ────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .header-inner {
    align-items: center;
    padding: .75rem 0;
    min-height: 64px;
  }
  .site-logo { padding-bottom: 0; }
  .header-util { padding-bottom: 0; align-self: center; }
  .primary-nav { display: none; }
  .hamburger {
    display: flex !important;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,.1);
    border: 1.5px solid rgba(255,255,255,.28);
    border-radius: 6px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    transition: background 170ms ease, border-color 170ms ease;
    flex-shrink: 0;
  }
  .hamburger:hover,
  .hamburger.active {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.5);
  }
  .hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 280ms ease;
  }
  .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Mobile nav visible when open */
  .mobile-nav {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.4,0,.2,1);
    background: var(--c-dark);
    border-top: 1px solid rgba(255,255,255,.07);
  }
  .mobile-nav.open {
    max-height: 100vh;
    overflow-y: auto;
  }

  .nav-logo-img,
  .site-logo img,
  .site-logo .custom-logo-link img {
    height: 44px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   FIX 7 — DARK MODE: adjust button shadow/accent for CTA
   ────────────────────────────────────────────────────────── */
body:not(.light-mode) .service-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
body:not(.light-mode) .specialty-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.4); }

/* =========================================================
   v1.4 FIXES — Logo, Header, Buttons
   ========================================================= */

/* ── Header: centered + taller so logo never clips ────────── */
.header-inner {
  align-items: center !important;
  padding: 1rem 0 !important;
  min-height: 86px !important;
}
.site-logo,
.primary-nav,
.header-util {
  padding-bottom: 0 !important;
  align-self: center !important;
}
.primary-nav > ul {
  align-items: center !important;
}
.primary-nav > ul > li > a {
  padding: .62rem .68rem !important;
  border-radius: 4px !important;
}
/* Underline from bottom of link, not from bottom of header */
.primary-nav > ul > li > a::after {
  bottom: -3px !important;
}

/* ── Footer logo: unconstrained width, proper containment ─── */
.footer-brand img,
.footer-brand .custom-logo-link img {
  height: auto !important;
  width: auto !important;
  max-height: 72px !important;
  max-width: 280px !important;
  object-fit: contain !important;
  display: block !important;
  margin-bottom: var(--sp-sm) !important;
}
.footer-brand .custom-logo-link {
  display: inline-block !important;
  margin-bottom: var(--sp-sm) !important;
}
.footer-brand { max-width: 340px; }

/* ── CTA BUTTON — premium gold/green flip design ───────────
   Default:  bright gold bg  + very dark green text
   Hover:    dark green bg   + bright gold text
   This uses the theme's own palette for maximum coherence.
   All colours adjustable: Customize → 🔘 Buttons
   ────────────────────────────────────────────────────────── */

/* Override: hover text uses the CTA bg colour (elegant flip) */
:root {
  --c-cta-hover-text: var(--c-cta, #d4a82a);
}

.btn--primary {
  background:   var(--c-cta,      #d4a82a) !important;
  color:        var(--c-cta-text, #1a2210) !important;
  border-color: var(--c-cta,      #d4a82a) !important;
  box-shadow:   0 2px 12px rgba(212,168,42,.28) !important;
  font-weight:  800 !important;
}
.btn--primary:hover {
  background:   var(--c-cta-hover,      #1a3324) !important;
  border-color: var(--c-cta-hover,      #1a3324) !important;
  color:        var(--c-cta-hover-text, #d4a82a) !important;
  box-shadow:   0 6px 20px rgba(26,51,36,.45)   !important;
  transform:    translateY(-2px) !important;
}

/* Header "Appraise Now" — same button, slightly more compact */
.header-util .btn--primary {
  font-size:      .7rem !important;
  padding:        .55rem 1.25rem !important;
  letter-spacing: .07em !important;
}

/* Dark info-box first button — same gold/dark treatment */
.info-box--dark .btn--primary {
  background:   var(--c-cta,      #d4a82a) !important;
  color:        var(--c-cta-text, #1a2210) !important;
  border-color: var(--c-cta,      #d4a82a) !important;
}
.info-box--dark .btn--primary:hover {
  background:   var(--c-cta-hover,      #1a3324) !important;
  border-color: var(--c-cta-hover,      #1a3324) !important;
  color:        var(--c-cta-hover-text, #d4a82a) !important;
}
/* Second button in dark box stays as white outline */
.info-box--dark .btn--primary + .btn--primary,
.info-box--dark .btn--primary ~ .btn--primary {
  background:   transparent !important;
  border-color: rgba(255,255,255,.55) !important;
  color:        rgba(255,255,255,.92) !important;
  box-shadow:   none !important;
  font-weight:  600 !important;
}
.info-box--dark .btn--primary + .btn--primary:hover,
.info-box--dark .btn--primary ~ .btn--primary:hover {
  background:   rgba(255,255,255,.1) !important;
  border-color: #fff !important;
  color:        #fff !important;
}

/* CTA band buttons — override outline for contrast on green band */
.cta-band .btn--primary {
  background:   var(--c-cta,      #d4a82a) !important;
  color:        var(--c-cta-text, #1a2210) !important;
  border-color: var(--c-cta,      #d4a82a) !important;
}
.cta-band .btn--outline {
  border-color: rgba(255,255,255,.7) !important;
  color: #fff !important;
}
.cta-band .btn--outline:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: #fff !important;
  color: #fff !important;
}

/* Mobile nav CTA */
.mobile-nav-cta .btn--primary {
  background:   var(--c-cta,      #d4a82a) !important;
  color:        var(--c-cta-text, #1a2210) !important;
  border-color: var(--c-cta,      #d4a82a) !important;
}

/* Hero buttons — primary is gold/dark, outline stays white */
.hero .btn--primary,
.front-page .btn--primary {
  background:   var(--c-cta,      #d4a82a) !important;
  color:        var(--c-cta-text, #1a2210) !important;
  border-color: var(--c-cta,      #d4a82a) !important;
}

/* =========================================================
   v1.5 — COMPREHENSIVE LIGHT/DARK MODE FIX

   ROOT CAUSE: "color: inherit" was inheriting the wrong
   colour for dark-section headings in both modes.

   FIX: All permanently-dark sections (hero, page-hero,
   cta-band, testimonials, stats-bar) get explicit white
   text — these sections are always dark green regardless
   of mode, so their text is always white. No inherit.
   ========================================================= */

/* ── 1. DARK SECTIONS: always white text, both modes ──────── */
/* These elements are always on a dark green background.
   Mode switching does not affect them. */
.hero h1,
.hero h2,
.hero .lead,
.hero .hero-badge,
.hero-notice,
.hero-notice strong,
.hero-dot { color: revert !important; }

/* Clean explicit declarations */
.hero h1                  { color: #ffffff !important; }
.hero .lead               { color: rgba(255,255,255,.82) !important; }
.hero-badge               { color: var(--c-accent-lt) !important; }
.hero-notice              { color: rgba(255,255,255,.72) !important; }
.hero-notice strong       { color: var(--c-accent-lt) !important; }

.page-hero h1             { color: #ffffff !important; }
.page-hero .page-sub      { color: rgba(255,255,255,.72) !important; }
.page-hero .label-tag     { color: var(--c-accent-lt) !important; }
.page-hero-crumbs a       { color: rgba(255,255,255,.5) !important; }
.page-hero-crumbs .bc-current { color: rgba(255,255,255,.6) !important; }
.page-hero-crumbs .bc-sep { color: rgba(255,255,255,.25) !important; }

.cta-inner h2             { color: #ffffff !important; }
.cta-inner p              { color: rgba(255,255,255,.78) !important; }
.cta-band .label-tag      { color: var(--c-accent-lt) !important; }

.testimonials-section h2  { color: #ffffff !important; }
.testimonials-section .label-tag { color: var(--c-accent-lt) !important; }
.testi-card p             { color: rgba(255,255,255,.85) !important; }
.testi-name               { color: var(--c-accent-lt) !important; }
.testi-loc                { color: rgba(255,255,255,.5) !important; }

.section--dark h1,
.section--dark h2,
.section--dark h3         { color: var(--c-accent-lt) !important; }
.section--dark p          { color: rgba(255,255,255,.78) !important; }

.stats-bar .stat-num      { color: var(--c-accent-lt) !important; }
.stats-bar .stat-lbl      { color: rgba(255,255,255,.55) !important; }

/* ── 2. LIGHT MODE: page content area ─────────────────────── */
/* When light-mode is active, the cream page content has
   proper dark text. Headings in content are dark green.
   Dark sections above are already fixed via explicit rules. */

body.light-mode { color: #2d2d2d; }
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 { color: #1a3324; }

/* Preserve headings that live inside dark sections */
body.light-mode .hero h1,
body.light-mode .page-hero h1,
body.light-mode .cta-inner h2,
body.light-mode .section--dark h2,
body.light-mode .section--dark h3,
body.light-mode .testimonials-section h2,
body.light-mode .spec-header h3,
body.light-mode .footer-col h4,
body.light-mode .buying-msg-widget *,
body.light-mode .info-box--dark * { color: unset; }

/* Specifically restore dark-section headings */
body.light-mode .page-hero h1    { color: #ffffff !important; }
body.light-mode .hero h1         { color: #ffffff !important; }
body.light-mode .cta-inner h2    { color: #ffffff !important; }
body.light-mode .section--dark h2 { color: var(--c-accent-lt) !important; }

/* ── 3. LIGHT MODE: page body/content text ─────────────────── */
body.light-mode .section--cream { background: #ede8d5; }
body.light-mode .section--parchment { background: #f5f0e5; }
body.light-mode .section--cream h2,
body.light-mode .section--cream h3,
body.light-mode .section--parchment h2,
body.light-mode .section--parchment h3 { color: #1a3324 !important; }
body.light-mode .section--cream p,
body.light-mode .section--parchment p { color: #4a4a4a !important; }
body.light-mode .lead { color: #4a4a4a !important; }

/* Entry content on pages */
body.light-mode .entry-content h2,
body.light-mode .entry-content h3,
body.light-mode .entry-content h4 { color: #1a3324 !important; }
body.light-mode .entry-content p,
body.light-mode .entry-content li { color: #4a4a4a !important; }
body.light-mode .entry-content a  { color: #3c6645 !important; }

/* Service cards */
body.light-mode .service-card { background: #fff; border-color: #ddd8cc; }
body.light-mode .service-card h3 { color: #1a3324 !important; }
body.light-mode .service-card p  { color: #4a4a4a !important; }
body.light-mode .service-card .s-icon { background: linear-gradient(135deg,#eaf2eb,#c4d9c6); }

/* Tip cards */
body.light-mode .tip-card { background: #fff; border-color: #ddd8cc; }
body.light-mode .tip-card h4 { color: #1a3324 !important; }
body.light-mode .tip-card p  { color: #4a4a4a !important; }
body.light-mode .tip-icon { background: #eaf2eb; }

/* Specialty cards */
body.light-mode .spec-body  { background: #fff; }
body.light-mode .spec-body p { color: #4a4a4a !important; }
body.light-mode .spec-link  { color: #3c6645 !important; }

/* Info boxes */
body.light-mode .info-box:not(.info-box--dark) {
  background: #f5f0e5;
  border-color: #ddd8cc;
}
body.light-mode .info-box:not(.info-box--dark) h4 { color: #1a3324 !important; border-bottom-color: #ddd8cc; }
body.light-mode .info-box:not(.info-box--dark) p  { color: #4a4a4a !important; }
body.light-mode .info-box:not(.info-box--dark) ul li { color: #4a4a4a !important; }
body.light-mode .info-box .phone-list a { color: #3c6645 !important; }
body.light-mode .quick-links li { border-bottom-color: #ddd8cc; }
body.light-mode .quick-links li a { color: #3c6645 !important; }
body.light-mode .section-header h2,
body.light-mode .section-header h3 { color: #1a3324 !important; }
body.light-mode .section-header p  { color: #4a4a4a !important; }

/* ── 4. LIGHT MODE: outline buttons ────────────────────────── */
/* Default: dark green outline for content areas */
body.light-mode .btn--outline {
  color: var(--c-dark) !important;
  border-color: var(--c-dark) !important;
  background: transparent !important;
}
body.light-mode .btn--outline:hover {
  background: var(--c-dark) !important;
  color: #ffffff !important;
  border-color: var(--c-dark) !important;
}
/* Preserve white outline on sections that stay dark */
body.light-mode .hero .btn--outline,
body.light-mode .cta-band .btn--outline,
body.light-mode .testimonials-section .btn--outline,
body.light-mode .mobile-nav-cta .btn--outline {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.65) !important;
  background: transparent !important;
}
body.light-mode .hero .btn--outline:hover,
body.light-mode .cta-band .btn--outline:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* ── 5. DARK MODE: fix hero/page text (was inheriting wrong) ─ */
body:not(.light-mode) .hero h1    { color: #ffffff !important; }
body:not(.light-mode) .hero .lead { color: rgba(255,255,255,.82) !important; }
body:not(.light-mode) .page-hero h1 { color: #ffffff !important; }
body:not(.light-mode) .page-hero .page-sub { color: rgba(255,255,255,.72) !important; }
body:not(.light-mode) .cta-inner h2 { color: #ffffff !important; }
body:not(.light-mode) .cta-inner p  { color: rgba(255,255,255,.78) !important; }

/* ── 6. CRED STRIP: light mode ─────────────────────────────── */
body.light-mode .cred-strip { background: #eaf2eb; border-color: #c4d9c6; }
body.light-mode .cred-item  { color: #3c6645 !important; }

/* ── 7. DROPDOWN: light mode ───────────────────────────────── */
body.light-mode .primary-nav .sub-menu-inner { background: #fff; border-color: #ddd8cc; }
body.light-mode .primary-nav .sub-menu li a  { color: #2d2d2d !important; }
body.light-mode .primary-nav .sub-menu li a:hover { background: #eaf2eb; color: #3c6645 !important; }

/* ── 8. ACCORDION: light mode ──────────────────────────────── */
body.light-mode .accordion-item  { border-color: #ddd8cc; }
body.light-mode .accordion-btn   { background: #fff; color: #2d2d2d !important; }
body.light-mode .accordion-btn:hover { background: #eaf2eb; }
body.light-mode .accordion-body  { background: #eaf2eb; color: #4a4a4a !important; border-top-color: #ddd8cc; }

/* ── 9. FORMS: light mode ──────────────────────────────────── */
body.light-mode input[type=text],
body.light-mode input[type=email],
body.light-mode input[type=tel],
body.light-mode input[type=url],
body.light-mode textarea,
body.light-mode select {
  background: #faf7f0 !important;
  color: #2d2d2d !important;
  border-color: #ddd8cc !important;
}
body.light-mode label,
body.light-mode .form-label { color: #2d2d2d !important; }
body.light-mode .form-wrap  { background: #fff !important; border-color: #ddd8cc !important; }

/* ── 10. LINKS: light mode body text ───────────────────────── */
body.light-mode a { color: #3c6645; }
body.light-mode a:hover { color: var(--c-accent-dk); }
/* Preserve link colours in dark sections */
body.light-mode .site-header a,
body.light-mode .site-footer a,
body.light-mode .hero a,
body.light-mode .cta-band a,
body.light-mode .info-box--dark a { color: var(--c-accent-lt); }

/* ── 11. SEPARATORS / BORDERS ──────────────────────────────── */
body.light-mode .wp-block-separator { border-color: #ddd8cc; }
body.light-mode .divider { opacity: 1; }

/* =========================================================
   v1.6 — COMPREHENSIVE FIX
   1. Topbar always readable (immune to light-mode overrides)
   2. Hero body text legible in dark mode
   3. Gutenberg button blocks styled to match theme
   4. Credential strip single column on mobile
   5. Outline buttons readable on dark mobile backgrounds
   6. Hamburger confirmed top-right on mobile
   ========================================================= */

/* ── 1. TOPBAR: always black bg, always gold/white text ──────
   The topbar is inside <header> now and is dark regardless
   of light/dark mode — override any body-level color leaks. */
.site-topbar {
  background: #000 !important;
  position: relative;
  z-index: 2;
}
.site-topbar .topbar-inner { color: var(--c-accent-lt); }
.site-topbar .topbar-phones,
.site-topbar .topbar-phones .tp-label,
.site-topbar .topbar-phones .tp-sep { color: inherit; }
.site-topbar .topbar-phones a {
  color: var(--c-accent-lt) !important;
  text-decoration: none !important;
}
.site-topbar .topbar-phones a:hover { color: #ffffff !important; }
.site-topbar .topbar-phones .tp-label { color: rgba(255,255,255,.85) !important; }
.site-topbar .topbar-phones .tp-sep  { color: rgba(255,255,255,.22) !important; }
.site-topbar .theme-toggle { color: rgba(255,255,255,.62) !important; }
.site-topbar .theme-toggle:hover { color: #ffffff !important; background: rgba(255,255,255,.15) !important; }

/* Adjust site-header box shadow — topbar is now inside */
.site-header {
  box-shadow: 0 2px 20px rgba(0,0,0,.35) !important;
}
.site-header.scrolled {
  box-shadow: 0 2px 32px rgba(0,0,0,.55) !important;
}

/* ── 2. HERO BODY TEXT: full opacity white in dark mode ──────
   rgba(255,255,255,.78) on deep green can look faint.
   Boost to near-full white for WCAG AA compliance. */
.hero .lead {
  color: rgba(255,255,255,.92) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
}
body:not(.light-mode) .hero .lead {
  color: rgba(255,255,255,.92) !important;
}
.hero-badge {
  color: var(--c-accent-lt) !important;
  border-color: rgba(212,185,138,.5) !important;
  background: rgba(212,185,138,.12) !important;
}
.hero-notice { color: rgba(255,255,255,.82) !important; }

/* ── 3. GUTENBERG BUTTON BLOCKS ──────────────────────────────
   WordPress editor buttons use .wp-block-button__link —
   style them identically to .btn--primary / .btn--outline. */

/* Primary (default) Gutenberg button */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wp-block-button:not(.is-style-outline) .wp-element-button {
  background:    var(--c-cta, #d4a82a) !important;
  color:         var(--c-cta-text, #1a2210) !important;
  border:        2px solid var(--c-cta, #d4a82a) !important;
  font-family:   var(--f-body) !important;
  font-size:     .82rem !important;
  font-weight:   800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  border-radius: 4px !important;
  padding:       .82rem 1.9rem !important;
  text-decoration: none !important;
  display:       inline-flex !important;
  align-items:   center !important;
  transition:    all 280ms ease !important;
  box-shadow:    0 2px 10px rgba(212,168,42,.28) !important;
  cursor:        pointer !important;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-element-button:hover {
  background:    var(--c-cta-hover, #1a3324) !important;
  border-color:  var(--c-cta-hover, #1a3324) !important;
  color:         var(--c-cta, #d4a82a) !important;
  box-shadow:    0 6px 20px rgba(26,51,36,.4) !important;
  transform:     translateY(-2px) !important;
}

/* Outline Gutenberg button — light mode */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline .wp-element-button {
  background:    transparent !important;
  font-family:   var(--f-body) !important;
  font-size:     .82rem !important;
  font-weight:   700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  border-radius: 4px !important;
  padding:       .82rem 1.9rem !important;
  text-decoration: none !important;
  display:       inline-flex !important;
  align-items:   center !important;
  transition:    all 280ms ease !important;
  cursor:        pointer !important;
  box-shadow:    none !important;
  /* default (light mode) */
  border:        2px solid var(--c-dark, #1a3324) !important;
  color:         var(--c-dark, #1a3324) !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-element-button:hover {
  background:  var(--c-dark, #1a3324) !important;
  color:       #ffffff !important;
  transform:   translateY(-2px) !important;
}

/* Dark mode outline buttons: use light green so they're visible */
body:not(.light-mode) .wp-block-button.is-style-outline .wp-block-button__link,
body:not(.light-mode) .wp-block-button.is-style-outline .wp-element-button {
  border-color: var(--c-light, #7aaa80) !important;
  color:        var(--c-light, #7aaa80) !important;
}
body:not(.light-mode) .wp-block-button.is-style-outline .wp-block-button__link:hover,
body:not(.light-mode) .wp-block-button.is-style-outline .wp-element-button:hover {
  background:   var(--c-light, #7aaa80) !important;
  border-color: var(--c-light, #7aaa80) !important;
  color:        var(--c-dark, #1a3324) !important;
}

/* Outline buttons inside dark sections stay white */
.cta-band .wp-block-button.is-style-outline .wp-block-button__link,
.hero .wp-block-button.is-style-outline .wp-block-button__link,
.page-hero .wp-block-button.is-style-outline .wp-block-button__link,
.section--dark .wp-block-button.is-style-outline .wp-block-button__link {
  border-color: rgba(255,255,255,.65) !important;
  color:        #ffffff !important;
}
.cta-band .wp-block-button.is-style-outline .wp-block-button__link:hover,
.hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background:   rgba(255,255,255,.14) !important;
  border-color: #ffffff !important;
  color:        #ffffff !important;
}

/* ── Gutenberg buttons inside columns — equal width, no wrap ──
   When a Button block sits inside a Column, stretch it to fill
   the full column so all buttons are identical width regardless
   of label length. Padding is tightened so short columns don't
   force line-breaks on longer labels like "Coins & Bullion". */
.wp-block-column .wp-block-buttons {
  width: 100% !important;
}
.wp-block-column .wp-block-buttons .wp-block-button {
  width: 100% !important;
}
.wp-block-column .wp-block-buttons .wp-block-button .wp-block-button__link,
.wp-block-column .wp-block-buttons .wp-block-button .wp-element-button {
  width:          100% !important;
  display:        flex !important;
  justify-content:center !important;
  text-align:     center !important;
  padding:        .75rem .6rem !important;
  font-size:      .72rem !important;
  white-space:    nowrap !important;
  box-sizing:     border-box !important;
}

/* ── Gutenberg 4-column blocks — mobile stacking fix ──────────
   Default WP behavior stacks ALL columns to 1-wide on mobile,
   separating images from their buttons. Force 2-across so each
   image+button pair stays together at every screen size.       */
@media (max-width: 781px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap !important;
    display:   flex !important;
  }
  .wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column {
    flex-basis: calc(50% - 1rem) !important;
    min-width:  calc(50% - 1rem) !important;
    width:      calc(50% - 1rem) !important;
  }
}
@media (max-width: 480px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column {
    flex-basis: 100% !important;
    min-width:  100% !important;
    width:      100% !important;
  }
}

/* ── 4. CREDENTIAL STRIP: one per line on mobile ─────────────
   Prevent the sloppy 2+1+1+1 wrapping layout.
   Each credential gets its own full-width row. */
@media (max-width: 768px) {
  .cred-inner {
    flex-direction: column !important;
    align-items:    flex-start !important;
    gap:            .65rem !important;
    padding:        var(--sp-sm) var(--sp-sm) !important;
  }
  .cred-item {
    width: 100% !important;
    justify-content: flex-start !important;
  }
}

/* ── 5. HAMBURGER: confirmed top-right, full touch target ────*/
@media (max-width: 880px) {
  .header-inner {
    grid-template-columns: 1fr auto !important;
    align-items: center !important;
    padding: .7rem 0 !important;
    min-height: 64px !important;
    gap: var(--sp-sm) !important;
  }
  /* logo on left */
  .site-logo { grid-column: 1; grid-row: 1; }
  /* hamburger on right — always visible */
  .header-util {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    align-items: center;
    padding: 0 !important;
  }
  .hamburger {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,.1) !important;
    border: 1.5px solid rgba(255,255,255,.3) !important;
    cursor: pointer !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    flex-shrink: 0 !important;
    transition: background 170ms ease, border-color 170ms ease !important;
  }
  .hamburger:hover,
  .hamburger.active {
    background: rgba(255,255,255,.2) !important;
    border-color: rgba(255,255,255,.55) !important;
  }
  .hamburger span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    transition: all 280ms ease !important;
    pointer-events: none !important;
  }
  .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; }
  .hamburger.active span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
  .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; }
  /* Hide desktop nav and Appraise Now on mobile */
  .primary-nav { display: none !important; }
  .header-util .btn--primary { display: none !important; }
}

/* ── 6. MOBILE NAV: open state guaranteed ────────────────────*/
.mobile-nav          { display: block !important; max-height: 0; overflow: hidden; }
.mobile-nav.open     { max-height: 100vh !important; overflow-y: auto !important; }

/* ── 7. LIGHT MODE: topbar area accessible in light mode ─────
   When body is light-mode, the sticky header's topbar
   still needs to be black with light text. Already handled
   by site-topbar { background: #000 !important } above.
   This rule ensures no light-mode body override bleeds in. */
body.light-mode .site-topbar { background: #000 !important; }
body.light-mode .site-topbar a { color: var(--c-accent-lt) !important; }
body.light-mode .site-topbar a:hover { color: #ffffff !important; }
body.light-mode .site-header { background: var(--c-dark) !important; }

/* ── 8. PAGE CTA BUTTONS: match theme .btn--primary exactly ──
   Some buttons in page.php use .btn--primary which depends
   on --c-cta. Force correct colours as reliable fallback. */
.cta-band .btn--primary {
  background:    var(--c-cta, #d4a82a) !important;
  color:         var(--c-cta-text, #1a2210) !important;
  border-color:  var(--c-cta, #d4a82a) !important;
}
.cta-band .btn--primary:hover {
  background:    var(--c-cta-hover, #1a3324) !important;
  border-color:  var(--c-cta-hover, #1a3324) !important;
  color:         var(--c-cta, #d4a82a) !important;
}

/* =========================================================
   v1.7 — COIN SHOW TABLE + TESTIMONIALS CAROUSEL
   ========================================================= */

/* ── COIN SHOW TABLE ─────────────────────────────────────── */
.show-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-md) 0 0;
  font-size: .87rem;
}
.show-table thead th {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-accent);
  padding: .45rem 1.5rem .45rem 0;
  border-bottom: 2px solid rgba(212,168,42,.22);
  text-align: left;
  white-space: nowrap;
}
.show-table tbody td {
  padding: .72rem 1.5rem .72rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  vertical-align: top;
  line-height: 1.4;
}
.show-table tbody tr:last-child td { border-bottom: none; }
.show-table tbody tr:hover td { background: rgba(255,255,255,.025); }
/* Date column */
.show-table td:first-child {
  font-weight: 600;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  width: 160px;
  min-width: 140px;
}
/* Day column */
.show-table td:nth-child(2) {
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  width: 95px;
  min-width: 80px;
  font-size: .82rem;
}
/* Notes column */
.show-table td:nth-child(3) {
  color: var(--c-accent);
  font-style: italic;
  font-size: .82rem;
}
.show-note {
  font-size: .76rem;
  color: rgba(255,255,255,.3);
  margin-top: .55rem;
  font-style: italic;
}
/* Light mode table */
body.light-mode .show-table thead th { color: var(--c-accent-dk) !important; }
body.light-mode .show-table td:first-child { color: #1a2210 !important; }
body.light-mode .show-table td:nth-child(2) { color: #7a7a7a !important; }
body.light-mode .show-table td:nth-child(3) { color: var(--c-accent-dk) !important; }
body.light-mode .show-table tbody td { border-bottom-color: #ddd8cc !important; }
body.light-mode .show-table tbody tr:hover td { background: rgba(0,0,0,.025) !important; }
body.light-mode .show-note { color: #999 !important; }

/* Notice box (coin shows page alert) */
.notice-box {
  background: rgba(212,168,42,.07);
  border-left: 3px solid var(--c-accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: .8rem var(--sp-md);
}
.notice-box p { color: rgba(255,255,255,.82); font-size: .88rem; margin: 0; line-height: 1.6; }
.notice-box a { color: var(--c-accent-lt); font-weight: 600; }
body.light-mode .notice-box { background: #fdf6e3; }
body.light-mode .notice-box p { color: #4a4a4a !important; }
body.light-mode .notice-box a { color: var(--c-accent-dk); }

/* Show location / time row */
.show-meta { color: rgba(255,255,255,.72) !important; font-size: .88rem; line-height: 1.7; }
body.light-mode .show-meta { color: #4a4a4a !important; }

/* ── TESTIMONIALS CAROUSEL v2 ──────────────────────────────
   Premium compact card design with gold names.
   All 3 display options controlled from Customizer.
   ────────────────────────────────────────────────────────── */

/* Track / page container */
.testi-carousel { position: relative; }
.testi-track { position: relative; overflow: hidden; }
.testi-page {
  display: none;
  gap: 1.1rem;
}
.testi-page.active {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  animation: testiPageIn .38s ease both;
}
@keyframes testiPageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 900px)  { .testi-page.active { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .testi-page.active { grid-template-columns: 1fr; } }

/* Grid mode (all testimonials visible) */
.testi-grid-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
@media (max-width: 900px)  { .testi-grid-v2 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px)  { .testi-grid-v2 { grid-template-columns: 1fr; } }

/* The compact card */
.testi-card-v2 {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md);
  padding: 1.35rem 1.35rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  position: relative;
  transition: background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.testi-card-v2:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(212,185,138,.3);
}

/* Decorative quote mark */
.testi-qmark {
  font-family: var(--f-display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--c-accent);
  opacity: .45;
  font-weight: 700;
  margin-bottom: -.3rem;
  user-select: none;
}

/* Quote text */
.testi-card-v2 blockquote {
  font-style: italic;
  color: rgba(255,255,255,.88);
  line-height: 1.62;
  font-size: .9rem;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  flex: 1;
}

/* Attribution footer */
.testi-footer-v2 {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding-top: .7rem;
  border-top: 1px solid rgba(255,255,255,.08);
  margin-top: auto;
}
/* Name in gold — primary highlight */
.testi-nm-v2 {
  display: block;
  font-weight: 700;
  font-size: .8rem;
  color: var(--c-accent-lt);
  letter-spacing: .03em;
}
/* Location subtle */
.testi-lc-v2 {
  display: block;
  font-size: .72rem;
  color: rgba(255,255,255,.38);
  letter-spacing: .04em;
}

/* ── Navigation bar ──────────────────────────────────────── */
.testi-nav-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin-top: 1.75rem;
}
.testi-btn {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  cursor: pointer;
  transition: all 200ms ease;
  flex-shrink: 0;
}
.testi-btn:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
  color: #fff;
  transform: scale(1.05);
}
.testi-dots { display: flex; align-items: center; gap: .45rem; }
.testi-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease;
}
.testi-dot.active {
  background: var(--c-accent-lt);
  transform: scale(1.4);
}
.testi-dot:hover:not(.active) { background: rgba(255,255,255,.5); }

/* =========================================================
   v1.8 — BLOG SYSTEM
   home.php (listing) + single.php (post)
   Dark/light mode aware — no hardcoded colours.
   ========================================================= */

/* ── Blog listing grid ───────────────────────────────────── */
.blog-main { min-width: 0; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.35rem;
  margin-bottom: var(--sp-lg);
}
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

/* Card */
.blog-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-md);
  border-color: var(--c-mist);
}

/* Featured image */
.blog-card-img-wrap {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-parchment);
  flex-shrink: 0;
}
.blog-card-img-wrap img,
.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-med) var(--ease);
}
.blog-card:hover .blog-card-img-wrap img { transform: scale(1.04); }

/* No-image placeholder */
.blog-card-no-img {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--c-pale), var(--c-mist));
}
.blog-no-img-icon { font-size: 2.2rem; opacity: .45; }

/* Card body */
.blog-card-body {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .42rem;
  flex: 1;
}
.blog-cat-tag {
  display: inline-block;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-accent-dk);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.blog-cat-tag:hover { color: var(--c-primary); }

.blog-card-title {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.28;
  margin: 0;
  color: var(--c-heading);
}
.blog-card-title a { color: inherit; text-decoration: none; }
.blog-card-title a:hover { color: var(--c-primary); }

.blog-card-excerpt {
  font-size: .84rem;
  color: var(--c-slate);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .72rem;
  border-top: 1px solid var(--c-border);
  margin-top: auto;
}
.blog-meta-date {
  font-size: .72rem;
  color: var(--c-muted);
  font-weight: 500;
}
.blog-read-more {
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.blog-read-more:hover { color: var(--c-accent-dk); }

/* Category filter bar */
.blog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  margin-bottom: 1.35rem;
}
.blog-filter-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 100px;
  border: 1.5px solid var(--c-border);
  color: var(--c-body);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}
.blog-filter-tag:hover,
.blog-filter-tag.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* Pagination */
.blog-pagination { margin-top: var(--sp-lg); }
.blog-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .38rem; align-items: center; }
.blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 .7rem;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--c-border);
  font-size: .82rem; font-weight: 500;
  color: var(--c-body); text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}
.blog-pagination .page-numbers:hover { border-color: var(--c-primary); color: var(--c-primary); }
.blog-pagination .page-numbers.current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* Empty state */
.blog-empty { text-align: center; padding: var(--sp-2xl) var(--sp-md); }
.blog-empty-icon { font-size: 3rem; margin-bottom: var(--sp-sm); }
.blog-empty h2 { margin-bottom: .5rem; }
.blog-empty p { color: var(--c-slate); margin-bottom: var(--sp-md); }

/* ── Single post ─────────────────────────────────────────── */
.post-hero-meta {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-top: .5rem;
  font-size: .78rem;
  color: rgba(255,255,255,.5);
  flex-wrap: wrap;
}
.meta-sep { opacity: .38; }

.post-featured-img {
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-lg);
  aspect-ratio: 16 / 9;
}
.post-featured-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.post-body h2 { margin-top: var(--sp-lg); }
.post-body h3 { margin-top: var(--sp-md); }
.post-body img { border-radius: var(--r-sm); margin-bottom: var(--sp-sm); }

/* Tags */
.post-tags {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-top: var(--sp-lg);
  padding-top: var(--sp-md);
  border-top: 1px solid var(--c-border);
}
.post-tags-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-muted);
}
.post-tag {
  font-size: .7rem; font-weight: 600;
  padding: .2rem .58rem;
  border-radius: 100px;
  background: var(--c-pale);
  color: var(--c-primary);
  text-decoration: none;
  border: 1px solid var(--c-mist);
  transition: all var(--t-fast) var(--ease);
}
.post-tag:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* Post prev/next navigation */
.post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
  padding-top: var(--sp-lg);
  border-top: 2px solid var(--c-border);
}
@media (max-width: 480px) { .post-nav { grid-template-columns: 1fr; } }
.post-nav-prev, .post-nav-next { display: flex; flex-direction: column; gap: .28rem; }
.post-nav-next { text-align: right; }
.post-nav-label {
  font-size: .62rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-muted);
}
.post-nav a {
  font-family: var(--f-display);
  font-size: .95rem; font-weight: 600;
  color: var(--c-heading); text-decoration: none;
  line-height: 1.3;
  transition: color var(--t-fast) var(--ease);
}
.post-nav a:hover { color: var(--c-primary); }

/* Related posts list */
.related-posts-list { list-style: none; display: flex; flex-direction: column; }
.related-posts-list li { border-bottom: 1px solid var(--c-border); }
.related-posts-list li:last-child { border-bottom: none; }
.related-posts-list a {
  display: block; padding: .52rem 0;
  font-size: .82rem; font-weight: 500;
  color: var(--c-primary); text-decoration: none;
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.related-posts-list a:hover { color: var(--c-accent-dk); padding-left: .28rem; }

/* ── Dark mode: blog ─────────────────────────────────────── */
body:not(.light-mode) .blog-card {
  background: #1d2b1e;
  border-color: #263828;
}
body:not(.light-mode) .blog-card:hover { border-color: rgba(212,185,138,.28); }
body:not(.light-mode) .blog-card-no-img { background: linear-gradient(135deg,#1a3324,#263828); }
body:not(.light-mode) .blog-cat-tag { color: var(--c-accent); }
body:not(.light-mode) .blog-card-title { color: #c8b480 !important; }
body:not(.light-mode) .blog-card-title a:hover { color: #7aaa80 !important; }
body:not(.light-mode) .blog-card-excerpt { color: #a8b0a4 !important; }
body:not(.light-mode) .blog-card-footer { border-top-color: #263828; }
body:not(.light-mode) .blog-meta-date { color: #788a7a; }
body:not(.light-mode) .blog-read-more { color: #7aaa80; }
body:not(.light-mode) .blog-read-more:hover { color: var(--c-accent-lt); }
body:not(.light-mode) .blog-filter-tag { border-color: #263828; color: #d4cfc4; background: transparent; }
body:not(.light-mode) .blog-pagination .page-numbers { background: #1d2b1e; border-color: #263828; color: #d4cfc4; }
body:not(.light-mode) .blog-pagination .page-numbers:hover { border-color: #7aaa80; color: #7aaa80; }
body:not(.light-mode) .post-tags { border-top-color: #263828; }
body:not(.light-mode) .post-tag { background: #1a3324; color: #7aaa80; border-color: #263828; }
body:not(.light-mode) .post-tag:hover { background: #7aaa80; color: #1a3324; border-color: #7aaa80; }
body:not(.light-mode) .post-nav { border-top-color: #263828; }
body:not(.light-mode) .post-nav a { color: #c8b480 !important; }
body:not(.light-mode) .post-nav a:hover { color: #7aaa80 !important; }
body:not(.light-mode) .related-posts-list li { border-bottom-color: #263828; }
body:not(.light-mode) .related-posts-list a { color: #7aaa80; }
body:not(.light-mode) .related-posts-list a:hover { color: var(--c-accent-lt); }
body:not(.light-mode) .blog-empty p { color: #a8b0a4 !important; }