/*
Theme Name: Spraggins Auto
Theme URI: https://www.spragginsautorepairtx.com
Author: Wingerd Media
Description: Standalone theme for spragginsautorepairtx.com, built from the
approved Claude Design build. Page bodies are generated from spraggins-website/
in the WingerdAgents repo - do not hand-edit content in wp-admin, it will be
overwritten by the next deploy.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
*/

/* Base reset, carried over from the design export verbatim. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Lato, Helvetica, Arial, sans-serif;
  background: #FFFFFF;
  color: #111112;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
a { color: #D82E4B; text-decoration: none; }
a:hover { color: #111112; }
::selection { background: #D82E4B; color: #FFFFFF; }
input:focus, textarea:focus, select:focus { outline: 2px solid #D82E4B; outline-offset: -2px; }

/* The accent is a CSS variable because the design drives every red from it. */
:root { --acc: #D82E4B; }

/* Layout shell. The design's own sections carry their spacing. */
.spr-shell { min-height: 100vh; display: flex; flex-direction: column; background: #FFFFFF; }
.spr-main { flex: 1; }

/* Skip link - the export had no keyboard bypass for its sticky nav. */
.spr-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: #000002; color: #FFFFFF; padding: 14px 22px;
  font-family: 'Azeret Mono', monospace; font-size: 12px; letter-spacing: 0.1em;
}
.spr-skip:focus { left: 0; color: #FFFFFF; }

/* Amenity icon animations. */
@keyframes steamA { 0% { opacity: 0; transform: translateY(2px) scaleX(1); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-5px) scaleX(1.15); } }
@keyframes steamB { 0% { opacity: 0; transform: translateY(3px) scaleX(0.9); } 45% { opacity: 0.85; } 100% { opacity: 0; transform: translateY(-3.5px) scaleX(1.05); } }
@keyframes steamC { 0% { opacity: 0; transform: translateY(1.5px) scaleX(1.1); } 38% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px) scaleX(0.95); } }
@keyframes wifiPulse { 0%, 70%, 100% { opacity: 0.25; } 25% { opacity: 1; } }
@keyframes carRoll { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
@keyframes keySwing { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) {
  .amen svg *, .amen svg { animation: none !important; }
  * { scroll-behavior: auto !important; }
}

/* Navigation. */
.navtoggle { display: none; }
@media (max-width: 900px) {
  .navdesk { display: none !important; }
  .navtoggle { display: flex !important; }
}
@media (max-width: 560px) { .logoimg { height: 42px !important; } }

/* The mobile drawer was React state in the export; it is now CSS + a class. */
#spr-mobile-nav[data-open="false"] { display: none; }
#spr-mobile-nav[data-open="true"] { display: block; }
@media (min-width: 901px) { #spr-mobile-nav { display: none !important; } }

/* Mark the current page in the nav. */
[aria-current="page"] { color: var(--acc) !important; }

/* Booking modal, driven by the theme JS rather than React state. */
#spr-booking[hidden] { display: none !important; }
#spr-booking {
  position: fixed; inset: 0; z-index: 120; background: rgba(0, 0, 2, 0.82);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}

/* Focus visibility. The design relied on hover alone, which leaves keyboard
   users with no indication of where they are. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--acc);
  outline-offset: 2px;
}

/* Nothing on the page should force a horizontal scrollbar. */
img, svg, video, iframe { max-width: 100%; }

/* Home hero loop video. Decorative only, so anyone who has asked for less
   motion gets the still poster frame instead. */
@media (prefers-reduced-motion: reduce) {
  .spr-hero-video { display: none !important; }
}

/* Page transitions were tried here and removed on 2026-09-02: the cross-fade
   read as a flash rather than as polish, and a plain instant navigation is
   steadier. Link prefetching stays on (see spr_speculation_rules in
   functions.php) - that only makes the next page load faster and animates
   nothing. */

/* ---------------------------------------------------------------------------
   Team bios (About page)

   Six full bios side by side dominated the page. Collapse each to three lines
   with a Read more, and only where the text actually overflows - a short bio
   gets no button.

   The clamp is applied by JS, not by default, so with JS off every bio simply
   shows in full. Hiding content by default and revealing it with script is the
   failure mode worth avoiding.
   ------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------
   Team grid (About page)

   Column count is pinned rather than left to auto-fill. auto-fill takes as
   many tracks as fit, which gave five on a wide screen and left the sixth
   person sitting alone on the next row.

   Four is deliberate: it splits six as 4+2 and seven as 4+3, and seven is the
   count this reaches when Samuel is added. Seven is prime, so 4+3 is the only
   two-row arrangement that leaves nobody on their own - three columns would
   put the seventh person alone again.
   ------------------------------------------------------------------------ */
@media (min-width: 1024px) {
  .spr-team { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (min-width: 620px) and (max-width: 1023px) {
  .spr-team { grid-template-columns: repeat(2, 1fr) !important; }
}
/* Two per row on phones, not one.
   A 4/5 portrait at full phone width is ~490px tall, so ten of them is roughly
   5,000px of photo to scroll past. Two columns quarters the image area and
   keeps the same grid-of-cards language as desktop.
   The card's type and padding have to come down with it: at ~177px wide, a
   23px name and 26px padding leave almost nothing for the text. */
@media (max-width: 619px) {
  .spr-team { grid-template-columns: repeat(2, 1fr) !important; }
  .spr-team > li { padding-bottom: 18px !important; }
  .spr-team > li > div:last-child { padding: 14px 13px 0 !important; }
  .spr-team > li h4 { font-size: 16.5px !important; line-height: 1.15 !important; }
  .spr-team > li p:not(.spr-bio) { font-size: 9.5px !important; letter-spacing: 0.1em !important; }
  .spr-team > li .spr-bio { font-size: 13px !important; line-height: 1.5 !important; }
  .spr-team .spr-bio-toggle { font-size: 9.5px !important; letter-spacing: 0.1em !important; }
}

/* Only the genuinely tiny screens fall back to one column. Checked at 360px
   (a very common Android width) and at 375px: two columns hold without any
   name overflowing or the page scrolling sideways, and one column there means
   400px-tall portraits again, which is the problem this is solving. */
@media (max-width: 329px) {
  .spr-team { grid-template-columns: 1fr !important; }
}

.spr-bio[data-clamp="on"] {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.spr-bio-toggle {
  margin-top: 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid #4A4A4A;
  padding: 2px 0;
  cursor: pointer;
  font-family: 'Azeret Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C6C6C6;
}
.spr-bio-toggle:hover,
.spr-bio-toggle:focus-visible {
  color: var(--acc);
  border-bottom-color: var(--acc);
}

/* ---------------------------------------------------------------------------
   Header logo

   The logo appears nowhere else on the site except the footer, so it carries
   the whole brand mark on every page. At 54px in a 76px bar it was cramped;
   the bar grows with it rather than the logo crowding the nav.
   ------------------------------------------------------------------------ */
@media (min-width: 901px) {
  .logoimg { height: 72px !important; }
  .spr-shell > header > div { min-height: 100px !important; }
}