/* ============================================================================
   taste.css — site-wide interaction polish for Our Lessons Learned
   Linked AFTER each page's inline <style>, so equal-specificity, class-scoped
   rules refine the approved look without touching layout, color, or copy.
   Brand (warm purple) + fonts (Poppins/Inter/Fraunces) are LOCKED — untouched.
   All values are tokens from tokens.css. Motion = transform/opacity only.
   ========================================================================== */

/* ---- 1. Smooth transform transition on buttons -----------------------------
   Existing rules only animate `filter` on hover. We ADD a transform transition
   (layered, comma-joined with filter) so hover/press feel intentional. This
   sits at the same specificity but appends transition; the press state below
   relies on it. */
@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: filter var(--motion-duration-base) var(--motion-easing-standard),
                transform var(--motion-duration-fast) var(--motion-easing-emphasized);
  }
}

/* ---- 2. Tactile press (:active) — the main gap ------------------------------
   Buttons get a subtle physical "push". Clickable cards settle from their
   existing hover lift (translateY(-3px)) down to -1px, so a press reads as
   pushing the lifted card back toward the page. */
@media (prefers-reduced-motion: no-preference) {
  .btn:active {
    transform: translateY(1px) scale(0.985);
  }

  .person:active,
  .person-card:active,
  .next-card:active,
  .firm:active,
  .guide-card:active,
  .ev-card:active,
  .cat:active,
  .icard:active,
  .way-card:active {
    transform: translateY(-1px);
  }
}

/* ---- 3. Consistent keyboard focus ring (:focus-visible) --------------------
   One brand-colored ring for every interactive element. Not motion, so it is
   intentionally OUTSIDE the reduced-motion guard (focus must always show).
   `outline-offset` lifts the ring clear of the element; the paired box-shadow
   halo (token --interaction-focus-ring) keeps it legible on dark aubergine
   bands where a thin outline alone can wash out. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.person:focus-visible,
.person-card:focus-visible,
.next-card:focus-visible,
.firm:focus-visible,
.guide-card:focus-visible,
.ev-card:focus-visible,
.cat:focus-visible,
.icard:focus-visible,
.way-card:focus-visible {
  outline: 2px solid var(--colors-brand-primary-bright);
  outline-offset: 3px;
  box-shadow: var(--interaction-focus-ring);
}

/* Replace any non-visible default :focus outline ONLY where we provide a
   :focus-visible ring above — never kill focus globally. Mouse users keep a
   clean look; keyboard users still get the ring from the rule above. */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}

/* ---- 4. Reduced motion -----------------------------------------------------
   Disable :active/hover transforms for users who prefer reduced motion. Focus
   rings above are unaffected (they are not motion). */
@media (prefers-reduced-motion: reduce) {
  .btn:active,
  .person:active,
  .person-card:active,
  .next-card:active,
  .firm:active,
  .guide-card:active,
  .ev-card:active,
  .cat:active,
  .icard:active,
  .way-card:active {
    transform: none;
  }
}

/* ---- 5. Resources dropdown: bridge the trigger->menu gap -------------------
   The desktop hover menu sits 6px below its trigger (top: calc(100% + 6px)),
   and the menu is absolutely positioned outside the .dropdown box. Moving the
   cursor from "Resources" down to the items crosses that transparent gap, so
   .dropdown:hover goes false and the menu closes before you reach it. A
   transparent pseudo-element fills the gap (and renders only with the open
   menu) so the hover path stays continuous. Desktop hover menu only. */
@media (min-width: 1024px) {
  .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
  }
}

/* ---- 2. Call link: stack the phone number under the label on mobile --------
   The .call links lay out icon + label + <strong>phone</strong> as one inline
   flex row. When the label wraps on a narrow screen, the phone number (its own
   flex item) stays vertically centered and gets shoved to the far right edge,
   reading as detached. On mobile, give each part its own line: label first,
   number directly below. The em-dash separator (variant-A links only, wrapped
   in .call-label) is rendered via ::after so it can be dropped when stacked. */
.call[href^="tel:"] .call-label::after { content: " \2014"; }
@media (max-width: 767px) {
  .call[href^="tel:"] { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 10px; row-gap: 3px; }
  .call[href^="tel:"] .call-label::after { content: none; }
  .call[href^="tel:"] > strong { flex-basis: 100%; padding-left: 28px; }
  .cta-band .call[href^="tel:"] > strong { padding-left: 0; text-align: center; }
}