/**
 * ==========================================================
 * MURI DIGITAL HISTORICAL MUSEUM & ARCHIVES
 * CENTRAL GLOBAL THEME
 * ==========================================================
 *
 * File:
 * /includes/theme.css
 *
 * PURPOSE:
 * ----------------------------------------------------------
 * Global visual identity shared across the Muri Museum:
 *
 * - Heritage colour palette
 * - Typography
 * - Navigation
 * - Buttons
 * - Forms
 * - Sections
 * - Accessibility
 * - Cards
 * - Footer
 * - Responsive foundations
 *
 * Museum-specific components are handled in:
 *
 * /assets/css/museum.css
 *
 * ==========================================================
 */


/* ==========================================================
   MURI HERITAGE DESIGN TOKENS
   ========================================================== */

:root {

    --muri-green: #123c32;
    --muri-green-dark: #071b16;
    --muri-green-deep: #092a22;
    --muri-green-light: #1c5748;

    --muri-gold: #c89b3c;
    --muri-gold-light: #e3c477;
    --muri-gold-dark: #9b7528;

    --muri-cream: #f7f1e4;
    --muri-cream-dark: #eee4d2;

    --muri-brown: #6f4b2b;
    --muri-brown-light: #98724b;

    --muri-white: #ffffff;
    --muri-black: #111713;

    --muri-text: #26352f;
    --muri-text-light: #66736d;

    --muri-border: #e4ddcf;

    --muri-shadow-sm:
        0 4px 16px rgba(7, 27, 22, .07);

    --muri-shadow:
        0 12px 35px rgba(7, 27, 22, .10);

    --muri-shadow-lg:
        0 20px 55px rgba(7, 27, 22, .16);

    --muri-radius-sm: 8px;
    --muri-radius: 14px;
    --muri-radius-lg: 24px;

    --muri-transition:
        all .3s ease;

}


/* ==========================================================
   GLOBAL BODY
   ========================================================== */

html {
    min-height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body.muri-museum-body {

    min-height: 100vh;

    margin: 0;

    color: var(--muri-text);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 72%,
            var(--muri-cream) 100%
        );

    font-family:
        "Poppins",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;

    line-height: 1.75;

    overflow-x: hidden;

}


/* ==========================================================
   SELECTION
   ========================================================== */

::selection {

    color: var(--muri-white);

    background: var(--muri-green);

}


/* ==========================================================
   HEADINGS
   ========================================================== */

body.muri-museum-body h1,
body.muri-museum-body h2,
body.muri-museum-body h3,
body.muri-museum-body h4,
body.muri-museum-body h5,
body.muri-museum-body h6 {

    font-family:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;

    color: var(--muri-green);

    letter-spacing: -.02em;

}

body.muri-museum-body h1 {

    font-size: clamp(
        2.4rem,
        5vw,
        4.8rem
    );

    line-height: 1.05;

}

body.muri-museum-body h2 {

    font-size: clamp(
        2rem,
        4vw,
        3.2rem
    );

    line-height: 1.15;

}

body.muri-museum-body h3 {

    font-size: clamp(
        1.45rem,
        2.5vw,
        2rem
    );

}

body.muri-museum-body h4 {

    font-size: 1.35rem;

}


/* ==========================================================
   LINKS
   ========================================================== */

body.muri-museum-body a {

    color: var(--muri-green);

    transition:
        color .25s ease,
        background-color .25s ease,
        border-color .25s ease,
        transform .25s ease;

}

body.muri-museum-body a:hover {

    color: var(--muri-gold-dark);

}


/* ==========================================================
   SKIP LINK
   ========================================================== */

.muri-skip-link {

    position: fixed;

    top: -100px;
    left: 20px;

    z-index: 99999;

    padding: 12px 18px;

    color: var(--muri-white) !important;

    background: var(--muri-green);

    border-radius: 0 0 8px 8px;

    box-shadow: var(--muri-shadow);

    font-weight: 600;

}

.muri-skip-link:focus {

    top: 0;

}


/* ==========================================================
   HERITAGE TOP BAR
   ========================================================== */

.muri-topbar {

    position: relative;

    z-index: 1030;

    color: rgba(255,255,255,.88);

    background:
        linear-gradient(
            90deg,
            var(--muri-green-dark),
            var(--muri-green),
            var(--muri-green-dark)
        );

    border-bottom:
        1px solid rgba(200,155,60,.35);

    font-size: 12px;

    letter-spacing: .03em;

}

.muri-topbar .container {

    min-height: 38px;

}

.muri-topbar-left,
.muri-topbar-right {

    display: flex;

    align-items: center;

    min-height: 38px;

}

.muri-topbar-right {

    justify-content: flex-end;

}

.muri-topbar span {

    display: inline-flex;

    align-items: center;

    gap: 8px;

}

.muri-topbar i {

    color: var(--muri-gold-light);

}


/* ==========================================================
   MAIN NAVBAR
   ========================================================== */

.muri-navbar {

    position: sticky;

    top: 0;

    z-index: 1020;

    min-height: 82px;

    padding:
        10px 0;

    background:
        rgba(255,255,255,.97);

    border-bottom:
        1px solid rgba(18,60,50,.08);

    box-shadow:
        0 3px 18px rgba(7,27,22,.05);

    backdrop-filter: blur(12px);

    transition:
        min-height .3s ease,
        box-shadow .3s ease;

}

.muri-navbar.navbar-scrolled {

    min-height: 68px;

    box-shadow:
        0 8px 28px rgba(7,27,22,.12);

}


/* ==========================================================
   BRAND
   ========================================================== */

.muri-brand {

    display: inline-flex !important;

    align-items: center;

    gap: 11px;

    color: var(--muri-green) !important;

    padding: 0 !important;

}

.muri-brand:hover {

    color: var(--muri-green) !important;

}

.muri-brand-logo {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    overflow: hidden;

    flex-shrink: 0;

    color: var(--muri-gold);

    background:
        linear-gradient(
            145deg,
            var(--muri-green),
            var(--muri-green-dark)
        );

    border:
        2px solid var(--muri-gold);

    border-radius: 50%;

}

.muri-brand-logo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.muri-logo-fallback-icon {

    display: none;

    align-items: center;