/**
 * Chrome & base styling — the SEARCH identity (see tokens.css) applied to this
 * theme's own shell: header band, footer, base typography, links, buttons,
 * focus and the public start page. Loaded site-wide. No parent-theme selectors.
 */

/* --- Base --- */
* {
    box-sizing: border-box;
}

/* The browser's own [hidden] rule loses against any author `display`, so a
   component style silently defeats it. Restate it once, with weight. */
[hidden] {
    display: none !important;
}

/* The patterned ground the page sits on, as on the live site. AVIF has no
   raster fallback on purpose: the pattern is decorative, so a browser that
   cannot decode it simply keeps the beige and loses nothing that carries
   meaning — cheaper and more honest than shipping a second binary. */
body {
    margin: 0;
    font-family: var(--ha-font-body);
    font-size: var(--ha-font-size-base);
    line-height: var(--ha-line-height);
    color: var(--ha-text);
    background-color: var(--ha-beige);
    background-image: url("../img/bgMain.avif");
    background-repeat: repeat;
    background-attachment: fixed;
    padding-block: var(--ha-space-md); /* frames the sheet top and bottom, not only at the sides */
}

/* The page itself: a centred sheet, so the pattern stays visible left and
   right. Wide enough to hold .ha-container plus its gutters. */
.ha-site {
    max-width: var(--ha-site-max);
    margin-inline: auto;
    background: var(--ha-white);
}

.ha-site-content {
    min-height: 60vh;
}

/* Brand links: black, underlined, underline drops on hover */
a {
    color: var(--ha-text);
    text-underline-offset: 0.15em;
}

a:hover {
    text-decoration: none;
}

/* Accessible, always-visible keyboard focus (WCAG 2.2) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--ha-focus-ring);
    outline-offset: var(--ha-focus-offset);
}

/* Display headings — Impact, uppercase, tracked */
.ha-entry h1,
.ha-entry h2,
.ha-page-title,
.ha-archive-title,
.ha-angebot-title,
.ha-display {
    font-family: var(--ha-font-display);
    text-transform: uppercase;
    letter-spacing: var(--ha-display-tracking);
    font-weight: normal;
    color: var(--ha-text);
}

/* --- Header: SEARCH beige band --- */
.ha-site-header {
    background: var(--ha-surface-alt);
    border-bottom: 1px solid var(--ha-beige-line);
}

/* Two columns: the mark on the left, and beside it the chamber logo above with
   the meta line pinned to the bottom. The mark spans both rows, so the meta line
   ends up flush with the logo's lower edge instead of costing a row of its own —
   the space right of the subtitle was standing empty anyway. */
.ha-header-inner {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--ha-space-lg);
    padding-block: var(--ha-space-md);
}

.ha-brand {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.ha-header-wko {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
}

.ha-header-meta {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
}

/* The subtitle sits *on* the logo, in the empty field right of the magnifier's
   handle and below the wordmark — so the two read as one mark, as on the live
   site. The offsets are padding against the image box (316x150): clear of the
   handle horizontally, below the letters vertically. */
/* Position context for the subtitle overlay. No padding here: the box has to
   match the image exactly, because the subtitle is placed in percentages of it. */
.ha-brand {
    position: relative;
}

/* Block, not inline-block: an inline box sits on the text baseline and leaves
   room for descenders below it. That phantom gap would both push the meta line
   off the logo's edge and inflate the box the subtitle is positioned against. */
.ha-logo {
    display: block;
    line-height: 0;
    text-decoration: none;
}

.ha-logo-img {
    display: block;
    max-height: 150px; /* the asset's own height (316x150) — smaller squashes the wordmark */
    max-width: 100%;
    width: auto;
    height: auto;
}

.ha-logo-text {
    font-family: var(--ha-font-display);
    font-size: 1.75rem;
    text-transform: uppercase;
    letter-spacing: var(--ha-display-tracking);
    line-height: 1.2;
    color: var(--ha-text);
}

/* Placed in percentages of the logo box rather than in pixels, so the same rule
   holds at every size: 52% down clears the SEARCH lettering, 24% in clears the
   magnifier's handle. The mark therefore reads identically on a phone and on a
   desktop, without a second set of values to keep in sync. */
.ha-header-subtitle {
    position: absolute;
    top: 52%;
    left: 24%;
    right: 0;
    margin: 0;
    font-weight: bold;
    font-size: clamp(0.72rem, 2.2vw, 0.85rem);
    line-height: 1.3;
    color: var(--ha-text);
    /* The overlay covers the logo link underneath, so clicks have to pass
       through it — otherwise the wordmark stops being the way home. */
    pointer-events: none;
}

.ha-header-wko {
    max-height: 64px;
    width: auto;
    height: auto;
}

/* Account links and language on one line, flush with the logo's lower edge:
   the account sits at the left of the free column — roughly mid-page — and the
   switcher at the far right. */
.ha-header-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ha-space-md);
    flex-wrap: wrap;
}

/* --- Account strip: replaces the WP toolbar for frontend-only members --- */
.ha-account {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ha-space-md);
    font-size: 0.85rem;
}

.ha-account-user {
    color: var(--ha-text-secondary);
}

.ha-account-link {
    color: var(--ha-text);
    font-weight: bold;
}

/* Visually hidden, still read aloud — for labels a sighted user infers from
   context but a screen reader would otherwise miss. */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Feedback after an action: one look everywhere ---
   The Angebot form is rendered by ACF and announces a save in its own markup,
   while account and contact forms use ours. Both are matched here, so a saved
   profile and a saved Angebot do not report themselves in two different
   styles. */
.ha-notice,
.acf-notice,
#message.updated {
    margin-block: 0 var(--ha-space-md);
    padding: var(--ha-space-sm) var(--ha-space-md);
    border: 0;
    border-inline-start: 4px solid var(--ha-success-text);
    background: var(--ha-notice-bg);
    color: var(--ha-text);
    font-size: 0.95rem;
}

.ha-notice--error,
.acf-notice.-error {
    border-inline-start-color: var(--ha-accent-text);
    background: var(--ha-notice-bg-error);
}

/* --- Language switcher: shows the language you are not reading ---
   ⚠️ Pushed right by its own margin, not by the parent's space-between: signed
   out there are no account links, and space-between then parks the only child
   at the left edge. */
.ha-lang-switcher {
    display: flex;
    justify-content: flex-end;
    margin-inline-start: auto;
}

.ha-lang-switcher ul {
    display: flex;
    align-items: center;
    gap: var(--ha-space-sm);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ha-lang-item a {
    color: var(--ha-text);
    font-weight: bold;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Narrow screens: the three-column meta row has no room to centre anything, so
   account and language stack and align left with the rest of the page. */
@media (max-width: 48rem) {
    /* The sheet fills the screen at this width, so the patterned ground would
       only ever show in the few pixels of padding around it — decoration nobody
       sees, paid for with a download. Both go. */
    body {
        padding-block: 0;
        background-image: none;
    }

    /* One column at this width: the mark, then the chamber logo and the meta
       line beneath it. */
    .ha-header-inner {
        grid-template-columns: 1fr;
        row-gap: var(--ha-space-sm);
    }

    /* Hug the image. As a stretched grid item the block would be as wide as the
       column, and the subtitle's percentages would then be measured against the
       column instead of the artwork — pushing the text right and letting it run
       past the mark's edge. */
    .ha-brand {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }

    /* Closer to the handle than on the desktop: at this size the free field is
       narrower, and the text needs the room to stay on the mark. */
    .ha-header-subtitle {
        top: 50%;
        left: 18%;
    }

    .ha-header-wko,
    .ha-header-meta {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;
    }

    .ha-header-meta {
        width: 100%;
    }

    /* The wordmark at full size dominates a phone screen; this keeps it
       present without taking the top third. */
    .ha-logo-img {
        max-height: 120px;
    }

    .ha-header-wko {
        max-height: 40px;
    }

    /* Account links and language share one line. That only fits once the
       greeting goes: on a phone the visitor knows who they are, and the two
       controls are what they came for. */
    .ha-account-user {
        display: none;
    }

    .ha-account {
        justify-content: flex-start;
    }
}

/* --- Breadcrumb: the way back, in the white strip below the header --- */
.ha-breadcrumb {
    padding-block: var(--ha-space-sm);
    font-size: 0.85rem;
    color: var(--ha-text-muted);
}

.ha-breadcrumb a {
    color: var(--ha-text-secondary);
}

.ha-breadcrumb [aria-current] {
    color: var(--ha-text-muted);
}

.ha-breadcrumb-sep {
    margin-inline: 0.4em;
    color: var(--ha-beige-line);
}

/* --- Footer: white, black double rule, centered uppercase brand line --- */
.ha-site-footer {
    position: relative;
    margin-top: var(--ha-space-xl);
    background: var(--ha-white);
    border-top: var(--ha-divider-strong);
}

/* The thin second line of the double rule, as on the live site. */
.ha-site-footer::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 3px;
    height: 1px;
    background: var(--ha-black);
}

.ha-footer-brand {
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
    padding-block: var(--ha-space-sm);
    color: var(--ha-text);
}

.ha-footer-legal {
    display: block;
    text-align: center;
    padding-bottom: var(--ha-space-sm);
    font-size: 0.85rem;
}

.ha-footer-legal-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ha-footer-legal-list > li + li::before {
    content: "·";
    padding-inline: var(--ha-space-sm);
    color: var(--ha-text-muted);
}

/*
 * Draft marks on the legal pages, rendered by the [ha_offen] shortcode. The
 * number is decoration for sighted readers; the equivalent for everyone else is
 * the visually hidden label the shortcode emits alongside it.
 */
.ha-offen {
    background: var(--ha-draft-bg);
    color: var(--ha-text);
    box-shadow: inset 0 -2px 0 var(--ha-draft-border);
    padding: 0.1em 0.2em;
    scroll-margin-block-start: var(--ha-space-xl);
}

.ha-offen-nr {
    display: inline-block;
    min-width: 1.4em;
    margin-inline-end: 0.35em;
    padding: 0 0.3em;
    border-radius: 0.8em;
    background: var(--ha-draft-badge-bg);
    color: var(--ha-draft-badge-text);
    font-size: 0.75em;
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
    vertical-align: 0.15em;
}

.ha-offen-liste {
    margin-block-start: var(--ha-space-xl);
    padding: var(--ha-space-md) var(--ha-space-lg);
    border: 2px solid var(--ha-draft-border);
    background: var(--ha-surface);
}

.ha-offen-liste-titel {
    margin-block: 0 var(--ha-space-xs);
}

.ha-offen-liste-hinweis {
    margin-block: 0 var(--ha-space-md);
    color: var(--ha-text-secondary);
    font-size: 0.9rem;
}

.ha-offen-liste-items {
    margin: 0;
    padding-inline-start: var(--ha-space-lg);
}

.ha-offen-eintrag {
    margin-block-end: var(--ha-space-xs);
}

@media print {
    .ha-offen {
        box-shadow: none;
        outline: 1px solid var(--ha-draft-border);
    }
}

/* --- Login form on the start page --- */
.ha-login {
    max-width: 26rem;
    margin-block: var(--ha-space-xl);
    padding: var(--ha-space-lg);
    border: var(--ha-divider-hair);
    background: var(--ha-white);
}

.ha-login-title {
    margin-top: 0;
    font-family: var(--ha-font-display);
    text-transform: uppercase;
    letter-spacing: var(--ha-display-tracking);
    font-weight: normal;
}

.ha-login label {
    display: block;
    font-weight: bold;
    margin-bottom: var(--ha-space-xs);
}

.ha-login input[type="text"],
.ha-login input[type="password"] {
    width: 100%;
    padding: 0.5em;
    border: var(--ha-divider-hair);
    border-radius: 0;
    font-family: var(--ha-font-body);
    font-size: 1rem;
}

.ha-login .login-remember label {
    display: flex;
    align-items: center;
    gap: var(--ha-space-sm);
    font-weight: normal;
}

.ha-login .login-submit input[type="submit"] {
    display: inline-block;
    background: var(--ha-black);
    color: var(--ha-white);
    font-family: var(--ha-font-display);
    text-transform: uppercase;
    letter-spacing: var(--ha-display-tracking);
    font-size: 1rem;
    padding: 0.6em 1.4em;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.ha-login-lost {
    margin-bottom: 0;
    font-size: 0.85rem;
}

/* --- SEARCH-style action button (start CTA, generic .ha-button) --- */
.wp-block-button__link,
.ha-button {
    display: inline-block;
    background: var(--ha-black);
    color: var(--ha-white);
    font-family: var(--ha-font-display);
    text-transform: uppercase;
    letter-spacing: var(--ha-display-tracking);
    text-decoration: none;
    padding: 0.6em 1.4em;
    border: 0;
    border-radius: 0;
}

.wp-block-button__link:hover,
.ha-button:hover {
    background: #1a1a1a;
    color: var(--ha-white);
}

/* --- Skip link (a11y) --- */
.ha-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    background: var(--ha-black);
    color: var(--ha-white);
    padding: var(--ha-space-sm) var(--ha-space-md);
}

.ha-skip-link:focus {
    left: 0;
}

/* --- Responsive header --- */
@media (max-width: 768px) {
    .ha-header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .ha-header-brand {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .ha-header-subtitle {
        max-width: none;
    }
}

/* --- Form help texts ---
   Instructions under a field must read as an aside, not as content: quieter
   colour, smaller size, a reading measure, and air between label and input —
   no border, which made every hint look like a quotation. Covers ACF's markup
   as well as our own, so the Angebot form and the account form explain
   themselves the same way. */
.acf-field .description,
.acf-field p.description,
.ha-field-hint,
p.description {
    margin-block: var(--ha-space-xs) var(--ha-space-sm);
    max-width: 65ch;
    color: var(--ha-text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}