/* ============================================================
   Coast shared UI — tokens + components for Contact / Plain /
   404 / 500 (and reusable elsewhere).
   Values from Figma MCP. Mobile-first. No magic numbers outside tokens.
   ============================================================ */

:root {
    /* Colour */
    --c-ink: #181819;
    --c-ink-2: #44474d;
    --c-ink-muted: #545454;
    --c-accent: #bf6aad;
    --c-surface: #ffffff;
    --c-section: #f6f2f4;
    --c-placeholder: #686869;
    --c-field-border: rgba(197, 198, 206, 0.3);
    --c-danger: #fd4e4e;
    --c-cta-from: #fecc66;
    --c-cta-to: #f7a547;
    --c-cta-ink: #000000;

    /* Shadow */
    --c-shadow-card: 0 20px 20px rgba(3, 22, 50, 0.04);

    /* Radii */
    --c-r-card: 24px;
    --c-r-field: 16px;
    --c-r-icon: 12px;
    --c-r-cta: 20px;

    /* Layout */
    --c-max: 1240px;
    --c-pad-x: 16px;
    --c-card-max: 835px;
    --c-prose-max: 800px;

    /* Type — mobile defaults */
    --c-h1: 22px;
    --c-h1-lh: 1;
    --c-h2: 18px;
    --c-h2-lh: 28px;
    --c-sub: 14px;
    --c-sub-lh: 26px;
    --c-body: 14px;
    --c-body-lh: 22px;
    --c-field-fs: 16px;
    --c-field-lh: 24px;

    /* Spacing / sizes */
    --c-icon: 42px;
    --c-icon-glyph: 24px;
    --c-gap-icon: 15px;
    --c-pad-card: 20px;
    --c-pad-card-m: 16px;
    --c-gap-cards: 12px;
    --c-gap-head: 20px;
    --c-gap-section: 30px;
    --c-field-pad-y: 13px;
    --c-field-pad-x: 13px;
    --c-field-pad-end: 41px;
    --c-cta-h: 56px;
    --c-cta-pad-x: 32px;

    /* Callback band */
    --c-callback-pad-y: 40px;
    --c-callback-gap: 24px;
    --c-callback-sub: 14px;
    --c-callback-sub-lh: 26px;
}

@media (min-width: 768px) {
    :root {
        --c-pad-x: 32px;
        --c-h1: 30px;
        --c-h2: 20px;
        --c-sub: 16px;
        --c-sub-lh: 26px;
        --c-callback-pad-y: 80px;
        --c-callback-gap: 15px;
        --c-callback-sub: 16px;
    }
}

@media (min-width: 1440px) {
    :root {
        --c-pad-x: 100px;
    }
}

/* ---- Shell ---- */
.c-shell {
    max-width: var(--c-max);
    margin: 0 auto;
    padding-left: var(--c-pad-x);
    padding-right: var(--c-pad-x);
    box-sizing: border-box;
}

/* ---- Page head (centred h1 + description) ---- */
.c-page-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--c-gap-head);
}

.c-page-head__title {
    margin: 0;
    font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
    font-size: var(--c-h1);
    font-weight: 600;
    line-height: var(--c-h1-lh);
    color: var(--c-ink);
}

.c-page-head__sub {
    margin: 0;
    font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
    font-size: var(--c-sub);
    font-weight: 400;
    line-height: var(--c-sub-lh);
    color: var(--c-ink);
    max-width: 100%;
}

/* ---- Card ---- */
.c-card {
    background: var(--c-surface);
    border-radius: var(--c-r-card);
    box-shadow: var(--c-shadow-card);
    padding: var(--c-pad-card-m);
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .c-card {
        padding: var(--c-pad-card);
    }
}

/* ---- Amber CTA ---- */
.c-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--c-cta-h);
    height: var(--c-cta-h);
    padding: 10px var(--c-cta-pad-x);
    border: 0;
    border-radius: var(--c-r-cta);
    background: linear-gradient(180deg, var(--c-cta-from), var(--c-cta-to));
    color: var(--c-cta-ink);
    font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.08px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}

.c-cta:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
}

.c-cta:active {
    transform: scale(0.98);
}

.c-cta:disabled,
.c-cta[aria-disabled="true"] {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

@media (hover: hover) and (pointer: fine) {
    .c-cta:hover:not(:disabled):not([aria-disabled="true"]) {
        filter: brightness(1.03);
    }
}

.c-cta__arrow {
    display: block;
    width: 20px;
    height: 20px;
    flex: none;
    background: url("/images/common/btn-arrow-dark.svg") no-repeat center / contain;
}

.c-cta--full {
    width: 100%;
}

/* ---- Form fields ---- */
.c-field,
.c-select,
.c-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--c-field-border);
    border-radius: var(--c-r-field);
    background: var(--c-surface);
    color: var(--c-ink);
    font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
    font-size: var(--c-field-fs);
    font-weight: 400;
    line-height: var(--c-field-lh);
    padding: var(--c-field-pad-y) var(--c-field-pad-end) var(--c-field-pad-y) var(--c-field-pad-x);
}

.c-field::placeholder,
.c-textarea::placeholder {
    color: var(--c-placeholder);
    opacity: 1;
}

.c-select {
    background-image: url("/images/contact/icon-chevron-down.svg");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 10px 6px;
    padding-right: var(--c-field-pad-end);
    color: var(--c-placeholder);
    cursor: pointer;
}

.c-select:valid,
.c-select.has-value {
    color: var(--c-ink);
}

.c-textarea {
    min-height: 160px;
    resize: vertical;
}

@media (min-width: 768px) {
    .c-textarea {
        min-height: 121px;
    }
}

.c-field:focus,
.c-select:focus,
.c-textarea:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 1px var(--c-accent);
}

.c-field.is-error,
.c-select.is-error,
.c-textarea.is-error {
    border-color: var(--c-danger);
}

.c-field:-webkit-autofill,
.c-select:-webkit-autofill,
.c-textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--c-surface) inset;
    -webkit-text-fill-color: var(--c-ink);
    caret-color: var(--c-ink);
}

.c-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.c-field-error {
    margin: 0;
    font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--c-danger);
}

/* ---- Request a Callback (shared) ---- */
.c-callback {
    background: var(--c-section);
    padding: var(--c-callback-pad-y) var(--c-pad-x);
}

.c-callback__inner {
    max-width: var(--c-max);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--c-callback-gap);
}

.c-callback__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 649px;
    padding: 0 15px;
    box-sizing: border-box;
}

.c-callback__title {
    margin: 0;
    font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
    font-size: var(--c-h1);
    font-weight: 600;
    line-height: 1;
    color: var(--c-ink);
}

.c-callback__sub {
    margin: 0;
    padding-bottom: 8px;
    font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
    font-size: var(--c-callback-sub);
    font-weight: 400;
    line-height: var(--c-callback-sub-lh);
    color: var(--c-ink-muted);
    max-width: 52ch;
}

.c-callback .c-cta {
    width: min(311px, 100%);
}

@media (min-width: 768px) {
    .c-callback .c-cta {
        width: auto;
    }
}

/* Turnstile widget — keep the iframe inside the form column on mobile. */
.cf-turnstile {
    width: 100%;
    max-width: 100%;
}