/*
 * EKY New — Mobile Layer (v2.3.79)
 * Universal CSS layer. Loaded on every page via functions.php.
 *
 * =========================================================================
 * Architecture note (F9, recorded v2.3.78): desktop-first media queries
 * =========================================================================
 * Every media query in this file (and in per-template inline <style> blocks
 * throughout eky-new) uses `@media (max-width: 768px)` / `(max-width: 380px)`
 * — i.e. desktop-first: the base rules describe the desktop layout, and the
 * media queries override only for narrower viewports.
 *
 * This is deliberate and NOT a candidate for flipping to mobile-first:
 *
 *   1. The אתר-חדש static source that this theme reproduces was authored
 *      desktop-first. Every template's inline CSS mirrors that convention,
 *      so the mobile overrides in this file need to target the same
 *      breakpoints (768 / 380) at the same polarity to win on cascade.
 *      Flipping to (min-width: 769px) on one side would require flipping
 *      all ~30 per-template inline CSS blocks simultaneously — a
 *      cross-cutting rewrite with zero behavioural upside.
 *
 *   2. The mobile-menu overlay defaults to `display: none` at all widths
 *      (see rule below) and is switched on inside the `max-width: 768px`
 *      block. That's the safe default — unknown/desktop widths get the
 *      static layout, narrow viewports get the overlay. Inverting to
 *      mobile-first would mean the overlay renders by default and gets
 *      hidden at min-width: 769px, which briefly flashes the overlay on
 *      page load before matchMedia resolves on desktop browsers. The
 *      current polarity avoids that FOUC.
 *
 *   3. The WP admin-bar `body.admin-bar .main-header { top: 32px }` rule
 *      (see `(min-width: 769px)` block below) is the only min-width query
 *      in the file — it exists because the admin bar only ever shows on
 *      desktop viewports (WP itself hides it below 782px). Mixing polarities
 *      is fine here because that one block targets a desktop-only affordance.
 *
 * If we ever re-author the static source mobile-first, this whole file
 * (and the inline blocks) can be flipped in one pass. Until then, desktop-
 * first stays.
 * =========================================================================
 *
 * v2.3.79 (F29):
 *   - Landed fluid-type design tokens (--eky-fs-small/body/lead/h3/h2/h1/hero)
 *     as clamp()-based :root custom properties, plus matching opt-in utility
 *     classes (.eky-fluid-*). Infrastructure only — templates keep their
 *     current inline CSS; see the F29 comment block further down for the
 *     three-layer rationale.
 *
 * v2.3.78 (F9):
 *   - Added the architecture note above. No CSS changes.
 *
 * v2.3.77 (F10 / F11):
 *   - Removed dead .eky-mm-lang-icon rule (class no longer emitted by JS
 *     since v2.3.51 — text-only language toggle).
 *   - Version header realigned to theme version (was drifting at v2.3.55).
 *
 * v2.3.76 (F17):
 *   - Added universal .lang-btn min-width/min-height: 44px touch-target rule
 *     (WCAG 2.5.5). Applies at all widths; replaces would-be per-template
 *     edits across ~30 inline CSS blocks.
 *
 * v2.3.55:
 *   - Hide .nav-toggle (hamburger) by default at ALL widths. mobile-layer.js
 *     injects the button into every header unconditionally, and without a base
 *     display:none rule the browser's default (display:block for <button>)
 *     made a tiny ☰ leak onto desktop headers, pushing nav items aside. The
 *     @media (max-width: 768px) block below uses display:flex !important, so
 *     mobile still shows it correctly.
 *
 * v2.3.54:
 *   - Header floats on EVERY page at EVERY width. On desktop the per-template
 *     inline CSS already sets position:sticky, but if any page's containing
 *     block is broken by overflow:hidden we enforce it here too. On mobile we
 *     use position:fixed (from v2.3.52).
 *   - The `html, body { overflow-x: hidden }` guard is now mobile-only — on
 *     desktop it was breaking position:sticky on descendants in some browsers.
 */

/* v2.3.54 — enforce sticky header at desktop widths in case an individual
   template's inline CSS lost the rule. Mobile uses position:fixed (see
   @media block below), so this only applies on desktop. */
@media (min-width: 769px) {
  .main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }
  /* Account for the WP admin bar so sticky lands just below it, not under it. */
  body.admin-bar .main-header { top: 32px !important; }
}

/* Lock scroll when the mobile overlay is open. */
html.eky-mm-lock, html.eky-mm-lock body { overflow: hidden !important; }

/* === v2.3.53 critical fix: hide the mobile-menu overlay at ALL widths by
   default. Without this, on desktop the overlay renders as a static 340px
   block below the footer, producing a huge empty strip at the bottom of every
   page. No !important here — #eky-mobile-menu.open (specificity 110) still
   wins over this rule (specificity 100), so the open-state flex layout inside
   the @media block below activates normally on mobile. === */
#eky-mobile-menu { display: none; }

/* === v2.3.55 critical fix: hide the hamburger at ALL widths by default.
   mobile-layer.js injects .nav-toggle into every header unconditionally. Without
   this base rule, the browser's default <button> display:block made a tiny ☰
   leak onto desktop headers, pushing the nav items aside. No !important here —
   the @media (max-width: 768px) rule below uses display:flex !important and
   still wins on mobile. === */
.nav-toggle { display: none; }

/* === Avatar equalization — apply at ALL widths ===
   Partner (.team-avatar) and associate (.associate-avatar) avatars share the
   exact same geometry. The per-page inline CSS (home-page.php,
   page-personnel-archive.php, expertise templates) already sets them equal,
   but enforcing here guarantees it survives theme edits. */
.team-avatar,
.associate-avatar {
  aspect-ratio: 1 / 1 !important;
  box-sizing: border-box !important;
}
.team-avatar img,
.associate-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* === v2.3.76 (F17) — Touch-target sizing, WCAG 2.5.5 minimum 44×44.
   Applied at ALL widths so desktop top-bar .lang-btn (defined with
   padding:3px 12px + font-size:12px inline in ~30 templates) meets the
   target size without editing every template. The !important is needed
   because every occurrence lives in template-level inline CSS with
   equal or higher specificity after cascade. Visual change is minimal:
   the pill keeps its width, only the vertical hit-area expands. === */
.lang-btn {
  min-width: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.lang-btn:focus-visible {
  outline: 2px solid var(--teal, #2aa6a0) !important;
  outline-offset: 2px !important;
}

/* === v2.3.79 (F29) — Fluid-type design tokens (clamp-based).
 * -----------------------------------------------------------------------
 * The audit flagged that every typographic size in eky-new switches at
 * hard breakpoints (1024 / 768 / 480), causing text to "jump" at
 * intermediate viewport widths. Ideal fix would be to rewrite the ~30
 * per-template inline <style> blocks with clamp()-based sizing — too
 * invasive for a quick win.
 *
 * Instead, this block lands the infrastructure in three safe layers:
 *
 *   1. A set of :root custom properties (design tokens) exposing each
 *      common text scale as a clamp() that grows smoothly between a
 *      380px viewport (lower bound) and a 1440px viewport (upper bound).
 *      Any template that opts in — either now or later — can write
 *      `font-size: var(--eky-fs-h1)` and get fluid sizing for free.
 *
 *   2. Opt-in utility classes (.eky-fluid-*) that apply the tokens
 *      without needing the template to touch its inline CSS. A template
 *      can simply add `class="eky-fluid-h1"` alongside its existing
 *      <h1 class="hero-title"> and the fluid rule wins (higher
 *      specificity, no !important needed — see selector below).
 *
 *   3. Zero forced overrides on existing elements. Templates keep their
 *      current inline CSS intact; the fluid tokens activate only where
 *      opted in. This means F29 lands with no regression risk and gives
 *      future refactors (F1 CSS extraction) a ready-made token palette
 *      to consume when the inline blocks are eventually retired.
 *
 * Clamp values: each token uses `clamp(min, preferred-with-vw, max)`
 * where `min` and `max` bracket the size at 380px and 1440px viewports.
 * Values are derived from the desktop/mobile pairs the templates
 * actually use today, so a future `font-size: var(--eky-fs-h1)` lands
 * between the current 32px mobile and 48px desktop pair — no visual
 * jump at 768px.
 * === */
:root {
  --eky-fs-small: clamp(0.75rem,   0.69rem + 0.25vw, 0.875rem);   /* 12 → 14 */
  --eky-fs-body:  clamp(0.875rem,  0.80rem + 0.30vw, 1.0625rem);  /* 14 → 17 */
  --eky-fs-lead:  clamp(1rem,      0.88rem + 0.50vw, 1.25rem);    /* 16 → 20 */
  --eky-fs-h3:    clamp(1.125rem,  0.98rem + 0.60vw, 1.5rem);     /* 18 → 24 */
  --eky-fs-h2:    clamp(1.5rem,    1.20rem + 1.20vw, 2.25rem);    /* 24 → 36 */
  --eky-fs-h1:    clamp(2rem,      1.60rem + 1.60vw, 3rem);       /* 32 → 48 */
  --eky-fs-hero:  clamp(2.25rem,   1.50rem + 3.00vw, 4rem);       /* 36 → 64 */
  /* Companion line-heights: tighter on display text, looser on body. */
  --eky-lh-body: 1.6;
  --eky-lh-lead: 1.5;
  --eky-lh-head: 1.2;
  --eky-lh-hero: 1.1;
}

/* Opt-in utility classes. Templates keep their current markup and just
 * append one of these to flip the element to fluid sizing. Because every
 * typographic declaration in per-template inline CSS targets the element
 * by tag or class (e.g. `.hero-title { font-size: 48px }`), adding the
 * utility class produces a tie on specificity — and since mobile-layer.css
 * is the LAST stylesheet enqueued by functions.php, the utility rule wins
 * on cascade order without needing !important. */
.eky-fluid-small { font-size: var(--eky-fs-small); }
.eky-fluid-body  { font-size: var(--eky-fs-body);  line-height: var(--eky-lh-body); }
.eky-fluid-lead  { font-size: var(--eky-fs-lead);  line-height: var(--eky-lh-lead); }
.eky-fluid-h3    { font-size: var(--eky-fs-h3);    line-height: var(--eky-lh-head); }
.eky-fluid-h2    { font-size: var(--eky-fs-h2);    line-height: var(--eky-lh-head); }
.eky-fluid-h1    { font-size: var(--eky-fs-h1);    line-height: var(--eky-lh-head); }
.eky-fluid-hero  { font-size: var(--eky-fs-hero);  line-height: var(--eky-lh-hero); }
/* NOTE: intentionally NOT force-applying to any existing element. The
 * mobile-menu rules further down set px font-sizes inside `@media
 * (max-width: 768px)` with equal specificity, and that's fine — they
 * already live inside the narrow viewport range where jumps don't
 * happen. F29 lands as infrastructure here; the broader rollout (opting
 * each template in) can happen alongside F1 when inline CSS is extracted. */

@media (max-width: 768px) {
  /* Mobile-only horizontal overflow guard. Moved here from the universal
     layer because `html, body { overflow-x: hidden }` at desktop widths was
     breaking position:sticky on .main-header descendants in some browsers. */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* === #0: FLOATING HEADER BAR WITH HAMBURGER ON EVERY PAGE.
     Switched from sticky to fixed to dodge the overflow-x:hidden sticky-break
     bug. Hide the top-bar on mobile so the fixed header looks clean. === */
  .main-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }
  body {
    padding-top: 60px !important;
  }
  body.admin-bar {
    padding-top: 106px !important; /* 60 header + 46 WP admin bar */
  }
  /* Hide the top-bar (phone/email/socials/lang) on mobile — info still
     available in footer, and lang-switch is inside the hamburger. */
  .top-bar { display: none !important; }

  /* === #1: Hide desktop horizontal nav, show hamburger === */
  .main-nav { display: none !important; }
  .nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    color: var(--white, #fff);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--teal, #2aa6a0); outline-offset: 2px; }

  /* === #2: Tap-target sizing (v2.3.96: promoted to ≥44×44 everywhere
     to satisfy WCAG 2.5.5 AAA + Israeli a11y regulations 5773-2013).
     Previous rule used 40 / 36 for lang-switch and footer links,
     which passed AA (24px) but not AAA. Audit round-2 flagged 12
     elements below the 44px threshold. === */
  .lang-switch {
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
  }
  .social-links { gap: 16px !important; }
  .social-links a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px !important;
  }
  .site-footer a,
  footer a.he-content,
  footer a.en-content,
  footer a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* === #3: Unified mobile menu overlay (injected by JS) === */
  #eky-mobile-menu {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: var(--black, #0a0a0a);
    z-index: 9999;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 0 40px;
  }
  #eky-mobile-menu.open { display: flex; }

  /* --- Topbar (close button + firm wordmark) --- */
  #eky-mobile-menu .eky-mm-topbar {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 60px 14px 20px;
    background: var(--black, #0a0a0a);
    border-bottom: 1px solid rgba(255,255,255,0.1);
    min-height: 64px;
  }
  #eky-mobile-menu[dir="rtl"] .eky-mm-topbar {
    padding: 14px 20px 14px 60px;
  }
  #eky-mobile-menu__close {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #eky-mobile-menu .eky-mm-brand {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    flex: 1;
    text-align: center;
  }

  /* --- Main nav list --- */
  #eky-mobile-menu .eky-mm-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    flex: 1;
  }
  #eky-mobile-menu .eky-mm-item {
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  #eky-mobile-menu .eky-mm-row,
  #eky-mobile-menu .eky-mm-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    min-height: 52px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: inherit;
    cursor: pointer;
    font-family: inherit;
  }
  #eky-mobile-menu .eky-mm-row:hover,
  #eky-mobile-menu .eky-mm-link:hover,
  #eky-mobile-menu a:hover { color: var(--teal, #2aa6a0); }
  #eky-mobile-menu .eky-mm-label { flex: 1; }
  #eky-mobile-menu .eky-mm-chev {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 14px;
    opacity: 0.7;
    margin-inline-start: 10px;
  }
  #eky-mobile-menu .eky-mm-accordion.open .eky-mm-chev { transform: rotate(180deg); }

  /* --- Accordion submenu — rendered by mobile-layer.js renderSubmenu() when a
         nav section has .children (expertise + team top-level sections). --- */
  #eky-mobile-menu .eky-mm-sub {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(255,255,255,0.04);
  }
  #eky-mobile-menu .eky-mm-sub.open { display: block; }
  #eky-mobile-menu .eky-mm-sub li {
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  #eky-mobile-menu .eky-mm-sub li:last-child {
    border-bottom: none;
  }
  #eky-mobile-menu .eky-mm-sublink {
    display: flex;
    align-items: center;
    padding: 12px 36px;
    color: #e8e8e8;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    min-height: 44px;
  }
  #eky-mobile-menu .eky-mm-sublink--all {
    color: var(--teal, #2aa6a0);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    opacity: 0.95;
  }
  #eky-mobile-menu .eky-mm-heading {
    padding: 10px 36px 6px;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 4px;
  }

  /* --- Language toggle (at bottom of overlay) --- */
  #eky-mobile-menu .eky-mm-lang {
    padding: 20px 24px 8px;
    display: flex;
    justify-content: center;
  }
  #eky-mobile-menu .eky-mm-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    min-height: 48px;
    background: var(--teal, #2aa6a0);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.02em;
    font-family: inherit;
    transition: background-color 0.2s ease, transform 0.1s ease;
  }
  #eky-mobile-menu .eky-mm-lang-btn:hover { background: var(--teal-dark, #248a85); }
  #eky-mobile-menu .eky-mm-lang-btn:active { transform: scale(0.98); }
  /* v2.3.77 (F10) removed: .eky-mm-lang-icon — class is no longer rendered by
     mobile-layer.js since v2.3.51 (globe icon dropped, text-only label). */
  #eky-mobile-menu .eky-mm-lang-label { font-weight: 600; }

  /* Hide the original homepage mobile menu — our new overlay replaces it */
  body .mobile-menu { display: none !important; }

  /* === #4: Publication cards — compact on mobile === */
  .pub-card { padding: 14px !important; gap: 10px !important; }
  .pub-card img,
  .pub-card .pub-image,
  .pub-card [class*="image"] { max-height: 180px !important; object-fit: cover !important; }
  .pub-card h2,
  .pub-card h3,
  .pub-card .pub-title { font-size: 18px !important; line-height: 1.35 !important; }
  .pub-card .pub-excerpt,
  .pub-card p { font-size: 14px !important; line-height: 1.5 !important; }

  /* === #5: Team grid + avatar sizes equalized on mobile ===
     Both partner and associate avatars get the same max-width. The per-page
     CSS already says 100px on mobile — we enforce 120px max (roomier) via the
     universal rule below. */
  .team-grid, .team-associates { gap: 16px !important; }
  .team-card, .associate-card { min-width: 0 !important; }
  .team-avatar,
  .associate-avatar {
    width: 120px !important;
    height: 120px !important;
    max-width: 120px !important;
    margin: 0 auto 18px !important;
  }

  /* === #6: Display-name / long-text guard === */
  .display-name,
  #wp-admin-bar-my-account .display-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Very narrow phones — collapse team grid to 1 column, slightly larger
   avatars since there's more horizontal room per row. */
@media (max-width: 480px) {
  .team-grid, .team-associates { grid-template-columns: 1fr !important; }
  .team-avatar,
  .associate-avatar {
    width: 140px !important;
    height: 140px !important;
    max-width: 140px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
 * v2.3.99 (B2) — universal .sr-only visually-hidden utility.
 *
 * Previously defined inline in home-page.php only. Promoted to mobile-layer.css
 * (which loads on every public page via inc/enqueue.php) so any template can
 * use it. First callers beyond the home newsletter labels: the new
 * archive-expertise.php `<h2 class="sr-only">` heading, and the associates-
 * section hidden label in page-personnel-archive.php that close the
 * heading-hierarchy skip flagged by Round-3 audit.
 *
 * Recipe matches the WebAIM/Bootstrap/Tailwind convention:
 *   - position:absolute removes from normal flow
 *   - 1×1 px + overflow:hidden + clip:rect(0 0 0 0) = zero visible area
 *   - white-space:nowrap guards against the line-breaking cursor revealing it
 *   - margin:-1px + width:1px ensures screen readers reach it on keyboard focus
 * --------------------------------------------------------------------- */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * v2.3.99 (B3) — sticky mobile contact bar.
 *
 * Rendered by inc/mobile-cta.php on every public page via wp_footer.
 * Desktop hides it completely; the whole thing only appears under
 * the 768 px breakpoint that matches the rest of the mobile layer.
 *
 * Two buttons, split 50/50 across the viewport width:
 *   - .eky-mcta-call  → tel:+97237611611
 *   - .eky-mcta-email → mailto:office@ek-lawyers.com
 *
 * Accessibility + touch targets:
 *   - Whole bar has role="navigation" via the <nav> tag in the PHP,
 *     with aria-label "יצירת קשר" / "Contact".
 *   - Each anchor is min-height 56 px (more than the WCAG 2.5.5 target
 *     of 44 px) so the gloved-thumb-on-the-bus test passes comfortably.
 *   - Uses env(safe-area-inset-bottom) so on iPhone notched devices the
 *     bar clears the Home Indicator without the call button sitting
 *     under it.
 * --------------------------------------------------------------------- */
.eky-mcta-bar {
    display: none; /* desktop default: invisible. flipped to flex below. */
}

@media (max-width: 768px) {
    .eky-mcta-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9998; /* mobile-menu overlay sits at 9999; we deliberately
                          fall just below it so the overlay covers the bar
                          when the hamburger is open. */
        background: var(--white, #fff);
        border-top: 1px solid rgba(6, 30, 70, 0.08); /* hairline navy */
        box-shadow: 0 -4px 14px rgba(6, 30, 70, 0.08);
        padding-bottom: env(safe-area-inset-bottom, 0);
        /* Slight fade-in the first time the page loads so it doesn't pop
           into existence mid-scroll; the animation only runs once. */
        animation: ekyMctaFadeIn .35s ease-out both;
    }

    .eky-mcta-btn {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 56px; /* ≥ WCAG 2.5.5 (44×44) + generous buffer. */
        padding: 10px 12px;
        text-decoration: none;
        color: var(--navy, #061e46);
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: .01em;
        -webkit-tap-highlight-color: rgba(78, 173, 181, .18);
        /* Keep the two halves visually separated. Use a subtle divider
           instead of a hard line — easier on the eye on narrow screens. */
        border-inline-start: 1px solid rgba(6, 30, 70, 0.06);
    }
    .eky-mcta-btn:first-child { border-inline-start: none; }

    /* Call button — teal accent matches brand primary. */
    .eky-mcta-call { color: var(--teal-dark, #3d8f96); }
    .eky-mcta-call:active { background: rgba(78, 173, 181, .09); }

    /* Email button — navy accent keeps contrast against teal call button. */
    .eky-mcta-email { color: var(--navy, #061e46); }
    .eky-mcta-email:active { background: rgba(6, 30, 70, .06); }

    .eky-mcta-icon i {
        font-size: 18px;
        line-height: 1;
    }

    .eky-mcta-label {
        font-size: 15px;
    }

    /* Respect user preference for less motion — drop the fade entirely. */
    @media (prefers-reduced-motion: reduce) {
        .eky-mcta-bar { animation: none; }
    }

    /* Keep the main page content from being hidden underneath the
       fixed bar. 56 px button + bottom safe area inset + 1 px border.
       Templates that already ship their own bottom padding (newsletter
       modal, legal pages) still override this because they set
       padding-bottom on inner wrappers, not body. */
    body {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0));
    }
}

@keyframes ekyMctaFadeIn {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}