/*
 * RideXpress -- Legacy/SEO template family: Design 2.0 visual-language bridge
 * Wave 41 Track C
 *
 * WHAT THIS FILE IS: a small, additive, restyle-only layer loaded by
 * templates/website/index.html (unconditionally -- see the comment at that
 * <link> tag) after style.css, reaching every page that extends index.html
 * either directly or via airportbase.html/outstationbase.html -- the
 * ~8,800+ SEO/city-pair/destination landing pages this program's prior
 * tracks (wave37-final-public-site-report.md, wave39-5-trackB-marketing-
 * assets-report.md) already established as the correct leverage point at
 * this scale.
 *
 * WHAT THIS FILE DELIBERATELY DOES NOT DO: change any color, spacing,
 * border-radius, or box-shadow VALUE that legacy already uses. A full read
 * of style.css's card/shadow/radius tokens (.booking-form, .theme-btn,
 * .tablink, .navbar) found they already numerically match what
 * static/design-system/tokens.css independently arrived at for Design 2.0
 * (--box-shadow / --rx-shadow-lg are the literal same value; tokens.css's
 * own comment confirms Design 2.0's palette is "a refined evolution" of
 * this exact legacy :root block, not a replacement) -- so there is no real
 * card-treatment gap to close here without inventing a change for its own
 * sake. What legacy genuinely lacked, verified by grep before writing a
 * single rule below: (1) a real display typeface actually being loaded --
 * style.css's --body-font/--heading-font named 'Abril Fatface', which no
 * @font-face or @import anywhere in this repo ever loaded, so it silently
 * fell back to the browser default; fixed in index.html + style.css's two
 * font tokens, not here; (2) named, asymmetric motion easing (every
 * legacy transition was a bare `.3s`/`.5s ease`/`all`, the exact anti-
 * pattern tokens.css's own Motion Language section documents fixing for
 * Design 2.0); (3) any :focus-visible state at all (zero matches
 * repo-wide) -- a real, pre-existing accessibility gap, not a Design 2.0
 * "nicety" grafted on for its own sake.
 *
 * Every selector below is an EXISTING class already used by header.html,
 * footer.html, airportbase.html, and outstationbase.html today. No markup
 * changed in any of those four files to support this -- confirmed by
 * diffing each template's rendered text content before/after (see the
 * wave41-trackC report). Nothing here can remove text, a link, or a
 * heading: every rule is display/motion/outline only.
 */

/* ---------- Motion: named, asymmetric easing instead of bare .3s/.5s ----------
   Values match tokens.css's own researched Motion Language scale
   (Material Design 3's published, user-tested durations/curves --
   docs/engineering/MOTION_LANGUAGE.md) so a visitor moving between a
   Design 2.0 page (e.g. the homepage) and a legacy SEO page doesn't feel
   two different products. Hardcoded here (not var(--rx-...)) because
   tokens.css is a Design-2.0-only stylesheet, not loaded by index.html --
   duplicating the literal values is deliberate, not an oversight. */
.theme-btn,
.theme-btn2 {
  transition: background-color 250ms cubic-bezier(0.2, 0, 0, 1),
              color 250ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 250ms cubic-bezier(0.2, 0, 0, 1),
              transform 150ms cubic-bezier(0.2, 0, 0, 1);
}

.tablink {
  transition: background-color 250ms cubic-bezier(0.2, 0, 0, 1),
              color 250ms cubic-bezier(0.2, 0, 0, 1),
              box-shadow 150ms cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- Subtle, additive hover lift on primary CTAs ----------
   translateY + a slightly deeper shadow on hover only (no layout shift --
   transform doesn't reflow, and the resting box-shadow is untouched, only
   overridden on :hover). Matches the "card hover/lift" micro-interaction
   the homepage's Design 2.0 pass already verified working
   (wave37-track-a2-report.md S4). Guarded with prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .theme-btn:hover,
  .theme-btn2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
}

/* ---------- Wave 41 Track E: press/active feedback on the same CTAs ----------
   .theme-btn is the real submit button on the booking widget shared by
   every one of the ~8,800+ pages in this family (.booking-form .theme-btn
   in style.css) plus the header/footer/blog-card CTAs -- :hover above
   gives desktop pointer users feedback, but most of this site's traffic
   is mobile, where :hover barely fires. :active covers the tap itself: a
   small "press down" (undo the hover lift, compress slightly) confirms
   the tap registered before the page navigates. transform-only, guarded
   the same way as the hover lift just above -- no new selector added
   outside what already has motion defined here. */
@media (prefers-reduced-motion: no-preference) {
  .theme-btn:active,
  .theme-btn2:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }
}

/* ---------- Focus-visible: a real, previously-nonexistent gap ----------
   Zero `:focus-visible` rules existed anywhere in style.css (confirmed by
   grep before writing this) -- but style.css DOES carry a blanket
   `a,a:active,a:focus,a:hover{outline:0;...}` reset (a legacy relic of the
   old "focus rings are ugly" school of thought). That reset and this rule
   are equal specificity (0,1,1); which one wins the cascade for a given
   <a> then depends on stylesheet activation order, which style.css's own
   preload-then-swap loading trick (`rel=preload ... onload="this.rel=
   'stylesheet'"`, a few lines up in index.html) makes non-deterministic
   rather than simply "whoever's <link> is later in the HTML". Rather than
   depend on winning a timing race for an accessibility-critical ring,
   !important is used on exactly the 3 outline properties below -- keeping
   the override narrow (only outline/offset/radius, nothing else) and
   confined to the one real gap (no rule anywhere else in this file uses
   !important). Scoped to the interactive elements these shared templates
   actually render: nav links, the booking-widget tabs/buttons/inputs,
   footer links and the subscribe form, the WhatsApp/call/enquiry floating
   buttons. Gold ring verified (Chrome, real Tab-key navigation, checked
   via :focus-visible match + computed style, not just a screenshot)
   against both the light booking-form card and the dark hero/footer
   backgrounds. */
a:focus-visible,
button:focus-visible,
.theme-btn:focus-visible,
.theme-btn2:focus-visible,
.tablink:focus-visible,
.navbar-toggler:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #7A5F09 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* Buttons already carry a large border-radius (50px, pill-shaped) --
   match the focus ring's corner so it doesn't look like a square patch
   dropped onto a round control. */
.theme-btn:focus-visible,
.theme-btn2:focus-visible {
  outline-offset: 3px !important;
  border-radius: 50px;
}

/* ---------- Typography rhythm ----------
   Space Grotesk (now the real --heading-font, see index.html/style.css)
   has wider letter apertures than the sans-serif fallback headings were
   silently rendering in before this pass -- a small negative tracking on
   the largest hero headline keeps "WELCOME TO RIDEXPRESS!" (#rideheader,
   the single largest heading on all ~8,800 pages via airportbase.html/
   outstationbase.html) from feeling loose at its existing font-size.
   Nothing else about #rideheader (color, margin, text content) changes. */
#rideheader {
  letter-spacing: -0.01em;
}

/* ---------- Wave 41 Track E: social-icon hover, a real pre-existing gap ----------
   style.css defines `.widget .social-share-link a` (border + brand-color
   ring, used for the "Follow Us" icons on every one of the ~1,090+
   individually-templated blog article pages plus the CMS-backed
   blog_detail.html article -- both extend index.html, which loads this
   file unconditionally) but never gave it a :hover state or a transition
   at all (confirmed by grep against style.css before writing this --
   the sibling `.widget .tag-list a:hover` pattern this mirrors DOES have
   one). Same fill-on-hover treatment as that sibling rule, for
   consistency, not a new visual language. */
.widget .social-share-link a {
  transition: background-color 200ms cubic-bezier(0.2, 0, 0, 1),
              color 200ms cubic-bezier(0.2, 0, 0, 1);
}
.widget .social-share-link a:hover {
  background: var(--theme-color);
  color: var(--color-white);
}