/*
Theme Name: Solverra Base
Theme URI: https://solverraholistics.com/
Author: MAD Monkey Media LLC
Author URI: https://madmonkey.media/
Description: Native flagship theme for Solverra Holistics. Replaces Divi entirely: header, navigation, footer, WooCommerce, and the design-token surface. Multi-tenant aware (com / us / ecs) via per-site SOLVERRA_TENANT token overrides supplied by the solverra-design-system mu-plugin. Cooperates with (never duplicates) the solverra-* mu-plugin suite. ASCII-only, WCAG 2.2 AA, single H1 per template.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
License URI: https://madmonkey.media/license/
Text Domain: solverra
Tags: e-commerce, custom-menu, custom-logo, featured-images, full-width-template, sticky-post, theme-options, translation-ready

==========================================================================
  This stylesheet carries ONLY:
    1. The WP theme header block above (required by WordPress).
    2. A self-contained :root token FALLBACK (so the theme renders correctly
       even if the solverra-design-system mu-plugin is ever disabled).
       When that mu-plugin IS active it injects its own :root + per-brand
       sheets at wp_head priority 5 -- LATER in the cascade -- and wins, so
       these fallbacks never fight it. Values mirror
       design-system/.../colors_and_type.css verbatim.
    3. Base element styling for native WP content (page.php / single.php /
       archive.php / search.php / 404 / comments) so plain post content looks
       Solverra without Divi.
  Component CSS (homepage / shop / catalog) is enqueued separately by
  functions.php with filemtime() versioning. It is NOT @imported here, so the
  browser does not block on a serial @import chain.
  ASCII-only. Straight quotes + hyphens only. No BOM.
========================================================================== */

/* -------------------------------------------------------------------------
   1. DESIGN TOKENS -- FALLBACK :root (mu-plugin overrides this when active)
   ------------------------------------------------------------------------- */
:root {
  /* BRAND PALETTE */
  --sol-lime:        #8CC63F;
  --sol-lime-bright: #A4DC56;
  --sol-lime-deep:   #6FA82A;
  --sol-lime-fog:    #E7F4D2;
  --sol-lime-mist:   #F4FAE8;

  --sol-forest:      #314426;
  --sol-forest-deep: #1F2C17;
  --sol-forest-mid:  #4D6A3C;
  --sol-forest-soft: #7E9B6A;

  --sol-charcoal:    #606061;
  --sol-charcoal-2:  #8A8A8C;
  --sol-charcoal-3:  #BFBFC0;

  --sol-bone:        #F6F4EC;
  --sol-paper:       #FBFAF4;
  --sol-cream:       #EDE7D3;
  --sol-clay:        #C9A36A;
  --sol-bark:        #5A4632;

  --sol-success: #6FA82A;
  --sol-warning: #D9A441;
  --sol-danger:  #B0432A;
  --sol-info:    #4D6A3C;

  /* SEMANTIC TOKENS -- light surface defaults */
  --bg:        var(--sol-bone);
  --bg-elev:   #FFFFFF;
  --bg-sunken: #EFEBDF;
  --bg-band:   var(--sol-forest);
  --bg-tint:   var(--sol-lime-mist);

  --fg:        var(--sol-forest-deep);
  --fg-2:      var(--sol-charcoal);
  --fg-3:      var(--sol-charcoal-2);
  --fg-mute:   var(--sol-charcoal-3);
  --fg-on-dark:#F6F4EC;
  --fg-accent: var(--sol-forest);

  --brand:     var(--sol-lime);
  --brand-fg:  var(--sol-forest-deep);
  --brand-ink: var(--sol-forest);

  --border:         rgba(31, 44, 23, 0.12);
  --border-strong:  rgba(31, 44, 23, 0.22);
  --border-on-dark: rgba(246, 244, 236, 0.16);

  /* Dual-token aliases (STANDARDS Section 2.1 -- mirrors the mu-plugin) */
  --color-primary:       var(--sol-lime);
  --color-primary-dark:  var(--sol-lime-deep);
  --color-accent:        var(--sol-clay);
  --color-text:          var(--sol-forest-deep);
  --color-text-muted:    var(--sol-charcoal);
  --color-bg:            var(--sol-bone);
  --color-bg-soft:       var(--sol-paper);
  --color-bg-elev:       #FFFFFF;
  --color-border:        rgba(31, 44, 23, 0.12);
  --color-border-strong: rgba(31, 44, 23, 0.22);

  /* TYPOGRAPHY */
  --ff-display: "League Spartan", "Bebas Neue", system-ui, sans-serif;
  --ff-body:    "Manrope", system-ui, sans-serif;
  --ff-serif:   "Fraunces", "Cormorant Garamond", Georgia, serif;
  --ff-mono:    ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, monospace;

  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;
  --fs-6xl: 88px;
  --fs-7xl: 120px;

  --lh-tight: 0.95;
  --lh-snug:  1.12;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --ls-display: -0.02em;
  --ls-eyebrow: 0.16em;
  --ls-caps:    0.08em;

  /* SPACING -- 4pt rhythm */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* RADII */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ELEVATION */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(31, 44, 23, 0.06), 0 1px 1px rgba(31, 44, 23, 0.04);
  --shadow-2: 0 4px 14px rgba(31, 44, 23, 0.08), 0 1px 2px rgba(31, 44, 23, 0.05);
  --shadow-3: 0 14px 32px rgba(31, 44, 23, 0.12), 0 2px 6px rgba(31, 44, 23, 0.06);
  --shadow-lime: 0 8px 24px rgba(140, 198, 63, 0.32);

  --bw-hair: 1px;
  --bw-line: 1.5px;
  --bw-edge: 2px;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;

  --container: 1200px;
  --container-wide: 1360px;
}

/* -------------------------------------------------------------------------
   2. RESET + BASE ELEMENTS (native WP content surface)
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--fg);
  background: var(--bg);
  font-feature-settings: "ss01", "kern";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

img, picture, svg, video { max-width: 100%; height: auto; }
svg { display: block; }

h1, h2, h3, h4, h5, h6 { color: var(--fg); }
h1 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--s-5);
  text-transform: uppercase;
}
h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, var(--fs-4xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--s-4);
  text-transform: uppercase;
}
h3 {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-3);
  text-transform: uppercase;
}
h4 { font-family: var(--ff-body); font-weight: 700; font-size: var(--fs-xl); line-height: var(--lh-snug); margin: 0 0 var(--s-3); }
h5 { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-snug); margin: 0 0 var(--s-2); }
h6 { font-family: var(--ff-body); font-weight: 600; font-size: var(--fs-md); line-height: var(--lh-snug); margin: 0 0 var(--s-2); }

p { margin: 0 0 var(--s-4); text-wrap: pretty; }
.lead { font-size: var(--fs-xl); line-height: 1.45; max-width: 60ch; }
.eyebrow {
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--sol-forest-mid);
  margin: 0 0 var(--s-3);
}
.meta, small { font-size: var(--fs-sm); color: var(--fg-2); }

.editorial {
  font-family: var(--ff-serif);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-2xl);
  line-height: 1.35;
  color: var(--sol-forest);
}

a {
  color: var(--sol-forest);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--sol-lime);
  transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
a:hover { color: var(--sol-forest-deep); text-decoration-color: var(--sol-lime-deep); }

ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
li { margin-bottom: var(--s-2); }

blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-6);
  border-left: var(--bw-edge) solid var(--sol-lime);
  background: var(--bg-tint);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
blockquote p:last-child { margin-bottom: 0; }

code, kbd, .mono {
  font-family: var(--ff-mono);
  font-size: 0.92em;
  background: var(--bg-sunken);
  padding: 1px 6px;
  border-radius: var(--r-xs);
}
pre {
  background: var(--bg-sunken);
  padding: var(--s-5);
  border-radius: var(--r-md);
  overflow: auto;
}
pre code { background: none; padding: 0; }

hr { border: 0; border-top: var(--bw-hair) solid var(--border); margin: var(--s-7) 0; }

table { border-collapse: collapse; width: 100%; margin: 0 0 var(--s-5); }
th, td { padding: var(--s-3) var(--s-4); border-bottom: var(--bw-hair) solid var(--border); text-align: left; }
th { font-weight: 700; }

:focus-visible {
  outline: var(--bw-edge) solid var(--sol-lime);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--sol-lime); color: var(--sol-forest-deep); }

/* -------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES (shared with component sheets; safe to redeclare)
   ------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--s-5); }
.container-narrow { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: var(--s-5); }

.section { padding-block: var(--s-9); }
@media (max-width: 768px) { .section { padding-block: var(--s-7); } }

.section--bone   { background: var(--sol-bone); }
.section--paper  { background: var(--sol-paper); }
.section--cream  { background: var(--sol-cream); }
.section--tint   { background: var(--sol-lime-mist); }
.section--forest { background: var(--bg-band); color: var(--fg-on-dark); }

/* -------------------------------------------------------------------------
   4. ACCESSIBILITY HELPERS
   ------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--s-4);
  top: -120px;
  z-index: 200;
  background: var(--sol-forest);
  color: var(--fg-on-dark);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 700;
  transition: top var(--dur-2) var(--ease-out);
}
.skip-link:focus { top: var(--s-4); color: var(--fg-on-dark); }

.visually-hidden, .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto;
  clip: auto;
  padding: var(--s-3) var(--s-5);
  background: var(--bg-elev);
}

/* -------------------------------------------------------------------------
   5. BUTTONS (shared baseline; component sheets extend)
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: var(--fs-md);
  line-height: 1;
  padding: var(--s-4) var(--s-6);
  min-height: 48px;
  border: var(--bw-edge) solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.btn--primary { background: var(--sol-lime); color: var(--brand-fg); box-shadow: var(--shadow-lime); }
.btn--primary:hover { background: var(--sol-lime-bright); color: var(--brand-fg); }
.btn--primary:active { background: var(--sol-lime-deep); transform: translateY(1px); }
.btn--secondary { background: transparent; color: var(--sol-forest); border-color: var(--sol-forest); }
.btn--secondary:hover { background: var(--sol-forest); color: var(--fg-on-dark); }
.btn--secondary:active { transform: translateY(1px); }
.btn--on-dark { background: var(--sol-lime); color: var(--brand-fg); }
.btn--on-dark:hover { background: var(--sol-lime-bright); }
.btn--ghost-on-dark { background: transparent; color: var(--fg-on-dark); border-color: var(--border-on-dark); }
.btn--ghost-on-dark:hover { background: rgba(246, 244, 236, 0.10); }
.btn--full { width: 100%; }

/* -------------------------------------------------------------------------
   6. NATIVE CONTENT LAYOUT (page / single / archive / search / 404)
   These are NOT styled by homepage.css; this sheet owns them so non-shop,
   non-homepage pages look Solverra without Divi.
   ------------------------------------------------------------------------- */
.site-main { display: block; }

.page-shell { padding-block: var(--s-8) var(--s-9); }
.page-shell .entry-header { margin-bottom: var(--s-7); }
.page-shell .entry-meta {
  font-size: var(--fs-sm);
  color: var(--fg-2);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.entry-content > * { margin-bottom: var(--s-5); }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content img { border-radius: var(--r-md); }
.entry-content figure { margin: var(--s-6) 0; }
.entry-content figcaption { font-size: var(--fs-sm); color: var(--fg-2); margin-top: var(--s-2); }

/* Wide / full alignments (align-wide theme support) */
.alignwide  { width: min(var(--container-wide), 100%); margin-inline: auto; }
.alignfull  { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.alignleft  { float: left; margin: 0 var(--s-5) var(--s-4) 0; }
.alignright { float: right; margin: 0 0 var(--s-4) var(--s-5); }
.aligncenter { display: block; margin-inline: auto; }

/* Posts archive grid */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6);
}
@media (max-width: 900px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .posts-grid { grid-template-columns: 1fr; } }

.post-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-elev);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.post-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.post-card__thumb { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; background: var(--bg-sunken); }
.post-card__body { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); flex: 1; }
.post-card__title { font-family: var(--ff-display); font-size: var(--fs-xl); text-transform: uppercase; margin: 0; }
.post-card__title a { text-decoration: none; color: var(--sol-forest-deep); }
.post-card__title a:hover { color: var(--sol-lime-deep); }
.post-card__excerpt { font-size: var(--fs-sm); color: var(--fg-2); margin: 0; }
.post-card__more { margin-top: auto; font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-caps); }

/* Pagination (shared with catalog) */
.solverra-pagination ul,
.page-numbers { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0; margin: var(--s-7) 0 0; justify-content: center; }
.page-numbers li { margin: 0; }
.page-numbers .page-numbers,
a.page-numbers, span.page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0 var(--s-3);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--sol-forest);
  background: var(--bg-elev);
}
.page-numbers .current { background: var(--sol-lime); color: var(--brand-fg); border-color: var(--sol-lime); font-weight: 700; }
a.page-numbers:hover { border-color: var(--border-strong); }

/* 404 + search-empty */
.error-404, .search-empty { text-align: center; padding-block: var(--s-10); }
.error-404 .code-404 {
  font-family: var(--ff-display);
  font-weight: 900;
  font-size: clamp(80px, 18vw, 220px);
  line-height: 0.85;
  color: var(--sol-lime);
  margin: 0;
}
.error-404__actions, .search-empty__actions { display: inline-flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-6); }
.search-form { display: flex; gap: var(--s-3); max-width: 480px; margin: var(--s-6) auto 0; }
.search-form .search-field {
  flex: 1;
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  padding: var(--s-4);
  min-height: 48px;
  border: var(--bw-line) solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
}

/* Comments */
.comments-area { margin-top: var(--s-8); padding-top: var(--s-7); border-top: var(--bw-hair) solid var(--border); }
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: var(--s-5); border: var(--bw-hair) solid var(--border); border-radius: var(--r-md); margin-bottom: var(--s-4); background: var(--bg-elev); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  font-family: var(--ff-body);
  font-size: var(--fs-md);
  padding: var(--s-3) var(--s-4);
  border: var(--bw-line) solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  margin-bottom: var(--s-4);
}

/* -------------------------------------------------------------------------
   7. THEME-TOGGLE MOUNT (solverra-theme-toggle.php injects controls here when
   it hooks a nav location; this gives the empty mount sane spacing)
   ------------------------------------------------------------------------- */
.solverra-theme-toggle { display: inline-flex; align-items: center; }

/* -------------------------------------------------------------------------
   8. DARK THEME HOOK (solverra-theme-toggle sets html[data-theme="dark"];
   the design-system mu-plugin + dark_mode_overrides.css supply most values.
   This is a minimal native-content fallback so plain pages are not blinding
   if a brand forces dark before its override sheet loads.)
   ------------------------------------------------------------------------- */
html[data-theme="dark"] {
  --bg: #14201B;
  --bg-elev: #1B2A22;
  --bg-sunken: #0F1813;
  --fg: #F6F4EC;
  --fg-2: rgba(246, 244, 236, 0.78);
  --border: rgba(246, 244, 236, 0.16);
  --border-strong: rgba(246, 244, 236, 0.30);
}

/* -------------------------------------------------------------------------
   9. HEADER / FOOTER ENHANCEMENTS
   homepage.css supplies the core .topbar / .site-header / .brand-lockup /
   .primary-nav / .icon-btn / .site-footer styles. These rules style the
   NEW native elements this theme's header.php / footer.php introduce
   (custom-logo, cart count, search panel, mobile nav drawer, footer social +
   menu columns) so they exist on every template, not just the homepage.
   ------------------------------------------------------------------------- */

/* Header layout shell when homepage.css is not loaded (non-home pages) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 244, 236, 0.86);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: var(--bw-hair) solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 72px;
}
.site-header__brand { display: inline-flex; align-items: center; }

/* Custom logo from add_theme_support('custom-logo') */
.custom-logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.custom-logo { max-height: 48px; width: auto; }

/* Brand wordmark fallback */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  text-decoration: none;
  font-family: var(--ff-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  font-size: var(--fs-xl);
}
.brand-lockup .sol { color: var(--sol-lime); }
.brand-lockup .verra { color: var(--sol-forest); }

/* Cart count bubble */
.cart-link { position: relative; }
.cart-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-2xs);
  font-weight: 800;
  line-height: 1;
  color: var(--brand-fg);
  background: var(--sol-lime);
  border-radius: var(--r-pill);
}

/* Search panel (slide-down) */
.search-panel {
  border-top: var(--bw-hair) solid var(--border);
  background: var(--bg-elev);
  padding-block: var(--s-5);
}
.search-panel[hidden] { display: none; }

/* Mobile nav drawer */
.nav-toggle__bar {
  display: block;
  width: 20px;
  height: 2px;
  margin: 2px 0;
  background: var(--sol-forest);
  border-radius: var(--r-pill);
}
.mobile-nav {
  background: var(--bg-elev);
  border-top: var(--bw-hair) solid var(--border);
  padding: var(--s-5);
}
.mobile-nav[hidden] { display: none; }
.mobile-nav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.mobile-nav__list a {
  display: block;
  padding: var(--s-3) var(--s-2);
  text-decoration: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-sm);
  color: var(--sol-forest);
  border-bottom: var(--bw-hair) solid var(--border);
}
.mobile-nav__actions { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 961px) { .mobile-nav, .nav-toggle { display: none !important; } }

/* -------------------------------------------------------------------------
   9a. PRIMARY NAV LIST + DROPDOWN SUBMENUS (baseline, every template)
   homepage.css flexes the .primary-nav WRAPPER but never styled the inner
   wp_nav_menu <ul class="primary-nav__list">, its <li> items, or the nested
   <ul class="sub-menu"> dropdowns. Without these rules the list falls back to
   default block/list-item rendering (vertical, bulleted) and submenus render
   fully expanded inline. These rules make the bar HORIZONTAL with COLLAPSED
   dropdowns that reveal on hover / keyboard focus. Token-driven; the optional
   solverra-megamenu mu-plugin layers richer panels on top of this baseline.
   ------------------------------------------------------------------------- */
.primary-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.primary-nav__list li { list-style: none; }
.primary-nav__list > li {
  position: relative;
  display: flex;
  align-items: center;
}
.primary-nav__list > li > a {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  text-decoration: none;
  color: var(--sol-forest);
  padding-block: var(--s-2);
  white-space: nowrap;
}
.primary-nav__list > li > a:hover,
.primary-nav__list > li:focus-within > a { color: var(--sol-lime-deep); }

/* Caret hint on parent items */
.primary-nav__list > li.menu-item-has-children > a::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: var(--s-1);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-2, 200ms) var(--ease-out, ease);
}
.primary-nav__list > li.menu-item-has-children:hover > a::after,
.primary-nav__list > li.menu-item-has-children:focus-within > a::after {
  transform: translateY(0) rotate(225deg);
}

/* Dropdown submenu: collapsed by default, absolutely positioned, revealed on
   hover / focus-within (keyboard). Never pushes the bar vertical. */
.primary-nav__list .sub-menu {
  list-style: none;
  margin: 0;
  padding: var(--s-3);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 300;
  min-width: 240px;
  display: grid;
  gap: 2px;
  background: var(--bg-elev);
  border: var(--bw-hair) solid var(--border);
  border-radius: var(--r-md, 12px);
  box-shadow: var(--shadow-3, 0 14px 32px rgba(0, 0, 0, 0.12));
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-2, 200ms) var(--ease-out, ease),
              transform var(--dur-2, 200ms) var(--ease-out, ease),
              visibility 0s linear var(--dur-2, 200ms);
}
.primary-nav__list > li:hover > .sub-menu,
.primary-nav__list > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}
.primary-nav__list .sub-menu li { display: block; }
.primary-nav__list .sub-menu a {
  display: block;
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm, 8px);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  text-decoration: none;
  color: var(--sol-forest);
  white-space: nowrap;
}
.primary-nav__list .sub-menu a:hover,
.primary-nav__list .sub-menu a:focus-visible {
  background: var(--sol-lime-fog);
  color: var(--sol-forest-deep);
}

/* The "mega-menu" parent (item carries class .mega-menu from the old Divi
   menu): give its dropdown a slightly wider, multi-column-friendly panel so
   the larger child set is comfortable. Still collapsed until hover/focus. */
.primary-nav__list > li.mega-menu > .sub-menu {
  min-width: 300px;
}

/* Keep the absolutely-positioned dropdowns from overflowing the right edge on
   the last item(s). */
.primary-nav__list > li:last-child > .sub-menu,
.primary-nav__list > li:nth-last-child(2) > .sub-menu {
  left: auto;
  right: 0;
}

/* Reduced-motion: no slide, just show/hide. */
@media (prefers-reduced-motion: reduce) {
  .primary-nav__list .sub-menu { transition: none; transform: none; }
  .primary-nav__list > li.menu-item-has-children > a::after { transition: none; }
}

/* Mobile: the desktop bar is hidden (homepage.css / this sheet hide
   .primary-nav at <=960px); the drawer uses .mobile-nav__list. Make any
   sub-menu inside the drawer sit inline + expanded (not an absolute popover)
   so nested items are reachable by tap. */
@media (max-width: 960px) {
  .mobile-nav__list .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 0 0 0 var(--s-4);
    min-width: 0;
  }
  .mobile-nav__list .sub-menu a { text-transform: none; }
}

/* Topbar account + toggle items */
.topbar__item--toggle { display: inline-flex; align-items: center; }

/* Footer social + menu columns (homepage.css styles .footer-col / .site-footer) */
.footer-social { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-4); padding: 0; margin: var(--s-5) 0 0; }
.footer-social a {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: rgba(246, 244, 236, 0.82);
  text-decoration: none;
}
.footer-social a:hover { color: var(--sol-lime); }
.footer-menu-columns .footer-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5) var(--s-7);
}
.footer-menu-columns .footer-col-list a {
  font-size: var(--fs-sm);
  color: rgba(246, 244, 236, 0.82);
  text-decoration: none;
}
.footer-menu-columns .footer-col-list a:hover { color: var(--sol-lime); }
.footer-newsletter .field { width: 100%; min-width: 0; }
.footer-newsletter .email-form { flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   10. MY ACCOUNT (native WC account; replaces the Divi inline-login popup)
   ------------------------------------------------------------------------- */
.solverra-account {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s-7);
  align-items: start;
}
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.woocommerce-MyAccount-navigation a {
  display: block;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--sol-forest);
  font-weight: 600;
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
  background: var(--sol-lime-fog);
  color: var(--sol-forest-deep);
}
@media (max-width: 760px) { .solverra-account { grid-template-columns: 1fr; } }