/* ── Shared button system ──
   Depends on CSS custom properties defined per-page:
   --midnight, --yellow, --yellow-dark, --white, --ink, --muted, --border, --sans

   WHY THIS FILE EXISTS
   Before this, the site had no button convention at all. Eight different
   treatments were in play, `.cta-card-btn` was copy-pasted into 48 files and
   `.article-cta a` into 49, `.nav-cta` was a pill on 60 pages but a 10px rect on
   the homepage, and exactly one button on the whole site had a focus style.

   HOW IT IS LOADED — this matters
   Every page's inline <style> block comes AFTER its <link> tags, so this file is
   linked LAST in <head> (after booking-form.css) to win on source order against
   any per-page rule that survives. That also means load order is load-bearing:
   moving this <link> earlier silently hands control back to the duplicated
   page-local blocks.

   Shared assets are served with NO Cache-Control header, so the ?v= on the link
   is mandatory — a CloudFront invalidation cannot reach an already-cached
   browser. Bump it on every change to this file.

   THE SYSTEM
   Two shadow layers: a tight contact shadow that reads as weight, and a wide
   diffuse one that reads as height. On hover the button lifts 2px and the
   diffuse layer warms to amber. Flat fills only — no gradients. */

:root {
    --btn-radius: 10px;
    --btn-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --btn-lip: inset 0 1px 0 rgba(255,255,255,0.40);
    --btn-lip-hover: inset 0 1px 0 rgba(255,255,255,0.50);
    --btn-rest: 0 1px 2px rgba(12,20,37,0.22), 0 4px 10px rgba(12,20,37,0.14);
    --btn-hover: 0 2px 4px rgba(12,20,37,0.20), 0 12px 28px rgba(201,162,12,0.34);
    --btn-hover-ink: 0 2px 4px rgba(12,20,37,0.18), 0 12px 28px rgba(12,20,37,0.22);
}

/* ── Amber buttons ──
   The primary action everywhere. Listed individually rather than behind one
   shared class so no CTA markup had to change across 63 pages. */
.nav-cta,
.cta-card-btn,
.article-body .article-cta a,
.sticky-cta,
.form-submit-btn,
.cta-card .cta-btn {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--midnight);
    background: var(--yellow);
    border: 0;
    border-radius: var(--btn-radius);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--btn-lip), var(--btn-rest);
    transition: transform 0.25s var(--btn-ease), box-shadow 0.25s var(--btn-ease);
}
.nav-cta:hover,
.cta-card-btn:hover,
.article-body .article-cta a:hover,
.form-submit-btn:hover,
.cta-card .cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--btn-lip-hover), var(--btn-hover);
}
.nav-cta:active,
.cta-card-btn:active,
.article-body .article-cta a:active,
.form-submit-btn:active,
.cta-card .cta-btn:active {
    transform: translateY(0);
    box-shadow: var(--btn-lip), 0 1px 2px rgba(12,20,37,0.24);
}

/* ── Per-button sizing ──
   Appearance is shared; footprint is not.

   Sizing is declared here ONLY for the buttons whose page-local block this
   file replaces. Buttons whose page block survives — .sticky-cta (fixed
   dock), .page-btn (pagination), .cta-card .cta-btn (one-off) — deliberately
   get no display/padding/width here: they own their own layout, and setting
   display on them from this file silently broke a full-width sidebar CTA the
   first time round. */
.nav-cta { font-size: 0.85rem; padding: 9px 22px; }
.cta-card-btn { display: block; font-size: 0.88rem; padding: 10px 20px; text-align: center; }
.article-body .article-cta a { display: inline-block; font-size: 1.05rem; font-weight: 700; padding: 14px 32px; }
.form-submit-btn { width: 100%; font-size: 1rem; padding: 14px 28px; margin-top: 8px; }

/* The sticky bar is a full-width dock over scrolling content, so it takes a
   deeper shadow than the rest and is absent from the :hover group above — it
   is pinned to the viewport edge and there is nothing to lift away from.
   Its position/inset/z-index/safe-area padding stay in index.html. */
.sticky-cta {
    box-shadow: var(--btn-lip), 0 8px 28px rgba(0,0,0,0.45);
}

/* ── Ink button ── the final CTA, amber's opposite on a light section. */
.cta-start-btn {
    display: inline-block;
    font-family: var(--sans);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--white);
    background: var(--midnight);
    border: 0;
    border-radius: var(--btn-radius);
    padding: 18px 36px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), var(--btn-rest);
    transition: transform 0.25s var(--btn-ease), box-shadow 0.25s var(--btn-ease);
}
.cta-start-btn:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), var(--btn-hover-ink);
}
.cta-start-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 1px 2px rgba(12,20,37,0.24);
}

/* ── Outline button ── the "Blog" link in the nav, on dark. */
.nav-secondary {
    font-family: var(--sans);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--yellow);
    background: transparent;
    border: 0;
    border-radius: var(--btn-radius);
    padding: 8px 20px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--yellow);
    transition: background 0.25s var(--btn-ease), color 0.25s var(--btn-ease),
                box-shadow 0.25s var(--btn-ease);
}
.nav-secondary:hover {
    color: var(--midnight);
    background: var(--yellow);
    box-shadow: inset 0 0 0 1px var(--yellow), var(--btn-rest);
}

/* ── Neutral button ── blog pagination, on the warm surface.
   The two blog index pages keep their own .page-btn block (it carries the
   inline-flex centring and the .page-current / .disabled variants), so this
   only layers on the depth and motion the system gives everything else. */
.page-btn {
    box-shadow: 0 1px 2px rgba(12,20,37,0.06);
    transition: transform 0.25s var(--btn-ease), box-shadow 0.25s var(--btn-ease),
                border-color 0.25s var(--btn-ease), color 0.25s var(--btn-ease);
}
.page-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(12,20,37,0.10), 0 8px 20px rgba(12,20,37,0.08);
}

/* ── Focus ──
   Every button on this site except .sticky-cta had NO focus style at all, so a
   keyboard user had nothing to follow. Two concentric rings rather than one:
   the inner ring reads against light surfaces, the outer against dark, so a
   single declaration covers both without knowing where the button sits.

   :focus-visible only — a mouse click must not leave a ring behind. */
.nav-cta:focus-visible,
.nav-secondary:focus-visible,
.cta-card-btn:focus-visible,
.article-body .article-cta a:focus-visible,
.form-submit-btn:focus-visible,
.cta-card .cta-btn:focus-visible,
.page-btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--midnight), 0 0 0 5px var(--yellow);
}
.cta-start-btn:focus-visible,
.sticky-cta:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 2px var(--white), 0 0 0 5px var(--midnight);
}
/* The ghost "Back" control in the booking form is text, not a surface, so it
   takes a plain outline instead of a ring. */
.form-back:focus-visible {
    outline: 2px solid var(--yellow-dark);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Disabled ──
   .page-btn.disabled is deliberately absent: the blog index defines that
   variant itself, and overriding it from here would change its opacity for no
   reason. */
.form-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

/* ── Reduced motion ──
   The 48 blog pages have no reduced-motion block of their own, so before this
   their CTA transforms ran regardless of the user's setting. This is the only
   thing that covers them. */
@media (prefers-reduced-motion: reduce) {
    .nav-cta,
    .nav-secondary,
    .cta-card-btn,
    .article-body .article-cta a,
    .sticky-cta,
    .form-submit-btn,
    .cta-start-btn,
    .page-btn,
    .cta-card .cta-btn {
        transition: none;
    }
    .nav-cta:hover,
    .cta-card-btn:hover,
    .article-body .article-cta a:hover,
    .form-submit-btn:hover,
    .cta-start-btn:hover,
    .page-btn:hover,
    .cta-card .cta-btn:hover {
        transform: none;
    }
}

/* ── Narrow nav ──
   Moved here from shared/nav.css: that file loads first, so its same-specificity
   rules can no longer win. */
@media (max-width: 600px) {
    .nav-cta { padding: 7px 16px; font-size: 0.85rem; }
    .nav-secondary { padding: 6px 14px; font-size: 0.82rem; }
}

/* ── Touch targets ──
   80% of affiliate traffic is mobile. Matches the >=44px floor set on the
   manage pages in src/handlers/api.py. */
@media (max-width: 480px) {
    .article-body .article-cta a,
    .cta-start-btn,
    .form-submit-btn {
        min-height: 44px;
    }
    .cta-start-btn {
        display: block;
        width: 100%;
        padding: 16px 24px;
    }
}
