/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Version: 1.4.0
*/

/* Force Full Width - Remove ALL constraints */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
    background-color: #f4f1ea;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #2c2c2c;
}

/* Remove WordPress default containers */
.wp-site-blocks,
.wp-block-group,
.wp-block-group__inner-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* Header Sections */
.site-branding {
    width: 100%;
    padding: 15px 20px !important;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #ddd;
    margin: 0 !important;
}

.site-branding h1,
.site-branding .wp-block-site-title {
    font-size: 42px !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    color: #2c5e1a !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700 !important;
    line-height: 1.1;
}

.site-branding .wp-block-site-title a {
    color: #2c5e1a !important;
    text-decoration: none;
}

.header-banner {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-banner img {
    display: block;
    width: 100% !important;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    margin: 0 !important;
}

/* Navigation Horizontal Bar */
.top-nav-group {
    background: #4a6a4a !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    max-width: none !important;
}

.top-nav-group .wp-block-group__inner-container {
    max-width: none !important;
}

.top-nav-group .wp-block-navigation {
    justify-content: center;
    margin: 0 !important;
}

.top-nav-group .wp-block-navigation a {
    color: #fff !important;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: bold;
    padding: 5px 20px !important;
    text-decoration: none;
}

/* Main Container - Force 100% */
.column-container-full {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 80vh;
}

.column-container-full>.wp-block-columns {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

/* =========================================
   global RESET & DEFAULT (MOBILE BASE)
   ========================================= */

/* Default: All columns represent a stacked block (Mobile Logic) */
.wp-block-column.sidebar-left,
.wp-block-column.main-column,
.wp-block-column.sidebar-right {
    width: 100%;
    /* No important here, let specific queries override */
    margin: 0;
    padding: 0;
}

/* Default: Widgets Wrapper Logic */
.tablet-widgets-manual-wrapper {
    /* Visible by default (Tablet/Mobile base) */
    display: block !important;
    border-bottom: 2px solid var(--arxaia-menu-bg, #6b9c6b);
    margin-bottom: 30px;
    padding-bottom: 20px;
}

.desktop-sidebar-widgets {
    display: block !important;
}

.mobile-top-widgets {
    display: none !important;
}

/* =========================================
   1. DESKTOP LAYOUT (min-width: 1251px)
   ========================================= */
@media (min-width: 1251px) {

    /* 3-Column Layout: 16.66% | 66.68% | 16.66% */
    .wp-block-column.sidebar-left {
        display: block !important;
        width: 16.66% !important;
        flex: 0 0 16.66% !important;
        background-color: #f9f7f0;
        padding: 15px !important;
        border-right: 2px solid #6b9c6b;
    }

    .wp-block-column.main-column {
        width: 66.68% !important;
        flex: 0 0 66.68% !important;
        background: #fff;
        padding: 25px 30px !important;
        border-right: none;
        /* Reset tablet border */
    }

    .wp-block-column.sidebar-right {
        display: block !important;
        width: 16.66% !important;
        flex: 0 0 16.66% !important;
        background-color: #f9f7f0;
        padding: 15px !important;
        border-left: 2px solid #6b9c6b;
    }

    /* Hide Tablet-Specific Widgets on Desktop */
    .tablet-widgets-manual-wrapper {
        display: none !important;
        height: 0 !important;
        visibility: hidden !important;
    }

    /* Protoselida Scale moved to UNIFIED STYLING section below */
}

/* Default: Tablet Widgets Area (in Right Sidebar) */
.tablet-widgets-container {
    display: block !important;
    border-bottom: 2px solid var(--arxaia-menu-bg, #6b9c6b);
    margin-bottom: 30px;
    padding-bottom: 20px;
}

/* DESKTOP override: Hide the tablet widgets */
@media (min-width: 1251px) {
    .tablet-widgets-container {
        display: none !important;
        height: 0 !important;
        visibility: hidden !important;
    }
}

/* =========================================
   2. TABLET LAYOUT (783px - 1250px)
   ========================================= */
@media (min-width: 783px) and (max-width: 1250px) {

    /* Force Row Layout */
    .column-container-full>.wp-block-columns {
        flex-wrap: nowrap !important;
        display: flex !important;
        align-items: stretch !important;
    }

    /* Hide Left Sidebar Completely */
    .wp-block-column.sidebar-left {
        display: none !important;
        width: 0 !important;
        flex: 0 0 0 !important;
    }

    /* Main Content: 72% */
    .wp-block-column.main-column {
        width: 72% !important;
        flex: 0 0 72% !important;
        background: #fff;
        padding: 20px !important;
        border-right: 1px solid #e0e0e0;
    }

    /* Right Sidebar: 28% */
    .wp-block-column.sidebar-right {
        display: block !important;
        width: 28% !important;
        flex: 0 0 28% !important;
        background-color: #f9f7f0;
        padding: 15px !important;
        overflow: visible !important;
    }

    /* EXTREME Visibility for Tablet Widgets Area */
    .tablet-widgets-container,
    .tablet-widgets-container * {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }

    .tablet-widgets-container {
        background-color: #e3f2fd !important;
        /* LIGHT BLUE TEST BACKGROUND */
        border: 2px dashed #2196f3 !important;
    }

    /* Protoselida Scale moved to UNIFIED STYLING section below */
}

/* =========================================
   3. MOBILE LAYOUT (max-width: 782px)
   ========================================= */
@media (max-width: 782px) {

    /* Stack everything */
    .column-container-full>.wp-block-columns {
        display: block !important;
        flex-wrap: wrap !important;
    }

    .wp-block-column.sidebar-left {
        display: none !important;
    }

    .wp-block-column.main-column {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
        border: none !important;
    }

    /* Hide Right Sidebar completely on Mobile */
    .wp-block-column.sidebar-right {
        display: none !important;
    }

    /* Mobile Widgets Area */
    .mobile-top-widgets {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-bottom: 25px;
        background: #fdfbf5;
        padding: 15px;
        border: 1px solid #e0e0e0;
    }

    /* Post Title Fix */
    .wp-block-post-title a {
        font-size: 18px !important;
    }

    .post-preview {
        padding: 15px !important;
    }
}

/* Post Styling */
.post-preview {
    margin-bottom: 40px !important;
    padding: 25px 30px 0 30px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px;
    background-color: #ffffff;
    display: block !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Alternating Faint Backgrounds */
.wp-block-post-template li:nth-child(odd) .post-preview {
    background-color: #fafafa;
    /* Faint Grey */
}

.wp-block-post-template li:nth-child(even) .post-preview {
    background-color: #fcfbf7;
    /* Faint Cream */
}

/* Remove bottom padding from ribbon in this boxed view */
.post-preview .post-ribbon-footer {
    border-bottom: none !important;
}

/* Post Titles */
.wp-block-post-title a {
    color: var(--arxaia-link-color, #0066cc);
    font-size: 22px;
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    line-height: 1.3;
}

.wp-block-post-title a:hover {
    color: var(--arxaia-menu-hover, #003d7a);
    text-decoration: underline;
}


.wp-block-post-featured-image {
    margin: 12px 0;
    text-align: center !important;
    /* Centered featured image */
}

.wp-block-post-featured-image img {
    max-width: 100%;
    width: auto;
    height: auto;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}


/* Widget Headers */
h3.widget-title,
.sidebar-left h3,
.sidebar-right h3 {
    background: var(--arxaia-menu-bg, #6b9c6b);
    color: var(--arxaia-menu-text, #fff);
    padding: 7px 10px;
    margin: 0 0 10px 0;
    font-size: 13px;
    text-align: left;
    text-transform: uppercase;
    font-weight: bold;
}

/* Sidebar Typography and Links */
.sidebar-left,
.sidebar-right {
    font-size: 13px;
    line-height: 1.6;
}

.sidebar-left a,
.sidebar-right a {
    color: var(--arxaia-link-color, #0066cc);
    text-decoration: none;
}

.sidebar-left a:hover,
.sidebar-right a:hover {
    color: var(--arxaia-menu-hover, #003d7a);
    text-decoration: underline;
}


.sidebar-left ul,
.sidebar-right ul {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
}

.sidebar-left li,
.sidebar-right li {
    padding: 4px 0;
    border-bottom: 1px dotted #ddd;
}

/* Post Metadata */
.wp-block-post-date,
.wp-block-post-author {
    font-size: 11px;
    color: #666;
    margin: 3px 0 8px 0;
}

/* Post Excerpt Styling */
.wp-block-post-excerpt {
    margin: 12px 0;
    line-height: 1.6;
    color: #333;
    font-size: 14px;
}


.wp-block-post-excerpt__more-link {
    color: var(--arxaia-link-color, #0066cc);
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    margin-top: 8px;
}

/* Search Box */
.wp-block-search {
    margin-bottom: 20px;
}

.wp-block-search__input {
    border: 1px solid #ccc;
    padding: 6px;
    width: 100%;
    font-size: 12px;
}

.wp-block-search__button {
    background: var(--arxaia-menu-bg, #6b9c6b);
    color: var(--arxaia-menu-text, #fff);
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
}

.wp-block-search__button:hover {
    background: var(--arxaia-accent, #5a8a5a);
}

/* Footer Styling */
footer.wp-block-group {
    background: var(--arxaia-menu-bg, #4a6a4a) !important;
    color: var(--arxaia-menu-text, #fff) !important;
    padding: 15px !important;
    margin-top: 0;
    border-top: 3px solid var(--arxaia-accent, #6b9c6b);
}

footer.wp-block-group a {
    color: var(--arxaia-menu-text, #fff);
    text-decoration: none;
}

footer.wp-block-group p {
    margin: 3px 0;
    font-size: 12px;
}

/* Featured Image Sizing and Centering */
.wp-block-post-featured-image img {
    max-width: 600px !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Sidebar Widget Spacing */
.sidebar-left .wp-block-group,
.sidebar-right .wp-block-group {
    margin-bottom: 15px !important;
}

/* Top Navigation Menu */
.top-nav-group {
    background-color: var(--arxaia-menu-bg, #3d5c2e) !important;
    /* Classic Dark Green */
    /* Borders Removed */
    padding: 10px 0;
    margin: 0 !important;
    /* Zero margin everywhere */
    position: relative;
    z-index: 1000;
    box-shadow: none !important;
    /* Remove any glow/shadow */
    outline: none !important;
    /* Remove outlines */
    border-radius: 0 !important;
}

.top-nav-group * {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
    /* Remove internal borders */
}

.top-nav-group .wp-block-navigation-item {
    margin: 0 !important;
    /* Zero margin for items */
}

.top-nav-group .wp-block-navigation-item__content {
    color: var(--arxaia-menu-text, #ffffff) !important;
    /* Text Color: White */
    font-family: Georgia, serif;
    /* Font: Classic Serif */
    font-weight: bold;
    /* Font Weight: Bold */
    text-transform: uppercase;
    /* Text Transform: All Caps */
    font-size: 14px;
    /* Font Size: 14px */
    padding: 3px 5px;
    /* Internal Padding: 3px vertical, 5px horizontal */
    text-decoration: none;
    /* No Underline */
    transition: all 0.2s ease;
    /* Smooth Hover Transition */
}

/* Ensure color applies to link elements specifically */
.top-nav-group .wp-block-navigation-item a,
.top-nav-group .wp-block-navigation-item a:link,
.top-nav-group .wp-block-navigation-item a:visited {
    color: var(--arxaia-menu-text, #ffffff) !important;
}

.top-nav-group .wp-block-navigation-item__content:hover,
.top-nav-group .current-menu-item .wp-block-navigation-item__content,
.top-nav-group .current_page_item .wp-block-navigation-item__content,
.top-nav-group .wp-block-navigation-item__content[aria-current="page"] {
    color: var(--arxaia-menu-hover, #efeac6) !important;
    /* Light gold on hover/active */
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px !important;
}

/* Top Menu Alignment (Left) */
.top-nav-group .wp-block-group,
.top-nav-group .wp-block-navigation,
.top-nav-group .wp-block-navigation__container {
    justify-content: flex-start !important;
    text-align: left;
    gap: 5px !important;
    /* Reduced Gap */
}

/* Site Tagline */
.wp-block-site-tagline {
    text-align: center;
    color: #444;
    font-size: 18px;
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 20px;
}

/* Hide redundant Categories label */
.wp-block-categories label {
    display: none;
}

/* Style Categories Dropdown to match Search */
.wp-block-categories select {
    border: 1px solid #ccc;
    padding: 6px;
    width: 100%;
    font-size: 12px;
    background-color: #fff;
    margin-bottom: 20px;
}


/* Featured Announcement Block - Simple Style */
.featured-announcement {
    background: #f9f9f7;
    border-left: 4px solid var(--arxaia-menu-bg, #3d5c2e);
    border-top: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    padding: 10px 20px 0 20px;
    /* Even less top padding */
    margin-bottom: 10px;
    /* Even less bottom margin */
}

.featured-announcement-excerpt p:last-child {
    margin-bottom: 0;
}

.featured-announcement-title {
    margin: 0 0 5px 0;
    /* Reduced from 8px */
    padding: 0;
    font-size: 22px;
    line-height: 1.3;
    font-weight: bold;
}

.featured-announcement-title a {
    color: var(--arxaia-link-color, #0066cc);
    text-decoration: none;
}

.featured-announcement-title a:hover {
    color: var(--arxaia-menu-hover, #003d7a);
    text-decoration: underline;
}

.featured-announcement-excerpt {
    margin: 8px 0;
    /* Reduced from 12px */
    line-height: 1.6;
    color: #333;
    font-size: 14px;
}

.featured-announcement-excerpt p {
    margin: 0 0 10px 0;
}

.featured-announcement-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.featured-date {
    font-size: 11px;
    color: #666;
}

.featured-read-more {
    color: var(--arxaia-link-color, #0066cc);
    font-weight: bold;
    text-decoration: none;
    font-size: 14px;
}

/* Responsive Design for Featured Announcement */
@media (max-width: 768px) {
    .featured-announcement {
        padding: 20px;
    }

    .featured-announcement-title {
        font-size: 22px;
    }

    .featured-announcement-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Featured Announcement Wrapper Positioning */
.featured-announcement-wrapper {
    position: relative;
    z-index: 1;
}


/* Post Ribbon Footer */
.post-ribbon-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    margin-top: 15px;
    border-top: 1px solid #e0e0e0;
    font-family: inherit;
}

.ribbon-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    color: #666;
}

.ribbon-left>* {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.ribbon-date,
.ribbon-comments,
.ribbon-comments a,
.ribbon-category-label {
    font-size: 14px;
    color: #666;
}

.ribbon-category {
    color: var(--arxaia-link-color, #0066cc);
    text-decoration: none;
    font-size: 14px;
}

.ribbon-category:hover,
.ribbon-comments a:hover {
    text-decoration: underline;
}

.ribbon-comments a {
    text-decoration: none;
}

.ribbon-separator {
    color: #ccc;
    user-select: none;
    font-size: 13px;
    padding-top: 1px;
}

.ribbon-right {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
}

.ribbon-read-more {
    background: var(--arxaia-menu-bg, #3d5c2e);
    color: var(--arxaia-menu-text, #ffffff) !important;
    text-decoration: none !important;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    line-height: 1.1;
    padding: 8px 24px;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.ribbon-text {
    text-align: center;
    /* Centered text inside the pill */
}

.ribbon-arrow {
    font-size: 1.4em;
    font-weight: bold;
    user-select: none;
    line-height: 0;
}

.ribbon-read-more:hover {
    background: var(--arxaia-accent, #b8a060);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #ffffff !important;
    text-decoration: none !important;
}

/* =========================================
   UNIFIED WIDGET STYLING (V2)
   ========================================= */

.widget-v2 {
    margin-bottom: 30px;
    width: 100%;
}

/* Base: Hide tablet-only widgets on Desktop/Mobile (Will be overridden by tablet query below) */
.tablet-only-widget {
    display: none !important;
}

.widget-v2-title {
    background: var(--arxaia-menu-bg, #3d5c2e) !important;
    color: #fff !important;
    padding: 8px 15px !important;
    font-size: 14px !important;
    margin: 0 0 12px 0 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border-radius: 2px;
}

.widget-v2-form {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    /* Allow button to drop below */
}

.widget-v2-input {
    flex: 3 !important;
    /* ~75% width */
    min-width: 150px !important;
    padding: 10px 13px !important;
    border: 1px solid #ccc !important;
    font-size: 14px !important;
    background: #fff !important;
    border-radius: 2px;
}

.widget-v2-button {
    background: var(--arxaia-menu-bg, #3d5c2e) !important;
    color: #fff !important;
    border: none !important;
    padding: 10px 18px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    transition: background 0.2s ease;
    border-radius: 2px;
    flex: 1 !important;
    /* ~25% width */
    max-width: 100%;
}

.widget-v2-button:hover {
    background: var(--arxaia-accent, #b8a060) !important;
}

.widget-v2-select {
    width: 100% !important;
    padding: 10px 13px !important;
    /* 3px extra padding */
    border: 1px solid #ccc !important;
    font-size: 14px !important;
    background: #fff !important;
    cursor: pointer;
    border-radius: 2px;
}

.protoselida-v2-container {
    overflow: hidden;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 370px !important;
    /* Fixed height for 1.45 scale */
}

/* Global Protoselida Scaling (Desktop & Tablet) */
.protoselida-iframe {
    transform: scale(1.45) !important;
    transform-origin: top center !important;
    border: none !important;
}

/* =========================================
   RESPONSIVE LAYOUT (CLEAN)
   ========================================= */

/* 1. Desktop Defaults (>1250px) */
@media (min-width: 1251px) {
    .tablet-sidebar-cleanup {
        display: none !important;
    }
}

/* 2. Tablet Layout (Nuclear Force: 783px - 1250px) */
@media (min-width: 783px) and (max-width: 1250px) {

    /* Force the parent container to be a perfectly flat row */
    .column-container-full .wp-block-columns,
    .wp-block-columns.is-not-stacked-on-mobile {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 0 !important;
    }

    /* Column 1: Crush the left sidebar to absolute zero */
    .column-container-full .sidebar-left {
        display: none !important;
        width: 0 !important;
        flex: 0 0 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Column 2: Force Main Content to 65% (safest width) */
    .column-container-full .main-column {
        display: block !important;
        width: 65% !important;
        flex: 0 0 65% !important;
        max-width: 65% !important;
        border-right: 2px solid #6b9c6b !important;
        padding: 20px !important;
        margin: 0 !important;
    }

    /* Column 3: FORCE Right Sidebar to 35% and Visible */
    .column-container-full .sidebar-right {
        display: block !important;
        width: 35% !important;
        flex: 0 0 35% !important;
        max-width: 35% !important;
        min-width: 280px !important;
        /* Prevent crushing */
        background-color: #f9f7f0 !important;
        padding: 15px !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
        z-index: 10 !important;
        overflow: visible !important;
    }

    .protoselida-container,
    .tablet-sidebar-cleanup {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    /* Force visibility of tablet-only components in this range */
    .tablet-only-widget {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Protoselida Scale moved to UNIFIED STYLING section below */

}

/* 3. Mobile Layout (<782px) */
@media (max-width: 782px) {
    .wp-block-columns {
        display: block !important;
    }

    .sidebar-left,
    .sidebar-right {
        display: none !important;
    }

    .main-column {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 15px !important;
    }

    .mobile-top-widgets {
        display: block !important;
        margin-bottom: 25px;
        background: #fdfbf5;
        padding: 15px;
        border: 1px solid #e0e0e0;
    }

    .wp-block-post-title a {
        font-size: 18px !important;
    }

    .post-preview {
        padding: 15px !important;
    }
}

/* =========================================
   ARTICLE CONTENT STYLING (IMAGE CENTERING)
   ========================================= */

/* Center all images and their containers within post content */
.wp-block-post-content .wp-block-image,
.wp-block-post-content figure,
.wp-block-post-content img {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    text-align: center !important;
    cursor: pointer;
    /* Indicated clickability with hand cursor */
}

/* Ensure figure captions remain visually centered */
.wp-block-post-content figcaption {
    text-align: center !important;
    width: 100% !important;
    margin-top: 8px !important;
}

/* Center Gallery blocks */
.wp-block-post-content .wp-block-gallery {
    justify-content: center !important;
}

/* =========================================
   COMMENTS STYLING
   ========================================= */

.wp-block-comments-query-loop {
    margin-top: 60px !important;
}

.wp-block-comments-query-loop h2,
.wp-block-comments-title {
    font-size: 24px !important;
    color: var(--arxaia-menu-bg, #3d5c2e) !important;
    border-bottom: 2px solid var(--arxaia-accent, #b8a060) !important;
    padding-bottom: 10px !important;
    margin-bottom: 30px !important;
    display: block !important;
}

.wp-block-comment-template {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.wp-block-comment-template li {
    margin-bottom: 25px !important;
    padding: 20px 25px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px;
    background-color: #ffffff;
    font-size: 13.5px !important;
    /* Slightly smaller as requested */
    line-height: 1.6 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

/* Alternating Faint Backgrounds (matching home page posts) */
.wp-block-comment-template li:nth-child(odd) {
    background-color: #fafafa !important;
}

.wp-block-comment-template li:nth-child(even) {
    background-color: #fcfbf7 !important;
}

/* Threaded comments indent & visual connector */
.wp-block-comment-template .children,
.wp-block-comment-template ul,
.wp-block-comment-template ol {
    margin-left: 45px !important;
    margin-top: 15px !important;
    border-left: 2px solid var(--arxaia-accent, #b8a060) !important;
    /* The vertical "link" line */
    padding-left: 0 !important;
    position: relative;
    list-style: none !important;
}

/* Horizontal "branch" for each nested comment */
.children li,
.wp-block-comment-template ul li,
.wp-block-comment-template ol li {
    position: relative;
}

.children li::before,
.wp-block-comment-template ul li::before,
.wp-block-comment-template ol li::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 35px;
    width: 20px;
    height: 2px;
    background: var(--arxaia-accent, #b8a060);
    border-radius: 0 0 0 4px;
}

/* Mobile check: Reduce indentation on small screens */
@media (max-width: 600px) {

    .wp-block-comment-template .children,
    .wp-block-comment-template ul,
    .wp-block-comment-template ol {
        margin-left: 20px !important;
    }

    .children li::before,
    .wp-block-comment-template ul li::before,
    .wp-block-comment-template ol li::before {
        width: 10px;
        left: -10px;
    }
}

/* Comment Author & Date Layout */
.wp-block-comment-template .wp-block-group {
    display: flex !important;
    align-items: flex-start !important;
    /* Top align everything */
    gap: 15px !important;
}

/* Container for Name and Sub-row */
.wp-block-comment-template .wp-block-group .wp-block-group:not(.comment-header-sub) {
    display: block !important;
    /* Ensure name and date/reply are stacked */
}

/* Inner group for Date + Reply */
.comment-header-sub {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 5px !important;
}

.wp-block-avatar {
    margin: 0 !important;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.wp-block-comment-author-name {
    font-weight: bold !important;
    font-size: 15px !important;
    color: var(--arxaia-menu-bg, #3d5c2e) !important;
    line-height: 1.2 !important;
    display: block !important;
}

.wp-block-comment-date {
    font-size: 12.5px !important;
    /* Slightly bigger as requested */
    color: #888 !important;
    display: block !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.wp-block-comment-content {
    color: #333 !important;
    position: relative;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.comment-collapsed {
    max-height: 330px !important;
}

/* The fade effect at the bottom of collapsed comments */
.comment-collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    /* Slightly taller fade */
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.8));
    pointer-events: none;
}

.comment-expand-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px auto 0 auto;
    transform: translateY(-5px);
    /* Pull it up slightly more */
    width: 34px;
    height: 34px;
    background: var(--arxaia-menu-bg, #3d5c2e);
    color: #fff !important;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 2px solid #fff;
}

.comment-expand-btn:hover {
    background: var(--arxaia-accent, #b8a060);
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.wp-block-comment-reply-link a {
    display: inline-block !important;
    margin: 0 !important;
    /* Zero margin because it's now in the header row */
    font-size: 11px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    color: var(--arxaia-link-color, #0066cc) !important;
    text-decoration: none !important;
    border: 1px solid #e0e0e0;
    padding: 3px 10px;
    /* Slimmer padding for header integration */
    border-radius: 20px;
    background: #fff;
    white-space: nowrap !important;
}

.wp-block-comment-reply-link a:hover {
    background: var(--arxaia-accent, #b8a060);
    color: #fff !important;
    border-color: var(--arxaia-accent, #b8a060);
}

/* Comment Form Styling */
.wp-block-post-comments-form {
    margin-top: 50px !important;
    padding: 30px;
    background: #fdfbf5;
    border: 1px solid #e0e0e0;
}

.wp-block-post-comments-form textarea,
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"] {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #ccc !important;
    border-radius: 2px !important;
    margin-bottom: 15px !important;
}

.wp-block-post-comments-form input[type="submit"] {
    background: var(--arxaia-menu-bg, #3d5c2e) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 30px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
}

.wp-block-post-comments-form input[type="submit"]:hover {
    background: var(--arxaia-accent, #b8a060) !important;
}

/* =========================================
   LIGHTBOX STYLING (MODAL POPUP)
   ========================================= */

#arxaia-lightbox {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#arxaia-lightbox.active {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    border: 3px solid #fff;
    border-radius: 4px;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

#arxaia-lightbox.active .lightbox-content {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.lightbox-close:hover {
    color: var(--arxaia-accent, #b8a060);
    text-decoration: none;
}