/*
 * Studio DT — large footer. Full-width green band; logo + subscribe + social (left column),
 * contact (right column), © + Imprint bottom strip.
 * `.site-footer__inner` (site-chrome.css) owns max-width + horizontal gutter.
 */
.site-footer--large {
    background-color: var(--color-surface-inverse);
    color: var(--color-text-on-brand);
    font-weight: var(--font-weight-regular);
}
.site-footer--large .site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);   /* main → copyright strip, matching the footer's top padding (32) */
    /* top 30 (32 − 2), trailing 128 (64 + 64), bottom 20, leading 84 (64 + 20) */
    padding: calc(var(--space-xl) - 2px) calc(var(--space-4xl) + var(--space-4xl)) var(--space-md) calc(var(--space-4xl) + var(--space-md));
}
.site-footer--large .site-footer__main {
    display: grid;
    /* left column grows to fill; right column hugs its text (contact lines) */
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: var(--space-3xl);
}
.site-footer--large .site-footer__col--left {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xl);
}
/* wordmark → email-updates gap = 76 (col gap 48 + 28) */
.site-footer--large .site-footer__col--left .signup { margin-top: calc(var(--space-3xl) - var(--space-md)); }
/* text-field row → "Get in touch" gap = 33 (col gap 48 − 15) */
.site-footer--large .site-footer__col--left .site-footer__social { margin-top: -15px; }

/* --- Logo wordmark --- */
.site-footer__logo { margin: 0; }
/* David's supplied wordmark SVG (inline; renders via the theme's U8Web @font-face). */
.site-footer__logo-svg { display: block; width: auto; height: 4rem; max-width: 100%; }
.site-footer__heading {
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-regular);
    font-size: calc(var(--font-size-page-title) * 0.85);   /* ~31px — between section-title (25) and page-title (36) */
    line-height: var(--line-height-tight);
    margin: 0 0 var(--space-sm);
}

/* --- Subscribe --- */
.signup__form { position: relative; }   /* positioning context for the absolute error message */
.signup__fields {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}
.signup__input {
    /* hairline stroke (matches the main project-card pills) when empty/idle */
    border: var(--border-width-hairline) solid var(--color-border-default);
    border-radius: var(--radius-pill);
    padding: 6px var(--space-md);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-body);
    min-width: 16rem;
    background: var(--palette-white);
    color: var(--color-text-default);
}
.signup__input::placeholder { color: var(--palette-ink-300); }
/* while typing (focused or has text) the stroke returns to the heavier default; the extra 1px of
   border grows into the padding (padding −1px) so the field's height stays put — no layout shift */
.signup__input:focus,
.signup__input:not(:placeholder-shown) { border-width: var(--border-width-default); padding-block: 5px; }
.signup__input:focus-visible { outline: none; border-color: var(--color-text-default); }
.signup__input[aria-invalid="true"] { border-color: var(--palette-red-500); color: var(--palette-red-500); }
.signup__input[aria-invalid="true"]::placeholder { color: var(--palette-red-500); }
.signup__btn {
    /* transparent hairline so its box height matches the bordered social pills */
    border: var(--border-width-hairline) solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
    background: var(--color-text-default);
    color: var(--palette-white);
    padding: 6px var(--space-sm);   /* a bit narrower than the pills */
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: 1;
}
.signup__btn:active { transform: translateY(1px); opacity: .9; }
.signup__honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup__error {
    /* float under the field without pushing layout, aligned to the input's first character */
    position: absolute;
    top: 100%;
    left: var(--space-md);
    margin-top: var(--space-3xs);
    color: var(--palette-white);
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-caption);
}
.signup__success,
.signup__already {
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    margin: 0;
}

/* State toggles (driven by subscribe.js). [hidden] hides the three messages by default;
   the is-* rules below win on specificity and reveal the right one. */
.signup.is-subscribed .signup__fields,
.signup.is-subscribed .signup__error,
.signup.is-already-subscribed .signup__fields,
.signup.is-already-subscribed .signup__error,
.signup.is-already-subscribed .signup__success { display: none; }
.signup.is-subscribed .signup__success { display: block; }
.signup.is-already-subscribed .signup__already { display: block; }

/* --- Social pills --- */
.site-footer__pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}
.site-footer__pill {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    /* hairline stroke matching the main project-card pills */
    border: var(--border-width-hairline) solid var(--color-border-default);
    border-radius: var(--radius-pill);
    padding: 6px var(--space-lg);
    font-family: var(--font-family-sans);
    font-weight: var(--font-weight-regular);
    font-size: var(--font-size-body);
    line-height: 1;
}

/* --- Contact (right column) --- */
.site-footer__col--contact {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    font-size: calc(var(--font-size-section-title) * 0.92);   /* 23px (a tad smaller than 25) */
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-tight);
}
.site-footer__col--contact p { margin: 0; }
/* Contact values clean (no underline, no hover state); only Imprint is underlined. */
.site-footer__col--contact a { color: inherit; text-decoration: none; }
.site-footer__org { font-weight: var(--font-weight-regular); }

.site-footer--large .site-footer__imprint { color: inherit; }

/* --- Mobile --- */
@media (max-width: 800px) {   /* --breakpoint-md */
    .site-footer--large .site-footer__main { grid-template-columns: 1fr; }
    .signup__input { min-width: 0; flex: 1 1 auto; }
    /* Half the horizontal padding on mobile, trimmed 4px each side. */
    .site-footer--large .site-footer__inner {
        padding-inline: calc((var(--space-4xl) + var(--space-md)) / 2 - var(--space-3xs)) calc(var(--space-4xl) - var(--space-3xs));
    }
    /* Tighten the wordmark → email-updates gap (flex gap 48 − 4 = 44). */
    .site-footer--large .site-footer__col--left .signup { margin-top: calc(-1 * var(--space-3xs)); }
    /* Shrink every footer font size a touch, except the bottom ©/Imprint/Cookie line. */
    .site-footer--large { --footer-font-shrink: 0.1rem; }
    .site-footer--large .site-footer__heading      { font-size: calc(var(--font-size-page-title) * 0.85 - var(--footer-font-shrink)); }
    .site-footer--large .site-footer__col--contact { font-size: calc(var(--font-size-section-title) * 0.92 - var(--footer-font-shrink)); }
    .site-footer--large .signup__input,
    .site-footer--large .signup__btn,
    .site-footer--large .signup__success,
    .site-footer--large .signup__already,
    .site-footer--large .site-footer__pill         { font-size: calc(var(--font-size-body) - var(--footer-font-shrink)); }
    .site-footer--large .signup__error             { font-size: calc(var(--font-size-caption) - var(--footer-font-shrink)); }
    /* Stack the bottom row (©, Imprint, Cookievoorkeuren) close together, 8px below the contacts. */
    .site-footer--large .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2xs);
        margin-top: var(--space-2xs);
    }
}
@media (prefers-reduced-motion: reduce) {
    .signup__btn { transition: none; }
}