/*
Theme Name:        Noesa Foundation
Theme URI:         https://noesafoundation.org
Author:            Noesa Foundation
Author URI:        https://noesafoundation.org
Description:       Modern WordPress theme for Noesa Foundation. Features a hero slider, five pillars, impact counters, news grid, bento gallery, and events section. Includes a Classic Customizer panel with sticky, transparent, and top-bar header toggles. Built for WordPress 6.6+ and PHP 8.0+.
Version:           1.0.0
Requires at least: 6.6
Tested up to:      6.8
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:       noesa
Tags:              custom-colors, custom-logo, custom-menu, editor-style, featured-images, full-width-template, rtl-language-support, threaded-comments, translation-ready, block-patterns
*/

/* =========================================================
   Header Toggle CSS (Customizer Logic)
========================================================= */

/* Sticky Header Active */
.site-header.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    background-color: #ffffff;
    /* No transition: the header chrome (bar snap, bg/shadow switch) is
       instant; only the relocated links and menu slide animate. */
}

/* Admin bar adjustment for sticky header */
.admin-bar .site-header.is-sticky {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .site-header.is-sticky {
        top: 46px;
    }
}

/* Transparent Header Active */
.site-header.is-transparent {
    backdrop-filter: blur(8px);
    background-color: rgb(255 255 255 / 0.85);
}

/* Prevent content from hiding behind a fixed header */
.site-header.is-sticky ~ .site-content,
.site-header.is-sticky + .site-content,
body:has(.site-header.is-sticky) .site-content {
    padding-top: var(--header-height, 80px);
}

/* Paste your static site's CSS below this line */

:root {
                --primary: #27a0dd;
                --secondary: #8db566;
                --primary-hover: #1f85b9;
                --dark: #0f172a;
                --dark-bg: #1e293b;
                --text-main: #475569;
                --text-muted: #64748b;
                --light-bg: #f8fafc;
                --border-color: #e2e8f0;
                --white: #ffffff;
                --font-family: "Plus Jakarta Sans", sans-serif;
                --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                --white-opac: rgb(255 255 255/0.85);
                --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --shadow-md:
                    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --shadow-lg:
                    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
                --shadow-xl:
                    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
                --silk-gradient: linear-gradient(
                    135deg,
                    var(--dark-bg) 0%,
                    #1e3a5f 50%,
                    var(--dark) 100%
                );
            }

            .gradient {
                background-image: var(--silk-gradient);
            }

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            html {
                scroll-behavior: smooth;
            }

            body {
                font-family: var(--font-family);
                color: var(--text-main);
                background-color: var(--white);
                line-height: 1.7;
                -webkit-font-smoothing: antialiased;
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                color: var(--dark);
                line-height: 1.3;
            }

            a {
                text-decoration: none;
                color: inherit;
                transition: var(--transition);
            }

            ul {
                list-style: none;
            }

            img {
                max-width: 100%;
                display: block;
            }

            .container {
                max-width: 1300px;
                margin: 0 auto;
                padding: 0 24px;
            }

            /* --- Header and Nav --- */
            .header-wrapper {
                position: sticky;
                top: -40px;
                z-index: 1000;
            }

            .main-header {
                background: var(--white);
                box-shadow: var(--shadow-sm);
                transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            }

            /* .scrolled is toggled on the actual header (#masthead) by main.js
               when the page is scrolled (top bar collapses). */
            .site-header.scrolled {
                box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.12);
                background: rgba(255, 255, 255, 0.85);
                backdrop-filter: blur(16px) saturate(180%);
                -webkit-backdrop-filter: blur(16px) saturate(180%);
            }

            .top-bar {
                background-image: var(--silk-gradient);
                color: #cbd5e1;
                font-size: 0.85rem;
                height: 40px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05);
                /* No transition on purpose: the bar snaps in/out instantly.
                   The relocated search/lang and the menu slide keep theirs. */
            }

            .top-bar-content {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            /* The search/lang group is sized ONCE, in px, and renders
               identically in the top bar and in the navbar slot (it used
               to rely on a scale(1.1) in the slot, which made the two
               rows inconsistent). Values = the former 1.1x navbar
               rendering: text 17.6px, glyph 17.6px, input 14.96px,
               flag 22px, margins/gaps x1.1. */
            .top-links {
                display: flex;
                align-items: center;
                font-size: 1.1rem; /* 17.6px — inherited by links + divider */
            }

            .top-links a,
            .divider {
                color: #cbd5e1;
                margin-left: 16.5px;
                font-weight: 500;
            }

            .top-search-wrap {
                display: inline-flex;
                align-items: center;
                gap: 8.8px;
            }

            .top-search-form {
                max-width: 0;
                overflow: hidden;
                opacity: 0;
                transition:
                    max-width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                    opacity 0.3s ease,
                    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            }

            .top-search-wrap.is-open .top-search-form {
                max-width: 220px;
                opacity: 1;
            }

            .top-search-input {
                width: 220px;
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.2);
                border-radius: 999px;
                color: var(--white);
                font-size: 0.935rem; /* 14.96px = former 13.6 x 1.1 */
                font-family: inherit;
                padding: 4.4px 13.2px;
                outline: none;
                transition: var(--transition);
            }

            .top-search-input::placeholder {
                color: rgba(255, 255, 255, 0.5);
            }

            .top-search-input:focus {
                background: rgba(255, 255, 255, 0.18);
                border-color: var(--primary);
            }

            .top-search {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: none;
                border: none;
                padding: 4.4px;
                border-radius: 50%;
                font-size: 1.1rem; /* 17.6px glyph */
                color: #cbd5e1;
                cursor: pointer;
                transition: var(--transition);
            }

            .top-search:hover {
                color: var(--primary);
            }

            .top-links a:hover {
                color: var(--primary);
            }

            /* --- Top links relocated into the navbar when the top bar hides ---
               On scroll the top bar collapses (below) and main.js moves the
               .top-links element into the .nav-top-links slot at the far right
               of the navbar. */
            .site-header.scrolled .top-bar {
                height: 0;
                opacity: 0;
                overflow: hidden;
                border-bottom-width: 0;
            }

            .nav-top-links {
                display: none;
            }

            /* The slot sits out of flow at the container's right edge; the
               menu slides left (transform, measured by main.js into
               --nav-links-shift) so both share the row smoothly.
               The slot is ALWAYS display:flex (it's empty while the links
               live in the top bar) and pure-SLIDES between the top-bar row
               and the navbar row on scroll — no fade. main.js publishes
               --slot-rest-y (top-bar row -> slot row distance in the
               EXPANDED header: the resting spot while un-scrolled) and
               forces the slide-down start to that same row in the
               COLLAPSED header via --slot-from-y, so the group always
               begins and ends exactly where the top-bar links sit. */
            .nav-top-links {
                display: flex;
                align-items: center;
                position: absolute;
                right: 24px; /* container padding */
                top: 50%;
                transform: translateY(calc(-50% - var(--slot-rest-y, 65px)));
                pointer-events: none;
                transition: transform 0.35s ease;
            }

            .site-header.scrolled .nav-top-links {
                transform: translateY(-50%);
                pointer-events: auto;
            }

            @media (min-width: 769px) {
                .site-header.scrolled .nav-links {
                    transform: translateX(calc(-1 * var(--nav-links-shift, 126px)));
                }

                /* Static mode (top bar off): the permanent links reserve
                   their space without any .scrolled state. */
                .site-header.no-top-bar .nav-links {
                    transform: translateX(calc(-1 * var(--nav-links-shift, 126px)));
                }
            }

            /* Navbar variant: same px sizes as the top bar (the shared
               rules above), only colors differ — the white navbar needs
               dark text instead of the top bar's light. */
            .nav-top-links .top-links a,
            .nav-top-links .divider {
                color: var(--text-main);
            }

            .nav-top-links .top-search {
                color: var(--text-main);
            }

            .nav-top-links .top-search:hover {
                color: var(--primary);
            }

            .nav-top-links .top-search-input {
                background: var(--light-bg);
                border-color: var(--border-color);
                color: var(--text-main);
                width: var(--nav-links-width, 220px); /* = menu width (JS) */
                transition: background-color 0.3s ease, border-color 0.3s ease;
            }

            /* The expanding form is OUT OF FLOW in the navbar slot: it is
               absolutely anchored exactly where the closed in-flow form sat
               (wrap padding-left 8.8px replicates the wrap's column gap), so
               opening/closing never re-lays-out the search/lang group —
               no re-layout, no re-raster, so the divider, flag and button
               stay perfectly still while the
               textbox animates. font-size:0 is permanent here so the inline
               whitespace inside the form never shifts the input. */
            .nav-top-links .top-search-wrap {
                position: relative;
                padding-left: 8.8px; /* same 8.8px the column gap gave in flow */
            }

            .nav-top-links .top-search-form {
                position: absolute;
                right: 100%; /* form's right edge where the in-flow one was */
                top: 50%;
                transform: translateY(-50%);
                font-size: 0;
            }

            /* Search open on the navbar: the textbox overlays the menu at
               exactly the menu's width and right edge (JS publishes
               --nav-links-width and --nav-search-cover-shift) — the menu
               itself never moves. */
            .nav-top-links .top-search-wrap.is-open .top-search-form {
                max-width: var(--nav-links-width, 220px);
                transform: translateY(-50%)
                    translateX(var(--nav-search-cover-shift, 0px));
            }

            .nav-top-links .top-search-wrap.is-open .top-search-input {
                width: var(--nav-links-width, 220px);
            }

            .nav-top-links .top-search-input::placeholder {
                color: var(--text-muted);
            }

            /* Top bar disabled (header.no-top-bar): the links are printed
               permanently into the slot server-side — always visible, no
               scroll-driven animation (main.js skips it entirely). */
            .site-header.no-top-bar .nav-top-links {
                transform: translateY(-50%);
                pointer-events: auto;
                transition: none;
            }

            .navbar {
                padding: 20px 0;
                position: relative;
            }

            .nav-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative; /* anchors the .nav-top-links slot */
            }

            .brand-logo img {
                height: 50px;
                transition: var(--transition);
            }

            .nav-links {
                display: flex;
                align-items: center;
                gap: 32px;
                transition: transform 0.35s ease; /* smooth shift for the relocated top links */
            }

            .nav-links > li > a {
                font-weight: 600;
                font-size: 1.15rem;
                color: var(--text-main);
                position: relative;
                display: flex;
                align-items: center;
                gap: 6px;
            }

            .nav-links > li > a:hover {
                color: var(--primary);
            }

            .nav-links > li > a::after {
                content: "";
                position: absolute;
                width: 0;
                height: 2px;
                bottom: -4px;
                left: 0;
                background-color: var(--primary);
                transition: var(--transition);
            }

            .nav-links > li > a:hover::after {
                width: 100%;
            }

            /* --- Language Switcher --- */
            .lang-switcher {
                position: relative;
                display: inline-flex;
                align-items: center;
                margin-left: 16.5px;
                gap: 11px;
                padding-right: 11px; /* keeps the closed footprint now that
                                        .lang-options is out of flow */
            }

            .lang-toggle, .lang-option {
                display: inline-flex;
                align-items: center;
                background: none;
                border: none;
                cursor: pointer;
                padding: 0;
                transition: var(--transition);
            }

            .lang-toggle:hover {
                transform: scale(1.15);
            }
            .fi-us{
                background: url("https://hatscripts.github.io/circle-flags/flags/us.svg");
            }
            .fi-id{
                background: url("https://hatscripts.github.io/circle-flags/flags/id.svg");
            }
            .lang-flag,
            .lang-option .fi {
                display: inline-block;
                width: 22px;
                height: 22px;
                background-size: cover;
                background-position: center;
                transition: var(--transition);
            }

            /* Out of flow (absolute): opening the switcher must not widen
               .top-links — the right-anchored row would otherwise slide the
               search and divider left. Only the flag moves (below). */
            .lang-options {
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                display: inline-flex;
                align-items: center;
                gap: 8.8px;
                max-width: 0;
                overflow: hidden;
                opacity: 0;
                white-space: nowrap;
                transition:
                    max-width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                    opacity 0.3s ease;
                pointer-events: none;
            }

            .lang-switcher.is-open .lang-options {
                max-width: 88px;
                opacity: 1;
                pointer-events: auto;
            }

            /* Only the current flag slides left when open — it frees the
               right edge for the incoming option flag while search and
               divider stay frozen. */
            .lang-switcher.is-open .lang-toggle {
                transform: translateX(-27.5px);
                transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .lang-switcher.is-open .lang-toggle:hover {
                transform: translateX(-27.5px) scale(1.15);
                transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .lang-option:hover .fi {
                box-shadow: 0 0 0 2px var(--primary);
                transform: scale(1.1);
            }

            .lang-option.is-active {
                display: none;
            }

            .lang-divider {
                display: none;
            }

            /* Dropdown */
            .dropdown {
                position: relative;
            }

            .dropdown i {
                font-size: 0.8rem;
                transition: transform 0.3s ease;
            }

            .dropdown-menu {
                position: absolute;
                top: 100%;
                left: -15px;
                background: var(--white);
                box-shadow: var(--shadow-lg);
                border-radius: 8px;
                padding: 12px 0;
                min-width: 220px;
                opacity: 0;
                visibility: hidden;
                transform: translateY(15px);
                transition: var(--transition);
                border: 1px solid var(--border-color);
                z-index: 1001;
            }

            .dropdown:hover .dropdown-menu {
                opacity: 1;
                visibility: visible;
                transform: translateY(10px);
            }

            .dropdown-menu li a {
                display: block;
                padding: 10px 24px;
                font-size: 0.95rem;
                font-weight: 500;
                color: var(--text-main);
            }

            .dropdown-menu li a:hover {
                background-color: var(--light-bg);
                color: var(--primary);
                padding-left: 28px;
            }

            /* Mobile Menu Button */
            .mobile-menu-btn {
                display: none;
                background: none;
                border: none;
                font-size: 1.5rem;
                color: var(--primary);
                cursor: pointer;
                transition: var(--transition);
            }

            .mobile-menu-btn:hover {
                color: var(--primary-hover);
            }

            /* --- Base Section Styles --- */
            .section-padding {
                padding: 100px 0;
            }

            .section-title {
                margin-bottom: 50px;
            }

            .section-title h2 {
                font-size: 2.5rem;
                font-weight: 800;
                margin-bottom: 15px;
                letter-spacing: -0.5px;
            }

            .section-title p {
                color: var(--text-main);
                font-size: 1.1rem;
                max-width: 600px;
            }

            .text-center {
                text-align: center;
            }

            .text-center .section-title p {
                margin: 0 auto;
            }

            .text-between {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                margin-bottom: 50px;
            }

            .text-between .section-title {
                margin-bottom: 0;
                text-align: left;
            }

            /* Buttons */
            .btn-primary,
            .btn-outline {
                display: inline-flex;
                align-items: center;
                gap: 10px;
                padding: 14px 28px;
                font-weight: 700;
                border-radius: 6px;
                transition: var(--transition);
                font-size: 1rem;
            }

            .btn-primary {
                background-color: var(--primary);
                color: var(--white) !important;
                border: none;
            }

            .btn-primary:hover {
                background-color: var(--primary-hover);
                cursor: pointer;
                transform: translateY(-3px);
                box-shadow: 0 10px 20px rgba(39, 160, 221, 0.3);
            }

            .btn-outline {
                border: 2px solid var(--border-color);
                color: var(--dark);
            }

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

            /* --- Hero Slider --- */
            .hero-section {
                position: relative;
                overflow: hidden;
                background-color: var(--dark);
            }

            .slide-item {
                height: 75vh;
                min-height: 600px;
                background-size: cover;
                background-position: center;
                position: relative;
                display: flex !important;
                align-items: center;
            }

            .slide-overlay {
                position: absolute;
                inset: 0;
                background: linear-gradient(
                    90deg,
                    rgba(15, 23, 42, 0.85) 0%,
                    rgba(15, 23, 42, 0.3) 100%
                );
            }

            .slide-content {
                position: relative;
                z-index: 2;
                color: var(--white);
                padding: 0 20px;
            }

            .badge {
                display: inline-block;
                background-color: rgba(141, 181, 102, 0.9);
                color: var(--white);
                padding: 6px 16px;
                font-size: 0.85rem;
                font-weight: 700;
                text-transform: uppercase;
                letter-spacing: 1.5px;
                border-radius: 50px;
                margin-bottom: 24px;
            }

            .slide-content h1 {
                color: var(--white);
                font-size: 3.5rem;
                line-height: 1.15;
                font-weight: 800;
                margin-bottom: 20px;
                letter-spacing: -1px;
            }

            .slide-content p {
                font-size: 1.15rem;
                color: #cbd5e1;
                margin-bottom: 32px;
                font-weight: 400;
            }

            /* --- Slide Content Animation --- */
            /* Higher specificity than .js .reveal-item to override scroll reveal */
            .slide-content .reveal-item.reveal-item {
                opacity: 0;
                transform: translateY(40px);
                transition:
                    opacity 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
                    transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
            }

            .slide-content.slide-active .reveal-item.reveal-item {
                opacity: 1;
                transform: translateY(0);
            }

            /* Staggered delays for each element */
            .slide-content.slide-active .reveal-item.reveal-item:nth-child(1) {
                transition-delay: 0.1s;
            }
            .slide-content.slide-active .reveal-item.reveal-item:nth-child(2) {
                transition-delay: 0.25s;
            }
            .slide-content.slide-active .reveal-item.reveal-item:nth-child(3) {
                transition-delay: 0.4s;
            }
            .slide-content.slide-active .reveal-item.reveal-item:nth-child(4) {
                transition-delay: 0.55s;
            }

            .progressBarContainer {
                position: absolute;
                bottom: 40px;
                width: 300px;
                margin: auto;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
                gap: 15px;
            }

            .progressBarContainer div {
                flex: 1;
                padding: 10px 0;
                cursor: pointer;
            }

            .progressBarContainer div span.progressBar {
                width: 100%;
                height: 4px;
                background-color: rgba(255, 255, 255, 0.2);
                display: block;
                border-radius: 2px;
                overflow: hidden;
                transition: background-color 0.3s ease;
            }

            .progressBarContainer div:hover span.progressBar {
                background-color: rgba(255, 255, 255, 0.4);
            }

            .progressBarContainer div span.progressBar .inProgress {
                background-color: var(--primary);
                width: 0%;
                height: 100%;
                border-radius: 2px;
            }

            /* --- Pillar Section --- */
            .pillars-section {
                background-color: var(--light-bg);
            }
            .pillars-section h2 {
                text-align: center;
            }

            .pillars-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 24px;
            }

            .pillar-card {
                background: var(--white);
                padding: 40px 24px;
                border-radius: 12px;
                border: 1px solid var(--border-color);
                transition: var(--transition);
                text-align: center;
                box-shadow: var(--shadow-sm);
            }

            .pillar-card:hover {
                transform: translateY(-10px);
                box-shadow: var(--shadow-xl);
                border-color: transparent;
            }

            .icon-box {
                width: 70px;
                height: 70px;
                background-color: rgba(39, 160, 221, 0.1);
                color: var(--primary);
                border-radius: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 1.8rem;
                margin: 0 auto 24px;
                transition: var(--transition);
            }

            .pillar-card:hover .icon-box {
                background-color: var(--primary);
                color: var(--white);
                transform: scale(1.1) rotate(5deg);
            }

            .pillar-card h3 {
                font-size: 1.25rem;
                margin-bottom: 12px;
                font-weight: 700;
            }

            .pillar-card p {
                font-size: 0.95rem;
                color: var(--text-muted);
                margin-bottom: 24px;
            }

            .card-link {
                font-size: 0.9rem;
                font-weight: 700;
                color: var(--primary);
                display: inline-flex;
                align-items: center;
                gap: 6px;
            }

            .pillar-card:hover .card-link i {
                transform: translateX(4px);
            }

            /* --- Impact Section --- */
            .impact-section {
                color: var(--white);
                padding: 80px 0;
                border-top: 4px solid var(--secondary);
            }

            .impact-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 40px;
                text-align: center;
            }

            .impact-item h2 {
                font-size: 3.5rem;
                font-weight: 800;
                color: var(--primary);
                margin-bottom: 10px;
            }

            .impact-item p {
                font-size: 1.05rem;
                color: #cbd5e1;
                font-weight: 500;
            }

            /* --- News Section --- */
            .news-section {
                background-color: var(--white);
            }

            .news-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
                gap: 30px;
            }

            .news-card {
                background: var(--white);
                border-radius: 12px;
                overflow: hidden;
                box-shadow: var(--shadow-md);
                border: 1px solid var(--border-color);
                transition: var(--transition);
                cursor: pointer;
                /* Column flex: the card stretches to the grid row height and
                   passes the extra space to the body, so "Read Full Story"
                   lands on the same baseline in every card. */
                display: flex;
                flex-direction: column;
            }

            .news-card:hover {
                transform: translateY(-6px);
                box-shadow: var(--shadow-xl);
                border-color: var(--primary);
            }

            .news-image {
                /* Anchors are inline by default, and inline elements ignore
                   height/overflow — the image would render full-size and the
                   card's overflow:hidden would then clip the whole body below
                   (no title/excerpt visible). */
                display: block;
                position: relative;
                height: 220px;
                overflow: hidden;
                flex: none; /* keep the 220px box in the card's flex column */
            }

            .news-image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.5s ease;
            }

            .news-card:hover .news-image img {
                transform: scale(1.05);
            }

            .news-badge {
                position: absolute;
                top: 20px;
                left: 20px;
                background: var(--secondary);
                color: var(--white);
                font-size: 0.75rem;
                font-weight: 700;
                padding: 6px 12px;
                border-radius: 4px;
                text-transform: uppercase;
                letter-spacing: 1px;
                z-index: 2;
                transition: var(--transition);
            }

            .news-card:hover .news-badge {
                background: var(--primary);
            }

            .news-body {
                padding: 30px;
                /* Fill the space left under the image; .read-more then pins
                   to the bottom (margin-top:auto) with the body's 30px
                   padding-bottom as the gap to the card edge. */
                display: flex;
                flex-direction: column;
                flex: 1;
            }

            .news-date {
                font-size: 0.85rem;
                color: var(--text-muted);
                display: block;
                margin-bottom: 12px;
                font-weight: 500;
            }

            .news-date i {
                color: var(--primary);
                margin-right: 5px;
            }

            .news-body h3 {
                font-size: 1.2rem;
                line-height: 1.5;
                margin-bottom: 12px;
                font-weight: 700;
            }

            .news-body p {
                font-size: 0.95rem;
                color: var(--text-muted);
                margin-bottom: 20px;
            }

            .read-more {
                font-size: 0.95rem;
                font-weight: 700;
                color: var(--primary);
                display: inline-flex;
                align-items: center;
                gap: 8px;
                /* Sit at the card's bottom regardless of excerpt length. */
                margin-top: auto;
            }

            .read-more:hover i {
                transform: translateX(5px);
            }

            /* --- Post Pagination (category sections / archives) --- */
            /* the_posts_pagination() also emits a <div class="nav-links">.
               The bare .nav-links rule in the header section (menu) leaks
               a 32px gap into it — tighten it to the 8px used by the
               .post-pagination markup. */
            .pagination .nav-links {
                gap: 8px;
            }

            .post-pagination {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: center;
                gap: 8px;
                margin-top: 36px;
            }

            .post-pagination .page-numbers {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 44px;
                height: 44px;
                padding: 0 14px;
                font-size: 0.95rem;
                font-weight: 600;
                color: var(--text-main);
                background-color: var(--white);
                border: 1px solid var(--border-color);
                border-radius: 10px;
                text-decoration: none;
                transition: var(--transition);
            }

            .post-pagination .page-numbers:hover {
                color: var(--primary);
                border-color: var(--primary);
            }

            .post-pagination .page-numbers.current {
                color: #ffffff;
                background-color: var(--primary);
                border-color: var(--primary);
                cursor: default;
            }

            .post-pagination .page-numbers.dots {
                min-width: auto;
                padding: 0 4px;
                color: var(--text-muted);
                background-color: transparent;
                border-color: transparent;
                cursor: default;
            }

            .post-pagination .page-numbers.prev,
            .post-pagination .page-numbers.next {
                gap: 8px;
                padding: 0 18px;
            }

            .post-pagination .page-numbers:focus-visible {
                outline: 2px solid var(--primary);
                outline-offset: 2px;
            }

            /* --- Listing page templates (page-templates/activity.php, gallery.php) --- */
            .listing-page .listing-header {
                background-color: var(--white);
                padding: 90px 0 40px;
            }

            /* Sections with a light background get a matching title band. */
            .listing-page--muted .listing-header {
                background-color: var(--light-bg);
            }

            .listing-page .listing-header .entry-title {
                margin-bottom: 0;
            }

            /* Category descriptions / search result counts in the band. */
            .listing-header .archive-description {
                margin-top: 12px;
                color: var(--text-muted);
                max-width: 760px;
            }

            .listing-header .archive-description p {
                margin-bottom: 0;
            }

            /* The pattern's own .section-padding would add a 100px gap under the
               title — remove the top padding so the grid sits right below it and
               the header merges seamlessly with the section below. */
            .listing-page .news-section,
            .listing-page .gallery-section {
                padding-top: 0;
            }

            @media screen and (max-width: 768px) {
                .listing-page .listing-header {
                    padding: 56px 0 28px;
                }
            }

            /* --- Post Gallery (dynamic, from all posts' featured images) --- */
            .post-gallery-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 20px;
            }

            .post-gallery-grid .gallery-item {
                height: auto;
                aspect-ratio: 1 / 1;
            }

            @media screen and (max-width: 1024px) {
                .post-gallery-grid {
                    grid-template-columns: repeat(3, 1fr);
                }
            }

            @media screen and (max-width: 640px) {
                .post-gallery-grid {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            /* --- LightGallery --- */
            /* lightGallery 2.x ships with z-index 1050, which sits below the
               sticky header (9999). Note: .lg-backdrop is a *sibling* of
               .lg-outer inside .lg-container (not a stacking context), so its
               own z-index: 1 is resolved against the body — lift both above
               the header so the backdrop, close button and counter cover the
               whole viewport. */
            .lg-outer,
            .lg-backdrop {
                z-index: 10000;
            }

            /* --- Gallery Section (Bento Grid) --- */
            .gallery-section {
                background-color: var(--light-bg);
            }

            .gallery-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-auto-rows: 260px;
                gap: 20px;
            }

            .gallery-item {
                position: relative;
                display: block;
                overflow: hidden;
                border-radius: 12px;
                background: #e2e8f0;
                box-shadow: var(--shadow-sm);
                height: 100%;
                width: 100%;
            }

            /* Custom Grid Spans for the 8 items (scoped to the front-page bento
               only — a dynamic gallery must not inherit these). */
            .gallery-grid .gallery-item:nth-child(1) {
                grid-column: span 2;
                grid-row: span 2;
            }
            .gallery-grid .gallery-item:nth-child(4) {
                grid-column: span 2;
            }
            .gallery-grid .gallery-item:nth-child(5) {
                grid-row: span 2;
            }
            .gallery-grid .gallery-item:nth-child(7) {
                grid-column: span 2;
            }
            .gallery-grid .gallery-item:nth-child(8) {
                grid-column: span 3;
            }

            .gallery-item img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
            }

            /* Premium Dark Gradient Overlay */
            .gallery-item::before {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(
                    to top,
                    rgba(15, 23, 42, 0.85) 0%,
                    transparent 60%
                );
                opacity: 0;
                transition: var(--transition);
                z-index: 1;
            }

            /* Subtle Hover Icon */
            .gallery-item::after {
                content: "\f00e";
                font-family: "Font Awesome 6 Free";
                font-weight: 900;
                position: absolute;
                inset: 0;
                display: grid;
                place-items: center;
                color: #fff;
                font-size: 32px;
                opacity: 0;
                z-index: 2;
                transform: translateY(20px) scale(0.9);
                transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
                background: transparent;
            }

            .gallery-item:hover img {
                transform: scale(1.08); /* More subtle scale */
            }

            .gallery-item:hover::before {
                opacity: 1;
            }

            .gallery-item:hover::after {
                opacity: 1;
                transform: translateY(0) scale(1);
            }

            /* --- Events Section --- */
            .events-section {
                background-color: var(--white);
            }

            .events-grid {
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            .event-card {
                display: flex;
                background: var(--white);
                border: 1px solid var(--border-color);
                border-radius: 12px;
                overflow: hidden;
                box-shadow: var(--shadow-sm);
                transition: var(--transition);
            }

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

            .event-date {
                background: var(--primary);
                color: var(--white);
                padding: 30px 25px;
                text-align: center;
                min-width: 130px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .event-date .day {
                font-size: 2.2rem;
                font-weight: 800;
                line-height: 1;
                margin-bottom: 5px;
            }

            .event-date .month {
                font-size: 1rem;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 1px;
            }

            .event-details {
                padding: 30px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex: 1;
            }

            .event-details h3 {
                font-size: 1.3rem;
                margin-bottom: 10px;
            }

            .event-details p {
                color: var(--text-muted);
                margin-bottom: 15px;
                font-size: 1rem;
            }

            .event-meta {
                display: flex;
                gap: 20px;
                font-size: 0.9rem;
                color: var(--text-main);
                font-weight: 500;
            }

            .event-meta i {
                color: var(--primary);
                margin-right: 6px;
            }

            .event-actions {
                flex: 0 0 240px; /* fixed tab width — every card's button
                                    gets the same width regardless of label
                                    (240 fits the longest label on one line) */
                padding: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-left: 1px solid var(--border-color);
                background-color: var(--light-bg);
            }

            .event-actions .btn-primary {
                flex: 1; /* fill the tab — one width for every card */
                justify-content: center;
            }

            /* --- Footer --- */
            .main-footer {
                color: #94a3b8;
                padding-top: 80px;
            }

            .footer-grid {
                display: grid;
                grid-template-columns: 2fr 1fr 1fr 1.5fr;
                gap: 50px;
                padding-bottom: 60px;
            }

            .brand-logo2 {
                display: inline-block;
                margin-bottom: 24px;
                opacity: 0.8;
            }

            .brand-logo2 img {
                max-width: calc(100% - 24px);
            }

            .brand-col p {
                font-size: 0.95rem;
                margin-bottom: 24px;
                line-height: 1.7;
            }

            .social-links a {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 40px;
                height: 40px;
                background: rgba(255, 255, 255, 0.05);
                color: var(--white);
                border-radius: 50%;
                margin-right: 10px;
                transition: var(--transition);
            }

            .social-links a:hover {
                background: var(--primary);
                transform: translateY(-3px);
            }

            .footer-col h4 {
                color: var(--white);
                margin-bottom: 24px;
                font-size: 1.1rem;
                font-weight: 700;
            }

            .footer-col ul li {
                margin-bottom: 12px;
            }

            .footer-col ul li a {
                font-size: 0.95rem;
                transition: var(--transition);
            }

            .footer-col ul li a:hover {
                color: var(--primary);
                padding-left: 5px;
            }

            .footer-col p {
                font-size: 0.95rem;
                margin-bottom: 16px;
                display: flex;
                gap: 12px;
            }

            .footer-col p i {
                color: var(--secondary);
                margin-top: 4px;
            }

            .footer-bottom {
                padding: 24px 0;
                text-align: center;
                font-size: 0.9rem;
                background-color: rgba(0, 0, 0, 0.2);
            }

            /* --- Scroll Reveal Animations --- */
            /* Only hide elements when JavaScript is available */
            .js .reveal-section,
            .js .reveal-item {
                opacity: 0;
                transform: translateY(30px);
                transition:
                    opacity 0.8s cubic-bezier(0.5, 0, 0, 1),
                    transform 0.8s cubic-bezier(0.5, 0, 0, 1);
            }
            .js .reveal-section.is-visible,
            .js .reveal-item.is-visible {
                opacity: 1;
                transform: translateY(0);
            }
            .reveal-item:nth-child(1) {
                transition-delay: 50ms;
            }
            .reveal-item:nth-child(2) {
                transition-delay: 150ms;
            }
            .reveal-item:nth-child(3) {
                transition-delay: 250ms;
            }
            .reveal-item:nth-child(4) {
                transition-delay: 350ms;
            }
            .reveal-item:nth-child(5) {
                transition-delay: 150ms;
            }
            .reveal-item:nth-child(6) {
                transition-delay: 250ms;
            }

            /* --- Media Queries --- */

            /* Tablet Adjustments for Bento Grid */
            @media (max-width: 1024px) {
                .gallery-grid {
                    grid-template-columns: repeat(3, 1fr);
                    grid-auto-rows: 240px;
                }
                .gallery-item {
                    grid-column: span 1;
                    grid-row: span 1;
                } /* Reset */
                .gallery-item:nth-child(1) {
                    grid-column: span 2;
                    grid-row: span 2;
                }
                .gallery-item:nth-child(4) {
                    grid-column: span 2;
                }
                .gallery-item:nth-child(5) {
                    grid-row: span 2;
                }
                .gallery-item:nth-child(6) {
                    grid-column: span 2;
                }
                .gallery-item:nth-child(8) {
                    grid-column: span 2;
                }
            }

            @media (max-width: 992px) {
                .footer-grid {
                    grid-template-columns: 1fr 1fr;
                }
                .slide-content h1 {
                    font-size: 3rem;
                }
                .event-actions {
                    padding: 20px;
                }
            }

            /* Mobile Adjustments */
            @media (max-width: 768px) {
                .top-bar {
                    display: none;
                }

                /* No scrolled state on mobile — the links stay in the
                   (hidden) top bar so the hamburger keeps its place.
                   Static mode (top bar off): links are permanent and sit
                   clear of the hamburger. */
                .site-header.scrolled .nav-top-links {
                    display: none;
                }

                .site-header.no-top-bar .nav-top-links {
                    right: 76px; /* hamburger clearance */
                }

                .header-wrapper {
                    top: 0;
                }

                .mobile-menu-btn {
                    display: block;
                }

                /* Mobile Navigation Overhaul */
                .nav-links {
                    position: absolute;
                    top: 100%;
                    left: 0;
                    width: 100%;
                    background: var(--white);
                    flex-direction: column;
                    align-items: flex-start;
                    box-shadow: var(--shadow-md);
                    gap: 0;
                    border-top: 1px solid var(--border-color);
                    display: none;
                }

                .nav-links li {
                    width: 100%;
                }

                .nav-links > li > a {
                    width: 100%;
                    padding: 16px 24px;
                    border-bottom: 1px solid var(--border-color);
                    display: flex;
                    justify-content: space-between;
                }

                .nav-links > li > a::after {
                    display: none;
                }

                /* Mobile Dropdown Handling */
                .dropdown-menu {
                    position: static;
                    box-shadow: none;
                    opacity: 1;
                    visibility: visible;
                    transform: none;
                    border: none;
                    border-bottom: 1px solid var(--border-color);
                    border-radius: 0;
                    padding: 0;
                    display: none;
                    background-color: var(--light-bg);
                }

                .dropdown-menu li a {
                    padding: 12px 24px 12px 40px;
                }

                .dropdown:hover .dropdown-menu {
                    display: none;
                }

                /* Fix text layouts */
                .slide-content h1 {
                    font-size: 2.2rem;
                }
                .slide-content p {
                    font-size: 1rem;
                }
                .text-between {
                    flex-direction: column;
                    align-items: flex-start;
                    gap: 20px;
                }

                /* Mobile Bento Grid */
                .gallery-grid {
                    grid-template-columns: repeat(2, 1fr);
                    grid-auto-rows: 200px;
                }
                .gallery-item {
                    grid-column: span 1 !important;
                    grid-row: span 1 !important;
                } /* Hard Reset */
                .gallery-item:nth-child(1) {
                    grid-column: span 2 !important;
                    grid-row: span 2 !important;
                }
                .gallery-item:nth-child(4) {
                    grid-column: span 2 !important;
                }
                .gallery-item:nth-child(7) {
                    grid-column: span 2 !important;
                }
                .gallery-item:nth-child(8) {
                    grid-column: span 2 !important;
                }

                .event-card {
                    flex-direction: column;
                }
                .event-date {
                    padding: 15px;
                    flex-direction: row;
                    align-items: baseline;
                    gap: 10px;
                    min-width: auto;
                }
                .event-actions {
                    flex: none; /* full-width strip (basis would set height
                                   in the stacked card) */
                    border-left: none;
                    border-top: 1px solid var(--border-color);
                }
                .event-meta {
                    flex-direction: column;
                    gap: 10px;
                }
            }

            @media (max-width: 576px) {
                .footer-grid {
                    grid-template-columns: 1fr;
                    gap: 40px;
                }
                .brand-logo2 img {
                    max-width: 100%;
                }
            }


.content-main {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* =========================================================
   Single Post / Archive Layout
   ========================================================= */
.content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

/* Two columns only when the sidebar actually renders */
.content-layout:has(> .widget-area) {
    grid-template-columns: minmax(0, 1fr) 330px;
}

/* --- Article Card --- */
/* --- Article Card ---
   NOTE: WordPress puts "single-post" on <body> too (body_class()), so this
   must be scoped to the article element — otherwise `overflow: hidden`
   lands on <body> and stops the whole page from scrolling. */
article.single-post {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

article.single-post:hover {
    box-shadow: var(--shadow-md);
}

article.single-post .post-thumbnail {
    aspect-ratio: 16 / 8;
    overflow: hidden;
    background: var(--light-bg);
}

article.single-post .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

article.single-post:hover .post-thumbnail img {
    transform: scale(1.03);
}

/* --- Entry Header --- */
.entry-header {
    padding: 36px 40px 0;
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-bottom: 20px;
    font-size: 0.875rem;
    color: var(--text-muted);
}

article.single-post .post-category {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

article.single-post .post-category a {
    display: inline-block;
    background: rgba(39, 160, 221, 0.1);
    color: var(--primary);
    padding: 4px 13px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.6;
}

article.single-post .post-category a:hover {
    background: var(--primary);
    color: var(--white);
}

article.single-post .post-date,
article.single-post .post-author {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

article.single-post .post-date i,
article.single-post .post-author i {
    color: var(--primary);
}

article.single-post .post-author a {
    color: var(--text-muted);
    font-weight: 600;
}

article.single-post .post-author a:hover {
    color: var(--primary);
}

.entry-title {
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.25;
    color: var(--dark);
    margin-bottom: 32px;
}

/* --- Entry Content Typography --- */
.entry-content {
    padding: 0 40px;
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-main);
}

.entry-content::after {
    content: "";
    display: table;
    clear: both;
}

.entry-content > * {
    margin-bottom: 1.5em;
}

.entry-content > *:last-child {
    margin-bottom: 0;
}

.entry-content > p:first-child {
    margin-top: 0;
    font-size: 1.1rem;
    color: var(--dark);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-weight: 800;
    letter-spacing: -0.3px;
    line-height: 1.35;
    color: var(--dark);
}

.entry-content h2 {
    font-size: 1.7rem;
    margin-top: 2em;
}

.entry-content h3 {
    font-size: 1.35rem;
    margin-top: 1.9em;
}

.entry-content h4 {
    font-size: 1.15rem;
    margin-top: 1.7em;
}

.entry-content a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(39, 160, 221, 0.45);
}

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

/* Lists — the global `ul { list-style: none }` reset must be undone here */
.entry-content ul,
.entry-content ol {
    padding-left: 1.5em;
    margin-bottom: 1.5em;
}

.entry-content ul {
    list-style: disc;
}

.entry-content ol {
    list-style: decimal;
}

.entry-content li {
    margin-bottom: 0.55em;
    padding-left: 0.25em;
}

.entry-content li::marker {
    color: var(--primary);
    font-weight: 700;
}

.entry-content li > ul,
.entry-content li > ol {
    margin-top: 0.55em;
    margin-bottom: 0;
}

.entry-content ul ul {
    list-style: circle;
}

.entry-content ul ul ul {
    list-style: square;
}

/* Blockquote */
.entry-content blockquote {
    position: relative;
    margin: 2em 0;
    padding: 26px 30px 26px 64px;
    background: var(--light-bg);
    border-left: 4px solid var(--primary);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--text-main);
}

.entry-content blockquote::before {
    content: "\f10e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-style: normal;
    position: absolute;
    left: 26px;
    top: 26px;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--primary);
    opacity: 0.35;
}

.entry-content blockquote p {
    margin: 0;
}

.entry-content blockquote cite {
    display: block;
    margin-top: 10px;
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 700;
    color: var(--text-muted);
}

/* Images & alignment */
.entry-content img {
    border-radius: 12px;
}

.entry-content .alignnone,
.entry-content .alignleft,
.entry-content .alignright,
.entry-content .aligncenter {
    margin: 1.8em 0;
}

.entry-content .alignleft {
    float: left;
    margin: 0.4em 1.8em 1.2em 0;
    max-width: 50%;
}

.entry-content .alignright {
    float: right;
    margin: 0.4em 0 1.2em 1.8em;
    max-width: 50%;
}

.entry-content .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.entry-content figcaption,
.entry-content .wp-caption-text {
    margin-top: 10px;
    font-size: 0.88rem;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
}

/* Tables */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.8em 0;
    font-size: 0.97rem;
}

.entry-content th,
.entry-content td {
    border: 1px solid var(--border-color);
    padding: 11px 15px;
    text-align: left;
}

.entry-content th {
    background: var(--light-bg);
    color: var(--dark);
    font-weight: 700;
}

.entry-content tr:nth-child(even) td {
    background: #fbfdfe;
}

/* Code */
.entry-content code {
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 0.9em;
    color: var(--primary-hover);
}

.entry-content pre {
    background: var(--dark-bg);
    color: #e2e8f0;
    padding: 22px 24px;
    border-radius: 12px;
    overflow-x: auto;
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 1.8em 0;
}

.entry-content pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}

/* HR & misc blocks */
.entry-content hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 2.2em 0;
}

.entry-content .page-links {
    margin-top: 24px;
    font-weight: 700;
    color: var(--text-muted);
}

/* --- Tags / Entry Footer --- */
.entry-footer {
    padding: 0 40px;
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 36px 0 40px;
    padding-top: 28px;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.post-tags i {
    color: var(--primary);
    margin-right: 6px;
}

.post-tags a {
    display: inline-block;
    background: var(--light-bg);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 600;
}

.post-tags a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* --- Post Navigation (prev / next) --- */
.post-navigation {
    margin-top: 32px;
}

.post-navigation .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.post-navigation .nav-links > div {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 24px;
    transition: var(--transition);
}

.post-navigation .nav-links > div:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.post-navigation .nav-links > div:only-child {
    grid-column: 1 / -1;
}

.post-navigation .nav-links a {
    display: block;
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    margin-bottom: 7px;
}

.post-navigation .nav-title {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--dark);
}

.post-navigation .nav-links > div:hover .nav-title {
    color: var(--primary);
}

.post-navigation .nav-next {
    text-align: right;
}

/* --- Comments --- */
.comments-area {
    margin-top: 36px;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 34px 40px 40px;
}

.comments-title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.comment-list li {
    padding: 22px 0;
    border-bottom: 1px solid var(--border-color);
}

.comment-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.comment-list .comment-body {
    display: flex;
    gap: 16px;
}

.comment-list img.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex: 0 0 48px;
    object-fit: cover;
}

.comment-list .comment-content {
    flex: 1;
    min-width: 0;
}

.comment-author {
    font-weight: 700;
    color: var(--dark);
}

.comment-author a {
    color: var(--dark);
}

.comment-author a:hover {
    color: var(--primary);
}

.comment-author .says {
    display: none;
}

.comment-metadata {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.comment-metadata a {
    color: var(--text-muted);
}

.comment-metadata a:hover {
    color: var(--primary);
}

.comment-content p {
    font-size: 0.95rem;
    margin-bottom: 0.7em;
}

.comment-content p:last-child {
    margin-bottom: 0;
}

.reply {
    margin-top: 10px;
    font-size: 0.85rem;
}

.reply .comment-reply-link {
    color: var(--primary);
    font-weight: 700;
}

.reply .comment-reply-link:hover {
    color: var(--primary-hover);
}

.children {
    list-style: none;
    padding-left: 32px;
    margin-top: 18px;
    border-left: 2px solid var(--border-color);
}

.comment-list .children li {
    border: none;
    padding: 12px 0;
}

.comment-respond .comment-reply-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.comment-respond .comment-reply-title small {
    font-size: 0.8rem;
    font-weight: 600;
}

.comment-respond .comment-reply-title a {
    color: var(--primary);
}

.comment-notes {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.required {
    color: #ef4444;
}

.comment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}

.comment-form p {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0;
}

.comment-form p.comment-form-comment,
.comment-form p.comment-form-cookies-consent,
.comment-form p.comment-notes,
.comment-form p.form-submit {
    grid-column: 1 / -1;
}

.comment-form label {
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--dark);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--dark);
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    transition: var(--transition);
}

.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(39, 160, 221, 0.15);
}

.comment-form textarea {
    resize: vertical;
    min-height: 130px;
}

.comment-form p.comment-form-cookies-consent {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.comment-form p.comment-form-cookies-consent label {
    font-weight: 500;
    color: var(--text-main);
    font-size: 0.88rem;
}

.comment-form input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
}

.comment-form input[type="submit"] {
    display: inline-block;
    width: auto;
    padding: 14px 34px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px;
}

.comment-form input[type="submit"]:hover {
    background: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(39, 160, 221, 0.3);
}

.comment-pagination {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    font-size: 0.9rem;
    font-weight: 600;
}

.comment-pagination a {
    color: var(--primary);
}

.no-comments {
    color: var(--text-muted);
    font-style: italic;
    padding: 14px 0;
}

/* --- Sidebar Widgets --- */
.widget-area {
    display: grid;
    gap: 24px;
    /* Match .content-main's vertical rhythm so the sidebar doesn't hug the
       header/footer while the article card is inset by 40px. */
    padding-top: 40px;
    padding-bottom: 40px;
    /* Grid items default to min-width:auto, so the sidebar (and each widget)
       could grow wider than the fixed 330px layout column when widget content
       has a large min-content width (e.g. the search form) — letting the
       sidebar stick out past the container. Force it to respect the column. */
    min-width: 0;
}

.widget {
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 26px 24px;
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.widget-title,
.widget h2.wp-block-heading {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 18px;
    padding-bottom: 13px;
    border-bottom: 2px solid var(--primary);
    letter-spacing: -0.2px;
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    padding: 10px 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: 0.93rem;
    line-height: 1.5;
}

.widget ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.widget ul li:first-child {
    padding-top: 0;
}

.widget ul li a {
    display: block;
    color: var(--text-main);
    font-weight: 500;
    transition: var(--transition);
}

.widget ul li a:hover {
    color: var(--primary);
    transform: translateX(4px);
}

.widget .wp-block-latest-posts__post-title {
    font-weight: 700;
    color: var(--dark);
}

.widget .wp-block-latest-posts__post-title:hover {
    color: var(--primary);
}

.widget .wp-block-latest-comments {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Widget search */
.widget .wp-block-search__inside-wrapper {
    display: flex;
    gap: 8px;
}

.widget .wp-block-search__input {
    flex: 1;
    min-width: 0;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 0.93rem;
    color: var(--dark);
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    transition: var(--transition);
}

.widget .wp-block-search__input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(39, 160, 221, 0.15);
}

.widget .wp-block-search__button,
.widget .wp-block-search__button.wp-element-button {
    padding: 11px 20px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 50px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.widget .wp-block-search__button:hover {
    background: var(--primary-hover);
}

.widget .wp-block-search__label {
    font-size: 0.87rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 10px;
    display: block;
}

/* --- Responsive: single post --- */
@media (max-width: 992px) {
    .content-layout,
    .content-layout:has(> .widget-area) {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .widget-area {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

@media (max-width: 768px) {
    .entry-header {
        padding: 26px 22px 0;
    }
    .entry-content {
        padding: 0 22px;
        font-size: 1rem;
    }
    .entry-footer {
        padding: 0 22px;
    }
    article.single-post .post-thumbnail {
        aspect-ratio: 16 / 9;
    }
    .comments-area {
        padding: 26px 22px 30px;
    }
    .comment-form {
        grid-template-columns: 1fr;
    }
    .comment-list .comment-body {
        gap: 12px;
    }
    .children {
        padding-left: 18px;
    }
    .widget-area {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .entry-title {
        font-size: 1.5rem;
        margin-bottom: 24px;
    }
    .entry-meta {
        gap: 8px 14px;
    }
    .post-navigation .nav-links {
        grid-template-columns: 1fr;
    }
    .post-navigation .nav-next {
        text-align: left;
    }
    .entry-content .alignleft,
    .entry-content .alignright {
        float: none;
        max-width: 100%;
        margin: 1.4em 0;
    }
    .entry-content blockquote {
        padding: 22px 20px 22px 54px;
        font-size: 1rem;
    }
    .entry-content blockquote::before {
        left: 20px;
        top: 22px;
        font-size: 1.35rem;
    }
}

/* --- 404 Error Page --- */
.error-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height, 80px));
    padding: 60px 0 80px;
    text-align: center;
}

.error-404 .container {
    width: 100%;
    max-width: 640px;
}

.error-404 .page-header {
    margin-bottom: 24px;
}

.error-404 .error-code {
    font-size: clamp(96px, 18vw, 160px);
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -4px;
    margin-bottom: 8px;
}

.error-404 .page-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    color: var(--dark);
    margin-bottom: 0;
}

.error-404 .error-desc {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    max-width: 520px;
    margin: 0 auto 36px;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.error-actions .btn-primary,
.error-actions .btn-outline {
    min-width: 200px;
    max-width: 280px;
    justify-content: center;
}

.search-form-wrapper {
    max-width: 460px;
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid var(--border-color);
}

.search-form-wrapper h2 {
    font-size: 1.1rem;
    color: var(--dark);
    margin-bottom: 16px;
}

.search-form-wrapper .search-form {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.search-form-wrapper .search-form label {
    flex: 1;
    min-width: 0;
}

.search-form-wrapper .search-field {
    width: 100%;
    height: 52px;
    padding: 0 22px;
    font-size: 1rem;
    color: var(--dark);
    text-align: left;
    background: var(--white);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    outline: none;
    transition: var(--transition);
}

.search-form-wrapper .search-field:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(39, 160, 221, 0.15);
}

.search-form-wrapper .search-submit {
    flex: 0 0 52px;
    width: 52px;
    height: 52px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: 1.1rem;
    cursor: pointer;
    justify-content: center;
    transition: var(--transition);
}

.search-form-wrapper .search-submit:hover {
    background: var(--primary-hover);
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 8px 18px rgba(39, 160, 221, 0.3);
}

@media (max-width: 576px) {
    .error-404 {
        padding: 40px 0 60px;
    }
    .error-actions .btn-primary,
    .error-actions .btn-outline {
        max-width: none;
        width: 100%;
    }
    .search-form-wrapper {
        padding-top: 32px;
    }
}