/* =============================================================
   Garage des Alliés — styles.css
   Design system: ui-ux-pro-max / Trust & Authority / Flat Design
   Palette:  navy #1E3A8A  |  blue #1E40AF  |  orange #EA580C
             background #EFF6FF  |  card #FFFFFF  |  muted #475569
   Typography: Georgia (headings, no CDN) + system-ui (body)
   Contrast verified: all text ≥ 4.5:1 against background
   ============================================================= */

/* ─── DESIGN TOKENS ──────────────────────────────────────── */
:root {
  /* Colours */
  --c-navy:       #1E3A8A;  /* primary dark — hero bg, headings  */
  --c-blue:       #1E40AF;  /* primary mid  — links hover        */
  --c-orange:     #EA580C;  /* accent / CTA — contrast 5.88:1 on #000 */
  --c-orange-dk:  #C2410C;  /* darker orange for hover states    */
  --c-bg:         #EFF6FF;  /* page background                   */
  --c-card:       #FFFFFF;  /* card/section background           */
  --c-text:       #1E3A8A;  /* body text on light bg  9.5:1      */
  --c-muted:      #475569;  /* secondary text         7.5:1 on #fff */
  --c-border:     #BFDBFE;  /* borders and dividers              */

  /* Typography */
  --f-head: Georgia, 'Times New Roman', serif;
  --f-body: system-ui, -apple-system, BlinkMacSystemFont,
            'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Spacing / shape */
  --r:    8px;       /* border-radius */
  --gutter: 1.25rem; /* page edge padding */
  --max-w: 680px;    /* content column width */
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul  { list-style: none; }
img { display: block; max-width: 100%; }

/* ─── BASE ───────────────────────────────────────────────── */
html {
  font-size:          16px;
  scroll-behavior:    smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  background:  var(--c-bg);
  color:       var(--c-text);
  line-height: 1.6;
  min-height:  100dvh;
}

/* ─── ACCESSIBILITY ──────────────────────────────────────── */

/* Visible focus ring for keyboard navigation — never hide it */
:focus-visible {
  outline:        3px solid var(--c-orange);
  outline-offset: 3px;
  border-radius:  3px;
}

/* Screen-reader-only utility */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

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

/* ─── LAYOUT ─────────────────────────────────────────────── */
.container {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 var(--gutter);
}

/* ─── SECTION CHROME ─────────────────────────────────────── */
.section-heading {
  font-family: var(--f-head);
  font-size:   1.625rem;
  font-weight: bold;
  color:       var(--c-navy);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

/* Orange underline accent — decorative, aria-hidden in HTML */
.section-divider {
  width:         3rem;
  height:        4px;
  background:    var(--c-orange);
  border-radius: 2px;
  margin-bottom: 2rem;
}

/* ─── HEADER ─────────────────────────────────────────────── */
.site-header {
  position:    sticky;
  top:         0;
  z-index:     100;
  background:  var(--c-navy);
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         0.75rem;
  padding:     0.75rem var(--gutter);
}

.header-name {
  color:       #fff;
  font-family: var(--f-head);
  font-size:   1rem;
  font-weight: bold;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

/* Tap target: min 44px height, min 8px gap from neighbouring target */
.header-phone {
  display:     inline-flex;
  align-items: center;
  gap:         0.375rem;
  background:  var(--c-orange);
  color:       #000;             /* black on orange = 5.88:1 ✓ */
  font-weight: 700;
  font-size:   0.875rem;
  padding:     0.625rem 0.875rem;
  border-radius: var(--r);
  text-decoration: none;
  min-height:  44px;
  white-space: nowrap;
  cursor:      pointer;
  transition:  background 150ms ease;
}
.header-phone:hover  { background: var(--c-orange-dk); }
.header-phone:active { transform: scale(0.97); }

/* ─── HERO ───────────────────────────────────────────────── */
.hero {
  background-color: var(--c-navy);
  position:   relative;
  overflow:   hidden;
  padding:    4rem var(--gutter) 5rem;
  text-align: center;
}

/*
  CSS-only geometric decoration — suggests gears / mechanical
  without any image files. Two concentric rings using borders.
*/
.hero::before {
  content:       '';
  position:      absolute;
  right:         -6rem;
  top:           50%;
  transform:     translateY(-50%);
  width:         22rem;
  height:        22rem;
  border-radius: 50%;
  border:        3.5rem solid rgba(234, 88, 12, 0.11);
  pointer-events: none;
}
.hero::after {
  content:       '';
  position:      absolute;
  left:          -5rem;
  bottom:        -5rem;
  width:         18rem;
  height:        18rem;
  border-radius: 50%;
  border:        2.5rem solid rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.hero-content {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             1rem;
}

/* Wrench SVG — orange glow without a drop-shadow image */
.hero-icon {
  color: var(--c-orange);
  filter: drop-shadow(0 0 18px rgba(234, 88, 12, 0.4));
}

.hero h1 {
  font-family:   var(--f-head);
  font-size:     2.25rem;
  font-weight:   bold;
  color:         #fff;           /* white on #1E3A8A = 10.3:1 ✓ */
  line-height:   1.1;
  letter-spacing: -0.02em;
}

.hero-tagline {
  font-size:      0.9375rem;
  color:          rgba(255, 255, 255, 0.72);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top:     -0.25rem;
}

/* Primary CTA — tap target 56px, orange + black text */
.hero-cta {
  display:     inline-flex;
  align-items: center;
  gap:         0.625rem;
  background:  var(--c-orange);
  color:       #000;
  font-family: var(--f-body);
  font-weight: 700;
  font-size:   1.125rem;
  padding:     1rem 2rem;
  border-radius: var(--r);
  text-decoration: none;
  min-height:  56px;
  margin-top:  0.5rem;
  cursor:      pointer;
  transition:  background 150ms ease, transform 150ms ease;
}
.hero-cta:hover  { background: var(--c-orange-dk); }
.hero-cta:active { transform: scale(0.97); }

/* ─── CONTACT ────────────────────────────────────────────── */
.contact {
  background: var(--c-card);
  padding:    3.5rem 0;
}

/* Card with orange left-border accent — the "authority" stripe */
.contact-card {
  background:    var(--c-bg);
  border:        1px solid var(--c-border);
  border-left:   4px solid var(--c-orange);
  border-radius: var(--r);
  padding:       1.75rem 1.5rem;
  display:       flex;
  flex-direction: column;
  gap:           1.25rem;
}

.contact-label {
  display:        block;
  font-size:      0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--c-muted);   /* 7.5:1 on #fff ✓ */
  margin-bottom:  0.2rem;
}

/* Large phone number — easy to read at a glance */
.contact-phone {
  display:     block;
  font-family: var(--f-head);
  font-size:   2rem;
  font-weight: bold;
  color:       var(--c-navy);
  text-decoration: none;
  line-height: 1.1;
}
.contact-phone:hover { color: var(--c-blue); text-decoration: underline; }

/* Secondary CTA — 48px tap target */
.btn-call {
  display:     inline-flex;
  align-items: center;
  gap:         0.5rem;
  background:  var(--c-orange);
  color:       #000;
  font-weight: 700;
  font-size:   1rem;
  padding:     0.875rem 1.5rem;
  border-radius: var(--r);
  text-decoration: none;
  min-height:  48px;
  align-self:  flex-start;
  cursor:      pointer;
  transition:  background 150ms ease;
}
.btn-call:hover  { background: var(--c-orange-dk); }
.btn-call:active { transform: scale(0.97); }

/* ─── HOURS ──────────────────────────────────────────────── */
.hours {
  background: var(--c-bg);
  padding:    3.5rem 0;
}

/* Full-width table — readable on 360px phones */
.hours-table {
  width:            100%;
  border-collapse:  separate;
  border-spacing:   0;
  font-size:        1rem;
  border:           1px solid var(--c-border);
  border-radius:    var(--r);
  overflow:         hidden; /* clips border-radius on cells */
}

.hours-table th,
.hours-table td {
  padding:    0.9375rem 1.25rem;
  text-align: left;
  background: var(--c-card);
}

.hours-table tbody tr + tr th,
.hours-table tbody tr + tr td {
  border-top: 1px solid var(--c-border);
}

.hours-table th {
  color:       var(--c-navy);
  font-weight: 600;
  width:       55%;
}

/* Placeholder cells — clearly not real data */
.hours-tbd {
  color:      var(--c-muted);   /* 7.5:1 on white ✓ */
  font-style: italic;
}

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer {
  background: var(--c-navy);
  color:      rgba(255, 255, 255, 0.65);
  text-align: center;
  padding:    1.75rem var(--gutter);
  font-size:  0.875rem;
}

.footer-inner {
  display:     flex;
  align-items: center;
  justify-content: center;
  flex-wrap:   wrap;
  gap:         0.5rem;
}

.footer-name {
  color:       rgba(255, 255, 255, 0.92);
  font-family: var(--f-head);
}

.footer-sep {
  color: rgba(255, 255, 255, 0.3);
}

.footer-phone {
  color:           rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition:      color 150ms ease;
}
.footer-phone:hover { color: #fff; }

/* ─── RESPONSIVE — TABLET / DESKTOP ─────────────────────── */
@media (min-width: 600px) {
  .hero h1 {
    font-size: 3rem;
  }

  /* Contact card goes side-by-side */
  .contact-card {
    flex-direction:  row;
    align-items:     center;
    justify-content: space-between;
  }

  .btn-call {
    align-self:  auto;
    white-space: nowrap;
  }
}

@media (min-width: 900px) {
  .hero {
    padding: 6rem var(--gutter) 7rem;
  }

  .hero h1 {
    font-size: 3.5rem;
  }

  .hero-tagline {
    font-size: 1rem;
  }

  .section-heading {
    font-size: 1.875rem;
  }
}