/* =========================================================================
   GLOBALFITS — DESIGN TOKENS & BASE LAYER
   =========================================================================
   Loaded before style.css and before any page-level <style> block.
   Defines the one typography scale, spacing rhythm, container widths and
   accessibility baseline used by the whole storefront and admin panel.

   TYPOGRAPHY RULE OF THE PROJECT
   ------------------------------
   Nothing that carries meaning is rendered below 11px. Decorative
   eyebrows/kickers sit at 11-12px, interface text at 13-14px, reading
   text at 15-16px. Form controls are 16px on mobile so iOS never
   auto-zooms the page on focus.
   ========================================================================= */

:root {

    /* ---------- COLOUR ---------- */
    --ink:        #111111;
    --ink-soft:   #3d3934;
    --ink-2:      #3d3934;
    --paper:      #fbfaf7;
    --white:      #ffffff;
    --muted:      #6d6b67;
    --muted-2:    #857f77;
    --line:       #e8e4dc;
    --line-strong:#d7d1c8;
    --accent:     #d8b987;
    --accent-ink: #8a6a2f;
    --soft:       #f3efe7;
    --sand:       #f6ead9;
    --danger:     #b42318;
    --danger-bg:  #fff0ee;
    --success:    #087a55;
    --success-bg: #e8f5ef;

    /* ---------- TYPE SCALE ---------- */
    --fs-micro:   0.6875rem;  /* 11px - decorative labels only            */
    --fs-label:   0.75rem;    /* 12px - eyebrows, badges, meta            */
    --fs-ui:      0.8125rem;  /* 13px - nav, buttons, footer links        */
    --fs-base:    0.875rem;   /* 14px - default interface + card text     */
    --fs-body:    0.9375rem;  /* 15px - comfortable reading               */
    --fs-lead:    1rem;       /* 16px - intros, form controls on mobile   */
    --fs-h6:      1.0625rem;  /* 17px */
    --fs-h5:      1.25rem;    /* 20px */
    --fs-h4:      1.5rem;     /* 24px */
    --fs-h3:      clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
    --fs-h2:      clamp(1.625rem, 1.25rem + 1.8vw, 2.375rem);
    --fs-h1:      clamp(2rem,   1.5rem + 2.6vw, 3.25rem);
    --fs-display: clamp(2.5rem, 1.4rem + 5vw,  5rem);

    /* ---------- LINE HEIGHT ---------- */
    --lh-tight:   1.15;
    --lh-heading: 1.22;
    --lh-snug:    1.45;
    --lh-normal:  1.6;
    --lh-relaxed: 1.75;

    /* ---------- TRACKING ---------- */
    --ls-display: -0.02em;
    --ls-normal:  0;
    --ls-label:   0.08em;
    --ls-caps:    0.14em;
    --ls-logo:    0.2em;

    /* ---------- WEIGHT ---------- */
    --fw-normal:  400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;
    --fw-black:   800;

    /* ---------- SPACING ---------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 56px;
    --sp-10: 72px;

    /* ---------- LAYOUT ---------- */
    --container:      1440px;
    --container-wide: 1560px;
    --reading:        740px;      /* long-form policy/about column      */
    --gutter:         40px;       /* desktop page gutter                */
    --section-y:      clamp(48px, 5vw, 80px);

    /* ---------- CONTROLS ---------- */
    --control-h:      46px;       /* buttons + inputs, desktop          */
    --control-h-sm:   40px;
    --tap:            44px;       /* minimum touch target               */
    --radius:         2px;
    --radius-lg:      10px;
    --radius-pill:    999px;

    /* ---------- ELEVATION ---------- */
    --shadow-sm: 0 1px 2px rgba(17,17,17,.06);
    --shadow:    0 8px 24px rgba(17,17,17,.08);
    --shadow-lg: 0 18px 45px rgba(17,17,17,.14);

    /* ---------- FONT FAMILIES ---------- */
    --font-sans:  Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
}

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --gutter: 28px;
        --control-h: 46px;
    }
}

/* Mobile */
@media (max-width: 700px) {
    :root {
        --gutter: 18px;
        --section-y: clamp(36px, 9vw, 56px);
    }
}

@media (max-width: 400px) {
    :root { --gutter: 16px; }
}


/* =========================================================================
   BASE
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* Safety net so a stray wide element cannot scroll the page sideways.
       This MUST sit on the root, not on body: overflow on body turns body
       into its own scroll container, which breaks window scrolling, scroll
       restoration and the sticky header. On the root it propagates to the
       viewport and everything keeps behaving normally. */
    overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

img { display: block; }

a {
    color: inherit;
    text-decoration: none;
}

button, input, select, textarea {
    font-family: inherit;
}


/* =========================================================================
   ACCESSIBILITY
   ========================================================================= */

/* Visible keyboard focus everywhere, without a permanent mouse-click ring */
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
    border-radius: 2px;
}

.gf-premium-footer :focus-visible,
.gf-offerbar :focus-visible {
    outline-color: var(--accent);
}

/* Screen-reader-only text (used by icon-only controls) */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 999;
    padding: 12px 18px;
    background: var(--ink);
    color: var(--white);
    font-size: var(--fs-ui);
    font-weight: var(--fw-bold);
}

.skip-link:focus {
    top: 12px;
}

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


/* =========================================================================
   TYPOGRAPHY BASELINE
   ========================================================================= */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-serif);
    font-weight: var(--fw-medium);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-display);
    /* Inherit, never assert: headings inside dark sections must stay
       readable without every one of them needing an override. */
    color: inherit;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); font-family: var(--font-sans); font-weight: var(--fw-bold); letter-spacing: 0; }
h6 { font-size: var(--fs-h6); font-family: var(--font-sans); font-weight: var(--fw-bold); letter-spacing: 0; }

p  { margin: 0 0 var(--sp-4); }

small { font-size: var(--fs-label); }

strong, b { font-weight: var(--fw-bold); }


/* =========================================================================
   LAYOUT PRIMITIVES
   ========================================================================= */

.gf-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.gf-container-wide {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.gf-section {
    padding-block: var(--section-y);
}

/* Long-form reading column: policies, about, support copy */
.gf-prose {
    max-width: var(--reading);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    color: var(--ink-2);
}

.gf-prose p,
.gf-prose li { font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.gf-prose h2 { margin-top: var(--sp-8); font-size: var(--fs-h3); }
.gf-prose h3 { margin-top: var(--sp-7); font-size: var(--fs-h5); }
.gf-prose ul,
.gf-prose ol { padding-left: 1.25em; margin: 0 0 var(--sp-4); }
.gf-prose li { margin-bottom: var(--sp-2); }
.gf-prose a  { text-decoration: underline; text-underline-offset: 3px; }

/* Any wide element (table, code, diagram) scrolls inside itself */
.gf-scroll-x {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =========================================================================
   FORM CONTROLS
   16px on mobile prevents iOS Safari from zooming the viewport on focus.
   ========================================================================= */

input, select, textarea {
    font-size: var(--fs-base);
    line-height: 1.4;
    color: var(--ink);
}

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="search"],
input[type="url"], input[type="date"], select, textarea {
    min-height: var(--control-h);
    padding: 11px 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--white);
    -webkit-appearance: none;
    appearance: none;
}

textarea { min-height: 110px; padding-top: 12px; }

select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink) 50%),
        linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% + 2px),
        calc(100% - 13px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 34px;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--ink);
    outline: none;
    box-shadow: 0 0 0 3px rgba(17,17,17,.08);
}

input::placeholder, textarea::placeholder {
    color: var(--muted-2);
    opacity: 1;
}

@media (max-width: 900px) {
    input, select, textarea,
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="number"], input[type="password"], input[type="search"] {
        font-size: 16px;
    }
}

/* Buttons keep a comfortable, consistent height everywhere */
button, .btn, [role="button"] {
    min-height: var(--control-h);
}

@media (max-width: 900px) {
    a.btn, button, .btn {
        min-height: var(--tap);
    }
}


/* =========================================================================
   SHARED UTILITIES
   ========================================================================= */

.gf-eyebrow {
    display: block;
    font-size: var(--fs-label);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--muted);
}

.gf-muted { color: var(--muted); }

.gf-note {
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
    color: var(--muted);
}

/* Long email addresses must wrap instead of pushing the layout wide */
.gf-wrap-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Bottom padding so fixed mobile bars never cover the last element */
.gf-safe-bottom {
    padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
}

/* Business-detail links are read AND tapped: give them a real target. */
.policy-contact-grid a,
.contact-business-info a,
.about-business a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}

/* Inline links inside body copy cannot be 44px tall without wrecking the
   line box, so give them padding instead: the hit area grows, the text
   stays where the reader expects it. */
@media (max-width: 900px) {
    .pd-support a,
    .pd-deal a,
    .gf-prose p a,
    .policy-section p a {
        padding-block: 6px;
    }
}