/* ═══════════════════════════════════════════════════════════════
   24TUNING PERFECTION POLISH  -  final cascade (loads last)
   Site-wide typography, spacing, buttons, forms, a11y, cards
   ═══════════════════════════════════════════════════════════════ */

:root {
  --accent-link: #00d4ff;
  --accent-link-hover: #33ddff;
  --prose-max-width: 70ch;
  --focus-ring: 0 0 0 3px rgba(0, 212, 255, 0.45);
}

/* ── Base readability ── */
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

p,
.content-body,
.prose,
.service-intro,
.page-hero-desc,
.contact-form label,
.form-hint {
  font-size: clamp(15px, 1.45vw, 16px);
  line-height: 1.65;
}

.content-body p,
.prose p,
.service-intro p {
  margin-bottom: 1em;
  max-width: var(--prose-max-width);
}

.content-body p:last-child,
.prose p:last-child {
  margin-bottom: 0;
}

/* ── Links (content only - not chrome nav/footer) ── */
a:not(.btn):not(.nav-link):not(.logo-link):not(.related-link):not(.news-card-link):not(.product-card):not(.service-card-link) {
  color: var(--accent-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Keep header + footer menus white; blue only for the current page */
#site-header .nav-desktop > li > a,
#site-header .nav-mobile > li > a,
#site-header .nav-mobile-services > a,
#site-header .nav-mobile-group-links a,
#site-header .nav-mobile-sub a,
#site-header .mega-col a,
#site-header .nav-dropdown a,
#site-header .mega-menu-footer a,
.site-footer .footer-links a,
.site-footer .footer-legal-links a {
  color: rgba(255, 255, 255, 0.88) !important;
  text-decoration: none;
}

#site-header .nav-desktop > li > a:hover,
#site-header .nav-mobile a:hover,
#site-header .mega-col a:hover,
#site-header .nav-dropdown a:hover,
#site-header .mega-menu-footer a:hover,
.site-footer .footer-links a:hover,
.site-footer .footer-legal-links a:hover {
  color: #fff !important;
}

#site-header .nav-desktop > li > a.active,
#site-header .nav-desktop > li > a[aria-current="page"],
#site-header .nav-mobile a.active,
#site-header .nav-mobile a[aria-current="page"],
#site-header .mega-col a.active,
#site-header .mega-col a[aria-current="page"],
#site-header .nav-dropdown a.active,
#site-header .nav-dropdown a[aria-current="page"],
.site-footer .footer-links a.active,
.site-footer .footer-links a[aria-current="page"],
.site-footer .footer-legal-links a.active,
.site-footer .footer-legal-links a[aria-current="page"] {
  color: var(--accent-link, #4db8e0) !important;
}

#site-header .nav-desktop > li > a.nav-cta,
#site-header .nav-desktop > li > a.nav-cta:hover,
#site-header .nav-desktop > li > a.nav-cta.active {
  color: #fff !important;
}

a:not(.btn):not(.nav-cta):hover {
  color: var(--accent-link-hover);
}

/* ── Buttons: size, focus, active ── */
.btn,
.book-now-btn,
.tuning-btn,
.v-search-btn,
.v-search-reset-btn {
  min-height: 48px;
  min-width: 44px;
}

.btn:focus-visible,
.book-now-btn:focus-visible,
.tuning-btn:focus-visible,
.v-search-btn:focus-visible,
.v-search-reset-btn:focus-visible,
.pill-link:focus-visible,
.related-link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:active:not(:disabled),
.book-now-btn:active,
.tuning-btn:active {
  transform: translateY(0) scale(0.98);
}

/* ── Forms ── */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.vehicle-select,
.contact-form input,
.contact-form select,
.contact-form textarea,
.admin-form input,
.admin-form select,
.admin-form textarea,
.account-auth-card input {
  font-family: var(--font-body);
  font-size: 16px;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--radius-sm, 6px);
  border: 1px solid rgba(77, 184, 224, 0.22);
  background: rgba(6, 11, 18, 0.85);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input::placeholder,
textarea::placeholder {
  color: #8b9cb0;
  opacity: 1;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--accent-link);
  box-shadow: var(--focus-ring);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"],
.field-error input,
.field-error textarea {
  border-color: #f87171;
}

.form-message.is-error {
  color: #fca5a5;
  border-left: 3px solid #f87171;
  padding-left: 12px;
  margin: 8px 0 16px;
}

.form-message.is-success {
  color: #86efac;
  border-left: 3px solid #22c55e;
  padding-left: 12px;
  margin: 8px 0 16px;
}

/* ── Images (never force height:auto — breaks logo / header assets) ── */
img {
  max-width: 100%;
}

/* ── Cards: unified hover (transform only) ── */
.service-card,
.product-card,
.feature-card-premium,
.review-card,
.news-card,
.trust-card,
.step-card,
.installer-card,
.facts-card,
.related-card {
  border-radius: var(--radius-sm, 8px);
}

/* ── Area pages  -  match service page system ── */
body[data-page^="areas/"] .page-hero {
  padding: var(--section-padding) 0 !important;
}

body[data-page^="areas/"] .page-hero--service .hero-cta-row,
body[data-page^="areas/"] .hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

body[data-page^="areas/"] .section > .container {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

body[data-page^="areas/"] .content-section {
  margin-bottom: clamp(28px, 4vw, 40px);
}

body[data-page^="areas/"] .content-section h2 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
}

body[data-page^="areas/"] .content-body,
body[data-page^="areas/"] .content-body p {
  color: var(--text-muted);
  font-family: var(--font-body);
}

body[data-page^="areas/"] .section .btn {
  min-height: 48px;
}

body[data-page^="areas/"] .cta-strip-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-stat .num,
.hero-stat-mobile .num,
.stat-num,
.facts-value,
.product-price,
.cart-total span:last-child {
  font-family: 'Orbitron', var(--font-display), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

body[data-page="index"] .hero-stat .num,
body[data-page="index"] .hero-stat-mobile .num {
  font-family: var(--font-display), system-ui, sans-serif !important;
  min-width: 7ch;
}

.product-fallback-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Mobile touch targets ── */
@media (max-width: 768px) {
  .nav-link,
  .breadcrumb a,
  .faq-item summary {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .cta-strip-actions .btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }
}

/* ── Final polish: primary buttons always white text ── */
.btn-primary,
a.btn-primary,
button.btn-primary,
.pill-row a.btn-primary,
.content-body a.btn-primary,
.cta-strip a.btn-primary,
.hero-cta-row a.btn-primary,
.seo-content a.btn-primary,
.local-seo a.btn-primary {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ── Section rhythm ── */
.section > .container,
.cta-strip > .container {
  box-sizing: border-box;
}

/* ── Prevent horizontal scroll WITHOUT breaking sticky header / mega-menu ── */
@media (max-width: 900px) {
  main,
  .site-footer {
    overflow-x: clip;
    max-width: 100%;
  }
}

/* ── Page hero content never overflows ── */
.page-hero > .container,
.page-hero .page-hero-content {
  max-width: 100%;
}

.page-hero h1 {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── Shop / news / about cohesion ── */
body[data-page="shop"] .page-hero,
body[data-page="news"] .page-hero,
body[data-page="about"] .page-hero,
body[data-page="contact"] .page-hero,
body[data-page="faq"] .page-hero,
body[data-page="booking"] .page-hero,
body[data-page="find-installer"] .page-hero,
body[data-page="find-installer"] .page-hero.has-hero-image,
body[data-page="find-installer"] .page-hero.page-hero--image {
  background-position: center center !important;
  background-size: cover !important;
}

body[data-page="services/marine-boat-remap"] .page-hero,
body[data-page="services/marine-boat-remap"] .page-hero.has-hero-image,
body[data-page="services/marine-boat-remap"] .page-hero.page-hero--image {
  background-position: center bottom !important;
  background-size: cover !important;
}

/* ── Image CLS guard ── */
.page-hero--image,
.page-hero.has-hero-image {
  background-color: var(--dark-bg, #030508);
}

img[loading="lazy"] {
  content-visibility: auto;
}

/* ── A11y / CWV polish (PageSpeed) ── */
.footer-social-icon {
  min-width: 44px !important;
  min-height: 44px !important;
  width: 44px !important;
  height: 44px !important;
}

.hero-slider-dot button {
  min-width: 44px !important;
  min-height: 44px !important;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .header-icon-btn,
  .menu-toggle {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

.hero-slider-media,
.hero-slide-bg {
  background-color: #030508;
}

input::placeholder,
textarea::placeholder {
  color: #9aabbc !important;
  opacity: 1;
}

.pdp-tabs__panel,
.product-description {
  color: var(--text-muted, #a8b8c8);
}

/* ── GSC Mobile Usability (do not touch desktop header / mega-menu) ── */
img,
video,
iframe,
canvas,
table {
  max-width: 100%;
}

#site-header .logo img,
#site-header .logo-mark img,
#site-header .header-icon-btn img,
#site-header .header-icon-btn svg {
  max-width: none;
}

@media (max-width: 900px) {
  body {
    font-size: 16px;
    line-height: 1.6;
  }

  .breadcrumb {
    font-size: 14px !important;
    line-height: 1.5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 0;
  }

  .breadcrumb a,
  .breadcrumb span {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 6px;
    font-size: 14px;
  }

  p,
  li,
  .product-description,
  .content-body,
  .seo-content,
  .page-hero-desc,
  .hero-subtitle,
  .hero-slide-desc {
    font-size: 16px !important;
    line-height: 1.65;
  }

  .section-label,
  .product-category-tag,
  .category-label,
  .product-info .category,
  .service-card-badge,
  .product-badge,
  .filter-group h3,
  .results-count {
    font-size: 12px !important;
    letter-spacing: 0.04em;
  }

  .announcement-bar,
  .announcement-bar * {
    font-size: 12px !important;
  }

  .footer-links a,
  .footer-bottom a,
  .footer-legal a,
  .legal-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
    font-size: 15px !important;
    line-height: 1.35;
  }

  .footer-col-title,
  .footer-col h4 {
    font-size: 15px !important;
  }

  .product-card-actions {
    gap: 12px !important;
  }

  .product-card-actions .btn,
  .product-actions .btn,
  .btn-add-cart,
  .btn-buy-now,
  .btn-view {
    min-height: 48px !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
  }

  .pill-row,
  .hero-cta-row,
  .product-actions {
    gap: 12px !important;
  }

  .shop-layout,
  .product-detail,
  .container,
  .products-grid,
  .service-hub-grid,
  table {
    max-width: 100%;
  }

  .products-grid,
  .shop-sidebar,
  .product-gallery,
  .product-info {
    min-width: 0;
  }

  .pdp-spec-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  main {
    max-width: 100%;
  }

  /* Mobile uses the hamburger drawer — hide desktop mega panel */
  #site-header .mega-menu {
    display: none !important;
  }
}