/*

Theme Name: Tarot y Arcanos

Theme URI: https://tarotyarcano.com

Author: Elena Vásquez

Author URI: https://tarotyarcano.com

Description: Tema personalizado para Tarot y Arcanos — guía de tarot en español. Diseño místico y elegante optimizado para lectura y SEO.

Version: 1.2.0

Requires at least: 6.0

Tested up to: 6.7

Requires PHP: 8.0

License: GNU General Public License v2 or later

License URI: https://www.gnu.org/licenses/gpl-2.0.html

Text Domain: tarotyarcanos

*/



/* ==========================================================================

   CSS Reset / Base

   ========================================================================== */



*, *::before, *::after {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    font-size: 16px;

    scroll-behavior: smooth;

    -webkit-text-size-adjust: 100%;

}



body {

    font-family: 'Source Sans 3', 'Segoe UI', sans-serif;

    font-weight: 400;

    line-height: 1.7;

    color: #2C2C2C;

    background-color: #FAF8F5;

    overflow-x: hidden;

}



img {

    max-width: 100%;

    height: auto;

    display: block;

}



a {

    color: #8B5CF6;

    text-decoration: none;

    transition: color 0.25s ease;

}



a:hover {

    color: #C9A84C;

}



/* Focus styles for keyboard navigation */

a:focus-visible,

button:focus-visible,

input:focus-visible {

    outline: 2px solid #C9A84C;

    outline-offset: 2px;

}



ul, ol {

    list-style-position: outside;

    padding-left: 1.5em;

}



/* ==========================================================================

   Typography System

   ========================================================================== */



h1, h2, h3, h4, h5, h6 {

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-weight: 700;

    line-height: 1.25;

    color: #2D1B69;

}



h1 {

    font-size: 2.4rem;

    margin-bottom: 0.6em;

}



h2 {

    font-size: 1.85rem;

    margin-top: 2.2em;

    margin-bottom: 0.6em;

    padding-bottom: 0;

    border-bottom: none;

}



h3 {

    font-size: 1.4rem;

    margin-top: 1.8em;

    margin-bottom: 0.5em;

    padding-left: 0;

    border-left: none;

}



h4 {

    font-size: 1.15rem;

    margin-top: 1.5em;

    margin-bottom: 0.4em;

}



h5, h6 {

    font-size: 1rem;

    margin-top: 1.3em;

    margin-bottom: 0.4em;

}



p {

    margin-bottom: 1.25em;

}



blockquote {

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-style: italic;

    font-size: 1.2rem;

    color: #2D1B69;

    border-left: 4px solid #C9A84C;

    padding: 1em 1.5em;

    margin: 2em 0;

    background: rgba(45, 27, 105, 0.04);

    border-radius: 0 6px 6px 0;

}



blockquote p:last-child {

    margin-bottom: 0;

}



strong {

    font-weight: 600;

}



em {

    font-style: italic;

}



hr {

    border: none;

    border-top: 1px solid rgba(45, 27, 105, 0.12);

    margin: 2.5em 0;

}



/* ==========================================================================

   Layout / Container

   ========================================================================== */



.site-container {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}



.container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



.container--narrow {

    max-width: 720px;

    margin: 0 auto;

    padding: 0 20px;

}



.site-main {

    flex: 1;

}



/* ==========================================================================

   Header

   ========================================================================== */



.site-header {

    background-color: #2D1B69;

    position: sticky;

    top: 0;

    z-index: 1000;

    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);

}



.header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 20px;

    max-width: 1200px;

    margin: 0 auto;

    height: 64px;

}



.site-branding a {

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: 1.6rem;

    font-weight: 700;

    color: #C9A84C;

    text-decoration: none;

    letter-spacing: 0.02em;

    transition: color 0.25s ease;

}



.site-branding a:hover {

    color: #E8E0F0;

}



/* Primary Navigation */



.primary-nav ul {

    display: flex;

    gap: 4px;

    list-style: none;

    padding: 0;

    margin: 0;

}



.primary-nav a {

    display: block;

    padding: 10px 16px;

    color: #E8E0F0;

    font-size: 0.92rem;

    font-weight: 600;

    border-radius: 4px;

    transition: color 0.25s ease, background-color 0.25s ease;

    text-decoration: none;

}



.primary-nav a:hover,

.primary-nav .current-menu-item > a,

.primary-nav .current-menu-ancestor > a {

    color: #C9A84C;

    background-color: rgba(255, 255, 255, 0.07);

}



/* Mobile Menu Toggle */



.menu-toggle {

    display: none;

    background: none;

    border: none;

    cursor: pointer;

    padding: 8px;

    min-width: 44px;

    min-height: 44px;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 6px;

}



.menu-toggle span {

    display: block;

    width: 26px;

    height: 3px;

    background-color: #E8E0F0;

    border-radius: 2px;

    transition: transform 0.3s ease, opacity 0.3s ease;

}



.menu-toggle[aria-expanded="true"] span:nth-child(1) {

    transform: translateY(9px) rotate(45deg);

}



.menu-toggle[aria-expanded="true"] span:nth-child(2) {

    opacity: 0;

}



.menu-toggle[aria-expanded="true"] span:nth-child(3) {

    transform: translateY(-9px) rotate(-45deg);

}



/* ==========================================================================

   Breadcrumbs

   ========================================================================== */



.breadcrumbs {

    padding: 16px 0;

    font-size: 0.85rem;

    color: #7a7a7a;

}



.breadcrumbs a {

    color: #8B5CF6;

}



.breadcrumbs a:hover {

    color: #C9A84C;

}



.breadcrumbs .separator {

    margin: 0 6px;

    color: #bbb;

}



.breadcrumbs .current {

    color: #555;

}



/* ==========================================================================

   Article / Single Post

   ========================================================================== */



.article-header {

    text-align: center;

    padding: 3.5em 0 1.5em;

    max-width: 720px;

    margin: 0 auto;

}



.article-header .category-badge {

    display: inline-block;

    background-color: #2D1B69;

    color: #C9A84C;

    font-size: 0.78rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    padding: 5px 16px;

    border-radius: 999px;

    margin-bottom: 1em;

}



.article-header .category-badge a {

    color: #C9A84C;

}



.article-header .category-badge a:hover {

    color: #E8E0F0;

}



.article-header h1 {

    font-size: 2.5rem;

    line-height: 1.2;

    margin-bottom: 0.5em;

}



.article-meta {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 6px 20px;

    font-size: 0.88rem;

    color: #7a7a7a;

}



.article-meta .meta-item {

    display: flex;

    align-items: center;

    gap: 5px;

}



/* Meta separators */

.article-meta .meta-item + .meta-item::before {

    content: '·';

    color: #bbb;

    margin-right: 4px;

    font-weight: 700;

}



/* Featured Image */



.article-featured-image {

    max-width: 720px;

    margin: 0 auto 2.5em;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

}



.article-featured-image img {

    width: 100%;

    height: auto;

    display: block;

}



/* Table of Contents */



.toc-container {

    max-width: 720px;

    margin: 0 auto 2em;

    padding: 1.2em 1.5em;

    background: transparent;

    border: none;

    border-radius: 0;

    border-top: 1px solid rgba(45, 27, 105, 0.08);

    border-bottom: 1px solid rgba(45, 27, 105, 0.08);

}



.toc-container .toc-title {

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: 1.2rem;

    font-weight: 700;

    color: #2D1B69;

    margin-bottom: 0.75em;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom: none;

    border-left: none;

    padding-bottom: 0;

    padding-left: 0;

    margin-top: 0;

}



.toc-container .toc-title::after {

    content: '';

    display: inline-block;

    width: 8px;

    height: 8px;

    border-right: 2px solid #2D1B69;

    border-bottom: 2px solid #2D1B69;

    transform: rotate(45deg);

    transition: transform 0.3s ease;

    margin-left: 8px;

}



.toc-container.collapsed .toc-title::after {

    transform: rotate(-45deg);

}



.toc-container.collapsed .toc-list {

    display: none;

}



.toc-list {

    list-style: none;

    padding: 0;

    margin: 0;

    counter-reset: toc-counter;

}



.toc-list li {

    counter-increment: toc-counter;

    margin-bottom: 0.35em;

}



.toc-list li a {

    display: block;

    padding: 5px 8px 5px 0;

    font-size: 0.93rem;

    color: #2D1B69;

    border-radius: 3px;

    transition: color 0.2s ease, padding-left 0.2s ease;

}



.toc-list li a::before {

    content: counter(toc-counter) ". ";

    color: #C9A84C;

    font-weight: 600;

}



.toc-list li a:hover {

    color: #8B5CF6;

    padding-left: 6px;

}



/* Entry Content — raw HTML styling */



.entry-content {

    max-width: 720px;

    margin: 0 auto;

    padding: 0 20px;

    font-size: 1.05rem;

    line-height: 1.8;

}



.entry-content h2 {

    scroll-margin-top: 80px;

    color: #2D1B69;

}



.entry-content h3 {

    scroll-margin-top: 80px;

    color: #3D2B79;

}



.entry-content a {

    color: #8B5CF6;

    text-decoration: underline;

    text-decoration-color: rgba(139, 92, 246, 0.5);

    text-underline-offset: 2px;

    transition: color 0.25s ease, text-decoration-color 0.25s ease;

}



.entry-content a:hover {

    color: #C9A84C;

    text-decoration-color: rgba(201, 168, 76, 0.5);

}



.entry-content ul,

.entry-content ol {

    margin-bottom: 1.5em;

}



.entry-content ul li {

    margin-bottom: 0.5em;

    position: relative;

}



.entry-content ol li {

    margin-bottom: 0.5em;

}



/* Custom list bullet color */

.entry-content ul {

    list-style: none;

    padding-left: 1.2em;

}



.entry-content ul > li::before {

    content: '✦';

    color: #C9A84C;

    font-size: 0.65em;

    position: absolute;

    left: -1.6em;

    top: 0.55em;

}



.entry-content ol {

    padding-left: 1.5em;

}



.entry-content ol li::marker {

    color: #C9A84C;

    font-weight: 600;

}



.entry-content img {

    border-radius: 6px;

    margin: 2em auto;

}



/* Combination lists (UL with bold links) */



.entry-content ul li strong a,

.entry-content ul li a strong {

    font-weight: 600;

    color: #2D1B69;

    text-decoration: underline;

    text-decoration-color: rgba(45, 27, 105, 0.2);

}



.entry-content ul li strong a:hover,

.entry-content ul li a strong:hover {

    color: #8B5CF6;

    text-decoration-color: rgba(139, 92, 246, 0.4);

}



/* FAQ section styling */



.entry-content h3 {

    position: relative;

}



.entry-content h3 + p {

    margin-top: -0.2em;

}



/* FAQ Section Wrapper */

.faq-section {

    margin-top: 2.5em;

    padding: 0;

    background: transparent;

    border-radius: 0;

    border: none;

    border-top: 1px solid rgba(45, 27, 105, 0.08);

}



/* FAQ H2 title inside section */

.faq-section > h2 {

    margin-top: 1.2em;

    text-align: left;

    border-bottom: none;

}



/* FAQ question styling */

.faq-section h3,

.entry-content .faq-question {

    background: transparent;

    padding: 0;

    border-left: none;

    border-radius: 0;

    margin-top: 1.5em;

    font-size: 1.2rem;

    color: #2D1B69;

}



/* Table styling */



.entry-content table {

    width: 100%;

    border-collapse: collapse;

    margin: 2em 0;

    font-size: 0.95rem;

}



.entry-content th {

    background-color: #2D1B69;

    color: #E8E0F0;

    font-weight: 600;

    padding: 10px 14px;

    text-align: left;

}



.entry-content td {

    padding: 10px 14px;

    border-bottom: 1px solid rgba(45, 27, 105, 0.1);

}



.entry-content tr:nth-child(even) td {

    background-color: rgba(45, 27, 105, 0.02);

}



/* ==========================================================================

   Author Bio Box (after article content)

   ========================================================================== */



.author-bio {

    max-width: 720px;

    margin: 2em auto;

    padding: 1.5em 0;

    background: transparent;

    border-radius: 0;

    border: none;

    border-top: 1px solid rgba(45, 27, 105, 0.08);

    display: flex;

    gap: 1.2em;

    align-items: flex-start;

}



.author-avatar {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background: #2D1B69;

    color: #C9A84C;

    display: flex;

    align-items: center;

    justify-content: center;

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: 1.4rem;

    font-weight: 700;

    flex-shrink: 0;

}



.author-info {

    flex: 1;

}



.author-info strong {

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: 1.05rem;

    color: #2D1B69;

    display: block;

    margin-bottom: 0.2em;

}



.author-info p {

    font-size: 0.88rem;

    color: #777;

    line-height: 1.6;

    margin-bottom: 0;

}



/* ==========================================================================

   Related Posts

   ========================================================================== */



.related-posts {

    max-width: 900px;

    margin: 3em auto 0;

    padding: 3em 20px 0;

    border-top: 2px solid rgba(45, 27, 105, 0.08);

}



.related-posts h2 {

    text-align: center;

    border-bottom: none;

    border-left: none;

    padding-left: 0;

    margin-top: 0;

    font-size: 1.6rem;

}



.related-posts-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    margin-top: 1.5em;

}



/* ==========================================================================

   Card Grid (Archives, Related, Homepage)

   ========================================================================== */



.post-card {

    background: #fff;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    display: flex;

    flex-direction: column;

}



.post-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 24px rgba(45, 27, 105, 0.14);

}



.post-card .card-image {

    aspect-ratio: 16/9;

    overflow: hidden;

    background-color: rgba(45, 27, 105, 0.06);

}



.post-card .card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.3s ease;

}



.post-card:hover .card-image img {

    transform: scale(1.04);

}



.post-card .card-body {

    padding: 1.4em;

    flex: 1;

    display: flex;

    flex-direction: column;

}



.post-card .card-category {

    font-size: 0.78rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: #C9A84C;

    margin-bottom: 0.5em;

}



.post-card .card-title {

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: 1.2rem;

    font-weight: 700;

    line-height: 1.3;

    margin-bottom: 0.5em;

    border-left: none;

    padding-left: 0;

}



.post-card .card-title a {

    color: #2D1B69;

    text-decoration: none;

}



.post-card .card-title a:hover {

    color: #8B5CF6;

}



.post-card .card-excerpt {

    font-size: 0.9rem;

    color: #555;

    line-height: 1.6;

    flex: 1;

}



.post-card .card-meta {

    font-size: 0.78rem;

    color: #767676;

    margin-top: 0.75em;

    padding-top: 0.75em;

    border-top: 1px solid #eee;

}



/* Card grid layouts */



.posts-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    margin-bottom: 3em;

}



/* ==========================================================================

   Archive / Category Header

   ========================================================================== */



.archive-header {

    text-align: center;

    padding: 3em 0 2em;

    max-width: 720px;

    margin: 0 auto;

}



.archive-header h1 {

    font-size: 2.2rem;

    margin-bottom: 0.5em;

}



.archive-header .archive-description {

    font-size: 1.1rem;

    color: #555;

    line-height: 1.7;

}



/* ==========================================================================

   Pagination

   ========================================================================== */



.pagination {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    padding: 2em 0 3em;

}



.pagination a,

.pagination span {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 40px;

    height: 40px;

    padding: 0 10px;

    border-radius: 4px;

    font-size: 0.92rem;

    font-weight: 600;

    transition: all 0.25s ease;

}



.pagination a {

    color: #2D1B69;

    background: #fff;

    border: 1px solid rgba(45, 27, 105, 0.15);

}



.pagination a:hover {

    background-color: #2D1B69;

    color: #C9A84C;

    border-color: #2D1B69;

}



.pagination .current {

    background-color: #2D1B69;

    color: #C9A84C;

    border: 1px solid #2D1B69;

}



/* ==========================================================================

   Homepage / Front Page

   ========================================================================== */



/* Hero */



.hero-section {

    background: linear-gradient(135deg, #2D1B69 0%, #1A1025 100%);

    padding: 5em 20px;

    text-align: center;

    position: relative;

    overflow: hidden;

}



.hero-section::before {

    content: '';

    position: absolute;

    top: 0; left: 0; right: 0; bottom: 0;

    background: radial-gradient(ellipse at 30% 20%, rgba(201, 168, 76, 0.08) 0%, transparent 60%),

                radial-gradient(ellipse at 70% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 60%);

    pointer-events: none;

}



/* Subtle star pattern overlay on hero */

.hero-section::after {

    content: '✦';

    position: absolute;

    top: 15%;

    right: 12%;

    font-size: 1.2rem;

    color: rgba(201, 168, 76, 0.12);

    pointer-events: none;

    animation: twinkle 3s ease-in-out infinite;

}



@keyframes twinkle {

    0%, 100% { opacity: 0.1; }

    50% { opacity: 0.3; }

}



.hero-content {

    position: relative;

    max-width: 700px;

    margin: 0 auto;

}



.hero-content h1 {

    font-size: 3rem;

    color: #E8E0F0;

    margin-bottom: 0.4em;

}



.hero-content h1 span {

    color: #C9A84C;

}



.hero-content p {

    font-size: 1.15rem;

    color: rgba(232, 224, 240, 0.85);

    margin-bottom: 1.8em;

    line-height: 1.7;

}



.hero-cta {

    display: inline-block;

    background-color: #C9A84C;

    color: #1A1025;

    padding: 14px 32px;

    border-radius: 6px;

    font-weight: 600;

    font-size: 1rem;

    letter-spacing: 0.02em;

    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;

    text-decoration: none;

    box-shadow: 0 4px 15px rgba(201, 168, 76, 0.3);

}



.hero-cta:hover {

    background-color: #d4b85e;

    transform: translateY(-2px);

    color: #1A1025;

    box-shadow: 0 6px 20px rgba(201, 168, 76, 0.4);

}



/* Hero dual buttons */

.hero-buttons {

    display: flex;

    gap: 16px;

    justify-content: center;

    flex-wrap: wrap;

}



.hero-cta--outline {

    background: transparent;

    color: #C9A84C;

    border: 2px solid rgba(201, 168, 76, 0.6);

    box-shadow: none;

}



.hero-cta--outline:hover {

    background: rgba(201, 168, 76, 0.1);

    color: #C9A84C;

    border-color: #C9A84C;

    box-shadow: none;

}



/* Stats Bar */

.stats-bar {

    background: #1A1025;

    padding: 2em 0;

    border-bottom: 1px solid rgba(201, 168, 76, 0.15);

}



.stats-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    max-width: 900px;

    margin: 0 auto;

    padding: 0 20px;

    text-align: center;

}



.stat-item {

    display: flex;

    flex-direction: column;

    gap: 4px;

}



.stat-number {

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: 2.4rem;

    font-weight: 700;

    color: #C9A84C;

    line-height: 1;

}



.stat-label {

    font-size: 0.85rem;

    color: rgba(232, 224, 240, 0.65);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



/* Daily Card Section */

.daily-card-section {

    padding: 4em 0;

    background: rgba(45, 27, 105, 0.03);

}



.section-subtitle {

    text-align: center;

    color: #777;

    font-size: 1rem;

    margin-top: -1em;

    margin-bottom: 2em;

}



.daily-card {

    display: flex;

    gap: 2.5em;

    max-width: 800px;

    margin: 0 auto;

    padding: 0 20px;

    align-items: center;

}



.daily-card-image {

    flex-shrink: 0;

    width: 280px;

}



.daily-card-image img {

    border-radius: 8px;

    box-shadow: 0 4px 20px rgba(45, 27, 105, 0.12);

}



.daily-card-info {

    flex: 1;

}



.daily-card-date {

    font-size: 0.85rem;

    color: #C9A84C;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    font-weight: 600;

}



.daily-card-info h3 {

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: 1.8rem;

    margin: 0.3em 0 0.5em;

    border-left: none;

    padding-left: 0;

}



.daily-card-info h3 a {

    color: #2D1B69;

    text-decoration: none;

}



.daily-card-info h3 a:hover {

    color: #8B5CF6;

}



.daily-card-info p {

    color: #555;

    font-size: 0.95rem;

    margin-bottom: 1em;

}



.read-more-link {

    color: #8B5CF6;

    font-weight: 600;

    font-size: 0.95rem;

    text-decoration: none;

    transition: color 0.25s ease;

}



.read-more-link:hover {

    color: #C9A84C;

}



/* Categories grid — full 12-item layout */

.categories-grid--full {

    grid-template-columns: repeat(4, 1fr);

    max-width: 1100px;

}



.cat-count {

    display: block;

    margin-top: 0.6em;

    font-size: 0.8rem;

    color: #999;

    font-weight: 600;

}



/* Popular Cards Section */

.popular-cards-section {

    padding: 4em 0;

    background: linear-gradient(135deg, rgba(45, 27, 105, 0.04), rgba(201, 168, 76, 0.02));

}



.popular-cards-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    max-width: 900px;

    margin: 0 auto;

    padding: 0 20px;

}



.popular-card-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-decoration: none;

    padding: 1.2em 0.8em;

    border-radius: 8px;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    background: #fff;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);

}



.popular-card-item:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 24px rgba(45, 27, 105, 0.12);

}



.popular-card-thumb {

    width: 100%;

    margin-bottom: 0.8em;

    border-radius: 6px;

    overflow: hidden;

}



.popular-card-thumb img {

    width: 100%;

    height: auto;

    border-radius: 6px;

}



.popular-card-name {

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: 1rem;

    font-weight: 600;

    color: #2D1B69;

    text-align: center;

}



/* Dream Highlights */

.dream-highlights-section {

    padding: 4em 0;

    background: linear-gradient(135deg, #1A1025 0%, #2D1B69 50%, #1A1025 100%);

}



.dream-highlights-section .section-title {

    color: #E8E0F0;

}



.dream-highlights-section .section-subtitle {

    color: rgba(232, 224, 240, 0.6);

}



.dream-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 16px;

    max-width: 900px;

    margin: 0 auto;

    padding: 0 20px;

}



.dream-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    padding: 1.2em 0.8em;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.05);

    border: 1px solid rgba(201, 168, 76, 0.12);

    text-decoration: none;

    transition: background 0.3s ease, transform 0.3s ease;

}



.dream-item:hover {

    background: rgba(201, 168, 76, 0.08);

    transform: translateY(-3px);

}



.dream-icon {

    font-size: 1.8rem;

    line-height: 1;

}



.dream-label {

    font-size: 0.85rem;

    color: #E8D5A0;

    font-weight: 600;

    text-align: center;

}



.dream-highlights-section .read-more-link {

    color: #C9A84C;

}



/* Popular Spreads Section */

.spreads-section {

    padding: 4em 0;

    background: #FAF8F5;

}



.spreads-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    max-width: 1000px;

    margin: 0 auto;

    padding: 0 20px;

}



.spread-card {

    background: #fff;

    border-radius: 8px;

    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.spread-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 24px rgba(45, 27, 105, 0.12);

}



.spread-card-image img {

    width: 100%;

    aspect-ratio: 16/9;

    object-fit: cover;

}



.spread-card-body {

    padding: 1.2em;

}



.spread-card-body h3 {

    font-size: 1.05rem;

    margin-bottom: 0.4em;

    border-left: none;

    padding-left: 0;

}



.spread-card-body h3 a {

    color: #2D1B69;

    text-decoration: none;

}



.spread-card-body h3 a:hover {

    color: #8B5CF6;

}



.spread-card-body p {

    font-size: 0.88rem;

    color: #666;

    margin: 0;

}



/* Homepage FAQ Section */

.home-faq-section {

    padding: 4em 0;

    background: rgba(45, 27, 105, 0.02);

}



.faq-list {

    max-width: 750px;

    margin: 0 auto;

    padding: 0 20px;

}



.faq-item {

    border-bottom: 1px solid rgba(45, 27, 105, 0.08);

    padding: 0;

}



.faq-item summary {

    padding: 1.2em 0;

    font-weight: 600;

    font-size: 1.05rem;

    color: #2D1B69;

    cursor: pointer;

    list-style: none;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: color 0.25s ease;

}



.faq-item summary::-webkit-details-marker {

    display: none;

}



.faq-item summary::after {

    content: '+';

    font-size: 1.4rem;

    color: #C9A84C;

    font-weight: 300;

    transition: transform 0.3s ease;

    flex-shrink: 0;

    margin-left: 1em;

}



.faq-item[open] summary::after {

    content: '−';

}



.faq-item summary:hover {

    color: #8B5CF6;

}



.faq-item p {

    padding: 0 0 1.2em;

    color: #555;

    font-size: 0.95rem;

    line-height: 1.7;

}



.faq-item p a {

    color: #8B5CF6;

    font-weight: 600;

}



/* Hero to sections transition */

.hero-section + .stats-bar + .daily-card-section + .featured-categories,

.hero-section + .featured-categories {

    position: relative;

}



.hero-section + .featured-categories::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 60px;

    background: linear-gradient(to bottom, rgba(26, 16, 37, 0.06), transparent);

    pointer-events: none;

}



/* Featured Categories */



.featured-categories {

    padding: 4.5em 0;

    background: #FAF8F5;

}



.section-title {

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: 2rem;

    text-align: center;

    color: #2D1B69;

    margin-bottom: 1.5em;

    border-bottom: none;

    border-left: none;

    padding-left: 0;

}



.categories-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    max-width: 1000px;

    margin: 0 auto;

    padding: 0 20px;

}



.category-card {

    background: #fff;

    border-radius: 8px;

    padding: 2em 1.5em;

    text-align: center;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    border-top: 3px solid #C9A84C;

    cursor: pointer;

}



.category-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 8px 24px rgba(45, 27, 105, 0.12);

}



.category-card .cat-icon {

    font-size: 2.4rem;

    margin-bottom: 0.5em;

    display: block;

    filter: drop-shadow(0 2px 4px rgba(45, 27, 105, 0.15));

}



.category-card h3 {

    font-size: 1.2rem;

    margin-bottom: 0.4em;

    margin-top: 0;

    border-left: none;

    padding-left: 0;

}



.category-card h3 a {

    color: #2D1B69;

    text-decoration: none;

}



.category-card h3 a:hover {

    color: #8B5CF6;

}



.category-card p {

    font-size: 0.9rem;

    color: #666;

    margin-bottom: 0;

}



/* Latest Posts Section */



.latest-posts-section {

    padding: 3.5em 0 4em;

    background: rgba(45, 27, 105, 0.02);

}



/* About Elena Section */



.about-section {

    padding: 4.5em 0;

    background: linear-gradient(135deg, rgba(45, 27, 105, 0.04), rgba(201, 168, 76, 0.03));

    position: relative;

}



.about-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.3), transparent);

}



.about-inner {

    max-width: 700px;

    margin: 0 auto;

    text-align: center;

    padding: 0 20px;

}



.about-inner h2 {

    border-bottom: none;

    border-left: none;

    padding-left: 0;

    margin-top: 0;

    position: relative;

    display: inline-block;

}



.about-inner h2::after {

    content: '';

    display: block;

    width: 60px;

    height: 2px;

    background: #C9A84C;

    margin: 0.4em auto 0;

}



.about-inner p {

    font-size: 1.05rem;

    color: #555;

}



/* CTA Section */



.cta-section {

    background: #2D1B69;

    padding: 4.5em 20px;

    text-align: center;

    position: relative;

}



.cta-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(to right, transparent, rgba(201, 168, 76, 0.4), transparent);

}



.cta-section h2 {

    color: #E8E0F0;

    font-size: 2rem;

    margin-bottom: 0.4em;

    border-bottom: none;

    border-left: none;

    padding-left: 0;

    margin-top: 0;

}



.cta-section p {

    color: rgba(232, 224, 240, 0.85);

    font-size: 1.05rem;

    margin-bottom: 1.5em;

}



/* CTA secondary button style */

.cta-section .hero-cta {

    background: transparent;

    color: #C9A84C;

    border: 2px solid #C9A84C;

    box-shadow: none;

}



.cta-section .hero-cta:hover {

    background: #C9A84C;

    color: #1A1025;

    box-shadow: 0 4px 15px rgba(201, 168, 76, 0.3);

}



/* ==========================================================================

   Footer

   ========================================================================== */



.site-footer {

    background-color: #1A1025;

    color: #E8E0F0;

    padding: 3.5em 0 0;

}



.footer-inner {

    display: grid;

    grid-template-columns: 1.2fr 1fr 1fr;

    gap: 40px;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px 3em;

}



.footer-col h4 {

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: 1.15rem;

    color: #C9A84C;

    margin-bottom: 1em;

    margin-top: 0;

    border-left: none;

    padding-left: 0;

}



.footer-col p {

    font-size: 0.9rem;

    color: rgba(232, 224, 240, 0.7);

    line-height: 1.7;

}



.footer-col ul {

    list-style: none;

    padding: 0;

    margin: 0;

}



.footer-col ul li {

    margin-bottom: 0.5em;

}



.footer-col ul li a {

    color: rgba(232, 224, 240, 0.7);

    font-size: 0.9rem;

    transition: color 0.25s ease;

    text-decoration: none;

}



.footer-col ul li a:hover {

    color: #C9A84C;

}



.footer-bottom {

    border-top: 1px solid rgba(232, 224, 240, 0.1);

    padding: 1.5em 20px;

    text-align: center;

    font-size: 0.82rem;

    color: rgba(232, 224, 240, 0.6);

}



/* ==========================================================================

   Search

   ========================================================================== */



.search-form {

    display: flex;

    max-width: 500px;

    margin: 0 auto;

}



.search-form .search-field {

    flex: 1;

    padding: 12px 16px;

    border: 2px solid rgba(45, 27, 105, 0.15);

    border-right: none;

    border-radius: 6px 0 0 6px;

    font-family: 'Source Sans 3', sans-serif;

    font-size: 1rem;

    color: #2C2C2C;

    background: #fff;

    outline: none;

    transition: border-color 0.25s ease;

}



.search-form .search-field:focus {

    border-color: #8B5CF6;

}



.search-form .search-submit {

    padding: 12px 20px;

    background-color: #2D1B69;

    color: #E8E0F0;

    border: 2px solid #2D1B69;

    border-radius: 0 6px 6px 0;

    font-family: 'Source Sans 3', sans-serif;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition: background-color 0.25s ease;

}



.search-form .search-submit:hover {

    background-color: #3d2880;

}



/* 404 Page */



.error-404-content {

    text-align: center;

    padding: 5em 20px;

    max-width: 600px;

    margin: 0 auto;

}



.error-404-content .error-icon {

    font-size: 4rem;

    margin-bottom: 0.3em;

    display: block;

}



.error-404-content h1 {

    font-size: 2rem;

    margin-bottom: 0.5em;

}



.error-404-content p {

    font-size: 1.1rem;

    color: #555;

    margin-bottom: 1.5em;

}



.error-404-content .popular-links {

    margin-top: 2em;

    text-align: left;

    max-width: 350px;

    margin-left: auto;

    margin-right: auto;

}



.error-404-content .popular-links h3 {

    font-size: 1.1rem;

    margin-bottom: 0.6em;

    margin-top: 0;

    border-left: none;

    padding-left: 0;

}



.error-404-content .popular-links ul {

    list-style: none;

    padding: 0;

}



.error-404-content .popular-links li {

    margin-bottom: 0.4em;

}



.error-404-content .popular-links a {

    color: #8B5CF6;

    font-size: 0.95rem;

}



/* Back link */



.back-to-category {

    max-width: 720px;

    margin: 2em auto 3em;

    padding: 0.8em 1.2em;

    font-size: 0.92rem;

    background: rgba(45, 27, 105, 0.03);

    border-radius: 6px;

    display: inline-block;

}



.back-to-category a {

    color: #8B5CF6;

    font-weight: 600;

    text-decoration: none;

    transition: color 0.25s ease, padding-left 0.2s ease;

}



.back-to-category a:hover {

    color: #C9A84C;

    padding-left: 4px;

}



/* Back-to-category wrapper for centering */

.entry-content + .back-to-category,

article > .back-to-category {

    display: block;

    max-width: 720px;

    margin-left: auto;

    margin-right: auto;

    padding-left: 20px;

}



/* ==========================================================================

   Responsive — Mobile First Adjustments

   ========================================================================== */



@media (max-width: 1024px) {

    .posts-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

    }



    .related-posts-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 20px;

    }



    .categories-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .categories-grid--full {

        grid-template-columns: repeat(3, 1fr);

    }



    .popular-cards-grid {

        grid-template-columns: repeat(4, 1fr);

    }



    .dream-grid {

        grid-template-columns: repeat(5, 1fr);

    }



    .spreads-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    .footer-inner {

        grid-template-columns: 1fr 1fr;

        gap: 30px;

    }

}



@media (max-width: 768px) {

    /* Header / Nav */

    .menu-toggle {

        display: flex;

    }



    .primary-nav {

        display: none;

        position: absolute;

        top: 64px;

        left: 0;

        right: 0;

        background-color: #2D1B69;

        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);

        padding: 16px 20px;

    }



    .primary-nav.is-open {

        display: block;

    }



    .primary-nav ul {

        flex-direction: column;

        gap: 0;

    }



    .primary-nav a {

        padding: 12px 16px;

        border-bottom: 1px solid rgba(232, 224, 240, 0.08);

    }



    /* Typography */

    h1 { font-size: 1.8rem; }

    h2 { font-size: 1.5rem; }

    h3 { font-size: 1.2rem; }



    .article-header h1 {

        font-size: 2rem;

    }



    .hero-content h1 {

        font-size: 2.2rem;

    }



    /* Grids */

    .posts-grid,

    .related-posts-grid {

        grid-template-columns: 1fr;

        gap: 18px;

    }



    .categories-grid {

        grid-template-columns: 1fr;

        gap: 16px;

    }



    .categories-grid--full {

        grid-template-columns: repeat(2, 1fr);

    }



    /* Stats bar */

    .stats-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 16px;

    }



    .stat-number {

        font-size: 1.8rem;

    }



    /* Daily card stacks */

    .daily-card {

        flex-direction: column;

        text-align: center;

    }



    .daily-card-image {

        width: 100%;

        max-width: 300px;

    }



    /* Popular cards */

    .popular-cards-grid {

        grid-template-columns: repeat(2, 1fr);

    }



    /* Dreams */

    .dream-grid {

        grid-template-columns: repeat(3, 1fr);

    }



    /* Spreads */

    .spreads-grid {

        grid-template-columns: 1fr;

    }



    /* Footer */

    .footer-inner {

        grid-template-columns: 1fr;

        gap: 24px;

    }



    /* Hero */

    .hero-section {

        padding: 3em 20px;

    }



    .hero-buttons {

        flex-direction: column;

        align-items: center;

    }



    /* Entry content */

    .entry-content {

        font-size: 1rem;

    }



    /* Sections */

    .featured-categories,

    .latest-posts-section,

    .about-section,

    .daily-card-section,

    .popular-cards-section,

    .dream-highlights-section,

    .spreads-section,

    .home-faq-section {

        padding: 3em 0;

    }



    /* Article meta */

    .article-meta {

        flex-direction: column;

        align-items: center;

        gap: 4px;

    }



    .article-meta .meta-item + .meta-item::before {

        display: none;

    }



    /* Author bio stacks on mobile */

    .author-bio {

        flex-direction: column;

        align-items: center;

        text-align: center;

    }



    /* FAQ section */

    .faq-section {

        padding: 0;

    }

}



/* ==========================================================================

   Utility Classes

   ========================================================================== */



.screen-reader-text {

    clip: rect(1px, 1px, 1px, 1px);

    position: absolute;

    height: 1px;

    width: 1px;

    overflow: hidden;

    word-wrap: normal;

}



.screen-reader-text:focus {

    display: block;

    top: 5px;

    left: 5px;

    width: auto;

    height: auto;

    padding: 15px 23px 14px;

    font-size: 1rem;

    font-weight: 700;

    z-index: 100000;

    clip: auto;

}



/* No thumbnail placeholder */

.card-image--placeholder {

    aspect-ratio: 16/9;

    background: linear-gradient(135deg, rgba(45, 27, 105, 0.08), rgba(201, 168, 76, 0.08));

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 2.5rem;

    color: rgba(45, 27, 105, 0.15);

}