/* =========================================================================
   UNIFIED ORANGE / PILL BUTTON HOVER
   Loaded on every front-end page so every block's orange-btn / pill-btn
   variant has the same hover behavior: faster transition, identical colors.
   ========================================================================= */

/* Base — fast transition on every orange/pill button across all blocks.
   Also force consistent font smoothing so white-on-orange text doesn't
   look subtly different when the button sits on a colored (e.g. purple)
   parent vs. a white parent — that variance comes from OS subpixel
   rendering kicking in differently per context. */
.as2-orange-btn,
.as3-orange-btn,
.as4-orange-btn,
.ps4-orange-btn,
.pt3-orange-btn,
.pn2-orange-btn,
.dc2-orange-btn,
.hs-orange-btn,
.ss-orange-btn,
.csl2-orange-btn,
.ads4-pill-btn,
.psd-orange-btn,
.th-pill-btn,
.gb-orange-btn,
.afz-orange-btn,
.guidelines-pill-btn,
.hero-pill-btn,
[class*="-orange-btn"],
[class*="-pill-btn"]:not(.afz-isi-link),
.dcalc-cta,
.dcalc-recalc-btn {
    transition: background-color 0.12s ease, color 0.12s ease !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
}

/* Hover state — solid colors snap fast: orange → darker orange, text → pure white.
   `opacity: 1` defeats per-block hover styles (e.g. guidelines-banner used to
   set opacity: 0.85 on hover, which made the white text sample as off-white
   because opacity multiplies into the rendered pixel color). */
.as2-orange-btn:hover,
.as2-card .as2-orange-btn:hover,
.as3-orange-btn:hover,
.as4-orange-btn:hover,
.ps4-orange-btn:hover,
.pt3-orange-btn:hover,
.pn2-orange-btn:hover,
.dc2-orange-btn:hover,
.hs-orange-btn:hover,
.ss-orange-btn:hover,
.csl2-orange-btn:hover,
.ads4-pill-btn:hover,
.psd-orange-btn:hover,
.th-pill-btn:hover,
.gb-orange-btn:hover,
.afz-orange-btn:hover,
.guidelines-pill-btn:hover,
.hero-pill-btn:hover,
[class*="-orange-btn"]:hover,
[class*="-pill-btn"]:hover:not(.afz-isi-link) {
    background-color: #E98300 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    text-decoration: none;
    filter: none !important;
}

/* SVG inside the button — flip fill and stroke to white to match */
.as2-orange-btn:hover svg path,
.as2-card .as2-orange-btn:hover svg path,
.as3-orange-btn:hover svg path,
.as4-orange-btn:hover svg path,
.ps4-orange-btn:hover svg path,
.pt3-orange-btn:hover svg path,
.pn2-orange-btn:hover svg path,
.dc2-orange-btn:hover svg path,
.hs-orange-btn:hover svg path,
.ss-orange-btn:hover svg path,
.csl2-orange-btn:hover svg path,
.ads4-pill-btn:hover svg path,
.psd-orange-btn:hover svg path,
.th-pill-btn:hover svg path,
.gb-orange-btn:hover svg path,
.afz-orange-btn:hover svg path,
[class*="-orange-btn"]:hover svg path,
[class*="-pill-btn"]:hover:not(.afz-isi-link) svg path {
    fill: #FFF !important;
    stroke: #FFF !important;
}

/* NOTE — global mobile size unification removed.
   The canonical mobile sizing now lives in EACH block's own style.css
   (inside its `@media (max-width: 1024px)`), modeled on .hero-pill-btn:
       font-family: 'HelveticaNeueLTPro', sans-serif;
       font-weight: 700;
       text-transform: uppercase;
       font-size: 12px;
       padding: 15px 25px;
       gap: 7px;
   Crucially, NO `height: Npx` is set — the height is determined by
   padding + content. Forcing a fixed height was clipping the line-box
   and pushing the SVG/text out of optical center on some browsers. */

/* =========================================================================
   OPTICAL-CENTER FIX — MAC DESKTOP ONLY (>1024px, .is-mac)
   macOS renders HelveticaNeue with the cap-height higher inside the
   line-box than Windows does, so on a Mac the SVG arrow visually sits
   below the caps text (same `align-items: center` produces a different
   visual result per OS). Windows looks fine without any adjustment.
   The `.is-mac` class is added at runtime by orange-buttons.js using
   platform + maxTouchPoints (so it never matches iOS / iPadOS).
   `.afz-btn-text` is the runtime-injected wrapper around the button's
   text node (also from orange-buttons.js).
   ========================================================================= */

    .is-mac .afz-btn-text {
        display: inline-block;
        transform: translateY(1.5px);
    }

/* Optical-center fix — MOBILE ONLY (≤1024px).
   On phones the SVG arrow looks a hair low next to caps button text;
   nudge it down a tiny bit. Desktop is left untouched. */
@media (max-width: 1024px) {
    .as2-orange-btn svg,
    .as3-orange-btn svg,
    .as4-orange-btn svg,
    .ps4-orange-btn svg,
    .pt3-orange-btn svg,
    .pn2-orange-btn svg,
    .dc2-orange-btn svg,
    .hs-orange-btn svg,
    .ss-orange-btn svg,
    .csl2-orange-btn svg,
    .ads4-pill-btn svg,
    .psd-orange-btn svg,
    .th-pill-btn svg,
    .gb-orange-btn svg,
    .afz-orange-btn svg,
    .guidelines-pill-btn svg,
    .hero-pill-btn svg,
    [class*="-orange-btn"] svg,
    [class*="-pill-btn"]:not(.afz-isi-link) svg,
    .dcalc-cta svg,
    .dcalc-recalc-btn svg {
        transform: translateY(-0.2px);
        width: 14px;
                height: 11px;
    }

    /* iOS Safari (real touch device) only: push the button's caps text
       down so it optically centers with the arrow.

       We chain THREE conditions because each one alone has false
       positives:
         - @supports (-webkit-touch-callout: none): matches iOS, BUT
           also matches Safari on macOS (same WebKit family). On its
           own this nudge would fire when a Mac user shrinks Safari
           below 1024px, misaligning the text on the desktop.
         - (hover: none) and (pointer: coarse): matches devices whose
           PRIMARY input is touch (phones/tablets). A Mac with a mouse
           keeps hover:hover and pointer:fine even after the window
           is resized to mobile width — so this filter cleanly
           excludes "Safari Mac shrunk to mobile".

       Combined, only real iOS/iPadOS Safari satisfies all three. The
       `.afz-btn-text` wrapper is injected at runtime by
       assets/orange-buttons.js. */
    @media (hover: none) and (pointer: coarse) {
        @supports (-webkit-touch-callout: none) {
            .afz-btn-text {
                display: inline-block;
                /* Was 3.9px when the mobile SVG had `translateY(0.6px)`.
                   The SVG mobile transform was later changed to
                   `translateY(-0.2px)` (a fix for Windows / Android
                   mobile rendering — SVG moved up 0.8px). To keep the
                   same visual text/arrow relationship that "looked
                   perfect" on iPhone before, we subtract 0.8px from
                   the text nudge: 3.9 - 0.8 = 3.1px. */
                transform: translateY(3.1px);
            }
        }
    }
}

/* Smooth transition on the SVG itself */
.as2-orange-btn svg path,
.as3-orange-btn svg path,
.as4-orange-btn svg path,
.ps4-orange-btn svg path,
.pt3-orange-btn svg path,
.pn2-orange-btn svg path,
.dc2-orange-btn svg path,
.hs-orange-btn svg path,
.ss-orange-btn svg path,
.csl2-orange-btn svg path,
.ads4-pill-btn svg path,
.psd-orange-btn svg path,
.th-pill-btn svg path,
.gb-orange-btn svg path,
.afz-orange-btn svg path,
[class*="-orange-btn"] svg path,
[class*="-pill-btn"] svg path,
.dcalc-cta svg path,
.dcalc-recalc-btn svg path {
    transition: fill 0.12s ease, stroke 0.12s ease;
}