/* ==========================================================================
   Lha Tibetan Heritage Society - Custom Ghost Theme
   Traditional Tibetan-inspired design
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables - Tibetan Color Palette
   -------------------------------------------------------------------------- */
:root {
    /* Primary Colors - Traditional Tibetan */
    --color-maroon: #8B2332;
    --color-maroon-dark: #6B1A26;
    --color-maroon-light: #A52A3A;

    /* Accent - Saffron/Gold */
    --color-gold: #D4A843;
    --color-gold-light: #E5C16E;
    --color-gold-dark: #B8922E;

    /* Background Colors */
    --color-cream: #FDF8F0;
    --color-cream-dark: #F5EDE0;
    --color-white: #FFFFFF;

    /* Text Colors */
    --color-text: #3D2914;
    --color-text-light: #5C4A35;
    --color-text-muted: #8B7355;

    /* Accent Colors */
    --color-turquoise: #4A9B8E;
    --color-orange: #E67E22;

    /* Typography */
    --font-serif: 'Crimson Pro', Georgia, serif;
    --font-sans: 'Open Sans', -apple-system, sans-serif;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 6rem;

    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(61, 41, 20, 0.1);
    --shadow-md: 0 4px 12px rgba(61, 41, 20, 0.15);
    --shadow-lg: 0 8px 24px rgba(61, 41, 20, 0.2);
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-cream);
}

.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-main {
    flex: 1;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-maroon);
    margin: 0 0 var(--space-sm);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    margin: 0 0 var(--space-sm);
}

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

a:hover {
    color: var(--color-gold-dark);
}

/* Tibetan Script Styling */
.tibetan-text,
.tibetan-script,
.tibetan-title {
    font-family: 'Noto Serif Tibetan', 'Microsoft Himalaya', serif;
    font-size: 1.2em;
}

/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--color-maroon);
    color: var(--color-white);
    border-color: var(--color-maroon);
}

.btn-primary:hover {
    background-color: var(--color-maroon-dark);
    border-color: var(--color-maroon-dark);
    color: var(--color-white);
}

.btn-secondary {
    background-color: transparent;
    color: var(--color-maroon);
    border-color: var(--color-maroon);
}

.btn-secondary:hover {
    background-color: var(--color-maroon);
    color: var(--color-white);
}

.btn-gold {
    background-color: var(--color-gold);
    color: var(--color-text);
    border-color: var(--color-gold);
}

.btn-gold:hover {
    background-color: var(--color-gold-dark);
    border-color: var(--color-gold-dark);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-maroon);
    border-color: var(--color-maroon);
}

.btn-outline:hover {
    background-color: var(--color-maroon);
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Tibetan Art Patterns (SVG backgrounds)
   -------------------------------------------------------------------------- */

/* Endless Knot pattern - subtle */
.tibetan-pattern-light {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 10c-4 0-7 3-7 7v6c0 2-2 4-4 4h-6c-4 0-7 3-7 7s3 7 7 7h6c2 0 4 2 4 4v6c0 4 3 7 7 7s7-3 7-7v-6c0-2 2-4 4-4h6c4 0 7-3 7-7s-3-7-7-7h-6c-2 0-4-2-4-4v-6c0-4-3-7-7-7z' fill='none' stroke='%238B2332' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
}

/* Cloud pattern - traditional Tibetan */
.tibetan-cloud-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='50' viewBox='0 0 100 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 35c-5 0-10-4-10-10s5-10 10-10c1-6 6-10 12-10 5 0 9 3 11 7 2-1 4-2 7-2 6 0 11 5 11 11h2c4 0 8 3 8 8s-4 8-8 8H20z' fill='none' stroke='%23D4A843' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
    background-color: var(--color-white);
    border-bottom: 3px solid var(--color-maroon);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.site-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 15c-5 0-9 4-9 9v8c0 3-2 5-5 5h-8c-5 0-9 4-9 9s4 9 9 9h8c3 0 5 2 5 5v8c0 5 4 9 9 9s9-4 9-9v-8c0-3 2-5 5-5h8c5 0 9-4 9-9s-4-9-9-9h-8c-3 0-5-2-5-5v-8c0-5-4-9-9-9z' fill='none' stroke='%238B2332' stroke-width='0.3' opacity='0.06'/%3E%3Ccircle cx='40' cy='40' r='3' fill='%23D4A843' opacity='0.08'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: -1;
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-sm) var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-brand {
    display: flex;
    align-items: center;
}

.site-logo img {
    max-height: 50px;
    width: auto;
}

.site-name {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-maroon);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.site-name .tibetan-text {
    color: var(--color-gold-dark);
}

/* Navigation */
.site-nav {
    display: flex;
    align-items: center;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background-color: var(--color-maroon);
    transition: 0.3s;
}

.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-xs);
}

.nav-list li a {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.nav-list li a:hover,
.nav-list li a.active {
    background-color: var(--color-maroon);
    color: var(--color-white);
}

/* Mobile Navigation */
@media (max-width: 900px) {
    .nav-toggle {
        display: flex;
    }

    .nav-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: var(--color-white);
        border-bottom: 3px solid var(--color-maroon);
        padding: var(--space-sm);
        display: none;
        box-shadow: var(--shadow-md);
    }

    .nav-list.active {
        display: flex;
    }

    .nav-list li a {
        padding: 0.75rem 1rem;
    }
}

/* --------------------------------------------------------------------------
   Hero Section
   -------------------------------------------------------------------------- */
.hero {
    background: linear-gradient(135deg, var(--color-maroon) 0%, var(--color-maroon-dark) 100%);
    color: var(--color-white);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L30 60M0 30L60 30' stroke='%23ffffff' stroke-width='0.5' stroke-opacity='0.1'/%3E%3C/svg%3E");
    opacity: 0.3;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.hero .tibetan-title {
    font-size: 2rem;
    color: var(--color-gold);
    margin-bottom: var(--space-xs);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.hero .site-title {
    font-size: 3rem;
    color: var(--color-white);
    margin-bottom: var(--space-xs);
}

.hero .site-description {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: var(--space-xs);
}

.hero .tagline {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--color-gold-light);
    margin-bottom: var(--space-md);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.hero .btn-primary {
    background-color: var(--color-gold);
    color: var(--color-text);
    border-color: var(--color-gold);
}

.hero .btn-primary:hover {
    background-color: var(--color-gold-light);
}

.hero .btn-secondary {
    border-color: var(--color-white);
    color: var(--color-white);
}

.hero .btn-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-maroon);
}

/* Endless Knot Decoration */
.hero-decoration {
    margin-top: var(--space-lg);
}

.endless-knot {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23D4A843' stroke-width='3' d='M50 10 L90 50 L50 90 L10 50 Z M30 30 L70 30 L70 70 L30 70 Z'/%3E%3C/svg%3E");
    background-size: contain;
}

/* --------------------------------------------------------------------------
   Mission Preview Section
   -------------------------------------------------------------------------- */
.mission-preview {
    padding: var(--space-xl) 0;
    background-color: var(--color-white);
}

.mission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
}

.mission-item {
    text-align: center;
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    background-color: var(--color-cream);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mission-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.mission-icon {
    font-size: 3rem;
    margin-bottom: var(--space-sm);
}

.mission-item h3 {
    color: var(--color-maroon);
    margin-bottom: var(--space-xs);
}

.mission-item p {
    color: var(--color-text-light);
    margin: 0;
}

/* --------------------------------------------------------------------------
   Section Styles
   -------------------------------------------------------------------------- */
.section-title {
    text-align: center;
    font-size: 2rem;
    color: var(--color-maroon);
    margin-bottom: var(--space-lg);
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-gold), var(--color-maroon));
    margin: var(--space-sm) auto 0;
    border-radius: 2px;
}

.section-cta {
    text-align: center;
    margin-top: var(--space-md);
}

/* --------------------------------------------------------------------------
   Programs Section
   -------------------------------------------------------------------------- */
.programs-section {
    padding: var(--space-xl) 0;
    background-color: var(--color-cream);
}

.programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
}

.program-card {
    display: block;
    padding: var(--space-md);
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-gold);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    text-decoration: none;
}

.program-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-left-color: var(--color-maroon);
}

.program-card h3 {
    color: var(--color-maroon);
    margin-bottom: var(--space-xs);
}

.program-card p {
    color: var(--color-text-light);
    margin: 0;
}

/* --------------------------------------------------------------------------
   News/Posts Section
   -------------------------------------------------------------------------- */
.news-section {
    padding: var(--space-xl) 0;
    background-color: var(--color-white);
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
}

.post-card {
    background-color: var(--color-cream);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

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

.post-card-image {
    display: block;
    height: 200px;
    background-size: cover;
    background-position: center;
}

.post-card-content {
    padding: var(--space-md);
}

.post-card h3 {
    font-size: 1.25rem;
    margin-bottom: var(--space-xs);
}

.post-card h3 a {
    color: var(--color-maroon);
}

.post-card h3 a:hover {
    color: var(--color-gold-dark);
}

.post-card p {
    color: var(--color-text-light);
    margin-bottom: var(--space-xs);
}

.post-card time {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   CTA Section
   -------------------------------------------------------------------------- */
.cta-section {
    padding: 5rem var(--space-md) 5rem;
    background: linear-gradient(135deg, var(--color-maroon) 0%, var(--color-maroon-dark) 100%);
    color: var(--color-white);
    text-align: center;
}

.cta-section h2 {
    color: var(--color-white);
    font-size: 2.5rem;
    margin-top: 1rem;
    margin-bottom: var(--space-sm);
}

.cta-section p {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: var(--space-lg);
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.cta-section .btn-primary {
    background-color: var(--color-white);
    color: var(--color-maroon);
    border-color: var(--color-white);
}

.cta-section .btn-secondary {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.cta-section .btn-secondary:hover {
    background-color: var(--color-gold);
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Page Styles
   -------------------------------------------------------------------------- */
.page-header,
.post-header,
.tag-header {
    background: linear-gradient(135deg, var(--color-maroon) 0%, var(--color-maroon-dark) 100%);
    color: var(--color-white);
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Tibetan cloud/auspicious pattern overlay on headers */
.page-header::before,
.post-header::before,
.tag-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='200' height='100' viewBox='0 0 200 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 70c-8 0-15-6-15-15s7-15 15-15c2-9 10-15 18-15 7 0 13 4 16 10 3-2 6-3 10-3 9 0 17 7 17 16h3c6 0 11 5 11 12s-5 12-11 12H25z' fill='none' stroke='%23ffffff' stroke-width='0.5' opacity='0.06'/%3E%3Cpath d='M125 70c-8 0-15-6-15-15s7-15 15-15c2-9 10-15 18-15 7 0 13 4 16 10 3-2 6-3 10-3 9 0 17 7 17 16h3c6 0 11 5 11 12s-5 12-11 12h-64z' fill='none' stroke='%23D4A843' stroke-width='0.5' opacity='0.08'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Decorative bottom border */
.page-header::after,
.post-header::after,
.tag-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.page-title,
.post-title,
.tag-title {
    color: var(--color-white);
    font-size: 2.5rem;
    margin-bottom: var(--space-xs);
}

.post-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--color-gold);
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

.post-meta,
.tag-count {
    font-size: 1rem;
    opacity: 0.9;
}

.post-meta .post-author {
    margin-left: var(--space-sm);
}

.page-feature-image,
.post-feature-image {
    max-width: 1000px;
    margin: calc(var(--space-lg) * -1) auto var(--space-lg);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.page-feature-image img,
.post-feature-image img {
    width: 100%;
    height: auto;
    display: block;
}

.page-content,
.post-content {
    max-width: 800px;
    padding: var(--space-lg) var(--space-md);
    position: relative;
}

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

.page-content h2,
.post-content h2 {
    margin-top: var(--space-lg);
}

.page-content ul,
.page-content ol,
.post-content ul,
.post-content ol {
    margin-bottom: var(--space-md);
    padding-left: var(--space-md);
}

.page-content li,
.post-content li {
    margin-bottom: var(--space-xs);
}

/* --------------------------------------------------------------------------
   Post Footer
   -------------------------------------------------------------------------- */
.post-footer {
    max-width: 800px;
    padding: var(--space-md);
    margin-top: var(--space-lg);
    border-top: 1px solid var(--color-cream-dark);
}

.post-tags,
.post-share {
    margin-bottom: var(--space-sm);
}

.post-tags span,
.post-share span {
    font-weight: 600;
    margin-right: var(--space-xs);
}

.post-share a {
    margin-right: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Related Posts
   -------------------------------------------------------------------------- */
.related-posts {
    background-color: var(--color-cream);
    padding: var(--space-xl) 0;
}

/* --------------------------------------------------------------------------
   Tag Page
   -------------------------------------------------------------------------- */
.tag-posts {
    padding: var(--space-lg) 0;
}

.tag-description {
    font-size: 1.125rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto var(--space-sm);
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.page-number {
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Error Page
   -------------------------------------------------------------------------- */
.error-page {
    padding: var(--space-xl) var(--space-md);
    text-align: center;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.error-code {
    font-size: 8rem;
    color: var(--color-maroon);
    margin: 0;
    line-height: 1;
}

.error-message {
    font-size: 1.5rem;
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background-color: var(--color-maroon-dark);
    color: var(--color-cream);
    padding: var(--space-xl) 0 var(--space-md);
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 20c-8 0-14 6-14 14v12c0 4-3 7-7 7H27c-8 0-14 6-14 14s6 14 14 14h12c4 0 7 3 7 7v12c0 8 6 14 14 14s14-6 14-14V88c0-4 3-7 7-7h12c8 0 14-6 14-14s-6-14-14-14H81c-4 0-7-3-7-7V34c0-8-6-14-14-14z' fill='none' stroke='%23D4A843' stroke-width='0.5' opacity='0.08'/%3E%3Ccircle cx='60' cy='60' r='5' fill='none' stroke='%23D4A843' stroke-width='0.3' opacity='0.1'/%3E%3Ccircle cx='60' cy='60' r='10' fill='none' stroke='%23D4A843' stroke-width='0.3' opacity='0.06'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Decorative top border with Tibetan motif */
.site-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--color-gold) 0%,
        var(--color-maroon) 25%,
        var(--color-gold) 50%,
        var(--color-maroon) 75%,
        var(--color-gold) 100%
    );
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.footer-section h4 {
    color: var(--color-gold);
    font-size: 1.125rem;
    margin-bottom: var(--space-sm);
}

.footer-section p {
    opacity: 0.9;
    font-size: 0.95rem;
}

.footer-section .tibetan-script {
    color: var(--color-gold-light);
    margin-bottom: var(--space-xs);
}

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

.footer-links li {
    margin-bottom: var(--space-xs);
}

.footer-links a {
    color: var(--color-cream);
    opacity: 0.9;
    font-size: 0.95rem;
}

.footer-links a:hover {
    color: var(--color-gold);
    opacity: 1;
}

.social-links {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: var(--color-maroon);
    color: var(--color-cream);
    border-radius: 50%;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.social-links a:hover {
    background-color: var(--color-gold);
    color: var(--color-text);
}

/* Newsletter Subscribe */
.footer-subscribe {
    text-align: center;
    padding: var(--space-md) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--space-md);
}

.footer-subscribe h4 {
    color: var(--color-gold);
    margin-bottom: var(--space-sm);
}

.subscribe-form {
    display: flex;
    justify-content: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    max-width: 500px;
    margin: 0 auto;
}

.subscribe-form input[type="email"] {
    flex: 1;
    min-width: 200px;
    padding: 0.75rem 1rem;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    font-size: 1rem;
}

.subscribe-form input[type="email"]:focus {
    outline: none;
    border-color: var(--color-gold);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-md);
    font-size: 0.875rem;
    opacity: 0.8;
}

.footer-bottom p {
    margin-bottom: var(--space-xs);
}

.powered-by a {
    color: var(--color-gold);
}

/* --------------------------------------------------------------------------
   Responsive Adjustments
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --space-lg: 3rem;
        --space-xl: 4rem;
    }

    h1, .hero .site-title, .page-title, .post-title {
        font-size: 2rem;
    }

    h2, .section-title {
        font-size: 1.5rem;
    }

    .hero .tibetan-title {
        font-size: 1.5rem;
    }

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

    .hero-buttons,
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .btn {
        width: 100%;
        max-width: 280px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Ghost Koenig Editor - Required Styles
   -------------------------------------------------------------------------- */

/* Wide and Full Width Images */
.kg-width-wide {
    position: relative;
    width: 85vw;
    min-width: 100%;
    margin-left: calc(50% - 42.5vw);
    margin-right: calc(50% - 42.5vw);
}

.kg-width-full {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.kg-width-full img,
.kg-width-wide img {
    width: 100%;
}

/* Gallery Card */
.kg-gallery-container {
    display: flex;
    flex-direction: column;
    max-width: 1040px;
    width: 100%;
}

.kg-gallery-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.kg-gallery-image img {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;
}

.kg-gallery-row:not(:first-of-type) {
    margin: 0.75em 0 0;
}

.kg-gallery-image:not(:first-of-type) {
    margin: 0 0 0 0.75em;
}

/* Bookmark Card */
.kg-bookmark-card {
    width: 100%;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.kg-bookmark-container {
    display: flex;
    text-decoration: none;
    color: var(--color-text);
}

.kg-bookmark-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: var(--space-md);
}

.kg-bookmark-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-maroon);
}

.kg-bookmark-description {
    margin-top: var(--space-xs);
    font-size: 0.875rem;
    color: var(--color-text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
}

.kg-bookmark-metadata {
    display: flex;
    align-items: center;
    margin-top: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.kg-bookmark-icon {
    width: 20px;
    height: 20px;
    margin-right: var(--space-xs);
}

.kg-bookmark-author::before {
    content: "•";
    margin: 0 var(--space-xs);
}

.kg-bookmark-thumbnail {
    position: relative;
    min-width: 160px;
    max-width: 300px;
}

.kg-bookmark-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image Card Captions */
.kg-image-card figcaption,
.kg-gallery-card figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

/* Embed Card */
.kg-embed-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Callout Card */
.kg-callout-card {
    display: flex;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-cream);
}

.kg-callout-emoji {
    font-size: 1.5rem;
    margin-right: var(--space-sm);
}

.kg-callout-text {
    color: var(--color-text);
}

/* Button Card */
.kg-button-card {
    display: flex;
    justify-content: center;
    margin: var(--space-md) 0;
}

.kg-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
    background: var(--color-maroon);
    color: var(--color-white);
    transition: background 0.2s ease;
}

.kg-btn:hover {
    background: var(--color-maroon-dark);
    color: var(--color-white);
}

/* Toggle Card */
.kg-toggle-card {
    background: var(--color-cream);
    border-radius: var(--radius-md);
    margin: var(--space-sm) 0;
}

.kg-toggle-heading {
    display: flex;
    align-items: center;
    padding: var(--space-md);
    cursor: pointer;
}

.kg-toggle-card-icon {
    margin-right: var(--space-sm);
}

.kg-toggle-content {
    padding: 0 var(--space-md) var(--space-md);
}

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */
@media print {
    .site-header,
    .site-footer,
    .hero-buttons,
    .cta-section,
    .post-share {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .page-content,
    .post-content {
        max-width: 100%;
    }
}