/* ==========================================================================
   TTM — Téllez Tires Mobile
   Mobile-first stylesheet. No frameworks, no external fonts/icons.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Custom properties
   -------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --color-yellow: #eee93e;
  --color-purple: #4a1d73;
  --color-text-dark: #272222;
  --color-bg-light: #f7e9c3;
  --color-white: #ffffff;

  /* Layout */
  --max-width: 75rem;

  /* Spacing scale */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Shape */
  --radius: 0.5rem;
  --shadow: 0 2px 6px rgba(0, 0, 0, 0.15);

  /* Header height reference, used for sticky offset at desktop widths */
  --header-height: 4.5rem;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   3. Base typography
   -------------------------------------------------------------------------- */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--color-text-dark);
  background-color: var(--color-white);
  line-height: 1.6;
  font-size: 1rem;
}

/* Purple page background, used on the Services and Our Work pages only.
   Headings and text inherit the white color automatically; .tire__label
   sets the same white explicitly (see section 9) since it needs to stay
   readable regardless of where it's nested. */
body.page--purple {
  background-color: var(--color-purple);
  color: var(--color-white);
}

h1,
h2 {
  line-height: 1.2;
  margin: 0 0 var(--space-4);
}

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 3rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.5rem, 3vw + 1rem, 2rem);
  font-weight: 700;
}

p {
  margin: 0 0 var(--space-4);
}

a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   4. Layout helpers
   -------------------------------------------------------------------------- */
section {
  padding: var(--space-7) var(--space-4);
}

section > * {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}

#hero p,
#contact p {
  max-width: 65ch;
}

/* --------------------------------------------------------------------------
   5. Skip link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--space-4);
  background-color: var(--color-text-dark);
  color: var(--color-white);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  z-index: 100;
  transition: top 0.15s ease-in-out;
}

.skip-link:focus {
  top: var(--space-4);
}

/* --------------------------------------------------------------------------
   6. Header & navigation
   -------------------------------------------------------------------------- */
header {
  background-color: var(--color-text-dark);
  color: var(--color-white);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.site-identity {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-white);
}

.site-identity__logo {
  height: 2.5rem;
  width: auto;
}

.site-identity__name {
  font-size: 2.5rem;
  font-weight: 700;
}

/* Hidden by default: without JavaScript this button has no behavior,
   so it must not appear. Stage 6 JavaScript will add ".js-enabled" to
   reveal it only where a collapsed-menu toggle is actually needed. */
#nav-toggle {
  display: none;
  background-color: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-yellow);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  font-size: 1rem;
  font-weight: 600;
  min-height: 44px;
  cursor: pointer;
}

#nav-toggle:hover {
  background-color: var(--color-yellow);
  color: var(--color-text-dark);
}

.js-enabled #nav-toggle {
  display: inline-flex;
}

/* Navigation is visible by default. No JavaScript exists yet to toggle it,
   so it must never be hidden here. Stage 6 JavaScript will collapse this
   menu on small screens only after ".js-enabled" is added to the page. */
#primary-navigation {
  flex-basis: 100%;
  order: 3;
}

#primary-navigation ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-3);
}

#primary-navigation a {
  color: var(--color-white);
  text-decoration: none;
  padding: var(--space-3);
  border-radius: var(--radius);
  min-height: 44px;
  display: flex;
  align-items: center;
}

#primary-navigation a:hover,
#primary-navigation a:focus-visible {
  text-decoration: underline;
  background-color: rgba(255, 255, 255, 0.08);
}

/* Call Now link inside navigation, styled as a distinct button */
#primary-navigation a[href^="tel:"] {
  background-color: var(--color-yellow);
  color: var(--color-text-dark);
  font-weight: 700;
  justify-content: center;
}

#primary-navigation a[href^="tel:"]:hover,
#primary-navigation a[href^="tel:"]:focus-visible {
  background-color: var(--color-white);
  text-decoration: none;
}

/* Breakpoint chosen where the full header (brand + four nav actions,
   including the "Call Now" button) has enough width to sit on one row
   without crowding: business identity (~15rem) + four nav items
   (~25rem including gaps) + header padding exceeds 48em, so the header
   would overflow or crowd at that width. 60em keeps it comfortable and
   also aligns with the services-grid four-column breakpoint below. */
@media (min-width: 60em) {
  header {
    flex-wrap: nowrap;
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: var(--header-height);
  }

  .js-enabled #nav-toggle {
    display: none;
  }

  #primary-navigation {
    flex-basis: auto;
    order: 0;
  }

  #primary-navigation ul {
    flex-direction: row;
    align-items: center;
    padding-top: 0;
  }

  #primary-navigation a {
    padding: var(--space-2) var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.button--primary {
  background-color: var(--color-purple);
  color: var(--color-white);
}

.button--primary:hover,
.button--primary:focus-visible {
  background-color: var(--color-text-dark);
}

.button--secondary {
  background-color: transparent;
  color: var(--color-text-dark);
  border-color: var(--color-text-dark);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  background-color: var(--color-text-dark);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
#hero {
  background-color: var(--color-yellow);
  color: var(--color-text-dark);
  text-align: center;
  padding-top: clamp(5rem, 2rem + 8vw, 8rem);
  padding-bottom: clamp(5rem, 2rem + 8vw, 8rem);
}

#hero p {
  margin-left: auto;
  margin-right: auto;
}

#hero p:not(.status-notice) {
  font-size: 1.25rem;
}

#hero h1 {
  margin-bottom: var(--space-6);
}

.status-notice {
  background-color: var(--color-white);
  border-left: 4px solid var(--color-purple);
  border-radius: var(--radius);
  padding: var(--space-4);
  font-weight: 600;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
  margin-top: var(--space-5);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-7);
}

@media (min-width: 30em) {
  .hero-actions {
    flex-direction: row;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   8b. Vehicle photo (Home only) — the full, unstretched, uncropped source
   photo as a real <img> rather than a CSS background. Purple fills the
   space beside the portrait-oriented photo at wide widths. The About TTM
   copy lives inside .vehicle-photo__frame, overlaid on the photo itself
   rather than as a separate section below it.
   -------------------------------------------------------------------------- */
.vehicle-photo {
  background-color: var(--color-purple);
  text-align: center;
}

/* Shrink-wraps to the <img>'s own rendered size (not the full section
   width), so .vehicle-photo__overlay's absolute positioning below is
   anchored to the photo's actual edges, not the purple space around it. */
.vehicle-photo__frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.vehicle-photo__img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Mobile-first: below 36em the overlay is a normal block stacked under
   the photo (not covering it) — two paragraphs of body copy would be too
   tall to overlay readably on a narrow portrait image at small sizes. */
/* No solid background here — readability over the photo comes from the
   text-shadow (always on) plus the soft gradient added below at 36em+,
   not a flat rectangle. */
.vehicle-photo__overlay {
  color: var(--color-white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.6);
  padding: var(--space-4) var(--space-5);
  text-align: center;
}

.vehicle-photo__overlay h2 {
  color: var(--color-yellow);
  font-size: clamp(1.375rem, 2.2vw + 1.1rem, 2rem);
  margin-bottom: var(--space-2);
}

.vehicle-photo__overlay p {
  font-size: 1.3rem;
  line-height: 1.65;
  margin-bottom: var(--space-2);
}

.vehicle-photo__overlay p:last-child {
  margin-bottom: 0;
}

/* Tablet and up: enough room for the overlay to sit on top of the lower
   portion of the photo instead of stacking below it. Width capped at
   47rem (up from 43rem) so it reads as a caption panel over the truck,
   not a full photo cover. The gradient fades to fully transparent by the
   top of the box — soft wash, not a hard-edged rectangle — and only
   covers the lower portion of the image, per spec. */
@media (min-width: 36em) {
  .vehicle-photo__overlay {
    position: absolute;
    left: 50%;
    bottom: var(--space-4);
    transform: translateX(-50%);
    width: min(94%, 47rem);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.68) 0%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0) 100%);
  }
}

/* --------------------------------------------------------------------------
   9. Services — tire-shaped elements
   -------------------------------------------------------------------------- */
#services {
  text-align: center;
}

/* Yellow rectangle behind the page heading — id-scoped to this page's
   own heading (same id on both en/es services.html), so this styling
   is shared automatically without touching either HTML file. Sharp
   corners deliberately (border-radius: 0), unlike the site's other
   rounded elements. */
#services-heading {
  display: inline-block;
  background-color: var(--color-yellow);
  color: var(--color-text-dark);
  border-radius: 0;
  padding: var(--space-3) var(--space-6);
}

/* Flexbox, not Grid: Grid's auto-placement can't center an incomplete
   last row (it would sit flush-left instead). This page currently has
   an even 8 tires (4 + 4), but Flexbox's justify-content keeps every
   wrapped row centered regardless — robust if a service is ever added
   or removed and the count becomes uneven again. This is a deliberate,
   page-specific divergence from the Grid pattern used for the Our Work
   gallery below. */
.tire-grid {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  max-width: 85rem;
  margin-left: auto;
  margin-right: auto;
}

/* Each grid item: a column pairing the tire circle with its label
   underneath. This element (not the circle itself) is the flex item, so
   the label's height never affects the circle's own sizing/aspect-ratio.
   Flex-basis is set per breakpoint below, capped by max-width so tires
   don't grow unbounded on very wide screens, and floored by min-width so
   they never shrink past legibility. Each breakpoint's flex-basis
   subtracts a full gap (not gap * (n-1)/n) — a deliberate safety margin
   so subpixel rounding or scrollbar width never pushes a row from 4 items
   down to 3. .tire-grid's own max-width (above) is set wider than the
   page's normal content width specifically so these tires have room to
   reach their full size on wide desktop screens instead of being capped
   early. */
.tire-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 100%;
  min-width: 9rem;
  max-width: 20rem;
}

/* Mobile: one column smallest, two once there's room. */
@media (min-width: 30em) {
  .tire-item {
    flex-basis: calc(50% - var(--space-6));
  }
}

/* Tablet: three columns. */
@media (min-width: 48em) {
  .tire-item {
    flex-basis: calc(33.333% - var(--space-6));
  }
}

/* Desktop: four columns — with 8 tires this gives an even 4 on row
   one and 4 on row two, per the flex-wrap centering above. */
@media (min-width: 60em) {
  .tire-item {
    flex-basis: calc(25% - var(--space-6));
  }
}

/* The tire circle itself: a tread pattern built from a conic gradient, so
   no images or brand-specific tread/logo artwork are needed. It fills the
   full width of its .tire-item, so its size always matches the flex-basis
   set above. Deliberately left visually simple for now — this is where a
   service photo or icon will go in a future step, replacing the plain
   yellow hub below. */
.tire {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    var(--color-text-dark) 0deg 8deg,
    #000 8deg 16deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}

/* Inner "hub": plain accent circle, sized as a share of .tire's own
   content box. Empty for now (no text or padding needed) — reserved as
   the future placement for a service photo or icon. This sizing only
   works because .tire carries no percentage-based padding of its own —
   percentage padding always resolves against the width of the
   *containing block* (.tire-grid), never the padded element's own
   diameter, which is what previously collapsed this content box to near
   zero on wide viewports. */
.tire__hub {
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background-color: var(--color-yellow);
  background-size: cover;
  background-position: center;
}

/* Service photos: one modifier class per tire, added directly in the
   markup on the .tire__hub span. border-radius above clips each photo
   to the circle automatically. All 8 tires now have a photo modifier. */
.tire__hub--new-used-tires {
  background-image: url("../assets/images/service-new-used-tires.jpg");
}
.tire__hub--flat-tire-repair {
  background-image: url("../assets/images/service-flat-tire-repair.jpg");
}
.tire__hub--tire-installation {
  background-image: url("../assets/images/service-tire-installation.jpg");
}
.tire__hub--brake-replacement {
  background-image: url("../assets/images/service-brake-replacement.jpg");
}
.tire__hub--shocks-struts {
  background-image: url("../assets/images/service-shocks-struts.jpg");
}
.tire__hub--suspension-service {
  background-image: url("../assets/images/service-suspension-service.jpg");
}
.tire__hub--wheel-balancing {
  background-image: url("../assets/images/service-wheel-balancing.jpg");
}
.tire__hub--tire-rotation {
  background-image: url("../assets/images/service-tire-rotation.jpg");
}

/* Label now sits below the tire circle, on the page's purple background
   directly, so it inherits the purple page's white text color rather
   than the dark color it needed when it lived inside the yellow hub.
   hyphens is intentionally NOT used here — dictionary-based mid-word
   hyphenation is what produced breaks like "instal-lation". All service
   names are multi-word phrases that wrap cleanly at spaces once tires
   are this large; overflow-wrap stays only as a safety net (it breaks
   without inserting a hyphen character, and only if truly unavoidable). */
.tire__label {
  margin-top: var(--space-4);
  font-size: clamp(1rem, 1.6vw + 0.6rem, 1.5rem);
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
  line-height: 1.2;
  overflow-wrap: break-word;
}

/* Mobile fallback: below this width the tread pattern reads as noise
   rather than detail, so it's dropped in favor of a flat ring. The
   circular "tire" identity and hub/label stay intact either way. */
@media (max-width: 24em) {
  .tire {
    background: var(--color-text-dark);
  }
}

/* 9b. Services call-to-action — a compact phone prompt below the tire
   grid, deliberately not the full Contact card (Contact has its own
   dedicated page). text-align:center handles the button (an inline-flex
   element); the two <p> elements are centered by the existing
   `section > *` margin-auto rule, same split used on #hero. */
.services-cta {
  text-align: center;
}

.services-cta__question {
  font-size: clamp(1.25rem, 2vw + 1rem, 1.75rem);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.services-cta__phone {
  margin-bottom: var(--space-5);
}

.services-cta__phone a {
  font-weight: 700;
  text-decoration: underline;
}

/* .button--primary is purple-on-white by default, which would nearly
   disappear against this page's purple background — inverted to
   white-on-purple here for contrast, hovering to the brand yellow. */
.services-cta .button--primary {
  background-color: var(--color-white);
  color: var(--color-purple);
}

.services-cta .button--primary:hover,
.services-cta .button--primary:focus-visible {
  background-color: var(--color-yellow);
  color: var(--color-text-dark);
}

/* --------------------------------------------------------------------------
   10. Our Work & Contact
   -------------------------------------------------------------------------- */
#our-work {
  text-align: center;
}

/* Exactly 12 photos divides evenly into every column count below, so
   (unlike the 7-tire Services layout) standard Grid auto-placement has
   no incomplete-row centering problem — no Flexbox trick needed here. */
.work-gallery {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 30em) {
  .work-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 50em) {
  .work-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 60em) {
  .work-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Square cards, as requested. object-fit: cover crops without
   stretching regardless of each source photo's original proportions. */
.work-gallery img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

#contact {
  text-align: center;
}

.contact-card {
  background-color: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius);
  padding: var(--space-6) var(--space-4);
  box-shadow: var(--shadow);
  max-width: 30rem;
  margin: 0 auto;
}

.contact-card p {
  font-size: 1.125rem;
}

.contact-card address {
  font-style: normal;
  font-size: 1.25rem;
  line-height: 1.5;
  margin-top: var(--space-3);
}

#contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-purple);
  color: var(--color-white);
  text-decoration: none;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1.375rem;
}

#contact a:hover,
#contact a:focus-visible {
  background-color: var(--color-text-dark);
}

/* Responsive map embed: aspect-ratio keeps the iframe scaling cleanly
   at every width without a fixed pixel height. */
.map-embed {
  width: 100%;
  max-width: 40rem;
  aspect-ratio: 4 / 3;
  margin: var(--space-6) auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.map-directions-link {
  margin-top: var(--space-4);
}

/* TikTok/Instagram: real links now that URLs are confirmed. Sized/styled
   as buttons via the existing #contact a rule above (44px min touch
   target, purple background), same as the phone/email/directions links —
   no separate button styling needed here, just layout. */
.social-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
footer {
  background-color: var(--color-text-dark);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-5) var(--space-4);
  font-size: 0.875rem;
}

footer p {
  margin: 0;
}

.footer-credit {
  margin-top: var(--space-2);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
}

.footer-credit a {
  color: inherit;
  text-decoration: none;
}

.footer-credit a:hover,
.footer-credit a:focus-visible {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   12. Focus states
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--color-purple);
  outline-offset: 2px;
}

header a:focus-visible,
header button:focus-visible {
  outline-color: var(--color-yellow);
}

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