/* ==========================================================================
   AIMS Media — shared stylesheet
   Design system: "AIMS Media Broadcast Modernism" (DESIGN.md at the project root).
   Tailwind tokens live once in wwwroot/index.html (generated from DESIGN.md); this file adds
   the raw CSS variables plus the few behaviours utility classes can't express
   (active nav underline, mobile safe areas, scroll chips, brand gradient, motion).
   ========================================================================== */

:root {
    --color-surface: #fbf9f8;
    --color-surface-dim: #dbdad9;
    --color-surface-bright: #fbf9f8;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f5f3f3;
    --color-surface-container: #efeded;
    --color-surface-container-high: #e9e8e7;
    --color-surface-container-highest: #e3e2e2;
    --color-on-surface: #1b1c1c;
    --color-on-surface-variant: #444939;
    --color-inverse-surface: #303030;
    --color-inverse-on-surface: #f2f0f0;
    --color-outline: #747968;
    --color-outline-variant: #c4c9b5;
    --color-surface-tint: #496800;
    --color-primary: #364e00;
    --color-on-primary: #ffffff;
    --color-primary-container: #496800;
    --color-on-primary-container: #c0e678;
    --color-inverse-primary: #aed367;
    --color-secondary: #715d00;
    --color-on-secondary: #ffffff;
    --color-secondary-container: #fde17e;
    --color-on-secondary-container: #776307;
    --color-tertiary: #364e00;
    --color-on-tertiary: #ffffff;
    --color-tertiary-container: #496800;
    --color-on-tertiary-container: #b6ea4f;
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    --color-primary-fixed: #c9f080;
    --color-primary-fixed-dim: #aed367;
    --color-on-primary-fixed: #131f00;
    --color-on-primary-fixed-variant: #364e00;
    --color-secondary-fixed: #fde17e;
    --color-secondary-fixed-dim: #e0c566;
    --color-on-secondary-fixed: #221b00;
    --color-on-secondary-fixed-variant: #554500;
    --color-tertiary-fixed: #bff458;
    --color-tertiary-fixed-dim: #a4d73d;
    --color-on-tertiary-fixed: #131f00;
    --color-on-tertiary-fixed-variant: #364e00;
    --color-background: #fbf9f8;
    --color-on-background: #1b1c1c;
    --color-surface-variant: #e3e2e2;

    /* Typography: Merriweather for editorial headings, Roboto for everything else.
       Tailwind's font-* tokens (index.html) and the CSS below all read these. */
    --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --gradient-brand: linear-gradient(45deg, #8DBE24, #F9CF00);   /* signature media gradient */
    --shadow-overlay: 0 16px 32px -8px rgba(27, 28, 28, 0.06), 0 4px 12px -2px rgba(27, 28, 28, 0.03);
    --header-height: 5rem;
    --bottom-bar-height: 4rem;
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1rem); }
body { background-color: var(--color-surface); font-family: var(--font-sans); overscroll-behavior-y: none; }
::selection { background: #8DBE24; color: #131f00; }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    font-size: 1.5rem; line-height: 1; user-select: none;
}
.material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Signature media gradient (hero accents, showcase buttons, milestone banners) */
.brand-gradient { background-image: var(--gradient-brand); }

/* ---------- Header / nav ---------- */
#site-header { transition: box-shadow .25s ease, background-color .25s ease; }
#site-header.is-scrolled { box-shadow: 0 2px 12px rgba(27, 28, 28, 0.08); background-color: rgba(255, 255, 255, 0.92); }

.nav-link { position: relative; color: var(--color-on-surface-variant); padding: .5rem 0; transition: color .2s ease; }
.nav-link:hover { color: var(--color-on-surface); }
.nav-link.active { color: var(--color-primary); font-weight: 600; border-bottom: 2px solid var(--color-primary-fixed-dim); padding-bottom: .25rem; }

.mobile-nav-link { display: flex; align-items: center; justify-content: space-between; min-height: 3.25rem; padding: 0 .25rem;
    border-bottom: 1px solid #E0E0E0; color: var(--color-on-surface); font-family: var(--font-sans); font-weight: 600; }
.mobile-nav-link.active { color: var(--color-primary); }
.mobile-nav-link.active .mobile-nav-dot { background: var(--color-primary-fixed-dim); }
.mobile-nav-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: transparent; }

/* ---------- Mobile ---------- */
/* Space for the fixed bottom action bar (shown below the lg breakpoint) */
@media (max-width: 1023.98px) {
    body { padding-bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom, 0px)); }
}
.bottom-bar { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Horizontally scrollable chip rows on small screens (filters) */
.chip-row { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row > * { flex: 0 0 auto; scroll-snap-align: start; }
@media (min-width: 768px) { .chip-row { flex-wrap: wrap; overflow: visible; } }

/* Prevent iOS zoom-on-focus: inputs must be >= 16px on touch screens */
@media (max-width: 767.98px) { input, select, textarea { font-size: 16px !important; } }

/* ---------- Decorative ---------- */
.dot-grid { background-image: radial-gradient(#c4c9b5 1px, transparent 1px); background-size: 24px 24px; }
.dot-grid-dark { background-image: radial-gradient(#c9f080 1px, transparent 1px); background-size: 32px 32px; }
.line-grid { background-image: linear-gradient(to right, #ffffff 1px, transparent 1px), linear-gradient(to bottom, #ffffff 1px, transparent 1px); background-size: 40px 40px; }

/* Gallery */
.masonry-grid { column-count: 1; column-gap: 1.5rem; }
@media (min-width: 640px) { .masonry-grid { column-count: 2; } }
@media (min-width: 1024px) { .masonry-grid { column-count: 3; } }
.masonry-item { break-inside: avoid; margin-bottom: 1.5rem; }
.gallery-overlay { background: linear-gradient(to top, rgba(27, 28, 28, 0.85) 0%, rgba(27, 28, 28, 0) 100%); }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.animate-fadeIn { animation: fadeIn .35s ease both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Blazor error UI ---------- */
#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; padding: .75rem 1.25rem;
    background: var(--color-secondary-container); color: var(--color-on-secondary-container); font-size: .875rem; box-shadow: 0 -2px 8px rgba(0,0,0,.1); }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }