/**
 * Bible Teaching Program - Brand CSS
 * Version: 2.0 (Centralized)
 *
 * "Truth without compromise. Grace without merit."
 *
 * This file contains ALL shared styles for the BTP website.
 * Include this once per page instead of inline styles.
 */

/* ============================================
   CSS VARIABLES - BRAND COLORS
   ============================================ */

:root {
    /* Primary Brand Colors */
    --ancient-ink: #1C1D37;
    --heritage-gold: #CBA378;
    --living-sage: #7F9A83;
    --parchment: #F9F7F2;

    /* Supporting Colors */
    --warm-cream: #FAF8F5;
    --text-dark: #1C1D37;
    --text-muted: #6B7280;
    --border-light: #E5E7EB;

    /* Shadow System (matching mobile) */
    --shadow-card: 0 4px 24px -8px rgba(28, 29, 55, 0.12);
    --shadow-card-hover: 0 8px 32px -8px rgba(28, 29, 55, 0.18);
    --shadow-hero: 0 8px 24px -8px rgba(28, 29, 55, 0.25);
    --shadow-soft: 0 2px 12px -3px rgba(28, 29, 55, 0.08);
}

/* ============================================
   FIXED DESKTOP NAVIGATION (like mobile bottom nav)
   ============================================ */

@media (min-width: 1024px) {
    /* Fixed nav at top - works like mobile menu at bottom */
    .top-nav {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }

    /* Add padding to body to account for fixed nav height (64px / 4rem) */
    body {
        padding-top: 64px !important;
    }

    /* Disable fixed nav on pages with drawer (lesson/book pages) */
    body.has-drawer .top-nav {
        position: relative !important;
    }
    body.has-drawer {
        padding-top: 0 !important;
    }
}

/* ============================================
   SHADOW UTILITIES (Desktop - matching mobile)
   ============================================ */

.shadow-card {
    box-shadow: var(--shadow-card);
}

.shadow-card-hover {
    box-shadow: var(--shadow-card-hover);
}

.shadow-hero {
    box-shadow: var(--shadow-hero);
}

.shadow-soft {
    box-shadow: var(--shadow-soft);
}

/* Interactive card shadow (use with hover) */
.shadow-card-interactive {
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.shadow-card-interactive:hover {
    box-shadow: var(--shadow-card-hover);
}

/* Focus shadow for keyboard navigation */
.shadow-focus:focus-visible {
    box-shadow: var(--shadow-card), 0 0 0 3px rgba(203, 163, 120, 0.4);
    outline: none;
}

/* ============================================
   TYPOGRAPHY SCALE (Desktop hierarchy)
   ============================================ */

/* Page titles - largest */
.heading-1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ancient-ink);
}

/* Section titles */
.heading-2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.875rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ancient-ink);
}

/* Card/subsection titles */
.heading-3 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ancient-ink);
}

/* Small headings/labels */
.heading-4 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ancient-ink);
}

/* Body text */
.text-body {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-dark);
}

/* Lead/intro text */
.text-lead {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-muted);
}

/* Small supporting text */
.text-small {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* Uppercase labels */
.text-label {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--heritage-gold);
}

/* ============================================
   SPACING RHYTHM (Consistent padding)
   ============================================ */

.section-padding {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.container-padding {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 640px) {
    .container-padding {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container-padding {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Card consistent padding */
.card-padding {
    padding: 1.5rem;
}

/* Gap between cards in grids */
.card-gap {
    gap: 1.5rem;
}

/* ============================================
   STANDARDIZED CARD DESIGNS
   ============================================ */

/* Course cards - unified shadow and hover */
.course-card {
    box-shadow: var(--shadow-card) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.course-card:hover {
    box-shadow: var(--shadow-card-hover) !important;
    border-color: var(--heritage-gold) !important;
}

/* Book cards - same pattern */
.book-card {
    box-shadow: var(--shadow-card) !important;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.book-card:hover {
    box-shadow: var(--shadow-card-hover) !important;
    border-color: var(--heritage-gold) !important;
}

/* Elite book cards (books.html) */
.elite-book-card {
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}

.elite-book-card:hover {
    box-shadow: var(--shadow-card-hover) !important;
}

/* Mobile book cards */
.mobile-book-card {
    transition: transform 0.1s ease !important;
}

.mobile-book-card:active {
    transform: scale(0.97) !important;
}

/* Generic content cards */
.content-card {
    background: white;
    border-radius: 0.75rem;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.content-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(203, 163, 120, 0.3);
}

/* Featured cards (darker backgrounds) */
.featured-card {
    box-shadow: 0 8px 32px -4px rgba(28, 29, 55, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.featured-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px -4px rgba(28, 29, 55, 0.3);
}

/* ============================================
   BRAND COLOR TEXT RULES (GLOBAL)
   ============================================ */

/* Heritage Gold background = white text (always) */
.bg-heritage-gold,
.bg-heritage-gold *,
.bg-heritage-gold.text-ancient-ink,
.bg-heritage-gold .text-ancient-ink {
    color: white !important;
}

/* Back to category/courses link active state */
.back-to-category:active,
.back-to-courses:active {
    transform: scale(0.98);
    opacity: 0.8;
}

/* Hide scrollbar on mobile breadcrumbs */
.mobile-breadcrumb-nav::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ============================================
   CRITICAL MOBILE FIXES - HEADER SECTIONS
   Ensures dark backgrounds display correctly
   ============================================ */

/* Remove visual gaps/lines between sections on mobile */
@media (max-width: 1023px) {
    /* Pull sections up to overlap any potential gap */
    section.lg\:hidden {
        margin-top: -2px !important;
        border-top: none !important;
        position: relative !important;
        z-index: 2 !important;
    }
    /* Ensure gradient hero sections don't have bottom borders */
    div.lg\:hidden[style*="gradient"] {
        border-bottom: none !important;
        box-shadow: none !important;
        padding-bottom: 2px !important;
        margin-bottom: -2px !important;
    }
    /* Any section following a mobile-only div should overlap */
    div.lg\:hidden + section {
        margin-top: -2px !important;
    }
    /* Category index pages - ensure no gap */
    body.category-index-page div.lg\:hidden[style*="gradient"] {
        padding-bottom: 4px !important;
    }
    body.category-index-page section.lg\:hidden {
        margin-top: -4px !important;
        padding-top: calc(1rem + 4px) !important;
    }
}

/* Force dark headers to always have dark background */
section.bg-ancient-ink,
section[class*="bg-ancient-ink"],
.bg-ancient-ink {
    background-color: #1C1D37 !important;
}

section.bg-living-sage,
section[class*="bg-living-sage"],
.bg-living-sage {
    background-color: #7F9A83 !important;
}

section.bg-heritage-gold,
section[class*="bg-heritage-gold"],
.bg-heritage-gold {
    background-color: #CBA378 !important;
}

/* Ensure text-white shows on dark backgrounds */
section.bg-ancient-ink .text-white,
section.bg-ancient-ink h1,
section.bg-ancient-ink h2,
section.bg-ancient-ink p,
section.bg-ancient-ink div,
section.bg-living-sage .text-white,
section.bg-living-sage h1,
section[class*="bg-ancient-ink"] h1,
section[class*="bg-ancient-ink"] .text-white,
section[class*="bg-ancient-ink"] div:not([class*="bg-white"]):not([class*="bg-parchment"]) {
    color: white !important;
}

/* Lesson/course header sections - mobile specific */
@media (max-width: 1023px) {
    /* Ensure hero/header sections maintain dark backgrounds */
    section.bg-ancient-ink,
    section.text-white.py-8,
    section.text-white.py-12,
    section[class*="bg-ancient-ink"][class*="text-white"],
    section[class*="bg-gradient-to-br"][class*="from-ancient-ink"] {
        background-color: #1C1D37 !important;
        background: #1C1D37 !important;
    }

    /* Header text must be white and visible */
    section.bg-ancient-ink h1,
    section.bg-ancient-ink .text-2xl,
    section.bg-ancient-ink .text-3xl,
    section.bg-ancient-ink .text-4xl,
    section.bg-ancient-ink .text-white,
    section[class*="text-white"] h1 {
        color: #FFFFFF !important;
        opacity: 1 !important;
    }

    /* Semi-transparent text on headers */
    section.bg-ancient-ink .text-opacity-80,
    section.bg-ancient-ink .text-white.text-opacity-80,
    section[class*="bg-ancient-ink"] .text-sm,
    section.bg-ancient-ink p,
    section.text-white p {
        color: rgba(255, 255, 255, 0.9) !important;
    }

    /* Badge/pill elements in headers */
    section.bg-ancient-ink span[class*="bg-white"],
    section.bg-ancient-ink span[class*="rounded-full"],
    section.text-white span[class*="rounded-full"] {
        background-color: rgba(255, 255, 255, 0.2) !important;
        color: #FFFFFF !important;
    }

    /* Hero section font sizes - more compact on mobile */
    section.bg-ancient-ink h1,
    section.text-white h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    section.bg-ancient-ink .font-serif.text-3xl,
    section.text-white .font-serif.text-3xl {
        font-size: 1.75rem !important;
    }

    /* Course index page description text */
    section.bg-ancient-ink + main p,
    section.text-white + main .course-description {
        font-size: 1rem !important;
    }
}

/* ============================================
   MOBILE CONTENT FIXES - SCRIPTURE & TEXT
   ============================================ */

@media (max-width: 767px) {
    /* Scripture box - more compact */
    .bg-parchment.rounded-xl.p-6,
    .bg-parchment[class*="rounded"][class*="p-6"],
    div[class*="bg-parchment"][class*="border-heritage-gold"] {
        padding: 1rem !important;
        margin: 0.75rem 0 !important;
    }

    /* Scripture text */
    .bg-parchment .text-sm,
    div[class*="border-heritage-gold"] .text-sm {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }

    /* Content area typography */
    article.content-area,
    .content-area {
        font-size: 1rem !important;
        line-height: 1.75 !important;
    }

    .content-area h2 {
        font-size: 1.25rem !important;
        margin-top: 1.5rem !important;
    }

    .content-area h3 {
        font-size: 1.125rem !important;
    }

    /* Card content in lesson pages */
    .bg-white.rounded-xl .p-8,
    div[class*="rounded-xl"] > .p-8 {
        padding: 1rem !important;
    }

    /* Course description text - readable */
    .course-description,
    .course-description p {
        font-size: 1rem !important;
        line-height: 1.7 !important;
        text-align: left !important;
    }

    /* About section in course index */
    main .bg-white.rounded-xl p {
        font-size: 0.9375rem !important;
        line-height: 1.7 !important;
    }
}

/* ============================================
   MOBILE BREADCRUMBS - CENTRALIZED STYLES
   All mobile breadcrumbs should use .mobile-breadcrumb
   ============================================ */

@media (max-width: 1023px) {
    /* Universal mobile breadcrumb wrapper
       Supports both .mobile-breadcrumb (hub pages) and .mobile-breadcrumb-wrapper (lesson pages) */
    .mobile-breadcrumb,
    .mobile-breadcrumb-wrapper {
        padding: 0.875rem 1.25rem;
        background: #F9F7F2;
    }

    /* Inner container - handles overflow */
    .mobile-breadcrumb-inner {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        /* Hide scrollbars on all browsers */
        scrollbar-width: none;           /* Firefox */
        -ms-overflow-style: none;        /* IE/Edge */
    }

    .mobile-breadcrumb-inner::-webkit-scrollbar {
        display: none;                   /* Chrome/Safari/Opera */
    }

    /* Breadcrumb links - gray with gold hover */
    .mobile-breadcrumb-inner a {
        color: #9CA3AF;
        text-decoration: none;
        transition: color 0.15s ease;
    }

    .mobile-breadcrumb-inner a:hover,
    .mobile-breadcrumb-inner a:active {
        color: #CBA378;
    }

    /* Dot separators - light gray */
    .mobile-breadcrumb-inner .sep {
        color: #D1D5DB;
        font-size: 0.8125rem;
    }

    /* Current page (last item) */
    .mobile-breadcrumb-inner .current {
        color: #1C1D37;
        font-weight: 500;
    }

    /* Legacy support: Convert arrow separators to dots */
    .mobile-breadcrumb-wrapper .mobile-breadcrumb-inner > span:not(.current) {
        font-size: 0;
        color: transparent;
    }
    .mobile-breadcrumb-wrapper .mobile-breadcrumb-inner > span:not(.current)::after {
        content: '·';
        font-size: 0.8125rem;
        color: #D1D5DB;
    }

    /* Book pages - unified styling */
    .mobile-book-breadcrumb {
        padding: 0.875rem 1.25rem;
        background: #F9F7F2;
    }
    .mobile-book-breadcrumb-inner {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .mobile-book-breadcrumb-inner::-webkit-scrollbar { display: none; }
    .mobile-book-breadcrumb-inner a { color: #9CA3AF; text-decoration: none; }
    .mobile-book-breadcrumb-inner a:hover { color: #CBA378; }
    .mobile-book-breadcrumb-inner .current { color: #1C1D37; font-weight: 500; }
    .mobile-book-breadcrumb-inner .separator { color: #D1D5DB; }
}

/* ============================================
   BASE STYLES
   ============================================ */

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--parchment);
}

/* ============================================
   BRAND COLOR UTILITIES
   ============================================ */

.bg-ancient-ink { background-color: var(--ancient-ink); }
.bg-heritage-gold { background-color: var(--heritage-gold); }
.bg-living-sage { background-color: var(--living-sage); }
.bg-parchment { background-color: var(--parchment); }

.text-ancient-ink { color: var(--ancient-ink); }
.text-heritage-gold { color: var(--heritage-gold); }
.text-living-sage { color: var(--living-sage); }

.border-heritage-gold { border-color: var(--heritage-gold); }
.border-ancient-ink { border-color: var(--ancient-ink); }

/* Hover states for brand colors */
.hover\:bg-ancient-ink:hover { background-color: var(--ancient-ink); }
.hover\:bg-heritage-gold:hover { background-color: var(--heritage-gold); }
.hover\:bg-parchment:hover { background-color: var(--parchment); }
.hover\:text-heritage-gold:hover { color: var(--heritage-gold); }
.hover\:text-ancient-ink:hover { color: var(--ancient-ink); }
.hover\:border-heritage-gold:hover { border-color: var(--heritage-gold); }

/* Group hover states for brand colors */
.group:hover .group-hover\:bg-ancient-ink { background-color: var(--ancient-ink); }
.group:hover .group-hover\:bg-heritage-gold { background-color: var(--heritage-gold); }
.group:hover .group-hover\:bg-parchment { background-color: var(--parchment); }
.group:hover .group-hover\:text-white { color: white; }
.group:hover .group-hover\:text-heritage-gold { color: var(--heritage-gold); }
.group:hover .group-hover\:text-ancient-ink { color: var(--ancient-ink); }

/* Opacity variants for brand colors */
.bg-heritage-gold\/10 { background-color: rgba(203, 163, 120, 0.1); }
.bg-heritage-gold\/15 { background-color: rgba(203, 163, 120, 0.15); }
.bg-heritage-gold\/20 { background-color: rgba(203, 163, 120, 0.2); }
.bg-heritage-gold\/30 { background-color: rgba(203, 163, 120, 0.3); }
.bg-ancient-ink\/90 { background-color: rgba(28, 29, 55, 0.9); }
.bg-living-sage\/20 { background-color: rgba(127, 154, 131, 0.2); }
.hover\:bg-heritage-gold\/90:hover { background-color: rgba(203, 163, 120, 0.9); }
.hover\:bg-ancient-ink\/90:hover { background-color: rgba(28, 29, 55, 0.9); }
.border-heritage-gold\/30 { border-color: rgba(203, 163, 120, 0.3); }

/* ============================================
   TYPOGRAPHY
   ============================================ */

.font-serif {
    font-family: 'Playfair Display', Georgia, serif;
}

.font-sans {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Content Area - Main page content styling */
.content-area {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--text-dark);
}

.content-area h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--ancient-ink);
    font-family: 'Playfair Display', Georgia, serif;
}

.content-area h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 1.75rem;
    margin-bottom: 0.875rem;
    color: var(--ancient-ink);
    border-bottom: 2px solid var(--heritage-gold);
    padding-bottom: 0.5rem;
    font-family: 'Playfair Display', Georgia, serif;
}

.content-area h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--ancient-ink);
    font-family: 'Playfair Display', Georgia, serif;
}

.content-area h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.content-area p { margin-bottom: 1rem; }
.content-area ul, .content-area ol { margin-left: 1.5rem; margin-bottom: 1rem; }
.content-area li { margin-bottom: 0.5rem; }
.content-area ul { list-style-type: disc; }
.content-area ol { list-style-type: decimal; }

.content-area blockquote {
    border-left: 4px solid var(--heritage-gold);
    padding: 1rem 1rem 1rem 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #525252;
    background-color: var(--parchment);
    border-radius: 0 0.5rem 0.5rem 0;
}

.content-area table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; }
.content-area th {
    background-color: var(--ancient-ink);
    color: white;
    font-weight: 600;
    text-align: left;
    padding: 0.75rem;
    border: 1px solid var(--ancient-ink);
}
.content-area td { padding: 0.75rem; border: 1px solid var(--border-light); vertical-align: top; }
.content-area tr:nth-child(even) { background-color: var(--parchment); }

.content-area img { max-width: 100%; height: auto; margin: 1rem 0; border-radius: 0.5rem; }

.content-area a {
    color: var(--heritage-gold);
    text-decoration: underline;
    text-decoration-color: rgba(203, 163, 120, 0.4);
    text-underline-offset: 2px;
}
.content-area a:hover { color: var(--ancient-ink); text-decoration-color: var(--ancient-ink); }

/* ============================================
   GLOSSY BUTTON EFFECTS (2025 Design)
   ============================================ */

.btn-glossy {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%, rgba(0,0,0,0.1) 100%), var(--ancient-ink);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-glossy:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(28, 29, 55, 0.3), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn-glossy::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transition: left 0.6s ease;
}
.btn-glossy:hover::before { left: 100%; }

.btn-glossy-gold {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.05) 100%), var(--heritage-gold);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-glossy-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(203, 163, 120, 0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-glossy-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s ease;
}
.btn-glossy-gold:hover::before { left: 100%; }

.btn-outline {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-outline:hover {
    border-color: var(--heritage-gold);
    color: var(--heritage-gold);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(203, 163, 120, 0.2);
}

/* Glossy Top Button (for footer) */
.btn-top-glossy {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(0,0,0,0.05) 100%), var(--heritage-gold);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.3);
    transition: all 0.3s ease;
    overflow: hidden;
}
.btn-top-glossy:hover {
    box-shadow: 0 4px 12px rgba(203, 163, 120, 0.4), inset 0 1px 0 rgba(255,255,255,0.4);
    transform: translateY(-2px);
}

/* ============================================
   CARD MICRO-ANIMATIONS (2025 Design)
   ============================================ */

.resource-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.resource-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.4s ease;
    box-shadow: 0 0 40px rgba(203, 163, 120, 0.3);
    pointer-events: none;
}
.resource-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 30px 60px rgba(28, 29, 55, 0.12);
}
.resource-card:hover::before { opacity: 1; }

.card-icon {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.resource-card:hover .card-icon {
    transform: rotate(6deg) scale(1.15);
}

.course-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 50px rgba(28, 29, 55, 0.15);
}
.course-card .course-icon {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.course-card:hover .course-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Card hover with slide effect */
.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-hover:hover {
    transform: translateX(4px);
    background-color: var(--parchment);
}

/* ============================================
   FOOTER LINK ANIMATIONS
   ============================================ */

.footer-link {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
}
.footer-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--heritage-gold);
    transition: width 0.3s ease;
}
.footer-link:hover { color: var(--heritage-gold); }
.footer-link:hover::after { width: 100%; }

/* Social Icon Hover */
.social-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.social-icon:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 4px 12px rgba(203, 163, 120, 0.3);
}

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

.nav-item { position: relative; }

.nav-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0.5rem 0;
    color: #d1d5db;
    font-size: 0.875rem;
    transition: color 0.2s ease;
    cursor: pointer;
}
.nav-trigger:hover { color: white; }
.nav-trigger svg {
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease;
}
.nav-item:hover .nav-trigger svg { transform: rotate(180deg); }

/* Mega menu trigger (alternate class) */
.mega-menu-trigger { position: relative; }
.mega-menu-chevron { transition: transform 0.3s ease; }
.mega-menu-trigger:hover .mega-menu-chevron { transform: rotate(180deg); }

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    padding-top: 1rem;
    min-width: 500px;
}
.nav-item:hover .mega-menu,
.mega-menu-trigger:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.mega-menu-content {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px rgba(28, 29, 55, 0.15), 0 0 0 1px rgba(0,0,0,0.05);
    overflow: hidden;
    min-width: 600px;
}
.mega-menu-content.narrow { min-width: 320px; }

.mega-menu-header {
    background: linear-gradient(135deg, var(--ancient-ink) 0%, #2a2b4a 100%);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mega-menu-header h3 { color: white; font-size: 0.875rem; font-weight: 600; }
.mega-menu-header a {
    color: var(--heritage-gold);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: opacity 0.2s;
}
.mega-menu-header a:hover { opacity: 0.8; }

.mega-menu-grid { display: grid; gap: 0; }
.mega-menu-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.mega-menu-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.mega-menu-col {
    padding: 1.25rem;
    border-right: 1px solid #f3f4f6;
}
.mega-menu-col:last-child { border-right: none; }
.mega-menu-col h4 {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--heritage-gold);
    margin-bottom: 0.75rem;
}

.mega-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    margin: 0 -0.75rem;
    border-radius: 0.5rem;
    color: var(--ancient-ink);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}
.mega-link:hover {
    background: var(--parchment);
    transform: translateX(4px);
}
.mega-link .link-icon {
    width: 32px;
    height: 32px;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}
.mega-link:hover .link-icon { transform: scale(1.1) rotate(5deg); }
.mega-link .link-text { display: flex; flex-direction: column; }
.mega-link .link-title { font-weight: 500; line-height: 1.2; }
.mega-link .link-desc { font-size: 0.75rem; color: #6b7280; line-height: 1.3; }

.mega-simple-link {
    display: block;
    padding: 0.375rem 0;
    color: #4b5563;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}
.mega-simple-link:hover {
    color: var(--heritage-gold);
    padding-left: 0.5rem;
}

/* Mega menu link with slide animation */
.mega-menu-link {
    position: relative;
    transition: all 0.2s ease;
}
.mega-menu-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 2px;
    background: var(--heritage-gold);
    transition: width 0.3s ease;
}
.mega-menu-link:hover::before { width: 12px; }
.mega-menu-link:hover {
    padding-left: 20px;
    color: var(--heritage-gold);
}

/* ============================================
   SIDEBAR ELEMENTS
   ============================================ */

.sidebar-card {
    background-color: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-light);
}

.lesson-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s;
}
.lesson-nav-item:hover { background-color: var(--parchment); }
.lesson-nav-item.active {
    background-color: var(--ancient-ink);
    color: white;
}

/* ============================================
   SPECIAL CONTENT BOXES
   ============================================ */

.scripture-box {
    background: linear-gradient(to bottom right, var(--parchment), #F5F0E8);
    border: 2px solid var(--heritage-gold);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.theme-box {
    background-color: rgba(127, 154, 131, 0.1);
    border: 1px solid var(--living-sage);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1rem 0;
}

.story-box {
    background-color: rgba(203, 163, 120, 0.1);
    border: 1px solid var(--heritage-gold);
    border-radius: 0.5rem;
    padding: 1rem;
    margin: 1.5rem 0;
}

.note-box {
    background-color: rgba(203, 163, 120, 0.15);
    border-left: 4px solid var(--heritage-gold);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0 0.5rem 0.5rem 0;
}

/* ============================================
   BREADCRUMBS
   ============================================ */

.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    flex-wrap: wrap;
}
.breadcrumbs a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.15s;
}
.breadcrumbs a:hover { color: var(--heritage-gold); }
.breadcrumbs span { color: white; }

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeInUp 0.6s ease-out;
}

/* ============================================
   WORD/OFFICE CLEANUP
   ============================================ */

.MsoNormal, .MsoBodyText, .MsoPlainText {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
.SpellE, .GramE {
    background: none;
    border: none;
}

/* ============================================
   MOBILE-FIRST RESPONSIVE OVERRIDES
   ============================================ */

/* ============================================
   MOBILE-FIRST RESPONSIVE DESIGN
   Breakpoints: 768px (mobile), 1024px (tablet)
   ============================================ */

/* ---------- BASE TYPOGRAPHY (Mobile-First) ---------- */
html {
    font-size: 16px; /* Ensure minimum 16px base */
}

body {
    font-size: 1rem; /* 16px minimum */
    line-height: 1.6;
}

/* Ensure readable text on all devices */
p, li, td, th, span, a {
    font-size: inherit;
}

.text-sm {
    font-size: 0.875rem !important; /* 14px - still readable */
}

.text-xs {
    font-size: 0.8125rem !important; /* 13px minimum for small text */
}

/* ---------- MOBILE: MAX 767px ---------- */
@media (max-width: 767px) {

    /* === GRIDS: Force single column on mobile === */

    /* Feature Cards Grid ("Everything You Need") */
    .grid.md\:grid-cols-2.lg\:grid-cols-4,
    .grid.sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Choose Your Path - 3 column grid */
    .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Course Category Cards */
    section .grid.sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Who Is This For section - 4 column */
    .grid.sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Lesson page sidebar - hide on mobile, show content full width */
    .lg\:col-span-3 {
        grid-column: span 1 / span 1 !important;
    }

    /* Messages grid */
    .grid.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Featured message - full width */
    .md\:col-span-2.lg\:col-span-2 {
        grid-column: span 1 !important;
    }

    /* === AUTHOR AVATARS: 2 columns with horizontal scroll option === */
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Make author images larger on mobile */
    .grid.grid-cols-2 img.w-20.h-20 {
        width: 5rem !important;
        height: 5rem !important;
    }

    /* === FOOTER: Single column on very small screens === */
    footer .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    footer .grid.grid-cols-2.sm\:grid-cols-3.md\:grid-cols-4.lg\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.25rem !important;
    }

    /* Footer quick start cards - stack */
    footer .lg\:col-span-2.grid.sm\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* === TYPOGRAPHY: Compact headings === */
    h1, .text-3xl, .text-4xl, .font-serif.text-3xl, .font-serif.text-4xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    h2, .text-2xl, .font-serif.text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
    }
    h3, .text-xl {
        font-size: 1.125rem !important;
    }

    /* Section titles */
    section h2.text-3xl,
    section h2.sm\:text-4xl {
        font-size: 1.5rem !important;
    }

    /* Content area headings */
    .content-area h1 {
        font-size: 1.5rem;
        margin-top: 1rem;
        margin-bottom: 0.75rem;
    }
    .content-area h2 {
        font-size: 1.25rem;
        margin-top: 1.25rem;
        margin-bottom: 0.5rem;
    }
    .content-area h3 {
        font-size: 1.125rem;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    /* === SPACING: Compact on mobile === */
    .py-16, .py-20, .sm\:py-20 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    .py-8 {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
    .py-6 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .mb-12 {
        margin-bottom: 1.5rem !important;
    }
    .mb-8 {
        margin-bottom: 1rem !important;
    }
    .mb-6 {
        margin-bottom: 0.75rem !important;
    }
    .gap-8 {
        gap: 1rem !important;
    }
    .gap-6 {
        gap: 0.75rem !important;
    }

    /* === CONTAINER WIDTHS === */
    .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-7xl {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* === CARDS: Full width with proper padding === */
    .rounded-2xl {
        border-radius: 1rem !important;
    }

    /* Card padding adjustment */
    .p-6 {
        padding: 1rem !important;
    }
    .p-8 {
        padding: 1.25rem !important;
    }

    /* === BREADCRUMBS: Compact scrollable === */
    .breadcrumbs,
    nav.flex.items-center.gap-2.text-sm.flex-wrap {
        font-size: 0.75rem !important;
        padding: 0.5rem 0 !important;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }
    .breadcrumbs::-webkit-scrollbar {
        display: none;
    }
    .breadcrumbs a,
    nav.flex.items-center.gap-2 a {
        padding: 0.25rem 0.25rem;
        white-space: nowrap;
    }

    /* === BUTTONS: Touch-friendly 44px minimum === */
    .btn, .btn-glossy, .btn-glossy-gold, .btn-outline,
    a[class*="py-2"], a[class*="py-3"],
    button[class*="py-2"], button[class*="py-3"] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* === SIDEBAR: Hide on mobile === */
    .space-y-6:has(.sidebar-card),
    aside.lg\:col-span-1,
    div.lg\:col-span-1:has(.sidebar-card) {
        display: none !important;
    }

    /* Sidebar card adjustments when shown */
    .sidebar-card {
        padding: 1rem;
    }
    .max-h-80 {
        max-height: 16rem !important;
    }

    /* === CONTENT BOXES === */
    .scripture-box {
        padding: 1rem;
        margin: 1rem 0;
    }
    blockquote {
        padding: 0.75rem;
        margin: 0.75rem 0;
    }

    /* === TABLES: Horizontal scroll === */
    .content-area table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* === REDUCE MOTION === */
    .resource-card:hover,
    .course-card:hover {
        transform: translateY(-2px);
    }

    /* === LESSON PAGE SPECIFICS === */
    /* Navigation buttons - stack vertically */
    .flex.items-center.justify-between.flex-wrap {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    .flex.items-center.justify-between.flex-wrap > a {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ---------- TABLET: 768px - 1024px ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 2-column grids for tablets */
    .grid.md\:grid-cols-2.lg\:grid-cols-4,
    .grid.sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Course categories - 2 columns on tablet */
    .grid.sm\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Author avatars - 3 columns on tablet */
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-5 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Footer - 3 columns on tablet */
    footer .grid.grid-cols-2.sm\:grid-cols-3.md\:grid-cols-4.lg\:grid-cols-5 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Lesson sidebar - still show on tablet */
    .lg\:col-span-3 {
        grid-column: span 3 / span 3 !important;
    }

    /* Image cropping - center on faces for tablets */
    /* Mobile uses object-position: top which works well */
    /* Tablet needs center 25% to show full faces, not just tops of heads */
    img[style*="object-fit: cover"],
    img.object-cover,
    .object-cover img {
        object-position: center 25% !important;
    }
}

/* ---------- VERY SMALL SCREENS: MAX 400px ---------- */
@media (max-width: 400px) {
    /* Footer links - single column */
    footer .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    /* Author avatars - larger on very small screens */
    .grid.grid-cols-2 img.w-20.h-20 {
        width: 4.5rem !important;
        height: 4.5rem !important;
    }

    /* Smaller section titles */
    section h2 {
        font-size: 1.25rem !important;
    }

    /* Tighter padding */
    .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-7xl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ---------- TEXT CONTRAST FIXES ---------- */

/* Ensure readable text on dark backgrounds */
.bg-ancient-ink .text-gray-400,
.bg-ancient-ink .text-gray-500 {
    color: #D1D5DB !important; /* gray-300 equivalent - more readable */
}

.bg-ancient-ink .text-gray-300 {
    color: #E5E7EB !important; /* gray-200 equivalent */
}

/* Scripture quote boxes - ensure readable */
.scripture-box {
    background: rgba(249, 247, 242, 0.98);
    color: var(--ancient-ink);
}
.scripture-box p,
.scripture-box span {
    color: var(--ancient-ink);
}

/* ---------- PDF VIEWER MOBILE ---------- */
@media (max-width: 768px) {
    /* PDF container - full width, better scroll */
    #pdfCanvasContainer {
        padding: 0.5rem !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* PDF toolbar - sticky and compact */
    .pdf-toolbar,
    div[class*="flex"][class*="items-center"][class*="justify-between"][class*="flex-wrap"] {
        position: sticky;
        top: 64px; /* Below nav */
        z-index: 20;
        background: white;
        padding: 0.5rem !important;
        gap: 0.5rem !important;
    }

    /* PDF zoom controls - compact */
    .pdf-zoom-controls,
    div[class*="flex"][class*="items-center"][class*="gap-2"] button {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* PDF container height */
    div[style*="calc(100vh - 340px)"] {
        height: calc(100vh - 220px) !important;
        min-height: 350px !important;
    }
}

/* ---------- LESSON PAGE MOBILE ---------- */
@media (max-width: 640px) {
    /* Lesson header - more compact */
    .lesson-header,
    div[class*="bg-ancient-ink"][class*="text-white"][class*="rounded-t"] {
        padding: 0.75rem 1rem !important;
    }

    /* Lesson tabs - full width */
    .lesson-tabs,
    div[class*="flex"][class*="border-b"][class*="bg-white"] button {
        flex: 1;
        padding: 0.625rem !important;
        font-size: 0.8rem !important;
    }

    /* Lesson content area */
    .lesson-content,
    div[class*="lg:col-span-3"] {
        padding: 0.75rem !important;
    }

    /* Hide sidebar on mobile by default - show via toggle */
    aside.lg\:col-span-1,
    div[class*="lg:col-span-1"][class*="space-y"] {
        display: none;
    }
}

/* ---------- MEGA MENU MOBILE FIXES ---------- */
@media (max-width: 1024px) {
    .mega-menu,
    .mega-menu-content {
        display: none !important;
    }
}

/* ---------- MOBILE ACCORDION STYLES ---------- */
.mobile-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.mobile-accordion-content.open {
    max-height: 500px;
}
.mobile-accordion-arrow {
    transition: transform 0.3s ease;
}
.mobile-accordion-arrow.open {
    transform: rotate(180deg);
}

/* ---------- UTILITY CLASSES FOR MOBILE ---------- */
@media (max-width: 640px) {
    .mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
    }
    .mobile-compact {
        padding: 0.5rem !important;
    }
    .mobile-hidden {
        display: none !important;
    }
    .mobile-text-sm {
        font-size: 0.875rem !important;
    }
    .mobile-text-xs {
        font-size: 0.75rem !important;
    }
}

/* ---------- HERO SECTION MOBILE FIXES ---------- */
@media (max-width: 640px) {
    /* Hero carousel - proper height for mobile */
    #hero-carousel,
    .hero-slides {
        height: auto !important;
        min-height: 420px !important;
    }

    /* Hero buttons - don't stretch full width */
    #hero-carousel .flex.flex-col a,
    .hero-slide .flex.flex-col a {
        align-self: center !important;
        width: auto !important;
        display: inline-flex !important;
    }

    /* Hero button container - center items */
    #hero-carousel .flex.flex-col,
    .hero-slide .flex.flex-col {
        align-items: center !important;
    }

    /* Hero text - better spacing */
    .hero-slide h1,
    .hero-slide h2 {
        font-size: 1.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Hero slide content - tighter padding */
    .hero-slide > div.relative {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    /* Reduce glow effect size on mobile */
    .hero-slide .rounded-full.blur-3xl {
        width: 150px !important;
        height: 150px !important;
    }
}

/* ============================================
   ELITE MOBILE DESIGN SYSTEM (2026)
   Touch-first interactions, depth, app-like UX
   ============================================ */

/* ---------- FIX HORIZONTAL OVERFLOW ---------- */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Prevent any element from causing horizontal scroll */
@media (max-width: 1023px) {
    * {
        max-width: 100vw;
    }

    .max-w-6xl, .max-w-7xl, .max-w-5xl, .max-w-4xl {
        max-width: 100% !important;
        overflow-x: hidden;
    }

    section, div, main, article {
        overflow-x: hidden;
    }

    /* Mobile breadcrumb - transparent, subtle styling */
    .mobile-breadcrumb, nav.mobile-breadcrumb {
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        padding: 0.75rem 1rem !important;
        gap: 0.5rem !important;
        font-size: 0.75rem !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
        border-bottom: none !important;
        border: none !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -ms-overflow-style: none;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    .mobile-breadcrumb::-webkit-scrollbar { display: none !important; }
    .mobile-breadcrumb a { color: #CBA378 !important; text-decoration: none !important; font-weight: 500 !important; flex-shrink: 0 !important; }
    .mobile-breadcrumb span { flex-shrink: 0 !important; }
    .mobile-breadcrumb span:not(.current) { color: rgba(255,255,255,0.4) !important; }
    .mobile-breadcrumb .current { color: rgba(255,255,255,0.9) !important; font-weight: 600 !important; }

    /* Light background breadcrumbs (for pages without dark hero) */
    .bg-white .mobile-breadcrumb span:not(.current),
    .bg-parchment > .mobile-breadcrumb span:not(.current) { color: #9ca3af !important; }
    .bg-white .mobile-breadcrumb .current,
    .bg-parchment > .mobile-breadcrumb .current { color: #1C1D37 !important; }

    /* Heritage Gold background = white text (override any text color classes) */
    .bg-heritage-gold,
    .bg-heritage-gold *,
    .bg-heritage-gold h1, .bg-heritage-gold h2, .bg-heritage-gold h3, .bg-heritage-gold h4,
    .bg-heritage-gold p, .bg-heritage-gold span, .bg-heritage-gold div,
    .bg-heritage-gold.text-ancient-ink,
    .bg-heritage-gold .text-ancient-ink,
    [style*="background: #CBA378"],
    [style*="background:#CBA378"],
    [style*="background-color: #CBA378"],
    [style*="background-color:#CBA378"] {
        color: white !important;
    }
    .bg-heritage-gold a,
    [style*="background: #CBA378"] a,
    [style*="background:#CBA378"] a {
        color: white !important;
    }

    /* Exception: Parent containers of breadcrumbs must allow overflow */
    .mobile-layout-wrapper,
    .lg\:hidden:has(.mobile-breadcrumb),
    div:has(> .mobile-breadcrumb) {
        overflow-x: visible !important;
        overflow: visible !important;
    }

    /* Fix any absolute positioned elements that might overflow */
    .absolute {
        max-width: 100vw;
    }

    /* Hero glow effects - contain them */
    .blur-3xl {
        max-width: 100vw;
        overflow: hidden;
    }
}

/* ---------- GLOBAL TOUCH SETTINGS ---------- */
* {
    -webkit-tap-highlight-color: transparent;
}

/* ---------- ELEVATION SYSTEM (Material Design 3) ---------- */
/* These are the DEFAULT elevated states - cards look premium by default */
.elevation-1 { box-shadow: 0 2px 8px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08); }
.elevation-2 { box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08); }
.elevation-3 { box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.10); }

/* ---------- MOBILE: CARDS ELEVATED BY DEFAULT ---------- */
@media (max-width: 1023px) {

    /*
     * PREMIUM CARD ELEVATION SYSTEM
     * All cards get soft shadows by default on mobile
     * Creates depth and premium app-like feel
     */

    /* Main content cards - white bg with rounded corners */
    .grid > a,
    a[class*="bg-white"][class*="rounded"],
    a.group[class*="rounded"],
    div.group[class*="bg-white"][class*="rounded"] {
        box-shadow:
            0 4px 20px rgba(28, 29, 55, 0.08),
            0 8px 40px rgba(28, 29, 55, 0.04),
            0 0 0 1px rgba(28, 29, 55, 0.03) !important;
        transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
                    box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* PRESSED state - cards shrink subtly */
    .grid > a:active,
    a[class*="bg-white"][class*="rounded"]:active,
    a.group[class*="rounded"]:active {
        transform: scale(0.97) !important;
        box-shadow:
            0 2px 10px rgba(28, 29, 55, 0.06),
            0 4px 20px rgba(28, 29, 55, 0.03) !important;
    }

    /* Featured/gradient cards get deeper shadow */
    a[class*="bg-gradient"],
    div[class*="bg-gradient"][class*="rounded"] {
        box-shadow:
            0 8px 32px rgba(28, 29, 55, 0.15),
            0 16px 48px rgba(28, 29, 55, 0.08) !important;
    }

    /* CTA Buttons - elevated and tactile */
    a[class*="bg-heritage-gold"]:not([class*="bg-heritage-gold/"]),
    a[class*="bg-ancient-ink"]:not([class*="bg-ancient-ink/"]),
    a[class*="bg-living-sage"]:not([class*="bg-living-sage/"]),
    .btn-glossy,
    .btn-glossy-gold {
        box-shadow:
            0 4px 16px rgba(28, 29, 55, 0.20),
            0 2px 6px rgba(28, 29, 55, 0.15) !important;
        transition: transform 120ms ease-out, box-shadow 120ms ease-out !important;
    }

    /* Button pressed - satisfying tactile feel */
    a[class*="bg-heritage-gold"]:active,
    a[class*="bg-ancient-ink"]:active,
    a[class*="bg-living-sage"]:active,
    .btn-glossy:active,
    .btn-glossy-gold:active {
        transform: scale(0.94) !important;
        box-shadow:
            0 2px 6px rgba(28, 29, 55, 0.10) !important;
    }

    /* Specific card types */

    /* Feature cards (What We Offer section) */
    a.group.bg-white.rounded-2xl,
    a.group.bg-white.rounded-xl {
        box-shadow:
            0 4px 24px rgba(28, 29, 55, 0.10),
            0 8px 40px rgba(28, 29, 55, 0.06) !important;
    }

    /* Message/video cards with overflow hidden */
    a[class*="overflow-hidden"][class*="rounded"] {
        box-shadow:
            0 6px 28px rgba(28, 29, 55, 0.12),
            0 12px 48px rgba(28, 29, 55, 0.06) !important;
    }

    /* Cards in grid layout - ensure all get shadows */
    .grid[class*="grid-cols"] > a {
        box-shadow:
            0 4px 20px rgba(28, 29, 55, 0.08),
            0 8px 40px rgba(28, 29, 55, 0.04) !important;
    }
}

/* ---------- PREVENT TEXT WRAPPING ---------- */
/* Badge/label text - never wrap */
.lesson-count,
span[class*="text-xs"][class*="font-medium"],
span[class*="text-sm"][class*="font-medium"],
.bg-heritage-gold\/20,
.bg-living-sage\/20,
.bg-ancient-ink\/10 {
    white-space: nowrap;
}

/* Card meta info - prevent wrapping */
@media (max-width: 767px) {
    .text-xs.text-gray-500,
    .text-sm.text-gray-500,
    .flex.items-center.gap-1.text-xs,
    .flex.items-center.gap-2.text-xs,
    .flex.items-center.gap-1.text-sm,
    .flex.items-center.gap-2.text-sm {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Card titles - balance text */
    h2, h3, h4,
    .font-serif.text-xl,
    .font-serif.text-lg,
    .font-semibold.text-lg {
        text-wrap: balance;
    }
}

/* ---------- MOBILE MENU OVERLAY FIXES ---------- */
#mobileMenuOverlay {
    z-index: 9999 !important;
}

/* Ensure hamburger button is clickable */
label[for="mobile-menu-toggle"],
button[data-open-menu] {
    position: relative;
    z-index: 1001;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile menu slide panel */
#mobileMenuOverlay .menu-panel {
    z-index: 10000;
}

/* Mobile menu accordions - proper isolation */
#mobileMenuOverlay details {
    position: relative;
    isolation: isolate;
}

#mobileMenuOverlay details summary {
    position: relative;
    z-index: 1;
}

#mobileMenuOverlay details > div {
    position: relative;
    z-index: 0;
}

/* Accordion arrow animation */
#mobileMenuOverlay details[open] .accordion-arrow {
    transform: rotate(180deg);
}

/* ---------- MOBILE BOTTOM NAVIGATION ---------- */
.mobile-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: linear-gradient(to top, rgba(28, 29, 55, 1) 0%, rgba(28, 29, 55, 0.98) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Smooth transition for footer merge */
    transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.mobile-bottom-nav .nav-item {
    color: #9CA3AF;
    min-height: 56px;
    transition: color 150ms ease, transform 150ms ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-decoration: none;
    padding: 0.5rem 0;
}

.mobile-bottom-nav .nav-item svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.25rem;
    transition: transform 150ms ease;
}

.mobile-bottom-nav .nav-item span {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.mobile-bottom-nav .nav-item:active {
    transform: scale(0.9);
}

.mobile-bottom-nav .nav-item:active svg {
    transform: scale(1.1);
}

.mobile-bottom-nav .nav-item.active,
.mobile-bottom-nav .nav-item:active {
    color: var(--heritage-gold);
}

/* Body padding for bottom nav */
@media (max-width: 1023px) {
    body {
        padding-bottom: 70px;
    }
}

/* ---------- MOBILE HERO ENHANCEMENTS ---------- */
@media (max-width: 1023px) {
    /* Mobile hero gradient background */
    .mobile-hero {
        background: linear-gradient(180deg,
            var(--ancient-ink) 0%,
            #252642 50%,
            var(--ancient-ink) 100%);
    }

    /* Hero CTA button - prominent */
    .mobile-hero a.bg-heritage-gold {
        box-shadow: 0 8px 24px rgba(203, 163, 120, 0.3);
        font-size: 1.125rem;
        padding: 1rem 2rem;
        border-radius: 0.75rem;
    }

    .mobile-hero a.bg-heritage-gold:active {
        transform: scale(0.95);
        box-shadow: 0 4px 12px rgba(203, 163, 120, 0.2);
    }
}

/* ---------- MOBILE TRUST INDICATORS ---------- */
.trust-indicators {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.trust-indicators span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #9CA3AF;
}

.trust-indicators span::before {
    content: '✓';
    color: var(--heritage-gold);
    font-weight: bold;
}

/* ---------- MOBILE CARD POLISH ---------- */
@media (max-width: 767px) {
    /* Cards with images - proper aspect ratio */
    .aspect-video {
        aspect-ratio: 16 / 9;
    }

    /* Card header icons - consistent sizing */
    .w-14.h-14,
    .w-12.h-12 {
        width: 3rem !important;
        height: 3rem !important;
    }

    /* Card list items - prevent wrapping */
    .text-xs.text-gray-500,
    ul.text-xs li {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Course category cards - better spacing */
    a.block.bg-parchment.rounded-xl {
        padding: 1rem;
    }

    /* Author cards - tighter on mobile */
    .text-center.p-4.bg-white.rounded-xl {
        padding: 0.875rem;
    }

    /* Author images - consistent size */
    .w-20.h-20.rounded-full {
        width: 4.5rem !important;
        height: 4.5rem !important;
    }

    /* Section descriptions */
    section p.text-gray-600.max-w-xl,
    section p.text-gray-600.max-w-2xl {
        font-size: 0.9375rem;
        line-height: 1.5;
    }
}

/* ---------- SMOOTH SCROLL BEHAVIOR ---------- */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ---------- FOCUS STATES FOR ACCESSIBILITY ---------- */
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--heritage-gold);
    outline-offset: 2px;
}

/* ---------- SAFE AREA INSETS (iPhone notch) ---------- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
    }

    .mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* ============================================
   ELITE 2026 MOBILE POLISH
   Premium look and feel
   ============================================ */

@media (max-width: 1023px) {

    /* ---------- PREMIUM TYPOGRAPHY ---------- */
    /* Section titles - refined */
    section h2 {
        font-size: 1.625rem !important;
        line-height: 1.25 !important;
        letter-spacing: -0.02em;
        font-weight: 600;
    }

    /* Subtitles/taglines */
    section p.text-gray-600,
    section p.text-gray-500 {
        font-size: 0.9375rem !important;
        line-height: 1.6;
        letter-spacing: 0.01em;
    }

    /* Category labels */
    p[class*="uppercase"],
    span[class*="uppercase"] {
        font-size: 0.6875rem !important;
        letter-spacing: 0.1em;
        font-weight: 600;
    }

    /* ---------- PREMIUM SPACING ---------- */
    /* Sections - breathing room */
    section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Section headers */
    section > div > .text-center.mb-12,
    section > div > div.text-center {
        margin-bottom: 2rem !important;
    }

    /* Grid gaps - refined */
    .grid.gap-6 {
        gap: 1rem !important;
    }
    .grid.gap-8 {
        gap: 1.25rem !important;
    }

    /* ---------- PREMIUM CARDS ---------- */
    /* All interactive cards */
    a[class*="rounded-2xl"],
    a[class*="rounded-xl"],
    div[class*="rounded-2xl"]:not(nav *),
    div[class*="rounded-xl"]:not(nav *) {
        border-radius: 1rem !important;
    }

    /* Card padding - generous */
    .p-6:not(nav *) {
        padding: 1.25rem !important;
    }
    .p-8:not(nav *) {
        padding: 1.5rem !important;
    }

    /* ---------- PREMIUM ICONS ---------- */
    /* Icon containers */
    .w-14.h-14,
    .w-12.h-12,
    .w-16.h-16 {
        width: 3.5rem !important;
        height: 3.5rem !important;
        font-size: 1.5rem !important;
    }

    /* Icon hover effect disabled on mobile */
    .group:hover .group-hover\:scale-110 {
        transform: none !important;
    }

    /* ---------- PREMIUM BUTTONS ---------- */
    /* All buttons - pill shaped and prominent */
    a[class*="rounded-lg"][class*="px-"],
    button[class*="rounded-lg"][class*="px-"] {
        border-radius: 0.75rem !important;
        font-weight: 600 !important;
    }

    /* Primary CTA buttons */
    a[class*="bg-heritage-gold"][class*="px-8"],
    a[class*="bg-ancient-ink"][class*="px-8"] {
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
    }

    /* ---------- PREMIUM HERO ---------- */
    .mobile-hero {
        padding-top: 2rem !important;
        padding-bottom: 2.5rem !important;
    }

    .mobile-hero h1 {
        font-size: 2rem !important;
        font-weight: 700;
        letter-spacing: -0.03em;
    }

    /* Hero action cards */
    .mobile-hero .grid.grid-cols-2 a {
        padding: 1.25rem !important;
        border-radius: 1rem !important;
        background: rgba(255,255,255,0.08) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
    }

    /* ---------- AUTHOR CARDS ---------- */
    /* Author grid */
    .grid.grid-cols-2.sm\:grid-cols-3.lg\:grid-cols-5 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    /* Author images */
    img.w-20.h-20.rounded-full {
        width: 5rem !important;
        height: 5rem !important;
        border-width: 3px !important;
    }

    /* Author names */
    .grid.grid-cols-2 h3.font-serif {
        font-size: 0.9375rem !important;
    }

    /* ---------- MESSAGE CARDS ---------- */
    /* Video thumbnails */
    .aspect-video img {
        border-radius: 0.75rem 0.75rem 0 0 !important;
    }

    /* Play button */
    .aspect-video .w-14.h-14,
    .aspect-video .w-12.h-12 {
        width: 3.5rem !important;
        height: 3.5rem !important;
    }

    /* ---------- FOOTER POLISH ---------- */
    footer {
        padding-bottom: 5rem !important; /* Space for bottom nav */
    }

    footer .grid {
        gap: 1.5rem !important;
    }

    /* ---------- DAILY VERSE BAR ---------- */
    a.block.bg-white.border-b {
        padding: 1.25rem 1rem !important;
    }

    a.block.bg-white .font-serif {
        font-size: 1.0625rem !important;
        line-height: 1.5;
    }

    /* ---------- STATS BAR ---------- */
    .grid.grid-cols-2.sm\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    .grid.grid-cols-2.sm\:grid-cols-4 .text-3xl {
        font-size: 2rem !important;
        font-weight: 700;
        color: var(--heritage-gold);
    }
}

/* ---------- PREVENT OVERFLOW FROM HERO GLOW ---------- */
.mobile-hero .absolute.blur-3xl,
section .absolute.blur-3xl {
    display: none;
}

@media (min-width: 1024px) {
    .mobile-hero .absolute.blur-3xl,
    section .absolute.blur-3xl {
        display: block;
    }
}

/* ============================================
   LESSON PAGE MOBILE OPTIMIZATIONS
   Phase 1: Global CSS fixes for all lesson pages
   ============================================ */

@media (max-width: 767px) {
    /* ---------- LESSON PAGE TYPOGRAPHY ---------- */
    /* Scale down content for better mobile reading */
    .content-area {
        font-size: 1rem !important;
        line-height: 1.7;
    }

    .content-area h1 {
        font-size: 1.375rem !important;
        margin-top: 0.75rem;
        margin-bottom: 0.5rem;
    }

    .content-area h2 {
        font-size: 1.1875rem !important;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    .content-area h3 {
        font-size: 1.0625rem !important;
        margin-top: 0.875rem;
        margin-bottom: 0.375rem;
    }

    /* ---------- LESSON TAB INTERFACE ---------- */
    /* Larger touch targets for tabs */
    button[onclick*="showTab"],
    .tab-button,
    div[class*="border-b"][class*="bg-white"] button {
        min-height: 48px !important;
        padding: 0.875rem 1rem !important;
        font-size: 0.9375rem !important;
        font-weight: 500;
        flex: 1;
        border-radius: 0 !important;
    }

    /* Tab container - full width stretch */
    div[class*="flex"][class*="border-b"][class*="bg-white"] {
        display: flex !important;
        width: 100%;
    }

    /* Active tab indicator */
    button[onclick*="showTab"].active,
    .tab-button.active {
        border-bottom: 3px solid var(--heritage-gold) !important;
        color: var(--ancient-ink) !important;
        background-color: rgba(203, 163, 120, 0.1) !important;
    }

    /* ---------- LESSON NAVIGATION BUTTONS ---------- */
    /* Stack prev/next buttons vertically on mobile */
    .flex.items-center.justify-between.flex-wrap,
    div[class*="flex"][class*="justify-between"]:has(> a[href*="lesson"]),
    div[class*="flex"][class*="justify-between"]:has(> a[href*="chapter"]) {
        flex-direction: column !important;
        gap: 0.75rem !important;
        padding: 0.5rem !important;
    }

    /* Navigation buttons - full width */
    .flex.items-center.justify-between.flex-wrap > a,
    div[class*="flex"][class*="justify-between"] > a[class*="px-"] {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: 48px !important;
        padding: 0.875rem 1rem !important;
    }

    /* Lesson index button (middle) - also full width */
    .flex.items-center.justify-between.flex-wrap > a:nth-child(2) {
        order: -1; /* Move "Back to Course" to top */
    }

    /* ---------- LESSON HEADER ---------- */
    /* Compact lesson header on mobile */
    div[class*="bg-ancient-ink"][class*="rounded-t"],
    .lesson-header,
    div[class*="bg-living-sage"][class*="rounded-t"],
    div[class*="bg-heritage-gold"][class*="rounded-t"] {
        padding: 0.875rem 1rem !important;
    }

    div[class*="bg-ancient-ink"][class*="rounded-t"] h1,
    .lesson-header h1 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    /* Lesson number badge */
    div[class*="bg-ancient-ink"] span[class*="rounded-full"],
    .lesson-badge {
        padding: 0.25rem 0.625rem !important;
        font-size: 0.6875rem !important;
    }

    /* ---------- SCRIPTURE BOXES ---------- */
    /* More compact scripture/quote boxes */
    .scripture-box,
    .bg-parchment.rounded-xl.p-6,
    blockquote.bg-parchment {
        padding: 0.875rem !important;
        margin: 0.875rem 0 !important;
    }

    /* Scripture text sizing */
    .scripture-box p,
    .scripture-box .font-serif {
        font-size: 0.9375rem !important;
        line-height: 1.6;
    }

    /* Scripture reference */
    .scripture-box cite,
    .scripture-box .text-right {
        font-size: 0.8125rem !important;
    }

    /* ---------- LESSON CARD HEADERS ---------- */
    /* Course/lesson info cards */
    div[class*="p-6"]:has(> h2),
    div[class*="p-8"]:has(> h2) {
        padding: 1rem !important;
    }

    /* ---------- LESSON SIDEBAR ITEMS ---------- */
    /* When sidebar is visible (e.g., lesson picker) */
    .lesson-nav-item,
    .sidebar-card .lesson-nav-item {
        padding: 0.625rem 0.5rem !important;
        font-size: 0.875rem !important;
        min-height: 44px;
    }

    .lesson-nav-item.active {
        padding-left: 0.75rem !important;
    }

    /* ---------- PDF VIEWER MOBILE FIXES ---------- */
    /* Full-screen PDF on mobile */
    #pdfCanvasContainer,
    div[id*="pdf"][class*="rounded"] {
        height: calc(100vh - 160px) !important;
        min-height: 400px !important;
        border-radius: 0 !important;
    }

    /* PDF toolbar - compact and sticky */
    div[class*="flex"][class*="gap-2"]:has(> button[onclick*="zoom"]),
    .pdf-controls {
        position: sticky;
        top: 56px;
        z-index: 30;
        background: white;
        padding: 0.5rem !important;
        gap: 0.375rem !important;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* PDF zoom/nav buttons - larger touch targets */
    div[class*="flex"]:has(> button[onclick*="zoom"]) button,
    .pdf-controls button {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.5rem !important;
        font-size: 0.875rem !important;
    }

    /* ---------- NOTES/SLIDES TAB CONTENT ---------- */
    /* When showing notes or slides content */
    .tab-content,
    div[id*="notes"],
    div[id*="slides"] {
        padding: 0.75rem !important;
    }

    /* ---------- DOWNLOAD BUTTONS ---------- */
    /* PDF/resource download buttons */
    a[href*=".pdf"][class*="rounded"],
    a[class*="download"],
    button[class*="download"] {
        min-height: 48px !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    /* ---------- LESSON LIST LINKS ---------- */
    /* Links in lesson content */
    .content-area a {
        padding: 0.125rem 0;
    }

    /* Make inline links more tappable */
    .content-area ul a,
    .content-area ol a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        vertical-align: middle;
    }
}

/* ---------- BOOK CHAPTER MOBILE FIXES ---------- */
@media (max-width: 767px) {
    /* Chapter header */
    div[class*="bg-ancient-ink"]:has(> h1[class*="text-2xl"]),
    div[class*="bg-living-sage"]:has(> h1[class*="text-2xl"]) {
        padding: 1rem !important;
    }

    /* Chapter title */
    div[class*="bg-ancient-ink"] h1[class*="text-2xl"],
    div[class*="bg-living-sage"] h1[class*="text-2xl"] {
        font-size: 1.375rem !important;
    }

    /* Chapter navigation - same as lesson nav */
    div[class*="flex"]:has(> a[href*="chapter"]) {
        flex-direction: column !important;
        gap: 0.625rem !important;
    }

    /* Book info card */
    div[class*="bg-white"][class*="rounded"]:has(> img[alt*="book"]),
    div[class*="bg-white"][class*="rounded"]:has(> img[alt*="cover"]) {
        flex-direction: column !important;
        text-align: center !important;
    }

    /* Book cover image on mobile */
    img[alt*="book"][class*="rounded"],
    img[alt*="cover"][class*="rounded"] {
        max-width: 180px !important;
        margin: 0 auto 1rem !important;
    }
}

/* ============================================
   ELITE MOBILE DESIGN SYSTEM UTILITIES
   Reusable classes for app-like mobile UX
   ============================================ */

/* ---------- MOBILE HERO GLOW EFFECTS ---------- */
@media (max-width: 1023px) {
    .mobile-hero-glow {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        opacity: 0.4;
        pointer-events: none;
    }
    .mobile-hero-glow-gold {
        background: #CBA378;
    }
    .mobile-hero-glow-sage {
        background: #7F9A83;
    }
}

/* ---------- MOBILE CARD SHADOWS ---------- */
@media (max-width: 1023px) {
    /* Standard card shadow - soft and rounded */
    .mobile-card-shadow {
        box-shadow: 0 4px 20px -4px rgba(28, 29, 55, 0.12);
    }

    /* Deeper shadow for emphasis */
    .mobile-card-shadow-deep {
        box-shadow: 0 8px 32px -4px rgba(28, 29, 55, 0.15);
    }

    /* Bordered card (no shadow) */
    .mobile-card-bordered {
        border: 1.5px solid rgba(203, 163, 120, 0.3);
        box-shadow: none;
    }
}

/* ---------- MOBILE TOUCH FEEDBACK ---------- */
@media (max-width: 1023px) {
    .touch-feedback {
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }
    .touch-feedback:active {
        transform: scale(0.97);
    }

    /* Deeper press for buttons */
    .touch-feedback-deep:active {
        transform: scale(0.94);
    }

    /* Bordered card active state */
    .touch-feedback-border:active {
        border-color: rgba(203, 163, 120, 0.5);
    }
}

/* ---------- HORIZONTAL SCROLL CONTAINERS ---------- */
@media (max-width: 1023px) {
    .scroll-x-mobile {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .scroll-x-mobile::-webkit-scrollbar {
        display: none;
    }

    /* Scroll cards */
    .scroll-card-240 {
        flex: 0 0 240px;
        scroll-snap-align: start;
    }
    .scroll-card-160 {
        flex: 0 0 160px;
        scroll-snap-align: start;
    }
    .scroll-card-280 {
        flex: 0 0 280px;
        scroll-snap-align: start;
    }
}

/* ---------- MOBILE STATS BAR ---------- */
@media (max-width: 1023px) {
    .mobile-stat-item {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.06);
        border-radius: 0.625rem;
        padding: 0.75rem 0.375rem;
        text-align: center;
    }
    .mobile-stat-number {
        color: #CBA378;
        font-size: 1.125rem;
        font-weight: 700;
    }
    .mobile-stat-label {
        color: rgba(255, 255, 255, 0.45);
        font-size: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
}

/* ---------- MOBILE SECTION HEADERS ---------- */
@media (max-width: 1023px) {
    .mobile-section-header {
        margin-bottom: 1rem;
        text-align: center;
    }
    .mobile-section-label {
        font-size: 0.5625rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: rgba(28, 29, 55, 0.4);
    }
    .mobile-section-label-gold {
        color: #CBA378;
    }
    .mobile-section-title {
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 1.25rem;
        font-weight: 600;
        color: #1C1D37;
    }
}

/* ---------- MOBILE TYPOGRAPHY SCALE ---------- */
@media (max-width: 1023px) {
    .mobile-text-hero {
        font-size: 1.5rem;
        line-height: 1.2;
        font-weight: 700;
    }
    .mobile-text-title {
        font-size: 1.25rem;
        line-height: 1.3;
        font-weight: 600;
    }
    .mobile-text-subtitle {
        font-size: 0.9375rem;
        line-height: 1.5;
    }
    .mobile-text-body {
        font-size: 0.875rem;
        line-height: 1.6;
    }
    .mobile-text-caption {
        font-size: 0.75rem;
        line-height: 1.4;
    }
    .mobile-text-tiny {
        font-size: 0.625rem;
        line-height: 1.3;
    }
}

/* ---------- MOBILE PILL/BADGE STYLES ---------- */
@media (max-width: 1023px) {
    .mobile-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        padding: 0.375rem 0.75rem;
        border-radius: 1.5rem;
        font-size: 0.6875rem;
        font-weight: 600;
    }
    .mobile-pill-gold {
        background: rgba(203, 163, 120, 0.15);
        color: #CBA378;
    }
    .mobile-pill-sage {
        background: rgba(127, 154, 131, 0.15);
        color: #7F9A83;
    }
    .mobile-pill-dark {
        background: rgba(28, 29, 55, 0.1);
        color: #1C1D37;
    }
}

/* ---------- MOBILE CTA BUTTON ---------- */
@media (max-width: 1023px) {
    .mobile-cta-primary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.875rem 1.5rem;
        background: #CBA378;
        color: #1C1D37;
        border-radius: 0.75rem;
        font-weight: 600;
        font-size: 0.9375rem;
        transition: transform 0.1s ease;
    }
    .mobile-cta-primary:active {
        transform: scale(0.97);
    }

    .mobile-cta-secondary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.875rem 1.5rem;
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0.75rem;
        font-weight: 600;
        font-size: 0.9375rem;
        transition: transform 0.1s ease;
    }
    .mobile-cta-secondary:active {
        transform: scale(0.97);
    }
}

/* ---------- MOBILE QUICK LINKS GRID ---------- */
@media (max-width: 1023px) {
    .mobile-quick-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
        background: white;
        border-radius: 0.75rem;
        border: 1.5px solid rgba(203, 163, 120, 0.2);
        transition: all 0.1s ease;
    }
    .mobile-quick-link:active {
        transform: scale(0.97);
        border-color: rgba(203, 163, 120, 0.4);
    }
}

/* ---------- MOBILE LOADING ANIMATIONS ---------- */
@media (max-width: 1023px) {
    @keyframes mobileSlideUp {
        from {
            opacity: 0;
            transform: translateY(12px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .mobile-animate-in {
        animation: mobileSlideUp 0.35s ease-out backwards;
    }

    /* Staggered animations */
    .mobile-animate-in:nth-child(1) { animation-delay: 0.05s; }
    .mobile-animate-in:nth-child(2) { animation-delay: 0.1s; }
    .mobile-animate-in:nth-child(3) { animation-delay: 0.15s; }
    .mobile-animate-in:nth-child(4) { animation-delay: 0.2s; }
    .mobile-animate-in:nth-child(5) { animation-delay: 0.25s; }
}

/* ---------- LESSON PAGE: HIDE COMPACT HEADER ---------- */
/* Breadcrumbs are sufficient - no need for the dark header bar */
@media (max-width: 1023px) {
    .mobile-lesson-header-compact {
        display: none !important;
    }
}

/* ============================================
   TABLET RESPONSIVE RULES
   ============================================
   
   Strategy: Orientation-based layout switching
   - Portrait (vertical): Mobile layout
   - Landscape (horizontal): Desktop layout
   
   Covers tablets from iPad Mini to iPad Pro 12.9"
   ============================================ */

/* ---------- TABLET PORTRAIT: FORCE MOBILE LAYOUT ---------- */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
    
    /* Show mobile-only elements */
    .lg\:hidden {
        display: block !important;
    }
    
    /* Hide desktop-only elements */
    .hidden.lg\:block,
    .hidden.lg\:flex,
    .hidden.lg\:grid {
        display: none !important;
    }
    
    /* Mobile footer navigation - show it */
    #mobileFooterNav {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Desktop footer - hide it */
    #footer-placeholder .hidden.lg\:block,
    footer.hidden.lg\:block {
        display: none !important;
    }
    
    /* Top nav - hide on tablet portrait (mobile has bottom nav) */
    .top-nav,
    #nav-placeholder .hidden.lg\:block {
        display: none !important;
    }
    
    /* Grid adjustments - single column like mobile */
    .lg\:grid-cols-2,
    .lg\:grid-cols-3,
    .lg\:grid-cols-4,
    .lg\:grid-cols-5 {
        grid-template-columns: 1fr !important;
    }
    
    /* Flex direction - stack like mobile */
    .lg\:flex-row {
        flex-direction: column !important;
    }
    
    /* Width overrides */
    .lg\:w-1\/2,
    .lg\:w-1\/3,
    .lg\:w-2\/3,
    .lg\:w-1\/4,
    .lg\:w-3\/4 {
        width: 100% !important;
    }
    
    /* Column span overrides */
    .lg\:col-span-1,
    .lg\:col-span-2,
    .lg\:col-span-3 {
        grid-column: span 1 !important;
    }
    
    /* Padding adjustments for tablet portrait (slightly more than phone) */
    .mobile-home,
    .lg\:hidden {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    /* Text size - slightly larger than phone */
    body {
        font-size: 1.0625rem;
    }
}

/* ---------- TABLET LANDSCAPE: FORCE DESKTOP LAYOUT ---------- */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: landscape) {
    
    /* Hide mobile-only elements */
    .lg\:hidden {
        display: none !important;
    }
    
    /* Show desktop-only elements */
    .hidden.lg\:block {
        display: block !important;
    }
    .hidden.lg\:flex {
        display: flex !important;
    }
    .hidden.lg\:grid {
        display: grid !important;
    }
    
    /* Mobile footer navigation - hide it */
    #mobileFooterNav {
        display: none !important;
    }
    
    /* Top nav - show it */
    .top-nav,
    #nav-placeholder .hidden.lg\:block {
        display: block !important;
    }
    
    /* Restore grid columns */
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
    
    /* Restore flex direction */
    .lg\:flex-row {
        flex-direction: row !important;
    }
    
    /* Restore widths */
    .lg\:w-1\/2 {
        width: 50% !important;
    }
    .lg\:w-1\/3 {
        width: 33.333333% !important;
    }
    .lg\:w-2\/3 {
        width: 66.666667% !important;
    }
    
    /* Restore column spans */
    .lg\:col-span-3 {
        grid-column: span 3 !important;
    }
    
    /* Slightly reduced max-width for tablet landscape */
    .max-w-7xl {
        max-width: 1100px !important;
    }
    .max-w-6xl {
        max-width: 1000px !important;
    }
    
    /* Slightly reduced padding for tablet landscape */
    .lg\:px-8 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ---------- TABLET TOUCH OPTIMIZATIONS ---------- */
@media (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
    
    /* Larger touch targets */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Disable hover effects that don't work well on touch */
    .group:hover .group-hover\:scale-105,
    .group:hover .group-hover\:scale-110 {
        transform: none;
    }
    
    /* Use active states instead of hover for cards */
    .shadow-lg:active {
        box-shadow: var(--shadow-card-hover);
        transform: translateY(-2px);
    }
}

/* ---------- TABLET PORTRAIT: ENHANCED MOBILE LAYOUT ---------- */
@media (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
    
    /* 2-column grid for course categories on tablet portrait */
    .mobile-home .grid[style*="grid-template-columns: repeat(2"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* Larger cards on tablet portrait */
    .home-card,
    .elite-book-card,
    .elite-author-card {
        padding: 1.25rem !important;
    }
    
    /* Hero adjustments */
    .mobile-hero h1 {
        font-size: 2.75rem !important;
    }
    
    /* Stats row - more spacing */
    .mobile-home [style*="gap: 3rem"] {
        gap: 4rem !important;
    }
    
    /* Featured book card - side by side on tablet portrait */
    .mobile-home a[href*="higher-calling"] .flex {
        flex-direction: row !important;
    }
}

/* ============================================
   SOCIAL SHARE BUTTONS
   ============================================ */

.share-buttons-wrapper {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(28, 29, 55, 0.1);
}

.share-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.share-label {
    font-size: 0.875rem;
    color: var(--text-muted, #6B7280);
    font-weight: 500;
    font-family: 'Inter', system-ui, sans-serif;
}

.share-icons {
    display: flex;
    gap: 0.5rem;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 0.625rem;
    background: var(--parchment, #F9F7F2);
    border: 1px solid rgba(28, 29, 55, 0.1);
    color: var(--text-muted, #6B7280);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-decoration: none;
}

.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(28, 29, 55, 0.12);
}

.share-btn.share-facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
    color: white;
}

.share-btn.share-twitter:hover {
    background: #000000;
    border-color: #000000;
    color: white;
}

.share-btn.share-copy:hover {
    background: var(--heritage-gold, #CBA378);
    border-color: var(--heritage-gold, #CBA378);
    color: var(--ancient-ink, #1C1D37);
}

.share-icon {
    width: 18px;
    height: 18px;
}

/* Copy tooltip */
.copy-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ancient-ink, #1C1D37);
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

.copy-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ancient-ink, #1C1D37);
}

.copy-tooltip.show {
    opacity: 1;
    visibility: visible;
}

/* Sidebar placement */
.sidebar .share-buttons-wrapper {
    background: white;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(28, 29, 55, 0.08);
    margin-top: 1.5rem;
}

.sidebar .share-buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.sidebar .share-icons {
    width: 100%;
    justify-content: flex-start;
}

/* Mobile adjustments */
@media (max-width: 1023px) {
    .share-buttons-wrapper {
        margin-top: 1.5rem;
        padding-top: 1rem;
    }

    .share-buttons {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .share-btn {
        width: 44px;
        height: 44px;
    }

    .share-icon {
        width: 20px;
        height: 20px;
    }
}