/* ==========================================================================
   FOL Oat Theme Stylesheet
   Integrates with Oat UI (0.7.2) with Palette Theming (Rose, Blue, Slate, etc.)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Theme Color Palettes (light-dark dynamic color scheme)
   -------------------------------------------------------------------------- */
html[data-theme="dark"],
:root[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"],
:root[data-theme="light"] {
    color-scheme: light;
}

:root,
[data-theme-palette="rose"] {
    --background: light-dark(#ffffff, #0c0507);
    --foreground: light-dark(#09090b, #fafafa);
    --card: light-dark(#ffffff, #190a10);
    --card-foreground: light-dark(#09090b, #fafafa);
    --primary: light-dark(#e11d48, #fb7185);
    --primary-foreground: light-dark(#ffffff, #1c0511);
    --secondary: light-dark(#fff1f2, #2a1520);
    --secondary-foreground: light-dark(#9f1239, #fda4af);
    --muted: light-dark(#fff1f2, #2a1520);
    --muted-foreground: light-dark(#71717a, #a1a1aa);
    --faint: light-dark(#fff5f6, #140a0f);
    --faint-foreground: light-dark(#a1a1aa, #71717a);
    --accent: light-dark(#ffe4e6, #3b1525);
    --border: light-dark(#fecdd3, #4a1d30);
    --input: light-dark(#fecdd3, #4a1d30);
    --ring: light-dark(#e11d48, #fb7185);
}

[data-theme-palette="blue"] {
    --background: light-dark(#ffffff, #030712);
    --foreground: light-dark(#09090b, #fafafa);
    --card: light-dark(#ffffff, #0a1628);
    --card-foreground: light-dark(#09090b, #fafafa);
    --primary: light-dark(#2563eb, #60a5fa);
    --primary-foreground: light-dark(#ffffff, #0c1a32);
    --secondary: light-dark(#eff6ff, #172240);
    --secondary-foreground: light-dark(#1d4ed8, #93bbfd);
    --muted: light-dark(#eff6ff, #172240);
    --muted-foreground: light-dark(#71717a, #a1a1aa);
    --faint: light-dark(#f5f9ff, #081020);
    --faint-foreground: light-dark(#a1a1aa, #71717a);
    --accent: light-dark(#dbeafe, #1e3a5f);
    --border: light-dark(#bfdbfe, #1e3a5f);
    --input: light-dark(#bfdbfe, #1e3a5f);
    --ring: light-dark(#2563eb, #60a5fa);
}

[data-theme-palette="slate"] {
    --background: light-dark(#ffffff, #020617);
    --foreground: light-dark(#020617, #f8fafc);
    --card: light-dark(#ffffff, #0f172a);
    --card-foreground: light-dark(#020617, #f8fafc);
    --primary: light-dark(#0f172a, #f8fafc);
    --primary-foreground: light-dark(#f8fafc, #020617);
    --secondary: light-dark(#f1f5f9, #1e293b);
    --secondary-foreground: light-dark(#0f172a, #f8fafc);
    --muted: light-dark(#f1f5f9, #1e293b);
    --muted-foreground: light-dark(#64748b, #94a3b8);
    --faint: light-dark(#f8fafc, #090e17);
    --faint-foreground: light-dark(#94a3b8, #64748b);
    --accent: light-dark(#f1f5f9, #1e293b);
    --border: light-dark(#e2e8f0, #1e293b);
    --input: light-dark(#e2e8f0, #1e293b);
    --ring: light-dark(#0f172a, #f8fafc);
}

[data-theme-palette="stone"] {
    --background: light-dark(#ffffff, #0c0a09);
    --foreground: light-dark(#1c1917, #f5f5f4);
    --card: light-dark(#ffffff, #1c1917);
    --card-foreground: light-dark(#1c1917, #f5f5f4);
    --primary: light-dark(#1c1917, #f5f5f4);
    --primary-foreground: light-dark(#f5f5f4, #1c1917);
    --secondary: light-dark(#f5f5f4, #292524);
    --secondary-foreground: light-dark(#1c1917, #f5f5f4);
    --muted: light-dark(#f5f5f4, #292524);
    --muted-foreground: light-dark(#78716c, #a8a29e);
    --faint: light-dark(#fafaf9, #141210);
    --faint-foreground: light-dark(#a8a29e, #78716c);
    --accent: light-dark(#f5f5f4, #292524);
    --border: light-dark(#e7e5e4, #292524);
    --input: light-dark(#e7e5e4, #292524);
    --ring: light-dark(#1c1917, #f5f5f4);
}

[data-theme-palette="green"] {
    --background: light-dark(#ffffff, #020c06);
    --foreground: light-dark(#022c14, #f0fdf4);
    --card: light-dark(#ffffff, #052e16);
    --card-foreground: light-dark(#022c14, #f0fdf4);
    --primary: light-dark(#16a34a, #4ade80);
    --primary-foreground: light-dark(#ffffff, #052e16);
    --secondary: light-dark(#f0fdf4, #14532d);
    --secondary-foreground: light-dark(#15803d, #86efac);
    --muted: light-dark(#f0fdf4, #14532d);
    --muted-foreground: light-dark(#65a30d, #86efac);
    --faint: light-dark(#f7fee7, #061c0d);
    --faint-foreground: light-dark(#84cc16, #65a30d);
    --accent: light-dark(#dcfce7, #166534);
    --border: light-dark(#bbf7d0, #14532d);
    --input: light-dark(#bbf7d0, #14532d);
    --ring: light-dark(#16a34a, #4ade80);
}

[data-theme-palette="orange"] {
    --background: light-dark(#ffffff, #0c0803);
    --foreground: light-dark(#1c1917, #fff7ed);
    --card: light-dark(#ffffff, #1f1206);
    --card-foreground: light-dark(#1c1917, #fff7ed);
    --primary: light-dark(#ea580c, #fb923c);
    --primary-foreground: light-dark(#ffffff, #431407);
    --secondary: light-dark(#fff7ed, #431407);
    --secondary-foreground: light-dark(#c2410c, #fdba74);
    --muted: light-dark(#fff7ed, #431407);
    --muted-foreground: light-dark(#78716c, #a8a29e);
    --faint: light-dark(#fffaf5, #140b03);
    --faint-foreground: light-dark(#a8a29e, #78716c);
    --accent: light-dark(#ffedd5, #7c2d12);
    --border: light-dark(#fed7aa, #7c2d12);
    --input: light-dark(#fed7aa, #7c2d12);
    --ring: light-dark(#ea580c, #fb923c);
}

/* --------------------------------------------------------------------------
   2. Layout & Typography
   -------------------------------------------------------------------------- */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

main.container {
    flex: 1;
    padding-top: 1.5rem;
    padding-bottom: 3.5rem;
}

.container {
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Buttons & Action Links (Oat UI Enhancements)
   -------------------------------------------------------------------------- */
.button,
a.button,
button.button,
button[type="submit"],
input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1.15rem;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
    text-decoration: none !important;
    border-radius: var(--border-radius, 6px);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Primary / Solid Buttons (White text on Primary background) */
.button:not(.outline):not(.ghost):not(.secondary),
a.button:not(.outline):not(.ghost):not(.secondary),
.button.primary,
a.button.primary,
button.primary,
button[type="submit"],
input[type="submit"] {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border-color: var(--primary) !important;
}

.button:not(.outline):not(.ghost):not(.secondary):hover,
a.button:not(.outline):not(.ghost):not(.secondary):hover,
.button.primary:hover,
a.button.primary:hover,
button.primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    opacity: 0.92;
    color: var(--primary-foreground) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

/* Outline & Ghost Buttons */
.button.outline,
a.button.outline,
.button.ghost,
a.button.ghost {
    background-color: transparent !important;
    color: var(--foreground) !important;
    border: 1px solid var(--border) !important;
}

.button.outline:hover,
a.button.outline:hover,
.button.ghost:hover,
a.button.ghost:hover {
    background-color: var(--accent) !important;
    border-color: var(--primary) !important;
    color: var(--foreground) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

.button.small,
a.button.small {
    padding: 0.3rem 0.75rem;
    font-size: 0.85rem;
}

.button.large,
a.button.large {
    padding: 0.75rem 1.85rem;
    font-size: 1.05rem;
}

/* --------------------------------------------------------------------------
   3. Top Announcement Banner
   -------------------------------------------------------------------------- */
.announcement-bar {
    background-color: var(--accent);
    color: var(--foreground);
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
    padding: 0.5rem 0;
    transition: all 0.25s ease;
}

.announcement-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.announcement-text {
    flex: 1;
    text-align: center;
    line-height: 1.4;
}

.announcement-text a {
    color: var(--primary);
    font-weight: 600;
    margin-left: 0.35rem;
    text-decoration: underline;
}

.announcement-close-btn {
    background: transparent;
    border: none;
    color: var(--foreground);
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 0.4rem;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.announcement-close-btn:hover {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   4. Site Header & Two-Tier Navigation
   -------------------------------------------------------------------------- */
.site-header {
    background-color: var(--background);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.site-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem 0.6rem;
    position: relative;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1;
}

.header-left {
    justify-content: flex-start;
}

.header-right {
    justify-content: flex-end;
}

.header-center {
    flex: 2;
    text-align: center;
}

.brand-title {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    color: var(--foreground);
    line-height: 1.2;
}

.site-logo {
    max-height: 75px;
    width: auto;
    object-fit: contain;
    margin-bottom: 0.35rem;
    display: inline-block;
}

.brand-subtitle {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted-foreground);
    font-weight: 600;
    margin-bottom: 2px;
}

.brand-heading {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foreground);
    letter-spacing: -0.01em;
}

.nav-utility-link {
    color: var(--foreground);
    text-decoration: none !important;
    font-size: 0.92rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-utility-link:hover {
    background-color: var(--faint);
    color: var(--primary);
}

.donate-link {
    background-color: transparent;
    color: var(--foreground);
    font-weight: 500;
}

.donate-link .donate-icon,
.donate-link svg {
    color: var(--primary);
    transition: transform 0.15s ease;
}

.donate-link:hover {
    background-color: var(--faint);
    color: var(--primary);
}

.donate-link:hover .donate-icon,
.donate-link:hover svg {
    transform: scale(1.1);
}

/* Theme Toggle Button */
.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--foreground);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
}

.theme-toggle-btn:hover {
    background-color: var(--faint);
    border-color: var(--primary);
    color: var(--primary);
}

/* Mobile Hamburger Toggle */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: var(--foreground);
    width: 40px;
    height: 40px;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
}

.mobile-menu-toggle:hover {
    background-color: var(--faint);
}

/* --------------------------------------------------------------------------
   5. Lower Navigation Tier & Oat Dropdowns
   -------------------------------------------------------------------------- */
.site-main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--border);
    padding: 0.35rem 1.25rem;
}

.nav-items-center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 1.25rem;
}

/* Oat Dropdown Customization */
ot-dropdown {
    display: inline-block;
    position: relative;
}

ot-dropdown > button.dropdown-trigger {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--foreground);
    font-size: 0.92rem;
    font-weight: 500;
    padding: 0.4rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    height: auto;
}

ot-dropdown > button.dropdown-trigger:hover,
ot-dropdown > button.dropdown-trigger[aria-expanded="true"] {
    background-color: var(--faint);
    color: var(--primary);
}

ot-dropdown > menu[popover],
ot-dropdown > [popover] {
    position: absolute;
    margin-top: 0.35rem;
    background-color: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    min-width: 260px;
    padding: 0.45rem 0;
    z-index: 1100;
    list-style: none;
}

ot-dropdown > menu[popover] a[role="menuitem"],
ot-dropdown > menu[popover] a {
    display: block;
    padding: 0.55rem 1.15rem;
    font-size: 0.88rem;
    color: var(--foreground);
    text-decoration: none !important;
    line-height: 1.35;
    transition: background-color 0.12s ease, color 0.12s ease;
}

ot-dropdown > menu[popover] a[role="menuitem"]:hover,
ot-dropdown > menu[popover] a:hover,
ot-dropdown > menu[popover] a[role="menuitem"]:focus {
    background-color: var(--faint);
    color: var(--primary);
}

/* --------------------------------------------------------------------------
   6. Mobile Navigation Drawer
   -------------------------------------------------------------------------- */
.mobile-nav-drawer {
    display: block;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobile-nav-drawer.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-nav-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 380px;
    height: 100%;
    background-color: var(--background);
    border-right: 1px solid var(--border);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-drawer.open .mobile-nav-content {
    transform: translateX(0);
}

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--border);
}

.mobile-brand-title {
    font-size: 1.05rem;
    color: var(--foreground);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    transition: color 0.15s ease;
}

.mobile-brand-title:hover {
    color: var(--primary);
}

.mobile-brand-title svg {
    color: var(--muted-foreground);
    transition: color 0.15s ease;
}

.mobile-brand-title:hover svg {
    color: var(--primary);
}

.mobile-nav-header .announcement-close-btn {
    font-size: 1.5rem;
    color: var(--foreground);
    cursor: pointer;
    line-height: 1;
    padding: 0.25rem 0.5rem;
}

.mobile-nav-body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-nav-search-link {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--foreground);
    text-decoration: none;
    border-radius: var(--radius);
    background-color: var(--faint);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-nav-search-link:hover {
    background-color: var(--secondary);
    color: var(--primary);
}

.donate-mobile-link {
    background-color: transparent !important;
    color: var(--foreground) !important;
    font-weight: 500;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.donate-mobile-link .donate-icon,
.donate-mobile-link svg {
    color: var(--primary);
    transition: transform 0.15s ease;
}

.donate-mobile-link:hover {
    background-color: var(--faint) !important;
    color: var(--primary) !important;
}

.donate-mobile-link:hover .donate-icon,
.donate-mobile-link:hover svg {
    transform: scale(1.1);
}

.mobile-accordion {
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.mobile-accordion summary {
    font-weight: 600;
    padding: 0.6rem 0;
    cursor: pointer;
    color: var(--foreground);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-accordion summary::-webkit-details-marker {
    display: none;
}

.mobile-accordion ul {
    list-style: none;
    padding-left: 0.75rem;
    margin: 0.25rem 0 0.5rem;
}

.mobile-accordion ul li a {
    display: block;
    padding: 0.4rem 0.5rem;
    font-size: 0.9rem;
    color: var(--muted-foreground);
    text-decoration: none;
}

.mobile-accordion ul li a:hover {
    color: var(--primary);
}

.mobile-nav-user-section {
    margin-top: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mobile-user-header {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--foreground);
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.25rem;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.6rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--muted-foreground);
    text-decoration: none;
    border-radius: var(--radius);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mobile-nav-link:hover {
    background-color: var(--faint);
    color: var(--primary);
}

.mobile-signin-link {
    color: var(--foreground);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Hero Section, Hero Banner & Post Cards
   -------------------------------------------------------------------------- */
.hero-section {
    text-align: center;
    padding: 3rem 1rem 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid var(--border);
}

.hero-section h1 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
    color: var(--foreground);
}

.hero-section p {
    font-size: 1.15rem;
    color: var(--muted-foreground);
    max-width: 680px;
    margin: 0 auto;
}

.hero-banner {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: var(--radius, 12px);
    overflow: hidden;
    margin-bottom: 2.5rem;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}

.hero-banner-fallback {
    background: linear-gradient(135deg, var(--faint) 0%, var(--accent) 100%);
    border: 1px solid var(--border);
    color: var(--foreground);
    min-height: auto;
    padding: 3rem 1.5rem 2.5rem;
}

.hero-banner-fallback .hero-content h1 {
    color: var(--foreground);
    text-shadow: none;
}

.hero-banner-fallback .hero-subtitle {
    color: var(--muted-foreground);
    text-shadow: none;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    backdrop-filter: blur(1px);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 3.5rem 1.5rem;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.hero-content h1 {
    color: #ffffff;
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.hero-subtitle {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.15rem;
    line-height: 1.55;
    margin-bottom: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.hero-actions {
    margin-top: 1.75rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.hero-actions .button {
    font-size: 1.05rem;
    padding: 0.75rem 1.85rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-actions .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.75rem;
    margin-top: 1.5rem;
}

.post-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--primary);
}

.post-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    border-bottom: 1px solid var(--border);
    display: block;
    transition: transform 0.3s ease;
}

.post-card:hover .post-card-image {
    transform: scale(1.02);
}

.post-card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.post-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--muted-foreground);
    margin-bottom: 0.5rem;
}

.post-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.65rem;
}

.post-card-title a {
    color: var(--foreground);
    text-decoration: none !important;
}

.post-card-title a:hover {
    color: var(--primary);
}

.post-card-excerpt {
    font-size: 0.9rem;
    color: var(--muted-foreground);
    line-height: 1.55;
    margin-bottom: 1rem;
    flex: 1;
}

.post-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--muted-foreground);
    border-top: 1px solid var(--border);
    padding-top: 0.75rem;
    margin-top: auto;
}

/* --------------------------------------------------------------------------
   8. Forms & Authentication Panels
   -------------------------------------------------------------------------- */
.auth-container {
    max-width: 480px;
    margin: 2rem auto;
    padding: 2rem;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.auth-title {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-align: center;
}

.auth-subtitle {
    font-size: 0.92rem;
    color: var(--muted-foreground);
    margin-bottom: 1.75rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1.15rem;
}

.form-group label {
    display: block;
    font-size: 0.88rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--foreground);
}

.form-group label.checkbox-label,
label.checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.92rem;
    font-weight: normal !important;
    color: var(--foreground);
    cursor: pointer;
    line-height: 1.4;
    user-select: none;
    margin-bottom: 0;
}

input[type="checkbox"],
input[type="radio"] {
    flex-shrink: 0;
    cursor: pointer;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    width: 100%;
    padding: 0.6rem 0.85rem;
    font-size: 0.95rem;
    background-color: var(--background);
    color: var(--foreground);
    border: 1px solid var(--input);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--ring);
    box-shadow: 0 0 0 3px rgb(from var(--ring) r g b / 0.18);
}

.btn-block {
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
}

.alert {
    padding: 0.85rem 1.15rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    line-height: 1.45;
}

.alert-danger,
.alert-error {
    background-color: rgb(from var(--primary) r g b / 0.12);
    border: 1px solid var(--primary);
    color: var(--primary);
}

.alert-success {
    background-color: rgb(from #16a34a r g b / 0.12);
    border: 1px solid #16a34a;
    color: #16a34a;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background-color: var(--card);
    border-top: 1px solid var(--border);
    padding: 3rem 0 2rem;
    margin-top: auto;
    font-size: 0.9rem;
    color: var(--muted-foreground);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 2.5rem;
}

.footer-col h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.footer-col ul li {
    margin-bottom: 0.5rem;
}

.footer-col ul li a {
    color: var(--muted-foreground);
    text-decoration: none;
}

.footer-col ul li a:hover {
    color: var(--primary);
}

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   10. Media Queries (Mobile Responsive Breakpoint <= 860px)
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
    .site-main-nav {
        display: none;
    }

    .mobile-menu-toggle {
        display: inline-flex;
    }

    .header-left,
    .header-right {
        flex: 0 0 36px;
    }

    .header-left .nav-utility-link,
    .header-right .donate-link,
    .desktop-only {
        display: none !important;
    }

    .header-center {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 0 0.5rem;
    }

    .brand-title {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .site-logo {
        max-height: 62px;
        margin-bottom: 0;
    }

    .brand-heading {
        font-size: 1.05rem;
    }

    .brand-subtitle {
        font-size: 0.65rem;
    }

    .header-right {
        gap: 0.35rem;
        justify-content: flex-end;
    }

    .hero-banner {
        min-height: 280px;
        border-radius: 8px;
        margin-bottom: 2rem;
    }

    .hero-content {
        padding: 2.25rem 1rem;
    }

    .hero-content h1 {
        font-size: 1.75rem;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    .hero-actions .button {
        font-size: 0.95rem;
        padding: 0.65rem 1.4rem;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   Oat UI Breadcrumbs
   -------------------------------------------------------------------------- */
.breadcrumbs {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1.25rem;
}

.breadcrumb-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb-item a {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb-item a:hover {
    color: var(--primary);
    text-decoration: underline;
}

.breadcrumb-separator {
    color: var(--muted-foreground);
    opacity: 0.5;
    font-size: 0.8rem;
    user-select: none;
}

.breadcrumb-item.active {
    color: var(--foreground);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Profile & Floated Media Wrappers (Oat UI)
   -------------------------------------------------------------------------- */
.profile-content {
    line-height: 1.7;
    font-size: 1.05rem;
}

.profile-figure {
    float: right; /* Set to 'left' if you prefer the image on the left side */
    width: 340px;
    max-width: 45%;
    margin: 0.25rem 0 1.5rem 2rem; /* Margin spacing to separate text from image */
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 8px);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.profile-figure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.profile-caption {
    padding: 0.65rem 0.85rem;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--muted-foreground);
    border-top: 1px solid var(--border);
    background: var(--faint, rgba(0, 0, 0, 0.02));
    text-align: center;
}

/* --------------------------------------------------------------------------
   Directory & Teacher Cards (Oat UI)
   -------------------------------------------------------------------------- */
.teachers-directory {
    max-width: 860px;
    margin: 0 auto;
}

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

.teacher-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.teacher-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.teacher-card-media {
    position: relative;
    width: 170px;
    height: 200px;
    margin: 1.75rem auto 0.25rem auto;
    border-radius: var(--border-radius, 10px);
    border: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
    background-color: var(--faint, rgba(0, 0, 0, 0.04));
    overflow: hidden;
    display: block;
    flex-shrink: 0;
}

.teacher-card-media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    transition: transform 0.3s ease;
    display: block !important;
}

.teacher-card:hover .teacher-card-media img {
    transform: scale(1.04);
}

.teacher-card-body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: center;
}

.teacher-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.teacher-card-title a {
    color: var(--foreground);
    text-decoration: none !important;
}

.teacher-card-title a:hover {
    color: var(--primary);
}

.teacher-card-subtitle {
    margin-bottom: 0.75rem;
}

.teacher-card-excerpt {
    font-size: 0.95rem;
    color: var(--muted-foreground);
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex-grow: 1;
    text-align: left;
}

.teacher-card-excerpt p {
    margin: 0;
}

.teacher-card-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

/* Mobile Responsive: Full-width stacked on smaller screens */
@media (max-width: 768px) {
    .profile-figure {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1.5rem 0;
    }

    .directory-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .teacher-card-media {
        width: 150px;
        height: 180px;
        margin: 1.5rem auto 0.25rem auto;
    }
}

/* --------------------------------------------------------------------------
   Static Pages & Content Layouts (Oat UI)
   -------------------------------------------------------------------------- */
.static-page {
    max-width: 860px;
    margin: 0 auto;
}

.static-page .lead,
.page-header .lead {
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--muted-foreground);
}

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

.value-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.value-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.value-card-header h2,
.value-card-header h3 {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--foreground);
}

.vision-quote {
    font-size: 1.25rem;
    font-style: italic;
    font-weight: 500;
    line-height: 1.5;
    color: var(--primary);
    margin: 0.5rem 0 0 0;
    padding: 0;
    border: none;
    background: transparent;
}

.content-section {
    margin-bottom: 2.5rem;
}

.content-section .section-heading h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground);
}

.styled-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.styled-list li {
    position: relative;
    padding-left: 1.75rem;
    line-height: 1.65;
    font-size: 1.05rem;
}

.styled-list li::before {
    content: "•";
    position: absolute;
    left: 0.5rem;
    color: var(--primary);
    font-size: 1.4rem;
    line-height: 1.2;
}

.download-card {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.download-card .download-info h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.download-card .download-action a,
.download-card .download-action .button,
.download-card .download-action a.fr-file {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 8px);
    background: transparent;
    color: var(--primary);
    text-decoration: none !important;
    font-weight: 500;
    font-size: 0.95rem;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.download-card .download-action a:hover,
.download-card .download-action .button:hover,
.download-card .download-action a.fr-file:hover {
    background-color: var(--faint, rgba(0, 0, 0, 0.05));
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Winter CMS Rich Editor (Froala) Styles Integration
   -------------------------------------------------------------------------- */
/* File insertion links injected by Froala editor */
a.fr-file {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    background-color: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 8px);
    color: var(--primary);
    text-decoration: none !important;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0.25rem 0;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

a.fr-file:hover {
    background-color: var(--faint, rgba(0, 0, 0, 0.05));
    border-color: var(--primary);
    transform: translateY(-1px);
}

a.fr-file::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e11d48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: -2px;
}

/* Blue theme support for SVG icon */
[data-color-theme="blue"] a.fr-file::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
}

/* Froala image classes */
.fr-fic {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius, 8px);
}

.fr-fil {
    float: left;
    margin: 0.5rem 1.5rem 1rem 0;
}

.fr-fir {
    float: right;
    margin: 0.5rem 0 1rem 1.5rem;
}

.fr-fic.fr-dib {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .fr-fil,
    .fr-fir {
        float: none !important;
        display: block !important;
        margin: 1rem auto !important;
        max-width: 100% !important;
    }
}

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

    .download-card .hstack {
        flex-direction: column;
        align-items: flex-start;
    }

    .download-card .download-action {
        width: 100%;
    }

    .download-card .download-action a,
    .download-card .download-action .button,
    .download-card .download-action a.fr-file {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Lineage Shajara Timeline (Oat UI)
   -------------------------------------------------------------------------- */
.lineage-page {
    max-width: 820px;
    margin: 0 auto;
}

.lineage-timeline {
    position: relative;
    padding: 1.5rem 0 2rem 0.5rem;
}

.lineage-chain {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

/* Continuous connecting line */
.lineage-chain::before {
    content: '';
    position: absolute;
    top: 18px;
    bottom: 25px;
    left: 17px;
    width: 2px;
    background: var(--border);
    z-index: 1;
}

.lineage-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 0.85rem;
    z-index: 2;
}

.node-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--border);
    color: var(--muted-foreground);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.node-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 8px);
    padding: 0.65rem 1.15rem;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.lineage-node:hover .node-card {
    transform: translateX(4px);
    border-color: var(--primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.lineage-node:hover .node-number {
    border-color: var(--primary);
    color: var(--primary);
}

.node-name {
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--foreground);
    line-height: 1.35;
}

.node-tag {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--primary);
    background: var(--secondary);
    padding: 0.15rem 0.55rem;
    border-radius: 12px;
    white-space: nowrap;
}

/* Pivotal Milestones (Origin & Major Figures) */
.node-origin .node-number,
.node-pivotal .node-number {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: 0 0 0 3px var(--secondary);
}

.node-origin .node-card,
.node-pivotal .node-card {
    border-left: 3px solid var(--primary);
    background: var(--faint, var(--card));
}

.node-origin .node-name,
.node-pivotal .node-name {
    font-weight: 600;
}

@media (max-width: 640px) {
    .lineage-timeline {
        padding: 1rem 0;
    }

    .lineage-node {
        gap: 0.75rem;
    }

    .node-number {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .lineage-chain::before {
        left: 14px;
        top: 15px;
    }

    .node-card {
        padding: 0.5rem 0.75rem;
    }

    .node-name {
        font-size: 0.9rem;
    }

    .node-tag {
        font-size: 0.7rem;
    }
}

/* --------------------------------------------------------------------------
   History Page (Oat UI)
   -------------------------------------------------------------------------- */
.history-page {
    max-width: 820px;
    margin: 0 auto;
}

.history-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
}

.history-byline {
    font-size: 0.95rem;
    color: var(--muted-foreground);
}

.history-byline .author-link {
    color: var(--foreground);
    text-decoration: none;
    transition: color 0.15s ease;
}

.history-byline .author-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.history-content {
    line-height: 1.75;
    font-size: 1.05rem;
}

.history-content p {
    margin-bottom: 1.35rem;
}

/* Styled Quote Boxes */
.history-quote-box {
    background-color: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--border-radius, 8px);
    padding: 1.35rem 1.65rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    position: relative;
}

.history-quote {
    font-size: 1.12rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--foreground);
    margin: 0 0 0.65rem 0;
    padding: 0;
    border: none;
    background: transparent;
}

.poem-box {
    background-color: var(--faint, rgba(0, 0, 0, 0.02));
    border-left-color: var(--primary);
}

.poem-quote {
    font-size: 1.05rem;
    line-height: 1.8;
}

.quote-citation {
    font-size: 0.9rem;
    color: var(--muted-foreground);
    text-align: right;
}

.quote-citation cite {
    font-style: italic;
}

/* Key Teaching Callout */
.key-teaching-callout {
    background: linear-gradient(135deg, var(--card) 0%, var(--faint, var(--card)) 100%);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 1.65rem 1.75rem;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04);
}

.key-teaching-callout .callout-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.key-teaching-callout .callout-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: var(--foreground);
}

.key-teaching-callout .callout-body p {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--foreground);
}

.key-teaching-callout .callout-author {
    font-size: 0.9rem;
    color: var(--primary);
    font-weight: 600;
}

/* Books Grid */
.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.book-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 10px);
    padding: 1.35rem 1.5rem;
    display: flex;
    gap: 1.15rem;
    align-items: flex-start;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.book-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.book-card-icon {
    color: var(--primary);
    flex-shrink: 0;
    margin-top: 0.2rem;
    background: var(--secondary);
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.book-card-content {
    flex-grow: 1;
}

.book-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 0.45rem;
    color: var(--foreground);
}

.book-desc {
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}

/* Related Resources Card */
.related-resources-card {
    background: var(--faint, var(--card));
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 1.75rem;
}

.resources-header h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0.25rem 0 0;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.resource-link-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 8px);
    padding: 0.85rem 1.15rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.resource-link-item:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.resource-title {
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--primary);
}

.resource-sub {
    font-size: 0.82rem;
    color: var(--muted-foreground);
}

@media (max-width: 640px) {
    .books-grid,
    .resources-grid {
        grid-template-columns: 1fr;
    }

    .history-quote-box,
    .key-teaching-callout,
    .related-resources-card {
        padding: 1.25rem;
    }

    .key-teaching-callout .callout-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }
}

/* --------------------------------------------------------------------------
   Core Concentrations Template (Oat UI)
   -------------------------------------------------------------------------- */
.concentration-page {
    max-width: 820px;
    margin: 0 auto;
}

.concentration-banner-figure {
    margin: 0 0 2rem 0;
    border-radius: var(--border-radius, 12px);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    position: relative;
}

.concentration-banner-img {
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    display: block;
    aspect-ratio: 21 / 9;
}

.concentration-banner-caption {
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    color: var(--muted-foreground);
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border-top: 1px solid var(--border);
    text-align: center;
}

.concentration-content {
    line-height: 1.75;
    font-size: 1.05rem;
}

.concentration-content p {
    margin-bottom: 1.35rem;
}

.concentration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin: 1.75rem 0;
}

.concentration-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 10px);
    padding: 1.35rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.concentration-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.concentration-card h3,
.concentration-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--foreground);
}

.concentration-card p {
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    color: var(--muted-foreground);
}

/* Call to action & Inquiry Card */
.concentration-cta {
    background: linear-gradient(135deg, var(--card) 0%, var(--faint, var(--card)) 100%);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 1.75rem;
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.concentration-cta-text h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    color: var(--foreground);
}

.concentration-cta-text p {
    font-size: 0.95rem;
    color: var(--muted-foreground);
    margin: 0;
}

.concentration-cta-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .concentration-banner-img {
        max-height: 220px;
        aspect-ratio: 16 / 9;
    }

    .concentration-grid {
        grid-template-columns: 1fr;
    }

    .concentration-cta {
        flex-direction: column;
        align-items: stretch;
        padding: 1.35rem;
    }

    .concentration-cta-actions .button {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Audio Library & Recordings Template (Oat UI)
   -------------------------------------------------------------------------- */
.audio-page {
    max-width: 820px;
    margin: 0 auto;
}

.audio-section {
    margin-bottom: 2.75rem;
}

.audio-section-header {
    margin-bottom: 1.25rem;
}

.audio-section-header h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.25rem;
}

.audio-section-header p {
    font-size: 0.95rem;
    color: var(--muted-foreground);
    margin: 0;
}

/* Audio Player Track Cards */
.audio-tracks-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.audio-track-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.audio-track-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.audio-track-info {
    margin-bottom: 1rem;
}

.audio-track-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.audio-track-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0;
}

.audio-track-badges {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.audio-track-author {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.audio-track-desc {
    font-size: 0.95rem;
    color: var(--muted-foreground);
    line-height: 1.55;
    margin: 0;
}

.audio-player-container {
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 8px);
    padding: 0.75rem 1rem;
    margin-top: 1rem;
}

.audio-player-container audio {
    width: 100%;
    height: 40px;
    display: block;
    outline: none;
}

/* Audio Series Grid */
.audio-series-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.audio-series-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 10px);
    padding: 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.audio-series-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.audio-series-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.35rem 0;
    color: var(--foreground);
}

.audio-series-card .series-author {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.audio-series-card p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--muted-foreground);
    margin: 0 0 1.25rem 0;
    flex-grow: 1;
}

.audio-series-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Gathering Archives Grid */
.gathering-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.gathering-archive-card {
    background: linear-gradient(135deg, var(--card) 0%, var(--faint, var(--card)) 100%);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 10px);
    padding: 1.35rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.gathering-archive-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.gathering-archive-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: var(--foreground);
}

.gathering-archive-card p {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--muted-foreground);
    margin: 0 0 1.25rem 0;
    flex-grow: 1;
}

@media (max-width: 640px) {
    .audio-series-grid,
    .gathering-archive-grid {
        grid-template-columns: 1fr;
    }

    .audio-track-card {
        padding: 1.15rem;
    }

    .audio-track-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .audio-series-action {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .audio-series-action .button {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Meditations & Contemplations Template (Oat UI)
   -------------------------------------------------------------------------- */
.contemplation-page {
    max-width: 840px;
    margin: 0 auto;
}

.contemplation-section {
    margin-bottom: 3rem;
}

.contemplation-section-header {
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.contemplation-section-header h2 {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--foreground);
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contemplation-section-header p {
    font-size: 0.95rem;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.55;
}

.contemplation-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.contemplation-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.contemplation-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 0.5rem 0;
}

.contemplation-card p {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--foreground);
    margin-bottom: 1rem;
}

.contemplation-card p:last-child {
    margin-bottom: 0;
}

/* Sacred Prayer / Pledge Blockquote */
.sacred-quote {
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border-left: 4px solid var(--primary);
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0 var(--border-radius, 8px) var(--border-radius, 8px) 0;
    padding: 1.25rem 1.5rem;
    margin: 1rem 0;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--foreground);
    font-style: normal;
}

.sacred-quote-verse {
    font-style: italic;
    color: var(--foreground);
    letter-spacing: 0.01em;
}

/* Affirmation Stack */
.affirmation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.affirmation-card {
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 8px);
    padding: 1.15rem 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 3px solid var(--primary);
}

.affirmation-text {
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--foreground);
}

/* Kinship Pledge Comparison Grid */
.pledges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
}

.pledge-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 1.5rem 1.75rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pledge-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.pledge-card-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.pledge-card-header h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.35rem 0;
    color: var(--foreground);
}

.pledge-card-body {
    flex-grow: 1;
}

.pledge-annotation {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--muted-foreground);
    font-style: italic;
}

@media (max-width: 640px) {
    .contemplation-card,
    .pledge-card {
        padding: 1.15rem 1.25rem;
    }

    .pledges-grid {
        grid-template-columns: 1fr;
    }

    .affirmation-grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Daily Prayers Interactive Tabs & Layout (Oat UI)
   -------------------------------------------------------------------------- */
.prayers-page {
    max-width: 840px;
    margin: 0 auto;
}

.prayers-tabs {
    display: block;
    margin-top: 1.5rem;
}

.prayer-tablist {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.35rem;
    background: var(--faint, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    margin-bottom: 2rem;
}

.prayer-tab-btn {
    flex: 1 1 calc(25% - 0.5rem);
    min-width: 160px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: calc(var(--border-radius, 12px) - 4px);
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted-foreground);
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1.2;
}

.prayer-tab-btn:hover {
    color: var(--foreground);
    background: var(--card);
    border-color: var(--border);
}

.prayer-tab-btn[aria-selected="true"] {
    background: var(--card);
    color: var(--primary);
    font-weight: 600;
    border-color: var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.prayer-tab-btn svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.prayer-tab-btn[aria-selected="true"] svg {
    color: var(--primary);
    transform: scale(1.1);
}

.prayer-tabpanel[hidden] {
    display: none !important;
}

.prayer-tabpanel {
    display: block;
    animation: fadeIn 0.25s ease;
}

.prayer-section-intro {
    margin-bottom: 1.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.prayer-section-intro h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 0.35rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.prayer-section-intro p {
    font-size: 0.95rem;
    color: var(--muted-foreground);
    margin: 0;
    line-height: 1.55;
}

.prayer-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.prayer-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.prayer-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border);
}

.prayer-card-title-group {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.prayer-card-title-group h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--foreground);
}

.prayer-card-tagline {
    font-size: 0.85rem;
    color: var(--muted-foreground);
    font-style: italic;
}

.prayer-posture-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.25rem 0.65rem;
    border-radius: 12px;
    background: var(--secondary);
    color: var(--secondary-foreground);
}

.prayer-verse-container {
    padding: 0.5rem 0 0 0;
}

.prayer-verse-text {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--foreground);
    letter-spacing: 0.01em;
}

.prayer-verse-text p {
    margin-bottom: 1rem;
    line-height: 1.85;
}

.prayer-verse-text p:last-child {
    margin-bottom: 0;
}

.prayer-amen {
    font-weight: 600;
    color: var(--foreground);
    margin-top: 0.5rem;
}

/* Affirmation-specific highlight card */
.prayer-card.prayer-affirmation-card {
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border-left: 4px solid var(--primary);
}

.prayer-affirmation-content {
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 500;
    color: var(--foreground);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.prayer-posture-instruction {
    font-size: 0.9rem;
    color: var(--muted-foreground);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

@media (max-width: 640px) {
    .prayer-tablist {
        gap: 0.35rem;
        padding: 0.25rem;
    }

    .prayer-tab-btn {
        min-width: calc(50% - 0.2rem);
        flex: 1 1 calc(50% - 0.2rem);
        padding: 0.6rem 0.5rem;
        font-size: 0.85rem;
        gap: 0.35rem;
    }

    .prayer-card {
        padding: 1.15rem 1.25rem;
    }

    .prayer-verse-text {
        font-size: 1rem;
        line-height: 1.75;
    }
}

/* --------------------------------------------------------------------------
   The 10 Sufi Thoughts Layout & Practices (Oat UI)
   -------------------------------------------------------------------------- */
.sufi-thoughts-page {
    max-width: 860px;
    margin: 0 auto;
}

.author-attribution {
    font-size: 1rem;
    color: var(--primary);
    font-weight: 500;
}

/* Quick Index Card */
.thoughts-index-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.thoughts-index-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--foreground);
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.thoughts-nav-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.thought-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--foreground);
    text-decoration: none;
    transition: all 0.15s ease;
}

.thought-nav-pill:hover {
    background: var(--secondary);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    text-decoration: none;
}

.pill-num {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--card);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    border: 1px solid var(--border);
}

/* Thought Cards */
.thoughts-stack {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
    margin-top: 1rem;
}

.thought-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 1.75rem 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    scroll-margin-top: 5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.thought-card:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.thought-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-bottom: 1.15rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.thought-badge-title {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1 1 320px;
}

.thought-number {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-foreground);
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.thought-heading-group h2 {
    margin: 0 0 0.25rem 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--foreground);
    line-height: 1.25;
}

.thought-predicate {
    font-size: 0.95rem;
    color: var(--muted-foreground);
    line-height: 1.45;
    font-style: italic;
}

.thought-theme-chip {
    font-size: 0.8rem;
    font-weight: 600;
    align-self: flex-start;
}

.thought-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--foreground);
    margin-bottom: 1.5rem;
}

.thought-body p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

.thought-body p:last-child {
    margin-bottom: 0;
}

/* Practice Box */
.thought-practice-box {
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 10px);
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
}

.practice-box-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.practice-items-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.practice-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.practice-label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
}

.breath-practice-flow {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.breath-step {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.breath-tag {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    flex-shrink: 0;
}

.breath-tag.inhale {
    background: var(--secondary);
    color: var(--secondary-foreground);
    border: 1px solid var(--border);
}

.breath-tag.exhale {
    background: var(--card);
    color: var(--muted-foreground);
    border: 1px solid var(--border);
}

.breath-words {
    font-style: italic;
    color: var(--foreground);
}

.wazifa-callout {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
}

.wazifa-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--primary);
    letter-spacing: 0.02em;
}

.thought-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
}

.thought-anchor-link {
    color: var(--muted-foreground);
    text-decoration: none;
    font-weight: 600;
}

.thought-anchor-link:hover {
    color: var(--primary);
}

.thought-top-link {
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 0.15s ease;
}

.thought-top-link:hover {
    color: var(--primary);
}

/* Editorial Note Card */
.editorial-note-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 10px);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.note-card-icon {
    flex-shrink: 0;
    padding-top: 0.15rem;
}

.note-card-content strong {
    color: var(--foreground);
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .thought-card {
        padding: 1.25rem 1.25rem;
    }

    .practice-items-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .thought-badge-title {
        gap: 0.75rem;
    }

    .thought-number {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .thought-heading-group h2 {
        font-size: 1.2rem;
    }

    .thought-body {
        font-size: 1rem;
        line-height: 1.7;
    }
}

/* --------------------------------------------------------------------------
   Valuable Websites Directory Layout (Oat UI)
   -------------------------------------------------------------------------- */
.valuable-websites-page {
    max-width: 900px;
    margin: 0 auto;
}

.websites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1.35rem;
    margin-top: 1.5rem;
}

.website-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.website-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.website-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.website-card-title-group {
    flex-grow: 1;
}

.website-card-title {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.25rem 0;
    line-height: 1.35;
}

.website-card-subtitle {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary);
}

.website-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--secondary);
    color: var(--secondary-foreground);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.website-card-desc {
    font-size: 0.92rem;
    color: var(--muted-foreground);
    line-height: 1.55;
    margin-bottom: 1.25rem;
    flex-grow: 1;
}

.website-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    gap: 0.5rem;
}

.website-domain-badge {
    font-size: 0.8rem;
    color: var(--muted-foreground);
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}

.website-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border);
    transition: all 0.15s ease;
}

.website-link-btn:hover {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
    text-decoration: none;
}

/* Featured Sub-Archive Card (e.g. Spirit of Federation) */
.featured-archive-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--border-radius, 12px);
    padding: 1.5rem 1.75rem;
    margin-top: 2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.featured-archive-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.featured-archive-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.featured-archive-title h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.18rem;
    color: var(--foreground);
}

.featured-archive-title p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--muted-foreground);
}

.sub-archive-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.sub-archive-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.15rem;
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--foreground);
    transition: all 0.15s ease;
}

.sub-archive-item:hover {
    border-color: var(--primary);
    background: var(--secondary);
    color: var(--primary);
    text-decoration: none;
    transform: translateY(-1px);
}

.sub-archive-info strong {
    display: block;
    font-size: 0.92rem;
}

.sub-archive-info small {
    font-size: 0.78rem;
    color: var(--muted-foreground);
}

/* Cross-Navigation Categories Footer */
.valuable-websites-nav-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 1.5rem 1.75rem;
    margin-top: 2.5rem;
}

.websites-nav-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}

.websites-nav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.websites-nav-link {
    display: flex;
    flex-direction: column;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--foreground);
    transition: all 0.15s ease;
}

.websites-nav-link:hover {
    background: var(--secondary);
    border-color: var(--primary);
    color: var(--primary);
    text-decoration: none;
    transform: translateY(-1px);
}

.websites-nav-link.active {
    border-color: var(--primary);
    background: var(--secondary);
    color: var(--primary);
    font-weight: 600;
}

.websites-nav-link-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.websites-nav-link-desc {
    font-size: 0.75rem;
    color: var(--muted-foreground);
}

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

    .sub-archive-links-grid {
        grid-template-columns: 1fr;
    }

    .website-card {
        padding: 1.25rem;
    }

    .featured-archive-card {
        padding: 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   Online Gatherings & Zoom Cards (Oat UI)
   -------------------------------------------------------------------------- */
.gatherings-page {
    max-width: 920px;
    margin: 0 auto;
}

.gatherings-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1.5rem;
}

.gathering-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 14px);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.gathering-card:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.06);
}

.gathering-card-header {
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background: var(--faint, rgba(0, 0, 0, 0.015));
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.gathering-header-info {
    flex: 1;
    min-width: 260px;
}

.gathering-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--foreground);
    margin: 0 0 0.35rem 0;
    line-height: 1.25;
}

.gathering-byline {
    font-size: 0.88rem;
    color: var(--muted-foreground);
    margin: 0;
}

.gathering-schedule-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--secondary);
    color: var(--primary);
    padding: 0.4rem 0.85rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.gathering-card-body {
    padding: 1.5rem 1.75rem;
}

.gathering-desc {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--foreground);
    margin-bottom: 1.25rem;
}

/* Timezone Breakdown Pill Box */
.timezone-breakdown-box {
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1.15rem;
    margin-bottom: 1.5rem;
}

.timezone-header {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.timezone-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.5rem;
    font-size: 0.92rem;
    color: var(--foreground);
}

.tz-item strong {
    color: var(--primary);
    font-weight: 600;
}

/* Zoom Access Panel */
.zoom-access-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.zoom-access-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.zoom-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #16a34a;
}

.zoom-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.zoom-actions-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.zoom-join-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--primary);
    color: var(--primary-foreground) !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.65rem 1.35rem;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.zoom-join-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    text-decoration: none;
}

.zoom-credentials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.85rem 1rem;
    font-size: 0.9rem;
}

.credential-item {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.credential-label {
    font-size: 0.75rem;
    color: var(--muted-foreground);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.credential-value {
    font-family: monospace;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--foreground);
    user-select: all;
}

.one-tap-mobile-row {
    font-size: 0.85rem;
    color: var(--muted-foreground);
    line-height: 1.4;
    padding-top: 0.5rem;
}

.one-tap-link {
    color: var(--primary);
    text-decoration: underline;
    font-family: monospace;
}

/* Attunement Dates Grid */
.attunement-dates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 1.25rem;
}

.attunement-date-card {
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    text-align: center;
}

.attunement-date-day {
    font-size: 0.78rem;
    color: var(--primary);
    font-weight: 600;
    text-transform: uppercase;
}

.attunement-date-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--foreground);
}

/* Gathering Etiquette & Security Guidance Card */
.gathering-etiquette-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--border-radius, 12px);
    padding: 1.5rem 1.75rem;
    margin-top: 2rem;
}

.gathering-etiquette-card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--foreground);
}

.gathering-etiquette-card p {
    font-size: 0.92rem;
    color: var(--muted-foreground);
    line-height: 1.55;
    margin-bottom: 0.75rem;
}

.gathering-etiquette-list {
    margin: 0.5rem 0 0 1.25rem;
    padding: 0;
    font-size: 0.9rem;
    color: var(--foreground);
    line-height: 1.6;
}

@media (max-width: 768px) {
    .gathering-card-header {
        padding: 1.25rem;
    }

    .gathering-card-body {
        padding: 1.25rem;
    }

    .zoom-access-panel {
        padding: 1rem;
    }

    .zoom-credentials-grid {
        grid-template-columns: 1fr;
    }
}

/* Member Access Gate Card for Zoom Information */
.zoom-auth-gate-card {
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
}

.zoom-auth-gate-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.zoom-auth-gate-content {
    flex: 1;
}

.zoom-auth-gate-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--foreground);
    margin: 0 0 0.35rem 0;
    line-height: 1.3;
}

.zoom-auth-gate-desc {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--muted-foreground);
    margin: 0 0 1rem 0;
}

.zoom-auth-gate-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .zoom-auth-gate-card {
        flex-direction: column;
        gap: 0.85rem;
        padding: 1.15rem;
    }

    .zoom-auth-gate-icon {
        width: 38px;
        height: 38px;
    }

    .zoom-auth-gate-actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .zoom-auth-gate-actions .button {
        text-align: center;
        justify-content: center;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Spiritual Retreats (Oat UI)
   -------------------------------------------------------------------------- */
.retreats-page,
.retreat-detail-page {
    max-width: 920px;
    margin: 0 auto;
}

.retreats-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.retreat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.retreat-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.retreat-card-featured {
    border-left: 4px solid var(--primary);
}

.retreat-card-media {
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: var(--faint);
}

.retreat-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.retreat-card:hover .retreat-card-media img {
    transform: scale(1.02);
}

.retreat-card-body {
    padding: 2rem;
}

.retreat-badges-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.retreat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.3;
}

.retreat-badge.date-badge {
    background: var(--secondary);
    color: var(--primary);
}

.retreat-badge.location-badge {
    background: var(--faint);
    color: var(--foreground);
    border: 1px solid var(--border);
}

.retreat-badge.donation-badge {
    background: rgb(from #16a34a r g b / 0.1);
    color: #16a34a;
    border: 1px solid rgb(from #16a34a r g b / 0.2);
}

.retreat-card-title {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.5rem 0;
}

.retreat-card-title a {
    color: var(--foreground);
    text-decoration: none;
    transition: color 0.15s ease;
}

.retreat-card-title a:hover {
    color: var(--primary);
}

.retreat-guide-byline {
    font-size: 1.02rem;
    color: var(--muted-foreground);
    margin: 0 0 1.25rem 0;
    font-style: italic;
    line-height: 1.45;
}

/* Quote Card within Retreats */
.retreat-quote-card {
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border-left: 3px solid var(--primary);
    border-radius: 6px;
    padding: 1rem 1.25rem;
    margin: 0 0 1.25rem 0;
}

.retreat-quote-text {
    font-size: 0.98rem;
    font-style: italic;
    color: var(--foreground);
    line-height: 1.55;
    margin: 0;
}

.retreat-quote-author {
    display: block;
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 600;
    color: var(--primary);
    margin-top: 0.5rem;
    text-align: right;
}

.retreat-quote-large {
    padding: 1.25rem 1.75rem;
}

.retreat-quote-large .retreat-quote-text {
    font-size: 1.08rem;
}

.retreat-excerpt {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--foreground);
    margin-bottom: 1.5rem;
}

.retreat-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.retreat-actions-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.donate-btn-retreat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted-foreground);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.45rem 0.85rem;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.donate-btn-retreat svg {
    color: var(--primary);
}

.donate-btn-retreat:hover {
    color: var(--primary);
    background: var(--faint);
}

/* Empty State Card */
.retreats-empty-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 12px);
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.retreats-empty-card .empty-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem auto;
}

.retreats-empty-card h3 {
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--foreground);
    margin-bottom: 0.5rem;
}

.retreats-empty-card p {
    font-size: 0.98rem;
    color: var(--muted-foreground);
    max-width: 580px;
    margin: 0 auto 1.75rem auto;
    line-height: 1.6;
}

.empty-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Past Retreats Section */
.past-retreats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.past-retreat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 8px);
    padding: 1.25rem;
    transition: transform 0.15s ease, border-color 0.15s ease;
}

.past-retreat-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary);
}

.past-retreat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.past-retreat-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.35rem 0;
}

.past-retreat-title a {
    color: var(--foreground);
    text-decoration: none;
}

.past-retreat-title a:hover {
    color: var(--primary);
}

.past-retreat-byline {
    font-size: 0.85rem;
    color: var(--muted-foreground);
    margin: 0;
}

/* Retreat Detail Page Layout */
.retreat-detail-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 1.5rem;
}

.retreat-detail-title {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.5rem 0;
    color: var(--foreground);
}

.retreat-detail-subtitle {
    font-size: 1.15rem;
    color: var(--muted-foreground);
    margin: 0;
    font-style: italic;
    line-height: 1.45;
}

.retreat-detail-banner {
    width: 100%;
    max-height: 400px;
    border-radius: var(--border-radius, 12px);
    overflow: hidden;
    border: 1px solid var(--border);
}

.retreat-banner-img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

.retreat-layout-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2.5rem;
    align-items: start;
}

.retreat-body-text {
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--foreground);
}

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

.retreat-body-text ul,
.retreat-body-text ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.retreat-body-text li {
    margin-bottom: 0.5rem;
}

.retreat-registration-info-box {
    background: var(--faint, rgba(0, 0, 0, 0.02));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
}

.retreat-registration-info-box h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--foreground);
}

.retreat-summary-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--border-radius, 10px);
    padding: 1.5rem;
    position: sticky;
    top: 5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.retreat-summary-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0 0 1.25rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
    color: var(--foreground);
}

.summary-item {
    margin-bottom: 1rem;
}

.summary-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground);
    margin-bottom: 0.2rem;
}

.summary-value {
    display: block;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--foreground);
    line-height: 1.4;
}

.donation-highlight {
    font-size: 1.25rem;
    font-weight: 700;
    color: #16a34a;
}

.button.full-width {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.retreat-detail-footer {
    padding-top: 2rem;
    border-top: 1px solid var(--border);
    margin-top: 2rem;
}

@media (max-width: 860px) {
    .retreat-layout-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .retreat-summary-card {
        position: static;
    }

    .retreat-card-body {
        padding: 1.25rem;
    }

    .retreat-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .retreat-actions-left {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .retreat-actions-left .button {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .retreat-actions-right {
        text-align: center;
        width: 100%;
    }

    .donate-btn-retreat {
        justify-content: center;
        width: 100%;
    }
}