/*
Theme Name: 1st Shot Auto Glass
Theme URI: https://1stshotautoglass.com/
Description: Lightweight drop-in design for 1stshotautoglass.com. Replaces the Elementor Pro theme-builder templates (header, footer, menus, blog archive, single post, quote popup) with plain theme code. Page and post content still render with free Elementor exactly as before, so every address, title, heading and paragraph stays the same at launch.
Author: 1st Shot Auto Glass
Template: hello-elementor
Version: 1.0.13
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: firstshot
*/

/* ---------- Design tokens (change the look here) ---------- */
:root {
  --fs-navy: #0b2545;
  --fs-navy-2: #13315c;
  --fs-blue: #1d4ed8;
  --fs-blue-dark: #1e3a8a;
  --fs-sky: #93c5fd;
  --fs-text: #374151;
  --fs-heading: #0f172a;
  --fs-muted: #4b5563;
  --fs-line: #e5e7eb;
  --fs-bg: #ffffff;
  --fs-bg-soft: #f5f7fb;
  --fs-sand: #f7efe3;
  /* Call / Text / Quote use Dad's own button colours (his CTA buttons on the blog and elsewhere):
     Call Now bright blue, Text Us light blue, Get a Quote dark charcoal. */
  --fs-call: #2563eb;
  --fs-call-hover: #1d4ed8;
  --fs-text-btn: #e0ecff;
  --fs-text-btn-hover: #d5e5ff;
  --fs-text-btn-ink: #1d4ed8;
  --fs-quote: #1f2937;
  --fs-quote-hover: #111827;
  --fs-on-action: #ffffff;
  --fs-radius: 12px;
  --fs-radius-sm: 8px;
  --fs-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .08);
  --fs-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-wrap: 1200px;
}

/* ---------- Base ---------- */
html { scroll-padding-top: 96px; scroll-padding-bottom: 16px; }
body { font-family: var(--fs-font); color: var(--fs-text); background: var(--fs-bg); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { line-height: 1.2; }
/* Only the theme's own headings get the navy colour. Headings inside Dad's Elementor content inherit their
   section's text colour, as they do with Hello Elementor today (a global h1-h6 colour made headings on his
   black sections invisible). */
:where(.fs-single__title, .fs-page-head h1, .fs-related__title, .fs-archive__intro h2, .fs-archive__tools h2, .fs-card__title, .fs-offer__title) { color: var(--fs-heading); }
a { color: var(--fs-blue); }
.fs-wrap { max-width: var(--fs-wrap); margin: 0 auto; padding: 0 20px; }
.fs-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: #fff; color: var(--fs-navy); padding: 10px 14px; border-radius: 6px; }
.fs-skip:focus { left: 8px; }
.fs-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--fs-sky); outline-offset: 2px; }
img { max-width: 100%; height: auto; }

/* ---------- Buttons ---------- */
.fs-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.1; white-space: nowrap; transition: transform .25s, background-color .25s; }
@media (hover: hover) { .fs-btn:hover { transform: translateY(-2px); } }
.fs-btn svg { width: 20px; height: 20px; flex: none; }
.fs-btn--call { background: var(--fs-call); border-color: var(--fs-call); color: var(--fs-on-action); }
.fs-btn--call:hover { background: var(--fs-call-hover); border-color: var(--fs-call-hover); color: var(--fs-on-action); }
.fs-btn--text { background: var(--fs-text-btn); border-color: var(--fs-call); color: var(--fs-text-btn-ink); }
.fs-btn--text:hover { background: var(--fs-text-btn-hover); color: var(--fs-text-btn-ink); }
.fs-btn--quote { background: var(--fs-quote); border-color: var(--fs-quote); color: var(--fs-on-action); }
.fs-btn--quote:hover { background: var(--fs-quote-hover); border-color: var(--fs-quote-hover); color: var(--fs-on-action); }
@media (prefers-reduced-motion: reduce) { .fs-btn:hover { transform: none; } }
.fs-btn--ghost { background: transparent; color: var(--fs-navy); border-color: var(--fs-navy); }
.fs-btn--ghost:hover { background: var(--fs-navy); color: #fff; }
.fs-btn--light { background: #fff; color: var(--fs-navy); }

/* ---------- Top bar ---------- */
.fs-topbar { background: var(--fs-navy); color: #e5edff; font-size: 14px; }
.fs-topbar .fs-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.fs-topbar a { color: #fff; }
.fs-topbar__msg { margin: 0; }
.fs-topbar__msg a { font-weight: 700; text-decoration: none; }
.fs-social { display: flex; gap: 14px; list-style: none; margin: 0; padding: 0; }
.fs-social a { display: inline-flex; color: inherit; }
.fs-social svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- Header ---------- */
.fs-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--fs-line); }
.admin-bar .fs-header { top: 32px; }
.fs-header__row { display: flex; align-items: center; gap: 20px; min-height: 92px; }
.fs-logo { display: block; flex: none; }
.fs-logo img { display: block; width: auto; height: 80px; max-width: 260px; object-fit: contain; }
.fs-header__trust { font-size: 14px; color: var(--fs-muted); margin: 0; }
.fs-header__trust strong { color: var(--fs-heading); }
.fs-header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.fs-header__phone { font-weight: 800; font-size: 18px; color: var(--fs-heading); text-decoration: none; white-space: nowrap; }
.fs-header__phone small { display: block; font-weight: 600; font-size: 12px; color: var(--fs-muted); letter-spacing: .02em; text-transform: uppercase; }

/* ---------- Primary navigation ---------- */
.fs-nav { background: #fff; border-top: 1px solid var(--fs-line); }
.fs-nav ul { list-style: none; margin: 0; padding: 0; }
.fs-nav > .fs-wrap > ul { display: flex; flex-wrap: wrap; gap: 2px; }
.fs-nav li { position: relative; }
.fs-nav a { display: block; padding: 12px 14px; color: var(--fs-heading); text-decoration: none; font-weight: 600; font-size: 15px; }
.fs-nav a:hover, .fs-nav .current-menu-item > a { color: var(--fs-blue); }
.fs-nav .menu-item-has-children > a::after { content: ""; display: inline-block; margin-left: 6px; border: 5px solid transparent; border-top-color: currentColor; transform: translateY(3px); }
.fs-nav .sub-menu { position: absolute; left: 0; top: 100%; min-width: 260px; background: #fff; border: 1px solid var(--fs-line); border-radius: var(--fs-radius-sm); box-shadow: var(--fs-shadow); padding: 6px 0; display: none; z-index: 60; }
.fs-nav .sub-menu .sub-menu { left: 100%; top: -7px; }
.fs-nav li:hover > .sub-menu, .fs-nav li:focus-within > .sub-menu { display: block; }
.fs-nav .sub-menu a { padding: 9px 16px; font-weight: 500; }
.fs-menu-toggle { display: none; }

/* ---------- Main ---------- */
.fs-main { min-height: 50vh; }
.fs-page-head { background: linear-gradient(180deg, var(--fs-sand), #fff); padding: 40px 0 24px; }
.fs-page-head h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); }

/* ---------- Single post ---------- */
.fs-single { padding: 32px 0 56px; }
.fs-single__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
.fs-single__title { font-size: clamp(30px, 4vw, 42px); margin: 0 0 18px; }
.fs-single__content { min-width: 0; }
.fs-aside { position: sticky; top: 140px; display: grid; gap: 16px; }
.fs-cta-card { background: var(--fs-navy); color: #e5edff; border-radius: var(--fs-radius); padding: 22px; }
.fs-cta-card__title { color: #fff; font-size: 20px; margin: 0 0 14px; }
.fs-cta-card .fs-btn { width: 100%; margin-top: 10px; }
.fs-cta-card .fs-btn--ghost { color: #fff; border-color: #fff; }
.fs-offer { background: var(--fs-sand); border-radius: var(--fs-radius); padding: 20px; }
.fs-offer__title { font-size: 17px; margin: 0 0 8px; }
.fs-offer__phone { font-weight: 800; font-size: 22px; color: var(--fs-heading); text-decoration: none; }
.fs-offer__tag { margin: 6px 0 0; font-size: 14px; color: var(--fs-muted); }
.fs-related { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--fs-line); }
.fs-related__title { margin: 0 0 18px; font-size: 26px; }
.fs-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fs-related__card { display: block; border: 1px solid var(--fs-line); border-radius: var(--fs-radius); overflow: hidden; text-decoration: none; background: #fff; }
.fs-related__card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fs-related__card h4 { margin: 0; padding: 14px 16px 18px; font-size: 17px; color: var(--fs-heading); }

/* ---------- Archive (blog + categories) ---------- */
.fs-archive { padding: 0 0 56px; }
.fs-archive__intro h2 { font-size: 24px; margin: 28px 0 8px; }
.fs-archive__intro p { max-width: 760px; color: var(--fs-muted); }
.fs-topics { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 10px 0 0; }
.fs-topics a { display: inline-block; padding: 8px 14px; border-radius: 999px; background: #f1f5f9; border: 1px solid #e2e8f0; color: var(--fs-navy); text-decoration: none; font-weight: 600; font-size: 15px; transition: background-color .2s; }
.fs-topics a:hover { background: #e2e8f0; }
.fs-topics a[aria-current="page"] { background: var(--fs-navy); color: #fff; border-color: var(--fs-navy); }
.fs-archive__tools { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between; margin: 8px 0 24px; }
.fs-search { display: flex; gap: 8px; }
.fs-search input[type="search"] { min-height: 44px; border: 1px solid #cbd5e1; border-radius: 999px; padding: 0 16px; font-size: 16px; min-width: 240px; }
.fs-search button { min-height: 44px; border-radius: 999px; border: 0; background: var(--fs-navy); color: #fff; padding: 0 18px; font-weight: 700; cursor: pointer; }
.fs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; list-style: none; padding: 0; margin: 0; }
.fs-card { display: flex; flex-direction: column; border: 1px solid var(--fs-line); border-radius: var(--fs-radius); overflow: hidden; background: #fff; }
.fs-card__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.fs-card__body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.fs-card__title { font-size: 19px; margin: 0; }
.fs-card__title a { color: var(--fs-heading); text-decoration: none; }
.fs-card__title a:hover { color: var(--fs-blue); }
.fs-card__excerpt p { margin: 0; color: var(--fs-muted); font-size: 15px; }
.fs-card__more { margin-top: auto; font-weight: 700; text-decoration: none; }
.fs-pagination { margin-top: 32px; }
.fs-pagination ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
.fs-pagination a, .fs-pagination span { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--fs-line); text-decoration: none; padding: 0 12px; }
.fs-pagination .current { background: var(--fs-navy); color: #fff; border-color: var(--fs-navy); }

/* ---------- Footer ---------- */
/* Links are light blue (and underlined inside sentences) so they read as links; plain text is soft gray. */
.fs-footer { background: var(--fs-navy); color: #cbd5e1; margin-top: 0; font-size: 15.5px; line-height: 1.6; }
.fs-footer a { color: #93c5fd; text-decoration: none; }
.fs-footer a:hover, .fs-footer a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
.fs-footer p a { text-decoration: underline; text-decoration-color: rgba(147, 197, 253, .5); text-underline-offset: .2em; }
.fs-footer__cta { background: var(--fs-navy-2); }
.fs-footer__cta .fs-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 26px; padding-bottom: 26px; }
.fs-footer__cta p { margin: 0; color: #fff; font-size: 22px; font-weight: 800; }
.fs-footer__cta .fs-footer__cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Dad's dark Get a Quote button needs an edge on the navy band and cards. */
.fs-footer__cta .fs-btn--quote, .fs-cta-card .fs-btn--quote { border-color: rgba(255, 255, 255, .55); }
.fs-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px 48px; padding-top: 56px; padding-bottom: 40px; }
.fs-footer__grid > div > * { margin-top: 0; }
.fs-footer__grid > div > * + .fs-footer__title { margin-top: 34px; }
.fs-footer__title { position: relative; color: #fff; font-size: 17px; font-weight: 700; letter-spacing: .01em; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(147, 197, 253, .25); }
.fs-footer__title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 44px; height: 3px; border-radius: 2px; background: #3b82f6; }
/* Dad's car logo, shown at its own size (250 px) as on the live footer. */
.fs-footer__logo img { width: 250px; max-width: 100%; height: auto; display: block; margin-bottom: 18px; }
.fs-footer__tagline { color: #fff; margin: 0 0 14px; }
.fs-footer__tagline strong { display: block; }
.fs-footer ul { list-style: none; margin: 0; padding: 0; }
.fs-footer li { margin: 0 0 11px; }
.fs-footer__hours { display: grid; grid-template-columns: max-content 1fr; gap: 10px 22px; margin: 0; }
.fs-footer__hours dt { font-weight: 700; color: #fff; }
.fs-footer__hours dd { margin: 0; color: #e2e8f0; white-space: nowrap; }
.fs-footer__hours dt { white-space: nowrap; }
/* .fs-footer__contact needs the extra class: the plain ".fs-footer ul" rule (padding: 0) outranks a single class. */
.fs-footer .fs-footer__contact { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.fs-footer__contact li { display: flex; align-items: center; gap: 10px; }
.fs-footer__contact svg { width: 18px; height: 18px; flex: none; color: #60a5fa; }
.fs-footer__contact a { font-weight: 600; }
.fs-footer__badges { margin-top: 24px; }
.fs-footer__badges a { display: inline-block; }
.fs-footer__badges img { display: block; width: 280px; max-width: 100%; height: auto; }
.fs-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); font-size: 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.fs-footer__bottom .fs-social { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fs-footer__bottom .fs-social li { margin: 0; }

/* ---------- Sticky Call / Text / Quote bar at the bottom of phones (kept separate from the menu) ---------- */
.fs-bar { display: none; }
.fs-sub-toggle { display: none; }

/* Hello Elementor's reset turns any hovered or tapped button pink (#c36); the theme's buttons keep their own colours. */
.fs-dialog__close:hover, .fs-dialog__close:focus { background: rgba(255, 255, 255, .14); color: #fff; }
.fs-search button:hover, .fs-search button:focus { background: #08182f; color: #fff; }

/* ---------- Quote dialog ---------- */
.fs-dialog { border: 0; border-radius: var(--fs-radius); padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-shadow: var(--fs-shadow); }
.fs-dialog::backdrop { background: rgba(11, 37, 69, .6); }
.fs-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: var(--fs-navy); color: #fff; }
.fs-dialog__head h2 { margin: 0; color: #fff; font-size: 20px; }
.fs-dialog__close { background: transparent; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer; min-width: 44px; min-height: 44px; }
.fs-dialog__body { padding: 16px 20px 22px; overflow: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .fs-header__trust { display: none; }
  .fs-single__grid { grid-template-columns: minmax(0, 1fr); }
  .fs-aside { position: static; }
  .fs-cards, .fs-related__grid { grid-template-columns: repeat(2, 1fr); }
  .fs-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .fs-topbar__social { display: none; }
  .fs-header__row { min-height: 72px; gap: 12px; }
  .fs-logo img { height: 58px; max-width: 176px; }
  .fs-header__actions .fs-btn--quote { display: none; }
  .fs-header__phone small { display: none; }
  .fs-header__phone { font-size: 16px; }
  .fs-menu-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: var(--fs-navy); cursor: pointer; }
  .fs-menu-toggle:hover, .fs-menu-toggle:focus, .fs-menu-toggle[aria-expanded="true"] { background: var(--fs-navy); border-color: var(--fs-navy); color: #fff; }
  .fs-menu-toggle svg { width: 24px; height: 24px; }
  .fs-nav { display: none; max-height: calc(100dvh - 170px); overflow: auto; }
  .fs-nav.is-open { display: block; }
  .fs-nav > .fs-wrap > ul { display: block; }
  .fs-nav a { padding: 13px 4px; border-bottom: 1px solid var(--fs-line); }
  .fs-nav .sub-menu, .fs-nav .sub-menu .sub-menu { position: static; display: block; border: 0; box-shadow: none; padding: 0 0 0 16px; min-width: 0; }
  .fs-nav .menu-item-has-children > a::after { display: none; }
  /* Collapsible sub-menus (Dad's request): site.js adds an arrow button beside each parent; the links still open
     their pages. Without JavaScript every section stays open. */
  .fs-nav.has-sub-toggles .menu-item-has-children { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .fs-nav.has-sub-toggles .menu-item-has-children > .sub-menu { grid-column: 1 / -1; display: none; }
  .fs-nav.has-sub-toggles .menu-item-has-children.is-open > .sub-menu { display: block; }
  .fs-sub-toggle { display: inline-flex; align-items: center; justify-content: center; width: 52px; min-height: 48px; padding: 0; border: 0; border-bottom: 1px solid var(--fs-line); border-radius: 0; background: transparent; color: var(--fs-navy); cursor: pointer; }
  .fs-sub-toggle:hover, .fs-sub-toggle:focus { background: #f1f5f9; color: var(--fs-navy); }
  .fs-sub-toggle svg { width: 20px; height: 20px; transition: transform .2s; }
  .fs-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .fs-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff; border-top: 1px solid var(--fs-line); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(15, 23, 42, .08); }
  .fs-bar .fs-btn { width: 100%; min-height: 48px; padding: 0 8px; font-size: 15px; gap: 6px; }
  .fs-bar .fs-btn svg { width: 17px; height: 17px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  /* While a form field has focus the bar steps aside, so the field is never hidden (WCAG 2.4.11). */
  body.fs-field-focus .fs-bar { display: none; }
  html { scroll-padding-top: 90px; scroll-padding-bottom: 84px; }
  .fs-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fs-topbar { font-size: 13px; }
  .fs-cards, .fs-related__grid { grid-template-columns: 1fr; }
  .fs-search input[type="search"] { min-width: 0; width: 100%; }
  .fs-footer__cta p { font-size: 19px; }
}
@media (max-width: 420px) {
  .fs-header__row { gap: 8px; }
  .fs-logo img { height: 50px; max-width: 150px; }
  .fs-header__actions { gap: 8px; }
  .fs-header__phone { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* ---------- Free stand-ins for Elementor Pro widgets in page bodies (inc/elementor-compat.php) ---------- */
.fs-compat-menu .elementor-nav-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 8px; }
.fs-compat-menu.elementor-nav-menu--layout-vertical .elementor-nav-menu { flex-direction: column; align-items: stretch; }
/* Link pills (vehicle makes, insurers, cities) look like Dad's category buttons: light gray, navy when selected. */
.fs-compat-menu .elementor-nav-menu a { display: block; padding: 8px 14px; border: 1px solid #e2e8f0; border-radius: 999px; color: var(--fs-navy); font-weight: 600; text-decoration: none; background: #f1f5f9; transition: background-color .2s; }
.fs-compat-menu .elementor-nav-menu a:hover, .fs-compat-menu .elementor-nav-menu a:focus-visible { border-color: #cbd5e1; background: #e2e8f0; }
.fs-compat-menu .current-menu-item > a { background: var(--fs-navy); border-color: var(--fs-navy); color: #fff; }
.fs-compat-menu .sub-menu { list-style: none; padding-left: 12px; }
/* Featured blog posts (home page). Elementor Pro drew each post as a white card; without Pro the titles were dark
   text on the widget's black box with no space between posts. White cards with room inside them (Dad, 1.0.11).
   Elementor's .elementor-grid sets the gaps from Pro-only variables (none = 0), hence the doubled class. */
.fs-compat-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 24px; text-align: center; }
.fs-compat-posts.elementor-grid { gap: 24px; }
.fs-compat-posts .elementor-post { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--fs-line); border-radius: var(--fs-radius); background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.fs-compat-posts .elementor-post__thumbnail__link, .fs-compat-posts .elementor-post__thumbnail { display: block; }
.fs-compat-posts img { display: block; width: 100%; height: auto; aspect-ratio: 1 / var(--fs-post-ratio, .66); object-fit: cover; }
.fs-compat-posts .elementor-post__text { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 18px 18px; }
.fs-compat-posts .elementor-post__title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
.fs-compat-posts .elementor-post__title a { color: var(--fs-heading); text-decoration: none; }
.fs-compat-posts .elementor-post__title a:hover, .fs-compat-posts .elementor-post__title a:focus-visible { text-decoration: underline; }
.fs-compat-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fs-compat-gallery a { position: relative; display: block; color: var(--fs-heading); text-decoration: none; }
.fs-compat-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--fs-radius-sm); }
.fs-compat-gallery__title, .fs-compat-gallery__description { display: block; font-size: .9rem; margin-top: 4px; }
.fs-compat-gallery__description { color: var(--fs-muted); font-size: .85rem; }
.fs-compat-hotspot img { width: 100%; height: auto; }
.fs-compat-hotspot__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fs-compat-hotspot__list a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--fs-bg-soft); color: var(--fs-blue-dark); font-weight: 600; text-decoration: none; }
.fs-compat-toc { border: 1px solid var(--fs-line); border-radius: var(--fs-radius); padding: 16px 20px; background: var(--fs-bg-soft); }
.fs-compat-toc__title { margin: 0 0 8px; font-weight: 700; color: var(--fs-heading); }
.fs-compat-toc__list { margin: 0; padding-left: 1.4em; }
.fs-compat-fb a { font-weight: 600; }
@media (max-width: 1024px) { .fs-compat-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fs-compat-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .fs-compat-posts, .fs-compat-gallery { grid-template-columns: 1fr; }
  .fs-compat-posts { padding: 16px; }
  .fs-compat-posts.elementor-grid { gap: 16px; }
  .fs-compat-posts .elementor-post__text { padding: 14px 16px 16px; }
  .fs-compat-posts .elementor-post__title { font-size: 1.0625rem; }
}

/* Call / Text / Quote row under a blog post's title (the old post template had it there too) */
.fs-single__cta { margin: 0 0 24px; padding: 14px 16px; border: 1px solid var(--fs-line); border-radius: var(--fs-radius); background: var(--fs-bg-soft); }
.fs-single__cta-title { margin: 0 0 10px; font-weight: 700; color: var(--fs-heading); }
.fs-single__cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Beat Elementor's site-kit link colour (.elementor-kit-N a, light blue) on the theme's own pieces ----------
   The kit rule is more specific than a single class, so without these the buttons, phone numbers and menus
   turned light blue (low contrast). Links inside page bodies keep the kit colour Dad set in Elementor. */
.fs-theme .fs-btn--call, .fs-theme .fs-btn--quote,
.fs-theme .fs-btn--call:hover, .fs-theme .fs-btn--quote:hover { color: var(--fs-on-action); }
.fs-theme .fs-btn--text, .fs-theme .fs-btn--text:hover { color: var(--fs-text-btn-ink); }
.fs-theme .fs-btn--ghost { color: var(--fs-navy); }
.fs-theme .fs-btn--ghost:hover, .fs-theme .fs-cta-card .fs-btn--ghost { color: #fff; }
.fs-theme .fs-btn--light { color: var(--fs-navy); }
.fs-theme .fs-topbar a { color: #fff; }
.fs-theme .fs-footer a:not(.fs-btn) { color: #93c5fd; }
.fs-theme .fs-footer a:not(.fs-btn):hover, .fs-theme .fs-footer a:not(.fs-btn):focus-visible { color: #fff; }
.fs-theme .fs-header__phone, .fs-theme .fs-offer__phone, .fs-theme .fs-nav a, .fs-theme .fs-topics a,
.fs-theme .fs-card__title a, .fs-theme .fs-compat-posts .elementor-post__title a, .fs-theme .fs-compat-gallery a { color: var(--fs-heading); }
.fs-theme .fs-nav a:hover, .fs-theme .fs-nav .current-menu-item > a { color: var(--fs-blue); }
.fs-theme .fs-topics a[aria-current="page"], .fs-theme .fs-compat-menu .current-menu-item > a { color: #fff; }
.fs-theme .fs-compat-menu .elementor-nav-menu a { color: var(--fs-navy); }
.fs-theme .fs-compat-hotspot__list a { color: var(--fs-blue-dark); }
.fs-theme .fs-compat-menu .current-menu-item > a { color: #fff; }
.fs-theme .fs-social a { color: inherit; }

/* The WP Call Button plugin's floating circle duplicates the Call bar on phones: hide it where the bar shows. */
@media (max-width: 860px) { .fs-theme .wp-call-button { display: none !important; } }

/* ---------- Dad's own Call / Text / Quote pills (CTA HTML widget, .cta-btn) ----------
   Their CSS asks for white on blue, blue on light blue and white on dark grey, but Elementor's site link
   colour (.elementor-kit-N a) outranks it, so on live today the labels show in the link colour. This restores
   the colours his CSS asks for; nothing in the page changes. */
.fs-theme .cta-btn.call-btn, .fs-theme .cta-btn.call-btn:hover,
.fs-theme .cta-btn.quote-btn, .fs-theme .cta-btn.quote-btn:hover { color: #fff; }
.fs-theme .cta-btn.text-btn, .fs-theme .cta-btn.text-btn:hover { color: #1d4ed8; }
/* Links inside the dark warranty box on /customer-info/ */
.fs-theme .elementor-element-41b8d306 a, .fs-theme .elementor-element-c1c18a8 a { color: #93c5fd; }

/* ---------- Text widgets: justified text and list spacing (styling only) ----------
   Headings inside justified text are never stretched; on phones justified text reads left-aligned
   (narrow lines leave big gaps); lists get normal space before the next paragraph (0 px today). */
.fs-theme .fs-justified :is(h1, h2, h3, h4, h5, h6) { text-align: start; }
@media (max-width: 767px) {
  .fs-theme .fs-justified, .fs-theme .fs-justified :is(p, li, div, span) { text-align: start !important; }
}
.fs-theme .elementor-widget-text-editor :is(ul, ol) { margin-bottom: 1em; }
.fs-theme .elementor-widget-text-editor :is(ul, ol):last-child { margin-bottom: 0; }

/* ---------- Readability in page bodies (1.0.3; the classes come from inc/readability.php) ----------
   Dad's text widgets were pasted from ChatGPT with quote blocks (indented 40 px), empty paragraphs
   and fixed 15-16 px font sizes, and a few sections put white text or blue links on gray. These rules
   only change how that content looks; the words, headings and links are unchanged. */

/* Room under the header for a page's first section when it has none. */
.fs-theme .fs-first-section { padding-top: 36px !important; }
/* A white-to-black fade behind white text shows its dark color. */
.fs-theme .fs-bg-solid { background-image: none !important; background-color: var(--fs-bg-solid, #000) !important; }

/* Pasted quote blocks read as normal paragraphs, lined up with their headings. */
.fs-theme .elementor-widget-text-editor blockquote { margin: 0 0 1em; padding: 0; border: 0; background: none; font-style: normal; quotes: none; }
.fs-theme .elementor-widget-text-editor blockquote:last-child { margin-bottom: 0; }
.fs-theme .elementor-widget-text-editor blockquote::before, .fs-theme .elementor-widget-text-editor blockquote::after { content: none; }
/* One text size and line spacing per text block: pasted 12-16 px spans follow the block's size. */
.fs-theme .elementor-widget-text-editor :is(p, li, blockquote) { line-height: 1.6; }
.fs-theme .elementor-widget-text-editor span:is([style*="font-size: 15px"], [style*="font-size:15px"], [style*="font-size: 16px"], [style*="font-size:16px"], [style*="font-size: 12px"], [style*="font-size:12px"], [style*="font-size: 1rem"], [style*="font-size:1rem"]) { font-size: inherit !important; }
/* A heading and the text next to it that had no space between them. */
.fs-theme .fs-gap-after-heading { margin-top: 12px; }
.fs-theme .fs-gap-before-heading { margin-top: 28px; }
/* A list that ends one text block gets space before the next text block too. */
.fs-theme .elementor-widget-text-editor:has(> :is(ul, ol):last-child, > .elementor-widget-container > :is(ul, ol):last-child) + .elementor-widget-text-editor { margin-top: .9em; }

/* Text and headings that would be hard to read on their background get a readable color. */
.fs-theme .fs-text-light, .fs-theme .fs-text-light :is(p, li, span, strong, em, b, blockquote, div) { color: #f1f5f9 !important; }
.fs-theme .elementor-widget-heading.fs-text-light .elementor-heading-title,
.fs-theme .elementor-widget-heading.fs-text-light .elementor-heading-title a { color: #7dd3fc !important; }
.fs-theme .fs-text-dark, .fs-theme .fs-text-dark :is(p, li, span, strong, em, b, blockquote, div) { color: #1f2937 !important; }
.fs-theme .elementor-widget-heading.fs-text-dark .elementor-heading-title,
.fs-theme .elementor-widget-heading.fs-text-dark .elementor-heading-title a { color: #0b2545 !important; }

/* Links in sentences are underlined so they look like links; on dark backgrounds they are light blue. */
.fs-theme .elementor-widget-text-editor :is(p, li, td, dd, blockquote, span) a:not(.cta-btn):not(.elementor-button) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.fs-theme .fs-on-dark.elementor-widget-text-editor a:not(.cta-btn):not(.elementor-button) { color: #93c5fd !important; }
.fs-theme .fs-on-dark.elementor-widget-text-editor a:not(.cta-btn):not(.elementor-button):hover,
.fs-theme .fs-on-dark.elementor-widget-text-editor a:not(.cta-btn):not(.elementor-button):focus-visible { color: #fff !important; }

@media (max-width: 767px) {
  .fs-theme .fs-first-section { padding-top: 24px !important; }
  .fs-theme .elementor-widget-text-editor :is(ul, ol) { padding-left: 1.3em; }
  .fs-theme .elementor-widget-text-editor [style*="justify"] { text-align: start !important; }
}

/* ---------- Footer on phones ---------- */
@media (max-width: 860px) {
  .fs-footer__grid { gap: 36px; padding-top: 44px; padding-bottom: 32px; }
  .fs-footer__bottom { justify-content: flex-start; }
}

@media (max-width: 380px) {
  .fs-bar { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .fs-bar .fs-btn { font-size: 14px; }
  .fs-bar .fs-btn svg { display: none; }
}
/* The smallest phones (320–360 px): logo, number and menu button fit on one row without sideways scrolling. */
@media (max-width: 360px) {
  .fs-header__row.fs-wrap { padding-left: 12px; padding-right: 12px; gap: 6px; }
  .fs-logo img { height: 38px; max-width: 110px; }
  .fs-header__actions { gap: 6px; }
  .fs-header__phone { font-size: 14px; }
  .fs-menu-toggle { min-width: 44px; min-height: 44px; }
}
/* Dad's Call / Text pills (his Additional CSS) have a 160 px minimum width; on 320–360 px phones two of them
   plus the gap don't fit, so there they may shrink a little. */
@media (max-width: 360px) {
  .fs-theme .cta-wrap .cta-btn { min-width: 0; padding-left: 16px; padding-right: 16px; }
}

/* ---------- Dark header with Dad's original logo (1.0.7, Dad's request) ----------
   "I like to get dark header on top with the original logo." Black like his live site; the logo is his original
   (made for dark backgrounds). The phone menu panel stays white with dark text, the style he likes. On phones the
   header holds just the logo and the menu button: Call / Text / Quote are in the bottom bar ("mobile only exclude"). */
.fs-theme .fs-topbar { background: #000; color: #cfe3ff; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.fs-theme .fs-topbar a { color: #fff; }
.fs-theme .fs-header { background: #000; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.fs-theme .fs-header .fs-header__trust { color: #cbd5e1; }
.fs-theme .fs-header .fs-header__trust strong { color: #fff; }
.fs-theme .fs-header .fs-header__phone { color: #fff; }
.fs-theme .fs-header .fs-header__phone small { color: #9fb3c8; }
.fs-theme .fs-header .fs-btn--quote { border-color: rgba(255, 255, 255, .55); }
@media (min-width: 861px) {
  .fs-theme .fs-nav { background: #000; border-top: 1px solid rgba(255, 255, 255, .14); }
  .fs-theme .fs-nav > .fs-wrap > ul > li > a { color: #fff; }
  .fs-theme .fs-nav > .fs-wrap > ul > li > a:hover,
  .fs-theme .fs-nav > .fs-wrap > ul > li.current-menu-item > a,
  .fs-theme .fs-nav > .fs-wrap > ul > li:focus-within > a { color: #93c5fd; }
}
@media (max-width: 860px) {
  .fs-theme .fs-header .fs-header__phone { display: none; }
  .fs-logo img { height: 60px; max-width: 210px; }
  .fs-menu-toggle { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
  .fs-menu-toggle:hover, .fs-menu-toggle:focus, .fs-menu-toggle[aria-expanded="true"] { background: #2563eb; border-color: #2563eb; color: #fff; }
}
@media (max-width: 360px) {
  .fs-logo img { height: 52px; max-width: 180px; }
}
/* Form dropdowns stay readable on any background, even before (or without) WPForms' dropdown script: the plain
   field was see-through with dark text, which showed dark on dark on Dad's phone ("Select A Service"). */
.fs-theme .wpforms-container select, .fs-theme .wpforms-container .choices__inner { background-color: #fff; color: #1f2937; }

/* ---------- 1.0.13: fixes from the launch-night QA sweep (iPhone WebKit/Simulator + phone/desktop review) ---------- */
/* Links in body text on a light background: the kit's pale blue (#5eb8e5) was 2.2:1 on white. */
.fs-theme .fs-on-light.elementor-widget-text-editor :is(p, li, td, dd, blockquote, span) a:not(.cta-btn):not(.elementor-button) { color: #1d4ed8 !important; }
.fs-theme .fs-on-light.elementor-widget-text-editor :is(p, li, td, dd, blockquote, span) a:not(.cta-btn):not(.elementor-button):hover { color: #1e3a8a !important; }
/* Icon-box / image-box titles the readability layer found too pale (or too dark) for their background. */
.fs-theme :is(.elementor-widget-icon-box, .elementor-widget-image-box).fs-text-dark :is(.elementor-icon-box-title, .elementor-image-box-title),
.fs-theme :is(.elementor-widget-icon-box, .elementor-widget-image-box).fs-text-dark :is(.elementor-icon-box-title, .elementor-image-box-title) a { color: #0b2545 !important; }
.fs-theme :is(.elementor-widget-icon-box, .elementor-widget-image-box).fs-text-light :is(.elementor-icon-box-title, .elementor-image-box-title),
.fs-theme :is(.elementor-widget-icon-box, .elementor-widget-image-box).fs-text-light :is(.elementor-icon-box-title, .elementor-image-box-title) a { color: #7dd3fc !important; }
/* Footer BBB seal: its "Rating: A+" text is dark blue, unreadable on the navy footer; give the seal a white card. */
.fs-footer__badges img { background: #fff; border-radius: 8px; padding: 6px 8px; }
/* Menu button: blue only while the menu is open (it stayed blue after closing because of :focus). */
.fs-theme .fs-menu-toggle:focus:not(:focus-visible):not([aria-expanded="true"]) { background: transparent; border-color: rgba(255, 255, 255, .4); color: #fff; }
/* Quote pop-up: the header with the close button stays put and only the form scrolls. */
.fs-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.fs-dialog__head { flex: none; }
.fs-dialog__body { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; }
@media (max-width: 860px) {
  /* reCAPTCHA's fixed badge stuck out above the Call/Text/Quote bar: lift it above the bar. */
  .grecaptcha-badge { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
  body.fs-field-focus .grecaptcha-badge { bottom: 14px !important; }
}
@media (max-width: 600px) {
  /* Photos and logos floated beside text squeezed the text into a 1-3 word column (about 30 pages):
     on phones they sit on their own line, centred, at their own size or the screen width. */
  .fs-theme .fs-main :is(.alignleft, .alignright, [style*="float: left"], [style*="float:left"], [style*="float: right"], [style*="float:right"]) {
    float: none !important; display: block; margin: 0 auto 16px !important; max-width: 100% !important; height: auto;
  }
  .fs-theme .fs-main :is(.alignleft, .alignright) img { margin: 0 auto; }
  .fs-theme .fs-main .wp-caption:is(.alignleft, .alignright) { width: auto !important; }
}