/* =========================================================
   SACRED MINIMALISM — BOOTSTRAP-FRIENDLY THEME (FULL FILE)
   ========================================================= */

/* ---------- Base Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--fg);
    background: var(--bg);
    font-family: var(--font-sans);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

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

    a:hover {
        color: inherit;
    }

/* ---------- Theme Tokens ---------- */
:root {
    --bg: #F7F6F3;
    --fg: #2B2B2B;
    --muted: #6A6A6A;
    --rule: rgba(43,43,43,.12);
    --accent: #C8C1B8;
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
    --font-serif: ui-serif, "Georgia", "Times New Roman", Times, serif;
    --shadow-soft: 0 10px 30px rgba(0,0,0,.06);
    --radius-lg: 18px;
    --header-h: 76px;
}

::selection {
    background: rgba(200,193,184,.55);
}

/* ---------- Utilities ---------- */
.text-serif {
    font-family: var(--font-serif) !important;
}

.muted {
    color: var(--muted) !important;
}

.upper {
    text-transform: uppercase !important;
}

.tracking-wide {
    letter-spacing: .18em !important;
}

.tracking-med {
    letter-spacing: .10em !important;
}

.rule {
    height: 1px;
    width: 100%;
    background: var(--rule);
}

/* =========================================================
   HEADER / NAVBAR (BOOTSTRAP)
   ========================================================= */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1030;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}

    .site-header.is-scrolled {
        background: rgba(247,246,243,.88);
        backdrop-filter: blur(10px);
        border-bottom-color: var(--rule);
    }

.site-navbar {
    min-height: var(--header-h);
    padding-block: 1rem;
}

/* Brand */
.site-brand {
    font-size: .875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    opacity: .9;
    margin: 0;
    padding: 0;
}

/* Desktop nav links */
.site-navbar .navbar-nav .nav-link {
    font-size: .8125rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .80;
    padding-inline: .75rem;
    padding-block: .35rem;
    border-bottom: 1px solid transparent;
    transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}

    .site-navbar .navbar-nav .nav-link:hover {
        opacity: 1;
        border-bottom-color: var(--accent);
        transform: translateY(-1px);
    }

    .site-navbar .navbar-nav .nav-link.active {
        opacity: 1;
        border-bottom-color: rgba(200,193,184,.9);
    }

/* Toggler */
.site-navbar .navbar-toggler {
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: .45rem .65rem;
}

    .site-navbar .navbar-toggler:focus {
        box-shadow: 0 0 0 .2rem rgba(200,193,184,.35);
    }

.site-navbar .navbar-toggler-icon {
    filter: grayscale(1);
    opacity: .85;
}

/* ---------- MOBILE NAV FIX ---------- */
@media (max-width: 991.98px) {
    .site-navbar .navbar-collapse {
        background: rgba(247,246,243,.96);
        border: 1px solid var(--rule);
        border-radius: 14px;
        padding: 1.25rem 1rem;
        margin-top: .75rem;
        box-shadow: var(--shadow-soft);
    }

    .site-navbar .navbar-nav .nav-link {
        padding-block: .65rem;
        border-bottom: 1px solid var(--rule);
        opacity: .95;
    }

    .site-navbar .navbar-nav .nav-item:last-child .nav-link {
        border-bottom: none;
    }
}

/* ---------- Page offset ---------- */
.page {
    padding-top: calc(var(--header-h) + 10px);
}

/* =========================================================
   FULLSCREEN HERO
   ========================================================= */
.hero {
    position: relative;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Background image */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

    .hero-bg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

/* Overlay (tuned so image shows more) */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient( to right, rgba(247,246,243,.78) 0%, rgba(247,246,243,.70) 38%, rgba(247,246,243,.40) 62%, rgba(247,246,243,.15) 100% );
}

/* Content */
.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: 4rem;
}

.hero-text {
    max-width: 560px;
}

/* Hero typography */
.hero-kicker {
    font-size: .75rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.25rem;
}

.hero-title {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.05;
    font-size: clamp(2.75rem, 5vw, 5.25rem);
    margin-bottom: 1.25rem;
}

.hero-artist {
    font-family: var(--font-serif);
    font-weight: 500;
    font-size: clamp(1.125rem, 1.8vw, 1.6rem);
    margin-bottom: 1.25rem;
    opacity: .92;
}

.hero-bio {
    margin: 0 0 1.75rem 0;
    color: var(--fg);
    opacity: .86;
    max-width: 52ch;
    font-size: 1rem;
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8125rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-bottom: 1px solid transparent;
    padding-bottom: .25rem;
    transition: border-color .2s ease, transform .2s ease, opacity .2s ease;
    opacity: .9;
}

    .hero-cta:hover {
        border-bottom-color: var(--accent);
        transform: translateY(-1px);
        opacity: 1;
    }

/* =========================================================
   HERO — MOBILE/TABLET FIX (prevents “half cut off” look)
   ========================================================= */
@media (max-width: 991.98px) {
    /* Keep the hero tall so the image has room */
    .hero {
        min-height: 100vh; /* key fix */
        align-items: flex-end; /* content sits lower, like the mockup */
    }

    .hero-content {
        padding-block: 3.75rem; /* slightly tighter than desktop */
    }

    /* Move crop point so the subject stays in frame on shorter screens */
    .hero-bg img {
        object-position: 50% 18%; /* tweak as needed: 10%–30% */
    }

    /* Slightly stronger overlay on mobile for readability (but still shows image) */
    .hero-overlay {
        background: linear-gradient( to top, rgba(247,246,243,.86) 0%, rgba(247,246,243,.74) 55%, rgba(247,246,243,.28) 100% );
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-bio {
        opacity: .90;
    }
}

/* Extra-small phones: give a bit more breathing room */
@media (max-width: 575.98px) {
    .hero-content {
        padding-block: 3.25rem;
    }

    .hero-bg img {
        object-position: 50% 14%;
    }
}

/* =========================================================
   SECTIONS
   ========================================================= */
.section {
    padding: 5rem 0;
}

.section--tight {
    padding: 3.5rem 0;
}

.section-title {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: .02em;
    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    margin-bottom: 1rem;
}

.section-text {
    color: var(--muted);
    max-width: 62ch;
}

/* Page heading helpers */
.page-title {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.1;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    margin: .25rem 0 1rem 0;
}

.page-subtitle {
    margin: 0;
    color: var(--muted);
    max-width: 64ch;
}

/* =========================================================
   CARDS (BOOTSTRAP-FRIENDLY)
   ========================================================= */
.theme-card {
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.40);
    transition: transform .2s ease, border-color .2s ease;
}

    .theme-card:hover {
        transform: translateY(-3px);
        border-color: rgba(200,193,184,.85);
    }

/* =========================================================
   FORMS (SUBTLE, PREMIUM) — BOOTSTRAP OVERRIDES
   ========================================================= */
.form-label {
    font-size: .8125rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

.form-control {
    border: 1px solid var(--rule);
    background: rgba(255,255,255,.65);
    border-radius: 14px;
    padding: .8rem .9rem;
    color: var(--fg);
}

    .form-control:focus {
        border-color: rgba(200,193,184,.95);
        box-shadow: 0 0 0 .2rem rgba(200,193,184,.25);
        background: rgba(255,255,255,.85);
    }

.input-group .input-group-text {
    border: 1px solid var(--rule);
    background: rgba(255,255,255,.55);
    color: var(--muted);
    border-radius: 14px;
}

/* Make input-group look seamless with our radius */
.donate-input-group .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding-inline: .95rem;
}

.donate-input-group .donate-input {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* =========================================================
   DONATE PAGE
   ========================================================= */
.donate-header {
    margin-bottom: 1.5rem;
}

.donate-card {
    overflow: hidden;
}

.donate-label {
    margin-bottom: .75rem;
}

.donate-help {
    margin-top: .75rem;
    color: var(--muted);
    font-size: .9rem;
}

.donate-paypal-title {
    font-size: .8125rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1rem;
}

.paypal-container {
    margin-top: 0;
}

/* Keep PayPal buttons from looking cramped on small screens */
@media (max-width: 575.98px) {
    .card-body {
        padding: 1.25rem !important;
    }
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
    border-top: 1px solid var(--rule);
    padding: 2.75rem 0;
    color: var(--muted);
}

.footer-brand {
    font-size: .8125rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Social Links ---------- */
.social-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

    .social-links a {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--fg);
        opacity: .65;
        transition: opacity .2s ease, transform .2s ease;
    }

        .social-links a:hover {
            opacity: 1;
            transform: translateY(-2px);
        }

    .social-links svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
    }