/* Stage 0b placeholder only — real design tokens land with the Stage 1a admin UI (see DECISIONS.md D04). */
body {
    font-family: system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 2rem;
}

/* Stage 3b.2 — minimal functional (not final-design) styling for the DB-driven primary/footer nav,
   matching this file's pre-existing placeholder-styling convention; the public site's real visual
   design is a separate, later stage. Logical properties throughout for correct RTL under dir="rtl". */
.site-header {
    padding-inline: 2rem;
    padding-block: 0.75rem;
    border-block-end: 1px solid #ddd;
    margin-inline: -2rem;
    margin-block-start: -2rem;
    margin-block-end: 1.5rem;
}

.site-nav__list,
.site-footer__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin: 0;
    padding: 0;
}

.site-nav__item {
    position: relative;
}

.site-nav__link {
    text-decoration: none;
    color: inherit;
    font-weight: 600;
}

.site-nav__link:hover {
    text-decoration: underline;
}

.site-nav__link--unresolved {
    color: #888;
    font-weight: 400;
    cursor: default;
}

.site-nav__submenu {
    list-style: none;
    margin: 0.4rem 0 0;
    padding-inline-start: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.site-footer {
    padding-inline: 2rem;
    padding-block: 1.25rem;
    border-block-start: 1px solid #ddd;
    margin-inline: -2rem;
    margin-block-end: -2rem;
    margin-block-start: 2rem;
}

.site-footer__list {
    font-size: 0.9rem;
    color: #555;
}

/* Stage 2a.5 — minimal functional (not final-design) styling so the homepage Slider/Scroller and
   Gallery/Video pages aren't visually broken; the public site's real design is out of this stage's
   scope, matching the pre-existing plain placeholder style of this file. */
.home-slider {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    margin-block-end: 1.5rem;
}

.home-slider__slide img {
    max-inline-size: 100%;
    block-size: 320px;
    object-fit: cover;
    display: block;
}

.home-scroller {
    display: flex;
    overflow-x: auto;
    gap: 0.5rem;
    margin-block-start: 1.5rem;
}

.home-scroller__item img {
    block-size: 100px;
    object-fit: cover;
    display: block;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.gallery img {
    inline-size: 100%;
    block-size: 160px;
    object-fit: cover;
    display: block;
}

.video-gallery__item iframe,
.video-gallery__item video {
    inline-size: 100%;
    max-inline-size: 640px;
    block-size: 360px;
}

/* Stage 3a.3 — minimal functional (not final-design) styling for the 9 contact-form pages, matching
   this file's pre-existing placeholder-styling convention; the public site's real visual design is a
   separate, later stage. Logical properties throughout (inline-size/block-size/margin-inline etc.),
   matching this codebase's CSS standard. */
.contact-page {
    max-inline-size: 640px;
    margin-inline: auto;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block-start: 1.5rem;
}

.contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.contact-form__field label {
    font-weight: 600;
}

.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
    padding: 0.6rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font: inherit;
    inline-size: 100%;
    box-sizing: border-box;
}

.contact-form__field textarea {
    resize: vertical;
}

/* Honeypot field — visually hidden (not display:none/type=hidden, which some bots specifically
   skip) and never keyboard/tab-reachable by a real visitor. */
.contact-form__honeypot {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.contact-form__submit {
    align-self: flex-start;
    padding: 0.7rem 1.5rem;
    border: none;
    border-radius: 4px;
    background-color: #c8102e;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.contact-form__submit:hover {
    background-color: #a50d26;
}

.contact-form__banner {
    padding: 0.85rem 1rem;
    border-radius: 4px;
    margin-block-end: 1rem;
}

.contact-form__banner--success {
    background-color: #e6f4ea;
    color: #1e4620;
    border: 1px solid #b7dfbd;
}

.contact-form__banner--error {
    background-color: #fdecea;
    color: #611a15;
    border: 1px solid #f5c6c3;
}