/* =====================================================
   BASE.CSS
   Global layout, navigation, components, utilities
   ===================================================== */


/* =====================================================
   1. CSS VARIABLES
   ===================================================== */

:root {
    --bg: #0b0b0b;
    --panel: rgba(255,255,255,0.02);
    --card-bg: rgba(255,255,255,0.03);
    --card-hover: rgba(255,255,255,0.06);
    --text: #ffffff;
    --muted: #aaa;
    --muted2: #cfcfcf;
    --line: #222;
    --glass: rgba(0,0,0,0.75);
    --accent: #d60000;
    --accent-2: #2f7dff;
    --gold: #b99757;
    --radius: 14px;
    --radius-lg: 20px;
    --max: 1300px;
}

.nav-icon {
    width: 15px;
    height: 15px;
    fill: currentColor;
    flex-shrink: 0;
    transition: fill .2s ease;
}

/* =====================================================
   2. RESET / GLOBAL ELEMENTS
   ===================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Present for screen readers, absent on screen.
   IT WAS ONLY EVER DEFINED IN admin.css, which no public page loads, so
   every public use of the class did nothing and the "hidden" label sat
   on screen. The vote form carried four of them. 404.asp shows what
   that costs: it uses the class AND repeats this whole rule inline,
   which is what somebody does after discovering the class is inert.
   Defined here so the next person to reach for it gets what the name
   promises.
   clip rather than display:none or visibility:hidden - both of those
   remove the element from the accessibility tree as well, which defeats
   the entire purpose. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

html, body {
    font-family: 'Segoe UI', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    display: block;
}


/* =====================================================
   3. HEADER + NAVIGATION
   ===================================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    backdrop-filter: blur(18px);
    background: linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.65));
    border-bottom: 1px solid rgba(255,255,255,.06);
}

    /* Creates an invisible strip that keeps hover "alive" while moving down */
    .site-header::after {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: 72px; /* same as .mega-menu top */
        height: 14px; /* adjust 10�20px */
        z-index: 2099; /* just under the mega menu (2100) */
        background: transparent;
        pointer-events: auto;
    }

.nav-inner {
    position: relative;
    padding: 18px 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    max-width: none;
    width: 100%;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-film-icon {
    height: 36px;
    width: auto;
    object-fit: contain;
}

.logo-main {
    height: 32px;
    width: auto;
    object-fit: contain;
}

/* Nav links */
nav a {
    color: #ccc;
    font-size: 14px;
    transition: color .15s ease;
}

    nav a:hover {
        color: #fff;
    }

/* #5 - Keyboard focus styles (accessibility) */
:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 3px;
    border-radius: 4px;
}

.btn:focus-visible,
.film-card:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 3px;
}

.nav-link:focus-visible,
.nav-trigger:focus-visible,
.nav-cta:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 4px;
    border-radius: 4px;
}

.primary-nav {
    position: static;
    display: flex;
    align-items: center;
    gap: 24px;
}
    .primary-nav > * {
        position: relative;
    }

    /* Make both <a> and .has-mega behave the same */
    .primary-nav > a,
    .primary-nav > .has-mega {
        display: inline-flex;
        align-items: center;
        height: auto;
        padding: 6px 0;
    }

.nav-link {
    font-weight: 500;
}

    .nav-link:hover,
    .nav-trigger:hover {
        color: #fff;
    }

.nav-trigger {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: #cfcfcf;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    align-items: center;
}

/* =================================
   Animated gradient nav underline
================================= */

    /* underline element */
    .nav-link::after,
    .nav-trigger::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient( 90deg, #ff004c, #ff8a00, #ffd500, #2f7dff, #7c3cff );
        background-size: 300% 100%;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .28s ease;
        opacity: 0.9;
    }

    /* animate underline */
    .nav-link:hover::after,
    .nav-trigger:hover::after,
    .nav-link.active::after {
        transform: scaleX(1);
    }

    /* animated gradient movement */
    .nav-link:hover::after,
    .nav-trigger:hover::after {
        animation: navGradientMove 2s linear infinite;
    }

@keyframes navGradientMove {
    from {
        background-position: 0% 0;
    }

    to {
        background-position: 200% 0;
    }
}

/* Donate CTA link */
.nav-cta {
    font-weight: 700;
    font-size: 14px;
    color: var(--gold);
    transition: color .15s ease;
}

    .nav-cta:hover {
        color: #fff;
    }


/* ================================
   MEGA MENU
================================ */

.mega-nav {
    position: relative;
}

.has-mega {
    position: relative;
}

.mega-menu {
    position: fixed;
    left: 0;
    right: 0;
    top: 72px; /* keep your header offset */
    width: auto; /* important: don't use 100vw */

    background: rgba(10,10,10,.92);
    backdrop-filter: blur(28px);
    border-top: 1px solid rgba(255,255,255,.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index: 2100;
}

.has-mega.active .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
    transform: translateY(0);
}

.mega-grid {
    max-width: 1300px;
    margin: 0 auto;
    padding: 20px 60px; /* matches your screenshot spacing */

    display: grid;
    grid-template-columns: 1fr 1fr 420px; /* right feature card width */
    gap: 80px;
    align-items: start;
}

.mega-section a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: #dcdcdc;
    margin-bottom: 8px;
    transition: all .25s ease;
}

    .mega-section a:hover {
        color: #fff;
        transform: translateX(4px);
    }

.mega-section i {
    width: 18px;
    text-align: center;
    color: #777;
    font-size: 14px;
    transition: color .2s ease;
}

.mega-section a:hover i {
    color: #fff;
}

.mega-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    color: #888;
    font-weight: 900;
    display: block;
    margin-bottom: 10px;
}

/* Two labelled groups sharing one grid column.
   .mega-grid is "1fr 1fr 420px" - exactly three columns, so exactly
   three direct children. A fourth wraps onto an implicit second row
   under the first column and shoves the feature card down the page,
   which is what made the Make a Film menu look broken. Grouping the
   two shorter sections keeps the child count at three. */
.mega-stack {
    display: grid;
    gap: 26px;
    align-content: start;
}

.mega-feature {
    border-radius: 10px;
    padding: 26px;
    background: radial-gradient(600px 200px at 20% 20%, rgba(47,125,255,.18), transparent 60%), radial-gradient(600px 200px at 80% 80%, rgba(214,0,0,.18), transparent 60%), rgba(25,25,25,.95);
    border: 1px solid rgba(255,255,255,.08);
}

    .mega-feature h3 {
        font-size: 22px;
        margin: 14px 0;
        font-weight: 900;
    }

    .mega-feature p {
        font-size: 14px;
        color: #aaa;
        line-height: 1.6;
        margin-bottom: 20px;
    }


/* =====================================================
   5. SEARCH
   ===================================================== */

.nav-search {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 22px;
}

    .nav-search svg {
        position: absolute;
        left: 10px;
        width: 16px;
        height: 16px;
        transform: translateY(50%);
        opacity: .7;
        pointer-events: none;
    }
    .nav-search form {
        position: relative;
        width: 100%;
        margin: 0;
    }

.nav-search-input {
    width: 150px;
    padding: 8px 14px 8px 34px;
    font-size: 13px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.06);
    color: #fff;
    outline: none;
    transition: all .2s ease;
}

    .nav-search-input::placeholder {
        color: #666;
    }

    .nav-search-input:focus {
        width: 240px;
        border-color: rgba(255,255,255,0.25);
        background: rgba(255,255,255,0.10);
    }

.search-dropdown {
    display: none;
    position: absolute;
    top: 110%;
    right: 0;
    width: 420px;
    max-height: 450px;
    overflow-y: auto;
    background: rgba(20,20,20,0.98);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    z-index: 9999;
}
.search-result-title {
	font-weight:bold;
}
.search-result-item {
    display: flex;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .search-result-item:hover {
        background: rgba(255,255,255,0.08);
    }

    .search-result-item img {
        width: 110px;
        height: 62px;
        object-fit: cover;
        border-radius: 6px;
    }

/* =====================================================
   6. BUTTONS
   ===================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    color: #eee;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .6px;
    text-transform: uppercase;
    transition: transform .22s cubic-bezier(.16,1,.3,1), background .2s ease, border-color .2s ease;
}

    .btn:hover {
        transform: translateY(-2px);
        background: rgba(255,255,255,0.10);
        border-color: rgba(255,255,255,0.18);
    }

    .btn.primary {
        background: linear-gradient(135deg, rgba(214,0,0,0.96), rgba(161,0,0,0.96));
        border-color: rgba(214,0,0,0.45);
        color: #fff;
    }

    .btn.secondary {
        background: linear-gradient(135deg, rgba(47,125,255,0.94), rgba(31,94,214,0.94));
        border-color: rgba(47,125,255,0.42);
        color: #fff;
    }

    .btn.donate {
        background: linear-gradient(135deg, #d60000, #9f0000);
        border-color: rgba(214,0,0,0.6);
        color: #fff;
        padding: 16px 26px;
    }


/* =====================================================
   7. FILM CARDS
   ===================================================== */

.card-body {
    padding: 16px;
}

.card-meta {
    color: var(--muted);
    font-size: 13px;
}

.year-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: black;
    padding: 4px 8px;
    border-radius: 6px;
}

/* Touch targets: Lighthouse fails any interactive element under 24x24.
   Element+class selectors (0,1,1) so these beat the bare .badge-*
   rules in components.css regardless of sheet order, and only apply
   when the badge is actually a link - the film-card versions are
   non-interactive <span>s and are left alone.
   NOTE: film.js renders card badges as spans; search.asp and any other
   card renderer should do the same, because a badge link stacked on
   top of a card-wide link is both a Lighthouse failure and a mis-tap
   magnet on mobile. */
a.year-badge,
a.badge-winner,
a.badge-rated {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    min-width: 24px;
    box-sizing: border-box;
}

/* Pill / badge shared components */
.meta-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.category-pill {
    background: rgba(255,215,0,0.15);
    color: #ffd700;
}

.flag-pill {
    padding: 3px 6px;
}

    /* A FIXED BOX, NOT height:auto. flagcdn serves each flag at its own
       ratio - Australia comes back 40x20, Switzerland 40x40, Nepal
       40x49 - so with height:auto the browser reserved nothing until
       each one loaded and every card twitched. A width/height pair on
       the tag cannot fix it either: one hardcoded ratio would be wrong
       for a tenth of the flags and shift them the other way.
       object-fit:contain letterboxes the odd ones inside a deterministic
       box instead of distorting them, and at 20px wide that is
       invisible. */
    .flag-pill img {
        width: 20px;
        height: 14px;
        object-fit: contain;
        border-radius: 3px;
    }

.flag-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    backdrop-filter: blur(8px);
    padding: 4px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    z-index: 2;
}

    .flag-badge img {
        width: 20px;
        height: 14px;
        border-radius: 2px;
        object-fit: cover;
    }

/* =====================================================
   8. BLOG / POST CARDS
   ===================================================== */

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding-bottom: 12px;
}

.post-card {
    display: block;
    background: var(--card-bg);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: var(--radius);
    overflow: visible;
    transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

    .post-card:hover {
        background: var(--card-hover);
        border-color: rgba(255,255,255,0.08);
        transform: translateY(-2px);
    }

.post-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
}

    .post-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .95;
        transition: transform .35s ease, opacity .35s ease;
    }

.post-card:hover .post-thumb img {
    transform: scale(1.06);
    opacity: 1;
}

.post-body {
    padding: 16px 18px 18px;
}

.post-title {
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-excerpt {
    color: #9a9a9a;
    font-size: 13.5px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}


/* =====================================================
   9. FOOTER
   ===================================================== */

.footer-top {
    display: grid;
    grid-template-columns: 1.2fr 1fr 0.9fr;
    gap: 52px;
    padding-bottom: 44px;
}

.footer-brand-name {
    font-size: 20px;
    font-weight: 950;
    color: #fff;
    letter-spacing: -0.3px;
    margin: 0 0 14px 0;
}

.footer-brand p {
    color: #c7c7c7;
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 8px 0;
}

.footer-brand a {
    color: var(--accent-2);
    font-weight: 800;
}

.footer-col-label {
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #f2f2f2;
    margin: 0 0 18px 0;
}

.footer-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
}

    .footer-links-grid a {
        display: block;
        color: #c7c7c7;
        font-size: 14px;
        padding: 6px 0;
        transition: color .15s ease;
    }

        .footer-links-grid a:hover {
            color: #fff;
        }

.footer-contact-row {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
    color: #c7c7c7;
    font-size: 14px;
    line-height: 1.6;
    align-items: flex-start;
}

.fc-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 3px;
    opacity: .45;
}

    .fc-icon svg {
        width: 16px;
        height: 16px;
        fill: none;
        stroke: #fff;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .footer-bottom p {
        margin: 0;
        font-size: 12.5px;
        color: #b8b8b8;
    }

.footer-bottom-links {
    display: flex;
    gap: 20px;
}

    .footer-bottom-links a {
        color: #b8b8b8;
        font-size: 12.5px;
        transition: color .15s ease;
    }

        .footer-bottom-links a:hover {
            color: #fff;
        }


/* =====================================================
   10. UTILITIES & ANIMATIONS
   ===================================================== */

.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}

    .reveal.reveal-visible {
        opacity: 1;
        transform: translateY(0);
    }

.reveal-left {
    transform: translateX(-60px);
}

.reveal-right {
    transform: translateX(60px);
}

    .reveal-left.reveal-visible,
    .reveal-right.reveal-visible {
        transform: translateX(0);
    }

.stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s ease, transform .7s ease;
}

.stagger.reveal-visible > * {
    opacity: 1;
    transform: translateY(0);
}

    .stagger.reveal-visible > *:nth-child(1) {
        transition-delay: .05s;
    }

    .stagger.reveal-visible > *:nth-child(2) {
        transition-delay: .12s;
    }

    .stagger.reveal-visible > *:nth-child(3) {
        transition-delay: .19s;
    }

    .stagger.reveal-visible > *:nth-child(4) {
        transition-delay: .26s;
    }

    .stagger.reveal-visible > *:nth-child(5) {
        transition-delay: .33s;
    }

@media (prefers-reduced-motion: reduce) {
    .sponsors-track {
        animation: none !important;
    }

    .btn, .film-card, .post-card, .film-thumb img, .post-thumb img {
        transition: none !important;
    }

    .reveal,
    .stagger > * {
        opacity: 1 !important;
        transform: none !important;
    }
}

.main-hero {
    min-height: 52vh;
    display: flex;
    align-items: flex-end;
    padding: 0 60px 30px;
}

.main-hero-content {
    max-width: 820px;
    padding-top: 110px;
}

/* text-shadow, because the scrim in RenderHero is no longer a blanket.
   It is now weighted to the bottom of the hero so the photograph above
   is actually visible, which means the scrim alone can no longer be the
   only thing guaranteeing contrast. A soft shadow costs nothing, is
   invisible over the dark band, and keeps both lines legible if a page
   is ever given a hero image that is bright at the foot. */
.main-hero h1 {
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -0.6px;
    margin-bottom: 12px;
    line-height: 1.1;
    text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}

.main-hero p {
    font-size: 18px;
    line-height: 1.7;
    color: #cfcfcf;
    max-width: 740px;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* ===================== SECTION ===================== */
.main-section {
    position: relative;
    padding: 72px 60px 60px;
}

    .main-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient( circle at 50% 0%, rgba(185,151,87,0.06) 0%, rgba(185,151,87,0.025) 40%, transparent 75% );
        pointer-events: none;
        z-index: 0;
    }

.main-container {
    max-width: 1260px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}


/* =====================================================
   MOBILE SLIDE NAV
   ===================================================== */

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1001;
}

    .mobile-menu-toggle span {
        width: 26px;
        height: 2px;
        background: white;
        display: block;
    }


/* ========================================
   LAPTOP NAV
   ========================================
   There was no header breakpoint between 900px and infinity, so the
   full desktop bar had to fit whatever was left. Two things broke:

   1. 901-1100px: logo (~290px) + nav text (~225px) + gaps (~96px) +
      search (150px, 240px focused) + 120px of padding needs ~940px
      before any slack. Below that the search box ran off the right
      edge and html{overflow-x:hidden} silently clipped it - no wrap,
      no scrollbar, just gone.

   2. .mega-grid is 1fr 1fr 420px with 80px gaps and 60px padding, so
      it needs ~1150px minimum. On a 1024px laptop or an iPad in
      landscape the 420px feature card was pushed off-screen and
      clipped by the same overflow rule.

   Fixed by tightening progressively rather than jumping straight to
   the mobile drawer, which would have cost the desktop nav on every
   small laptop.
   ======================================== */

/* Feature card is promotional, not navigation - it is the first thing
   to go when the panel cannot fit. */
@media (max-width: 1200px) {
    .mega-grid {
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        padding: 20px 40px;
    }

    .mega-feature {
        display: none;
    }
}

/* minmax(0,1fr) matters: a bare 1fr refuses to shrink below its
   content's intrinsic width, which is what let the grid overflow
   rather than compress. */
/* min-width guard on both blocks below: without it these rules leak
   past 900px into the slide-out drawer, where they are wrong - the
   drawer has room for the full wordmark and a wider search field. */
@media (max-width: 1040px) and (min-width: 901px) {
    .nav-inner {
        padding: 18px 28px;
    }

    .primary-nav {
        gap: 16px;
    }

    .logo-main {
        height: 26px;
    }

    .nav-search {
        margin-left: 12px;
    }

    .nav-search-input {
        width: 118px;
    }

    .nav-search-input:focus {
        width: 190px;
    }

    .mega-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 32px;
        padding: 20px 28px;
    }

    .mega-section a {
        font-size: 15px;
    }
}

/* Last stop before the drawer takes over at 900px. The wordmark goes;
   the film-reel icon carries the brand. */
@media (max-width: 960px) and (min-width: 901px) {
    .logo-main {
        display: none;
    }

    .primary-nav {
        gap: 12px;
    }

    .nav-search-input {
        width: 100px;
    }
}


/* ========================================
   MOBILE NAV PANEL
   ======================================== */

@media (max-width: 900px) {

    .mobile-menu-toggle {
        display: flex;
    }


    /* slide panel */

    .primary-nav {
        position: fixed;
        top: 0;
        left: -320px;
        width: 320px;
        height: 100vh;
        background: #0b0b0b;
        flex-direction: column;
        padding: 90px 25px 40px;
        transition: left .35s ease;
        z-index: 1000;
        overflow-y: auto;
    }


        /* open state */

        .primary-nav.open {
            left: 0;
        }


    /* overlay */

    body.nav-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 900;
    }


    /* links */

    .primary-nav a,
    .nav-trigger {
        display: block;
        padding: 14px 0;
        font-size: 18px;
    }


    /* hide mega panels */

    .mega-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        padding-left: 10px;
    }


    /* accordion open */

    .has-mega.open .mega-menu {
        display: block;
    }


    /* remove grid */

    .mega-grid {
        display: block;
    }

    .mega-feature {
        margin-top: 15px;
    }


    /* search */

    .nav-search {
        margin-top: 20px;
    }
}

.keyboard-selected {
    outline: 3px solid #f5c518;
    transform: scale(1.02);
    z-index: 5;
}

.search-result-item.keyboard-selected {
    background: rgba(212,175,55,0.12);
    outline: 2px solid #d4af37;
}




/* =========================================================
   FOOTER HERO
========================================================= */
.footer-hero {
    background: linear-gradient(90deg, #111, #1a1405);
    border-top: 1px solid rgba(255,215,0,0.2);
    border-bottom: 1px solid rgba(255,215,0,0.15);
    padding: 40px 0;
}

.footer-hero-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-hero-text h3 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 8px;
}

.footer-hero-text p {
    color: #bbb;
    font-size: 14px;
}

.footer-hero-text strong {
    color: #d4af37;
}


/* =========================================================
   BUTTONS
========================================================= */
.btn-primary {
    background: linear-gradient(135deg, #d4af37, #b8962e);
    color: #000;
    padding: 10px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    margin-right: 10px;
}

.btn-secondary {
    border: 1px solid rgba(255,255,255,0.2);
    padding: 10px 18px;
    border-radius: 6px;
    color: #fff;
    text-decoration: none;
}


/* =========================================================
   FOOTER BASE
========================================================= */
.site-footer {
    margin-top: 40px;
    position: relative;
    overflow: hidden;
    background: #0a0a0a;
    color: #c7c7c7;
    padding: 60px 0 30px;
    font-size: 14px;
    border-top: 2px solid rgba(212,175,55,0.4);
    animation: fadeIn 0.6s ease-in;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* =========================================================
   GRID LAYOUT
========================================================= */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 40px;
    row-gap: 50px;
}

.footer-col {
    min-width: 160px;
    opacity: 0;
    transform: translateY(15px);
    animation: fadeUp 0.6s ease forwards;
    transition: transform 0.25s ease;
}

    .footer-col:hover {
        transform: translateY(-3px);
    }


    /* stagger animation */
    .footer-col:nth-child(1) {
        animation-delay: 0.05s;
    }

    .footer-col:nth-child(2) {
        animation-delay: 0.1s;
    }

    .footer-col:nth-child(3) {
        animation-delay: 0.15s;
    }

    .footer-col:nth-child(4) {
        animation-delay: 0.2s;
    }

    .footer-col:nth-child(5) {
        animation-delay: 0.25s;
    }

    .footer-col:nth-child(6) {
        animation-delay: 0.3s;
    }

    .footer-col:nth-child(7) {
        animation-delay: 0.35s;
    }


    /* =========================================================
   TYPOGRAPHY & LINKS
========================================================= */
    .footer-col h5 {
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
    }

    .footer-col p {
        font-size: 13px;
        line-height: 1.6;
    }

    .footer-col ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .footer-col ul li {
            margin-bottom: 8px;
        }

    .footer-col a {
        color: #c7c7c7;
        text-decoration: none;
        font-size: 13px;
        position: relative;
    }

/* ---- Floating donate button -----------------------------------------
   Emitted by includes/layout_bottom.asp on every page except the donate
   pages themselves.

   It used to live in film.css with its markup in film.asp, so it showed
   on film pages only. Moved here because base.css is the one stylesheet
   every page loads.

   z-index 1200 sits under the header (2000) and the mega menu (2100),
   so it never covers navigation, and above ordinary content. */
.floating-donate {
    position: fixed;
    right: 22px;
    bottom: 22px;
    background: var(--accent, #d60000);
    color: #fff;
    padding: 13px 20px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    z-index: 1200;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.floating-donate:hover,
.floating-donate:focus-visible {
    transform: translateY(-4px) scale(1.08);
    box-shadow: 0 18px 40px rgba(214,0,0,0.4);
    background: #b30000;
}

/* Out of the way of a thumb on a small screen, where it sits over the
   content rather than beside it. */
@media (max-width: 600px) {
    .floating-donate {
        right: 14px;
        bottom: 14px;
        padding: 11px 16px;
        font-size: 13px;
    }
}

    /* Donate is the only link in this column asking for something rather
       than offering something, and the footer is now the only place it
       appears on most of the site. Given the festival's gold so it reads
       as an action without being a button in a list of links. */
    .footer-col a.footer-donate {
        color: #d4af37;
        font-weight: 700;
    }

    .footer-col a.footer-donate:hover,
    .footer-col a.footer-donate:focus-visible {
        color: #f0cf6a;
    }

        /* premium underline */
        .footer-col a::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -2px;
            height: 1px;
            width: 0;
            background: linear-gradient(90deg, transparent, #d4af37, transparent);
            transition: width 0.4s ease;
        }

        .footer-col a:hover {
            color: #fff;
        }

            .footer-col a:hover::after {
                width: 100%;
            }


/* =========================================================
   SOCIAL BUTTONS (PREMIUM)
========================================================= */
.footer-social {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.social-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #ccc;
    transition: all 0.25s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

    /* glow ripple */
    .social-btn::after {
        content: "";
        position: absolute;
        width: 120%;
        height: 120%;
        background: radial-gradient(circle, rgba(212,175,55,0.3) 0%, transparent 70%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.4s ease;
    }

    .social-btn:hover::after {
        transform: translate(-50%, -50%) scale(1);
    }

    .social-btn:hover {
        background: rgba(212,175,55,0.12);
        border-color: rgba(212,175,55,0.5);
        color: #d4af37;
        transform: translateY(-2px);
    }

    .social-btn:active {
        transform: translateY(0);
    }

    /* brand hover colours */
    .social-btn:nth-child(1):hover {
        color: #1877f2;
    }

    .social-btn:nth-child(2):hover {
        color: #ff0000;
    }

    .social-btn:nth-child(3):hover {
        color: #e1306c;
    }


/* =========================================================
   HASHTAG
========================================================= */
.footer-hashtag {
    margin-top: 10px;
    font-size: 13px;
    color: #b8b8b8;
}


/* =========================================================
   DIVIDER
========================================================= */
.footer-divider {
    margin: 40px 0;
}


/* =========================================================
   ACKNOWLEDGEMENT
========================================================= */
.footer-ack {
    position: relative;
    padding-top: 10px;
}

    /* gold glow line */
    .footer-ack::before {
        content: "";
        position: absolute;
        top: -20px;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(212,175,55,0.4), transparent);
    }

.ack-wrapper {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 40px;
    align-items: center;
}

.ack-left {
    display: flex;
    gap: 20px;
}

.ack-flag svg {
    width: 60px;
    border: 1px solid rgba(255,255,255,0.1);
}

.ack-text h5 {
    color: #fff;
    margin-bottom: 10px;
    font-weight: 600;
}

.ack-text p {
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 10px;
    color: #c7c7c7;
}

.ack-right {
    text-align: right;
}

    .ack-right img {
        width: 120px;
        /* height:auto so the box follows the width/height attributes'
           ratio instead of being forced square. The markup claimed
           110x110 while the file is 63x50, so the logo was drawn to the
           wrong shape. */
        height: auto;
        opacity: 0.9;
        filter: drop-shadow(0 0 6px rgba(212,175,55,0.3));
        transition: transform 0.3s ease, filter 0.3s ease;
    }

        .ack-right img:hover {
            transform: scale(1.05);
            filter: drop-shadow(0 0 10px rgba(212,175,55,0.5));
        }


/* =========================================================
   FOOTER BOTTOM
========================================================= */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    font-size: 12px;
    color: #b8b8b8;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 20px 0;
    flex-wrap: wrap;
    gap: 12px;
}

    .footer-bottom p {
        margin: 0;
        color: #b8b8b8;
    }

    .footer-bottom a {
        margin-left: 15px;
        color: #c7c7c7;
        text-decoration: none;
    }

        .footer-bottom a:hover {
            color: #fff;
        }


/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



 .sponsors { padding: 2rem 0; text-align: center; }
  /* var(--color-text-tertiary) was never defined anywhere - a leftover
     from a different naming scheme. An undefined custom property makes
     the declaration invalid at computed-value time, so the colour fell
     back to whatever was inherited: #555 on #0b0b0b, a contrast ratio of
     2.64:1 where 4.5 is the minimum. This stylesheet's own variable is
     --muted, which gives 8.5:1. */
  .sponsors-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.25rem; }
  .sponsors-wrapper { overflow: hidden; border: 0.5px solid var(--line); border-radius: var(--radius-lg); }
  .sponsors-carousel { display: flex; width: 100%; overflow: hidden; }
  .sponsors-track { display: flex; gap: 0; animation: scroll-left 30s linear infinite; will-change: transform; }
  .sponsors-track:hover { animation-play-state: paused; }
  .sponsor-item { flex: 0 0 120px; height: 90px; display: flex; align-items: center; justify-content: center; border-right: 0.5px solid var(--line); padding: 12px; transition: background 0.15s; }
  .sponsor-item:hover { background: var(--card-hover); }
  .sponsor-item img { max-width: 90px; max-height: 60px; object-fit: contain; filter: grayscale(100%) opacity(0.6); transition: filter 0.2s; }
  .sponsor-item:hover img { filter: grayscale(0%) opacity(1); }
  @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
  
  
.footer-heading {
    margin: 0 0 8px;
    color: #f2f2f2;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
/* =========================================================
   FOOTER ACCESSIBILITY OVERRIDES
========================================================= */
.site-footer .footer-brand p,
.site-footer .footer-col p,
.site-footer .footer-contact-row,
.site-footer .ack-text p {
    color: #c7c7c7;
}

.site-footer .footer-col a,
.site-footer .footer-links-grid a,
.site-footer .footer-bottom a,
.site-footer .footer-bottom-links a {
    color: #c7c7c7;
}

.site-footer .footer-col a:hover,
.site-footer .footer-col a:focus-visible,
.site-footer .footer-links-grid a:hover,
.site-footer .footer-links-grid a:focus-visible,
.site-footer .footer-bottom a:hover,
.site-footer .footer-bottom a:focus-visible,
.site-footer .footer-bottom-links a:hover,
.site-footer .footer-bottom-links a:focus-visible {
    color: #fff;
}

.site-footer .footer-hashtag,
.site-footer .footer-bottom,
.site-footer .footer-bottom p,
.site-footer .footer-left {
    color: #b8b8b8;
}