.footer-lahoda-1 {
    /*
     * --brand-gold-dark, not the base --brand-gold: the base gold (#A67745) is a
     * mid-tone "contrast valley" — even pure black text only reaches ~3.9:1 against
     * it, and cream text ~3.7:1, both under WCAG AA's 4.5:1 for normal text (see
     * DESIGN_MANUAL.md's own accessibility note that --brand-gold is mid-tone and
     * risky for body text). --brand-gold-dark is dark enough for cream text to
     * clear AA comfortably while still reading unambiguously as gold, not red —
     * same reasoning as using --brand-red-dark (not --brand-red) for this
     * background previously.
     */
    background: var(--brand-gold-dark);
    color: var(--bg-cream);
    padding: var(--space-8) var(--container-gutter) var(--space-5);
    container-type: inline-size;
}

@container (min-width: 1024px) {
    .footer-lahoda-1 {
        padding-top: calc(var(--space-8) + var(--space-3));
    }
}

.footer-lahoda-1__brand {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding-bottom: var(--space-6);
}

.footer-lahoda-1__logo {
    font-family: var(--font-display);
}

.footer-lahoda-1__logo-img {
    display: block;
    height: 36px;
    width: auto;
}

.footer-lahoda-1__motto {
    /* Full-opacity cream, not faded — --brand-red-dark is far lighter than the old
       --ink-surface, so the same opacity that read fine there drops below WCAG AA
       contrast (4.5:1) here. */
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--bg-cream);
    margin: var(--space-3) 0 0;
    max-width: 32em;
}

.footer-lahoda-1__main {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    padding-bottom: var(--space-6);
}

@container (min-width: 768px) {
    .footer-lahoda-1__main {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Fourth column (opening hours) present: two across on tablet, four on desktop. */
@container (min-width: 768px) {
    .footer-lahoda-1__main--four {
        grid-template-columns: repeat(2, 1fr);
    }
}

@container (min-width: 1024px) {
    .footer-lahoda-1__main--four {
        grid-template-columns: repeat(4, 1fr);
    }
}

.footer-lahoda-1__heading {
    /* Plain cream, not a gold accent — now that the footer background is itself
       gold (--brand-gold-dark), a gold-on-gold heading (e.g. --brand-gold-tint)
       only clears WCAG AA by a hair (~4.5:1, too close to risk). Full-opacity
       cream is a comfortable ~5:1, with uppercase + letter-spacing carrying the
       "heading" distinction instead of a second hue. */
    font-family: var(--font-body);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--bg-cream);
    margin: 0 0 var(--space-4);
}

.footer-lahoda-1__list,
.footer-lahoda-1__contact,
.footer-lahoda-1__legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.footer-lahoda-1__list a,
.footer-lahoda-1__contact a,
.footer-lahoda-1__legal a {
    /* Full-opacity cream, not faded — see the --footer-lahoda-1__motto comment above;
       0.85 opacity was borderline-failing AA against --brand-red-dark. Hover/focus is
       now just the underline, since opacity has nowhere higher to go. */
    color: var(--bg-cream);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 14px;
}

.footer-lahoda-1__list a:hover,
.footer-lahoda-1__contact a:hover,
.footer-lahoda-1__legal a:hover,
.footer-lahoda-1__list a:focus-visible,
.footer-lahoda-1__contact a:focus-visible,
.footer-lahoda-1__legal a:focus-visible {
    text-decoration: underline;
}

/* Second level of the product tree: smaller, indented, same full-opacity cream
   (faded text fails AA on the gold surface — see REQUIREMENTS.md). */
.footer-lahoda-1__sublist {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0 0 0 var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-left: 1px solid rgba(251, 246, 236, 0.3);
}

.footer-lahoda-1__list .footer-lahoda-1__sublist a {
    font-size: 12px;
}

.footer-lahoda-1__hours {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--bg-cream);
}

.footer-lahoda-1__hours-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    max-width: 22em;
}

.footer-lahoda-1__hours dt,
.footer-lahoda-1__hours dd {
    margin: 0;
}

.footer-lahoda-1__hours dd {
    font-weight: 600;
    text-align: right;
}

.footer-lahoda-1__contact a {
    /* Contact links can carry an icon, text, or both (phone/e-mail as text, social
       platforms as an icon) — same unified pattern as navigation-lahoda-1's
       contact-bar. inline-flex lines up icon + text on one row regardless of which
       are present. min-height (not just padding) guarantees a >=44px tap target
       even for icon-only links, matching navigation-lahoda-1's contact-link. */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
}

.footer-lahoda-1__contact-icon {
    display: block;
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.footer-lahoda-1__newsletter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.footer-lahoda-1__input {
    flex: 1;
    min-width: 160px;
    font-family: var(--font-body);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid rgba(251, 246, 236, 0.3);
    background: rgba(251, 246, 236, 0.06);
    color: var(--bg-cream);
    font-size: 13px;
    transition: border-color var(--transition-fast);
}

.footer-lahoda-1__input:focus-visible {
    /* Cream, not --brand-gold-light — a gold-on-gold-dark focus ring only reaches
       ~2.9:1 against this background, under the 3:1 WCAG non-text/UI-component
       minimum. Cream clears it comfortably (~5:1). */
    border-color: var(--bg-cream);
    outline: none;
}

.footer-lahoda-1__submit {
    /* Cream fill, not a brand-colored one — the footer background is now
       --brand-gold-dark (previously --brand-red-dark), and either brand color
       would blend into it. Cream stands out clearly as the CTA regardless of
       which brand color the footer itself is using. */
    font-family: var(--font-body);
    background: var(--bg-cream);
    color: var(--ink);
    border: none;
    border-radius: var(--radius-pill);
    padding: var(--space-3) var(--space-5);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast);
}

.footer-lahoda-1__submit:hover,
.footer-lahoda-1__submit:focus-visible {
    background: var(--brand-gold-light);
}

.footer-lahoda-1__newsletter-message {
    /* Cream, same reasoning as .footer-lahoda-1__heading above. */
    font-size: 12px;
    color: var(--bg-cream);
    margin-top: var(--space-2);
}

.footer-lahoda-1__bottom {
    max-width: var(--content-max-width);
    margin: 0 auto;
    border-top: 1px solid rgba(251, 246, 236, 0.15);
    padding-top: var(--space-5);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

.footer-lahoda-1__legal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-5);
}

.footer-lahoda-1__legal a,
.footer-lahoda-1__list a {
    font-size: 12px;
}

.footer-lahoda-1__copyright {
    /* Was opacity: 0.6 (inherited full cream color) — that faded to ~2.8:1 contrast
       against --brand-red-dark, the worst offender of the readability pass. Full
       opacity, relying on the small 12px size for its "quiet" role instead. */
    font-family: var(--font-body);
    font-size: 12px;
    margin: 0;
}