/* ==========================================================================
   Component: button  (<x-site.button>)
   --------------------------------------------------------------------------
   Pills. Solid fills, no shadows. Variants:
     primary  lemon + navy text — "Request a quote"
     dark     navy + white      — the everyday action
     light    white + navy      — on photos and navy cards
     outline  1.5px line        — quiet secondary
     whatsapp
   Sizes --sm --md --lg, --block for full width. The end arrow nudges forward.
   ========================================================================== */

.btn {
    --btn-bg: var(--lemon);
    --btn-fg: var(--navy);
    --btn-bd: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    height: var(--btn-h);
    padding-inline: var(--btn-px);
    border: 1.5px solid var(--btn-bd);
    border-radius: var(--r-pill);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: var(--btn-fg); }
.btn .icon { font-size: 1.15em; }

.btn__end { transition: transform var(--t) var(--ease); }
.btn:hover .btn__end { transform: translateX(-3px); }
[dir="ltr"] .btn:hover .btn__end { transform: translateX(3px); }
[dir="ltr"] .btn:hover .btn__end.icon--flip { transform: scaleX(-1) translateX(-3px); }

.btn--sm { --btn-h: 38px; --btn-px: 1.05em; font-size: var(--fs-xs); }
.btn--md { --btn-h: 46px; --btn-px: 1.4em;  font-size: var(--fs-sm); }
.btn--lg { --btn-h: 54px; --btn-px: 1.7em;  font-size: var(--fs-base); }
.btn--block { display: flex; width: 100%; }

.btn--primary:hover  { --btn-bg: var(--lemon-deep); }
.btn--dark           { --btn-bg: var(--navy); --btn-fg: #fff; }
.btn--dark:hover     { --btn-bg: var(--navy-deep); }
.btn--light          { --btn-bg: #fff; --btn-fg: var(--navy); }
.btn--light:hover    { --btn-bg: var(--paper); }
.btn--outline        { --btn-bg: transparent; --btn-fg: var(--navy); --btn-bd: color-mix(in srgb, var(--navy) 30%, transparent); }
.btn--outline:hover  { --btn-bd: var(--navy); }
.btn--whatsapp       { --btn-bg: var(--whatsapp); --btn-fg: #06331A; }
.btn--whatsapp:hover { --btn-bg: #1EBE5A; }

/* Outline on dark surfaces */
:is(.card--navy, .card--photo, .on-dark) .btn--outline       { --btn-fg: #fff; --btn-bd: rgb(255 255 255 / 0.4); }
:is(.card--navy, .card--photo, .on-dark) .btn--outline:hover { --btn-bd: #fff; }