/* =============================================================
   ICF – Intercool Contact Form
   Følger Intercool design system:
   - Navy: #0B1F3B  |  Accent: #4DA3FF
   - Off-white: #F6F7F9  |  Text: #0B1220
   - Typografi via tokens (fs-body, fs-small osv.)
   - Shadows via shadow-system tokens
   - clamp() for fluid sizing
   - BEM naming: .icf__element--modifier
   ============================================================= */

/* ── :root tokens ────────────────────────────────────────────── */
.icf {
    --icf-accent:       #4DA3FF;
    --icf-text:         #0B1220;
    --icf-text-muted:   #4B5563;
    --icf-border:       #E5E7EB;
    --icf-input-bg:     #FFFFFF;
    --icf-focus-ring:   rgba(77, 163, 255, .20);
    --icf-success:      #059669;
    --icf-error:        #DC2626;
    --icf-navy:         #0B1F3B;

    /* Fluid type (arver fra Intercool site-settings hvis tilgængeligt) */
    --fs-body:  clamp(1rem, .4vw + .95rem, 1.125rem);
    --fs-small: clamp(.8125rem, .2vw + .75rem, .875rem);

    /* Shadow system */
    --shadow-m: inset 0 1px 2px rgba(255,255,255,.26),
                0 2px 4px rgba(0,0,0,.20),
                0 4px 10px rgba(0,0,0,.12);
    --shadow-hover: inset 0 1px 2px rgba(255,255,255,.22),
                    0 10px 20px rgba(0,0,0,.24),
                    0 18px 40px rgba(0,0,0,.16);

    --radius-m: 8px;
    --radius-l: 12px;
    --ease:     cubic-bezier(.2,.8,.2,1);
    --dur:      220ms;

    /* Layout */
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
}

/* ── Responsive: tablet og mobil ─────────────────────────────── */
@media (max-width: 768px) {
    .icf {
        grid-template-columns: 1fr;
    }
}

/* ── Formular (venstre kolonne) ──────────────────────────────── */
.icf__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.icf__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 520px) {
    .icf__row { grid-template-columns: 1fr; }
}

.icf__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ── Labels ──────────────────────────────────────────────────── */
.icf__label {
    font-size:      var(--fs-small);
    font-weight:    600;
    letter-spacing: .02em;
    color:          var(--icf-text-muted);
}

.icf__label--req::after {
    content: " *";
    color:   var(--icf-accent);
}

/* ── Inputs ──────────────────────────────────────────────────── */
.icf__input,
.icf__textarea {
    background:    var(--icf-input-bg);
    border:        1px solid var(--icf-border);
    border-radius: var(--radius-m);
    color:         var(--icf-text);
    font-size:     var(--fs-body);
    font-family:   inherit;
    padding:       10px 14px;
    width:         100%;
    box-sizing:    border-box;
    outline:       none;
    -webkit-appearance: none;
    transition:
        border-color var(--dur) ease,
        box-shadow   var(--dur) ease;
}

.icf__input::placeholder,
.icf__textarea::placeholder {
    color: #9CA3AF;
}

.icf__input:focus,
.icf__textarea:focus {
    border-color: var(--icf-accent);
    box-shadow:   0 0 0 3px var(--icf-focus-ring);
}

.icf__textarea {
    resize:     vertical;
    min-height: 140px;
}

/* ── Honeypot (skjult for brugere, synlig for bots) ──────────── */
.icf__hp {
    position:       absolute;
    left:           -9999px;
    opacity:        0;
    pointer-events: none;
}

/* ── Send-knap ───────────────────────────────────────────────── */
.icf__btn {
    align-self:    flex-start;
    background:    var(--icf-accent);
    color:         #FFFFFF;
    font-size:     var(--fs-body);
    font-weight:   600;
    font-family:   inherit;
    border:        none;
    border-radius: var(--radius-m);
    padding:       12px 32px;
    cursor:        pointer;
    -webkit-appearance: none;
    transition:
        transform  var(--dur) var(--ease),
        box-shadow var(--dur) ease,
        opacity    var(--dur) ease;
}

.icf__btn:hover:not(:disabled) {
    transform:  translateY(-2px);
    box-shadow: 0 6px 16px rgba(77, 163, 255, .30);
}

.icf__btn:active:not(:disabled) { transform: translateY(-1px); }
.icf__btn:disabled               { opacity: .55; cursor: not-allowed; }

/* ── Status-besked ───────────────────────────────────────────── */
.icf__status {
    font-size:     var(--fs-small);
    border-radius: var(--radius-m);
    line-height:   1.5;
}

.icf__status:empty { display: none; }

.icf__status--success {
    color:      var(--icf-success);
    background: rgba(5, 150, 105, .08);
    border:     1px solid rgba(5, 150, 105, .25);
    padding:    10px 14px;
}

.icf__status--error {
    color:      var(--icf-error);
    background: rgba(220, 38, 38, .07);
    border:     1px solid rgba(220, 38, 38, .20);
    padding:    10px 14px;
}

/* ── Info-kort (højre kolonne) ───────────────────────────────── */
.icf__card {
    background:     var(--icf-navy);
    border-radius:  var(--radius-l);
    padding:        clamp(24px, 3vw, 36px);
    display:        flex;
    flex-direction: column;
    gap:            20px;
    position:       relative;
    overflow:       hidden;
    box-shadow:     var(--shadow-m);
}

/* Blå top-linje (card-border inspireret) */
.icf__card::before {
    content:  "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height:                  3px;
    background:              var(--icf-accent);
    border-top-left-radius:  var(--radius-l);
    border-top-right-radius: var(--radius-l);
    transition: height .15s ease;
}

.icf__card:hover::before { height: 5px; }

.icf__card-item {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    color:       rgba(255, 255, 255, .78);
    font-size:   var(--fs-body);
    line-height: 1.55;
}

.icf__card-icon {
    width:         38px;
    height:        38px;
    min-width:     38px;
    border-radius: 50%;
    background:    rgba(77, 163, 255, .15);
    border:        1px solid rgba(77, 163, 255, .28);
    display:       flex;
    align-items:     center;
    justify-content: center;
    margin-top:    1px;
}

.icf__card-icon svg {
    width:  16px;
    height: 16px;
    stroke: var(--icf-accent);
}

.icf__card-item a {
    color:           rgba(255, 255, 255, .78);
    text-decoration: none;
    transition:      color var(--dur) ease;
}

.icf__card-item a:hover { color: var(--icf-accent); }

.icf__card-label {
    font-size:     var(--fs-small);
    font-weight:   600;
    color:         var(--icf-accent);
    margin-bottom: 2px;
    display:       block;
}

.icf__divider {
    height:     1px;
    background: rgba(255, 255, 255, .10);
    border:     none;
    margin:     0;
}

/* reCAPTCHA notice */
.icf__recaptcha-notice {
    font-size:   11px;
    color:       #9ca3af;
    margin-top:  12px;
    text-align:  left;
    line-height: 1.5;
}

.icf__recaptcha-notice a {
    color:           #9ca3af;
    text-decoration: underline;
}

.icf__recaptcha-notice a:hover {
    color: var(--icf-accent, #4DA3FF);
}