/* ═══════════════════════════════════════════════════════════
   TWO BITES — GLOBAL STYLESHEET
   Tokens, base layer, common components, mobile sticky CTA.
   Loaded BEFORE inline <style> blocks so pages can override.
   ═══════════════════════════════════════════════════════════ */

:root {
    /* Color tokens */
    --tb-black: #18181a;
    --tb-black-soft: #1f1f22;
    --tb-gray: #6b6b6b;
    --tb-gray-light: #999999;
    --tb-gray-border: #e8e8e8;
    --tb-bg: #ffffff;
    --tb-bg-alt: #f7f7f5;
    --tb-bg-cream: #f5f0e8;
    --tb-bg-section: #fafaf8;
    --tb-red: #8b1a1a;
    --tb-red-dark: #6e1414;
    --tb-red-light: #c8302d;
    --tb-gold: #c9a96a;

    /* Typography */
    --tb-font: "DM Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Layout */
    --tb-tap: 44px;            /* minimum tap target */
    --tb-radius: 12px;
    --tb-radius-lg: 16px;
    --tb-radius-pill: 999px;

    /* Safe area for sticky CTA */
    --tb-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ───── Base reset ───── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { font-family: var(--tb-font); overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* Avoid horizontal scroll on tiny viewports */
html, body { max-width: 100vw; overflow-x: hidden; }

/* ───── Accessibility / focus ───── */
:focus-visible {
    outline: 2px solid var(--tb-red);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ───── Performance / motion ───── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ───── Universal tap-target guarantee ───── */
button,
a.btn,
.btn,
.cta-button,
.btn-primary,
.btn-red,
.btn-ghost,
.btn-apple,
.hero-cta,
.nav-cta,
.nav-badge,
input[type="submit"],
input[type="button"] {
    min-height: var(--tb-tap);
    min-width: var(--tb-tap);
}

/* ───── Mobile form inputs (avoid iOS auto-zoom) ───── */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    select,
    textarea {
        font-size: 16px !important;
        min-height: var(--tb-tap);
        padding: 12px 14px;
    }
    label { font-size: 0.875rem; }
}

/* ═══════════════════════════════════════════════════════════
   STICKY MOBILE CTA (visible only on mobile)
   Reduces friction to quote / contact form on each landing.
   ═══════════════════════════════════════════════════════════ */
.tb-sticky-cta {
    display: none;
}

@media (max-width: 768px) {
    .tb-sticky-cta {
        display: flex;
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + var(--tb-safe-bottom));
        z-index: 9999;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--tb-red);
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 15px;
        padding: 14px 22px;
        border-radius: var(--tb-radius-pill);
        box-shadow: 0 10px 28px rgba(139, 26, 26, 0.45),
                    0 2px 8px rgba(0, 0, 0, 0.15);
        transition: transform 0.2s ease, background 0.2s ease;
        min-height: var(--tb-tap);
        border: 2px solid var(--tb-red);
    }

    .tb-sticky-cta:active {
        transform: scale(0.97);
        background: var(--tb-red-dark);
    }

    .tb-sticky-cta .arrow {
        transition: transform 0.2s ease;
    }

    /* Add bottom padding to body so content isn't hidden behind sticky CTA */
    body.has-sticky-cta {
        padding-bottom: calc(72px + var(--tb-safe-bottom));
    }

    /* Hide sticky CTA when the form is in view (less distracting) */
    body.sticky-hidden .tb-sticky-cta {
        opacity: 0;
        pointer-events: none;
        transform: translateY(20px);
        transition: all 0.3s ease;
    }
}

/* ═══════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════ */
@media print {
    .tb-sticky-cta, nav, header, footer { display: none !important; }
    body { background: #fff; color: #000; }
}