/*
Theme Name: Autopost Theme
Theme URI: https://autopost.dev/
Author: Seneka
Author URI: https://seneka.me/
Description: A simple, fast, and minimalist blog theme designed for Autopost AI Editorial Team. Mobile-first.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aptheme
Tags: blog, one-column, custom-menu, featured-images, theme-options, translation-ready, accessibility-ready

*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
# Base & Reset
# Layout
# Content
  ## General Content
  ## Buttons
  ## Single Post / Page Content
  ## Post Tags
  ## Images within Content
# Archive / Index (Post Cards)
# Pagination
# Load More Button
# Page Templates
  ## Page Hero
  ## Page Content Adjustments
# Gutenberg Blocks
  ## Latest Posts
# Utilities
  ## Scroll to Top Button
  ## Core WP Classes
  ## Accessibility
# Category Archive Specifics
# 404 Page
# Media Queries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
    --header-total-height: 120px;
    --header-bg: #fff;
    --header-border-color: #eee;
    --header-top-bar-bg: #ffffff;
    --text-color: #333;
    --link-color: #555;
    --link-hover-color: #000;
    --nav-tag-bg: #f5f5f5;
    --light-bg: #f5f5f5;
    --nav-tag-text: #555;
    --nav-tag-hover-bg: #eee;
    --primary-accent: #000000;
    --secondary-accent: #e2e2e2;
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --panel-width: 300px;
    --panel-bg: #1a1a1a;
    --panel-text-color: #e0e0e0;
    --panel-link-hover-bg: rgba(255, 255, 255, 0.1);
}

/*--------------------------------------------------------------
# Base & Reset
--------------------------------------------------------------*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape */
    font-family: sans-serif;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    line-height: 1.6;
    color: var(--text-color);
    background-color: #fff;
    overflow-x: hidden; /* Prevent horizontal scroll due to panel */
}

/* Fondo degradado sutil */
body {
  background: radial-gradient(ellipse 60% 40% at 20% 0%, #f7eaea 60%, #fff 100%),
              radial-gradient(ellipse 40% 20% at 80% 0%, #e5eaf2 10%, transparent 80%),
              radial-gradient(ellipse 30% 15% at 60% 10%, #e5eaf2 10%, transparent 80%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Helper classes for JS */
body.primary-menu-panel-open {
    /* overflow: hidden;  <- Remove this line */
}

body.primary-menu-panel-open .panel-overlay {
    opacity: 1;
    visibility: visible;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
.site {
    /* No specific styles needed for the main wrapper unless for background */
}

.site-container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.site-main {
    /* No styles needed yet if it's just a single column */
}

#content.site-content {
    padding-top: 1rem; /* Space above content if header isn't sticky */
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
/* Header styles moved to assets/css/header-style.css */

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/

/* ## General Content */
article {
    margin-bottom: 3rem;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 2rem;
}

article:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.entry-header {
    margin-bottom: 1rem;
}

.entry-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.entry-title a {
    text-decoration: none;
    color: inherit;
}

/* ## Entry Meta (Consolidated & Refined) */

/* --- Base Meta Styles --- */
.entry-meta {
    font-size: 0.85rem; /* Base size */
    color: #555;       /* Base color */
}

.entry-meta .meta-sep {
    display: none; /* Hide separator spans globally */
}

.entry-meta a {
    color: #555; /* Default link color */
    text-decoration: none;
}

.entry-meta a:hover {
    color: var(--primary-accent); /* Default link hover color */
}

/* --- Single Post Meta --- */
.entry-single .entry-meta {
    font-size: 0.9rem;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 15px; /* Space above meta on single posts */
}

/* Keep the specific link color, but add underline on hover */
.entry-single .entry-meta a {
    color: #555;
}
.entry-single .entry-meta a:hover {
    color: var(--primary-accent); /* Inherited, but explicit for clarity */
    text-decoration: underline;
}

/* --- Post Card Meta --- */

/* Author Meta */
.post-card .entry-meta-author {
    margin-top: 0.5rem; /* Space below card header */
    margin-bottom: 1rem; /* Space above card summary */
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.85rem; /* Use base size */
    color: #555; /* Use base color */
}

.post-card .entry-meta-author .autopost-meta-avatar {
     width: 24px;
     height: 24px;
     border-radius: 50%;
}

.post-card .entry-meta-author .byline a {
    color: #555; /* Use base link color */
    font-weight: 500;
    text-decoration: none; /* Explicitly none */
}
.post-card .entry-meta-author .byline a:hover {
    color: var(--primary-accent); /* Use base link hover color */
    text-decoration: none; /* Explicitly none */
}

/* Bottom Meta (Date & Read More Container) */
.post-card .entry-meta-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem; /* Use base size */
}

.post-card .entry-meta-bottom .posted-on {
    color: #555; /* Use base color */
}

/* Ensure .byline itself has styles if needed outside of meta */
.byline {
    display: inline-flex; /* Changed from flex to inline-flex if needed standalone */
    align-items: center; /* Added for potential vertical alignment */
    /* margin-right: 1em; <- Removed, seems specific to single post context */
}

/* ## Entry Content Styles */
.entry-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #111;
}

.entry-content a {
    color: var(--primary-accent);
    text-decoration: underline;
}
.entry-content a:hover {
    color: var(--secondary-accent);
}

/* Headings within content */
.entry-content h1 {
    font-size: 1.8em;
    margin-bottom: 1em;
    line-height: 1.3;
}

.entry-single .entry-content h2,
.page .entry-content h2 {
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
}

.entry-content h3 {
    font-size: 1.3em;
    line-height: 1.4;
}

.entry-content p,
.page-content p,
p,
.entry-content ul,
.page-content ul,
ul,
.entry-content ol,
.page-content ol,
ol
{
    margin-bottom: 1.5em;
}

/* Specific heading adjustments for single/page */
.entry-single .entry-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    color: #111;
}

.entry-single .entry-featured-image,
.page-featured-image { /* Combine page featured image */
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    line-height: 0;
}

/* Specific max-width for single post featured image */
.entry-single .entry-featured-image {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}


.entry-single .entry-featured-image img,
.page-featured-image img {
    display: block;
    width: 100%;
    height: auto;
}

.entry-single .entry-content,
.page .entry-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-color);
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Remove default margins from direct children within single/page content */
.entry-single .entry-content > *:first-child,
.page .entry-content > *:first-child {
    margin-top: 0;
}
.entry-single .entry-content > *:last-child,
.page .entry-content > *:last-child {
    margin-bottom: 0;
}

/* ## Post Tags */
.entry-single .post-tags {
    font-size: 0.9rem;
}

.entry-single .tags-title {
    font-weight: 600;
    margin-right: 0.5em;
    color: #555;
}

.entry-single .post-tags a {
    display: inline-block;
    text-decoration: none;
    color: #fff; /* White text */
    background-color: var(--primary-accent); /* Primary accent background */
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    margin-right: 0.5em;
    margin-bottom: 0.5em; /* Spacing if wraps */
    border: none;
}

.entry-single .post-tags a:hover {
    background-color: var(--secondary-accent);
    color: #fff;
}

/* ## Images within Content */
.entry-content img,
.entry-single .entry-content img,
.page .entry-content img {
    border-radius: 8px;
    margin-bottom: 1.5em; /* Space below images */
    margin-top: 1.5em; /* Add space above images */
    height: auto; /* Ensure aspect ratio is maintained */
}

.entry-content figure,
.entry-single .entry-content figure,
.page .entry-content figure {
    margin: 0 0 1.5em 0; /* Match paragraph bottom margin */
    display: block; /* Ensure it behaves like a block element */
    max-width: 100%; /* Ensure figure doesn't exceed container width */
    height: auto;
    /* Optional: Add padding or border if needed */
}

.entry-content figure.alignleft,
.entry-single .entry-content figure.alignleft,
.page .entry-content figure.alignleft {
    margin-right: 1.5em;
}

.entry-content figure.alignright,
.entry-single .entry-content figure.alignright,
.page .entry-content figure.alignright {
    margin-left: 1.5em;
}

.entry-content figure.aligncenter,
.entry-single .entry-content figure.aligncenter,
.page .entry-content figure.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.entry-content figcaption,
.entry-single .entry-content figcaption,
.page .entry-content figcaption {
    margin-top: 0.5em; /* Space between image and caption */
    font-size: 0.9em; /* Slightly smaller text */
    color: #666; /* A softer color for captions */
    text-align: center; /* Center the caption text */
    font-style: italic; /* Optional: make caption italic */
    line-height: 1.4;
}

.wp-caption {
    margin-bottom: 1.5em; /* Match paragraph bottom margin */
    max-width: 100%; /* Ensure caption container doesn't exceed content width */
    height: auto;
    /* Optional: Add border or background if needed */
    /* border: 1px solid #ddd; */
    /* background-color: #f9f9f9; */
    /* padding: 5px; */
}

.wp-caption img {
    margin: 0; /* Remove default image margin within caption */
    padding: 0;
    border: 0;
    display: block; /* Ensure image takes full width */
    max-width: 100%;
    height: auto;
}

.wp-caption-text {
    margin-top: 0.5em; /* Space between image and caption */
    font-size: 0.9em; /* Slightly smaller text */
    color: #666; /* A softer color for captions */
    text-align: center; /* Center the caption text */
    font-style: italic; /* Optional: make caption italic */
    line-height: 1.4;
    padding: 0 4px 5px;
}

/*--------------------------------------------------------------
# Archive / Index (Post Cards)
--------------------------------------------------------------*/
.posts-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 column */
    gap: 2rem;
}

.post-card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column; /* Stack image and content vertically */
    margin-bottom: 0; /* Explicitly remove bottom margin */
    padding-bottom: 0; /* Explicitly remove bottom padding */
}

.post-card:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

.post-card-thumbnail {
    line-height: 0; /* Remove space below image */
    /* Assuming fixed height or aspect ratio for images */
    height: 200px; /* Example fixed height */
    overflow: hidden;
}

.post-card-thumbnail img {
    width: 100%;
    height: 100%; /* Fill the container */
    object-fit: cover; /* Crop image nicely */
    display: block;
}

.post-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allow content area to grow */
    position: relative; /* Needed for absolute positioning of category tag */
}

/* Category Tag Style - Positioned relative to post-card-content */
.post-card-category {
    display: inline-block;
    background-color: var(--secondary-accent);
    color: #000; /* Black text on accent */
    padding: 0.3rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 15px;
    text-decoration: none;
    position: absolute; 
    top: -12px; /* Pull slightly above the content padding */
    left: 1.5rem; /* Align with content padding */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    z-index: 2; /* Ensure it's above the thumbnail if overlapping slightly */
}

.post-card-category:hover {
    background-color: var(--primary-accent); /* Use primary on hover */
    color: #000;
}

.post-card .entry-header {
    margin-bottom: 0; /* Remove bottom margin as author meta adds space */
    margin-top: 0.75rem; /* Add space below category tag */
    align-items: center;
}

.post-card .entry-title {
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

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

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

.post-card .entry-summary {
    margin-bottom: 1rem;
    flex-grow: 1; /* Allow summary to take up space */
    color: #555;
    font-size: 0.95rem;
}

.post-card .entry-summary p:last-child {
    margin-bottom: 0;
}

.post-card .entry-footer {
    margin-top: auto; /* Push footer to the bottom */
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
    font-size: 0.85rem;
}

.post-card .read-more-link {
    text-decoration: none;
    color: var(--primary-accent);
    font-weight: 600;
    transition: color 0.2s ease-in-out;
}

.post-card .read-more-link:hover {
    color: var(--secondary-accent);
}

/* Responsive Grid Columns */
@media (min-width: 768px) {
    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .posts-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

/* Related Posts Grid - Image Style (Ensure it uses card style) */
.related-posts-grid .post-card-thumbnail img {
    width: 100%;
    height: 100%; /* Fill the container */
    object-fit: cover; /* Crop image nicely */
    border-bottom: none; /* Remove extra border if using card structure */
    display: block;
}

/*--------------------------------------------------------------
# Pagination
--------------------------------------------------------------*/
.navigation.pagination {
    margin-top: 3rem;
    margin-bottom: 2rem;
    font-size: 1rem;
}

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

.nav-links .page-numbers {
    display: inline-block;
    padding: 0.5em 1em;
    min-width: 40px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: var(--link-color);
    background-color: #fff;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
    background-color: var(--primary-accent);
    color: #000; /* Black text on accent */
    border-color: var(--primary-accent);
}

.nav-links .page-numbers.current {
    font-weight: 600;
}

.nav-links .dots {
    padding: 0.5em 0.5em;
    border: none;
    background: none;
}

.nav-links .prev,
.nav-links .next {
    /* Optionally style prev/next differently */
}

/*--------------------------------------------------------------
# Load More Button
--------------------------------------------------------------*/
.load-more-container {
    text-align: center;
    margin-top: 2rem; /* Increased top margin for the line wrapper */
    margin-bottom: 2rem;
}

/* Remove the old separator styles */
/* .load-more-separator { ... } */
/* .load-more-line { ... } */

.load-more-line-wrapper {
    display: flex;
    align-items: center;
    text-align: center;
    margin-bottom: 0.75rem; /* Space between line/text and status messages */
}

.load-more-line-wrapper::before,
.load-more-line-wrapper::after {
    content: '';
    flex-grow: 1;
    background-color: #e0e0e0; /* Lighter, subtle grey for the line */
    height: 1px;
}

.load-more-text { /* This is the span with id="load-more-posts" */
    display: inline-block;
    padding: 0 15px; /* Horizontal padding to create space from the lines */
    font-size: 0.9rem; /* Slightly smaller if desired, or keep 1rem */
    font-weight: 600;
    color: #757575; /* Lighter grey text, ensure contrast (WCAG AA: 4.5:1 for normal text) */
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    border: 1px solid transparent; /* For focus outline consistency */
    background-color: #fff; /* Match page background to sit "on" the line */
    position: relative; /* To ensure it's above pseudo-elements if they overlap */
    z-index: 1;
}

.load-more-text:hover,
.load-more-text:focus {
    color: var(--primary-accent);
    outline: 2px solid var(--primary-accent);
    outline-offset: 2px;
}

.loading-status,
.error-status {
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.loading-status {
    color: #555; /* Neutral color for loading text */
}

.error-status {
    color: #c00; /* Standard error color */
    font-weight: bold;
}

/* Styles for when the old button was disabled, if #load-more-posts (now a div) needs similar states */
/* For example, if you wanted to visually indicate it's busy beyond just hiding it */
/* .load-more-text[aria-busy="true"] { ... } */

/*--------------------------------------------------------------
# Page Templates
--------------------------------------------------------------*/

/* ## Page Hero */
.page-hero-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 0 0 0;
    width: 100%;
    text-align: center;
}

.page-hero-header .entry-title {
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-color);
    margin: 0 auto 1.5rem auto;
    max-width: 900px;
}

.scroll-down-indicator {
    display: none; /* Hide the scroll indicator */
    /* animation: simple-bounce 2s infinite; Remove animation */
}

/* Remove bounce animation */
@keyframes simple-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.8; }
    50% { transform: translateY(8px); opacity: 1; }
}

/* ## Page Content Adjustments */
.entry-page {
    padding-top: 0; /* Reset padding potentially added elsewhere */
    padding-bottom: 3rem;
}

/* Combined with single post featured image styles */
/* .page-featured-image { ... } */

.entry-comments {
    margin-top: 3rem; /* Space before comments section */
}

/* Responsive Page Title Sizes */
@media (min-width: 768px) {
    .page-hero-header .entry-title {
        font-size: 3.5rem;
    }
}

@media (min-width: 1200px) {
    .page-hero-header .entry-title {
        font-size: 4.2rem;
    }
}

/*--------------------------------------------------------------
# Gutenberg Blocks
--------------------------------------------------------------*/

/* ## Latest Posts */
/* Make the block wrapper behave like our grid container */
.wp-block-latest-posts ul.wp-block-latest-posts__list.is-grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile: 1 column */
    gap: 2rem; /* Match custom grid gap */
    list-style: none;
    padding: 0;
    margin: 0; /* Reset WP default margin */
}

/* Style the list items (li) like our post-card */
.wp-block-latest-posts ul.wp-block-latest-posts__list li {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding: 0;
}

.wp-block-latest-posts ul.wp-block-latest-posts__list li:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}

/* Featured Image wrapper */
.wp-block-latest-posts ul.wp-block-latest-posts__list li .wp-block-latest-posts__featured-image {
    line-height: 0;
    margin: 0;
    order: 0; /* Image first */
    height: 200px; /* Match card image height */
    overflow: hidden;
}

.wp-block-latest-posts ul.wp-block-latest-posts__list li .wp-block-latest-posts__featured-image a,
.wp-block-latest-posts ul.wp-block-latest-posts__list li .wp-block-latest-posts__featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Inner content padding */
.wp-block-latest-posts ul.wp-block-latest-posts__list li > a.wp-block-latest-posts__post-title,
.wp-block-latest-posts ul.wp-block-latest-posts__list li > .wp-block-latest-posts__post-author,
.wp-block-latest-posts ul.wp-block-latest-posts__list li > time.wp-block-latest-posts__post-date,
.wp-block-latest-posts ul.wp-block-latest-posts__list li > .wp-block-latest-posts__post-excerpt {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Title */
.wp-block-latest-posts ul.wp-block-latest-posts__list li > a.wp-block-latest-posts__post-title {
    padding-top: 1.5rem;
    font-size: 1.4rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    order: 1;
}

.wp-block-latest-posts ul.wp-block-latest-posts__list li > a.wp-block-latest-posts__post-title:hover {
    color: var(--primary-accent);
}

/* Author */
.wp-block-latest-posts ul.wp-block-latest-posts__list li > .wp-block-latest-posts__post-author {
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 0.75rem;
    order: 2;
}

/* Excerpt */
.wp-block-latest-posts ul.wp-block-latest-posts__list li .wp-block-latest-posts__post-excerpt {
    margin-bottom: 1rem;
    flex-grow: 1;
    color: #555;
    font-size: 0.95rem;
    order: 3;
}

.wp-block-latest-posts ul.wp-block-latest-posts__list li .wp-block-latest-posts__post-excerpt p:last-child {
    margin-bottom: 0;
}

/* Date */
.wp-block-latest-posts ul.wp-block-latest-posts__list li time.wp-block-latest-posts__post-date {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    margin-top: auto;
    border-top: 1px solid #f0f0f0;
    font-size: 0.85rem;
    color: #555;
    order: 4;
}

/* Responsive Columns for Latest Posts Block - Target the UL */
@media (min-width: 768px) {
    .wp-block-latest-posts ul.wp-block-latest-posts__list.is-grid,
    .wp-block-latest-posts[style*="columns: 2"] ul.wp-block-latest-posts__list {
        grid-template-columns: repeat(2, 1fr) !important; /* Override inline styles */
    }
}

@media (min-width: 1200px) {
    .wp-block-latest-posts ul.wp-block-latest-posts__list.is-grid,
    .wp-block-latest-posts[style*="columns: 3"] ul.wp-block-latest-posts__list {
        grid-template-columns: repeat(3, 1fr) !important; /* Override inline styles */
        gap: 2.5rem !important;
    }
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* ## Scroll to Top Button */
#scrollToTopBtn {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--primary-accent);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 20%;
    font-size: 18px;
    line-height: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, opacity 0.3s, visibility 0.3s;
}

#scrollToTopBtn:hover {
    background-color: rgba(0, 0, 0, 0.9);
}

/* ## Core WP Classes */
.alignwide {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
}

/* Add styles for centered content */
.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ## Accessibility */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/*--------------------------------------------------------------
# Category Archive Specifics
--------------------------------------------------------------*/
.category-header {
    margin-bottom: 2rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #eee;
}

.category-title {
    margin-bottom: 0.5rem;
    font-size: 2rem;
    font-weight: 600;
}

.category-description {
    font-size: 1rem;
    color: #555;
    max-width: 70ch;
}

/* Responsive Adjustments for Category Header */
@media (min-width: 768px) {
    .category-title {
        font-size: 2.5rem;
    }
     .category-description {
        font-size: 1.1rem;
    }
}

@media (min-width: 1024px) {
     .category-title {
        font-size: 3rem;
    }
}

/* Note: .posts-grid styles defined in Archive/Index section apply here too */

/*--------------------------------------------------------------
# 404 Page
--------------------------------------------------------------*/
.error-404 {
    padding: 3rem 0;
    margin-top: 2rem;
    margin-bottom: 3rem;
    text-align: center;
}

.error-404 .page-header {
    margin-bottom: 2rem;
    border-bottom: none;
}

.error-404 .not-found-header {
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 700;
    color: var(--primary-accent);
    margin-bottom: 1rem;
    line-height: 1.1;
}

.error-404 .not-found-message {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
}

.error-404 .page-content p {
    color: #555;
    margin-bottom: 1.5em;
    max-width: 65ch;
    margin-left: auto;
    margin-right: auto;
}

.error-404 .widget_recent_entries {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #eee;
    text-align: left;
}

.error-404 .widget-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 1rem;
}

.error-404 .widget_recent_entries ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.error-404 .widget_recent_entries li {
    margin-bottom: 0.75rem;
}

.error-404 .widget_recent_entries li:last-child {
    margin-bottom: 0;
}

.error-404 .widget_recent_entries a {
    text-decoration: none;
    color: var(--link-color);
    transition: color 0.2s ease;
}

.error-404 .widget_recent_entries a:hover {
    color: var(--primary-accent);
    text-decoration: underline;
}

.error-404 .return-home-link {
    margin-top: 2.5rem;
}

.error-404 .button.button-primary {
    padding: 12px 30px;
    font-size: 1rem;
    /* Uses default primary button styles */
}

/*--------------------------------------------------------------
# Media Queries
--------------------------------------------------------------*/
/* Header responsive styles moved to assets/css/header-style.css */

/* ## Single Post / Page Content Specifics */
.single .site-main,
.page .site-main {
    /* No extra spacing needed currently */
}

.entry-narrow-container {
    max-width: 720px; /* Narrow look container */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.entry-single .entry-header {
    /* This container is now inside entry-narrow-container if needed */
    /* text-align: center; <- Apply this to narrow container if header is inside */
    margin-bottom: 1.5rem;
}

.entry-single .entry-title {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    color: #111;
}

/* Meta styles are handled in the consolidated section */

/* Featured Image positioning */
.entry-single .entry-featured-image,
.page-featured-image { /* Combine page featured image */
    margin-top: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    line-height: 0;
    /* Max-width applied by entry-narrow-container if image is inside it */
}

/* Content container (already narrow via parent) */
.entry-single .entry-content,
.page .entry-content {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-color);
    /* Remove top/bottom margins if narrow container handles spacing */
    /* margin-top: 20px; */
    /* margin-bottom: 20px; */
}

/* Remove default margins from direct children within single/page content */
.entry-single .entry-content > *:first-child,
.page .entry-content > *:first-child {
    margin-top: 0;
}
.entry-single .entry-content > *:last-child,
.page .entry-content > *:last-child {
    margin-bottom: 0;
}

/* ## Post Tags */
.entry-single .post-tags { 
    font-size: 0.9rem;
}

.entry-single .tags-title {
    font-weight: 600;
    margin-right: 0.5em;
    color: #555;
}

.entry-single .post-tags a {
    display: inline-block;
    text-decoration: none;
    color: #fff; /* White text */
    background-color: var(--primary-accent); /* Primary accent background */
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    margin-right: 0.5em;
    margin-bottom: 0.5em; /* Spacing if wraps */
    border: none;
}

.entry-single .post-tags a:hover {
    background-color: var(--secondary-accent);
    color: #fff;
}

/* Rank Math Breadcrumbs Styling */
.rank-math-breadcrumb {
  font-size: 0.9em; /* Ligeramente más pequeño */
  color: #555; /* Gris oscuro */
  margin-bottom: 1.5em; /* Espacio debajo antes del título */
}

.rank-math-breadcrumb p {
  margin-bottom: 0; /* Eliminar margen inferior si Rank Math usa un párrafo */
}

.rank-math-breadcrumb a {
  color: #555; /* Gris oscuro para los enlaces */
}

.rank-math-breadcrumb a:hover {
  color: #1a1a1a; /* Gris más oscuro al pasar el ratón */
  text-decoration: underline;
}

/* Estilo para el separador (si es necesario ajustarlo) */
.rank-math-breadcrumb .separator {
  color: #555; /* Gris un poco más claro para el separador */
}

/* Single Post Category Tag Styling */
.entry-category-container {
  margin-top: 0.5rem; /* Space below title */
  margin-bottom: 1rem; /* Space above meta */
}

.entry-category-tag {
    display: inline-block;
    background-color: var(--secondary-accent); /* Use primary accent */
    color: #000; /* Black text for contrast */
    padding: 0.35rem 1rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 15px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.entry-category-tag:hover {
    background-color: var(--primary-accent);
    color: #fff;
}

/* Subcategory Section Styles */
.subcategory-section {
    margin-bottom: 2rem; /* Add some space below the subcategory section */
    padding: 0 var(--wp--style--root--padding-right) 0 var(--wp--style--root--padding-left); /* Align with site padding */
}

.subcategory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: 1.5rem; /* Space between cards */
}

@media (min-width: 768px) {
    .subcategory-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on larger screens */
    }
}

.subcategory-card {
    border-radius: 8px; /* Slightly rounded corners */
    background-color: var(--primary-accent);
    color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Ensure content respects border-radius */
    position: relative; /* Needed for the link overlay */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.subcategory-card:hover {
    transform: translateY(-5px); /* Subtle lift effect */
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
    background-color: var(--secondary-accent);
    color: #000;
}

.subcategory-link {
    display: block; /* Make link fill the card */
    padding: 1rem; /* Internal spacing */
    text-decoration: none;
    color: inherit; /* Inherit text color (white) */
    height: 100%; /* Ensure link covers full height */
    box-sizing: border-box; /* Include padding in height/width */
}

.subcategory-link:focus {
    outline: 2px solid var(--wp--preset--color--contrast); /* Accessibility focus style */
    outline-offset: 2px;
}

.subcategory-title {
    margin: 0;
    font-size: var(--wp--preset--font-size--medium); /* Adjust as needed */
    font-weight: 600;
}

/* Optional: If you want to ensure the card has a minimum height */
/*
.subcategory-card {
    min-height: 120px; // Adjust as needed
    display: flex; // Helps center content if needed
    align-items: center; // Vertically center
    justify-content: center; // Horizontally center
}
.subcategory-link {
    text-align: center; // Center text if using flex centering
}
*/

/*--------------------------------------------------------------
# AJAX Search Results
--------------------------------------------------------------*/
.header-search-container {
    position: relative; /* For positioning the results dropdown */
}

.ajax-search-results {
    position: absolute;
    top: 100%; /* Position below the search bar */
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    z-index: 1001; /* Above other header content */
    max-height: 400px;
    overflow-y: hidden;
    border-radius: 0 0 4px 4px;
}

.ajax-search-results ul.ajax-results-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ajax-search-results li.ajax-result-item {
    border-bottom: 1px solid #eee;
}
.ajax-search-results li.ajax-result-item:last-child {
    border-bottom: none;
}

.ajax-search-results li.ajax-result-item a {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align items */
    padding: 8px 20px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s ease;
}

.ajax-search-results li.ajax-result-item a:hover {
    background-color: #f5f5f5;
}

.ajax-search-results .ajax-result-thumbnail {
    width: 50px; /* Fixed width for thumbnail */
    height: 50px; /* Fixed height for thumbnail */
    object-fit: cover; /* Cover to maintain aspect ratio */
    margin-right: 10px;
    border-radius: 3px;
    background-color: #f0f0f0; /* Placeholder color if no image */
}

.ajax-search-results .ajax-result-title {
    font-size: 0.9rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ajax-search-results .ajax-all-results-link {
    display: block;
    padding: 10px 15px;
    text-align: center;
    font-weight: bold;
    color: var(--primary-accent);
    text-decoration: none;
    border-top: 1px solid #eee;
    background-color: #f9f9f9;
    transition: background-color 0.2s ease;
}

.ajax-search-results .ajax-all-results-link:hover {
    background-color: #f0f0f0;
}

.ajax-search-results .ajax-no-results {
    padding: 15px;
    text-align: center;
    color: #777;
    font-size: 0.9rem;
}

/* --- New Icon Expandable Search --- */
.icon-search-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Aligns toggle to the right */
}

.icon-search-toggle {
    background-color: transparent;
    border: none; /* Eliminamos el borde */
    color: var(--text-color, #333);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    flex-shrink: 0; /* Prevent shrinking if space is tight */
    z-index: 3; /* Above the form wrapper when collapsed */
}

.icon-search-toggle:hover,
.icon-search-toggle:focus {
    background-color: transparent; /* Fondo transparente en hover/focus */
    color: var(--primary-accent, #FFA500); /* Icono cambia a color de acento */
    outline: none;
}

.icon-search-toggle .search-svg-icon {
    width: 18px; /* Adjust icon size */
    height: 18px;
}

.icon-search-form-wrapper {
    position: absolute;
    right: 0; /* Align to the right of .icon-search-container */
    top: 50%;
    transform: translateY(-50%);
    height: 40px; /* Match toggle height */
    display: flex;
    flex-direction: column; /* Stack form and results */
    background-color: #fff;
    border-radius: 20px; /* For the expanded bar shape */
    box-shadow: inset 0 0 0 1px var(--border-color, #eee); /* Inset border */
    
    /* Initial collapsed state: effectively zero width, hidden */
    width: 40px; /* Start at icon width */
    opacity: 0;
    visibility: hidden;
    overflow: hidden; /* Important for transition */
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.2s ease-out 0.1s, 
                visibility 0s linear 0.35s; /* Delay visibility until end of collapse */
    z-index: 2;
}

/* NUEVO: Estilos para cuando los resultados de búsqueda están activos */
.icon-search-container.active .icon-search-form-wrapper.search-results-active {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: inset 0 1px 0 0 var(--border-color, #eee), /* Top */
                inset -1px 0 0 0 var(--border-color, #eee), /* Right */
                inset 1px 0 0 0 var(--border-color, #eee); /* Left */
                /* Bottom shadow omitted to create seamless connection with results */
}

.icon-search-container.active .icon-search-form-wrapper {
    width: 280px;
    opacity: 1;
    visibility: visible;
    overflow: visible; /* Allow child AJAX results to be visible */
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.25s ease-in 0.1s, 
                visibility 0s linear 0s;
}

.icon-search-form-wrapper .search-form {
    display: flex;
    align-items: center;
    height: 40px; /* Full height of the wrapper */
    padding-left: 15px; /* Space for text */
    padding-right: 45px; /* Space for the (now overlaid) icon area */
    flex-grow: 1;
}

.icon-search-form-wrapper .search-field {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    height: 100%;
    font-size: 0.9rem;
    background-color: transparent;
}

.icon-search-form-wrapper .search-submit-hidden {
    display: none; /* Hidden, form submits on Enter */
}

/* Adjust AJAX results to be positioned relative to the form wrapper */
.icon-search-form-wrapper .ajax-search-results {
    position: absolute; /* Relative to .icon-search-form-wrapper */
    top: 100%; /* Directly below the form */
    left: 0;
    width: 100%; /* Match the width of .icon-search-form-wrapper */
    background-color: #fff;
    border: 1px solid var(--border-color, #eee);
    border-top: none; /* Important for seamless look */
    border-radius: 0 0 20px 20px; /* Rounded bottom corners to match wrapper */
    z-index: 1; /* Below the form but above page content */
    display: none; /* Initially hidden, JS will show it */
}

/* Mobile Specific Styles */
@media (max-width: 767px) {
    .icon-search-container.active .icon-search-form-wrapper {
        height: 40px;
        border-radius: 20px;
    }

    .icon-search-container.active .icon-search-form-wrapper .search-form {
        height: 40px;           /* Coincide con la altura del wrapper */
        padding-left: 15px;
        padding-right: 45px;    /* Consistente con el escritorio */
    }
}

/* --- NUEVO: Ocultar el botón "x" de limpiar en input[type="search"] --- */
.search-field::-webkit-search-decoration,
.search-field::-webkit-search-cancel-button,
.search-field::-webkit-search-results-button,
.search-field::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}