/* Skyrule brand overlay — loaded AFTER drivelodge.css.
   drivelodge.css stays byte-untouched (benchmark parity); this file re-points
   its brand tokens at the official Skyrule palette. The Webflow token names
   still say "blue" — they are wired into ~40 rules in drivelodge.css, so we
   alias rather than rename. Color parity with the Drivelodge benchmark
   intentionally ends here; structural parity does not. */

:root {
  /* Skyrule primitives */
  --skyrule--green: #a3d346;        /* fills: brand buttons, brand surfaces */
  --skyrule--green-hover: #8cb93a;  /* hover fills */
  --skyrule--green-text: #55701f;   /* green AS TEXT on light bg (AA ~5.6:1; raw green is ~1.7:1 on white) */
  --skyrule--ink: #1c2a05;          /* text on green fills (~9:1) */
  --skyrule--orange: #e26e00;       /* accent only: focus rings, eyebrows, highlights */

  /* Re-point the wired Webflow brand tokens */
  --base-color-brand--blue: var(--skyrule--green);
  --base-color-brand--blue-dark: var(--skyrule--green-hover);
  --base-color-brand--blue-darkest: var(--skyrule--green-text);
  --base-color-brand--gold: var(--skyrule--orange);
}

/* Button text flip — SCOPED, not blanket. drivelodge.css's variant rules use
   :where() (zero specificity); a blanket .button-content{color:...} loading
   after them would also override the primary button's white-on-black and
   break it. :not() targets exactly the base/brand-style buttons, which carry
   no variant class. */
.button-content:not([class*="w-variant"]) {
  color: var(--skyrule--ink);
}

/* Link-style button: green-as-text must be the AA-passing cut, and hover must
   go a step darker than resting (the re-pointed -darkest token would
   otherwise make resting and hover the identical #55701f). */
.button-content:where(.w-variant-16fb8767-26f4-a35f-edd9-ba91eadcd66c) {
  color: var(--skyrule--green-text);
}
.button-content:hover:where(.w-variant-16fb8767-26f4-a35f-edd9-ba91eadcd66c) {
  color: var(--skyrule--ink);
}

/* The complete inventory of rules in drivelodge.css that hardcode a blue
   literal (#437ef7, #0d53e4, or #1e54c3) instead of using the token (verified
   by grep across all three hexes). Overridden here so the
   benchmark file stays untouched. (.pagination1_page-button's #437ef700 is
   fully transparent — hue is invisible, no override needed.) */
.button-2 {
  background-color: var(--skyrule--green);
  border-color: var(--skyrule--green);
  color: var(--skyrule--ink);
}
.button-2.is-blue {
  background-color: var(--skyrule--green);
  border-color: var(--skyrule--green);
}
.text-color-blue-2 {
  color: var(--skyrule--green-text);
}
.config_sidebar_button {
  background-color: var(--skyrule--green);
  color: var(--skyrule--ink);
}
.button-2:hover {
  background-color: var(--skyrule--green-hover);
  border-color: var(--skyrule--green-hover);
}
.config_sidebar_button.is-next:hover {
  background-color: var(--skyrule--green-hover);
}
.badge-2.is-blue {
  color: var(--skyrule--green-text);
  background-color: #f2f9e5; /* pale green chip — same ~14% tint-on-white as drivelodge's #e5edff; not part of the three-hex inventory claim */
}
.badge-2.is-blue.filter:hover {
  background-color: #e3f1c6; /* green analogue of drivelodge's #c5d5f8 hover tint */
}

/* Text-role guards — drivelodge.css puts the raw brand token directly on
   these TEXT elements; raw green (#a3d346) fails AA on light backgrounds
   (~1.7:1), so they get the AA text cut instead. None appear on current
   pages — these prevent silent regressions as future pages are ported. */
.faq_question,
.text-color-blue,
.fitter-post_contact-item,
.config_sidebar-item_select.is--active,
.config-select.is--active,
.breadcrumb-link:hover,
.text-size-regular a {
  color: var(--skyrule--green-text);
}

/* Skyrule logo sizing — the kit's 1.92:1 logo is much squarer than the old
   3.3:1 Drivelodge SVG. drivelodge.css sizes the footer logo by WIDTH
   (.footer_logo-wrap 11.25rem) and the navbar anchor 2.25rem tall at desktop
   (width-capped 7.05rem/6.5rem at tablet/mobile breakpoints) — either way the
   squarer artwork would stretch the bars. Constrain the imgs by height
   instead; width follows the aspect ratio. */
.navbar_logo-link {
  height: 2.75rem; /* drivelodge's 2.25rem anchor height centers the anchor, not the taller img — match them so the logo sits on optical center */
}
.navbar_logo-link img.logo {
  height: 2.75rem;
  width: auto;
}
.footer_logo-wrap {
  width: auto; /* benchmark caps the wrap at 11.25rem; combined with Webflow's global img{max-width:100%} that squashes the 1.92:1 mark once it's taller than ~5.9rem */
}
.footer_logo-wrap img.logo {
  height: 9rem;
  width: auto;
}

/* Footer reveal spacer — the benchmark reserves a full viewport
   (.main-wrapper{padding-bottom:100vh}) because its footer fills the screen
   with a CTA block. Skyrule's footer drops the CTA and hugs its content
   (Footer.astro releases the height lock), so the reveal gap is resized to
   the measured content height per breakpoint (+~1rem headroom; values are
   rem-stable thanks to the fluid root font-size). ≤479px is untouched: the
   benchmark already makes the footer static with padding-bottom:0 there. */
@media (min-width: 992px) {
  .main-wrapper { padding-bottom: 29.5rem; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .main-wrapper { padding-bottom: 43.5rem; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .main-wrapper { padding-bottom: 39rem; }
}

/* PORT CHECKLIST — revisit as these benchmark sections/pages get ported:
   - Surfaces taking the green/orange fill that carried WHITE text in the
     benchmark: .section_index-hero, .index_cta, .signup-form_form.is-success,
     .success-message, .values_card (and .is-gold = orange),
     .pagination1_page-button.is-active-inputactive,
     .config_vehicle_card_button.is--active. Flip their text
     to var(--skyrule--ink) (or a dark cut) as each is brought over.
   - The checkbox checked-state pulls a CDN Tick.svg with a baked-in blue
     stroke — needs a replacement green asset when forms are ported.
   - Other benchmark-inherited pale-blue chips outside the inventory scope:
     .badge.is-blue, .config_card_image_label (#2159cc text), and Webflow's
     checkbox-checked #3898ec — re-tint as their pages get ported. */