/* Florilegio de la Fe - Custom Design System */

:root {
    --color-primary: #800020;
    --color-bg-ivory: #E9DDD2;
    --font-serif: 'EB Garamond', 'PT Serif', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
    background-color: #fff;
    color: #333;
    font-family: var(--font-sans);
}

.hero-logo {
    max-width: 750px;
    width: 100%;
}

/* Header & Logo */
/* Header & Logo */
.uc-header {
    background-color: transparent !important;
}

/* Force cream background on top navbar */
.uc-top-navbar {
    background-color: #f7f3ed !important;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* Article Content - Academic Feel */
.theology-content {
    font-family: var(--font-serif);
    line-height: 1.85;
    color: #2c2c2c;
    letter-spacing: 0.01em;
    font-size: 1.5rem !important; /* ~24px for mobile */
    text-align: justify !important;
    white-space: pre-line;
}

@media (min-width: 992px) {
    .theology-content,
    .theology-content p {
        font-size: 26px !important; /* Incrementado de 22px a 26px */
        line-height: 1.8;
    }
}

.theology-content p {
    margin-bottom: 2.25rem; /* Slightly more space for the elegant EB Garamond */
}

/* New class for readable article width */
.readable-content {
    max-width: 850px !important;
    margin-left: auto;
    margin-right: auto;
}

.theology-content h1, 
.theology-content h2, 
.theology-content h3, 
.theology-content h4 {
    font-family: var(--font-sans);
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #1a1a1a;
}

/* Dark Mode Overrides */
.dark body {
    color: #e0e0e0;
}

.dark .theology-content {
    color: #e0e0e0;
}

.dark .theology-content h1, 
.dark .theology-content h2, 
.dark .theology-content h3, 
.dark .theology-content h4 {
    color: #f5f5f5;
}

/* Custom Overrides from Original index.html inline style */
.max-w-lg {
    max-width: 1500px !important;
}

.fil1 {
    fill: var(--color-bg-ivory) !important;
}

/* Navbar Customization */
.uc-navbar-nav > li > a {
    text-transform: none;
    font-weight: 500;
}

/* Sticky Header Refinements */
.sticky-logo {
    display: none !important;
    transition: opacity 0.3s ease;
}

.uc-navbar-sticky .uc-center-navbar {
    display: none !important;
}

.header-four .uc-navbar-sticky {
    background-color: transparent !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

.uc-navbar-sticky .uc-top-navbar {
    background-color: rgba(247, 243, 237, 0.15) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    box-shadow: none;
    padding-top: 5px;
    padding-bottom: 5px;
}

.dark .uc-navbar-sticky .uc-top-navbar {
    background-color: rgba(0, 0, 0, 0.15) !important;
    border-bottom: 2px solid rgba(255,255,255,0.1);
}

/* Ensure sticky logo is visible when sticky */
.uc-navbar-sticky .uc-top-navbar .sticky-logo {
    display: block !important;
    animation: fadeIn 0.3s ease-in-out;
    margin-right: 15px;
}

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

/* Article Grid Layout */
.article-grid-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.article-grid-left {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.article-grid-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.article-grid-bottom-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.article-grid-bottom-row > * {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
}
@media (min-width: 992px) {
    .article-grid-left {
        flex: 0 0 calc(66.666% - 0.5rem);
    }
    .article-grid-right {
        flex: 0 0 calc(33.333% - 0.5rem);
    }
}

.article-grid-section .post-card-featured,
.article-grid-section .post-card-vertical,
.article-grid-section .post-card-grid {
    border: 1px solid rgba(0,0,0,0.05);
}
.article-grid-section .post-card-featured:hover,
.article-grid-section .post-card-vertical:hover,
.article-grid-section .post-card-grid:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.2);
}
.article-grid-section .post-card-featured > div {
    padding: 0.75rem !important;
}
.article-grid-section .post-card-featured > div.vstack {
    gap: 0.25rem !important;
}

/* Pagination */
.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.9rem;
}
.pagination-btn:hover {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.05);
}
.pagination-btn.disabled {
    opacity: 0.3;
    pointer-events: none;
}
.pagination-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}
.pagination-num:hover {
    background: rgba(0,0,0,0.05);
    color: var(--bs-primary);
}
.pagination-num.active {
    background: var(--bs-primary);
    color: #fff;
    font-weight: 600;
}

/* Featured Articles Grid */
.featured-grid-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.featured-grid-left {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.featured-grid-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (min-width: 992px) {
    .featured-grid-left {
        flex: 0 0 calc(66.666% - 0.5rem);
    }
    .featured-grid-right {
        flex: 0 0 calc(33.333% - 0.5rem);
    }
}
.featured-grid-bottom-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.featured-grid-bottom-row > * {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 0;
}
.featured-grid-section .post-card-featured,
.featured-grid-section .post-card-vertical,
.featured-grid-section .post-card-grid {
    border: 1px solid rgba(0,0,0,0.05);
}
.featured-grid-section .post-card-featured:hover,
.featured-grid-section .post-card-vertical:hover,
.featured-grid-section .post-card-grid:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.2);
}
.featured-grid-section .post-card-featured > div {
    padding: 0.75rem !important;
}
.featured-grid-section .post-card-featured > div.vstack {
    gap: 0.25rem !important;
}

/* Category Grid */
.category-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    border-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.category-icon {
    font-size: 2rem;
    color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    margin-bottom: 1rem;
}

/* Latest Articles Grid */
.post-card-horizontal {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.post-card-horizontal:last-child {
    border-bottom: none;
}

/* Newsletter Customization */
.newsletter-section {
    border: 1px solid rgba(0,0,0,0.05);
    background-image: radial-gradient(circle at 100% 100%, rgba(39, 87, 253, 0.05) 0%, transparent 50%);
}

/* Slider Navigation Refinements - Fixed Centering & Size */
.swiper-parent .panel {
    position: relative;
    padding: 0 40px; /* Reduced to give more space to articles */
}

.slider-btn {
    position: absolute;
    top: 40%;
    width: 48px !important;
    height: 48px !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
    color: #000 !important;
}

.slider-btn.swiper-prev {
    left: -20px !important; /* Move OUTSIDE the padding zone to not steal space */
}

.slider-btn.swiper-next {
    right: -20px !important; /* Move OUTSIDE the padding zone to not steal space */
}

.slider-btn:hover {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    color: #fff !important;
    border-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    transform: scale(1.1);
}

.slider-btn i {
    font-size: 1.5rem !important;
    display: block !important;
}

.dark .slider-btn {
    background-color: #1a1a1a !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.1) !important;
}

/* Hero Brand Section & Decorative Divider */
.hero-brand-section {
    position: relative;
    background-color: #f7f3ed !important;
    padding-bottom: 10rem !important;
    border-bottom: none;
    overflow: visible;
}

.hero-brand-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.45);
    z-index: 1;
    pointer-events: none;
}
.dark .hero-brand-section::before {
    background: rgba(0, 0, 0, 0.45);
}
.hero-brand-section > * {
    position: relative;
    z-index: 2;
}

.hero-brand-section p {
    font-family: 'PT Serif', serif;
    color: #1a1a1a !important;
    font-size: 23.5px !important;
}
#typewriter-text {
    margin-left: -100px;
}
.text-animation-unit {
    display: inline-block;
    white-space: pre;
    will-change: transform, opacity;
    backface-visibility: hidden;
    transform-origin: 50% 55%;
    opacity: 0;
    transform: translateY(18px);
}

/* Logo Entrance Animation - Safari Compatible */
.hero-brand-section .uc-logo {
    -webkit-perspective: 1000px;
    perspective: 1000px;
    display: inline-block;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.hero-brand-section .uc-logo img,
.hero-brand-section .uc-logo svg {
    -webkit-animation: logoEntranceFlip 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation: logoEntranceFlip 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

@-webkit-keyframes logoEntranceFlip {
    0% {
        -webkit-transform: rotateX(-90deg) translateY(20px);
        opacity: 0;
    }
    60% {
        -webkit-transform: rotateX(20deg) translateY(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: rotateX(0deg);
        opacity: 1;
    }
}

@keyframes logoEntranceFlip {
    0% {
        transform: rotateX(-90deg) translateY(20px);
        opacity: 0;
    }
    60% {
        transform: rotateX(20deg) translateY(0);
        opacity: 1;
    }
    100% {
        transform: rotateX(0deg);
        opacity: 1;
    }
}

.decorative-divider {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 100px;
    background: white;
    /* Torn paper effect using inline SVG mask-like path */
    mask-image: url("data:image/svg+xml,%3Csvg width='1000' height='100' viewBox='0 0 1000 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100 L1000 100 L1000 20 C950 25 900 15 850 20 C800 25 750 35 700 30 C650 25 600 15 550 20 C500 25 450 35 400 30 C350 25 300 15 250 20 C200 25 150 35 100 30 C50 25 0 15 0 20 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='1000' height='100' viewBox='0 0 1000 100' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 100 L1000 100 L1000 20 C950 25 900 15 850 20 C800 25 750 35 700 30 C650 25 600 15 550 20 C500 25 450 35 400 30 C350 25 300 15 250 20 C200 25 150 35 100 30 C50 25 0 15 0 20 Z' fill='black'/%3E%3C/svg%3E");
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    z-index: 5;
    transition: all 0.4s ease;
}

.dark .decorative-divider {
    background: #0d0d0d;
}


/* Expanding Search Bar */
.expanding-search-form {
    position: relative;
    transition: all 0.3s ease;
}

.expanding-search-form .search-input {
    width: 0;
    padding: 0;
    border: none;
    opacity: 0;
    transition: all 0.3s ease;
    background: rgba(0,0,0,0.05);
}

.expanding-search-form .search-submit {
    opacity: 0;
    width: 0;
    padding: 0;
    border: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

.expanding-search-form.active {
    background: rgba(255, 255, 255, 0.5);
    padding: 4px 8px;
    border-radius: 20px;
    border: 1px solid rgba(0,0,0,0.1);
}

.expanding-search-form.active .search-input {
    width: 250px;
    padding: 0 10px;
    opacity: 1;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 20px;
}

.expanding-search-form.active .search-submit {
    opacity: 1;
    width: auto;
    padding: 2px 12px;
    background: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
}

.expanding-search-form .search-toggle {
    cursor: pointer;
}

/* Dropdown Customization */
.uc-navbar-dropdown {
    background-color: #f7f3ed !important;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 15px;
}

.uc-navbar-dropdown-nav > li > a {
    color: #444 !important;
    transition: all 0.2s ease;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.95rem;
}

.uc-navbar-dropdown-nav > li > a:hover {
    background-color: rgba(0,0,0,0.03);
    color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
    padding-left: 18px;
}

/* Nav Icons Styling */
.uc-navbar-nav .icon, 
.uc-navbar-dropdown-nav .icon {
    color: #333;
    vertical-align: middle;
    margin-top: -2px;
}

.dark .uc-navbar-nav .icon, 
.dark .uc-navbar-dropdown-nav .icon {
    color: #ccc;
}

.dark .uc-navbar-dropdown {
    background-color: #1a1a1a !important;
    border-color: rgba(255,255,255,0.1);
}

.dark .uc-navbar-dropdown-nav > li > a {
    color: #ccc !important;
}

.dark .uc-navbar-dropdown-nav > li > a:hover {
    background-color: rgba(255,255,255,0.05);
}

/* Rich Article Content Styles */
.keyword-highlight-box {
    background-color: #f8f1ea;
    border-left: 5px solid var(--color-primary);
    padding: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.dark .keyword-highlight-box {
    background-color: rgba(255, 255, 255, 0.05);
    border-left-color: var(--color-primary);
}

.phrase-highlight {
    background-color: rgba(39, 87, 253, 0.1);
    padding: 0 4px;
    border-radius: 2px;
    font-weight: 600;
}

.dark .phrase-highlight {
    background-color: rgba(39, 87, 253, 0.2);
    color: #fff;
}

/* Author Box - Academic Bio */
.author-box {
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.author-box:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.author-avatar {
    border: 3px solid #fff;
    width: 100px;
    height: 100px;
}

.dark .author-avatar {
    border-color: #333;
}

.author-info p {
    font-family: var(--font-serif);
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

.author-info h5 {
    font-family: var(--font-sans);
}

/* Blockquote - Elegant academic quote style */
.theology-content blockquote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1em;
    margin: 0.25rem 0 0.25rem 3rem; /* Drastically reduced vertical margin */
    padding: 0.5rem 1.5rem 0.5rem 2rem; /* Reduced vertical padding */
    border-left: 4px solid var(--color-primary);
    background-color: rgba(39, 87, 253, 0.03);
    border-radius: 0 8px 8px 0;
    position: relative;
    color: #444;
}

/* Ensure no double margin if there's a paragraph inside */
.theology-content blockquote p {
    margin-bottom: 0.5rem !important;
}

.theology-content blockquote p:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 768px) {
    .theology-content blockquote {
        margin: 0.25rem 0 0.25rem 1.5rem;
        font-size: 1.05em;
    }
}

.dark .theology-content blockquote {
    background-color: rgba(39, 87, 253, 0.08);
    color: #d0d0d0;
    border-left-color: var(--color-primary);
}

/* Quote Tag - Small label utility */
.quote-tag {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 2px 8px;
    background-color: var(--color-primary);
    color: white;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    vertical-align: middle;
}

.quote-tag.secondary {
    background-color: #666;
}

/* Reading Progress Bar */
.reading-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: transparent;
    z-index: 9999;
}

.reading-progress-bar {
    height: 100%;
    background: var(--color-primary);
    width: 0%;
    transition: width 0.1s ease;
    box-shadow: 0 0 10px rgba(39, 87, 253, 0.5);
}

/* Drop Cap (Letra Capital) */
.theology-content > div > p:first-of-type::first-letter {
    font-family: var(--font-serif);
    float: left;
    font-size: 5.5rem;
    line-height: 1;
    margin: 0.5rem 0.75rem 0 0;
    color: inherit; /* Changed to inherit to use default text color */
    font-weight: 700;
}

/* Sidebar Widgets */
.sidebar-widget {
    margin-bottom: 3rem;
}

.sidebar-widget-title {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(0,0,0,0.05);
    color: #1a1a1a;
}

.dark .sidebar-widget-title {
    color: #f5f5f5;
    border-bottom-color: rgba(255,255,255,0.1);
}

.related-post-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    align-items: center;
}

.related-post-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.related-post-info h6 {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    line-height: 1.3;
    margin-bottom: 0.25rem;
}

.related-post-info .date {
    font-size: 0.75rem;
    color: #888;
}

/* Fix Navbar responsiveness and Toggle placement */
@media (max-width: 991px) {
    /* Override uni-core.min.css hiding rules */
    #mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        width: 44px !important;
        height: 44px !important;
        justify-content: center !important;
        align-items: center !important;
        position: relative;
        z-index: 10;
    }
    
    /* Ensure the navbar container is visible and has the right background */
    .uc-navbar-container {
        background-color: #f7f3ed !important;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .uc-top-navbar {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    
    .uc-navbar-left, 
    .uc-navbar-right {
        display: flex !important;
        align-items: center !important;
    }

    .uc-logo img {
        max-width: 120px; /* Reduction for mobile/tablet */
    }

    .hero-logo {
        max-width: 350px !important;
    }

    /* Fix search form width on mobile */
    .expanding-search-form.active .search-input {
        width: 160px; /* Reduced for mobile */
    }
}

/* Ensure toggle is hidden on desktop */
@media (min-width: 992px) {
    #mobile-menu-toggle {
        display: none !important;
    }
}

/* Mobile Offcanvas Customization */
.uc-offcanvas-bar {
    background-color: #f7f3ed !important; /* Cream background like the navbar */
    position: relative;
}

/* Fix the close button position and visibility */
.uc-offcanvas-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    color: #333 !important; /* Dark color for contrast */
    background: rgba(0,0,0,0.05) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 100 !important;
    transition: all 0.3s ease !important;
    border: none !important;
    cursor: pointer;
}

.uc-offcanvas-close:hover {
    background: rgba(0,0,0,0.1) !important;
    transform: rotate(90deg);
}

.dark .uc-offcanvas-bar {
    background-color: #1a1a1a !important;
}

.dark .uc-offcanvas-close {
    color: #fff !important;
    background: rgba(255,255,255,0.1) !important;
}

.close-menu-btn {
    border: none !important;
    background: transparent !important;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.close-menu-btn:hover {
    transform: rotate(90deg);
}