/* ============================================================
   Global: reset, typography, utilities, buttons.
   Tokens live in assets/css/tokens.css (SOP §8). Values the Figma
   doesn't declare stay raw and are flagged there.
   ============================================================ */

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-surface);
    -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: var(--weight-medium);
    font-size: var(--text-overline);
    line-height: var(--leading-overline);
    text-transform: uppercase;
    color: var(--color-primary);
    letter-spacing: 0;
    margin: 0 0 8px;
}
/* Every eyebrow is Mobile/Overline (14) on mobile (Alex, 29 Sep) */
@media (max-width: 767px) {
    .eyebrow {
        font-size: var(--text-mobile-overline);
        line-height: var(--leading-mobile-overline);
    }
}
.eyebrow--light  { color: var(--color-text-inverse-muted); }
.eyebrow--gold   { color: var(--color-accent); }
.eyebrow--muted  { color: var(--color-text-muted); }
.eyebrow--center { text-align: center; color: var(--color-secondary); }

@media (max-width: 767px) {
    .eyebrow { font-size: var(--text-mobile-overline); }  /* Figma Mobile/Overline */
}

.divider {
    border: none;
    height: 1px;
    width: 100%;
    margin: 0;
    background: var(--color-border);
}
.divider--light { background: rgba(255, 255, 255, 0.1); } /* on dark backgrounds */
.divider--dark  { background: var(--color-border); }      /* 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 ──────────────────────────────────────────────── */
/* Figma "Button & Interaction Reference" (1140:65694), rendered by
   coplus_button(). Every type has default, :hover, :active (pressed) and
   :focus-visible states. Disabled is designed only for Conversion (opacity
   0.5, 1140:65655) and is reused for every type. .is-hover / .is-focus /
   .is-active force a state, for the Component Library page only. */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 20px;
    border: none;
    border-radius: 999px;
    font-family: var(--font-action);
    font-weight: var(--weight-heavy);  /* Figma Action: Futura PT Heavy */
    font-size: var(--button-font-size);
    line-height: var(--leading-action); /* 12 + 18 + 12 = the 42px component */
    letter-spacing: var(--tracking-action);
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-base), border-color var(--transition-base),
                color var(--transition-base), opacity var(--transition-base), box-shadow var(--transition-base);
}

/* Buttons keep Action on mobile: all 102 button labels in the 59 mobile
   frames are Action (18 Heavy). */

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary: teal pill (primary/Default 1140:65403) */
.btn--primary {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
    box-shadow: var(--button-shadow);
}
.btn--primary:hover,
.btn--primary.is-hover {
    background: var(--button-primary-bg-hover);
}
.btn--primary:focus-visible,
.btn--primary.is-focus {
    background: var(--button-primary-bg-hover);
    outline: 1px solid var(--button-primary-outline);
    outline-offset: 0;
    box-shadow: var(--button-focus-ring), var(--button-shadow);
}
.btn--primary:active,
.btn--primary.is-active {
    background: var(--button-primary-bg-pressed);
}

/* Conversion: gold pill with no shadow (1140:65647). The AI pill shares its
   states. .btn--gold is the old name, still used by the AI popup CTA, which
   keeps its shadow until the popup component is rebuilt. */
.btn--conversion,
.btn--gold,
.btn--ai {
    background: var(--button-accent-bg);
    color: var(--button-accent-text);
}
.btn--gold,
.btn--ai {
    box-shadow: var(--button-shadow);
}
.btn--conversion:hover, .btn--conversion.is-hover,
.btn--gold:hover, .btn--gold.is-hover,
.btn--ai:hover, .btn--ai.is-hover {
    background: var(--button-accent-bg-hover);
}
.btn--conversion:focus-visible, .btn--conversion.is-focus,
.btn--gold:focus-visible, .btn--gold.is-focus,
.btn--ai:focus-visible, .btn--ai.is-focus {
    background: var(--button-accent-bg-hover);
    outline: 1px solid var(--button-accent-outline);
    outline-offset: 0;
    box-shadow: var(--button-accent-focus-ring);
}
.btn--gold:focus-visible, .btn--gold.is-focus,
.btn--ai:focus-visible, .btn--ai.is-focus {
    box-shadow: var(--button-accent-focus-ring), var(--button-shadow);
}
.btn--conversion:active, .btn--conversion.is-active,
.btn--gold:active, .btn--gold.is-active,
.btn--ai:active, .btn--ai.is-active {
    background: var(--button-accent-bg);
    opacity: 0.8;
}

/* Ask Coplus: the Coplus mark in a navy circle (1140:65679).
   40px tall, icon 32px inset 4px, label starts at 44px. */
.btn--ai {
    height: 40px;
    padding: 0 16px 0 4px;
    gap: 8px;
}
.btn__icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--color-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; }

/* Secondary: a 42px arrow circle with a 2px ring (1140:65613) that expands
   to a pill showing its label on hover and focus (1140:65682). The label
   stays in the DOM at rest as the accessible name. 7px padding centres the
   24px arrow inside the ring; 18px + the 2px border is the Figma's 20px. */
.btn--secondary,
.btn--secondary-inverse {
    height: 42px;
    min-width: 42px;
    padding: 0 7px;
    gap: 0;
    border: 2px solid;
    background: transparent;
    box-shadow: var(--button-shadow);
    transition: background-color var(--transition-base), border-color var(--transition-base),
                color var(--transition-base), opacity var(--transition-base),
                padding var(--transition-base), gap var(--transition-base);
}
.btn--secondary .btn__label,
.btn--secondary-inverse .btn__label {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width var(--transition-base), opacity var(--transition-base);
}
.btn--secondary .btn__icon,
.btn--secondary-inverse .btn__icon {
    width: 24px;
    height: 24px;
    transition: opacity var(--transition-base);
}

.btn--secondary:is(:hover, :focus-visible, :active, .is-hover, .is-focus, .is-active),
.btn--secondary-inverse:is(:hover, :focus-visible, :active, .is-hover, .is-focus, .is-active) {
    padding: 0 18px;
    gap: 4px;
    border-color: transparent;
}
.btn--secondary:is(:hover, :focus-visible, :active, .is-hover, .is-focus, .is-active) .btn__label,
.btn--secondary-inverse:is(:hover, :focus-visible, :active, .is-hover, .is-focus, .is-active) .btn__label {
    max-width: 320px;
    opacity: 1;
}

.btn--secondary {
    border-color: var(--button-secondary-border);
    color: var(--button-secondary-icon);
}
.btn--secondary:is(:hover, :focus-visible, .is-hover, .is-focus) {
    background: var(--button-primary-bg);
    color: var(--button-primary-text);
}
.btn--secondary:is(:focus-visible, .is-focus) {
    outline: 1px solid var(--button-primary-outline);
    outline-offset: 0;
}
.btn--secondary:is(:active, .is-active) {
    background: var(--button-primary-bg-pressed);
    color: var(--button-primary-text);
}
.btn--secondary:is(:active, .is-active) :is(.btn__label, .btn__icon) {
    opacity: 0.8;
}

/* Secondary Inverse: the same on dark backgrounds (1140:65684) */
.btn--secondary-inverse {
    border-color: var(--button-secondary-inverse-border);
    color: var(--button-secondary-inverse-border);
}
.btn--secondary-inverse:is(:hover, :focus-visible, :active, .is-hover, .is-focus, .is-active) {
    background: var(--button-secondary-inverse-bg);
    color: var(--button-secondary-inverse-text);
}
.btn--secondary-inverse:is(:hover, :focus-visible, :active, .is-hover, .is-focus, .is-active) .btn__icon {
    color: var(--button-secondary-inverse-icon);
}
.btn--secondary-inverse:is(:focus-visible, .is-focus) {
    outline: 1px solid var(--button-secondary-inverse-outline);
    outline-offset: 0;
}
.btn--secondary-inverse:is(:active, .is-active) {
    opacity: 0.8;
}

/* Tertiary: a text link on dark backgrounds (1140:65687). 14.4 Futura
   Medium with 1% tracking, which isn't a Figma text style, so it stays raw.
   Hover underlines the label 2px below it (1140:65691); focus is the same
   underline at 80% (1398:28356); pressed is the whole link at 70%. The
   ::after pads the 16px link to a 24px target (WCAG 2.5.8). */
.btn--tertiary {
    padding: 0;
    gap: 3.2px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--button-tertiary-text);
    font-weight: var(--weight-medium);
    font-size: 14.4px;
    line-height: 1;
    letter-spacing: 0.144px;
}
.btn--tertiary::after {
    content: '';
    position: absolute;
    inset: -4px 0;
}
.btn--tertiary .btn__label { position: relative; }
.btn--tertiary .btn__label::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    height: 1.5px;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--transition-base);
}
.btn--tertiary .btn__icon {
    width: 16px;
    height: 16px;
    padding: 3px;
}
.btn--tertiary:is(:hover, .is-hover) .btn__label::after { opacity: 1; }
.btn--tertiary:is(:focus-visible, .is-focus) { outline: none; }
.btn--tertiary:is(:focus-visible, .is-focus) .btn__label::after { opacity: 0.8; }
.btn--tertiary:is(:active, .is-active) { opacity: 0.7; }
.btn--tertiary:is(:active, .is-active) .btn__label::after { opacity: 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; }
.btn--icon-only:hover,
.btn--outline:hover { opacity: 0.9; }  /* these two keep the old blanket hover */

/* 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(--color-text-inverse);
}

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

/* ── Reviews strip (coplus_reviews_strip(), Figma 1407:65533) ── */
/* The strip is the Trustpilot TrustBox alone: the Review Collector's "Review us
   on Trustpilot" button (the only widget on Coplus's account, Alex 1 Oct; the
   frames draw a 373x28 star rating). The "Read our reviews" link went on 2 Oct.
   The widget draws its button to the width of its box and centres it: below
   about 215px it stacks to two lines, from 220 to 260 it is one 184x38 button
   with (box - 184) / 2 either side. So the box is 240 (one line at every
   viewport, nothing in the iframe depends on the page width) and is pulled out
   by the 28px each side, which sits the button flush with the text above. */
.reviews-strip {
    display: flex;
    align-items: flex-start;
}
.reviews-strip__rating {
    flex: 0 0 240px;
    width: 240px;
    height: 40px;
    margin: 0 -20px;
    /* No border on the button (Alex, 21 Oct): the widget's own 1px outline can't be styled from outside its iframe, so the box is cropped to just inside it. The button is 184x38 with its outline at 28px in; the crop goes a pixel or two further (30 / 3 / 4) because the box can sit on a half pixel and the outline would otherwise show as a hairline; the 7px corner takes the curve of the outline with it */
    clip-path: inset(3px 30px 4px 30px round 7px);
}
.reviews-strip__rating > a {   /* the link shown until the TrustBox loads (no consent yet, or no script); it starts 38px in, where the widget's own text does, clear of the 30px crop */
    display: inline-flex;
    align-items: center;
    height: 40px;
    margin-left: 38px;
    /* Styled like the frames' "Read our reviews →" (Home 900:32799, product 900:15254): Futura Bold 14, underlined, teal (gold on the dark section) */
    font-family: var(--font-heading);
    font-weight: var(--weight-heavy);
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-primary);
    text-decoration: underline;
}
.reviews-strip__rating > a:hover { color: var(--color-primary-hover); }
.reviews-strip__rating > a:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* ── Breadcrumb (coplus_breadcrumb(), Figma 1407:65430) ───── */
/* Body (small), Logo Grey, "Ancillary Insurance / Windscreen Insurance" */
.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-heading);   /* Body (small) is set in Futura */
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
    color: var(--color-logo-grey);
}
.breadcrumb__item + .breadcrumb__item::before {
    content: "/";
    padding: 0 4px;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb a:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

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

.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;
}

/* ── Swiper tracks: never content-visibility ──────────────────
   FlyingPress adds an inline `content-visibility: auto` to long lists, and to
   every .swiper-wrapper (the reviews, solution gallery, card carousels, awards,
   team and career paths rows). That implies paint containment, which clips the
   slides to the track's own box; Swiper moves the track with a transform, so
   its box slides out of view and the whole row paints blank on a phone (it
   showed on the cached page, not on a fresh load). An inline style needs
   !important to be overridden. */
.swiper-wrapper {
    content-visibility: visible !important;
    contain: none !important;
}