/* Base styling for blocks any client can use (notice, ticker, feature with fading/background photos).
   Loaded before the theme's own stylesheet, so a theme can restyle any of this. Colours come from the
   site's accent (--accent / --accent-ink, set in Site settings) or the theme's own variables. */
:root { --sb-accent: var(--accent, var(--amber, var(--red, #1a1a1a))); --sb-ink: var(--accent-ink, var(--amber-ink, #fff)); }

/* Notice banner */
.notice-banner { background: var(--sb-accent); color: var(--sb-ink); text-align: center; padding: .85rem 1.5rem; }
.notice-banner p { margin: 0; color: inherit; font-weight: 700; font-size: .95rem; }
.notice-link { color: inherit; margin-left: .8rem; white-space: nowrap; text-decoration: underline; }

/* Ticker */
.ss-ticker { overflow: hidden; border-block: 1px solid rgba(128, 128, 128, .35); padding: .8rem 0; }
.ss-ticker-track { display: flex; width: max-content; animation: sb-scroll 28s linear infinite; }
.ss-ticker span { display: flex; align-items: center; white-space: nowrap; }
.ss-ticker b { font-size: 1.05rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding: 0 1.4rem; }
.ss-ticker i { font-size: .5rem; font-style: normal; color: var(--sb-accent); }
@keyframes sb-scroll { to { transform: translateX(-50%); } }

/* Feature: several photos fading in one frame */
.ft-media.ft-fade { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.ft-media.ft-fade img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; opacity: 0; transition: opacity 2s ease-in-out; }
.ft-media.ft-fade img.was-on { opacity: 1; z-index: 1; }
.ft-media.ft-fade img.is-on { opacity: 1; z-index: 2; }

/* Feature: photos as a full-width background behind the text */
.ft.ft-bg { position: relative; display: flex; align-items: center; min-height: min(70vh, 560px); overflow: hidden; background: #111; }
.ft-bg .ft-media { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; border: 0; box-shadow: none; border-radius: 0; margin: 0; }
.ft-bg .ft-media img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; object-fit: cover; }
.ft-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 10, 10, .88), rgba(10, 10, 10, .45)); }
.ft-bg .ft-inner { position: relative; z-index: 2; width: 100%; max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem; display: block; }
.ft-bg .ft-text { max-width: 600px; }
.ft-bg .ft-text, .ft-bg .ft-text h2, .ft-bg .ft-text p, .ft-bg .ft-text li { color: #fff; }

/* Menu board (basic layout; a theme can restyle) */
.mb { padding: 2.5rem 1.25rem; }
.mb-frame { max-width: 1100px; margin: 0 auto; }
.mb-cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mb-section { position: relative; }
.mb-bg { position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 1rem; border-radius: 6px; }
.mb-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2s ease-in-out; }
.mb-bg img.was-on { opacity: 1; z-index: 1; }
.mb-bg img.is-on { opacity: 1; z-index: 2; }
.mb-bw .mb-bg img { filter: grayscale(1); }
.mb-section ul { list-style: none; padding: 0; margin: 0; }
.mb-section li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; padding: .35rem 0; border-bottom: 1px dotted rgba(128, 128, 128, .4); }
.mb-name { font-weight: 700; }
.mb-dots { flex: 1; }
.mb-sub { flex-basis: 100%; font-size: .9em; opacity: .8; }
.mb-note { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-accent); }

@media (prefers-reduced-motion: reduce) {
    .ss-ticker-track { animation: none; }
    .ft-media.ft-fade img, .mb-bg img { transition: none; }
}