/* Status uses text as well as colour; no flashing or animated dots. */
:root { --site-header-height: 120px; }
.header { padding-bottom: 0; }
.opening-header {
    display: flex;
    justify-content: flex-end;
    padding: 8px 0;
    margin-top: 10px;
    border-top: 1px solid #ececf0;
}
.opening-badge {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 8px;
    color: #484854;
    font-size: .8rem;
    line-height: 1.5;
    border-radius: 5px;
}
.opening-badge [data-opening-title] { font-weight: 700; }
.opening-short { color: #525260; }
.opening-dot { width: 8px; height: 8px; border-radius: 50%; background: #73737f; flex-shrink: 0; display: inline-block; }
[data-state="open"] { --status-ink: #21623b; --status-bg: #edf6ef; --status-border: #cce2d1; }
[data-state="closing"] { --status-ink: #805100; --status-bg: #fff7e8; --status-border: #ecd7ae; }
[data-state="closed"] { --status-ink: #963b3b; --status-bg: #fcf0f0; --status-border: #edcece; }
[data-state] .opening-dot { background: var(--status-ink); }
.opening-badge[data-state] [data-opening-title] { color: var(--status-ink); }
.opening-card {
    padding: 14px 16px;
    margin: 12px 0;
    border: 1px solid var(--status-border, #dedee4);
    border-radius: 10px;
    background: var(--status-bg, #f6f6f8);
}
.contact-item .opening-card p { color: var(--status-ink, #34343f); font-size: .9rem; }
.opening-card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px !important; }
.opening-week { list-style: none; margin: 12px 0; padding: 0; }
.opening-week li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 8px; border-radius: 5px; font-size: .88rem; }
.opening-week li span:last-child { text-align: right; }
.opening-week .is-today { background: #f2f2f5; color: #1a1a2e; font-weight: 700; }
.contact-item .opening-note, .contact-item .opening-demo-note { font-size: .76rem; line-height: 1.5; color: #62626d; }
.opening-demo-note { margin-top: 8px !important; }
.opening-card[hidden], .opening-week[hidden], [data-opening-note][hidden], [data-opening-demo][hidden], [data-opening-fallback][hidden] { display: none; }
.footer-hours-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    margin-bottom: 2px;
}
.footer-opening-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--status-ink);
    font-size: .78rem;
    font-weight: 700;
    white-space: nowrap;
}
.footer-opening-status[data-state="open"] { --status-ink: #8be0aa; }
.footer-opening-status[data-state="closing"] { --status-ink: #f4c96a; }
.footer-opening-status[data-state="closed"] { --status-ink: #ff9b9b; }
.footer-opening-status[hidden] { display: none; }
.hero { padding-top: calc(var(--site-header-height) + 32px); }
section[id], #opening-hours { scroll-margin-top: calc(var(--site-header-height) + 20px); }
@media (max-width: 968px) {
    .nav-menu { top: var(--site-header-height); }
    .opening-header { justify-content: center; }
}
@media (max-width: 768px) {
    .footer-hours-heading { justify-content: center; }
}
@media (max-width: 400px) {
    .opening-badge { font-size: .73rem; gap: 3px 6px; }
    .opening-week li { padding-left: 0; padding-right: 0; }
    .opening-card { padding: 12px; }
}
/* Separate, local test launcher; these styles do not change the homepage. */
.opening-test-page { font-family: Arial, sans-serif; margin: 0; background: #f6f6f8; color: #1a1a2e; line-height: 1.6; }
.opening-test-main { max-width: 760px; margin: 40px auto; padding: 24px; }
.opening-test-main h1 { line-height: 1.2; }
.opening-test-options { display: grid; gap: 12px; margin: 24px 0; }
.opening-test-options a { background: white; border: 1px solid #ddd; border-left: 4px solid #ce1317; border-radius: 8px; padding: 16px 20px; color: #1a1a2e; text-decoration: none; }
.opening-test-options a:hover { border-color: #ce1317; }
.opening-test-options a:focus-visible { outline: 3px solid #0b57d0; outline-offset: 3px; }
.opening-test-options strong, .opening-test-options span { display: block; }
.opening-test-options span { color: #595963; font-size: .9rem; }