/**
 * Boa Wheels visual identity — scoped to .brand-boa (set on <html> for boa
 * builds only via Layout.astro). Loaded as a static stylesheet only in boa
 * builds, so the 88 Wheel Co compiled CSS stays byte-identical.
 *
 * Brand tokens (from the original boawheels.com):
 *   blue #21A2DD · CTA green #18BF09 · sale orange #EE7C1B · red #DC3232
 *   tints #CCE5FF / #F0F6FC · dark #111111
 *   Poppins display · Roboto body · pill buttons · soft cards
 */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/roboto-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/roboto-700.woff2') format('woff2');
}

/* ------------------------------------------------------------- palette */
.brand-boa {
  --boa-blue: #21a2dd;
  --boa-blue-dark: #0e76a8; /* accessible blue for text links on white */
  --boa-green: #18bf09;
  --boa-green-dark: #12a007;
  --boa-orange: #ee7c1b;
  --boa-red: #dc3232;
  --boa-tint: #cce5ff;
  --boa-panel: #f0f6fc;
  --boa-dark: #111111;
  --boa-line: #dbe7f1;
}

/* Blue-leaning neutral ramp (surfaces, borders, secondary text). */
.brand-boa .text-rcommerce-900 { color: var(--boa-dark); }
.brand-boa .text-rcommerce-700 { color: #2b3a48; }
.brand-boa .text-rcommerce-600 { color: #46586a; }
.brand-boa .text-rcommerce-500 { color: #64788c; }
.brand-boa .text-rcommerce-400 { color: #8ba0b3; }
.brand-boa .bg-rcommerce-900 { background-color: var(--boa-dark); }
.brand-boa .bg-rcommerce-50 { background-color: var(--boa-panel); }
.brand-boa .bg-rcommerce-100 { background-color: #e6f0f9; }
.brand-boa .border-rcommerce-200 { border-color: var(--boa-line); }
.brand-boa .border-rcommerce-300 { border-color: #c3d2de; }
.brand-boa .divide-rcommerce-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--boa-line); }
.brand-boa .placeholder\:text-rcommerce-400::placeholder { color: #8ba0b3; }

/* Links & brand accents. */
.brand-boa .text-rcommerce-accent,
.brand-boa .hover\:text-rcommerce-accent:hover { color: var(--boa-blue-dark); }
.brand-boa .decoration-rcommerce-accent { text-decoration-color: var(--boa-blue); }
.brand-boa .fill-rcommerce-accent { fill: var(--boa-blue); }
.brand-boa .focus\:border-rcommerce-accent:focus,
.brand-boa .focus\:ring-rcommerce-accent:focus { border-color: var(--boa-blue); --tw-ring-color: var(--boa-blue); }

/* Status colors. */
.brand-boa .text-rcommerce-danger { color: var(--boa-red); }
.brand-boa .bg-rcommerce-danger { background-color: var(--boa-red); }
.brand-boa .text-rcommerce-success { color: var(--boa-green-dark); }

/* Sale badges → brand orange (the hero highlight span has no text class,
   so the yellow highlight on "best wheels" is preserved). */
.brand-boa .bg-rcommerce-highlight.text-rcommerce-900 { background-color: var(--boa-orange); color: #fff; }

/* --------------------------------------------------------- typography */
/* Display/headline type in Poppins — no serif anywhere on boa pages.
   (html.brand-boa prefix wins over the legacy .brand-sans .font-serif rule
   in global.css regardless of stylesheet order.) */
html.brand-boa h1,
html.brand-boa h2,
html.brand-boa h3,
html.brand-boa h4,
html.brand-boa h5,
html.brand-boa h6,
html.brand-boa .font-serif,
html.brand-boa .eyebrow {
  font-family: 'Poppins', 'Roboto', system-ui, sans-serif;
  font-style: normal;
}
/* Body in Roboto. */
html.brand-boa body,
html.brand-boa .font-sans {
  font-family: 'Roboto', system-ui, sans-serif;
}
/* Soften the heavy uppercase eyebrow labels (88 keeps its tracking). */
html.brand-boa .eyebrow {
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
}

/* ------------------------------------------- contact page FAQ accordion */
.brand-boa .faq-chevron { transition: transform 0.2s ease; }
.brand-boa .faq-btn[aria-expanded="true"] .faq-chevron { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) {
  .brand-boa .faq-chevron { transition: none; }
}

/* -------------------------------------------------------------- shape */
/* Pill buttons (Woo shape language). */
.brand-boa .btn,
.brand-boa .btn-primary,
.brand-boa .btn-secondary,
.brand-boa .btn-accent { border-radius: 9999px; }

/* Green primary CTAs. */
.brand-boa .btn-primary { background-color: var(--boa-green); color: #fff; }
.brand-boa .btn-primary:hover { background-color: var(--boa-green-dark); }
.brand-boa .btn-accent { background-color: var(--boa-green); color: #fff; }
.brand-boa .btn-accent:hover { background-color: var(--boa-green-dark); color: #fff; }
.brand-boa .btn-secondary { border-color: var(--boa-blue); color: var(--boa-blue-dark); }
.brand-boa .btn-secondary:hover { border-color: var(--boa-blue-dark); background-color: var(--boa-panel); }

/* -------------------------------------------------------- product cards */
/* Soft cards: rounded, no heavy borders, price in brand blue, hover lift. */
.brand-boa .product-card {
  border-radius: 12px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.brand-boa .product-card:hover {
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.1);
  transform: translateY(-2px);
}
.brand-boa .product-card .product-price { color: var(--boa-blue); font-weight: 600; }

/* -------------------------------------------------------- centered nav */
/* The old boawheels.com had a centered menu with few items. */
.brand-boa header nav { position: relative; }
.brand-boa .nav-centered {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* ------------------------------------------------------------ header */
/* Minimal chrome: no heavy border, generous height, hairline shadow. */
.brand-boa header.sticky {
  border-bottom: 0;
  box-shadow: 0 1px 0 var(--boa-line);
}
.brand-boa header nav { height: 84px; }

/* ------------------------------------------- dark photographic footer */
/* Jungle-leaf texture fetched from the original boawheels.com uploads
   (boa_leafbg-01.png), darkened so white text reads on top. */
.boa-footer {
  background-color: #0a140e;
  background-image:
    linear-gradient(rgba(8, 18, 12, 0.78), rgba(5, 12, 8, 0.88)),
    url('/brand/boa/leafbg.jpg');
  background-size: cover;
  background-position: center;
}

/* --------------------------------------------------------- a11y & motion */
@media (prefers-reduced-motion: reduce) {
  .brand-boa .product-card,
  .brand-boa .product-card:hover {
    transition: none;
    transform: none;
  }
}