/* =====================================================================
   AutoMobile — global.css
   Design tokens + base styles. Loaded on every page (after Bootstrap).
   Add your project's reusable components and tokens here. The few rules
   below only support the bundled JS behaviours (nav toggle, scroll
   reveal, search overlay) — delete or restyle freely.
   ===================================================================== */

/* ---------------------------------------------------------------
   1. Design Tokens — define your palette / type scale here.
   --------------------------------------------------------------- */
:root {
  --primary-color: var(--color-accent-red);
  --secondary-color: var(--color-brand-red);
  --accent-color: var(--color-accent-red);
  --heading-color: #111827;
  --text-color: #374151;
  --text-color-light: rgba(255, 255, 255, 0.85);
  --text-color-faint: #ececec; /* sampled: .marquee__item */
  --text-color-muted: #5f5f5f; /* sampled: inner-page body copy (Service/Blog inner) */
  --muted-color: var(--color-muted);
  --border-color: #e5e7eb;
  --background-color: #ffffff;
  --light-bg: var(--color-light-bg);
  --dark-bg: var(--color-header-bg);
  --dark-text: #ffffff;

  /* Brand — sampled from the header/footer design */
  --font-header-footer: "Montserrat", system-ui, -apple-system, sans-serif;
  --color-accent-red: #ff0000;
  --color-brand-red: #a90000;
  --color-header-bg: #242424;
  --color-nav-bg: #000000;
  --color-light-bg: #f5f5f5;
  --color-dark-card: #272727;
  --color-muted: #cacaca;
  --image-placeholder-bg: #e4e4e4;

  /* Typography */
  --font-primary: var(--font-header-footer);
  --font-secondary: var(--font-header-footer);
  --font-display:
    "Racing Sans One", var(--font-header-footer); /* h1 titles only: hero__heading, page-banner__title */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --h1-size: clamp(2.5rem, 5vw, 4rem); /* sampled: .page-banner__title */
  --h2-size: clamp(
    2.25rem,
    4vw,
    3.5rem
  ); /* sampled: pages/booking.css page title */
  --h3-size: clamp(
    1.75rem,
    3.2vw,
    2.625rem
  ); /* sampled: .section-heading default */
  --body-size: 1.125rem; /* sampled: .section-description */
  --body-line-height: 1.7; /* sampled: .section-description */
  --heading-line-height: 1.2; /* sampled: .section-heading */
  --heading-letter-spacing: -0.01em;

  /* Spacing */
  --section-spacing: clamp(4rem, 7vw, 7rem);
  --container-spacing: 1.5rem;
  /* .container's side gutter, stepped down at the two breakpoints below.
	   Exposed as a token so a full-bleed section can line its own copy up
	   with the container's content edge (see repair-services.css). */
  --container-gutter: 0.75rem;
  /* Content widths the design uses that Bootstrap's 1320px container can't
	   express — applied alongside .container, never in place of it. */
  --container-wide: 1420px; /* sampled: services / brands / promo rows */
  --container-xwide: 1540px; /* sampled: the FAQ row */
  --card-spacing: 2rem;
  --gap-xs: 0.25rem;
  --gap-sm: 0.5rem;
  --gap-md: 1rem;
  --gap-lg: 1.5rem;
  --gap-xl: 3rem;

  /* Border radius — sampled from the theme's flat 2px/4px/8px scale + pill/circle uses */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 999px;
  --radius-full: 50%;
  /* Single knob for every button/CTA radius — see the .btn rule below. */
  --radius-btn: 8px;

  /* Box shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.12); /* sampled: admin-fields.css */
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.15); /* sampled: .search-panel */
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.22);

  /* Decorative shapes — Figma node 337:378/379: a 28px-rounded card whose
	   bottom edge arcs upwards. Used as a CSS mask so it scales with the box. */
  --promo-card-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1420 420.642' preserveAspectRatio='none'%3E%3Cpath d='M0 28C0 12.5361 12.536 0 28 0H1392C1407.46 0 1420 12.536 1420 28V392.641C1420 408.503 1406.84 421.198 1390.98 420.623L708.928 395.857L29.0191 420.619C13.166 421.197 0 408.501 0 392.638V28Z' fill='%23000'/%3E%3C/svg%3E");

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease; /* sampled: .search-overlay */
  --transition-slow: 0.6s ease; /* sampled: [data-animate] */
}

/* ---------------------------------------------------------------
   0. Site layout — the header/#site-container/footer are siblings on
   <body> (see header.php/footer.php); this keeps the footer pinned to
   the viewport bottom on short pages instead of floating mid-screen,
   and adds the small polish (focus ring, text selection, smooth
   in-page anchor scrolling) every page should share.
   --------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-header,
.site-footer {
  flex-shrink: 0;
}
.layout--site {
  flex: 1 0 auto;
  width: 100%;
}
::selection {
  background: var(--color-accent-red);
  color: var(--dark-text);
}
:focus-visible {
  outline: 2px solid var(--color-accent-red);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------------------
   1a. Container gutter — Bootstrap's default (12px each side) is too
   tight once the container is the full viewport width (everything
   below its own max-width breakpoint); bump it so section content stops
   hugging the screen edge. The theme raises several containers to
   1660/1698px, so that threshold is ~1700px here, not Bootstrap's 1200px
   — below it the header, footer and section rows were all sitting flush
   against the viewport edge.
   --------------------------------------------------------------- */
.container {
  padding-left: var(--container-gutter);
  padding-right: var(--container-gutter);
}
@media (max-width: 1699.98px) {
  :root {
    --container-gutter: 2.5rem;
  }
  /* Bootstrap still steps .container's own max-width at 540/720/960/1140px
	   underneath this, so a plain .container (no page-specific `__container`
	   override) was centering itself with extra auto-margin on top of the
	   gutter above — different left/right spacing than sections using a wider
	   custom max-width, on tablet and mobile alike. Full width, gutter only,
	   matches every other section down here. */
  .container {
    max-width: none;
  }
}

/* 40px a side is a quarter of a 360px phone screen — ease off so header
   contact details, headings and body copy stop wrapping mid-word. */
@media (max-width: 575.98px) {
  :root {
    --container-gutter: 1.25rem;
  }
}

/* A .row pulls itself out by half its gutter to cancel the container's
   padding. Bootstrap sizes the two to match; this theme doesn't, so once the
   gutter passes twice the container's padding the row hangs off the viewport
   and the page scrolls sideways — g-5 (3rem) does exactly that under 576px.
   Cap it at the container's own inset so the row can never overhang. */
.row.g-5,
.row.gx-5 {
  --bs-gutter-x: min(3rem, calc(var(--container-gutter) * 2));
}

/* ---------------------------------------------------------------
   1b. Shared section typography — every homepage section reuses these
   instead of one-off styles per section.
   --------------------------------------------------------------- */
body {
  font-family: var(--font-header-footer);
}
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-accent-red);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(14px, 0.9vw, 18px);
  margin-bottom: 0.75rem;
  font-family: Montserrat;
}
.section-eyebrow::before,
.page-banner--start .page-banner__eyebrow::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 7px;
  background: var(--color-accent-red);
  clip-path: polygon(26.5% 0, 100% 0, 73.5% 100%, 0 100%);
  flex-shrink: 0;
}
.section-heading {
  /* Figma: Montserrat SemiBold 42px — not Bold (node 387:1051 et al). */
  font-weight: var(--font-weight-bold);
  font-size: var(--h3-size);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
  margin-bottom: 1rem;
}
.section-heading--light {
  color: var(--dark-text);
}
.section-heading--hero {
  font-size: var(--h1-size);
}
.section-heading--lg {
  font-size: clamp(
    3.5rem,
    7vw,
    7.1rem
  ); /* sampled: pages/home.css hero heading */
}
.section-heading--sm {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--dark-text);
  font-weight: var(--font-weight-semibold);
}
.section-description {
  font-size: var(--body-size);
  color: var(--text-color);
  line-height: var(--body-line-height);
}

.has-underline {
  position: relative;
  display: inline-block;
}
.has-underline::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-sm);
}
.has-underline--brand::after {
  background: var(--primary-color);
}
.has-underline--dark::after {
  background: var(--heading-color);
}
.has-underline--light::after {
  background: var(--dark-text);
}

/* Empty-image-field placeholder — one rule, every image slot. Inherits its
   size from the slot's own class (aspect-ratio / height), so it occupies
   exactly the space the image would have. */
.image-empty {
  background: var(--image-placeholder-bg);
  width: 100%;
  display: block;
}

/* Scrolling marquee strip — shared by the homepage and the Blog page (moved
   here from pages/home.css per docs/gotchas.md's "shared part's CSS" rule). */
.marquee {
  background: var(--background-color);
  overflow: hidden;
  padding: 1.5rem 0;
  /* border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color); */
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 40s linear infinite;
}
.marquee__item {
  /* Figma node 337:221 — sentence case, ~65px at a 1920 canvas. */
  font-weight: var(--font-weight-extrabold);
  font-size: clamp(1.75rem, 3.4vw, 4.0625rem);
  color: var(--text-color-faint);
  white-space: nowrap;
  padding: 0 2rem;
}
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* ---------------------------------------------------------------
   Every CTA in the theme carries .btn, so the site-wide button radius
   lives here once. Page stylesheets load after this file, so any button
   that needs a different shape has to say so explicitly — none do.
   --------------------------------------------------------------- */
.btn,
.wpcf7 input[type="submit"] {
  border-radius: var(--radius-btn);
}

/* ---------------------------------------------------------------
   CTA hover contract — the theme has exactly two button treatments
   and they swap on hover: a red button goes black, a black button goes
   red. Each button sets its own hover in its own stylesheet (those load
   after this file, so a rule here could only win with !important — which
   is what this block used to do). The transition is the shared part.
   --------------------------------------------------------------- */
.btn,
.wpcf7 input[type="submit"],
.page-banner__cta,
.faq-accordion__cta,
.contact-form__submit,
.contact-form__submit--pill,
.repair-services__cta {
  transition: var(--transition-fast);
}

/* ---------------------------------------------------------------
   1c. Inner-page banner — shared by every non-front page
   (template-parts/global/page-banner.php).
   --------------------------------------------------------------- */
.page-banner {
  position: relative;
  color: var(--dark-text);
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-align: left;
}
.page-banner__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.page-banner__bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-banner__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.page-banner__container {
  position: relative;
  margin: 0 auto;
}
.page-banner__eyebrow {
  color: var(--color-accent-red);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  margin-bottom: 0.75rem;
}
.page-banner__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1rem;
}
.page-banner__subheading {
  font-size: clamp(1.1rem, 1.6vw, 1.375rem);
  max-width: 640px;
  margin: 0 0 1.5rem;
}
.page-banner__cta {
  background: var(--color-accent-red);
  color: var(--dark-text);
  font-weight: var(--font-weight-semibold);
  padding: 0.8rem 2.5rem;
  border-radius: var(--radius-btn);
  display: inline-block;
  transition: var(--transition-fast);
}
.page-banner__cta:hover {
  background: #000;
  color: #fff;
  border-radius: var(--radius-btn);
}

/* The inner-page banner the design draws for a CPT single (Service inner node
   2010:8888, Blog inner 2010:9820): same banner, but the copy column is
   left-aligned, larger, and the crumb trail sits under the button. Applied as
   a structural modifier so the pages whose own frame centers it keep that. */
.page-banner--start {
  text-align: left;
  min-height: clamp(25rem, 26.25vw, 31.5rem); /* sampled: 504px @1920 */
}
.page-banner--start .page-banner__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-secondary);
  font-style: normal;
  font-size: clamp(1.125rem, 1.25vw, 1.5rem); /* sampled: 24px @1920 */
}
.page-banner--start .page-banner__title {
  font-size: clamp(2.5rem, 4.1vw, 4.9rem); /* sampled: 78.34px @1920 */
  line-height: 0.83; /* sampled: 82.775% */
  margin-bottom: 1.25rem;
}
.page-banner--start .page-banner__subheading {
  font-weight: var(--font-weight-semibold);
  font-size: clamp(1.125rem, 1.6vw, 1.9375rem); /* sampled: 31px @1920 */
  max-width: 66ch; /* sampled: wraps at 1093px */
  margin-inline: 0;
}
.page-banner--start .page-banner__cta {
  padding: 1.125rem 2.625rem; /* sampled: 18px/42px */
  font-size: 1.25rem; /* sampled: 20px */
}
.page-banner--start .page-banner__cta,
.page-banner--start .page-banner__cta:hover {
  border-radius: var(--radius-btn);
}

/* The Thank You page (pages/template-thank-you.php) is this banner and nothing
   else, so it has to carry the whole viewport rather than sit above a section:
   taller, and the confirmation line gets a narrower measure so it reads as a
   sentence instead of a full-width block. */
.page-banner--thank-you {
  min-height: min(78vh, 720px);
}
.page-banner--thank-you .page-banner__subheading {
  max-width: 52ch;
  margin-bottom: 2.25rem;
}

.faq-accordion__cta {
  background: var(--color-accent-red);
  color: var(--dark-text);
  font-weight: var(--font-weight-semibold);
  padding: 0.8rem 2.5rem;
  border-radius: var(--radius-btn);
  display: inline-block;
  transition: var(--transition-fast);
}
.faq-accordion__cta:hover {
  background: #000;
  color: #fff;
  border-radius: var(--radius-btn);
}

.contact-form__submit--pill {
  background: var(--color-accent-red);
  border-radius: var(--radius-btn);
  font-size: 1.5rem;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  transition: var(--transition-fast);
}
.contact-form__submit--pill:hover {
  background: #000;
  color: #fff;
  border-radius: var(--radius-btn);
}
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 600;
}
.breadcrumb__item {
  display: inline-flex;
  align-items: center;
}
.breadcrumb__link {
  color: inherit;
  text-decoration: none;
}
.breadcrumb__link:hover {
  color: var(--color-accent-red);
}
.breadcrumb__current {
  font-weight: 800;
}
.page-banner .breadcrumb {
  justify-content: flex-start;
  color: rgba(255, 255, 255, 0.85);
}
.page-banner .breadcrumb__separator {
  color: rgba(255, 255, 255, 0.5);
}
/* Crumb trail of the left-aligned banner (see .page-banner--start above):
   left-aligned, 13px, grey links with red separators (node 2010:8898). */
.page-banner--start .breadcrumb {
  justify-content: flex-start;
  color: var(--color-muted);
  font-size: 0.8125rem; /* sampled: 13px */
  margin-top: 0.6875rem; /* sampled: 11px */
}
.page-banner--start .breadcrumb__separator {
  color: var(--color-accent-red);
}
.page-banner--start .breadcrumb__current {
  color: var(--dark-text);
  font-weight: var(--font-weight-bold);
}
.page-banner__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.5rem 1.375rem;
  margin-bottom: 1rem;
}
.page-banner__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 0.75rem;
}
.page-banner__meta-item svg {
  width: 13px;
  height: 13px;
  color: var(--color-accent-red);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------
   2. Mobile navigation ([data-sp-toggle] toggles `.is-open`)
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* The panel slides open on grid-template-rows rather than max-height: the
	   row track follows the content, so opening a submenu *inside* the panel
	   grows it smoothly instead of running into a fixed cap and clipping.
	   `.collapse` is in the selector only to outrank Bootstrap's
	   `.collapse:not(.show) { display: none }` — a display-toggled element
	   can't transition at all. visibility keeps the closed panel's links out
	   of the tab order the way display:none used to. */
  .primary-nav.collapse {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    opacity: 0;
    transition:
      grid-template-rows 0.35s ease,
      opacity 0.35s ease,
      visibility 0.35s ease;
  }
  .primary-nav.collapse > * {
    /* Both needed for the 0fr track to actually reach zero height. */
    overflow: hidden;
    min-height: 0;
  }
  .primary-nav.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .primary-nav.collapse {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   3. Scroll-reveal animations ([data-animate])
   --------------------------------------------------------------- */
.aos-ready [data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.aos-ready [data-animate="fade-left"] {
  transform: translateX(-24px);
}
.aos-ready [data-animate="fade-right"] {
  transform: translateX(24px);
}
.aos-ready [data-animate="zoom"] {
  transform: scale(0.94);
}
.aos-ready [data-animate="fade"] {
  transform: none;
}
.aos-ready [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------
   4. Header live-search overlay (rendered by SearchService)
   --------------------------------------------------------------- */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(17, 24, 39, 0.6);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.search-overlay.is-open {
  opacity: 1;
}
.search-overlay[hidden] {
  display: none;
}
.search-panel {
  background: var(--background-color);
  padding: 2rem 0;
  box-shadow: var(--shadow-md);
}
.search-form {
  display: flex;
  gap: 0.5rem;
}
.search-result {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  text-decoration: none;
}
.search-result__type {
  font-size: 0.8rem;
  color: var(--text-color);
}
body.search-open {
  overflow: hidden;
}

/* ---------------------------------------------------------------
   5. Paginated archive navigation — the_posts_pagination()
   Called by search.php, archive.php and index.php, so it is styled once
   here rather than per page (rules.md's Shared Section Reuse — Step 4).
   home.php's blog grid does NOT come through here: it renders
   paginate_links() and rewrites .page-numbers to .post-grid__page, which
   pages/blog.css styles to match the design's own pager.
   --------------------------------------------------------------- */
.pagination {
  margin-top: 3rem;
}
.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 0.5rem;
  border: 1px solid var(--border-color);
  color: var(--heading-color);
  font-weight: 700;
  font-size: 0.8125rem;
  text-decoration: none;
  border-radius: var(--radius-btn);
  transition: var(--transition-fast);
}
.pagination a.page-numbers:hover {
  border-color: var(--color-accent-red);
  color: var(--color-accent-red);
}
.pagination .page-numbers.current {
  background: var(--color-accent-red);
  border-color: var(--color-accent-red);
  color: var(--dark-text);
}
.pagination .page-numbers.next,
.pagination .page-numbers.prev {
  background: var(--color-nav-bg);
  border-color: var(--color-nav-bg);
  color: var(--dark-text);
  padding: 0 1rem;
}
.pagination a.page-numbers.next:hover,
.pagination a.page-numbers.prev:hover {
  background: var(--color-accent-red);
  border-color: var(--color-accent-red);
  color: var(--dark-text);
}
.pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}