/* ==========================================================================
   Plant-Based Prides — global stylesheet
   Palette sampled directly from the campaign logo:
   - Dark green   #214001  (wordmark / body headings)
   - Leaf green   #4BAB13  (primary action colour)
   - Deep green   #029246  (secondary accent / stripe)
   - Charcoal     #3D3D3D  (body text)
   Progress Pride flag colours (decorative stripe only):
   red #EE1E25, orange #F59121, yellow #FEDB0E, green #029246,
   navy #232262, purple #804096, light blue #61CDF4, pink #F7AAB6
   ========================================================================== */

:root {
  --pbp-dark-green: #214001;
  --pbp-green: #4bab13;
  --pbp-green-deep: #029246;
  --pbp-charcoal: #3d3d3d;
  --pbp-ink: #202b18;
  --pbp-bg: #fbfaf6;
  --pbp-bg-alt: #f0f4e9;
  --pbp-white: #ffffff;
  --pbp-border: #e1e5d8;

  --pbp-red: #ee1e25;
  --pbp-orange: #f59121;
  --pbp-yellow: #fedb0e;
  --pbp-navy: #232262;
  --pbp-purple: #804096;
  --pbp-lightblue: #61cdf4;
  --pbp-pink: #f7aab6;
  --pbp-brown: #934118;
  --pbp-black: #240f00;

  --pride-stripe: linear-gradient(
    90deg,
    var(--pbp-red) 0%,
    var(--pbp-orange) 11%,
    var(--pbp-yellow) 22%,
    var(--pbp-green-deep) 33%,
    var(--pbp-navy) 44%,
    var(--pbp-purple) 55%,
    var(--pbp-brown) 66%,
    var(--pbp-black) 77%,
    var(--pbp-lightblue) 88%,
    var(--pbp-pink) 100%
  );

  --font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container-width: 1000px;
  --radius: 14px;
  --shadow-soft: 0 6px 24px rgba(33, 64, 1, 0.08);
  --shadow-card: 0 2px 10px rgba(33, 64, 1, 0.07);
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--pbp-charcoal);
  background: #e7ebde;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Boxed page shell — keeps the whole site (including hero images) capped at
   a comfortable reading width, set slightly apart from the page backdrop
   with a soft shadow. */
.page-shell {
  max-width: var(--container-width);
  margin: 0 auto;
  background-color: var(--pbp-bg);
  /* Decorative background: bg-tile.webp is bg.png stacked on top of its own
     vertical flip (so it's twice bg.png's height). Anchoring it to the top
     and repeating it vertically means the first "page" of it lines up with
     bg.png exactly (i.e. pages under ~3000px just show the top of bg.png,
     cropped at the bottom, same on every page); on taller pages it carries
     on into the mirrored half and then repeats, and because each half is a
     mirror of the last, the repeat is seamless with no visible join.
     Regenerate bg-tile.webp (see README-SITE-GUIDE.md) if bg.png changes. */
  background-image: url("../images/bg-tile.webp");
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
  box-shadow: 0 10px 34px rgba(33, 64, 1, 0.14), 0 2px 8px rgba(33, 64, 1, 0.06);
  /* Curved corners only at the bottom — square at the top. */
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
  min-height: 100vh;
}
@media (max-width: 800px) {
  .page-shell { box-shadow: none; border-radius: 0; }
}
img { max-width: 100%; display: block; }
a { color: var(--pbp-green-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--pbp-dark-green);
  line-height: 1.2;
  margin: 0 0 0.6em;
  font-weight: 600;
}
h1 { font-size: clamp(2rem, 4.5vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.3em; }
blockquote {
  margin: 1.5em 0;
  padding: 0.9em 1.4em;
  border-left: 4px solid var(--pbp-green);
  background: var(--pbp-bg-alt);
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: var(--pbp-ink);
}
blockquote cite {
  display: block;
  margin-top: 0.5em;
  font-style: normal;
  font-size: 0.9rem;
  color: var(--pbp-green-deep);
}
code { background: var(--pbp-bg-alt); padding: 0.1em 0.4em; border-radius: 4px; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}
.container-narrow { max-width: 860px; }
.container-narrow { padding: 0 8px; }
section { padding: 30px 0; }
.section-alt { background: var(--pbp-bg-alt); }
.section-tight { padding: 26px 0; }
.text-center { text-align: center; }
.stack-sm > * + * { margin-top: 0.75em; }

.pride-stripe {
  height: 6px;
  width: 100%;
  background: var(--pride-stripe);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pbp-dark-green);
  margin-bottom: 0.6em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.8em 1.6em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-primary {
  background: var(--pbp-green);
  color: var(--pbp-white);
  box-shadow: var(--shadow-card);
}
.btn-primary:hover { background: var(--pbp-dark-green); color: var(--pbp-white); }
.btn-outline {
  background: transparent;
  border-color: var(--pbp-dark-green);
  color: var(--pbp-dark-green);
}
.btn-outline:hover { background: var(--pbp-dark-green); color: var(--pbp-white); }
.btn-white {
  background: var(--pbp-white);
  color: var(--pbp-dark-green);
}
.btn-white:hover { background: var(--pbp-yellow); color: var(--pbp-dark-green); }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 0.55em 1.1em; font-size: 0.9rem; }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 246, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--pbp-border);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px;
  max-width: var(--container-width);
  margin: 0 auto;
  gap: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand img { height: 44px; width: auto; }
.brand-name { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  background: var(--pbp-dark-green);
  border-radius: 2px;
  transition: 0.2s;
}

.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.main-nav a {
  color: var(--pbp-dark-green);
  font-weight: 500;
  font-size: 0.96rem;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
}
.main-nav a:hover,
.main-nav a.active {
  background: var(--pbp-bg-alt);
  color: var(--pbp-dark-green);
  text-decoration: underline;
}
.main-nav .btn-primary {
  margin-left: 6px;
  padding: 0.6em 1.3em;
  font-size: 0.92rem;
  background: var(--pbp-dark-green);
  color: var(--pbp-white);
}
.main-nav .btn-primary:hover { background: var(--pbp-green); color: var(--pbp-white); }

.has-dropdown { position: relative; }
.dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  color: var(--pbp-dark-green);
  font-weight: 500;
  font-size: 0.96rem;
  padding: 10px 12px;
  border-radius: 8px;
}
.dropdown-toggle:hover { background: var(--pbp-bg-alt); color: var(--pbp-dark-green); text-decoration: underline; }
.dropdown-toggle .chev { transition: transform 0.15s ease; font-size: 1.35em; line-height: 1; }
.has-dropdown.open .dropdown-toggle .chev { transform: rotate(180deg); }

/* Show dropdown on hover for mouse users (desktop only); click toggle still
   works for touch/keyboard and keeps it open after the mouse leaves. */
@media (min-width: 761px) {
  .has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .has-dropdown:hover .dropdown-toggle .chev {
    transform: rotate(180deg);
  }
}

.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 230px;
  background: var(--pbp-white);
  border: 1px solid var(--pbp-border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 50;
}
.has-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown-menu li + li { margin-top: 2px; }
.dropdown-menu a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.94rem;
  color: var(--pbp-ink);
}
.dropdown-menu a:hover { background: var(--pbp-bg-alt); color: var(--pbp-green-deep); }
.dropdown-menu .dd-desc {
  display: block;
  font-size: 0.78rem;
  color: #6b7361;
  margin-top: 2px;
  font-weight: 400;
}

/* ---------- Hero ---------- */
.hero {
  padding: 0;
  overflow: hidden;
}
.hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;

  /* ---- Easy image controls ----
     --img-x / --img-y  : focus point of the image, 0 = left/top, 1 = right/bottom, 0.5 = centered.
       NOTE: if the image's own proportions are close to the box's shape on one axis,
       there may be no room left for it to slide on that axis — nudge --img-zoom up
       a little (e.g. 1.1–1.3) to free up movement on both axes at once.
     --img-zoom : how far to zoom into the image beyond the minimum needed to fill the
       box, e.g. 1 = no extra zoom, 1.2 = 20% closer in. Also useful just to crop in
       tighter on the image generally.
     --crop-top/right/bottom/left : how much to trim off that edge, as a fraction
       from 0 (no crop) to just under 1 (e.g. 0.1 = trim 10% off that side).
     Edit the values on the .hero-media--home / .hero-media--why blocks below
     (or add a new modifier block the same way) — nothing else needs to change. */
  --img-x: 0.5;
  --img-y: 0.5;
  --img-zoom: 1;
  --crop-top: 0;
  --crop-right: 0;
  --crop-bottom: 0;
  --crop-left: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: calc(var(--img-x) * 100%) calc(var(--img-y) * 100%);
  transform-origin: calc(var(--img-x) * 100%) calc(var(--img-y) * 100%);
  transform: scale(calc(var(--img-zoom) * max(
    calc(1 / (1 - var(--crop-left) - var(--crop-right))),
    calc(1 / (1 - var(--crop-top) - var(--crop-bottom)))
  )));
  clip-path: inset(
    calc(var(--crop-top) * 100%)
    calc(var(--crop-right) * 100%)
    calc(var(--crop-bottom) * 100%)
    calc(var(--crop-left) * 100%)
  );
}

/* Homepage hero image */
.hero-media--home {
  aspect-ratio: 16 / 6;
  --img-x: 0.5;
  --img-y: 0.4;
  --img-zoom: 1.0;
  --crop-top: 0;
  --crop-right: 0;
  --crop-bottom: 0;
  --crop-left: 0;
}

/* "Why?" page hero image */
.hero-media--why {
  aspect-ratio: 16 / 6;
  --img-x: 0.5;
  --img-y: 0.4;
  --img-zoom: 1.0;
  --crop-top: 0;
  --crop-right: 0;
  --crop-bottom: 0;
  --crop-left: 0;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 35, 5, 0.15) 100%, rgba(20, 35, 5, 0.55) 500%);
  pointer-events: none; /* let clicks pass through to links in .hero-caption */
}
.hero-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 24px 32px;
  color: var(--pbp-white);
  text-align: center;
}
.hero-caption .container { padding: 0; max-width: var(--container-width); margin: 0 auto; }
.hero-tagline {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  font-weight: 600;
  max-width: 780px;
  margin: 0 auto;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.hero-tagline a {
  color: var(--pbp-yellow);
  text-decoration: underline;
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.page-hero {
  padding: 64px 0 40px;
  text-align: center;
  background: var(--pbp-bg-alt);
}
.page-hero p { max-width: 640px; margin: 0 auto; color: var(--pbp-ink); }
.page-hero.with-image { padding: 0; text-align: left; }

/* ---------- Cards / grids ---------- */
.grid {
  display: grid;
  gap: 24px;
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--pbp-white);
  border: 1px solid var(--pbp-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: 0.4em; }
.card .icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--pbp-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 14px;
}

.quote-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }

/* ---------- Tabs (calculator % / email templates) ---------- */
.tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--pbp-border);
  margin-bottom: 24px;
}
.tab-btn {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  background: none;
  border: none;
  padding: 12px 18px;
  cursor: pointer;
  color: #6b7361;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-btn:hover { color: var(--pbp-green-deep); }
.tab-btn.active {
  color: var(--pbp-dark-green);
  border-bottom-color: var(--pbp-green);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Forms / Calculator ---------- */
.calc-card {
  background: var(--pbp-white);
  border: 1px solid var(--pbp-border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-soft);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-weight: 600;
  color: var(--pbp-dark-green);
  margin-bottom: 6px;
  font-size: 0.95rem;
}
.field input[type="number"],
.field select,
.field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--pbp-border);
  border-radius: 9px;
  font-size: 1rem;
  font-family: var(--font-body);
  background: var(--pbp-bg);
  color: var(--pbp-ink);
}
.field input[type="number"]:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--pbp-green);
}
.field input[type="range"] {
  width: 100%;
  accent-color: var(--pbp-green);
}
.range-value {
  text-align: right;
  font-weight: 600;
  color: var(--pbp-green-deep);
  font-size: 0.9rem;
}
.field-hint {
  font-size: 0.85rem;
  color: #6b7361;
  margin-top: 6px;
}

.results-panel {
  margin-top: 26px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--pbp-bg-alt);
  border-left: 5px solid var(--pbp-green);
}
.results-panel.empty { color: #6b7361; font-style: italic; }
.stat-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
  margin: 18px 0;
}
.stat {
  background: var(--pbp-white);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--pbp-border);
}
.stat .stat-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pbp-green-deep);
}
.stat .stat-label {
  font-size: 0.8rem;
  color: #6b7361;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.equivalents {
  font-style: italic;
  color: var(--pbp-ink);
}

/* ---------- Email template box ---------- */
.email-box {
  background: var(--pbp-bg);
  border: 1.5px dashed var(--pbp-green-deep);
  border-radius: var(--radius);
  padding: 22px 24px;
  white-space: pre-wrap;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--pbp-ink);
  max-height: 480px;
  overflow-y: auto;
}
.copy-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.copy-feedback {
  font-size: 0.85rem;
  color: var(--pbp-green-deep);
  font-weight: 600;
  margin-left: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.copy-feedback.show { opacity: 1; }

/* ---------- Events ---------- */
.event-card {
  display: flex;
  gap: 20px;
  background: var(--pbp-white);
  border: 1px solid var(--pbp-border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-card);
}
.event-date {
  flex-shrink: 0;
  width: 84px;
  text-align: center;
  background: var(--pbp-bg-alt);
  border-radius: 10px;
  padding: 12px 6px;
  font-family: var(--font-heading);
}
.event-date .day { display: block; font-size: 1.6rem; font-weight: 700; color: var(--pbp-green-deep); line-height: 1; }
.event-date .month { display: block; font-size: 0.8rem; text-transform: uppercase; color: var(--pbp-dark-green); margin-top: 4px; }
.event-date .year { display: block; font-size: 0.72rem; color: #6b7361; }
.event-body h3 { margin-bottom: 0.2em; }
.event-meta { font-size: 0.88rem; color: #6b7361; margin-bottom: 0.5em; }
.event-empty {
  text-align: center;
  padding: 48px 24px;
  color: #6b7361;
  border: 1.5px dashed var(--pbp-border);
  border-radius: var(--radius);
}

/* ---------- Further reading ---------- */
.source-list { list-style: none; padding: 0; margin: 0; }
.source-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--pbp-border);
}
.source-list li:last-child { border-bottom: none; }
.source-list a { font-weight: 600; }
.source-list .src-note { display: block; font-size: 0.87rem; color: #6b7361; margin-top: 2px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--pbp-dark-green);
  color: #dfe8d3;
  padding: 44px 0 26px;
  margin-top: 40px;
}
.site-footer a { color: var(--pbp-yellow); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 28px;
}
.footer-grid h4 { color: var(--pbp-white); font-size: 1rem; margin-bottom: 0.7em; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 8px; }
.footer-brand img { height: 100px; margin-bottom: 12px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 18px;
  font-size: 0.85rem;
  color: #b9c7a8;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

/* ---------- Utility banner ---------- */
.cta-banner {
  background: var(--pbp-green);
  color: var(--pbp-white);
  border-radius: var(--radius);
  padding: 36px;
  text-align: center;
}
.cta-banner h2 { color: var(--pbp-white); }
.cta-banner p { color: rgba(255, 255, 255, 0.92); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--pbp-white);
    border-bottom: 1px solid var(--pbp-border);
    box-shadow: var(--shadow-soft);
  }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; align-items: stretch; padding: 10px; gap: 0; }
  .main-nav a { padding: 12px 14px; }
  .main-nav .btn-primary { margin: 8px 14px 4px; text-align: center; justify-content: center; }
  .has-dropdown .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    padding-left: 10px;
  }
  .has-dropdown.open .dropdown-menu { display: block; }
  .dropdown-toggle { width: 100%; justify-content: space-between; }
  .footer-grid { grid-template-columns: 1fr; }
  .event-card { flex-direction: column; }
  .event-date { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; }
}

@media (max-width: 600px) {
  section { padding: 32px 0; }
  .card { padding: 20px; }
  .calc-card { padding: 20px; }
}

/* ---------- Forced mobile nav ----------
   main.js measures whether the nav items (including the Sign the Petition
   button) wrap onto a second line. If they do — even above the 760px
   breakpoint above, e.g. because of a long page title or a narrower browser
   window that isn't quite mobile-width — it adds "force-mobile-nav" to
   .site-header, which switches on the same collapsed/hamburger layout as
   the @media (max-width: 760px) block above. Keep these two in sync if you
   change one. */
.site-header.force-mobile-nav .nav-toggle { display: block; }
.site-header.force-mobile-nav .main-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--pbp-white);
  border-bottom: 1px solid var(--pbp-border);
  box-shadow: var(--shadow-soft);
}
.site-header.force-mobile-nav .main-nav.open { display: block; }
.site-header.force-mobile-nav .main-nav ul { flex-direction: column; align-items: stretch; padding: 10px; gap: 0; }
.site-header.force-mobile-nav .main-nav a { padding: 12px 14px; }
.site-header.force-mobile-nav .main-nav .btn-primary { margin: 8px 14px 4px; text-align: center; justify-content: center; }
.site-header.force-mobile-nav .has-dropdown .dropdown-menu {
  position: static;
  box-shadow: none;
  border: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  display: none;
  padding-left: 10px;
}
.site-header.force-mobile-nav .has-dropdown.open .dropdown-menu { display: block; }
.site-header.force-mobile-nav .dropdown-toggle { width: 100%; justify-content: space-between; }