/* ============================================================
   Global — variables, reset, typography, utilities
   ============================================================ */

/* ── Variables ──────────────────────────────────────────────
   Colours, fonts and type values carried over from the signed-off
   static build (coplus-localhost/css/styles.css).
   ─────────────────────────────────────────────────────────── */
:root {
    /* Colours */
    --primary:            #177591;
    --secondary:          #032a40;
    --secondary-end:      #003a5e;
    --tertiary:           #f9b000;

    --text:               #010d14;
    --text-alt:           #201e1d;
    --text-accent:        #848484;
    --text-inverse:       #ffffff;
    --background:         #ffffff;

    --primary-accent:     #e5f7f8;
    --secondary-accent:   rgba(0, 0, 0, 0.1);
    --tertiary-accent:    rgba(249, 176, 0, 0.2);
    --accent-inverse-dim: rgba(255, 255, 255, 0.6);
    --award-bg:           #cee9eb;
    --border-light:       rgba(0, 0, 0, 0.05);

    --gradient-navy: linear-gradient(100deg, var(--secondary) 0%, var(--secondary-end) 100%);
    /* Figma's "Primary gradient" — same two navies, right-to-left */
    --gradient-navy-alt: linear-gradient(270deg, var(--secondary) 0%, var(--secondary-end) 100%);
    --gradient-teal: linear-gradient(180deg, #187e9e 0%, #0f556c 100%);

    /* Fonts */
    --font-heading: 'Jost', 'Futura', 'Century Gothic', sans-serif;
    --font-body:    'Jost', 'Futura', 'Century Gothic', sans-serif;
    --font-info:    'Quattrocento Sans', serif;

    /* Spacing — see "Section layout rule" in CLAUDE.md */
    --pad-x:      50px;
    --pad-y:      40px;   /* adjacent section is the SAME background colour */
    --pad-y-alt:  80px;   /* adjacent section is a DIFFERENT background colour */

    /* Layout. At the 1440px design width --site-max-w is what's doing the work:
       1440 - 100px of padding = 1340, capped to 1204 and centred, which lands
       at the 118px gutter Figma shows. --pad-x only becomes the real gutter
       below ~1304px. */
    --site-max-w: 1204px;

    /* Misc */
    --transition: 200ms ease;
}

@media (max-width: 1366px) {          /* laptop — --pad-x stays 50px */
    :root {
        --pad-y:     30px;
        --pad-y-alt: 60px;
    }
}

@media (max-width: 1024px) {          /* tablet */
    :root {
        --pad-x:     40px;
        --pad-y:     24px;
        --pad-y-alt: 48px;
    }
}

@media (max-width: 767px) {           /* mobile */
    :root {
        --pad-x: 20px;
    }
}

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }

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

/* ── Global utilities ─────────────────────────────────────── */
/* Figma "Overline": Futura Medium 16 / line-height 1 / letter-spacing 0 */
.eyebrow {
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: 0;
    margin: 0 0 8px;
}
.eyebrow--light  { color: var(--accent-inverse-dim); }
.eyebrow--gold   { color: var(--tertiary); }
.eyebrow--muted  { color: var(--text-accent); }
.eyebrow--center { text-align: center; color: var(--secondary); }

.divider {
    border: none;
    height: 1px;
    width: 100%;
    margin: 0;
    background: rgba(0, 0, 0, 0.1);
}
.divider--light { background: rgba(255, 255, 255, 0.1); } /* on dark backgrounds */
.divider--dark  { background: rgba(0, 0, 0, 0.1); }       /* on light backgrounds */

/* Visually hidden but still read by screen readers — WordPress's
   conventional class name, for icon-only controls and form labels. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Visibility utilities ─────────────────────────────────────
   Wrap part of a string to drop it at smaller sizes, e.g.
   Award winning ancillary provider<span class="hide-on-mobile">
   and claims support specialist</span>

   hide-on-tablet hides only in the tablet band (768px-1024px).
   hide-on-mobile hides from 767px down.
   Put both on an element to hide it from 1024px down.
   !important is deliberate — a utility has to beat section styles.
   ───────────────────────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
    .hide-on-tablet { display: none !important; }
}

@media (max-width: 767px) {
    .hide-on-mobile { display: none !important; }
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 20px;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 18px;
    line-height: 1; /* 12px + 18px + 12px = the 42px "Primary Action" component */
    letter-spacing: 0.01em;
    white-space: nowrap;
    border: none;
    transition: opacity var(--transition), transform var(--transition);
}
.btn:hover { opacity: 0.9; }

.btn--primary {
    background: var(--primary);
    color: var(--text-inverse);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
.btn--gold {
    background: var(--tertiary);
    color: var(--secondary);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

/* The "AI Support" pill — gold, with the Coplus mark in a navy circle.
   Figma: 40px tall, icon 32px inset 4px, label starts at 44px. */
.btn--ai {
    background: var(--tertiary);
    color: var(--secondary);
    height: 40px;
    padding: 0 16px 0 4px;
    gap: 8px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
.btn__icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--secondary);
    flex-shrink: 0;
}
.btn__icon-circle svg { width: 20px; height: 20px; }

/* Figma's icons are 20px inline, or 24px in the circular icon-only button */
.btn__icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Icon-only. Figma keeps the component's 12px/20px padding around a 20px
   icon box, so it's a 60x44 stadium rather than a circle, and the arrow
   glyph inside is 12.5px. */
.btn--icon-only {
    width: 60px;
    height: 44px;
    padding: 0;
    border-radius: 999px;
}
.btn--icon-only .btn__icon { width: 12.5px; height: 12.5px; }

/* Transparent-with-border, for icon buttons sitting on imagery */
.btn--outline {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(26, 26, 26, 0.1);
    color: var(--text-inverse);
}

.btn-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.text-gold { color: var(--tertiary); }

.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(26, 26, 26, 0.1);
    flex-shrink: 0;
}