/* ─────────────────────────────────────────────
   Sticky footer — the page wrapper fills at least the
   viewport and <main> grows, so the footer sits at the
   bottom even when a page's content is short.
   ───────────────────────────────────────────── */
.wp-site-blocks {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.wp-site-blocks > main {
    flex-grow: 1;
}

/* Templates set a large desktop top padding on <main> inline; tighten it on
   mobile (override needs !important to beat the inline style). */
@media (max-width: 781.98px) {
    .wp-site-blocks > main {
        padding-top: var(--wp--preset--spacing--40) !important;
    }
}

/* The header template-part is a direct child of the tall page wrapper, so
   making *it* sticky lets the nav pin to the top across the whole page scroll
   (the inner group can't, because its parent — this header — is only nav-tall). */
header.wp-block-template-part:has(.ast-sticky-nav) {
    position: sticky;
    top: 0;
    z-index: 100;
    margin-block-start: 0;
}

.ast-sticky-nav {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
    margin-block-start: 0;
}

.ast-sticky-nav .wp-block-site-logo img {
    max-height: 2.5rem;
    width: auto;
    display: block;
}

.ast-sticky-nav .wp-block-navigation {
    font-family: var(--wp--preset--font-family--body);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ─── Desktop nav items: full-height tabs with padding & active border ─── */
@media (min-width: 782px) {
    /* Drop the bar's vertical padding so the items themselves fill its height. */
    .ast-sticky-nav {
        padding-block: 0 !important;
    }
}

.ast-sticky-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    font-size: 1.0625rem; /* between small (1rem) and medium (1.125rem) */
    padding: 0.85rem 0.95rem;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.ast-sticky-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover,
.ast-sticky-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--accent-dark);
    background-color: rgba(74, 61, 44, 0.07);
    border-bottom-color: var(--wp--preset--color--accent-dark);
}

.ast-sticky-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .current-menu-item > .wp-block-navigation-item__content {
    color: var(--wp--preset--color--accent-dark);
    border-bottom-color: var(--wp--preset--color--accent);
}

/* ─── Mobile nav: hamburger trigger ─── */
.ast-sticky-nav .wp-block-navigation__responsive-container-open {
    padding: 0.25rem;
    color: var(--wp--preset--color--contrast);
}

.ast-sticky-nav .wp-block-navigation__responsive-container-open svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: currentColor;
}

/* ─── Mobile nav: overlay panel ─── */
.wp-block-navigation__responsive-container.is-menu-open {
    padding-block: var(--wp--preset--spacing--70);
    padding-inline: var(--wp--preset--spacing--50);
}

/* Close (X) button — larger hit area, generous inset */
.wp-block-navigation__responsive-container-close {
    padding: 0.75rem;
    top: 0.75rem;
    right: 0.75rem;
    color: var(--wp--preset--color--contrast);
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.wp-block-navigation__responsive-container-close svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: currentColor;
}

/* Menu list inside the overlay — vertically centered so the list sits in the
   middle of the screen, well away from the top-right close button. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: var(--wp--preset--spacing--50);
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
    text-align: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-block: 0.75rem;
    padding-inline: 1.25rem;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus-visible {
    color: var(--wp--preset--color--accent-dark);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

/* Current/active page marker — bold + accent colour. (Underline is avoided here
   because the hover/tap state already uses it, so it would be ambiguous.) */
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
.wp-block-navigation__responsive-container.is-menu-open .current_page_item > a {
    font-weight: 700;
    color: var(--wp--preset--color--accent-dark);
}

/* Prevent background scroll while overlay is open */
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
    overflow: hidden;
}

/* ─────────────────────────────────────────────
   Contact form (form-block)
   ───────────────────────────────────────────── */
:root {
    --ast-error: #a23a24;
    --ast-error-bg: #f7e9e5;
    --ast-success: #3f6b3a;
    --ast-success-bg: #e8f0e4;
    --ast-radius: 0.625rem; /* matches the logo's corner radius */
}

.wp-block-form-block-form {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
}

.wp-block-form-block-form .form-block__required-notice {
    margin: 0;
    font-family: var(--wp--preset--font-family--ui);
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--muted);
}

.wp-block-form-block-form .form-block__element {
    margin: 0;
}

.wp-block-form-block-form .form-block__label {
    display: block;
    margin-block-end: 0.4rem;
}

.wp-block-form-block-form .form-block__label-content {
    font-family: var(--wp--preset--font-family--ui);
    font-size: var(--wp--preset--font-size--small);
    letter-spacing: 0.03em;
    color: var(--wp--preset--color--accent-dark);
}

.wp-block-form-block-form .is-required {
    margin-inline-start: 0.15rem;
    color: var(--wp--preset--color--accent);
}

.wp-block-form-block-form input:not([type="submit"]):not([aria-hidden="true"]),
.wp-block-form-block-form textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.85rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
    color: var(--wp--preset--color--contrast);
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--primary);
    border-radius: var(--ast-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wp-block-form-block-form input:not([type="submit"]):focus,
.wp-block-form-block-form textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent);
    box-shadow: 0 0 0 3px rgba(108, 84, 53, 0.15);
}

.wp-block-form-block-form textarea {
    min-height: 8rem;
    resize: vertical;
}

/* Submit button — mirror the theme button style */
.wp-block-form-block-form .is-type-submit {
    margin-block-start: var(--wp--preset--spacing--20);
}

.wp-block-form-block-form input[type="submit"] {
    display: inline-block;
    width: auto;
    padding: 0.65rem 1.75rem;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
    letter-spacing: 0.05em;
    color: var(--wp--preset--color--contrast);
    background-color: var(--wp--preset--color--primary);
    border: 0;
    border-radius: var(--ast-radius);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.wp-block-form-block-form input[type="submit"]:hover,
.wp-block-form-block-form input[type="submit"]:focus-visible {
    background-color: var(--wp--preset--color--primary-hover);
    color: var(--wp--preset--color--accent-dark);
}

/* ─── Validation & submit states ─── */

/* Invalid field: red border on the input/textarea */
.wp-block-form-block-form .is-invalid input,
.wp-block-form-block-form .is-invalid textarea,
.wp-block-form-block-form .is-error input,
.wp-block-form-block-form .is-error textarea,
.wp-block-form-block-form input.is-invalid,
.wp-block-form-block-form textarea.is-invalid,
.wp-block-form-block-form input[aria-invalid="true"],
.wp-block-form-block-form textarea[aria-invalid="true"] {
    border-color: var(--ast-error);
}

.wp-block-form-block-form .is-invalid input:focus,
.wp-block-form-block-form .is-invalid textarea:focus,
.wp-block-form-block-form input[aria-invalid="true"]:focus,
.wp-block-form-block-form textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(162, 58, 36, 0.15);
}

/* Per-field error message */
.wp-block-form-block-form .form-block__invalid-field-notice {
    margin-block-start: 0.4rem;
    font-family: var(--wp--preset--font-family--ui);
    font-size: var(--wp--preset--font-size--small);
    color: var(--ast-error);
}

/* Submit result banner */
.wp-block-form-block-form .form-block__message-container {
    padding: 0.85rem 1.1rem;
    border: 1px solid transparent;
    border-radius: var(--ast-radius);
    font-family: var(--wp--preset--font-family--ui);
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
}

.wp-block-form-block-form .form-block__message-container.is-type-error {
    color: var(--ast-error);
    background-color: var(--ast-error-bg);
    border-color: var(--ast-error);
}

.wp-block-form-block-form .form-block__message-container.is-type-success {
    color: var(--ast-success);
    background-color: var(--ast-success-bg);
    border-color: var(--ast-success);
}

.wp-block-form-block-form .form-block__message-container.is-type-loading {
    gap: 0.5rem;
    color: var(--wp--preset--color--muted);
    background-color: var(--wp--preset--color--primary);
    border-color: var(--wp--preset--color--primary);
}

/* ─────────────────────────────────────────────
   Centered nav menu
   ───────────────────────────────────────────── */
.ast-sticky-nav > .wp-block-group {
    justify-content: center;
    /* Let the (centred) menu use the full bar width instead of the 66rem
       content width, so all items fit on one line. */
    max-width: none;
}

/* On mobile the menu collapses to a hamburger, aligned to the right. */
@media (max-width: 781.98px) {
    .ast-sticky-nav > .wp-block-group {
        justify-content: flex-end;
    }
}

/* Logo in the hero / title header */
.ast-hero-logo {
    margin-block-end: var(--wp--preset--spacing--60);
}

.ast-hero-logo img {
    width: 8.125rem; /* 130px */
    height: auto;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

/* Section dividers */
.wp-block-separator.alignwide {
    margin-block: var(--wp--preset--spacing--60);
}

@media (max-width: 781.98px) {
    .wp-block-separator.alignwide {
        margin-block: var(--wp--preset--spacing--40);
    }
}

/* ─────────────────────────────────────────────
   Team page — equal-height member cards
   (text left, image flush right)
   ───────────────────────────────────────────── */
:root {
    --ast-card-bg: #efeadf;
    --ast-nav-h: 3.3rem; /* approx. sticky-nav bar height; offset for sticky titles */
}

.ast-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--wp--preset--spacing--50);
}

.ast-team-grid > * {
    margin-block: 0;
}

@media (max-width: 781.98px) {
    .ast-team-grid {
        grid-template-columns: 1fr;
    }
}

.ast-team-card {
    display: flex;
    align-items: stretch;
    height: 100%;
    overflow: hidden;
    background-color: var(--ast-card-bg);
}

/* Text column — the only part with side padding */
.ast-team-card__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: var(--wp--preset--spacing--40);
}

.ast-team-card__text > * {
    margin-block: 0;
}

/* Image column — flush to the top, bottom and right edges, no padding */
.ast-team-card figure.wp-block-image {
    flex: 0 0 auto;
    align-self: stretch;
    margin: 0;
}

.ast-team-card figure.wp-block-image img {
    display: block;
    width: 140px;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.ast-team-role {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.5;
    color: var(--wp--preset--color--muted);
}

/* ─────────────────────────────────────────────
   Projekte — one boxed card per project
   (warm card bg, sticky title, compact gallery)
   ───────────────────────────────────────────── */
.ast-project {
    background-color: var(--ast-card-bg);
    border-radius: var(--ast-radius);
    /* Smaller top padding — the sticky <h3> adds its own top padding. */
    padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}

.ast-project > *:first-child { margin-block-start: 0; }
.ast-project > *:last-child  { margin-block-end: 0; }

/* Title stays pinned below the sticky nav while you scroll through the card.
   The negative inline margins let its background span the full card width so
   content scrolls cleanly underneath. */
.ast-project > h3 {
    position: sticky;
    top: var(--ast-nav-h);
    z-index: 1;
    margin-block: 0;
    margin-inline: calc(var(--wp--preset--spacing--50) * -1);
    padding: 0.6rem var(--wp--preset--spacing--50);
    background-color: var(--ast-card-bg);
    font-family: var(--wp--preset--font-family--body); /* Source Serif 4, not Playfair */
    font-weight: 700;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.3;
}

/* The title's own padding-bottom already provides the gap — drop the block
   layout margin on whatever follows it. */
.ast-project > h3 + * {
    margin-block-start: 0;
}

/* Compact gallery inside a card: a wrapping contact-sheet strip of uniform-height
   thumbnails (lightbox on click). */
.ast-project .wp-block-gallery.has-nested-images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--preset--spacing--20);
    margin-block-start: var(--wp--preset--spacing--40);
}

.ast-project .wp-block-gallery.has-nested-images .wp-block-image {
    flex: 0 0 auto;
    margin: 0;
    /* WP core sizes gallery figures to a % column via an id-level selector
       (:not(#individual-image)) that classes can't outrank — hence !important. */
    width: auto !important;
}

.ast-project .wp-block-gallery.has-nested-images .wp-block-image img {
    height: 8rem;
    width: auto;
    object-fit: cover;
    border-radius: 0.25rem;
    display: block;
}

@media (max-width: 480px) {
    .ast-project .wp-block-gallery.has-nested-images .wp-block-image img {
        height: 6.5rem;
    }
}

/* ─────────────────────────────────────────────
   Footer menu
   ───────────────────────────────────────────── */
.ast-footer-nav .wp-block-navigation-item__content {
    font-family: var(--wp--preset--font-family--ui);
    text-transform: none;
    letter-spacing: normal;
    color: var(--wp--preset--color--accent);
}

/* Divider between footer menu items */
.ast-footer-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
    content: "|";
    margin-inline: 0.85rem;
    color: var(--wp--preset--color--muted);
}

.ast-footer-nav .wp-block-navigation-item__content:hover,
.ast-footer-nav .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--accent-dark);
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}
