/* =========================================
   Wellbeing Education — Design System
   ========================================= */

/* -------- Tokens -------- */
:root {
    /* Colors */
    --bg: #ffffff;
    --bg-soft: #faf7f1; /* warm ivory */
    --ink: #1f2937; /* charcoal */
    --muted: #6b7280; /* soft gray */
    --gold: #d4af37; /* champagne gold */
    --gold-600: #c7a22f;
    --ring: #ede4cf;
    --card: #ffffff;
    --border: rgba(16, 24, 40, 0.08);

    /* Radii / Shadows */
    --radius: 18px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
    --shadow-lg: 0 16px 40px rgba(17, 24, 39, 0.12);
}

/* -------- Base Type -------- */
body {
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto,
        "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--ink);
    background: var(--bg);
}
h1,
h2,
h3,
.display-1,
.hero-title {
    font-family: "Playfair Display", Georgia, serif;
    letter-spacing: 0.2px;
}

/* -------- Utilities -------- */
.py-6 {
    padding-block: clamp(48px, 8vw, 96px);
}
.section-title {
    font-weight: 700;
    font-size: clamp(28px, 3.4vw, 44px);
    text-align: center;
    margin-bottom: 1.75rem;
}
.subtitle {
    color: var(--muted);
    max-width: 680px;
    margin: 0.25rem auto 2rem;
    text-align: center;
}
.section-eyebrow {
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-size: 0.8rem;
    color: #777;
    margin-bottom: 0.75rem;
}

/* =========================================
   HERO
   ========================================= */
.wb-hero {
    position: relative;
    padding-block: clamp(56px, 7vw, 112px);
    background: radial-gradient(
            1200px 600px at 80% -10%,
            #fff8e6 0%,
            transparent 60%
        ),
        linear-gradient(180deg, var(--bg-soft) 0%, #fff 70%);
}
.hero-kicker {
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-600);
    font-weight: 600;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}
.hero-title {
    font-weight: 800;
    font-size: clamp(40px, 5.2vw, 64px);
    line-height: 1.04;
    margin: 0.25rem 0 0.65rem;
}
.hero-title .accent {
    color: var(--gold-600);
    font-style: italic;
}
.hero-lead {
    color: var(--muted);
    font-size: clamp(16px, 1.35vw, 18px);
    max-width: 56ch;
}

/* Hero media */
.wb-media {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.wb-media video,
.wb-media img {
    display: block;
    width: 100%;
    height: auto;
}
.wb-media::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius);
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(212, 175, 55, 0.45),
        rgba(255, 255, 255, 0) 35%,
        rgba(212, 175, 55, 0.35)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Hero links */
.wb-hero .link-clean {
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.wb-hero .link-clean:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-color: var(--gold);
}

/* Hero responsive */
@media (max-width: 992px) {
    .wb-hero .row {
        row-gap: 1.5rem;
    }
    .wb-hero .col-lg-6:first-child {
        text-align: center;
    }
    .wb-hero .d-flex {
        justify-content: center;
    }
    .hero-lead {
        max-width: none;
    }
}

/* ====== Full-bleed cover hero (Webflow-style) ====== */
.wb-hero.hero-cover {
    position: relative;
    padding-block: clamp(96px, 16vw, 180px); /* tall, cinematic */
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
}

/* background image layer */
.wb-hero.hero-cover .cover-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.wb-hero.hero-cover .cover-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(105%); /* gentle richness */
}
/* soft vignette + readability */
.wb-hero.hero-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.55) 100%
    );
}
.cover-media .cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* content layer */
.wb-hero.hero-cover .hero-center {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    padding-inline: 16px;
}
.wb-hero.hero-cover .hero-kicker {
    color: rgba(255, 255, 255, 0.85);
}
.wb-hero.hero-cover .hero-title {
    color: #fff;
}
.wb-hero.hero-cover .hero-title .accent {
    color: var(--gold);
}
.wb-hero.hero-cover .hero-lead {
    color: rgba(255, 255, 255, 0.88);
}

/* on-dark links/buttons */
.wb-hero.hero-cover .link-clean {
    color: #fff;
    opacity: 0.9;
}
.wb-hero.hero-cover .link-clean:hover {
    opacity: 1;
    text-decoration: underline;
    text-decoration-color: var(--gold);
}

.wb-hero.hero-cover .btn-gold {
    /* your btn-gold already works; add a lighter shadow on dark */
    box-shadow: 0 10px 28px rgba(212, 175, 55, 0.32);
}

/* responsive tweak: slightly smaller title on small screens */
@media (max-width: 576px) {
    .wb-hero.hero-cover {
        padding-block: 88px;
    }
    .wb-hero.hero-cover .hero-title {
        font-size: clamp(34px, 9vw, 48px);
    }
}

/* =========================================
   Sections: Split (image + text)
   ========================================= */
.split {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: center;
}
.split .split-media {
    aspect-ratio: 16/9;
    background: #111;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
}
.split .split-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.split .split-copy h2 {
    margin-bottom: 0.5rem;
}
.split .split-copy p {
    color: #666;
}
@media (max-width: 992px) {
    .split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* =========================================
   Services: Large Image Cards (Webflow-like)
   ========================================= */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: clamp(16px, 2.2vw, 32px);
    align-items: stretch;
}
@media (max-width: 1200px) {
    .service-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
    }
}
@media (max-width: 768px) {
    .service-grid {
        grid-template-columns: 1fr;
    }
}

.service-card {
    position: relative;
    isolation: isolate;
    border-radius: 12px; /* smaller, like the ref */
    overflow: hidden;
    background: #edeae3; /* soft fallback if image fails */
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.1);
    transform: translateZ(0);
}

/* Tall image tiles */
.service-card .media {
    position: relative;
}
@supports (aspect-ratio: 4 / 5) {
    .service-card .media {
        aspect-ratio: 4/5;
    }
}
@supports not (aspect-ratio: 4 / 5) {
    .service-card .media {
        height: clamp(360px, 40vw, 560px);
    }
}

.service-card .media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    filter: saturate(1.05) brightness(0.95);
    transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1), filter 0.3s ease;
}
.service-card:hover .media img {
    transform: scale(1.04);
    filter: brightness(1);
}

/* Bottom-only gradient (no constant dark overlay) */
.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 58%,
        rgba(0, 0, 0, 0.06) 68%,
        rgba(0, 0, 0, 0.45) 100%
    );
    pointer-events: none;
}

/* Copy layer */
.service-card .overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(16px, 2vw, 24px);
}

.service-card h3 {
    color: #fff;
    margin: 0 0 0.75rem;
    font-weight: 800;
    line-height: 1.1;
    font-size: clamp(1.25rem, 2.4vw, 1.85rem);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* Webflow-style small rectangular Explore button */
.service-card .btn-outline {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.62rem 1.05rem;
    border: 1.5px solid rgba(255, 255, 255, 0.9);
    color: #fff;
    background: transparent;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background 0.18s ease, transform 0.18s ease,
        border-color 0.18s ease;
}
.service-card .btn-outline::after {
    content: "›";
    font-size: 1rem;
    line-height: 1;
}
.service-card .btn-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    transform: translateY(-1px);
}
.service-card .btn-outline:focus-visible {
    outline: 3px solid rgba(255, 255, 255, 0.75);
    outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .service-card .media img {
        transition: none;
    }
    .service-card:hover .media img {
        transform: none;
    }
}

/* =========================================
   Buttons / Links
   ========================================= */
.btn-gold {
    --bs-btn-color: #1d1d1d;
    --bs-btn-bg: var(--gold);
    --bs-btn-border-color: var(--gold);
    --bs-btn-hover-bg: var(--gold-600);
    --bs-btn-hover-border-color: var(--gold-600);
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-padding-x: 1.15rem;
    --bs-btn-border-radius: 999px;
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(212, 175, 55, 0.25);
}
.btn-outline-gold {
    --bs-btn-color: #1f2937;
    --bs-btn-border-color: var(--gold);
    --bs-btn-hover-color: #1d1d1d;
    --bs-btn-hover-bg: var(--gold);
    --bs-btn-hover-border-color: var(--gold);
    border-radius: 999px;
}
.link-underline {
    border-bottom: 1px solid rgba(31, 41, 55, 0.18);
    padding-bottom: 2px;
    transition: border-color 0.2s ease;
}
.link-underline:hover {
    border-color: var(--gold);
}
.link-clean {
    color: var(--ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.link-clean:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    text-decoration-color: var(--gold);
}

/* =========================================
   Feature Tiles / Generic Cards / Bands
   ========================================= */
.feature {
    padding: 24px;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow);
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}
.feature i {
    font-size: 28px;
    color: var(--gold-600);
}
.feature h6 {
    margin-top: 0.75rem;
    font-weight: 600;
}

.lux-card {
    border: 0;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.wb-card-media {
    background: linear-gradient(180deg, #f3e8d1 0%, #f9f6ef 100%);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

/* Banded sections (with subtle radial glow) */
.wb-band {
    background: radial-gradient(
            1200px 600px at 80% -10%,
            #fff8e6 0%,
            transparent 60%
        ),
        linear-gradient(180deg, var(--bg-soft) 0%, #fff 70%);
}

/* =========================================
   Forms
   ========================================= */
.contact-lead {
    color: var(--muted);
}
.form-label {
    color: #374151;
}
.form-control {
    border-radius: 12px;
    border-color: #e8e2d6;
}
.form-control:focus {
    box-shadow: 0 0 0 4px var(--ring);
    border-color: var(--gold);
}
.error-message {
    color: #dc3545;
    font-size: 0.9rem;
    margin-top: 0.25rem;
}

/* =========================================
   Reveal on Scroll (no-lib)
   ========================================= */
.reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.6s ease;
}
.reveal.revealed {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .feature,
    .reveal {
        transition: none;
        transform: none !important;
    }
}

/* =========================================
   Header / Navbar
   ========================================= */
.wb-header {
    backdrop-filter: saturate(140%) blur(10px);
    background: rgba(255, 255, 255, 0.75);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(17, 24, 39, 0.06);
}
.wb-header .navbar {
    padding: 0;
}
.brand-name {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    letter-spacing: 0.2px;
    font-size: 1.05rem;
}
.brand-accent {
    color: var(--gold-600);
    font-style: italic;
}
.navbar .nav-link {
    padding: 0.5rem 0.9rem;
    color: var(--ink);
    font-weight: 500;
    border-radius: 999px;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease;
}
.navbar .nav-link:hover {
    background: rgba(0, 0, 0, 0.04);
    color: #111;
}
.navbar .nav-link.active {
    color: #111;
}
.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0.35rem;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-600));
    border-radius: 2px;
}
.navbar-toggler:focus {
    box-shadow: none;
}

/* Belief section: full-bleed hairline + glow */
section.belief {
    position: relative;
    padding-bottom: 18px;
}

section.belief::after {
    /* full-viewport hairline */
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 100vw;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(31, 41, 55, 0.1) 12%,
        rgba(31, 41, 55, 0.16) 50%,
        rgba(31, 41, 55, 0.1) 88%,
        transparent 100%
    );
}

section.belief::before {
    /* centered gold glow */
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -6px;
    width: min(720px, 90vw);
    height: 18px;
    background: radial-gradient(
        60% 120% at 50% 100%,
        rgba(212, 175, 55, 0.22),
        rgba(212, 175, 55, 0)
    );
    filter: blur(6px);
    pointer-events: none;
    opacity: 0.8;
}

/* =========================================
   Footer
   ========================================= */
.wb-footer {
    background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    color: var(--muted);
}
.footer-copy {
    font-weight: 500;
}
.footer-copy .accent {
    color: var(--gold-600);
    font-style: italic;
}
.footer-links .footer-link {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-links .footer-sep{display:inline-block;width:1px;height:18px;background:rgba(71,85,105,.35);}
.footer-links .footer-link i{font-size:1.1rem;display:inline-block;}

.footer-links .footer-link:hover {
    color: var(--gold-600);
}

/* =========================================
   Classes (Courses)
   ========================================= */
.badge-soft-gold {
    background: rgba(212, 175, 55, 0.12);
    color: #7a6517;
    border: 1px solid rgba(212, 175, 55, 0.25);
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.72rem;
}
.class-meta li {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--muted);
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}
.class-meta .bi-stars {
    opacity: 0.9;
}
.price {
    font-size: 1rem;
    font-weight: 600;
}
.class-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: var(--shadow-sm), 0 8px 24px rgba(16, 24, 40, 0.06);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.class-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08),
        0 12px 28px rgba(16, 24, 40, 0.12);
}
.class-card:focus-within {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}
.soft-border {
    border-color: var(--border) !important;
}
.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =========================================
   Contact “Thanks” page
   ========================================= */
.wb-hero-thanks {
    position: relative;
    background: radial-gradient(
            1200px 600px at 100% -10%,
            rgba(212, 175, 55, 0.08) 0%,
            transparent 60%
        ),
        radial-gradient(
            900px 500px at -10% 10%,
            rgba(212, 175, 55, 0.06) 0%,
            transparent 55%
        ),
        linear-gradient(180deg, var(--bg-soft) 0%, #fff 70%);
}
.thanks-card {
    border-radius: 24px;
    overflow: hidden;
}
.thanks-badge {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: linear-gradient(180deg, #fff 0%, #fff7e1 100%);
    border: 1px solid rgba(212, 175, 55, 0.35);
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
    color: var(--gold-600);
    font-size: 34px;
}

/* =========================================
   Buttons – Pills / Sizes
   ========================================= */
.btn-pill {
    --bs-btn-border-radius: 999px;
    --bs-btn-padding-y: 0.7rem;
    --bs-btn-padding-x: 1.2rem;
    border-radius: 999px;
    line-height: 1.1;
}
.btn-outline-dark.btn-pill {
    --bs-btn-color: var(--ink);
    --bs-btn-border-color: rgba(0, 0, 0, 0.18);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
}
.btn-gold.btn-pill {
    box-shadow: 0 8px 18px rgba(212, 175, 55, 0.22);
}
.btn-pill:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 2px;
}
.btn-outline-dark.btn-sm {
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
}

/* =========================================
   Admin polish
   ========================================= */
.card.lux-card {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.08);
}
.card.lux-card .list-group-item {
    border: 0;
}
.card.lux-card .list-group-item + .list-group-item {
    border-top: 1px solid rgba(16, 24, 40, 0.06);
}
.display-6 {
    letter-spacing: 0.2px;
}

/* ===== Alignment & Rhythm pack ===== */

/* Consistent vertical rhythm */
.stack > * + * {
    margin-top: var(--space, 1rem);
}
.stack-sm {
    --space: 0.5rem;
}
.stack-md {
    --space: 1rem;
}
.stack-lg {
    --space: 1.25rem;
}
.stack-xl {
    --space: clamp(1.25rem, 2vw, 2rem);
}

/* Shared max line length for paragraphs/titles */
.measure {
    max-width: 60ch;
    margin-inline: auto;
}
.measure-wide {
    max-width: 72ch;
}

/* Center helper */
.center {
    text-align: center;
}

/* Section header spacing always uniform */
.section-head {
    margin-bottom: clamp(20px, 2.2vw, 28px);
}

/* Keep all containers visually aligned to the same gutters */
.container-xxl {
    padding-left: 24px;
    padding-right: 24px;
}

/* Hero polish so text block width matches sections below */
.wb-hero.hero-cover .hero-center {
    max-width: 1100px;
}
.wb-hero.hero-cover .hero-title {
    margin-bottom: 0.35rem;
}
.wb-hero.hero-cover .hero-lead {
    margin-inline: auto;
    text-align: center;
}

/* Split sections: text column same measure, images scale evenly */
.split .split-copy {
    max-width: 52ch;
}
.split .split-media {
    box-shadow: var(--shadow);
}
@media (max-width: 992px) {
    .split .split-copy {
        max-width: none;
    }
}

/* Section band headline keep same measure as others */
section.belief {
    padding-block: clamp(28px, 5vw, 56px);
}
.belief .section-eyebrow {
    margin-bottom: 0.5rem;
}
.belief-headline {
    max-width: 68ch;
    margin-inline: auto;
    font-size: clamp(22px, 3vw, 38px);
    line-height: 1.3;
}

/* Testimonials/blog cards: equal height & tidy spacing */
.card.lux-card.h-100 {
    display: flex;
    flex-direction: column;
}
.card.lux-card .card-body {
    display: flex;
    flex-direction: column;
}
.card.lux-card .card-body .mt-auto {
    margin-top: auto;
}

/* Normalize section padding so edges line up visually */
section.py-6 + section.py-6 {
    padding-top: clamp(36px, 6vw, 72px);
}

/* Center any .measure block */
.measure {
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
} /* NEW */

/* Make sure the hero lead uses that centering */
.wb-hero.hero-cover .hero-lead {
    color: rgba(255, 255, 255, 0.88);
    margin-top: 0.35rem;
    margin-inline: auto; /* NEW */
}

/* Interior hero (short version of wb-hero) */
.wb-hero-sub {
    padding-block: clamp(56px, 10vw, 120px);
    background: radial-gradient(
            1200px 600px at 80% -10%,
            #fff8e6 0%,
            transparent 60%
        ),
        linear-gradient(180deg, var(--bg-soft) 0%, #fff 70%);
    text-align: center;
}
.wb-hero-sub .section-title {
    margin-bottom: 0.25rem;
}

/* Navbar dropdown polish */
.wb-header .dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 14px;
    padding: 0.5rem;
    box-shadow: var(--shadow);
    min-width: 240px;
}
/* Make language dropdown scrollable */
#google_translate_custom {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}
.wb-header .dropdown-item {
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}
.wb-header .dropdown-item:hover {
    background: rgba(0, 0, 0, 0.05);
}
.wb-header .dropdown-item.active,
.wb-header .dropdown-item[aria-checked="true"] {
    background: rgba(212, 175, 55, 0.14);
    color: #111;
}
.wb-header .dropdown-item .item-check {
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.wb-header .dropdown-item.active .item-check,
.wb-header .dropdown-item[aria-checked="true"] .item-check {
    opacity: 1;
    transform: none;
    color: var(--gold-600);
}

/* underline the parent tab while menu is open too */
.navbar .dropdown-toggle[aria-expanded="true"]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0.35rem;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-600));
    border-radius: 2px;
}

/* Portrait variant for split media */
.split.portrait {
    grid-template-columns: 1.15fr 0.85fr; /* text a bit wider than photo */
    gap: clamp(24px, 4vw, 48px);
}
.split .split-media.portrait {
    aspect-ratio: 4 / 4; /* vertical frame */
    width: clamp(260px, 36vw, 520px); /* responsive width */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    background: #fff; /* fallback behind image */
}
.split .split-media.portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* fill frame, minimal crop */
    object-position: 50% 40%;
}

/* Mobile: stack, slightly softer ratio */
@media (max-width: 992px) {
    .split.portrait {
        grid-template-columns: 1fr;
    }
    .split .split-media.portrait {
        width: 100%;
        aspect-ratio: 4 / 5;
        justify-self: center;
    }
}

.t-stars i {
    opacity: 0.9;
}
.card.lux-card .blockquote {
    font-size: 1rem;
    line-height: 1.6;
}
.card.lux-card .blockquote-footer {
    color: var(--muted);
    font-size: 0.9rem;
}

/* Blog post cards: image aspect ratio, consistent spacing */
/* Layout */
.we-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}
.we-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
}
@media (max-width: 992px) {
    .we-grid {
        grid-template-columns: 1fr;
    }
}

/* Cards / panels */
.we-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.we-card--pad {
    padding: 16px;
}
.we-sticky {
    position: sticky;
    top: 88px;
}

/* Form controls */
.we-form .form-control,
.we-form textarea,
.we-form select,
.we-form input[type="text"],
.we-form input[type="datetime-local"] {
    width: 100%;
    max-width: 100%;
}
.we-form textarea {
    min-height: 140px;
}
.we-help {
    font-size: 0.85rem;
    color: #6b7280;
}

/* Headings/labels */
.we-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Buttons */
.btn {
    border-radius: 10px;
    padding: 10px 14px;
}
.btn-warning {
    background: #ffc319;
    border: 1px solid #e8b40a;
}
.btn-outline-secondary {
    border: 1px solid #dcdcdc;
    background: #fff;
}
.btn-light {
    background: #fafafa;
    border: 1px solid #eee;
}

/* Dropzone */
.we-drop {
    border: 2px dashed #ebebeb;
    border-radius: 12px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: 0.12s background, 0.12s border-color;
    cursor: pointer;
    padding: 12px;
}
.we-drop:hover {
    background: linear-gradient(180deg, #fff, #fff8e6);
}
.we-drop.-drag {
    background: #fffbea;
    border-color: #ffd469;
}
.we-drop img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

/* Footer spacing fix on admin screens */
body.admin .site-footer {
    margin-top: 48px;
}