/* Alive Church website base sheet: tokens, reset, layout, header/footer and every
   shared component. Split from style.css (2026-09-24). Page-scoped rules live in
   bible-study.css, blog.css and give.css, loaded by includes/header.php right after
   this sheet. A page rule stays here when a later rule in this sheet overrides it,
   so the old single-file cascade order still holds. */

:root {
    /* Base brand colors */
    --color-magenta: #eb008b;
    --color-purple: #4b2679;
    --color-blue: #125b9a;
    --color-primary: #eb008b;
    --color-secondary: #4b2679;

    /* Light mode (default) */
    --color-light: #ffffff;
    --color-bg: #f6f6f8;
    --color-bg-elevated: #ffffff;
    --color-bg-subtle: #f0f0f5;
    --color-dark: #1e1a2b;
    --color-text: #1e1a2b;
    --color-text-muted: #71717a;
    --color-text-subtle: #94a3b8;
    --color-text-faint: #64748b;
    --color-grey: #f0f0f5;
    --color-border: rgba(0, 0, 0, 0.08);
    --color-border-strong: rgba(0, 0, 0, 0.15);
    --color-shadow: rgba(0, 0, 0, 0.1);
    --color-card-bg: #ffffff;
    --color-input-bg: #ffffff;
    --color-header-bg: #ffffff;

    /* Semi-transparent brand colors for shadows/glows */
    --color-magenta-glow: rgba(235, 0, 139, 0.1);
    --color-magenta-shadow: rgba(203, 47, 167, 0.3);
    --color-purple-glow: rgba(75, 38, 121, 0.08);
    --color-purple-shadow: rgba(75, 38, 121, 0.15);
    --color-dark-shadow-subtle: rgba(30, 26, 43, 0.05);
    --color-dark-shadow-light: rgba(30, 26, 43, 0.08);
    --color-dark-shadow: rgba(30, 26, 43, 0.1);
    --color-dark-shadow-medium: rgba(30, 26, 43, 0.12);
    --color-dark-shadow-strong: rgba(30, 26, 43, 0.15);

    /* Border radius - consistent rounding */
    --radius-xs: 0.25rem;
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 999px;

    /* Shadows - reusable shadow patterns */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 10px 20px var(--color-dark-shadow-subtle);
    --shadow-lg: 0 10px 30px var(--color-dark-shadow-light);
    --shadow-xl: 0 20px 40px var(--color-shadow);
    --shadow-card: 0 10px 30px var(--color-dark-shadow);
    --shadow-card-hover: 0 15px 40px var(--color-dark-shadow-medium);
    --shadow-btn-hover: 0 12px 24px rgba(0, 0, 0, 0.2);
    --shadow-focus: 0 0 0 3px var(--color-magenta-glow);
    --shadow-purple: 0 20px 60px var(--color-purple-shadow);

    /* Transitions - consistent timing */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Font sizes - commonly repeated */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 0.9rem;
    --text-lg: 1rem;
}

/* Dark mode - neutral grays with purple/blue accents */
[data-theme="dark"] {
    --color-light: #f4f4f5;
    --color-bg: #1c1c21;
    --color-bg-elevated: #232329;
    --color-bg-subtle: #2a2a31;
    --color-dark: #f4f4f5;
    --color-text: #e4e4e7;
    --color-text-muted: #a1a1aa;
    --color-text-subtle: #71717a;
    --color-text-faint: #52525b;
    --color-grey: #2e2e33;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.15);
    --color-shadow: rgba(0, 0, 0, 0.5);
    --color-card-bg: #232329;
    --color-input-bg: #1c1c21;
    --color-header-bg: #18181b;

    /* Adjust brand colors for dark mode */
    --color-magenta: #f472b6;
    --color-purple: #a78bfa;
    --color-primary: #f472b6;
    --color-secondary: #a78bfa;

    /* Dark mode shadows */
    --color-magenta-glow: rgba(244, 114, 182, 0.15);
    --color-purple-glow: rgba(167, 139, 250, 0.1);
    --color-dark-shadow-subtle: rgba(0, 0, 0, 0.2);
    --color-dark-shadow-light: rgba(0, 0, 0, 0.25);
    --color-dark-shadow: rgba(0, 0, 0, 0.3);
    --color-dark-shadow-medium: rgba(0, 0, 0, 0.35);
    --color-dark-shadow-strong: rgba(0, 0, 0, 0.4);
}

/*
 * Note: Light mode is always the default.
 * Dark mode only activates when explicitly set via data-theme="dark"
 * We don't auto-follow system preference to keep light mode as default.
 */
* {
    box-sizing: border-box;
}

html {
    /* Prevent layout shift from scrollbar appearing/disappearing */
    overflow-y: scroll;
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Account for fixed header when scrolling to anchors */
}

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}

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

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

.container {
    width: min(1200px, 90vw);
    margin: 0 auto;
}

.narrow {
    max-width: 720px;
}

.hidden {
    display: none !important;
}

.button-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.skip-link {
    position: absolute;
    left: -999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    padding: 0.5rem 1rem;
    background: var(--color-magenta);
    color: #fff;
}

.site-header {
    background: var(--color-header-bg);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid var(--color-border);
}

/* Study Sub-Navigation & Section Sub-Navigation */
.study-subnav,
.section-subnav {
    background: #f8fafc;
    border-top: 1px solid #e4e4e7;
}

.study-subnav-inner,
.section-subnav-inner {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.study-subnav-inner::-webkit-scrollbar,
.section-subnav-inner::-webkit-scrollbar {
    display: none;
}

.study-subnav-item,
.section-subnav-item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}

.study-subnav-item:hover,
.section-subnav-item:hover {
    background: #e4e4e7;
    color: var(--color-dark);
}

.study-subnav-item.active {
    background: var(--color-purple);
    color: #fff;
}

.section-subnav-item.active {
    background: var(--color-magenta);
    color: #fff;
}

.study-subnav-item svg,
.section-subnav-item svg {
    flex-shrink: 0;
    opacity: 0.8;
}

.study-subnav-item.active svg,
.section-subnav-item.active svg {
    opacity: 1;
}

/* Auth buttons in study subnav */
.study-subnav-auth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.study-subnav-item.login {
    color: var(--color-text-muted);
}

.study-subnav-item.register {
    background: var(--color-primary);
    color: #fff;
}

.study-subnav-item.register:hover,
.section-subnav-item.register:hover {
    background: var(--color-magenta);
    color: #fff;
}

.section-subnav-item.login {
    color: var(--color-text-muted);
}

.section-subnav-item.register {
    background: var(--color-primary);
    color: #fff;
}

@media (max-width: 768px) {
    .study-subnav-inner,
        .section-subnav-inner {
            padding: 0.375rem 0;
            gap: 0.125rem;
            justify-content: space-around;
        }
    .study-subnav-item,
        .section-subnav-item {
            padding: 0.375rem 0.5rem;
            font-size: 0.75rem;
        }
    .study-subnav-item span,
        .section-subnav-item span {
            display: none;
        }
    .study-subnav-item svg,
        .section-subnav-item svg {
            width: 18px;
            height: 18px;
        }
    /* Keep auth button text visible on mobile */
        .study-subnav-auth .study-subnav-item span,
        .study-subnav-auth .section-subnav-item span {
            display: inline;
        }
    .study-subnav-auth {
            gap: 0.25rem;
        }
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    gap: 1rem;
    position: relative; /* For absolute positioning of user-nav on mobile */
    z-index: 100; /* Above subnavs for dropdown visibility */
}

.logo {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    /* Fixed dimensions to prevent layout shift when switching logos */
    width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
}

.logo img {
    width: 200px;
    height: auto;
    max-height: 50px;
    object-fit: contain;
}

.logo-dark {
    display: none;
}

[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: block;
}

.primary-nav {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.primary-nav a {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.35rem 0.4rem;
    position: relative;
}

.primary-nav a.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.8rem;
    height: 3px;
    background: var(--color-magenta);
}

.nav-link--cta {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    background: var(--color-magenta);
    color: #fff;
}

.nav-link--ghost {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-dark);
}

.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: none;
}

.nav-overlay {
    display: none;
}

/* Mobile nav hidden on desktop */
.mobile-nav {
    display: none;
}

.hero {
    background: linear-gradient(120deg, #431657, #cb2fa7);
    color: #fff;
    padding: 3rem 0 3rem;
    position: relative;
    overflow: hidden;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background: var(--hero-bg-image, url('/assets/imgs/gallery/alive-church-worship-congregation.jpg')) center/cover no-repeat;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero .hero-tag {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(3.5rem, 12vw, 7rem);
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -0.02em;
}

.hero .hero-dead-church {
    margin-bottom: 0.75rem;
}

.hero .hero-dead-church a {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    opacity: 0.7;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity var(--transition-fast);
}

.hero .hero-dead-church a:hover {
    opacity: 1;
}

.hero h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    margin: 0 0 0.75rem;
    font-weight: 600;
}

.hero p {
    max-width: 600px;
    font-size: 0.95rem;
    margin: 0 0 0.75rem;
}

.hero-info-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.hero-info-card {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    backdrop-filter: blur(10px);
}

.hero-info-card .info-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.hero-info-card .info-content {
    flex: 1;
}

.hero-info-card strong {
    display: block;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.hero-info-card p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.95;
}

.text-link-light {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.text-link-light:hover {
    opacity: 0.8;
}

.hero-dead-church-link {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    opacity: 0.7;
}

.hero-dead-church-link a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity var(--transition-fast);
}

.hero-dead-church-link a:hover {
    opacity: 1;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
}

.hero-details {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    gap: 0.5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-btn-hover);
}

.btn-primary,
a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited {
    background: var(--color-magenta);
    color: #fff;
}

.btn-secondary {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-dark);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Dark mode - white version for dark backgrounds */
[data-theme="dark"] .btn-secondary,
.hero .btn-secondary,
.watch .btn-secondary,
.site-footer .btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn-outline {
    border: 1px solid var(--color-dark);
}

a.btn-link {
    display: block;
    font-weight: bold;
    padding: 10px 0;
    text-transform: uppercase;
}

a.btn-link::before {
    content: '\2192';
}

main section {
    padding: 4.5rem 0;
}

.about,
.next-steps,
.content-section {
    background: var(--color-card-bg);
}

.content-section.alt {
    background: var(--color-grey);
}

.split {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: start;
}

.card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: 0 20px 40px var(--color-shadow);
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.8rem;
}

.info-list strong {
    display: inline-block;
    min-width: 130px;
}

.eyebrow {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color:aquamarine;
    margin-bottom: 0.5rem;
}

.eyebrow.light {
    color:cadetblue !important;
}

.section-heading {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    padding: 1rem 0 0;
}

.stat {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-magenta);
    margin: 0;
}

.stat-label {
    margin: 0;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

.card-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ministries {
    background: linear-gradient(120deg, #2b63b5, #451a73);
    color: #fff;
}

.ministry-card,
.step-card,
.event-card,
.sermon-card,
.profile-card {
    border-radius: var(--radius-xl);
    padding: 1.8rem;
    border: 1px solid rgba(30, 26, 43, 0.08);
    background: var(--color-card-bg);
    box-shadow: var(--shadow-md);
}

.ministries .ministry-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.center-link {
    text-align: center;
    margin-top: 2.5rem;
}

.sermon-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.sermon-meta {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-blue);
}

/* Homepage Sermon Grid */
.sermon-grid-home {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .sermon-grid-home {
            grid-template-columns: repeat(2, 1fr);
        }
}

@media (max-width: 600px) {
    .sermon-grid-home {
            grid-template-columns: 1fr;
        }
}

/* Netflix-style Sermon Card */
.sermon-card-netflix {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-card-bg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    text-decoration: none;
    color: inherit;
    display: block;
}

.sermon-card-netflix:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-lg);
}

.card-thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--color-bg-subtle);
}

.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base);
}

.sermon-card-netflix:hover .card-thumb img {
    transform: scale(1.08);
}

.thumb-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-magenta) 100%);
}

.card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.sermon-card-netflix:hover .card-overlay {
    opacity: 1;
}

.play-btn {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.95);
    border-radius: 50%;
    color: #000;
    transform: scale(0.8);
    transition: transform var(--transition-fast);
}

.play-btn svg {
    width: 20px;
    height: 20px;
    margin-left: 3px;
}

.sermon-card-netflix:hover .play-btn {
    transform: scale(1);
}

.card-thumb .duration {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: rgba(0,0,0,0.8);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-xs);
}

.card-info {
    padding: 1rem;
}

.card-info h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0 0 0.375rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-info .meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin: 0;
}

.card-info .series-tag {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-xs);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.event-card {
    background: var(--color-card-bg);
}

.event-date {
    font-weight: 600;
    color: var(--color-magenta);
    margin-bottom: 0.5rem;
}

.text-link {
    font-weight: 600;
    color: var(--color-blue);
}

/* ================================================
   FOOTER STYLES
   ================================================ */
.site-footer {
    background: #0f0a18;
    color: #fff;
}

/* New Here CTA Banner (standalone include) */
.new-here-banner {
    background: linear-gradient(135deg, var(--color-purple) 0%, #2d1a4a 100%);
    padding: 3rem 0;
    color: #fff;
}

.new-here-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.new-here-text h3 {
    font-size: 1.5rem;
    margin: 0 0 0.5rem;
    color: #fff;
}

.new-here-text p {
    margin: 0;
    opacity: 0.9;
    max-width: 500px;
}

.new-here-banner .btn-large {
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .new-here-content {
            flex-direction: column;
            text-align: center;
        }
    .new-here-text h3 {
            font-size: 1.25rem;
        }
}

@media (max-width: 480px) {
    .new-here-banner {
            padding: 2rem 0;
        }
}

[data-theme="dark"] .new-here-banner {
    background: linear-gradient(135deg, #1e1033 0%, #0a0a0f 100%);
}

/* Footer Main Section */
.footer-main {
    padding: 4rem 0 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: 1.5fr repeat(4, 1fr);
}

/* Footer Brand Column */
.footer-brand {
    padding-right: 2rem;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 1rem;
}

.footer-logo img {
    max-width: 180px;
    height: auto;
}

.footer-tagline {
    font-size: 0.9rem;
    line-height: 1.6;
    opacity: 0.8;
    margin: 0 0 1.5rem;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transition: all 0.2s ease;
}

.social-icon:hover {
    background: var(--color-magenta);
    transform: translateY(-2px);
}

/* Footer Columns */
.footer-column {
    min-width: 0;
}

.footer-heading {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 1.25rem;
    color: #fff;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--color-magenta);
}

/* Footer Contact Items */
.footer-contact-item {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.footer-contact-item svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-magenta);
}

.footer-contact-item p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

.footer-service-time {
    font-weight: 600;
    color: #fff !important;
}

.footer-service-detail {
    font-size: 0.85rem !important;
    opacity: 0.7;
}

.footer-link-arrow {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: var(--color-magenta);
    text-decoration: none;
    font-weight: 500;
}

.footer-link-arrow:hover {
    text-decoration: underline;
}

.footer-link-arrow::after {
    content: ' \2192';
}

/* Footer Contact Links */
.footer-contact-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    transition: color 0.2s ease;
}

.footer-contact-link svg {
    color: var(--color-magenta);
    flex-shrink: 0;
}

.footer-contact-link:hover {
    color: var(--color-magenta);
}

/* Footer Give Box */
.footer-give-box {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-give-box p {
    margin: 0 0 0.75rem;
    font-size: 0.85rem;
    opacity: 0.8;
}

.footer-give-box .btn {
    width: 100%;
}

/* Footer Bottom Bar */
.footer-bottom {
    padding: 1.5rem 0;
    background: rgba(0, 0, 0, 0.3);
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-copyright {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.7;
}

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal-links a:hover {
    color: var(--color-magenta);
}

.footer-divider {
    color: rgba(255, 255, 255, 0.3);
}

/* Footer Responsive */
@media (max-width: 1100px) {
    .footer-grid {
            grid-template-columns: 1fr 1fr 1fr;
        }
    .footer-brand {
            grid-column: 1 / -1;
            padding-right: 0;
            text-align: center;
            padding-bottom: 2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 0.5rem;
        }
    .footer-tagline {
            max-width: 400px;
            margin-left: auto;
            margin-right: auto;
        }
    .footer-social {
            justify-content: center;
        }
}

@media (max-width: 768px) {
    .footer-grid {
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
    .footer-main {
            padding: 3rem 0 2rem;
        }
    .footer-bottom-content {
            flex-direction: column;
            text-align: center;
        }
}

@media (max-width: 480px) {
    .footer-grid {
            grid-template-columns: 1fr;
            text-align: center;
        }
    .footer-brand {
            border-bottom: none;
            padding-bottom: 1rem;
        }
    .footer-column {
            padding-bottom: 1.5rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
    .footer-column:last-child {
            border-bottom: none;
        }
    .footer-contact-item {
            justify-content: center;
            text-align: left;
        }
    .footer-contact-link {
            justify-content: center;
        }
    .footer-give-box {
            text-align: center;
        }
    .footer-links {
            align-items: center;
        }
}

.page-hero {
    background: linear-gradient(110deg, #431657, #2b63b5);
    color: #fff;
    text-align: center;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

/* Support for CMS background images on page-hero */
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--hero-bg-image, none) center/cover no-repeat;
    opacity: 0.3;
    z-index: 0;
}

.page-hero > * {
    position: relative;
    z-index: 1;
}

.content-section ul {
    padding-left: 1.2rem;
}

.content-section img:not(.logo img):not([class]) {
    border-radius: var(--radius-lg);
    margin: 1.5rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.content-image {
    border-radius: 1rem;
    margin-top: 1.5rem;
    box-shadow: 0 20px 40px rgba(75, 38, 121, 0.15);
    width: 100%;
    height: auto;
}

.content-image-small {
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.profile-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.profile-card .cms-img-wrapper {
    width: 100%;
    display: block;
}

.profile-card img {
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.form-card {
    display: grid;
    gap: 1rem;
}

.form-card label {
    display: grid;
    gap: 0.3rem;
    font-size: 0.9rem;
}

.form-card label .required {
    color: var(--color-magenta);
}

.form-card label .optional {
    color: #9ca3af;
    font-weight: 400;
}

/* Contact Page Styles */
.contact-info-cards {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.contact-info-card {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.contact-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-magenta) 0%, var(--color-purple) 100%);
    border-radius: var(--radius-md);
    color: white;
}

.contact-details h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    color: var(--color-dark);
}

.contact-details p {
    margin: 0;
    color: #52525b;
    line-height: 1.5;
}

.contact-details a {
    color: var(--color-magenta);
    text-decoration: none;
}

.contact-details a:hover {
    text-decoration: underline;
}

.contact-note {
    font-size: 0.85rem;
    color: #9ca3af !important;
    margin-top: 0.25rem;
}

.social-connect {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.social-connect h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: var(--color-dark);
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-grey);
    color: #52525b;
    transition: all 0.2s;
}

.social-link:hover {
    background: var(--color-magenta);
    color: white;
    transform: translateY(-2px);
}

.notice {
    border-radius: var(--radius-lg);
    padding: 0.9rem 1rem;
    font-weight: 600;
}

.notice-success {
    background: rgba(18, 91, 154, 0.1);
    color: var(--color-blue);
}

.notice-error {
    background: rgba(255, 20, 147, 0.15);
    color: var(--color-magenta);
}

input,
select,
textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid var(--color-border-strong);
    background: var(--color-input-bg);
    color: var(--color-text);
    font: inherit;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

textarea {
    resize: vertical;
}

.map-placeholder {
    height: 280px;
    border-radius: var(--radius-xl);
    background: rgba(18, 91, 154, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.photo-gallery {
    background: var(--color-grey);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.gallery-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.gallery-img:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px rgba(30, 26, 43, 0.15);
}

/* New CTA Card Section */
.new-here-cta {
    padding: 4.5rem 0;
    background: var(--color-grey);
}

.cta-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    align-items: center;
    background: linear-gradient(135deg, #431657, #cb2fa7);
    border-radius: var(--radius-2xl);
    padding: 3rem;
    color: #fff;
    box-shadow: 0 20px 60px rgba(203, 47, 167, 0.3);
}

.cta-content h2 {
    margin: 0.5rem 0 1rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.cta-content p {
    margin: 0 0 1.5rem;
    opacity: 0.95;
}

.cta-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Featured Sermon Section */
.sermon-feature {
    padding: 4.5rem 0;
    background: var(--color-card-bg);
}

.video-player-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto 2rem;
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 60px rgba(75, 38, 121, 0.2);
}

.video-player-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xl);
}

/* YouTube facade for lazy loading */
.youtube-facade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: #000;
    border-radius: var(--radius-xl);
}

.youtube-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-xl);
}

.youtube-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    opacity: 0.9;
    transition: opacity 0.2s, transform 0.2s;
}

.youtube-facade:hover .youtube-play-btn {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.sermon-info {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.sermon-info h3 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
}

.sermon-feature .hero-ctas {
    justify-content: center;
}

/* Weekend Preview Section */
.weekend-preview {
    padding: 4.5rem 0;
    background: var(--color-grey);
}

.weekend-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.weekend-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.weekend-card .event-time {
    display: inline-block;
    background: rgba(255, 20, 147, 0.1);
    color: var(--color-magenta);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.weekend-card h3 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
}

.weekend-card p {
    margin: 0 0 1rem;
}

/* Newsletter Section */
.newsletter-section {
    background: linear-gradient(135deg, #2b63b5, #451a73);
    padding: 3rem 0;
    margin: 0;
    width: 100%;
}

.newsletter-section .container {
    width: 100%;
    max-width: 1200px;
    padding: 0 1.5rem;
}

.newsletter-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    align-items: center;
    color: #fff;
}

.newsletter-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.75rem;
}

.newsletter-card p {
    margin: 0;
    opacity: 0.9;
}

.newsletter-form {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.newsletter-input {
    flex: 1;
    min-width: 200px;
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-full);
    border: none;
    font: inherit;
}

.newsletter-form .btn {
    white-space: nowrap;
}

@media (max-width: 480px) {
    .newsletter-section .container {
            padding: 0 1rem;
        }
    .newsletter-input {
            min-width: 100%;
            width: 100%;
        }
    .newsletter-form {
            flex-direction: column;
        }
    .newsletter-form .btn {
            width: 100%;
        }
}

/* Newsletter Messages */
.newsletter-card .notice,
.newsletter-message {
    margin-bottom: 1rem;
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-lg);
    font-weight: 500;
}

.notice-success,
.newsletter-message.success {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.notice-error,
.newsletter-message.error {
    background: rgba(239, 68, 68, 0.15);
    color: #DC2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.newsletter-message:empty {
    display: none;
    margin: 0;
    padding: 0;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all var(--transition-base);
}

.social-link span {
    font-size: 0;
}

.social-link:hover {
    background: var(--color-magenta);
    border-color: var(--color-magenta);
    transform: translateY(-2px);
}

.timeline {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-magenta);
    opacity: 0.3;
}

/* FAQ Section */
.faq-section {
    padding: 4.5rem 0;
    background: var(--color-grey);
}

.faq-list {
    display: grid;
    gap: 1rem;
}

.faq-item {
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 5px 15px rgba(30, 26, 43, 0.06);
    cursor: pointer;
    transition: box-shadow 200ms ease;
}

.faq-item:hover {
    box-shadow: 0 8px 20px rgba(30, 26, 43, 0.1);
}

.faq-item summary {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-purple);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--color-magenta);
    flex-shrink: 0;
    margin-left: 1rem;
}

.faq-item[open] summary::after {
    content: '−';
}

.faq-item p {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(0,0,0,0.08);
}

.map-embed iframe {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}

/* Events Page */
.events-calendar {
    padding: 4.5rem 0;
    background: var(--color-card-bg);
}

/* Event Controls - Search & Month Picker */
.event-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.event-search {
    flex: 1;
    max-width: 400px;
}

.event-search input {
    width: 100%;
    padding: 0.75rem 1.25rem;
    border: 1px solid rgba(30, 26, 43, 0.15);
    border-radius: var(--radius-full);
    font: inherit;
    font-size: 0.95rem;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.event-search input:focus {
    outline: none;
    border-color: var(--color-magenta);
    box-shadow: var(--shadow-focus);
}

.month-picker {
    flex: 0 0 auto;
}

.month-picker select {
    padding: 0.75rem 2.5rem 0.75rem 1.25rem;
    border: 1px solid rgba(30, 26, 43, 0.15);
    border-radius: var(--radius-full);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    background-color: var(--color-card-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231e1a2b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    cursor: pointer;
    transition: border-color 200ms ease, box-shadow 200ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--color-dark);
}

.month-picker select:focus {
    outline: none;
    border-color: var(--color-magenta);
    box-shadow: var(--shadow-focus);
}

.month-picker select:hover {
    border-color: rgba(30, 26, 43, 0.3);
}

/* Category Filters */
.event-filters {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}

.filter-btn {
    background: none;
    border: 1px solid var(--color-dark);
    padding: 0.6rem 1.25rem;
    border-radius: var(--radius-full);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.filter-btn:hover {
    background: rgba(30, 26, 43, 0.05);
}

.filter-btn.active {
    background: var(--color-magenta);
    border-color: var(--color-magenta);
    color: #fff;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

.event-card-detailed {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.event-card-detailed:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
}

.event-card-detailed.hidden {
    display: none;
}

.event-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.event-content {
    padding: 1.5rem;
}

.event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.event-category {
    display: inline-block;
    background: rgba(18, 91, 154, 0.1);
    color: var(--color-blue);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-recurring-badge {
    display: inline-block;
    background: rgba(255, 20, 147, 0.1);
    color: var(--color-magenta);
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.event-date-badge {
    font-weight: 600;
    color: var(--color-magenta);
    font-size: 0.9rem;
}

.event-details {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--color-grey);
    border-radius: var(--radius-md);
}

.event-details p {
    margin: 0.5rem 0;
    font-size: 0.9rem;
}

.event-details strong {
    color: var(--color-purple);
}

/* Load More Section */
.load-more-container {
    margin-top: 3rem;
    text-align: center;
}

.load-more-container .btn {
    margin-bottom: 1rem;
}

.events-count {
    color: rgba(30, 26, 43, 0.6);
    font-size: 0.9rem;
    font-weight: 500;
}

.events-count span {
    font-weight: 700;
    color: var(--color-magenta);
}

/* Connect Page - Tab Navigation */
.connect-section {
    padding: 4.5rem 0;
    background: var(--color-card-bg);
}

.tab-nav {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    border-bottom: 2px solid rgba(0,0,0,0.08);
}

.tab-btn {
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    color: var(--color-dark);
    opacity: 0.6;
    transition: opacity 200ms;
}

.tab-btn:hover {
    opacity: 0.8;
}

.tab-btn.active {
    opacity: 1;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-magenta);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.section-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.connect-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base);
}

.connect-card:hover {
    transform: translateY(-4px);
}

.connect-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.connect-card > div {
    padding: 1.5rem;
}

.connect-card h3 {
    margin: 0 0 0.75rem;
}

.connect-card p {
    margin: 0 0 1rem;
}

.card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 1rem;
    background: var(--color-grey);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

.card-meta span {
    display: block;
}

/* Serve Opportunities Cards */
.serve-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
}

.serve-card h3 {
    margin: 0 0 0.75rem;
    color: var(--color-purple);
}

.serve-card .commitment {
    display: inline-block;
    background: rgba(255, 20, 147, 0.1);
    color: var(--color-magenta);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.serve-card .areas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.serve-card .area-tag {
    background: var(--color-grey);
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem;
}

/* Live Stream Section */
.live-stream-section {
    padding: 4.5rem 0;
    background: var(--color-card-bg);
}

.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 20, 147, 0.15);
    color: var(--color-magenta);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: var(--color-magenta);
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.live-player {
    border: 3px solid var(--color-magenta);
}

.live-chat-cta {
    text-align: center;
    max-width: 600px;
    margin: 2rem auto 0;
    padding: 2rem;
    background: var(--color-grey);
    border-radius: var(--radius-xl);
}

.live-chat-cta h3 {
    margin: 0 0 0.5rem;
}

.live-chat-cta p {
    margin: 0 0 1.5rem;
}

/* Sermon Archive */
.sermon-archive {
    padding: 4.5rem 0;
    background: var(--color-grey);
}

.series-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.series-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base);
}

.series-card:hover {
    transform: translateY(-4px);
}

.series-image-wrapper {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.series-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.series-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 1rem;
    color: #fff;
}

.sermon-count {
    font-size: 0.9rem;
    font-weight: 600;
}

.series-card > h3 {
    padding: 1.5rem 1.5rem 0.5rem;
    margin: 0;
}

.series-meta {
    padding: 0 1.5rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-blue);
    font-weight: 600;
}

.series-card > p {
    padding: 0.5rem 1.5rem;
    margin: 0;
}

.series-card > a {
    display: block;
    padding: 0 1.5rem 1.5rem;
}

/* Podcast Section */
.podcast-section {
    padding: 4.5rem 0;
    background: var(--color-card-bg);
}

.podcast-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.podcast-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: var(--color-card-bg);
    border: 1px solid rgba(30, 26, 43, 0.2);
    border-radius: var(--radius-lg);
    font-weight: 600;
    transition: all var(--transition-base);
}

.podcast-btn:hover {
    background: var(--color-grey);
    transform: translateX(4px);
}

.podcast-btn img {
    width: 24px;
    height: 24px;
}

.form-intro {
    color: var(--color-text-light);
    margin-bottom: 2rem;
}

.form-label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-dark);
}

.form-input,
.form-select {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(30, 26, 43, 0.2);
    border-radius: var(--radius-md);
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    transition: all var(--transition-base);
}

.form-input:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-magenta);
    box-shadow: var(--shadow-focus);
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 600;
    color: var(--color-text-light);
}

/* Checkbox Group (Gift Aid) */
.checkbox-group {
    background: var(--color-grey);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.form-error {
    color: #EF4444;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* AJAX Form Messages */
.form-message {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.form-message.success {
    background: #ECFDF5;
    color: #065F46;
    border: 1px solid #A7F3D0;
}

.form-message.error {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

/* Dark mode form messages */
[data-theme="dark"] .form-message.success {
    background: rgba(16, 185, 129, 0.15);
    color: #6EE7B7;
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .form-message.error {
    background: rgba(239, 68, 68, 0.15);
    color: #FCA5A5;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Submit Button */
.btn-block {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner.hidden {
    display: none;
}

.btn-spinner {
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
}

.btn-spinner.visible,
.btn-spinner.show {
    display: inline-flex;
}

.btn-spinner.hidden {
    display: none !important;
}

.btn-text.hidden {
    display: none;
}

.btn-spinner-svg {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.security-note {
    text-align: center;
    color: var(--color-text-light);
    font-size: 0.875rem;
    margin-top: 1rem;
}

@keyframes successPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.donation-success h3 {
    font-size: 1.75rem;
    color: var(--color-dark);
    margin-bottom: 1rem;
}

.donation-success p {
    color: var(--color-text-light);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.giving-method-card > p {
    color: var(--color-text-light);
    margin-bottom: 1.25rem;
}

.method-details .small-text {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    margin-top: 0.75rem;
}

.breakdown-label {
    font-weight: 600;
    color: var(--color-dark);
}

.breakdown-percentage {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--color-magenta);
}

.breakdown-description {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.impact-content p {
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.impact-author {
    font-weight: 600;
    color: var(--color-dark);
    font-style: italic;
}

/* Section Heading Center Variant */
.section-heading.center {
    text-align: center;
}

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

/* Small Text Utility */
.small-text {
    font-size: 0.9rem;
    color: var(--color-text-light);
}

@media (max-width: 960px) {
    /* Hide desktop nav on mobile */
        .desktop-nav {
            display: none !important;
        }
    /* Hamburger toggle button */
        .nav-toggle-label {
            display: inline-flex;
            width: 44px;
            height: 44px;
            border-radius: var(--radius-lg);
            align-items: center;
            justify-content: center;
            background: var(--color-bg-subtle);
            cursor: pointer;
            transition: all var(--transition-base);
            z-index: 1001;
            position: relative;
        }
    .nav-toggle-label:hover {
            background: var(--color-border);
        }
    .nav-toggle-label span,
        .nav-toggle-label span::before,
        .nav-toggle-label span::after {
            display: block;
            width: 20px;
            height: 2px;
            background: var(--color-text);
            position: relative;
            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            border-radius: 2px;
        }
    .nav-toggle-label span::before,
        .nav-toggle-label span::after {
            content: '';
            position: absolute;
            left: 0;
            width: 20px;
        }
    .nav-toggle-label span::before {
            top: -7px;
        }
    .nav-toggle-label span::after {
            top: 7px;
        }
    /* Animated X transformation */
        .nav-toggle:checked + .nav-toggle-label span {
            background: transparent;
        }
    .nav-toggle:checked + .nav-toggle-label span::before {
            transform: translateY(7px) rotate(45deg);
            background: #fff;
        }
    .nav-toggle:checked + .nav-toggle-label span::after {
            transform: translateY(-7px) rotate(-45deg);
            background: #fff;
        }
    .nav-toggle:checked + .nav-toggle-label {
            background: var(--color-magenta);
        }
    /* Nav overlay - covers content when nav is open */
        .nav-overlay {
            display: block;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0);
            z-index: 998;
            pointer-events: none;
            transition: background 0.4s ease;
        }
    .nav-toggle:checked ~ .nav-overlay {
            background: rgba(0, 0, 0, 0.6);
            pointer-events: auto;
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
    /* ============================================
           Full-Screen Mobile Navigation
           ============================================ */
        .mobile-nav {
            display: flex;
            flex-direction: column;
            position: fixed;
            inset: 0;
            background: linear-gradient(160deg, #1e1a2b 0%, #4b2679 50%, #eb008b 100%);
            z-index: 1000;
            transform: translateX(100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow-y: auto;
            overscroll-behavior: contain;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    .mobile-nav::-webkit-scrollbar {
            display: none;
        }
    .nav-toggle:checked ~ .mobile-nav {
            transform: translateX(0);
        }
    /* Mobile Nav Header */
        .mobile-nav-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
    .mobile-nav-logo {
            height: 32px;
            width: auto;
        }
    .mobile-nav-close {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-lg);
            cursor: pointer;
            color: #fff;
            transition: all var(--transition-base);
        }
    .mobile-nav-close:hover {
            background: rgba(255, 255, 255, 0.2);
        }
    /* Mobile Nav Content */
        .mobile-nav-content {
            flex: 1;
            padding: 1.5rem 1.25rem;
            overflow-y: auto;
        }
    /* Quick Action Buttons */
        .mobile-nav-actions {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }
    .mobile-nav-action {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            padding: 1rem 0.5rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-xl);
            color: #fff;
            text-decoration: none;
            font-size: 0.8rem;
            font-weight: 500;
            transition: all var(--transition-base);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }
    .mobile-nav-action:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }
    .mobile-nav-action svg {
            opacity: 0.9;
        }
    /* Navigation Links */
        .mobile-nav-links {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }
    .mobile-nav-link {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem 1.25rem;
            background: rgba(255, 255, 255, 0.05);
            border-radius: var(--radius-xl);
            color: #fff;
            text-decoration: none;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateX(30px);
            border: none;
            width: 100%;
            text-align: left;
            font: inherit;
            background-clip: padding-box;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
        }
    .nav-toggle:checked ~ .mobile-nav .mobile-nav-link {
            opacity: 1;
            transform: translateX(0);
            transition-delay: calc(0.05s * var(--i));
        }
    .mobile-nav-link:hover,
        .mobile-nav-link:active {
            background: rgba(255, 255, 255, 0.15);
            transform: translateX(8px);
        }
    .mobile-nav-link.is-active {
            background: rgba(255, 255, 255, 0.2);
            box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.3);
        }
    .mobile-nav-link:focus-visible {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }
    .mobile-nav-link-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-lg);
            flex-shrink: 0;
        }
    .mobile-nav-link-icon svg {
            opacity: 0.9;
        }
    .mobile-nav-link-text {
            flex: 1;
            font-size: 1rem;
            font-weight: 500;
        }
    .mobile-nav-link-arrow {
            opacity: 0.5;
            transition: all var(--transition-base);
        }
    .mobile-nav-link:hover .mobile-nav-link-arrow {
            opacity: 1;
            transform: translateX(4px);
        }
    /* Expandable Dropdowns */
        .mobile-nav-dropdown {
            opacity: 0;
            transform: translateX(30px);
        }
    .nav-toggle:checked ~ .mobile-nav .mobile-nav-dropdown {
            opacity: 1;
            transform: translateX(0);
            transition: opacity 0.3s ease, transform 0.3s ease;
            transition-delay: calc(0.05s * var(--i));
        }
    .mobile-nav-link-expandable {
            cursor: pointer;
        }
    .mobile-nav-link-chevron {
            opacity: 0.5;
            transition: transform 0.3s ease, opacity 0.2s ease;
            flex-shrink: 0;
        }
    .mobile-nav-dropdown.is-expanded .mobile-nav-link-chevron {
            transform: rotate(180deg);
            opacity: 1;
        }
    .mobile-nav-subitems {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, padding 0.35s ease;
            padding: 0 0 0 3.75rem;
        }
    .mobile-nav-dropdown.is-expanded .mobile-nav-subitems {
            max-height: 500px;
            padding: 0.5rem 0 0.5rem 3.75rem;
        }
    .mobile-nav-subitem {
            display: block;
            padding: 0.75rem 1rem;
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-size: 0.95rem;
            border-radius: var(--radius-lg);
            transition: all 0.2s ease;
            margin-bottom: 0.25rem;
        }
    .mobile-nav-subitem:hover,
        .mobile-nav-subitem:active {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            transform: translateX(4px);
        }
    .mobile-nav-subitem.is-active {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
        }
    /* Mobile Nav Footer */
        .mobile-nav-footer {
            padding: 1.25rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.2);
        }
    /* User Section */
        .mobile-nav-user {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-xl);
            margin-bottom: 1rem;
        }
    .mobile-nav-avatar {
            width: 48px;
            height: 48px;
            border-radius: var(--radius-lg);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 1.25rem;
            color: #fff;
            flex-shrink: 0;
        }
    img.mobile-nav-avatar {
            object-fit: cover;
        }
    .mobile-nav-user-info {
            flex: 1;
            min-width: 0;
        }
    .mobile-nav-user-name {
            display: block;
            color: #fff;
            font-weight: 600;
            font-size: 1rem;
            margin-bottom: 0.25rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    .mobile-nav-user-links {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }
    .mobile-nav-user-links a {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.8rem;
            text-decoration: none;
            transition: color var(--transition-base);
        }
    .mobile-nav-user-links a:hover {
            color: #fff;
        }
    /* Auth Buttons */
        .mobile-nav-auth {
            display: flex;
            gap: 0.75rem;
            margin-bottom: 1rem;
        }
    .mobile-nav-auth-btn {
            flex: 1;
            padding: 0.875rem 1rem;
            border-radius: var(--radius-xl);
            text-align: center;
            font-weight: 600;
            font-size: 0.9rem;
            text-decoration: none;
            transition: all var(--transition-base);
        }
    .mobile-nav-login {
            background: rgba(255, 255, 255, 0.15);
            color: #fff;
        }
    .mobile-nav-login:hover {
            background: rgba(255, 255, 255, 0.25);
        }
    .mobile-nav-register {
            background: transparent;
            color: #fff;
            border: 2px solid #fff;
        }
    .mobile-nav-register:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-2px);
        }
    /* Service Info */
        .mobile-nav-info {
            margin-bottom: 1rem;
        }
    .mobile-nav-info p {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.85rem;
            margin: 0 0 0.5rem;
        }
    .mobile-nav-info svg {
            opacity: 0.7;
            flex-shrink: 0;
        }
    /* Social Links */
        .mobile-nav-social {
            display: flex;
            justify-content: center;
            gap: 1rem;
        }
    .mobile-nav-social a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-lg);
            color: #fff;
            transition: all var(--transition-base);
        }
    .mobile-nav-social a:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }
}

@media (max-width: 600px) {
    .hero {
            padding: 2rem 0 2rem;
            min-height: calc(100vh - 70px);
        }
    .header-inner {
            flex-wrap: wrap;
        }
}

/* ============================================
   CMS Template Styles
   ============================================ */

/* Page Hero Section */
.page-hero {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: visible;
}

/* Hero Texture Patterns */
.hero-texture-dots {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='30' cy='10' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='50' cy='10' r='2.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='10' cy='30' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='50' cy='30' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='10' cy='50' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='30' cy='50' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 60px 60px, 100% 100%;
}

.hero-texture-waves {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 40, 50 50 T100 50' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 20, 50 30 T100 30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 60, 50 70 T100 70' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M0 90 Q25 80, 50 90 T100 90' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3Cpath d='M0 10 Q25 0, 50 10 T100 10' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 100px 100px, 100% 100%;
}

.hero-texture-geometric {
    background:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='40,5 75,65 5,65' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Crect x='10' y='10' width='20' height='20' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none' transform='rotate(15 20 20)'/%3E%3Ccircle cx='65' cy='25' r='10' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpolygon points='20,70 30,55 10,55' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 80px 80px, 100% 100%;
}

.hero-texture-topographic {
    background:
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 20 C80 25, 95 45, 90 70 C85 95, 55 100, 35 85 C15 70, 20 40, 40 25 C50 18, 55 18, 60 20' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M60 35 C75 38, 82 52, 78 68 C74 84, 52 88, 40 78 C28 68, 32 48, 45 38 C52 33, 57 33, 60 35' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M60 50 C68 52, 72 60, 70 70 C68 80, 55 82, 48 75 C41 68, 45 58, 52 52 C56 50, 58 50, 60 50' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 120px 120px, 100% 100%;
}

.hero-texture-crosses {
    background:
        url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 20 L25 30 M20 25 L30 25' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1.5'/%3E%3Cpath d='M10 5 L10 12 M6.5 8.5 L13.5 8.5' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3Cpath d='M42 38 L42 46 M38 42 L46 42' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3Cpath d='M8 40 L8 45 M5.5 42.5 L10.5 42.5' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1'/%3E%3Cpath d='M40 8 L40 14 M37 11 L43 11' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 50px 50px, 100% 100%;
}

.hero-texture-stars {
    background:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5 L42 15 L52 15 L44 22 L47 32 L40 26 L33 32 L36 22 L28 15 L38 15 Z' fill='%23ffffff' fill-opacity='0.04'/%3E%3Cpath d='M15 45 L16.5 51 L23 51 L18 55 L19.5 61 L15 57 L10.5 61 L12 55 L7 51 L13.5 51 Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3Cpath d='M65 50 L66 54 L70 54 L67 57 L68 61 L65 58 L62 61 L63 57 L60 54 L64 54 Z' fill='%23ffffff' fill-opacity='0.03'/%3E%3Cpath d='M60 15 L61 18 L64 18 L61.5 20 L62.5 23 L60 21 L57.5 23 L58.5 20 L56 18 L59 18 Z' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 80px 80px, 100% 100%;
}

.hero-texture-organic {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 C60 20, 80 20, 100 10 L100 0 Z' fill='%23ffffff' fill-opacity='0.03'/%3E%3Cpath d='M0 30 C20 50, 40 40, 60 50 C80 60, 90 50, 100 60 L100 100 L0 100 Z' fill='%23ffffff' fill-opacity='0.02'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='80' cy='40' r='3' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='40' cy='70' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='90' cy='80' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='10' cy='60' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='60' cy='15' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 200px 200px, 100% 100%;
}

.hero-texture-diamonds {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30,5 55,30 30,55 5,30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,15 45,30 30,45 15,30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,25 35,30 30,35 25,30' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 60px 60px, 100% 100%;
}

.hero-texture-circuit {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 L30 10 L30 30 L50 30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M70 10 L70 25 L90 25' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M10 50 L25 50 L25 70 L40 70 L40 90' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M60 60 L60 80 L80 80 L80 60' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Ccircle cx='30' cy='10' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='50' cy='30' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='90' cy='25' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='40' cy='90' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='60' cy='60' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 100px 100px, 100% 100%;
}

/* Pink/Magenta gradient textures */
.hero-texture-dots.hero-gradient-pink,
.hero-texture-waves.hero-gradient-pink,
.hero-texture-geometric.hero-gradient-pink,
.hero-texture-topographic.hero-gradient-pink,
.hero-texture-crosses.hero-gradient-pink,
.hero-texture-stars.hero-gradient-pink,
.hero-texture-organic.hero-gradient-pink,
.hero-texture-diamonds.hero-gradient-pink,
.hero-texture-circuit.hero-gradient-pink {
    background-image:
        var(--texture-pattern),
        linear-gradient(135deg, var(--color-magenta) 0%, var(--color-purple) 100%);
}

/* Override gradient for pink variants - need to duplicate the patterns with pink gradient */
.hero-texture-dots.hero-gradient-pink {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='30' cy='10' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='50' cy='10' r='2.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='10' cy='30' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='50' cy='30' r='1.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='10' cy='50' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='30' cy='50' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-magenta) 0%, var(--color-purple) 100%);
    background-size: 60px 60px, 100% 100%;
}

.hero-texture-waves.hero-gradient-pink {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 40, 50 50 T100 50' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 20, 50 30 T100 30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 60, 50 70 T100 70' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M0 90 Q25 80, 50 90 T100 90' stroke='%23ffffff' stroke-opacity='0.03' stroke-width='1' fill='none'/%3E%3Cpath d='M0 10 Q25 0, 50 10 T100 10' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, var(--color-magenta) 0%, var(--color-purple) 100%);
    background-size: 100px 100px, 100% 100%;
}

.page-hero h1 {
    font-size: clamp(1.8rem, 5vw, 2.8rem);
    font-weight: 700;
    margin: 0 0 1rem;
    line-height: 1.2;
}

.page-hero p {
    //font-size: 0.8rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto; 
}

.page-hero .hero_subtext {
    font-size:0.9rem;
}

.page-hero .study-search-form input {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
    -webkit-appearance: none;
    appearance: none;
}

.page-hero .study-search-form input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.page-hero .study-search-form input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.topics-hero,
.questions-hero {
    background: linear-gradient(135deg, rgba(67, 22, 87, 0.85) 0%, rgba(43, 99, 181, 0.85) 100%),
                url('/assets/imgs/gallery/bible-study-topics-hero-image.jpg');
    background-size: cover;
    background-position: center;
    padding: 5rem 0;
    padding-bottom: 6rem; /* Extra space for autocomplete dropdown */
    overflow: visible;
}

.page-hero-full {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.page-hero-image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-hero-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(67, 22, 87, 0.75) 0%, rgba(43, 99, 181, 0.75) 100%);
    z-index: 1;
}

.page-hero-image .container {
    position: relative;
    z-index: 2;
}

.hero-minimal {
    background: var(--color-card-bg);
    color: var(--color-dark);
    padding: 3rem 0;
}

.hero-gradient {
    background: linear-gradient(135deg, var(--color-magenta) 0%, var(--color-purple) 100%);
}

/* Page Content Area */
.page-content {
    padding: 4rem 0;
}

.page-content-full {
    padding: 0;
}

.page-content img:not([class]) {
    border-radius: var(--radius-lg);
    margin: 1.5rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.content-main {
    font-size: 1.1rem;
    line-height: 1.8;
}

.content-main h2 {
    font-size: 2rem;
    margin: 2rem 0 1rem;
    color: var(--color-purple);
}

.content-main h3 {
    font-size: 1.5rem;
    margin: 1.5rem 0 0.75rem;
}

.content-main p {
    margin: 0 0 1.5rem;
}

.content-main ul, .content-main ol {
    margin: 0 0 1.5rem;
    padding-left: 1.5rem;
}

.content-main li {
    margin-bottom: 0.5rem;
}

.content-main img {
    border-radius: var(--radius-md);
    margin: 1.5rem 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.content-main blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: var(--color-grey);
    border-left: 4px solid var(--color-purple);
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
}

/* Sidebar Layout */
.content-grid-sidebar {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
}

.content-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-widget {
    background: var(--color-card-bg);
    padding: 1.5rem;
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
}

.sidebar-widget h3 {
    font-size: 1.1rem;
    margin: 0 0 1rem;
    color: var(--color-purple);
}

.sidebar-cta {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
    padding: 1.5rem;
    border-radius: var(--radius-xl);
}

.sidebar-cta h4 {
    margin: 0 0 0.5rem;
}

@media (max-width: 900px) {
    .content-grid-sidebar {
            grid-template-columns: 1fr;
        }
    .content-sidebar {
            position: static;
        }
}

/* ============================================
   Template-specific Styles
   ============================================ */

/* Two Column Layout */
.two-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.two-column-layout .column-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.two-column-layout .column-media img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .two-column-layout {
            grid-template-columns: 1fr;
        }
}

/* Split Hero */
.split-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
}

.split-hero-content {
    display: flex;
    align-items: center;
    padding: 4rem;
    background: var(--color-card-bg);
}

.split-hero-text h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
    color: var(--color-purple);
}

.split-hero-image {
    background: var(--color-grey);
}

.split-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    .split-hero {
            grid-template-columns: 1fr;
            min-height: auto;
        }
    .split-hero-content {
            padding: 3rem 1.5rem;
            order: 2;
        }
    .split-hero-image {
            height: 50vh;
            order: 1;
        }
}

/* Team Grid */
.team-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.team-member {
    text-align: center;
    padding: 2rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.team-member-photo {
    width: 150px;
    height: 150px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-grey);
}

.team-member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.team-member h3 {
    margin: 0 0 0.25rem;
    color: var(--color-dark);
}

.team-member-role {
    color: var(--color-purple);
    font-weight: 600;
    margin-bottom: 1rem;
}

.team-member-bio {
    color: var(--color-text-muted);
    font-size: 0.95rem;
}

/* Contact Layout */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
}

.contact-info h2 {
    margin-bottom: 2rem;
    color: var(--color-purple);
}

.contact-item {
    margin-bottom: 1.5rem;
}

.contact-item h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.contact-form .form-group {
    margin-bottom: 1.5rem;
}

.contact-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    background: var(--color-card-bg);
}

.contact-map {
    margin-top: 4rem;
}

.contact-map iframe {
    width: 100%;
    height: 400px;
    border: 0;
}

@media (max-width: 768px) {
    .contact-layout {
            grid-template-columns: 1fr;
            gap: 3rem;
        }
}

/* Gallery Grid */
.gallery-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.gallery-item {
    aspect-ratio: 4/3;
    overflow: hidden;
    border-radius: var(--radius-lg);
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Text Heavy / Narrow Content */
.container-narrow {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.text-heavy-content {
    font-size: 1.1rem;
    line-height: 1.9;
}

.text-heavy-content h2 {
    margin-top: 3rem;
    margin-bottom: 1rem;
    color: var(--color-purple);
}

.text-heavy-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.last-updated {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

/* Cards Grid */
.cards-intro {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.cards-grid .card {
    padding: 2rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cards-grid .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-purple);
}

.cards-grid .card h3 {
    margin: 0 0 0.75rem;
}

.cards-grid .card p {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.card-link {
    color: var(--color-purple);
    font-weight: 600;
    text-decoration: none;
}

.card-link:hover {
    text-decoration: underline;
}

/* Centered Template */
.page-hero-centered {
    padding: 5rem 0;
}

.content-centered {
    font-size: 1.15rem;
    line-height: 1.8;
}

.text-center {
    text-align: center;
}

/* Video Hero */
.video-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.video-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.video-hero-background video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.video-hero-content {
    position: relative;
    z-index: 1;
    color: #fff;
    padding: 2rem;
}

.video-hero-content h1 {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 900;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Announcement Template */
.announcement-hero {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
}

.announcement-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1.5rem;
}

.announcement-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    margin-bottom: 1.5rem;
}

.announcement-details {
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.announcement-date {
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.announcement-location {
    opacity: 0.9;
}

.announcement-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.announcement-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-purple);
}

.announcement-cta-section {
    padding: 4rem 0;
    background: var(--color-grey);
}

.announcement-cta-section h2 {
    margin-bottom: 0.5rem;
}

.announcement-cta-section p {
    margin-bottom: 1.5rem;
    color: var(--color-text-muted);
}

/* Landing Page Styles */
.landing-hero {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
    text-align: center;
}

.landing-hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.landing-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    margin: 0.5rem 0 1.5rem;
    line-height: 1.1;
}

.landing-hero .hero-description {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.landing-features {
    padding: 5rem 0;
    background: var(--color-card-bg);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.feature-card {
    text-align: center;
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: var(--color-bg);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(75, 38, 121, 0.1);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    font-size: 1.25rem;
    margin: 0 0 0.75rem;
    color: var(--color-purple);
}

.feature-card p {
    font-size: 0.95rem;
    color: #666;
    margin: 0;
}

.landing-content {
    padding: 4rem 0;
}

.landing-cta {
    padding: 5rem 0;
    background: var(--color-bg);
}

.cta-box {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
    padding: 4rem;
    border-radius: 2rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.cta-box h2 {
    font-size: 2.5rem;
    margin: 0 0 1rem;
}

.cta-box p {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.btn-large {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .features-grid {
            grid-template-columns: 1fr;
        }
    .cta-box {
            padding: 2.5rem;
        }
    .cta-box h2 {
            font-size: 1.75rem;
        }
}

/* CMS Edit Mode Body Offset */
body.cms-edit-mode .site-header {
    top: 50px;
}

/* Editable elements styling - only when CMS is active */
body.cms-edit-mode [data-cms-editable] {
    min-height: 1em;
    transition: outline 0.15s ease;
}

body.cms-edit-mode [data-cms-editable]:hover {
    outline: 2px dashed rgba(102, 126, 234, 0.5);
    outline-offset: 4px;
    cursor: text;
}

/* ============================================
   Event Detail Page
   ============================================ */

.event-hero {
    background-size: cover;
    background-position: center;
    padding: 6rem 0 4rem;
    color: #fff;
    margin-top: -1px;
}

.event-hero-content {
    max-width: 700px;
}

.event-meta {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.event-category-badge {
    background: var(--color-magenta);
    color: #fff;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.event-hero .event-recurring-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
}

.event-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.event-subtitle {
    font-size: 1.25rem;
    opacity: 0.9;
    margin: 0 0 1rem;
}

.event-short-desc {
    font-size: 1.1rem;
    opacity: 0.85;
    line-height: 1.6;
    margin: 0;
}

.event-detail-section {
    padding: 3rem 0;
}

.event-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 3rem;
    align-items: start;
}

.event-main {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.event-section h2 {
    font-size: 1.5rem;
    margin: 0 0 1rem;
    color: var(--color-dark);
}

.event-description {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
}

.event-description p {
    margin: 0 0 1rem;
}

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

.event-list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.event-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color-magenta);
    font-weight: bold;
}

.event-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: sticky;
    top: 100px;
}

.event-info-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.event-info-card h3 {
    font-size: 1.1rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #eee;
}

.event-info-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.event-info-item:last-of-type {
    margin-bottom: 1.5rem;
}

.event-info-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.event-info-item strong {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.25rem;
}

.event-info-item p {
    margin: 0;
    color: var(--color-dark);
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

.upcoming-dates-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.upcoming-dates-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #eee;
}

.upcoming-dates-list li:last-child {
    border-bottom: none;
}

.upcoming-dates-list .date {
    font-weight: 500;
}

.upcoming-dates-list .time {
    color: #666;
}

.event-contact {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

.contact-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-dark);
    font-size: 0.95rem;
}

.contact-link:hover {
    color: var(--color-magenta);
}

@media (max-width: 900px) {
    .event-layout {
            grid-template-columns: 1fr;
        }
    .event-sidebar {
            position: static;
        }
}

@media (max-width: 600px) {
    .event-hero {
            padding: 4rem 0 3rem;
        }
    .event-hero h1 {
            font-size: 1.75rem;
        }
}

.blog-featured-hero .eyebrow {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.blog-featured-hero .post-category {
    background: rgba(255, 255, 255, 0.2);
    margin-bottom: 1rem;
}

.blog-search input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-md);
    font-size: 1rem;
}

.blog-search input:focus {
    outline: none;
    border-color: var(--color-magenta);
}

.clear-filter {
    color: var(--color-magenta);
    text-decoration: none;
}

/* Blog Grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.blog-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.blog-card a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.blog-card-content p {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.5;
}

/* Post Category Badge */
.post-category {
    display: inline-block;
    background: var(--color-magenta);
    color: #fff;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar-widget {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.sidebar-widget h3 {
    font-size: 1rem;
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--color-magenta);
}

.category-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.category-list li {
    margin-bottom: 0.25rem;
}

.category-list a {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    text-decoration: none;
    color: #3f3f46;
    border-bottom: 1px solid #f4f4f5;
    transition: color 200ms ease;
}

.category-list a:hover,
.category-list a.active {
    color: var(--color-magenta);
}

.category-list .count {
    background: #f4f4f5;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
}

.tag {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    background: #f4f4f5;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    text-decoration: none;
    color: #3f3f46;
    transition: all var(--transition-base);
}

.tag:hover,
.tag.active {
    background: var(--color-magenta);
    color: #fff;
}

/* Sidebar CTA */
.sidebar-cta {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
}

.sidebar-cta h3 {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.sidebar-cta p {
    opacity: 0.9;
    margin-bottom: 1rem;
}

.blog-empty p {
    color: var(--color-text-muted);
}

.post-body blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    background: var(--color-grey);
    border-left: 4px solid var(--color-purple);
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
}

.share-link {
    color: var(--color-magenta);
    text-decoration: none;
}

/* Comments Section */
.blog-comments {
    padding: 3rem 0;
    background: #e8eaed;
}

.blog-comments h2 {
    margin-bottom: 2rem;
}

.comments-list {
    margin-bottom: 3rem;
}

.comment {
    background: var(--color-card-bg);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.comment.reply {
    margin-left: 2rem;
    background: #f8fafc;
}

.comment-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.comment-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

.comment-author {
    color: var(--color-dark);
    flex-grow: 1;
}

.comment-author-link {
    color: var(--color-dark);
    font-weight: 700;
    text-decoration: none;
    flex-grow: 1;
}

.comment-author-link:hover {
    color: var(--color-magenta);
}

.comment-date {
    color: #a1a1aa;
    font-size: 0.875rem;
}

.comment-content {
    color: #3f3f46;
    line-height: 1.6;
}

.comment-content.truncated {
    max-height: 9.6em; /* Approximately 6 lines */
    overflow: hidden;
    position: relative;
}

.comment-content.truncated::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.5em;
    background: linear-gradient(transparent, #fff);
}

.comment.reply .comment-content.truncated::after {
    background: linear-gradient(transparent, #f8fafc);
}

.comment-content.expanded {
    max-height: none;
}

.read-more-btn {
    background: none;
    border: none;
    color: var(--color-magenta);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0;
    margin-right: 1rem;
}

.read-more-btn:hover {
    text-decoration: underline;
}

.comment-replies {
    margin-top: 1rem;
}

/* New comment highlight animation */
.comment.new-comment {
    animation: commentFadeIn 0.5s ease-out;
}

.comment.highlight {
    animation: commentHighlight 2s ease-out;
}

@keyframes commentFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes commentHighlight {
    0%, 30% {
        background: rgba(255, 20, 147, 0.1);
    }
    100% {
        background: transparent;
    }
}

.reply-btn {
    background: none;
    border: none;
    color: var(--color-magenta);
    cursor: pointer;
    font-size: 0.875rem;
    padding: 0;
    margin-top: 0.75rem;
}

.reply-form-container {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: var(--radius-md);
}

/* Comment Form */
.comment-form-section {
    background: var(--color-card-bg);
    padding: 2rem;
    border-radius: var(--radius-xl);
}

.comment-form-section h3 {
    margin-bottom: 1.5rem;
}

.comment-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: inherit;
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--color-magenta);
}

.comment-form textarea {
    resize: vertical;
    min-height: 120px;
    margin-bottom: 1rem;
}

.comment-form-user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-md);
}

.comment-form-username {
    font-weight: 600;
    color: var(--color-dark);
}

.comment-login-prompt {
    margin-top: 1rem;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.comment-login-prompt a {
    color: var(--color-magenta);
    text-decoration: underline;
}

/* Related Posts */
.related-posts {
    padding: 4rem 0;
}

.related-posts h2 {
    text-align: center;
    margin-bottom: 2rem;
}

/* Alert Styles */
.alert {
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.alert-success {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.alert-error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.profile-avatar-large {
    flex-shrink: 0;
}

.profile-avatar-large img,
.profile-avatar-large .avatar-initials {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(255, 255, 255, 0.2);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.stat-card {
    background: var(--color-card-bg);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-purple);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Studies Grid */
.studies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.study-card {
    display: block;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.study-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Profile Responsive */
@media (max-width: 768px) {
    .profile-avatar-large img,
        .profile-avatar-large .avatar-initials {
            width: 100px;
            height: 100px;
        }
    .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
}

/* Blog Responsive */
@media (max-width: 900px) {
    .sidebar-widget {
            flex: 1;
            min-width: 250px;
        }
}

@media (max-width: 600px) {
    .blog-grid {
            grid-template-columns: 1fr;
        }
    .comment-form .form-row {
            grid-template-columns: 1fr;
        }
    .comment.reply {
            margin-left: 1rem;
        }
}

/* ============================================
   Bible Study Library Styles
   ============================================ */

/* Bible Study Search Bar */
.bible-study-search {
    padding: 2rem 0;
    background: var(--color-card-bg);
    border-bottom: 1px solid #e4e4e7;
}

.study-search-form input {
    flex: 1;
    padding: 0.875rem 1.25rem;
    border: 2px solid #e4e4e7;
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.study-search-form input:focus {
    outline: none;
    border-color: var(--color-purple);
}

.page-hero .autocomplete-dropdown {
    z-index: 99;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
    display: none;
    margin-top: 4px;
    text-align: left;
}

.autocomplete-dropdown.active {
    display: block;
}

.autocomplete-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    text-decoration: none;
    color: #1a1a1a;
    transition: background 0.15s;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.selected {
    background: #f8f5ff;
}

.autocomplete-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.autocomplete-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.autocomplete-question {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 0.95rem;
    line-height: 1.3;
}

.autocomplete-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #666;
}

.autocomplete-count {
    color: #888;
    font-size: 0.75rem;
}

/* Topic items in autocomplete */
.autocomplete-topic-item {
    background: #fafafa;
    border-left: 3px solid var(--color-purple);
}

.autocomplete-topic-item:hover {
    background: #f0ebf8;
}

.autocomplete-label {
    display: inline-block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-purple);
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.autocomplete-title {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 0.95rem;
    line-height: 1.3;
}

.autocomplete-parent {
    color: #666;
    font-size: 0.75rem;
}

.autocomplete-topic-badge {
    background: #f0ebf8;
    color: var(--color-purple);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
}

.autocomplete-no-results {
    padding: 1.25rem;
    text-align: center;
    color: #666;
}

.autocomplete-no-results a {
    color: var(--color-purple);
    font-weight: 500;
}

.filter-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label {
    font-weight: 600;
    color: #666;
    font-size: 0.9rem;
}

.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: #f5f5f5;
    border-radius: 2rem;
    font-size: 0.85rem;
    color: #444;
    text-decoration: none;
    transition: all 0.15s;
}

.filter-pill:hover {
    background: #e8e8e8;
}

.filter-pill.active {
    background: var(--color-purple);
    color: #fff;
}

.sort-select {
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 0.9rem;
}

.results-count {
    margin-top: 1rem;
    color: #666;
    font-size: 0.9rem;
}

.questions-list {
    padding: 2rem 0 4rem;
}

.topic-questions-section .topic-heading a {
    color: inherit;
    text-decoration: none;
}

.topic-questions-section .topic-heading a:hover {
    color: var(--color-purple);
}

.topic-questions-section .question-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: #888;
    margin-left: auto;
}

.question-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
}

.question-card .question-text {
    font-weight: 600;
    color: #1a1a1a;
    font-size: 1rem;
    line-height: 1.4;
}

.question-card .question-description {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #666;
    line-height: 1.5;
}

.question-card .study-count {
    font-size: 0.8rem;
    color: #888;
}

/* Bible Study Stats */
.bible-study-stats {
    padding: 2rem 0;
    background: var(--color-grey);
}

.stat {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-purple);
    line-height: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Bible Study Hero (condensed layout) */
.bible-study-hero {
    background: linear-gradient(135deg, rgba(67, 22, 87, 0.85) 0%, rgba(43, 99, 181, 0.85) 100%),
                url('/assets/imgs/gallery/bible-study-hero-image.jpg');
    background-size: cover;
    background-position: center;
    padding: 5rem 0 2.5rem;
}

.bible-study-hero .study-search-form input {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.bible-study-hero .study-search-form input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.bible-study-hero .study-search-form input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.hero-topics-link .btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.hero-topics-link .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.hero-stat-number {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.hero-stat-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.recent-study-card {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
    background: var(--color-grey);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
    scroll-snap-align: start;
}

.recent-study-card:hover {
    background: var(--color-dark);
    color: #fff;
}

.recent-study-card .study-book {
    font-size: 0.875rem;
    color: var(--color-purple);
    font-weight: 600;
}

.recent-study-card:hover .study-book {
    color: var(--color-magenta);
}

.recent-study-card .study-title {
    font-size: 0.8rem;
    opacity: 0.7;
    margin-top: 0.25rem;
}

.testament-description {
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

.book-card {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    border: 1px solid #e4e4e7;
    transition: all 0.2s;
}

.book-card .book-chapters {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.book-card .book-progress {
    font-size: 0.7rem;
    color: var(--color-purple);
    font-weight: 600;
    margin-top: 0.25rem;
}

.book-card .book-coming-soon {
    font-size: 0.7rem;
    color: #a1a1aa;
    font-style: italic;
    margin-top: 0.25rem;
}

.about-card p {
    color: var(--color-text-muted);
    line-height: 1.8;
}

.about-card a:not(.btn),
.about a:not(.btn),
.content-section a:not(.btn) {
    color: var(--color-magenta);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

.about-card a:not(.btn):hover,
.about a:not(.btn):hover,
.content-section a:not(.btn):hover {
    color: var(--color-purple);
}

.chapters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.75rem;
}

.chapter-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    border: 1px solid #e4e4e7;
    text-align: center;
    transition: all 0.2s;
}

.chapter-card.available {
    cursor: pointer;
}

.chapter-card.available:hover {
    border-color: var(--color-purple);
    background: var(--color-purple);
    color: #fff;
}

.chapter-card.unavailable {
    opacity: 0.5;
    cursor: not-allowed;
}

.chapter-card .chapter-number {
    font-size: 1.5rem;
    font-weight: 700;
}

.chapter-card .chapter-title {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    opacity: 0.7;
}

.book-nav-link {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.5rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.book-nav-link:hover {
    background: var(--color-dark);
    color: #fff;
}

.study-header {
    padding: 3rem 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-purple) 100%);
    color: #fff;
}

/* Study header textures */
.study-header.hero-texture-dots {
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff' fill-opacity='0.07'/%3E%3Ccircle cx='10' cy='10' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='50' cy='10' r='1' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='10' cy='50' r='1' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='50' cy='50' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 60px 60px, 100% 100%;
}

.study-header.hero-texture-topographic {
    background: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='60' cy='60' rx='50' ry='30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cellipse cx='60' cy='60' rx='35' ry='20' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cellipse cx='60' cy='60' rx='20' ry='10' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 120px 120px, 100% 100%;
}

.study-header.hero-texture-diamonds {
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30,5 55,30 30,55 5,30' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,15 45,30 30,45 15,30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,25 35,30 30,35 25,30' fill='%23ffffff' fill-opacity='0.03'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    background-size: 60px 60px, 100% 100%;
}

.study-title {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 1rem;
}

.sidebar-section h3 {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
}

.chapter-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: var(--color-grey);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
    text-decoration: none;
    transition: background 0.15s, transform 0.1s;
}

.chapter-grid-item:hover {
    background: #e4e4e7;
    transform: scale(1.05);
}

.chapter-grid-item.active {
    background: var(--color-purple);
    color: #fff;
}

.chapter-grid-item.active:hover {
    background: var(--color-purple);
    transform: scale(1.05);
}

.verse-nav-item {
    padding: 0.25rem 0.5rem;
    background: var(--color-grey);
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.15s;
}

.verse-nav-item:hover {
    background: var(--color-purple);
    color: #fff;
}

.study-summary {
    background: var(--color-grey);
    padding: 1.5rem 2rem;
    border-radius: var(--radius-lg);
    margin-bottom: 2rem;
}

.study-summary h2 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-purple);
    margin: 0 0 0.5rem;
}

.study-summary p {
    margin: 0;
    color: var(--color-text-muted);
    line-height: 1.7;
}

.study-body h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--color-dark);
}

.study-body p {
    margin-bottom: 1.25rem;
}

/* Intro Text - lead paragraph styling */
.study-body .intro-text,
.post-body .intro-text,
.content-main .intro-text,
.content-section .intro-text {
    font-size: 1.25em;
    line-height: 1.7;
    color: var(--color-text-muted);
    font-weight: 400;
    margin-bottom: 2rem;
}

/* Verse Markers */
.verse-marker {
    display: inline-block;
    font-weight: 700;
    color: var(--color-purple);
    margin-right: 0.25rem;
    scroll-margin-top: 120px;
    transition: background 0.3s;
}

.chapter-nav {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.5rem;
    background: var(--color-grey);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.chapter-nav:hover {
    background: var(--color-dark);
    color: #fff;
}

.search-results h2 {
    margin-bottom: 1.5rem;
}

.search-result-card .result-book {
    font-weight: 700;
    color: var(--color-purple);
}

.search-result-card .result-title {
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.search-result-card .result-snippet {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.search-result-card .result-meta {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #a1a1aa;
}

/* No Results */
.no-results {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
}

.no-results p {
    color: var(--color-text-muted);
}

.no-results ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.5rem;
}

.no-results li {
    padding: 0.25rem 0;
    color: var(--color-text-muted);
}

.tip {
    background: var(--color-card-bg);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid #e4e4e7;
}

.tip h3 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: var(--color-purple);
}

.tip p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

/* Bible Study Responsive */
@media (max-width: 900px) {
    .stats-row {
            gap: 2rem;
        }
}

@media (max-width: 600px) {
    .stats-row {
            flex-direction: column;
            gap: 1.5rem;
        }
    .chapters-grid {
            grid-template-columns: repeat(3, 1fr);
        }
}

/* ============================================
   Print Styles for Bible Study
   Creates clean, document-quality printouts
   ============================================ */
@media print {
    /* Reset and base print styles */
        body {
            background: #fff !important;
            color: #000 !important;
        }
    * {
            box-shadow: none !important;
            text-shadow: none !important;
        }
    /* Page setup */
        @page {
            margin: 2cm 2.5cm;
            size: A4;
        }
    html, body {
            font-size: 11pt;
            line-height: 1.6;
            visibility: visible !important;
            display: block !important;
            overflow: visible !important;
            height: auto !important;
        }
    /* Hide everything we don't need */
        .site-header,
        .site-footer,
        .study-sidebar,
        .study-subnav,
        .section-subnav,
        .chapter-pagination,
        .mobile-study-bar,
        .mobile-panel,
        .mobile-panel-overlay,
        .back-link,
        .btn,
        button:not(.print-btn),
        .cross-references,
        .related-studies,
        .highlight-menu,
        .highlight-toast,
        .cms-toolbar,
        .cms-floating-toolbar,
        #cms-toolbar,
        #cms-floating-toolbar,
        .cms-edit-mode-banner,
        .cms-exit-btn,
        .cms-edit-indicator,
        [data-cms-editable]::before,
        [data-cms-editable]::after,
        nav:not(.breadcrumb),
        .primary-nav,
        .nav-toggle,
        .nav-toggle-label,
        .testament-badge,
        .study-topics,
        .save-study-btn,
        .study-header,
        .study-actions,
        .font-settings-wrapper,
        .audio-player,
        footer {
            display: none !important;
        }
    /* Main content area - ensure visibility */
        body,
        main,
        #content {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: visible !important;
            height: auto !important;
            position: static !important;
        }
    .container,
        .container.narrow {
            display: block !important;
            visibility: visible !important;
            max-width: none !important;
            width: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }
    /* Page breaks */
        h1, h2, h3, h4 {
            page-break-after: avoid;
        }
    p, blockquote, ul, ol {
            page-break-inside: avoid;
        }
    /* Ensure images print well */
        img {
            max-width: 100% !important;
            page-break-inside: avoid;
        }
    /* Hide any interactive elements */
        [contenteditable],
        [data-cms-editable] {
            outline: none !important;
            border: none !important;
        }
}

/* ============================================
   Bible Study Topics Styles
   ============================================ */

.topics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.topic-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    border: 1px solid #e4e4e7;
    transition: all 0.2s;
}

.topic-card:hover {
    border-color: var(--color-purple);
    box-shadow: 0 4px 12px rgba(75, 38, 121, 0.1);
}

.topic-card .topic-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Single Topic Page */
.topic-hero {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--color-dark) 0%, var(--color-purple) 100%);
    color: #fff;
    text-align: center;
}

.topic-study-card .study-book {
    font-weight: 700;
    color: var(--color-purple);
}

.topic-study-card .study-relevance {
    font-size: 0.7rem;
    padding: 0.125rem 0.5rem;
    background: var(--color-grey);
    border-radius: var(--radius-full);
    color: var(--color-text-muted);
}

.topic-study-card .study-summary {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 0.5rem;
    line-height: 1.6;
}

.topic-study-card .study-time {
    font-size: 0.75rem;
    color: #a1a1aa;
}

.related-topic-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-full);
    border: 1px solid #e4e4e7;
    transition: all 0.2s;
}

.related-topic-card:hover {
    border-color: var(--color-purple);
    background: var(--color-purple);
    color: #fff;
}

/* Topics Responsive */
@media (max-width: 768px) {
    .topics-grid {
            grid-template-columns: 1fr;
        }
}

/* ============================================
   Cross-References & Related Studies
   ============================================ */

/* Cross References Section */
.cross-references {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid #e4e4e7;
}

.cross-references h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-purple);
    margin: 0 0 1rem;
}

.related-studies h3 {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-purple);
    margin: 0 0 1rem;
}

.related-study-card {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    background: var(--color-grey);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.related-study-card:hover {
    background: var(--color-dark);
    color: #fff;
}

/* Inline Scripture Links (in study body content) */
.scripture-link {
    color: var(--color-blue);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-blue);
    transition: all 0.2s;
    cursor: pointer;
}

.scripture-link:hover {
    color: var(--color-magenta);
    border-bottom-color: var(--color-magenta);
    border-bottom-style: solid;
}

.scripture-link.has-study::after {
    content: '\2192';
    font-size: 0.75em;
    margin-left: 0.25em;
    opacity: 0;
    transition: opacity 0.2s;
}

.scripture-link.has-study:hover::after {
    opacity: 1;
}

.scripture-ref.no-study {
    color: var(--color-text-muted);
    font-style: italic;
    cursor: help;
}

.questions-popular .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.questions-popular h2 {
    margin-bottom: 0;
}

.questions-popular .view-all-link {
    font-weight: 500;
    color: var(--color-magenta);
    text-decoration: none;
}

.category-description {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.subtopic-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    transition: all 0.2s;
}

.subtopic-link.has-content:hover {
    background: var(--color-dark);
    color: #fff;
}

.question-card .question-description {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.question-card .question-studies {
    font-size: 0.75rem;
    color: var(--color-blue);
    margin-top: auto;
}

.question-page .breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
}

.question-page .breadcrumb a:hover {
    color: #fff;
}

.question-hero {
    padding: 3rem 0;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-dark) 100%);
    color: #fff;
}

.section-intro {
    text-align: center;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto 2rem;
}

.study-reference {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-blue);
    font-weight: 600;
}

.study-details .study-summary {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.relevance-badge {
    background: rgba(75, 38, 121, 0.1);
    color: var(--color-purple);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-full);
}

.read-arrow {
    font-size: 1.25rem;
    color: #a1a1aa;
    align-self: center;
    transition: transform 0.2s;
}

.question-study-card:hover .read-arrow {
    transform: translateX(4px);
    color: var(--color-magenta);
}

.related-question-card .study-count {
    font-size: 0.75rem;
    color: var(--color-blue);
    margin-top: 0.5rem;
}

.question-cta .cta-box h3 {
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    color: #fff;
    position: relative;
}

.question-cta .cta-box p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1.75rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.question-cta .cta-buttons .btn-primary {
    background: #fff;
    color: var(--color-purple);
    border: none;
}

.question-cta .cta-buttons .btn-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.question-cta .cta-buttons .btn-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

/* ========================================
   Authentication Pages
   ======================================== */

.auth-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: 3rem 0;
}

/* Auth page with grey wave texture */
.auth-page.hero-texture-waves {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 40, 50 50 T100 50' stroke='%23888888' stroke-opacity='0.15' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 20, 50 30 T100 30' stroke='%23888888' stroke-opacity='0.1' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 60, 50 70 T100 70' stroke='%23888888' stroke-opacity='0.12' stroke-width='1' fill='none'/%3E%3Cpath d='M0 90 Q25 80, 50 90 T100 90' stroke='%23888888' stroke-opacity='0.08' stroke-width='1' fill='none'/%3E%3Cpath d='M0 10 Q25 0, 50 10 T100 10' stroke='%23888888' stroke-opacity='0.1' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        #f5f5f7;
    background-size: 100px 100px, 100% 100%;
}

[data-theme="dark"] .auth-page.hero-texture-waves {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 40, 50 50 T100 50' stroke='%23666666' stroke-opacity='0.2' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 20, 50 30 T100 30' stroke='%23666666' stroke-opacity='0.15' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 60, 50 70 T100 70' stroke='%23666666' stroke-opacity='0.18' stroke-width='1' fill='none'/%3E%3Cpath d='M0 90 Q25 80, 50 90 T100 90' stroke='%23666666' stroke-opacity='0.1' stroke-width='1' fill='none'/%3E%3Cpath d='M0 10 Q25 0, 50 10 T100 10' stroke='%23666666' stroke-opacity='0.15' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        #1a1a1d;
    background-size: 100px 100px, 100% 100%;
}

.auth-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    max-width: 480px;
    margin: 0 auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-header h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.auth-header p {
    color: var(--color-text-muted);
}

.auth-form .form-group {
    margin-bottom: 1.25rem;
}

.auth-form label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.auth-form input:focus {
    outline: none;
    border-color: var(--color-blue);
}

.form-group.has-error input {
    border-color: #ef4444;
}

.form-error {
    display: block;
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 0.35rem;
}

.form-hint {
    display: block;
    color: #a1a1aa;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-row-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
}

.btn-block {
    width: 100%;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e4e4e7;
    color: var(--color-text-muted);
}

.auth-footer a {
    color: var(--color-blue);
    font-weight: 600;
}

.alert {
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
}

.alert-error {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.alert-success {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.stat-card {
    background: var(--color-card-bg);
    padding: 1.25rem;
    border-radius: var(--radius-lg);
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-purple);
}

.stat-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header h2 {
    font-size: 1.1rem;
    margin: 0;
}

/* Plans List */
.plans-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.progress-bar {
    width: 80px;
    height: 8px;
    background: #e4e4e7;
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--color-magenta);
    border-radius: var(--radius-full);
}

.highlights-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.highlight-yellow {
    background: #fef9c3;
    border-color: #facc15;
}

.highlight-green {
    background: #dcfce7;
    border-color: #22c55e;
}

.highlight-blue {
    background: #dbeafe;
    border-color: #3b82f6;
}

.highlight-pink {
    background: #fce7f3;
    border-color: #ec4899;
}

.highlight-orange {
    background: #ffedd5;
    border-color: #f97316;
}

/* Quick Links */
.quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 2rem;
}

.empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.empty-state h3 {
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

/* Dashboard Responsive */
@media (max-width: 900px) {
    .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    .form-row {
            grid-template-columns: 1fr;
        }
}

.plans-hero .search-input {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    -webkit-appearance: none;
    appearance: none;
    color-scheme: dark;
}

.plans-hero .search-input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.plans-hero .search-input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.plans-hero .search-results-count {
    color: rgba(255, 255, 255, 0.9);
}

.plans-login-prompt a {
    color: var(--color-primary);
    font-weight: 600;
}

.plan-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Badges on thumbnail */
.plan-thumbnail .featured-badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-xl);
    z-index: 2;
}

.plan-description {
    color: var(--color-text-muted);
    margin-bottom: 1rem;
    line-height: 1.5;
    font-size: 0.9rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.plan-actions {
    margin-top: auto;
}

.plan-actions .btn {
    width: 100%;
}

/* =====================================================
   SETTINGS PAGE
   ===================================================== */

.settings-page {
    padding: 2rem 0 4rem;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.settings-header h1 {
    font-size: 2rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.settings-section {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.settings-section h2 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e4e4e7;
}

.settings-section .section-description {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: -1rem 0 1.5rem;
}

.input-with-prefix {
    display: flex;
    align-items: center;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #fff;
}

.input-with-prefix .input-prefix {
    padding: 0.75rem 0.75rem;
    background: #f4f4f5;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
    border-right: 1px solid #e4e4e7;
}

.input-with-prefix input {
    flex: 1;
    border: none !important;
    border-radius: 0 !important;
    padding-left: 0.75rem !important;
}

.input-with-prefix input:focus {
    box-shadow: none !important;
}

.input-with-prefix:focus-within {
    border-color: var(--color-magenta);
}

[data-theme="dark"] .input-with-prefix {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
}

[data-theme="dark"] .input-with-prefix .input-prefix {
    background: #27272a;
    border-color: var(--color-border);
}

.settings-form .form-group {
    margin-bottom: 1.25rem;
}

.settings-form label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.settings-form input[type="text"],
.settings-form input[type="email"],
.settings-form input[type="password"],
.settings-form textarea,
.settings-form select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #e4e4e7;
    border-radius: var(--radius-md);
    font-size: 1rem;
}

.settings-form input:focus,
.settings-form textarea:focus,
.settings-form select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.settings-form input:disabled {
    background: #f4f4f5;
    color: var(--color-text-muted);
}

.settings-form small {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: normal;
}

.checkbox-group input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
}

.stats-summary {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e4e4e7;
}

.stat-item:last-child {
    border-bottom: none;
}

.stat-item .stat-label {
    color: var(--color-text-muted);
}

.stat-item .stat-value {
    font-weight: 600;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.back-link {
    color: var(--color-primary);
    font-weight: 500;
}

.back-link:hover {
    text-decoration: underline;
}

.search-input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 2.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-card-bg);
    font-size: 1rem;
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.search-input::placeholder {
    color: var(--color-text-muted);
}

.search-results-count {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.filter-btn {
    padding: 0.5rem 1rem;
    border: 1px solid #e4e4e7;
    border-radius: 2rem;
    background: var(--color-card-bg);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.filter-btn:hover {
    border-color: var(--color-primary);
}

.filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.filter-btn.highlight-yellow {
    border-color: #fef08a;
}

.filter-btn.highlight-yellow.active {
    background: #fef08a;
    color: #854d0e;
}

.filter-btn.highlight-green {
    border-color: #bbf7d0;
}

.filter-btn.highlight-green.active {
    background: #bbf7d0;
    color: #166534;
}

.filter-btn.highlight-blue {
    border-color: #bfdbfe;
}

.filter-btn.highlight-blue.active {
    background: #bfdbfe;
    color: #1e40af;
}

.filter-btn.highlight-pink {
    border-color: #fbcfe8;
}

.filter-btn.highlight-pink.active {
    background: #fbcfe8;
    color: #9d174d;
}

.filter-btn.highlight-orange {
    border-color: #fed7aa;
}

.filter-btn.highlight-orange.active {
    background: #fed7aa;
    color: #9a3412;
}

.highlights-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.highlight-card {
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    background: #fef9c3;
    border-left: 4px solid #eab308;
}

.highlight-card.highlight-green {
    background: #dcfce7;
    border-left-color: #22c55e;
}

.highlight-card.highlight-blue {
    background: #dbeafe;
    border-left-color: #3b82f6;
}

.highlight-card.highlight-pink {
    background: #fce7f3;
    border-left-color: #ec4899;
}

.highlight-card.highlight-orange {
    background: #ffedd5;
    border-left-color: #f97316;
}

/* =====================================================
   RESPONSIVE FOR USER PAGES
   ===================================================== */
@media (max-width: 768px) {
    .settings-grid {
            grid-template-columns: 1fr;
        }
    .page-header {
            flex-direction: column;
            gap: 1rem;
        }
    .filter-btn {
            flex-shrink: 0;
        }
}

/* =====================================================
   USER NAVIGATION (Header)
   ===================================================== */

.user-nav {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 1.5rem;
}

.user-nav .btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    margin-top: 0;
}

/* User Menu Dropdown */
.user-menu {
    position: relative;
    z-index: 9999;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    transition: background 0.2s;
}

.user-menu-trigger:hover {
    background: #f4f4f5;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: var(--color-purple); /* fallback, overridden by inline style */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.user-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.user-name {
    font-weight: 500;
    color: var(--color-dark);
}

.user-menu-trigger .chevron {
    color: var(--color-text-muted);
    transition: transform 0.2s;
}

.user-menu.open .user-menu-trigger .chevron {
    transform: rotate(180deg);
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    min-width: 200px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    z-index: 99999;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.user-menu.open .user-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    color: var(--color-dark);
    border-radius: var(--radius-md);
    transition: background 0.2s;
    font-size: 0.9375rem;
}

.dropdown-item:hover {
    background: #f4f4f5;
}

.dropdown-item svg {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.dropdown-item:hover svg {
    color: var(--color-primary);
}

.dropdown-divider {
    height: 1px;
    background: #e4e4e7;
    margin: 0.5rem 0;
}

.dropdown-item-danger {
    color: #dc2626;
}

.dropdown-item-danger:hover {
    background: #fef2f2;
}

.dropdown-item-danger svg {
    color: #dc2626;
}

/* Mobile User Nav */
@media (max-width: 900px) {
    .user-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 4rem;
            margin-left: 0;
        }
    .user-name {
            display: none;
        }
    .user-menu-trigger .chevron {
            display: none;
        }
    .btn-login {
            display: none;
        }
    .user-nav .btn-sm {
            padding: 0.4rem 0.75rem;
            font-size: 0.8rem;
        }
    .user-dropdown {
            right: -1rem;
        }
}

.breadcrumb a {
    color: var(--color-primary);
}

.breadcrumb .separator {
    color: #a1a1aa;
}

.day-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
}

.day-header h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.day-content {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin-bottom: 2rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.plan-meta-pill {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    padding: 0.4rem 0.9rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
}

/* Action button - full width, prominent */
.plan-action-btn {
    display: block;
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    border-radius: var(--radius-lg);
    border: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.plan-action-btn.primary {
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.plan-action-btn.primary:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.2) 100%);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Desktop: Full-width hero with content and actions side by side */
@media (min-width: 900px) {
    .plan-hero .plan-meta-pill {
            background: rgba(255,255,255,0.2);
            border-color: rgba(255,255,255,0.3);
            color: #fff;
        }
    .plan-hero .plan-hero-actions .plan-action-btn.primary {
            background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.15) 100%) !important;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: #fff !important;
            border: 1px solid rgba(255,255,255,0.3);
            box-shadow: 0 4px 14px rgba(0,0,0,0.1);
        }
}

[data-theme="dark"] .plan-meta-pill {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
}

.day-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 1rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.day-card:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.day-card.completed {
    background: #f0fdf4;
}

.day-card.current {
    border: 2px solid var(--color-primary);
}

.day-scripture {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .day-card {
            padding: 0.875rem 1rem;
            gap: 0.75rem;
        }
    .day-header {
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
    .day-header h1 {
            font-size: 1.5rem;
        }
    .day-content {
            padding: 1.25rem;
            margin-bottom: 1.5rem;
        }
    .btn-lg {
            padding: 0.875rem 1.5rem;
            font-size: 1rem;
            width: 100%;
            max-width: 300px;
        }
}

/* =====================================================
   NAVIGATION DROPDOWNS
   ===================================================== */

.nav-dropdown {
    position: relative;
}

.nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    cursor: pointer;
    padding: 0.5rem 0;
}

.nav-dropdown-trigger:hover {
    color: var(--color-primary);
}

.nav-dropdown.is-active .nav-dropdown-trigger {
    color: var(--color-primary);
}

.nav-chevron {
    transition: transform 0.2s;
}

.nav-dropdown.open .nav-chevron {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-card-bg);
    border-radius: 0 0 0.75rem 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    margin-top: 24px;
}

.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.625rem 1rem;
    color: var(--color-dark);
    border-radius: var(--radius-md);
    transition: background 0.2s;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    background: #f4f4f5;
    color: var(--color-primary);
}

/* Mobile Nav Dropdown */
@media (max-width: 900px) {
    .nav-dropdown {
            width: 100%;
        }
    .nav-dropdown-trigger {
            width: 100%;
            justify-content: center;
            padding: 1rem;
        }
    .nav-dropdown-menu {
            position: static;
            transform: none;
            box-shadow: none;
            background: rgba(0,0,0,0.05);
            border-radius: var(--radius-md);
            margin: 0.5rem 1rem;
            display: none;
        }
    .nav-dropdown.open .nav-dropdown-menu {
            display: block;
            opacity: 1;
            visibility: visible;
        }
    .nav-dropdown-menu a {
            text-align: center;
            padding: 0.75rem 1rem;
        }
}

.btn-give {
    display: inline-block;
}

.btn-contact {
    display: inline-block;
    margin-top:15px;
}

@media (max-width: 900px) {
    .mobile-bar-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.125rem;
            padding: 0.5rem 0.75rem;
            background: none;
            border: none;
            color: var(--color-text-muted);
            font-size: 0.6875rem;
            font-weight: 500;
            cursor: pointer;
            border-radius: var(--radius-md);
            transition: color 0.2s, background 0.2s;
            text-decoration: none;
        }
    .mobile-bar-btn:hover,
        .mobile-bar-btn:active {
            color: var(--color-primary);
            background: #f4f4f5;
        }
    .mobile-chapter-item {
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1;
            background: #f8fafc;
            border-radius: var(--radius-md);
            font-weight: 600;
            color: var(--color-dark);
            text-decoration: none;
            transition: background 0.2s;
        }
    .mobile-chapter-item:hover,
        .mobile-chapter-item:active {
            background: #e4e4e7;
        }
    .mobile-chapter-item.active {
            background: var(--color-purple);
            color: #fff;
        }
    .mobile-panel-section h4 {
            font-size: 0.8125rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--color-text-muted);
            margin-bottom: 0.75rem;
        }
    .mobile-verse-item {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.5rem;
            background: #f8fafc;
            border-radius: var(--radius-sm);
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--color-dark);
            text-decoration: none;
        }
    .mobile-verse-item:active {
            background: var(--color-primary);
            color: #fff;
        }
    /* Action Buttons */
        .mobile-action-btn {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            width: 100%;
            padding: 1rem;
            background: #f8fafc;
            border: none;
            border-radius: var(--radius-md);
            color: var(--color-dark);
            font-size: 0.9375rem;
            font-weight: 500;
            text-decoration: none;
            cursor: pointer;
            margin-bottom: 0.5rem;
        }
    .mobile-action-btn:active {
            background: #e4e4e7;
        }
}

/* =====================================================
   DARK MODE SPECIFIC OVERRIDES
   ===================================================== */

[data-theme="dark"] .site-footer {
    background: #0a0a0f;
}

[data-theme="dark"] .footer-main {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .footer-bottom {
    background: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .study-subnav,
[data-theme="dark"] .section-subnav {
    background: #1c1c21;
    border-top-color: #2e2e33;
}

[data-theme="dark"] .study-subnav-item:hover,
[data-theme="dark"] .section-subnav-item:hover {
    background: #2e2e33;
    color: #e4e4e7;
}

[data-theme="dark"] .day-card {
    background: #1c1c21;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

[data-theme="dark"] .day-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

[data-theme="dark"] .day-card.completed {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

[data-theme="dark"] .day-card.current {
    border-color: var(--color-primary);
}

[data-theme="dark"] .day-info h3 {
    color: #e4e4e7;
}

[data-theme="dark"] .mobile-action-btn {
    background: #2e2e33;
    color: #e4e4e7;
}

[data-theme="dark"] .mobile-chapter-item,
[data-theme="dark"] .mobile-verse-item {
    background: #2e2e33;
    color: #e4e4e7;
}

[data-theme="dark"] .chapter-grid-item {
    background: #2e2e33;
    color: #e4e4e7;
}

/* Highlight cards (highlights page) */
[data-theme="dark"] .highlight-card {
    background: rgba(234, 179, 8, 0.15);
    border: none;
    border-left: 4px solid #eab308;
    box-shadow: 0 2px 8px var(--color-shadow);
}

[data-theme="dark"] .highlight-card.highlight-green {
    background: rgba(34, 197, 94, 0.15);
    border-left: 4px solid #22c55e;
}

[data-theme="dark"] .highlight-card.highlight-blue {
    background: rgba(59, 130, 246, 0.15);
    border-left: 4px solid #3b82f6;
}

[data-theme="dark"] .highlight-card.highlight-pink {
    background: rgba(236, 72, 153, 0.15);
    border-left: 4px solid #ec4899;
}

[data-theme="dark"] .highlight-card.highlight-orange {
    background: rgba(249, 115, 22, 0.15);
    border-left: 4px solid #f97316;
}

[data-theme="dark"] .user-dropdown {
    background: #1c1c21;
    border-color: #2e2e33;
}

[data-theme="dark"] .user-menu-trigger:hover {
    background: #2e2e33;
}

[data-theme="dark"] .user-name {
    color: var(--color-text);
}

[data-theme="dark"] .dropdown-item:hover {
    background: #2e2e33;
}

[data-theme="dark"] .nav-dropdown-menu {
    background: #1c1c21;
    border-color: #2e2e33;
}

[data-theme="dark"] .nav-dropdown-menu a:hover {
    background: #2e2e33;
}

/* Newsletter card doesn't need background override - parent section has gradient */

[data-theme="dark"] .event-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .book-card,
[data-theme="dark"] .topic-card {
    background: #1c1c21;
}

/* Dark mode transition for smooth theme switching */
body,
.site-header,
.card,
.study-subnav,
.section-subnav,
input,
select,
textarea {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    transition: color 0.2s, background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
}

/* Show moon icon in light mode (click to go dark), sun icon in dark mode (click to go light) */
.theme-toggle .theme-icon-light {
    display: none;
}

.theme-toggle .theme-icon-dark {
    display: block;
}

[data-theme="dark"] .theme-toggle .theme-icon-light {
    display: block;
}

[data-theme="dark"] .theme-toggle .theme-icon-dark {
    display: none;
}

/* Additional Dark Mode Overrides */

/* Light gray backgrounds */
[data-theme="dark"] .filter-btn,
[data-theme="dark"] .pagination-btn,
[data-theme="dark"] .badge,
[data-theme="dark"] .tag {
    background: #2e2e33;
    color: #e4e4e7;
    border-color: #3f3f46;
}

[data-theme="dark"] .filter-btn:hover,
[data-theme="dark"] .pagination-btn:hover {
    background: #3f3f46;
}

[data-theme="dark"] .featured-badge {
    background: #fef3c7;
    color: #92400e;
}

[data-theme="dark"] .filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Tab buttons - keep transparent style */
[data-theme="dark"] .tab-nav {
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .tab-btn {
    background: none;
    color: var(--color-text);
}

[data-theme="dark"] .tab-btn.active {
    background: none;
    color: var(--color-text);
}

/* Connect section */
[data-theme="dark"] .connect-section {
    background: var(--color-bg);
}

[data-theme="dark"] .connect-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 15px var(--color-shadow);
}

[data-theme="dark"] .connect-card:hover {
    border-color: var(--color-border-strong);
}

[data-theme="dark"] .card-meta {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
}

/* Form elements */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background-color: var(--color-input-bg);
    border-color: #2e2e33;
    color: var(--color-text);
}

[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

[data-theme="dark"] .month-picker select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    border-color: var(--color-border-strong);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-muted);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
    border-color: var(--color-purple);
    outline-color: var(--color-purple);
}

/* Buttons */
[data-theme="dark"] .btn-outline {
    background: var(--color-bg-subtle);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

[data-theme="dark"] .btn-outline:hover {
    background: #3f3f46;
    border-color: #52525b;
    color: #fff;
}

/* Cards and elevated surfaces */
[data-theme="dark"] .event-card-detailed,
[data-theme="dark"] .study-card,
[data-theme="dark"] .plan-card,
[data-theme="dark"] .form-card,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .contact-info-card {
    background: var(--color-card-bg);
    border-color: #2e2e33;
}

[data-theme="dark"] .contact-details h3 {
    color: #f4f4f5;
}

[data-theme="dark"] .contact-details p {
    color: #a1a1aa;
}

[data-theme="dark"] .contact-note {
    color: #71717a !important;
}

[data-theme="dark"] .social-connect {
    border-top-color: var(--color-border);
}

[data-theme="dark"] .social-connect h3 {
    color: #f4f4f5;
}

[data-theme="dark"] .social-link {
    background: var(--color-bg-subtle);
    color: #a1a1aa;
}

[data-theme="dark"] .social-link:hover {
    background: var(--color-magenta);
    color: white;
}

/* Text colors */
[data-theme="dark"] .card-meta,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .meta,
[data-theme="dark"] .date,
[data-theme="dark"] .time,
[data-theme="dark"] .category {
    color: #a1a1aa;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #f4f4f5;
}

[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span,
[data-theme="dark"] label {
    color: #e4e4e7;
}

[data-theme="dark"] a {
    color: inherit;
}

/* Notice/Alert boxes */
[data-theme="dark"] .notice {
    border-color: #2e2e33;
}

[data-theme="dark"] .notice-success {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

[data-theme="dark"] .notice-error {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

[data-theme="dark"] .notice-info {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

/* Borders and dividers */
[data-theme="dark"] .dropdown-divider,
[data-theme="dark"] hr {
    border-color: #2e2e33;
}

[data-theme="dark"] .border,
[data-theme="dark"] [class*="border"] {
    border-color: #2e2e33;
}

/* Tables */
[data-theme="dark"] table {
    color: #e4e4e7;
}

[data-theme="dark"] th {
    background: #1c1c21;
    color: #f4f4f5;
}

[data-theme="dark"] td {
    border-color: #2e2e33;
}

[data-theme="dark"] tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Search and filters */
[data-theme="dark"] .search-box,
[data-theme="dark"] .filter-bar {
    background: #1c1c21;
    border-color: #2e2e33;
}

/* Modals */
[data-theme="dark"] .modal-content {
    background: #1c1c21;
    color: #e4e4e7;
}

[data-theme="dark"] .modal-header {
    border-color: #2e2e33;
}

/* Newsletter section - keep gradient but darker */
[data-theme="dark"] .newsletter-section {
    background: linear-gradient(135deg, #1e3a5f, #2d1f4a);
}

[data-theme="dark"] .newsletter-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
}

[data-theme="dark"] .newsletter-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Blog sidebar */
[data-theme="dark"] .sidebar-widget {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .category-list a {
    color: var(--color-text);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] .category-list .count {
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
}

[data-theme="dark"] .tag {
    background: var(--color-bg-subtle);
    color: var(--color-text);
}

/* Blog post page */
[data-theme="dark"] .post-body blockquote,
[data-theme="dark"] .content-main blockquote {
    background: var(--color-bg-subtle);
    border-left-color: var(--color-purple);
}

/* Blog comments */
[data-theme="dark"] .blog-comments {
    background: #09090b;
}

[data-theme="dark"] .comment {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .comment.reply {
    background: var(--color-bg-subtle);
}

[data-theme="dark"] .comment-date {
    color: var(--color-text-muted);
}

[data-theme="dark"] .comment-author {
    color: var(--color-text);
}

[data-theme="dark"] .comment-author-link {
    color: var(--color-text);
}

[data-theme="dark"] .comment-author-link:hover {
    color: var(--color-magenta);
}

[data-theme="dark"] .comment-content {
    color: var(--color-text-muted);
}

[data-theme="dark"] .comment-content.truncated::after {
    background: linear-gradient(transparent, var(--color-card-bg));
}

[data-theme="dark"] .comment.reply .comment-content.truncated::after {
    background: linear-gradient(transparent, var(--color-bg-subtle));
}

[data-theme="dark"] .comment-form-user {
    background: var(--color-bg-subtle);
}

[data-theme="dark"] .comment-form-username {
    color: var(--color-text);
}

[data-theme="dark"] .comment-form-section {
    background: var(--color-card-bg);
}

[data-theme="dark"] .comment-form input,
[data-theme="dark"] .comment-form textarea {
    background: var(--color-bg-subtle);
    border-color: var(--color-border);
    color: var(--color-text);
}

[data-theme="dark"] .stat-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .stat-number {
    color: var(--color-magenta);
}

[data-theme="dark"] .study-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .study-card-content h3 {
    color: var(--color-text);
}

/* Event cards */
[data-theme="dark"] .event-card-content {
    color: var(--color-text);
}

[data-theme="dark"] .event-card-description {
    color: var(--color-text-muted);
}

/* Topics */
[data-theme="dark"] .topic-card {
    background: var(--color-card-bg);
}

[data-theme="dark"] .topic-card:hover {
    background: #2e2e33;
}

/* Scrollbars - consistent width in both modes */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--color-grey);
    border-radius: 6px;
    border: 3px solid var(--color-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-muted);
}

/* Selection */
[data-theme="dark"] ::selection {
    background: rgba(167, 139, 250, 0.4);
    color: #fff;
}

/* Login/Register forms */
[data-theme="dark"] .auth-container {
    background: var(--color-bg);
}

[data-theme="dark"] .auth-card {
    background: var(--color-card-bg);
}

/* User menu */
[data-theme="dark"] .user-name {
    color: #e4e4e7;
}

[data-theme="dark"] .dropdown-item {
    color: #e4e4e7;
}

[data-theme="dark"] .dropdown-item-danger {
    color: #f87171;
}

/* Hero sections in dark mode */
[data-theme="dark"] .hero {
    background: linear-gradient(120deg, #1e1033, #121215);
}

[data-theme="dark"] .hero::after {
    opacity: 0.15;
}

[data-theme="dark"] .page-hero {
    background: linear-gradient(110deg, #1e1033, #121215);
}

/* Dark mode hero textures */
[data-theme="dark"] .hero-texture-dots {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='2' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='30' cy='10' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='50' cy='10' r='2.5' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='10' cy='30' r='1' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='50' cy='30' r='1.5' fill='%23ffffff' fill-opacity='0.08'/%3E%3Ccircle cx='10' cy='50' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='30' cy='50' r='1' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='50' cy='50' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff' fill-opacity='0.04'/%3E%3Ccircle cx='40' cy='40' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 60px 60px, 100% 100%;
}

[data-theme="dark"] .hero-texture-waves {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q25 40, 50 50 T100 50' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1' fill='none'/%3E%3Cpath d='M0 30 Q25 20, 50 30 T100 30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M0 70 Q25 60, 50 70 T100 70' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M0 90 Q25 80, 50 90 T100 90' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3Cpath d='M0 10 Q25 0, 50 10 T100 10' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 100px 100px, 100% 100%;
}

[data-theme="dark"] .hero-texture-geometric {
    background:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='40,5 75,65 5,65' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Crect x='10' y='10' width='20' height='20' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none' transform='rotate(15 20 20)'/%3E%3Ccircle cx='65' cy='25' r='10' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpolygon points='20,70 30,55 10,55' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 80px 80px, 100% 100%;
}

[data-theme="dark"] .hero-texture-topographic {
    background:
        url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 20 C80 25, 95 45, 90 70 C85 95, 55 100, 35 85 C15 70, 20 40, 40 25 C50 18, 55 18, 60 20' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M60 35 C75 38, 82 52, 78 68 C74 84, 52 88, 40 78 C28 68, 32 48, 45 38 C52 33, 57 33, 60 35' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M60 50 C68 52, 72 60, 70 70 C68 80, 55 82, 48 75 C41 68, 45 58, 52 52 C56 50, 58 50, 60 50' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1' fill='none'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 120px 120px, 100% 100%;
}

[data-theme="dark"] .hero-texture-crosses {
    background:
        url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 20 L25 30 M20 25 L30 25' stroke='%23ffffff' stroke-opacity='0.08' stroke-width='1.5'/%3E%3Cpath d='M10 5 L10 12 M6.5 8.5 L13.5 8.5' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3Cpath d='M42 38 L42 46 M38 42 L46 42' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'/%3E%3Cpath d='M8 40 L8 45 M5.5 42.5 L10.5 42.5' stroke='%23ffffff' stroke-opacity='0.04' stroke-width='1'/%3E%3Cpath d='M40 8 L40 14 M37 11 L43 11' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 50px 50px, 100% 100%;
}

[data-theme="dark"] .hero-texture-stars {
    background:
        url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5 L42 15 L52 15 L44 22 L47 32 L40 26 L33 32 L36 22 L28 15 L38 15 Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3Cpath d='M15 45 L16.5 51 L23 51 L18 55 L19.5 61 L15 57 L10.5 61 L12 55 L7 51 L13.5 51 Z' fill='%23ffffff' fill-opacity='0.06'/%3E%3Cpath d='M65 50 L66 54 L70 54 L67 57 L68 61 L65 58 L62 61 L63 57 L60 54 L64 54 Z' fill='%23ffffff' fill-opacity='0.04'/%3E%3Cpath d='M60 15 L61 18 L64 18 L61.5 20 L62.5 23 L60 21 L57.5 23 L58.5 20 L56 18 L59 18 Z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 80px 80px, 100% 100%;
}

[data-theme="dark"] .hero-texture-organic {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 0 C60 20, 80 20, 100 10 L100 0 Z' fill='%23ffffff' fill-opacity='0.04'/%3E%3Cpath d='M0 30 C20 50, 40 40, 60 50 C80 60, 90 50, 100 60 L100 100 L0 100 Z' fill='%23ffffff' fill-opacity='0.03'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='80' cy='40' r='3' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='40' cy='70' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='90' cy='80' r='1.5' fill='%23ffffff' fill-opacity='0.07'/%3E%3Ccircle cx='10' cy='60' r='1' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='60' cy='15' r='1.5' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 200px 200px, 100% 100%;
}

[data-theme="dark"] .hero-texture-diamonds {
    background:
        url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30,5 55,30 30,55 5,30' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,15 45,30 30,45 15,30' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpolygon points='30,25 35,30 30,35 25,30' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 60px 60px, 100% 100%;
}

[data-theme="dark"] .hero-texture-circuit {
    background:
        url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10 L30 10 L30 30 L50 30' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Cpath d='M70 10 L70 25 L90 25' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M10 50 L25 50 L25 70 L40 70 L40 90' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1' fill='none'/%3E%3Cpath d='M60 60 L60 80 L80 80 L80 60' stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1' fill='none'/%3E%3Ccircle cx='30' cy='10' r='2' fill='%23ffffff' fill-opacity='0.07'/%3E%3Ccircle cx='50' cy='30' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='90' cy='25' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3Ccircle cx='40' cy='90' r='2' fill='%23ffffff' fill-opacity='0.06'/%3E%3Ccircle cx='60' cy='60' r='2' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #1e1033 0%, #121215 100%);
    background-size: 100px 100px, 100% 100%;
}

[data-theme="dark"] .ministries {
    background: linear-gradient(120deg, #1c1c21, #121215);
}

/* Blog featured hero - inherits inline background-image which has dark overlay */


/* ==================== Author Links ==================== */
.author-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.4);
    text-underline-offset: 2px;
    transition: all 0.2s ease;
}

.author-link:hover {
    color: var(--color-primary, #fff);
    text-decoration-color: currentColor;
}

/* Author link in light text areas (hero sections) */
.blog-post-header .author-link,
.study-header .author-link {
    color: inherit;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}

.blog-post-header .author-link:hover,
.study-header .author-link:hover {
    text-decoration-color: #fff;
    color: #fff;
}

/* ==================== Avatar Upload (Settings) ==================== */
.avatar-upload-section {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.current-avatar {
    flex-shrink: 0;
}

.current-avatar .avatar-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-border);
}

.current-avatar .avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 600;
    color: white;
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
}

.avatar-upload-form {
    display: inline;
}

.btn-file {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.avatar-help {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin: 0;
}

.btn-danger-outline {
    color: #dc2626;
    border-color: #dc2626;
}

.btn-danger-outline:hover {
    background: #dc2626;
    color: white;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Dark mode avatar */
[data-theme="dark"] .current-avatar .avatar-preview {
    border-color: var(--color-border);
}

[data-theme="dark"] .btn-danger-outline {
    color: #f87171;
    border-color: #f87171;
}

[data-theme="dark"] .btn-danger-outline:hover {
    background: #dc2626;
    color: white;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 8px rgba(34, 197, 94, 0.5), 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 0 16px rgba(34, 197, 94, 0.7), 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

[data-editable].editing {
    outline: 2px solid var(--cms-purple, var(--color-purple));
    outline-offset: 4px;
    border-radius: 4px;
}

[data-editable].editing:hover::after {
    display: none;
}

@keyframes pulse-save {
    0%, 100% { box-shadow: 0 0 0 0 rgba(75, 38, 121, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(75, 38, 121, 0); }
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
}

/* =====================
   Bible Verse Links
   ===================== */
.bible-verse-link {
    color: var(--color-magenta);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-magenta);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bible-verse-link:hover {
    color: var(--color-purple);
    border-bottom-style: solid;
    border-bottom-color: var(--color-purple);
}

/* Dark mode */
[data-theme="dark"] .bible-verse-link {
    color: var(--color-teal);
    border-bottom-color: var(--color-teal);
}

[data-theme="dark"] .bible-verse-link:hover {
    color: var(--color-magenta);
    border-bottom-color: var(--color-magenta);
}

/* =====================================================
   COOKIE CONSENT POPUP
   ===================================================== */
.cookie-consent {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    padding: 1rem;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

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

.cookie-consent.hiding {
    transform: translateY(100%);
    opacity: 0;
}

.cookie-consent-content {
    max-width: 1200px;
    margin: 0 auto;
    background: var(--color-card-bg);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border: 1px solid var(--color-border);
}

.cookie-consent-text {
    flex: 1;
}

.cookie-consent-text h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
}

.cookie-consent-text p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.cookie-consent-text a {
    color: var(--color-primary);
    text-decoration: underline;
}

.cookie-consent-text a:hover {
    color: var(--color-secondary);
}

.cookie-consent-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.cookie-consent-actions .btn {
    white-space: nowrap;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .cookie-consent {
            padding: 0.75rem;
        }
    .cookie-consent-content {
            flex-direction: column;
            text-align: center;
            padding: 1rem;
            gap: 1rem;
        }
    .cookie-consent-actions {
            width: 100%;
            justify-content: center;
        }
    .cookie-consent-actions .btn {
            flex: 1;
            max-width: 150px;
        }
}

/* Dark mode */
[data-theme="dark"] .cookie-consent-content {
    background: var(--color-bg-elevated);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

/* =====================================================
   LEGAL PAGES (Privacy, Terms, Cookie Policy, GDPR)
   ===================================================== */
.legal-content {
    padding: 4rem 0;
}

.legal-content .container.narrow {
    max-width: 800px;
}

.legal-content .legal-updated {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.legal-content h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: var(--color-text);
}

.legal-content h3 {
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-text);
}

.legal-content p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.legal-content ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.legal-content ul li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.legal-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.legal-content a:hover {
    color: var(--color-secondary);
}

.legal-content .contact-details {
    list-style: none;
    padding-left: 0;
    background: var(--color-bg-subtle);
    padding: 1.25rem;
    border-radius: var(--radius-md);
}

.legal-content .contact-details li {
    margin-bottom: 0.5rem;
}

.legal-content .contact-details li:last-child {
    margin-bottom: 0;
}

/* Cookie table */
.cookie-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: 0.875rem;
}

.cookie-table th,
.cookie-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.cookie-table th {
    background: var(--color-bg-subtle);
    font-weight: 600;
    color: var(--color-text);
}

.cookie-table td {
    color: var(--color-text-muted);
}

.cookie-table tr:last-child td {
    border-bottom: none;
}

/* GDPR Rights grid */
.rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
}

.right-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.right-card h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: var(--color-primary);
}

.right-card p {
    margin-bottom: 0;
    font-size: 0.875rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .legal-content {
            padding: 2.5rem 0;
        }
    .legal-content h2 {
            font-size: 1.25rem;
        }
    .cookie-table {
            font-size: 0.8125rem;
        }
    .cookie-table th,
        .cookie-table td {
            padding: 0.5rem;
        }
    .rights-grid {
            grid-template-columns: 1fr;
        }
}

/* =====================================================
   POLICIES HUB PAGE
   ===================================================== */
.policies-section {
    padding: 4rem 0;
}

.policy-category {
    margin-bottom: 3rem;
}

.policy-category h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.policy-category > p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.policy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.policy-card {
    display: block;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}

.policy-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary);
}

.policy-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.policy-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.policy-card p {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

.policy-contact {
    margin-top: 3rem;
    padding: 2rem;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-lg);
    text-align: center;
}

.policy-contact h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.policy-contact p {
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
    .policies-section {
            padding: 2.5rem 0;
        }
    .policy-grid {
            grid-template-columns: 1fr;
        }
    .policy-category {
            margin-bottom: 2rem;
        }
}

[data-theme="dark"] .filter-group label {
    color: #a1a1aa;
}

[data-theme="dark"] .results-count {
    color: #a1a1aa;
}

[data-theme="dark"] .questions-list {
    background: #18181b;
}

/* Autocomplete dropdown dark mode */
[data-theme="dark"] .autocomplete-dropdown {
    background: #1c1c21;
    border-color: #2e2e33;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .autocomplete-item {
    color: #e4e4e7;
    border-bottom-color: #2e2e33;
}

[data-theme="dark"] .autocomplete-item:hover,
[data-theme="dark"] .autocomplete-item.selected {
    background: #2e2e33;
}

[data-theme="dark"] .autocomplete-question,
[data-theme="dark"] .autocomplete-title {
    color: #f4f4f5;
}

[data-theme="dark"] .autocomplete-topic-badge {
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
}

[data-theme="dark"] .autocomplete-count {
    color: #a1a1aa;
}

[data-theme="dark"] .autocomplete-parent {
    color: #a1a1aa;
}

[data-theme="dark"] .autocomplete-topic-item {
    background: #27272a;
    border-left-color: var(--color-purple);
}

[data-theme="dark"] .autocomplete-topic-item:hover {
    background: #3f3f46;
}

[data-theme="dark"] .autocomplete-label {
    color: #a78bfa;
}

[data-theme="dark"] .autocomplete-no-results {
    color: #a1a1aa;
}

[data-theme="dark"] .autocomplete-no-results a {
    color: #a78bfa;
}

[data-theme="dark"] .relevance-badge {
    background: rgba(167, 139, 250, 0.2);
    color: #a78bfa;
}

/* =========================================
   YOUTH PAGE STYLES
   ========================================= */

/* Youth logo in hero */
.youth-logo {
    max-width: 700px;
    width: 100%;
    height: auto;
    margin: 1rem auto 1rem;
    display: block;
}

/* Youth hero tagline */
.youth-hero .tagline {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    font-style: italic;
}

[data-theme="dark"] .youth-hero .tagline {
    color: var(--color-secondary);
}

/* Visually hidden for accessibility */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Hero action buttons */
.hero-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Secondary button styling in page hero - more specific selector to avoid !important */
.page-hero .hero-actions .btn-secondary {
    background: transparent;
    color: var(--color-light);
    border: 2px solid var(--color-light);
}

.page-hero .hero-actions .btn-secondary:hover {
    background: var(--color-light);
    color: var(--color-purple);
    border-color: var(--color-light);
}

/* Youth hero background - with responsive sizes */
.youth-hero {
    background-image: url('/assets/imgs/youth/alive-youth-background-image.jpg');
    background-size: cover;
    background-position: center;
}

/* Serve WebP for browsers that support it (54% smaller) */
.webp .youth-hero {
    background-image: url('/assets/imgs/youth/alive-youth-background-image.webp');
}

/* Responsive background images */
@media (max-width: 640px) {
    .youth-hero {
            background-image: url('/assets/imgs/youth/alive-youth-background-image-mobile.jpg');
            background-size: cover;
            background-position: center;
        }
    .webp .youth-hero {
            background-image: url('/assets/imgs/youth/alive-youth-background-image-mobile.webp');
        }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .youth-hero {
            background-image: url('/assets/imgs/youth/alive-youth-background-image-tablet.jpg');
            background-size: cover;
            background-position: center;
        }
    .webp .youth-hero {
            background-image: url('/assets/imgs/youth/alive-youth-background-image-tablet.webp');
        }
}

[data-theme="dark"] .youth-hero {
    background-image: url('/assets/imgs/youth/alive-youth-background-image.jpg');
    background-size: cover;
    background-position: center;
}

[data-theme="dark"] .webp .youth-hero {
    background-image: url('/assets/imgs/youth/alive-youth-background-image.webp');
}

/* Youth highlight card */
.highlight-card h3 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

[data-theme="dark"] .highlight-card h3 {
    color: var(--color-secondary);
}

/* Meeting details layout */
.meeting-details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.meeting-item {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.meeting-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.meeting-item strong {
    display: block;
}

.meeting-item span {
    opacity: 0.9;
    font-size: 0.9rem;
}

/* Feature cards */
.feature-card {
    text-align: center;
    padding: 2rem;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    margin-bottom: 0.75rem;
}

/* Four column grid for features */
.four-col {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
    .four-col {
            grid-template-columns: repeat(2, 1fr);
        }
}

@media (max-width: 600px) {
    .four-col {
            grid-template-columns: 1fr;
        }
}

/* Values grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

@media (max-width: 700px) {
    .values-grid {
            grid-template-columns: 1fr;
        }
}

.value-item h3 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .value-item h3 {
    color: var(--color-secondary);
}

/* Profile cards */
.profile-card .role {
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .profile-card .role {
    color: var(--color-secondary);
}

.profile-card-image {
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* Large CTA button */
.btn-large {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
}

/* CTA note text */
.cta-note {
    margin-top: 1.5rem;
    opacity: 0.8;
}

.cta-note a {
    color: var(--color-primary);
}

[data-theme="dark"] .cta-note a {
    color: var(--color-secondary);
}

/* Youth testimonial quote */
.youth-quote {
    font-size: 1.5rem;
    font-style: italic;
    color: var(--color-text);
    margin: 0;
    padding: 2rem;
}

.youth-quote p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.youth-quote cite {
    font-size: 1rem;
    font-style: normal;
    color: var(--color-primary);
    font-weight: 600;
}

[data-theme="dark"] .youth-quote {
    color: var(--color-text);
}

[data-theme="dark"] .youth-quote cite {
    color: var(--color-secondary);
}

@media (max-width: 600px) {
    .youth-quote {
            font-size: 1.25rem;
            padding: 1rem;
        }
}

/* ============================================
   Testimonies Page Styles
   ============================================ */

/* Admin Preview Banner */
.admin-preview-banner {
    background: linear-gradient(135deg, var(--color-magenta), var(--color-purple));
    color: white;
    padding: 0.75rem 0;
    text-align: center;
    font-size: 0.875rem;
}

.admin-preview-banner a {
    color: white;
    text-decoration: underline;
}

/* Featured Testimony */
.featured-testimony {
    padding: 3rem 0;
    background: var(--color-bg-subtle);
}

.featured-testimony-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    background: var(--color-card-bg);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.featured-testimony-video,
.featured-testimony-image {
    aspect-ratio: 16/9;
    overflow: hidden;
}

.featured-testimony-video .video-wrapper,
.featured-testimony-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-testimony-video .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.featured-testimony-video .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.featured-testimony-content {
    padding: 2rem 2rem 2rem 0;
}

.featured-testimony-content h2 {
    font-size: 1.75rem;
    margin: 0.75rem 0;
    color: var(--color-dark);
}

.featured-testimony-content blockquote {
    font-size: 1.125rem;
    font-style: italic;
    color: var(--color-text-muted);
    margin: 1rem 0;
    padding-left: 1rem;
    border-left: 3px solid var(--color-magenta);
}

/* Testimony Type Badge */
.testimony-type-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, var(--color-magenta), var(--color-purple));
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
}

.testimony-type-badge.small {
    font-size: 0.625rem;
    padding: 0.2rem 0.5rem;
}

/* Testimony Author */
.testimony-author {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 1rem 0;
}

.testimony-author strong {
    color: var(--color-dark);
    font-size: 1rem;
}

.testimony-author span {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Filter Tabs */
.testimonies-filter {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.filter-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.filter-tab {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: all var(--transition-base);
    border: 1px solid var(--color-border);
}

.filter-tab:hover {
    color: var(--color-magenta);
    border-color: var(--color-magenta);
}

.filter-tab.active {
    background: linear-gradient(135deg, var(--color-magenta), var(--color-purple));
    color: white;
    border-color: transparent;
}

/* Testimonies Grid */
.testimonies-section {
    padding: 3rem 0;
}

.testimonies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
}

/* Testimony Card */
.testimony-card {
    background: var(--color-card-bg);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.testimony-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.testimony-card-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.testimony-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimony-card-image .video-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
}

.testimony-card-content {
    padding: 1.5rem;
}

.testimony-card-content h3 {
    font-size: 1.125rem;
    margin: 0.5rem 0;
    color: var(--color-dark);
}

.testimony-quote,
.testimony-excerpt {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0.75rem 0;
}

.testimony-quote {
    font-style: italic;
}

/* Share Story CTA */
.share-story-cta {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--color-magenta), var(--color-purple));
}

.share-story-cta .cta-card {
    background: white;
    padding: 3rem;
    border-radius: var(--radius-2xl);
    text-align: center;
}

.share-story-cta h2 {
    color: var(--color-dark);
    margin-bottom: 1rem;
}

.share-story-cta p {
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Testimony Modal */
.testimony-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

.testimony-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimony-modal .modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
}

.testimony-modal .modal-content {
    position: relative;
    background: var(--color-card-bg);
    border-radius: var(--radius-2xl);
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    margin: 1rem;
    width: 100%;
}

.testimony-modal .modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--color-bg-subtle);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimony-modal .modal-body {
    padding: 2rem;
}

.testimony-modal-video {
    margin: -2rem -2rem 2rem;
    display: none;
}

.testimony-modal-video img {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
}

.testimony-modal-video .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
}

.testimony-modal-video .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.testimony-modal h2 {
    font-size: 1.5rem;
    margin: 0.75rem 0;
    color: var(--color-dark);
}

.testimony-full-story {
    color: var(--color-text);
    line-height: 1.8;
    margin: 1.5rem 0;
}

.testimony-share {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
    margin-top: 1.5rem;
}

.testimony-share span {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: all var(--transition-base);
}

.share-btn:hover {
    background: var(--color-magenta);
    color: white;
    border-color: var(--color-magenta);
}

/* Responsive */
@media (max-width: 768px) {
    .featured-testimony-card {
            grid-template-columns: 1fr;
        }
    .featured-testimony-content {
            padding: 2rem;
        }
    .testimonies-grid {
            grid-template-columns: 1fr;
        }
    .share-story-cta .cta-card {
            padding: 2rem;
        }
}

/* =============================================
   VISIT PAGE - I'M NEW EXPANDED SECTIONS
   ============================================= */

/* Hero CTAs - centered for page-hero (visit page etc), left-aligned for homepage hero */
.page-hero .hero-ctas {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

/* Welcome Video Section */
.welcome-video-section {
    padding: 4rem 0;
    background: var(--color-bg-elevated);
}

.welcome-video-split {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 3rem;
    align-items: center;
}

.welcome-video-content .eyebrow {
    color: var(--color-magenta);
}

.welcome-video-content h2 {
    font-size: 2rem;
    margin: 0.5rem 0 1rem;
    color: var(--color-dark);
}

.welcome-video-content p {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.welcome-video-embed .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.welcome-video-embed .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-placeholder {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.video-placeholder img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 768px) {
    .hero-ctas {
            flex-direction: column;
            align-items: center;
        }
    .hero-ctas .btn {
            width: 100%;
            max-width: 280px;
        }
    .welcome-video-split {
            grid-template-columns: 1fr;
        }
}

/* =============================================
   EVENT SHARE/INVITE SECTION
   ============================================= */

.event-share-card h3 {
    margin-bottom: 0.5rem;
}

.event-share-card p {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.event-share-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.event-share-buttons .share-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: all var(--transition-base);
    text-decoration: none;
}

.event-share-buttons .share-btn:hover {
    transform: translateY(-2px);
}

.event-share-buttons .share-facebook:hover {
    background: #1877f2;
    color: white;
    border-color: #1877f2;
}

.event-share-buttons .share-twitter:hover {
    background: #000;
    color: white;
    border-color: #000;
}

.event-share-buttons .share-whatsapp:hover {
    background: #25d366;
    color: white;
    border-color: #25d366;
}

.event-share-buttons .share-email:hover {
    background: var(--color-magenta);
    color: white;
    border-color: var(--color-magenta);
}

.event-share-buttons .share-copy:hover {
    background: var(--color-purple);
    color: white;
    border-color: var(--color-purple);
}

.copy-confirmation {
    margin-top: 0.75rem;
    padding: 0.5rem;
    background: var(--color-magenta);
    color: white;
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    text-align: center;
}

/* Event card share icon */
.event-share-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--color-bg-subtle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: all var(--transition-base);
    margin-left: auto;
}

.event-share-icon:hover {
    background: var(--color-magenta);
    color: white;
    border-color: var(--color-magenta);
}

.event-share-icon.copied {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.event-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}