/*
Theme Name: Street Cars Reading
Theme URI: https://streetcarsreading.com
Author: Street Cars Reading
Description: Custom-coded theme for Street Cars Reading — taxi & airport transfer service. Dark, high-contrast design with Barlow Condensed headings, Inter body text and JetBrains Mono accents.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: streetcars
*/

/* ==========================================================================
   Design tokens (kept in sync with inc/customizer.php palette + JS consts)
   -------------------------------------------------------------------------
   --bg:        #FFFFFF   page background
   --card:      #FFFFFF   card / panel background
   --card-alt:  #F2F6F6   input / nested panel background
   --border:    #DCE6E6   hairline borders
   --text:      #22343A   primary text
   --text-mute: #5C6E73   secondary text
   --text-dim:  #8FA0A4   tertiary text (copyright etc.)
   --yellow:    #56767C   primary accent / CTA (teal)
   --yellow-dk: #3F5A5F   gradient partner for yellow
   --cyan:      #3E8791   secondary accent
   --green:     #4C9A8F   tertiary accent (success / trust)
   ========================================================================== */

:root {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --card-alt: #F2F6F6;
  --border: #DCE6E6;
  --text: #22343A;
  --text-mute: #5C6E73;
  --text-dim: #8FA0A4;
  --yellow: #56767C;
  --yellow-dk: #3F5A5F;
  --cyan: #3E8791;
  --green: #4C9A8F;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: Inter, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--yellow); color: var(--bg); }

img { max-width: 100%; display: block; }

a { color: inherit; }

button { font: inherit; }

.sc-container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

.sc-section-alt { width: 100%; }

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

.sc-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--yellow);
  color: var(--bg);
  font-family: var(--font-body);
  font-weight: 700;
  padding: 12px 20px;
  z-index: 999;
  border-radius: 0 0 8px 0;
}
.sc-skip-link:focus { left: 0; }

i[data-lucide] { display: inline-block; }

/* Buttons */
.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  padding: 15px 30px;
  border-radius: 10px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  line-height: 1.2;
}
.sc-btn-primary {
  background: var(--yellow);
  color: var(--bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
}
.sc-btn-primary:hover { background: var(--yellow-dk); }
.sc-btn-outline {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
}
.sc-btn-outline:hover { background: var(--card-alt); }
.sc-btn-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
}

/* Eyebrow / section headers */
.sc-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}
.sc-section-head {
  border-left: 2px solid var(--yellow);
  padding-left: 16px;
  margin-bottom: 32px;
}
.sc-section-head .sc-eyebrow { margin-bottom: 0; }
.sc-section-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  color: var(--text);
  text-transform: uppercase;
  margin: 6px 0 0;
}
.sc-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  color: var(--text);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.sc-hero-text {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-mute);
  max-width: 52ch;
  margin: 0 0 32px;
}
.sc-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.sc-h1--hero { font-size: 56px; line-height: 1.03; max-width: 16ch; }
.sc-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 48px;
  color: var(--text);
  text-transform: uppercase;
  margin: 0 0 16px;
  line-height: 1.05;
}
.sc-lede {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mute);
  max-width: 70ch;
  margin: 0;
}

/* Cards */
.sc-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.sc-card-lg { border-radius: 16px; }

/* Header */
.sc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}
.sc-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  gap: 20px;
  flex-wrap: wrap;
}
.sc-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.sc-logo-mark {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--yellow), var(--yellow-dk));
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sc-logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--text);
}
.sc-logo-text span { color: var(--text-mute); font-weight: 600; }

/* Uploaded logo (Customizer > Site Identity) — constrained to the header's
   footprint no matter what size the admin uploads, so the design never
   shifts or breaks when the logo image changes. */
.sc-logo--custom { display: flex; align-items: center; }
.sc-logo--custom .custom-logo-link { display: block; line-height: 0; }
.sc-logo--custom img.custom-logo {
  height: 40px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}

.sc-nav .menu {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.sc-nav .menu li { list-style: none; }
.sc-nav .menu a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  color: var(--text-mute);
}
.sc-nav .menu a:hover,
.sc-nav .menu li.current-menu-item > a,
.sc-nav .menu li.current_page_item > a,
.sc-nav .menu li.current-menu-parent > a,
.sc-nav .menu li.current-menu-ancestor > a {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}

.sc-header-actions { display: flex; align-items: center; gap: 16px; }
.sc-header-phone {
  font-family: var(--font-mono);
  color: var(--text);
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sc-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  color: var(--text);
}

/* Footer */
.sc-footer { background: var(--bg); border-top: 1px solid var(--border); }
.sc-footer-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 24px 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
}
.sc-footer-tagline {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-mute);
  margin: 16px 0 0;
  max-width: 32ch;
}
.sc-social-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.sc-social-pill {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-mute);
  text-decoration: none;
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 999px;
}
.sc-footer-heading {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 16px;
}
.sc-footer-links { display: flex; flex-direction: column; gap: 12px; }
.sc-footer-links a { font-family: var(--font-body); font-size: 14px; color: var(--text-mute); text-decoration: none; }
.sc-footer-links a:hover { color: var(--text); }
.sc-footer-phone { font-family: var(--font-mono); font-size: 16px; color: var(--text); }
.sc-footer-email { font-family: var(--font-body); font-size: 14px; color: var(--text-mute); margin-top: 8px; }
.sc-footer-address { font-family: var(--font-body); font-size: 14px; color: var(--text-mute); margin-top: 16px; line-height: 1.6; }
.sc-footer-bottom {
  border-top: 1px solid var(--border);
  padding: 20px 24px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-dim);
}

/* Hero */
.sc-hero { position: relative; overflow: hidden; }
.sc-hero-media { position: absolute; inset: 0; }
.sc-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.sc-hero-scrim { position: absolute; inset: 0; pointer-events: none; }
.sc-hero-scrim--tall { background: linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.85) 70%, #FFFFFF 100%); }
.sc-hero-scrim--page { background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.9) 75%, #FFFFFF 100%); }
.sc-hero-inner { position: relative; max-width: 1280px; margin: 0 auto; padding: 120px 24px 100px; }
.sc-hero-inner--page { padding: 100px 24px 72px; }
.sc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(76,154,143,0.12);
  border: 1px solid var(--green);
  color: var(--green);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 24px;
}

/* Grids */
.sc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

/* Quick links (home hero) */
.sc-quicklinks-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative; top: -56px; }
.sc-quicklinks { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.sc-quicklink {
  text-decoration: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.sc-quicklink-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sc-quicklink-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); }
.sc-quicklink-sub { font-family: var(--font-body); font-size: 13px; color: var(--text-mute); margin-top: 2px; }

/* Quote box */
.sc-quote-box { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.sc-quote-box--contact { border-radius: 16px; padding: 36px; grid-template-columns: 1fr; }
.sc-quote-check-list { display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
.sc-quote-check-item { display: flex; gap: 12px; align-items: flex-start; }
.sc-quote-check-item span { font-family: var(--font-body); font-size: 14px; color: var(--text); }
.sc-field-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: block;
  margin-bottom: 6px;
}
.sc-field {
  width: 100%;
  box-sizing: border-box;
  background: var(--card-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
}
.sc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sc-form-stack { display: flex; flex-direction: column; gap: 14px; }
.sc-quote-result { background: var(--card-alt); border: 1px solid var(--border); border-radius: 12px; padding: 28px; text-align: center; }
.sc-quote-result-label { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.sc-quote-result-price { font-family: var(--font-mono); font-weight: 500; font-size: 44px; color: var(--yellow); margin: 12px 0; }
.sc-quote-result-meta { font-family: var(--font-body); font-size: 13px; color: var(--text-mute); margin-bottom: 20px; }
.sc-quote-reset { margin-top: 14px; font-family: var(--font-body); font-size: 13px; color: var(--cyan); text-decoration: none; }

/* Feature / USP cards */
.sc-feature-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 28px; }
.sc-feature-title { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text); margin-top: 14px; }
.sc-feature-text { font-family: var(--font-body); font-size: 14px; color: var(--text-mute); margin-top: 6px; line-height: 1.6; }
.sc-feature-link { display: inline-block; margin-top: 18px; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--cyan); text-decoration: none; }
.sc-feature-link--mono { font-family: var(--font-mono); font-weight: 500; font-size: 15px; color: var(--yellow); }

/* Feature card (horizontal, icon+text, used for meet&greet / info tiles) */
.sc-tile { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; display: flex; gap: 14px; align-items: flex-start; }
.sc-tile-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--text); }
.sc-tile-text { font-family: var(--font-body); font-size: 13px; color: var(--text-mute); margin-top: 4px; }

/* Vehicle cards */
.sc-vehicle-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sc-vehicle-card--lg { border-radius: 16px; }
.sc-vehicle-media { height: 160px; background: var(--card-alt); position: relative; overflow: hidden; }
.sc-vehicle-media--sm { height: 150px; }
.sc-vehicle-media--lg { height: 200px; }
.sc-vehicle-media img { width: 100%; height: 100%; object-fit: cover; }
.sc-vehicle-body { padding: 20px; }
.sc-vehicle-body--lg { padding: 24px; }
.sc-vehicle-name { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--text); }
.sc-vehicle-name--lg { font-size: 24px; }
.sc-vehicle-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(62,135,145,0.12);
  border: 1px solid var(--cyan);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-top: 8px;
}
.sc-vehicle-desc { font-family: var(--font-body); font-size: 14px; color: var(--text-mute); line-height: 1.6; margin: 14px 0 0; }

/* Testimonials */
.sc-testimonial-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; }
.sc-stars { display: flex; gap: 3px; color: var(--yellow); margin-bottom: 12px; }
.sc-stars i { width: 16px; height: 16px; }
.sc-testimonial-quote { font-family: var(--font-body); font-size: 14px; color: var(--text); line-height: 1.6; }
.sc-testimonial-author { font-family: var(--font-body); font-size: 13px; color: var(--text-mute); margin-top: 16px; }

/* Services (Services page repeating rows) */
.sc-service-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.sc-service-media { height: 280px; background: var(--card-alt); position: relative; overflow: hidden; }
.sc-service-media img { width: 100%; height: 100%; object-fit: cover; }
.sc-service-body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.sc-service-title { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--text); margin-top: 14px; }
.sc-service-text { font-family: var(--font-body); font-size: 15px; line-height: 1.7; color: var(--text-mute); margin: 10px 0 0; }

/* CTA panel */
.sc-cta-panel { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 48px; text-align: center; }
.sc-cta-panel h2 { font-family: var(--font-display); font-weight: 800; font-size: 30px; color: var(--text); text-transform: uppercase; margin: 0 0 12px; }
.sc-cta-panel p { font-family: var(--font-body); font-size: 15px; color: var(--text-mute); margin: 0 0 24px; }

/* Split promo panel (account / drive) */
.sc-promo-panel { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 36px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.sc-promo-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; }
.sc-promo-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text); }
.sc-promo-text { font-family: var(--font-body); font-size: 14px; color: var(--text-mute); margin-top: 6px; max-width: 60ch; }

/* Contact info tiles */
.sc-info-tile { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; display: flex; gap: 14px; align-items: flex-start; }
.sc-info-label { font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); }
.sc-info-value { font-family: var(--font-body); font-size: 15px; color: var(--text); text-decoration: none; display: block; margin-top: 4px; }
.sc-info-value--mono { font-family: var(--font-mono); font-size: 20px; }
.sc-map-frame { height: 180px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--card-alt); }
.sc-map-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Route pills */
.sc-pill-row { display: flex; gap: 14px; flex-wrap: wrap; }
.sc-pill { background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 12px 22px; font-family: var(--font-mono); font-size: 14px; color: var(--text); }

/* Stat cards (About) */
.sc-stat-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; }
.sc-stat-value { font-family: var(--font-mono); font-weight: 500; font-size: 28px; }
.sc-stat-label { font-family: var(--font-body); font-size: 14px; color: var(--text-mute); margin-top: 4px; }

/* Blog */
.sc-post-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.sc-post-media { height: 190px; background: var(--card-alt); overflow: hidden; }
.sc-post-media img { width: 100%; height: 100%; object-fit: cover; }
.sc-post-body { padding: 22px; }
.sc-post-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.04em; }
.sc-post-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text); margin: 10px 0 0; }
.sc-post-title a { text-decoration: none; color: inherit; }
.sc-post-excerpt { font-family: var(--font-body); font-size: 14px; color: var(--text-mute); line-height: 1.6; margin-top: 10px; }
.sc-post-readmore { display: inline-block; margin-top: 14px; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--cyan); text-decoration: none; }
.sc-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.sc-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 48px; flex-wrap: wrap; }
.sc-pagination a, .sc-pagination span {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-mute);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
}
.sc-pagination a:hover { color: var(--text); border-color: var(--yellow); }
.sc-pagination .current { color: var(--bg); background: var(--yellow); border-color: var(--yellow); }

/* Single post */
.sc-single-header { max-width: 860px; margin: 0 auto; padding: 72px 24px 0; }
.sc-single-media { max-width: 1280px; margin: 32px auto 0; padding: 0 24px; }
.sc-single-media img { width: 100%; max-height: 480px; object-fit: cover; border-radius: 16px; border: 1px solid var(--border); }
.sc-single-body { max-width: 860px; margin: 0 auto; padding: 40px 24px 80px; }
.sc-single-body p { font-family: var(--font-body); font-size: 16px; line-height: 1.8; color: var(--text-mute); margin: 0 0 22px; }
.sc-single-body h2 { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: var(--text); text-transform: uppercase; margin: 40px 0 16px; }
.sc-single-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--text); margin: 32px 0 12px; }
.sc-single-body a { color: var(--cyan); }
.sc-single-body ul, .sc-single-body ol { font-family: var(--font-body); font-size: 16px; line-height: 1.8; color: var(--text-mute); padding-left: 22px; }
.sc-single-body blockquote { border-left: 2px solid var(--yellow); margin: 24px 0; padding: 4px 0 4px 20px; color: var(--text); font-style: italic; }
.sc-single-body img { border-radius: 12px; }
.sc-back-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--cyan); text-decoration: none; margin-bottom: 24px; }

/* 404 */
.sc-404 { max-width: 640px; margin: 0 auto; padding: 120px 24px; text-align: center; }

/* Comments (kept minimal, matches dark theme) */
.sc-comments { max-width: 860px; margin: 0 auto; padding: 0 24px 80px; }
.sc-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.sc-comments .comment-body { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 16px; font-family: var(--font-body); color: var(--text-mute); font-size: 14px; }
.sc-comments textarea, .sc-comments input[type="text"], .sc-comments input[type="email"] { width: 100%; box-sizing: border-box; background: var(--card-alt); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 14px; }
.sc-comments .form-submit input { background: var(--yellow); color: var(--bg); border: none; font-weight: 700; padding: 13px 26px; border-radius: 10px; cursor: pointer; }

/* ==========================================================================
   Light "teal + white" homepage variant (client preview / alt design)
   -------------------------------------------------------------------------
   Activated via body.sc-theme-light, applied only to the "Home (Light
   Preview)" page template. Every shared component (header, footer,
   buttons, badges, cards, section headers) already reads its colours from
   the CSS custom properties below, so redefining them here re-skins the
   whole page — including the site header/footer — without touching a
   single line of the original dark theme.
   ========================================================================== */
body.sc-theme-light {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --card-alt: #F2F6F6;
  --border: #DCE6E6;
  --text: #22343A;
  --text-mute: #5C6E73;
  --text-dim: #8FA0A4;
  --yellow: #56767C;
  --yellow-dk: #3F5A5F;
  --cyan: #3E8791;
  --green: #4C9A8F;
}

body.sc-theme-light ::selection { background: #56767C; color: #fff; }

body.sc-theme-light .sc-header { background: rgba(255,255,255,0.92); }

body.sc-theme-light .sc-logo-mark i[data-lucide] { color: #fff !important; }

body.sc-theme-light .sc-btn-primary { box-shadow: none; }
body.sc-theme-light .sc-btn-primary:hover { background: var(--yellow-dk); }

body.sc-theme-light .sc-btn-phone { background: var(--card-alt); }

body.sc-theme-light .sc-badge { background: rgba(76,154,143,0.1); }

body.sc-theme-light .sc-card,
body.sc-theme-light .sc-card-lg,
body.sc-theme-light .sc-feature-card,
body.sc-theme-light .sc-vehicle-card,
body.sc-theme-light .sc-testimonial-card,
body.sc-theme-light .sc-quicklink,
body.sc-theme-light .sc-tile,
body.sc-theme-light .sc-info-tile,
body.sc-theme-light .sc-post-card,
body.sc-theme-light .sc-cta-panel,
body.sc-theme-light .sc-promo-panel,
body.sc-theme-light .sc-stat-card,
body.sc-theme-light .sc-quote-result,
body.sc-theme-light .sc-quote-box,
body.sc-theme-light .sc-service-row,
body.sc-theme-light .sc-map-frame,
body.sc-theme-light .sc-pill {
  box-shadow: 0 2px 20px rgba(34,52,58,0.07);
}

body.sc-theme-light .sc-hero-scrim--tall,
body.sc-theme-light .sc-hero-scrim--page {
  background: linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.88) 70%, #FFFFFF 100%);
}

body.sc-theme-light .sc-quote-result,
body.sc-theme-light .sc-field { background: var(--card-alt); }

body.sc-theme-light .sc-section-alt { background: var(--card-alt); }

body.sc-theme-light .sc-light-hero-eyebrow { color: var(--yellow); }

/* Responsive */
@media (max-width: 900px) {
  /* Header is sticky by default (works on desktop), but pin it with
     position:fixed on mobile so it reliably stays pinned to the top of the
     viewport while scrolling on phones/tablets. Removing it from flow like
     this means #sc-main needs matching top padding so page content doesn't
     slide underneath it. */
  .sc-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; }
  #sc-main { padding-top: 70px; }
  .sc-nav { display: none; }
  .sc-nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .sc-header-inner.is-open + .sc-nav,
  body.sc-nav-open .sc-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 16px 24px 24px;
    gap: 18px;
  }
  .sc-grid-3, .sc-quicklinks, .sc-blog-grid, .sc-grid-2 { grid-template-columns: 1fr; }
  .sc-quote-box { grid-template-columns: 1fr; }
  .sc-service-row { grid-template-columns: 1fr; }
  .sc-service-row [style*="order:2"] { order: 1 !important; }
  .sc-service-row [style*="order:1"] { order: 2 !important; }
  .sc-footer-grid { grid-template-columns: 1fr 1fr; }
  .sc-h1 { font-size: 36px; }
  .sc-field-row { grid-template-columns: 1fr; }
  .sc-promo-panel { grid-template-columns: 1fr; text-align: left; }
}
@media (max-width: 600px) {
  .sc-footer-grid { grid-template-columns: 1fr; }
  .sc-h1 { font-size: 30px; }
}

.sc-field-optional,.sc-field-required{font-weight:400;font-size:11px;text-transform:none;opacity:.6;margin-left:4px;}
.sc-field-required{color:#B3261E;opacity:.85;}