/* =========================================================
   GS MOTORCYCLES / BALLYMENA HONDA — shared design system
   Mobile-first. Built for DealerWebs CMS-style rectangular
   banners, card grids and image/text panels.
   ========================================================= */

:root{
  /* ---- GS Motorcycles brand (default theme) ---- */
  --ink:        #0d0d0d;
  --paper:      #ffffff;
  --paper-alt:  #f4f3f1;
  --line:       #e4e2dd;
  --grey:       #6b6b6b;
  --grey-dark:  #3a3a3a;
  --accent:     #d4121c;   /* GS red */
  --accent-dark:#a80e16;
  --accent-ink: #ffffff;   /* text on accent */

  --font-head: "Barlow Semi Condensed", sans-serif;
  --font-body: "Barlow", sans-serif;

  --container: 1320px;
  --gutter: 20px;
  --radius: 2px;

  --section-pad-mobile: 56px;
  --section-pad-desktop: 120px;
}

/* ---- Honda theme override (applied via [data-theme="honda"]) ---- */
[data-theme="honda"]{
  --ink:        #161616;
  --paper:      #ffffff;
  --paper-alt:  #f2f2f2;
  --line:       #e2e2e2;
  --grey:       #59595b;
  --grey-dark:  #2c2c2c;
  --accent:     #cc0000;   /* Honda Red — per Honda Corporate Brand Guidelines (Pantone 186 / #cc0000) */
  --accent-dark:#a30000;
  --accent-ink: #ffffff;

  /* Per Honda's June 2026 Corporate Brand Guidelines (confirmed): the two
     official Honda Auto-division fonts are Bebas Neue Pro (headline —
     Bold is the primary weight, always uppercase for short headlines) and
     Honda Global PE (body copy — a bespoke font unique to Honda, not
     licensed for outside use at all). Bebas Neue Pro is a paid Fontfabric
     font; the free "Bebas Neue" shares its core letterforms and is the
     closest free stand-in. Honda Global PE can't be purchased by anyone —
     so per the guidelines' own "Substitute Fonts" page (which lists
     "Dealer communications" as an approved use case for this exact
     situation), body copy uses Aptos, Honda's official substitute for
     Honda Global PE, with system-font fallbacks. */
  --font-head: "Bebas Neue", sans-serif;
  --font-body: "Aptos", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }

h1,h2,h3,h4{
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.05;
  margin: 0 0 .4em;
  font-weight: 700;
}
[data-theme="honda"] h1, [data-theme="honda"] h2, [data-theme="honda"] h3{
  /* Bebas Neue only ships one weight — don't ask the browser to fake-bold it */
  font-weight: 400;
  letter-spacing: 0.01em;
}
h1{ font-size: clamp(2.4rem, 8vw, 4.6rem); font-weight: 800; }
h2{ font-size: clamp(1.9rem, 5.6vw, 3rem); font-weight: 800; }
h3{ font-size: 1.3rem; }
p{ margin:0 0 1em; color: var(--grey-dark); }
.lede{ font-size: 1.1rem; color: var(--grey-dark); max-width: 46ch; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: .9em;
}
.eyebrow::before{
  content:""; width: 26px; height: 2px; background: var(--accent);
}

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
@media (min-width: 720px){ :root{ --gutter: 32px; } }
@media (min-width: 1024px){ :root{ --gutter: 48px; } }

.section{ padding-block: var(--section-pad-mobile); }
@media (min-width: 1024px){ .section{ padding-block: var(--section-pad-desktop); } }
.section--tight{ padding-block: 40px; }
@media (min-width: 1024px){ .section--tight{ padding-block: 64px; } }
.section--dark{ background: var(--ink); color: var(--paper); }
.section--dark p{ color: #c9c9c9; }
.section--alt{ background: var(--paper-alt); }

.section-head{
  display:flex; flex-direction:column; gap: .75rem;
  margin-bottom: 2.2rem;
}
@media (min-width: 860px){
  .section-head--row{
    flex-direction: row; align-items:flex-end; justify-content:space-between;
  }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: .95em 1.7em;
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  font-size: .88rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(.97); }
.btn-primary{ background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover{ background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-dark{ background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover{ background: #000; }
.btn-outline{ background: transparent; color: currentColor; border-color: currentColor; }
.btn-outline:hover{ background: currentColor; }
.btn-outline:hover{ color: var(--ink); }
.btn-outline.on-dark:hover{ color: var(--ink); }
.btn-ghost{ background: transparent; color: var(--accent); border-color: transparent; padding-inline: 0; }
.btn-ghost::after{ content:"→"; margin-left:.4em; transition: transform .15s ease; display:inline-block; }
.btn-ghost:hover::after{ transform: translateX(4px); }
.btn-row{ display:flex; flex-wrap:wrap; gap: .9rem; }
.btn-block{ width:100%; }
@media (min-width:560px){ .btn-block{ width:auto; } }

/* ---------- header / nav ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.topbar{
  background: var(--ink); color: #fff;
  font-size: .78rem;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  height: 34px;
}
.topbar a{ opacity:.9; }
.topbar a:hover{ opacity:1; color: var(--accent); }
.topbar-links{ display:flex; gap:1.2rem; }
.topbar-links span, .topbar-links a{ display:flex; align-items:center; gap:.4em; }
.topbar-brandswitch{ display:none; gap:.9rem; }
@media (min-width: 720px){ .topbar-brandswitch{ display:flex; } }
.topbar-brandswitch a{ font-weight:600; display:inline-flex; align-items:center; gap:.4em; }
.topbar-brandswitch a.is-active{ color: var(--accent); }
/* dealer wordmarks sat inline after "Ballymena", used exactly as supplied
   (no recolouring) — both logo files are already white/light artwork (or,
   for Triumph, a white wordmark with a dark triangle mark that quietly
   recedes into the dark --ink topbar rather than needing its own chip), so
   they sit directly on the topbar. Sized to the topbar's own line-height
   (34px row, .78rem text) rather than the logos' native size. */
.topbar-logo{ display:block; width:auto; height: 12px; }

.navbar{
  display:flex; align-items:center; justify-content:space-between;
  height: 68px;
}
@media (min-width:1024px){ .navbar{ height: 84px; } }

.brand{
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.brand small{
  display:block; font-family: var(--font-body); font-weight:600;
  text-transform: uppercase; letter-spacing: .06em; font-size: .58rem;
  color: var(--accent);
}
.brand-word{
  text-transform: none;
  text-shadow: none;
  color: rgb(0, 0, 0);
  font-weight: 500;
  display: initial;
  /* Requires the 'Ethnocentric Rg It' font to be loaded on the page (an
     Adobe Fonts / Typekit embed, or a self-hosted @font-face) — without
     that it falls back to the site heading font below. */
  font-family: 'Ethnocentric Rg It', var(--font-head), sans-serif;
}
.footer-brand .brand-word{ color:#fff; }
.brand-mark{
  width: 40px; height:40px; border-radius: 50%;
  background: var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-head); font-weight:800; font-size:1.05rem;
  flex: none;
}
[data-theme="honda"] .brand-mark{ background: var(--accent); }

/* GS Motorcycles wordmark logo — replaces the badge+text lockup above in
   the header and footer */
.brand--logo{ flex-direction: column; align-items: flex-start; gap: .3rem; }
.brand-logo{
  display:block; width:auto; height: 15px; max-width: none;
}
@media (min-width:640px){ .brand-logo{ height: 17px; } }
@media (min-width:860px){ .brand-logo{ height: 17px; } }
/* the full nav menu switches on at 1024px and it's tight until ~1200px, so
   the logo steps back down and the tagline hides for that narrow band —
   both come back once there's real room for them */
@media (min-width:1024px){ .brand-logo{ height: 10px; } }
@media (min-width:1200px){ .brand-logo{ height: 17px; } }
@media (min-width:1400px){ .brand-logo{ height: 21px; } }
@media (min-width:1024px) and (max-width:1199px){ .brand--logo small{ display:none; } }
/* the logo art is solid black on a transparent background — invert it to
   white so it reads on the dark footer */
.footer-brand .brand-logo{ filter: invert(1); height: 20px; }

/* Honda corporate logo — real logo mark (Honda Red on light, white on dark),
   used in place of a fabricated "H" badge per Honda's brand guidelines
   (never recolour/distort the mark; keep an even, unsquashed clear space). */
.honda-logo{ display:block; width:auto; height: 28px; flex: none; }
.footer-brand .honda-logo{ height: 24px; }
@media (min-width:640px){ .honda-logo{ height: 32px; } }
@media (min-width:1024px) and (max-width:1199px){
  /* nav is tight in this band — drop back to logo-only, same as the GS
     wordmark does at this breakpoint */
  .honda-logo{ height: 26px; }
  .brand-dealer-text{ display:none; }
}
@media (min-width:1200px){ .honda-logo{ height: 34px; } }

.nav-links{
  display:none;
  align-items:center;
  gap: 1.9rem;
  font-family: var(--font-head);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .03em;
  font-size: .92rem;
}
@media (min-width: 1024px){ .nav-links{ display:flex; } }
.nav-links a{ position:relative; padding-block:.4rem; }
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: var(--accent); transform: scaleX(0); transform-origin:left;
  transition: transform .18s ease;
}
.nav-links a:hover::after{ transform: scaleX(1); }

.nav-actions{ display:flex; align-items:center; gap: .7rem; }
.nav-actions .btn{ display:none; }
@media (min-width: 860px){ .nav-actions .btn{ display:inline-flex; } }

.nav-toggle{
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:42px; height:42px; border:1px solid var(--line); background:none;
  border-radius: var(--radius);
}
@media (min-width:1024px){ .nav-toggle{ display:none; } }
.nav-toggle span{ width:20px; height:2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-nav{
  display:none;
  flex-direction:column;
  border-top: 1px solid var(--line);
  background: var(--paper);
  padding: 1.2rem 0 1.6rem;
}
.mobile-nav.is-open{ display:flex; }
@media (min-width: 1024px){ .mobile-nav{ display:none !important; } }
.mobile-nav .container{ display:flex; flex-direction:column; gap:.2rem; }
.mobile-nav a{
  padding: .85rem 0; border-bottom:1px solid var(--line);
  font-family: var(--font-head); text-transform:uppercase; font-weight:700; letter-spacing:.03em;
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-nav .btn{ margin-top:1rem; }
.mobile-nav-switch{
  margin-top: 1rem; display:flex; gap:.6rem;
}
.mobile-nav-switch a{
  flex:1; text-align:center; border:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:.7rem;
}
.mobile-nav-switch a.is-active{ background: var(--ink); color:#fff; border-color: var(--ink); }

/* ---------- footer ---------- */
.site-footer{ background: var(--ink); color:#fff; padding-block: 56px 28px; }
.site-footer a:hover{ color: var(--accent); }
.footer-grid{
  display:grid; gap: 2.4rem;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){ .footer-grid{ grid-template-columns: 1.3fr repeat(3, 1fr); } }
.footer-brand p{ color:#b8b8b8; max-width: 32ch; }
.footer-col h4{
  font-family: var(--font-head); text-transform:uppercase; letter-spacing:.06em;
  font-size:.85rem; color:#fff; margin-bottom: 1rem;
}
.footer-col ul{ display:flex; flex-direction:column; gap:.6rem; }
.footer-col a{ color:#c9c9c9; font-size:.95rem; }
.footer-bottom{
  margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid #2a2a2a;
  display:flex; flex-direction:column; gap:.8rem;
  font-size:.8rem; color:#8c8c8c;
}
@media (min-width:720px){ .footer-bottom{ flex-direction:row; justify-content:space-between; } }

/* ---------- generic grid / card helpers ---------- */
.grid{ display:grid; gap: 1.1rem; }
.grid-2{ grid-template-columns: 1fr; }
.grid-3{ grid-template-columns: 1fr; }
.grid-4{ grid-template-columns: repeat(2,1fr); }
@media (min-width:640px){
  .grid-2{ grid-template-columns: repeat(2,1fr); }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width:860px){
  .grid-3{ grid-template-columns: repeat(3,1fr); }
  .grid-4{ grid-template-columns: repeat(4,1fr); }
}

.card{
  background: var(--paper); border:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover{ box-shadow: 0 18px 34px -22px rgba(0,0,0,.35); transform: translateY(-3px); }
.card-media{ aspect-ratio: 4/3; position:relative; overflow:hidden; }
.card-media svg{ width:100%; height:100%; }
.card-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card-body{ padding: 1.2rem 1.3rem 1.4rem; border-top: 3px solid var(--accent); flex:1; display:flex; flex-direction:column; gap:.35rem; }
.card-body h3{ margin:0; font-size:1.05rem; }
.card-tag{ font-size:.78rem; color: var(--grey); text-transform:uppercase; letter-spacing:.06em; font-family: var(--font-head); font-weight:600; }
.card-link{ margin-top:auto; font-weight:700; font-size:.85rem; color: var(--accent); display:inline-flex; align-items:center; gap:.4em; }
.card-link::after{ content:"→"; transition: transform .15s ease; }
.card:hover .card-link::after{ transform: translateX(4px); }

.pill{
  display:inline-flex; align-items:center; padding:.3em .9em;
  border:1px solid var(--line); border-radius:999px; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.05em; font-weight:700; color: var(--grey-dark);
}

.divider{ height:1px; background: var(--line); border:0; margin: 0; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--accent); color:#fff; padding:.8rem 1.2rem; z-index:100;
}
.skip-link:focus{ left: 1rem; top: 1rem; }

[data-reveal]{ transition: opacity .55s ease, transform .55s ease; }
@media (prefers-reduced-motion: no-preference){
  [data-reveal].reveal-armed{ opacity:0; transform: translateY(18px); }
}
[data-reveal].is-visible{ opacity:1; transform:none; }
.site-header.is-scrolled{ box-shadow: 0 8px 24px -18px rgba(0,0,0,.4); }