/*!
Theme Name: Grande Comfort
Theme URI: http://underscores.me/
Author: NIITA STUDIO
Author URI: https://niita.studio
Description: Grande Comfort® Wordpress Theme
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: grande-comfort
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Grande Comfort is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* Animation: Infinite Scroll */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-scroll {
    animation: scroll 20s linear infinite;
}

/* ---------------------------------------------------------
   COMMON UI ELEMENTS
--------------------------------------------------------- */
/* Global Button Styles */
a.btn,
button.btn,
.wp-block-button__link,
.adv-btn {
    min-width: 200px;
    text-align: center;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    padding: var(--btn-lg-py, 12px) var(--btn-lg-px, 32px);
}

/* Enforce Site Options Container Width */
.container {
    max-width: var(--container-max, 100%) !important;
}

/* Focused Container for Blog Articles */
.single-post .gc-container {
    --container-max: 1200px;
}

/* --- High-Priority Navigation & Footer Reset --- */
.site .menu,
.site .sub-menu,
.site nav ul,
.site .gc-navigation ul,
.site .site-footer ul,
.site .footer-block ul,
.site #colophon ul {
    list-style: none !important;
}

.site .menu li,
.site .sub-menu li,
.site nav li,
.site .site-footer li,
.site .footer-block li,
.site #colophon li {
    list-style: none !important;
}

/* Global Typography Defaults */
/* Target tags ONLY if they don't have a specific text utility class. 
   No !important here to allow inline styles and utilities to win. */
.site h1:not([class*="text-"]),
.site .text-h1 {
    font-family: var(--text-h1-family);
    font-size: var(--text-h1-size);
    font-weight: var(--text-h1-weight);
    line-height: var(--text-h1-lh);
    letter-spacing: var(--text-h1-ls);
    color: var(--color-gc-blue);
    margin: 3rem 0 1.5rem;
}

.site h2:not([class*="text-"]),
.site .text-h2 {
    font-family: var(--text-h2-family);
    font-size: var(--text-h2-size);
    font-weight: var(--text-h2-weight);
    line-height: var(--text-h2-lh);
    letter-spacing: var(--text-h2-ls);
    color: var(--color-gc-blue);
    margin: 3rem 0 1.5rem;
}

.site .text-h2-small {
    font-family: var(--text-h2-small-family);
    font-size: var(--text-h2-small-size);
    font-weight: var(--text-h2-small-weight);
    line-height: var(--text-h2-small-lh);
    letter-spacing: var(--text-h2-small-ls);
}

.site h3:not([class*="text-"]),
.site .text-h3 {
    font-family: var(--text-h3-family);
    font-size: var(--text-h3-size);
    font-weight: var(--text-h3-weight);
    line-height: var(--text-h3-lh);
    letter-spacing: var(--text-h3-ls);
    color: var(--color-gc-blue);
    margin: 2.5rem 0 1.25rem;
}

.site h4:not([class*="text-"]),
.site .text-h4 {
    font-family: var(--text-h4-family);
    font-size: var(--text-h4-size);
    font-weight: var(--text-h4-weight);
    line-height: var(--text-h4-lh);
    letter-spacing: var(--text-h4-ls);
    color: var(--color-gc-blue);
}

.site h5:not([class*="text-"]),
.site .text-h5 {
    font-family: var(--text-h5-family);
    font-size: var(--text-h5-size);
    font-weight: var(--text-h5-weight);
    line-height: var(--text-h5-lh);
    letter-spacing: var(--text-h5-ls);
    color: var(--color-gc-blue);
}

/* Utility Class Overrides (Strict) */
.site .text-h1 {
    font-size: var(--text-h1-size) !important;
}

.site .text-h2 {
    font-size: var(--text-h2-size) !important;
}

.site .text-h3 {
    font-size: var(--text-h3-size) !important;
}

.site .text-h4 {
    font-size: var(--text-h4-size) !important;
}

.site .text-h5 {
    font-size: var(--text-h5-size) !important;
}

.site .text-h2-small {
    font-size: var(--text-h2-small-size) !important;
}

.text-p-large {
    font-family: var(--text-p-large-family);
    font-size: var(--text-p-large-size);
    font-weight: var(--text-p-large-weight);
    line-height: var(--text-p-large-lh);
    letter-spacing: var(--text-p-large-ls);
}

.text-p-regular {
    font-family: var(--text-p-regular-family);
    font-size: var(--text-p-regular-size);
    font-weight: var(--text-p-regular-weight);
    line-height: var(--text-p-regular-lh);
    letter-spacing: var(--text-p-regular-ls);
}

.text-p-small {
    font-family: var(--text-p-small-family);
    font-size: var(--text-p-small-size);
    font-weight: var(--text-p-small-weight);
    line-height: var(--text-p-small-lh);
    letter-spacing: var(--text-p-small-ls);
}

sup,
.text-sup {
    font-family: var(--text-sup-family);
    font-size: var(--text-sup-size);
    font-weight: var(--text-sup-weight);
    line-height: var(--text-sup-lh);
    letter-spacing: var(--text-sup-ls);
}

.text-desc {
    font-family: var(--text-desc-family);
    font-size: var(--text-desc-size);
    font-weight: var(--text-desc-weight);
    line-height: var(--text-desc-lh);
    letter-spacing: var(--text-desc-ls);
}

/* --- Content Area Typography --- */
/* Target Paragraphs and Lists ONLY in designated content areas or without utility classes */

/* --- Content Area Typography (Strict for Gutenberg) --- */
/* Ensure standard tags in content follow site options even against browser/Tailwind defaults */

.site :is(.entry-content, .blog-post-content, .prose) h1:not([class*="text-"]) {
    font-size: var(--text-h1-size);
}

.site :is(.entry-content, .blog-post-content, .prose) h2:not([class*="text-"]) {
    font-size: var(--text-h2-size);
}

.site :is(.entry-content, .blog-post-content, .prose) h3:not([class*="text-"]) {
    font-size: var(--text-h3-size);
}

.site :is(.entry-content, .blog-post-content, .prose) h4:not([class*="text-"]) {
    font-size: var(--text-h4-size);
}

.site :is(.entry-content, .blog-post-content, .prose) h5:not([class*="text-"]) {
    font-size: var(--text-h5-size);
}

.site .entry-content p:not([class*="text-"]),
.site .blog-post-content p:not([class*="text-"]),
.site .prose p:not([class*="text-"]),
.site p:not([class*="text-"]) {
    font-family: var(--text-p-regular-family);
    font-size: var(--text-p-regular-size);
    font-weight: var(--text-p-regular-weight);
    line-height: var(--text-p-regular-lh);
    letter-spacing: var(--text-p-regular-ls);
    margin-bottom: 2rem;
}

/* Fix for Description Areas (WYSIWYG paragraphs) */
.site :is(.text-p-small, .text-desc, .text-p-large) p {
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    margin-bottom: 1.5rem;
}

.site :is(.text-p-small, .text-desc, .text-p-large) p:last-child {
    margin-bottom: 0;
}

/* Standard Lists in Content Areas */
.site .entry-content ul:not([class*="menu"]):not([class*="nav"]):not([class*="woocommerce"]),
.site .blog-post-content ul:not([class*="woocommerce"]),
.site .prose ul:not([class*="woocommerce"]),
.site .wp-block-list {
    list-style-type: disc;
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.site .entry-content ol,
.site .blog-post-content ol,
.site .prose ol {
    list-style-type: decimal;
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.site .entry-content li:not([class*="woocommerce"]),
.site .blog-post-content li:not([class*="woocommerce"]),
.site .prose li:not([class*="woocommerce"]),
.site li:not([class*="menu"]):not([class*="nav"]):not(.gc-dots-item):not([class*="woocommerce"]) {
    margin-bottom: 0.75rem;
    font-family: var(--text-p-regular-family);
    font-size: var(--text-p-regular-size);
}

/* --- WooCommerce Account Navigation Fix --- */
.site .woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.site .woocommerce-MyAccount-navigation li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.site .woocommerce-MyAccount-navigation li a {
    display: block !important;
    padding: 1.25rem 1.5rem !important;
    text-decoration: none !important;
    color: var(--color-gc-blue) !important;
    transition: all 0.3s ease !important;
    line-height: 1.2 !important;
}

.site .woocommerce-MyAccount-navigation li.is-active {
    background-color: var(--color-gc-blue);
}

.site .woocommerce-MyAccount-navigation li.is-active a {
    color: white !important;
}

/* Global Horizontal Line Styles */
.site hr,
.site .wp-block-separator {
    border: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin: 4rem auto !important;
    width: 100% !important;
    opacity: 1 !important;
}

/* ---------------------------------------------------------
   ARTICLE CONTENT TYPOGRAPHY (.blog-post-content)
   Scoped strictly to single posts to avoid leaking into ACF modules
--------------------------------------------------------- */
.blog-post-content {
    color: var(--color-gc-blue);
    line-height: 1.7;
}

.blog-post-content p {
    font-family: var(--text-p-regular-family);
    font-size: var(--text-p-regular-size);
    font-weight: var(--text-p-regular-weight);
    line-height: var(--text-p-regular-lh);
    margin-bottom: 2rem;
}

.blog-post-content h2,
.blog-post-content h3,
.blog-post-content h4 {
    margin: 3rem 0 1.5rem;
    color: var(--color-gc-blue);
}

.blog-post-content h2 {
    font-family: var(--text-h2-family);
    font-size: var(--text-h2-size);
    font-weight: var(--text-h2-weight);
    line-height: var(--text-h2-lh);
}

.blog-post-content h3 {
    font-family: var(--text-h1-family);
    /* H1 family often used for stylized headings in this site */
    font-size: var(--text-h3-size);
    font-weight: var(--text-h3-weight);
    line-height: var(--text-h3-lh);
}

.blog-post-content ul,
.blog-post-content ol {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.blog-post-content ul {
    list-style-type: disc;
}

.blog-post-content ol {
    list-style-type: decimal;
}

.blog-post-content li {
    margin-bottom: 0.75rem;
    font-family: var(--text-p-regular-family);
    font-size: var(--text-p-regular-size);
}

.blog-post-content img {
    border-radius: var(--radius-default, 20px);
    margin: 2rem auto;
    /* Centered with margin for blog flow */
    height: auto;
    max-width: 100%;
    display: block;
}

.blog-post-content blockquote {
    padding: 2rem;
    background: #F9FAFB;
    border-left: 4px solid var(--color-gc-yellow);
    border-radius: 0 20px 20px 0;
    margin: 3rem 0;
    font-style: italic;
}

.blog-post-content b,
.blog-post-content strong {
    font-weight: 700;
}

@media (max-width: 767px) {
    .blog-post-content h2 {
        font-size: var(--text-h2-size-m) !important;
    }

    .blog-post-content h3 {
        font-size: var(--text-h3-size-m) !important;
    }

    .blog-post-content p,
    .blog-post-content li {
        font-size: var(--text-p-regular-size-m) !important;
    }
}

/* ---------------------------------------------------------
   SIMPLE PAGE CONTENT TYPOGRAPHY (.entry-content.gc-container)
   Applies to pages without ACF blocks (Privacy, Terms, etc.)
--------------------------------------------------------- */
.entry-content.gc-container {
    color: var(--color-gc-blue);
    line-height: normal;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.entry-content.gc-container p {
    font-family: var(--text-p-regular-family);
    font-size: var(--text-p-regular-size);
    font-weight: var(--text-p-regular-weight);
    line-height: var(--text-p-regular-lh);
    margin-bottom: 1.5rem;
}

.entry-content.gc-container h1,
.entry-content.gc-container h2,
.entry-content.gc-container h3,
.entry-content.gc-container h4,
.entry-content.gc-container h5,
.entry-content.gc-container h6 {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    color: var(--color-gc-blue);
}

.entry-content.gc-container ul,
.entry-content.gc-container ol {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

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

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

.entry-content.gc-container li {
    margin-bottom: 0.5rem;
    font-family: var(--text-p-regular-family);
    font-size: var(--text-p-regular-size);
}

.entry-content.gc-container strong,
.entry-content.gc-container b {
    font-weight: 700;
}

.entry-content.gc-container a {
    color: var(--color-gc-blue);
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.entry-content.gc-container a:hover {
    opacity: 0.7;
}

@media (max-width: 767px) {
    .entry-content.gc-container {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .entry-content.gc-container p,
    .entry-content.gc-container li {
        font-size: var(--text-p-regular-size-m) !important;
    }

    .entry-content.gc-container h1 {
        font-size: var(--text-h1-size-m) !important;
    }

    .entry-content.gc-container h2 {
        font-size: var(--text-h2-size-m) !important;
    }

    .entry-content.gc-container h3 {
        font-size: var(--text-h3-size-m) !important;
    }
}

/* ---------------------------------------------------------
   6. MODULE: WARRANTIES BANNER
--------------------------------------------------------- */
.warranties-banner {
    padding: 2rem 0;
}

.warranties-banner .container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1rem;
}

.warranties-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 4rem;
    /* Increased spacing */
}

.warranty-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s ease;
}

.warranty-item:hover {
    opacity: 0.8;
}

.warranty-icon img {
    height: 32px;
    /* Adjust as needed */
    width: auto;
    display: block;
}

.warranty-text {
    /* "Sup Text" Styles from Options/Hero */
    font-family: var(--text-sup-family, sans-serif);
    font-size: var(--text-sup-size, 0.875rem);
    font-weight: var(--text-sup-weight, 600);
    letter-spacing: var(--text-sup-ls, 0.1em);
    line-height: 1.2;
}

@media (max-width: 768px) {
    .warranties-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* 2 Columns */
        gap: 1.5rem 1rem;
    }

    .warranty-item {
        justify-content: center;
        /* Center items in their grid cell? User asked for "accatastano a due colonne", usually implies stacking. */
        /* Let's keep left aligned but within the grid cell */
        justify-content: flex-start;
    }
}

/* ---------------------------------------------------------
   7. MODULE: ADV SLIDER
--------------------------------------------------------- */
.adv-slider {
    position: relative;
    overflow: hidden;
}

/* Text Column */
.adv-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 10;
}

/* Typography reuse from variables or warranty-text logic */
.sup-text {
    font-family: var(--text-sup-family);
    font-size: var(--text-sup-size);
    font-weight: var(--text-sup-weight);
    letter-spacing: var(--text-sup-ls);
    line-height: 1.2;
}

.adv-title {
    font-family: var(--text-h2-family, sans-serif);
    font-size: 2.5rem;
    /* Fallback */
    font-weight: 700;
    line-height: 1.1;
}

.adv-desc {
    font-size: 1.125rem;
    line-height: 1.6;
}

/* Image Column & Swiper */
.adv-img-col {
    position: relative;
    min-height: 500px;
    /* Ensure height on desktop */
}

.adv-img-col .swiper-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Rounded corners for the swiper container */
.adv-swiper {
    border-radius: 24px;
    /* Default radius */
    overflow: hidden;
}

.adv-slide-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: inherit;
}

/* Responsive */
@media (max-width: 991px) {
    .adv-slider .row {
        flex-direction: column !important;
        /* Stack vertically */
    }

    .adv-text-col {
        padding: 3rem 1.5rem !important;
        min-height: auto;
    }

    .adv-img-col {
        min-height: 350px;
        height: 350px;
        /* Force height on mobile */
    }

    .adv-img-col .swiper-container {
        position: relative;
        /* Normal flow in mobile stack if needed, but height is fixed on parent */
        height: 100%;
    }
}

/* ---------------------------------------------------------
   8. MODULE: PRODUCTS SLIDER
--------------------------------------------------------- */
.products-slider {
    overflow: hidden;
    /* Ensure no horizontal scroll from swiper overflow-visible */
}

.prod-swiper {
    padding-bottom: 4rem;
    /* Space for pagination */
}

.prod-card {
    border: 1px solid #E5E7EB;
    /* tailwind gray-200 equivalent */
    transition: all 0.3s ease;
}

.prod-card:hover {
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
}

/* Pagination specific for products slider */
.prod-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--color-gc-blue, #1e3a8a);
    opacity: 0.2;
    transition: opacity 0.3s ease;
}

.prod-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-gc-blue, #1e3a8a);
}

/* Typography Utilities for Products Slider (based on site options) */
.text-p-large {
    font-family: var(--text-p-large-family, inherit);
    font-size: var(--text-p-large-size, 1.125rem);
    font-weight: var(--text-p-large-weight, 600);
    line-height: var(--text-p-large-lh, 1.4);
    letter-spacing: var(--text-p-large-ls, 0);
}

.text-descriptions {
    font-family: var(--text-descriptions-family, inherit);
    font-size: var(--text-descriptions-size, 0.875rem);
    font-weight: var(--text-descriptions-weight, 400);
    line-height: var(--text-descriptions-lh, 1.5);
    letter-spacing: var(--text-descriptions-ls, 0);
}

.text-topbar {
    font-family: var(--text-topbar-family, inherit);
    font-size: var(--text-topbar-size, 0.75rem);
    font-weight: var(--text-topbar-weight, 600);
    letter-spacing: var(--text-topbar-ls, 0.05em);
    text-transform: uppercase;
}

.text-btn {
    font-family: var(--text-btn-family, inherit);
    font-size: var(--text-btn-size, 1rem);
    font-weight: var(--text-btn-weight, 600);
    letter-spacing: var(--text-btn-ls, 0);
}

/* ---------------------------------------------------------
   9. MODULE: INFO BOX
--------------------------------------------------------- */
.info-box {
    overflow: hidden;
}

.info-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none !important;
    /* Remove shadows */
    border: none !important;
    /* Remove outlines */
    text-align: left;
    /* Left align content */
}

.info-card:hover {
    transform: none;
    /* Cards remain stationary on hover as requested */
}

/* Ensure Info Box CTA follows site button standards */
.ib-cta-btn {
    transition: all var(--transition-speed, 300ms) ease !important;
}

.info-card.is-dark .ib-cta-btn {
    border-color: #fff;
    color: #fff;
}

.info-card.is-dark .ib-cta-btn:hover {
    background-color: #fff;
    color: var(--color-gc-blue, #1e3a8a);
}

.info-card h5 {
    color: inherit;
    /* Should inherit from card text color logic */
}

.info-card .ib-subtitle {
    color: var(--color-gc-blue, #1e3a8a);
}

.info-card .ib-desc {
    color: var(--color-gc-blue, #1e3a8a);
    line-height: 1.8;
}

.info-card.is-dark h5,
.info-card.is-dark .ib-subtitle,
.info-card.is-dark .ib-desc {
    color: #fff;
}

/* Light Beam Animation */
.info-card .light-beam {
    pointer-events: none;
    z-index: 1;
}

.info-card:hover .light-beam {
    transform: translateX(180%) skewX(-20deg) !important;
}

/* Pagination Dots */
.ib-swiper .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--color-gc-blue, #1e3a8a);
    opacity: 0.2;
    transition: all 0.3s ease;
}

.ib-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 24px;
    border-radius: 6px;
}

@media (max-width: 1023px) {
    .info-card {
        padding: 2.5rem !important;
    }
}

/* Responsive Typography Mobile Sizes */
@media (max-width: 767px) {

    h1,
    .text-h1 {
        font-size: var(--text-h1-size-m) !important;
    }

    h2,
    .text-h2 {
        font-size: var(--text-h2-size-m) !important;
    }

    h3,
    .text-h3 {
        font-size: var(--text-h3-size-m) !important;
    }

    h4,
    .text-h4 {
        font-size: var(--text-h4-size-m) !important;
    }

    h5,
    .text-h5 {
        font-size: var(--text-h5-size-m) !important;
    }

    .h3-big,
    .text-h3-big {
        font-size: var(--text-h3-big-size-m) !important;
    }

    .text-p-large {
        font-size: var(--text-p-large-size-m) !important;
    }

    .text-p-regular {
        font-size: var(--text-p-regular-size-m) !important;
    }

    .text-p-small {
        font-size: var(--text-p-small-size-m) !important;
    }

    .text-sup {
        font-size: var(--text-sup-size-m) !important;
    }

    .text-desc {
        font-size: var(--text-desc-size-m) !important;
    }
}

/* ==========================================================================
   DOTS + IMAGE MODULE
   ========================================================================== */
.gc-module-dots-image .gc-dots-item {
    border-bottom: 1px solid #E5E5E0;
    color: var(--color-gc-blue);
}

.gc-module-dots-image .gc-dot {
    background-color: var(--color-gc-yellow);
    color: var(--color-gc-blue);
    border: none;
    transition: all 0.3s ease;
}

.gc-module-dots-image .gc-item-title {
    color: #A0A0A0;
    /* Gray for inactive titles */
}

.gc-module-dots-image .gc-dots-item.is-active .gc-item-title {
    color: var(--color-gc-blue);
    font-weight: bold;
}

.gc-module-dots-image .gc-dots-item:hover .gc-arrow {
    transform: translateX(5px);
}

.gc-module-dots-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-default);
}

.gc-module-dots-image .prose {
    max-width: none;
}

@media (max-width: 1024px) {
    .gc-module-dots-image .gc-dot {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* ==========================================================================
   LAUNCHES MODULE
   ========================================================================== */
.gc-module-launches .gc-launch-item img {
    border-radius: 10px;
}

.gc-module-launches .text-p-small {
    line-height: 1.25 !important;
}

.gc-module-launches .gc-launch-logo svg {
    height: 100%;
    width: auto;
    max-width: 150px;
}

@media (max-width: 768px) {
    .gc-module-launches .grid {
        gap: 2rem;
    }
}

/* ---------------------------------------------------------
   10. POST METADATA PILLS (Categories & Tags)
--------------------------------------------------------- */
.cat-links a,
.tags-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 1rem;
    border-radius: 99px;
    font-family: var(--text-desc-family, inherit);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Category Pills: Light Blue Theme */
.cat-links a {
    background-color: var(--color-light-azure, #f0f7ff);
    color: var(--color-gc-blue, #1e3a8a);
    border: 1px solid rgba(30, 58, 138, 0.05);
}

.cat-links a:hover {
    background-color: var(--color-gc-blue, #1e3a8a);
    color: #ffffff;
}

/* Tag Pills: Subtle Gray/Transparent Theme */
.tags-links a {
    background-color: #f9f9fb;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

.tags-links a:hover {
    border-color: var(--color-gc-blue, #1d3683);
    color: var(--color-gc-blue, #1d3683);
}


/* ---------------------------------------------------------
   11. RELATED POSTS SECTION
--------------------------------------------------------- */
.related-posts-section {
    border-top: none;
}

.related-post-card {
    background: transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.related-post-card .aspect-video img {
    border-radius: 16px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.related-post-card h4 {
    font-size: 1.125rem;
    line-height: 1.3;
}

.related-post-card:hover h4 {
    color: var(--color-gc-yellow, #f8da5b);
}

/* Category Pills Refinement (ensure horizontal alignment without ul) */
.cat-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}


.related-post-card {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(29, 54, 131, 0.04);
}

.related-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(29, 54, 131, 0.08);
}

.related-post-card .aspect-video {
    margin: -1.5rem -1.5rem 1.5rem -1.5rem;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ==========================================================================
   12. BLOG ARCHIVE PAGE
   Dynamic editorial layout — varied card sizes, pill labels, generous air
   ========================================================================== */

/* --- Featured Post Hero --- */
.blog-archive-featured {
    padding: 5rem 0 4.5rem;
    border-bottom: 1px solid #ebebeb;
}

.blog-archive-featured-inner {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 5rem;
    align-items: center;
}

.blog-archive-featured-text {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.blog-archive-featured-title {
    margin: 0.25rem 0 0.5rem;
    color: var(--color-gc-blue);
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-size: clamp(2rem, 4.5vw, 3.5rem);
}

.blog-archive-featured-title a {
    text-decoration: none;
    color: inherit;
}

.blog-archive-featured-excerpt {
    margin: 0;
    line-height: 1.75;
    color: #6b7280;
    max-width: 40ch;
}

.blog-archive-featured-cta {
    margin-top: 0.75rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-gc-blue);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.blog-archive-featured-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-default, 8px);
    overflow: hidden;
    background: #f3f4f6;
}

.blog-archive-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- PILL STYLES: real pill shape with outline, palette-based --- */
.blog-archive .cat-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.blog-archive .cat-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.65rem;
    border-radius: 9999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    background-color: transparent;
    color: var(--color-gc-blue, #1d3683);
    border: 1.5px solid var(--color-gc-blue, #1d3683);
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.blog-archive .cat-links a:hover {
    background-color: var(--color-gc-blue, #1d3683);
    color: #fff;
}

.blog-archive .tags-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

.blog-archive .tags-links a {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    color: #9ca3af;
    border: 1.5px solid #d1d5db;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.blog-archive .tags-links a:hover {
    border-color: var(--color-gc-blue, #1d3683);
    color: var(--color-gc-blue, #1d3683);
}

/* --- Category Section --- */
.blog-archive-category-section {
    padding: 5rem 0;
    border-top: 1px solid #ebebeb;
}

.blog-archive-section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 3.5rem;
    gap: 1rem;
}

.blog-archive-section-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 0.4rem;
}

.blog-archive-section-title {
    margin: 0;
    color: var(--color-gc-blue);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-archive-section-title::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-gc-blue);
    flex-shrink: 0;
}

.blog-archive-view-all {
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gc-blue);
    opacity: 0.65;
    transition: opacity 0.2s ease;
}

.blog-archive-view-all:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════
   CASPER BLOG STYLES (PHASE 2)
   ═══════════════════════════════════════════ */

.blog-archive-casper {
    color: var(--color-gc-blue);
}

/* Category Nav Bar */
.cat-nav-wrapper {
    display: flex;
    justify-content: space-between;
    width: 100%;
    scrollbar-width: none;
}

.cat-nav-wrapper::-webkit-scrollbar {
    display: none;
}

.cat-nav-item .cat-icon-circle {
    width: 80px;
    height: 80px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cat-nav-item:hover .cat-icon-circle {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.cat-nav-item.active .cat-icon-circle {
    background-color: var(--color-gc-yellow);
    border-color: var(--color-gc-yellow);
    box-shadow: 0 8px 20px rgba(255, 233, 0, 0.15);
}

.cat-nav-item.active .cat-name {
    color: black;
}

/* Sidebar Styling */
.editors-picks-list .side-pick {
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 2rem;
}

.editors-picks-list .side-pick:last-child {
    border-bottom: 0;
}

aside h3 {
    text-transform: none !important;
    /* Title NO uppercase */
}

/* Article Cards */
.blog-card-casper {
    transition: all 0.3s ease;
}

.blog-card-title-casper a {
    color: inherit;
    text-decoration: none;
}

.cat-label-pill span,
.blog-card-cat-casper a {
    display: inline-block;
    transition: all 0.3s ease;
}

/* Pagination Adjustments */
.blog-archive-casper .page-numbers {
    width: 48px;
    height: 48px;
    font-size: 14px;
}

/* Grid Header */
.grid-header h2 {
    font-size: 2rem;
}

/* Mobile Adjustments */
@media (max-width: 1023px) {
    .blog-hero-casper {
        padding: 4rem 0;
    }
}

@media (max-width: 767px) {
    .blog-casper-grid {
        grid-template-columns: 1fr;
    }

    .cat-nav-wrapper {
        justify-content: flex-start;
        gap: 1.5rem;
    }

    .cat-nav-item .cat-icon-circle {
        width: 64px;
        height: 64px;
    }

    /* GC Hero Mobile H1 Override */
    .site :is(.entry-content, .blog-post-content, .prose) .gc-module-hero h1,
    .site .gc-module-hero h1,
    .gc-module-hero .text-h1 {
        font-size: var(--text-h1-size-m) !important;
    }
}

/* GC Hero H1 Margin Override (All devices) */
.site :is(.entry-content, .blog-post-content, .prose) .gc-module-hero h1,
.site .gc-module-hero h1,
.gc-module-hero .text-h1 {
    margin: 1rem 0 1.5rem !important;
}

/* ---------------------------------------------------------
   CUSTOM MODULES MOBILE OVERRIDES (Overrides PHP Inline Styles)
--------------------------------------------------------- */
@media (max-width: 767px) {

    /* Image-Text Module Mobile Reset */
    .gc-module-image-text h2 {
        font-size: var(--text-h2-size-m) !important;
    }

    .gc-module-image-text .text-p-small {
        font-size: var(--text-p-small-size-m) !important;
    }

    /* Launches Module Mobile Reset */
    .gc-module-launches h3 {
        font-size: var(--text-h3-size-m) !important;
    }

    .gc-module-launches .text-p-large {
        font-size: var(--text-p-large-size-m) !important;
    }

    .gc-module-launches h4 {
        font-size: var(--text-h2-small-size-m) !important;
    }

    .gc-module-launches .text-p-small {
        font-size: var(--text-p-small-size-m) !important;
    }

    /* Dots-Image Module Mobile Reset */
    .gc-module-dots-image h2 {
        font-size: var(--text-h2-small-size-m) !important;
    }

    .gc-module-dots-image h3 {
        font-size: var(--text-h3-size-m) !important;
    }

    .gc-module-dots-image .text-h4 {
        font-size: var(--text-h4-size-m) !important;
    }

    /* Reviews Module Mobile Reset */
    .gc-reviews .h3-big {
        font-size: var(--text-h3-big-size-m) !important;
    }

    .gc-reviews h4 {
        font-size: var(--text-h4-size-m) !important;
    }

    .gc-reviews .p-large {
        font-size: var(--text-p-large-size-m) !important;
    }

    .gc-reviews .p-small {
        font-size: var(--text-p-small-size-m) !important;
    }

    /* Info-Box Module Mobile Reset */
    .info-box h3 {
        font-size: var(--text-h3-size-m) !important;
    }

    .info-box h4 {
        font-size: var(--text-h4-size-m) !important;
    }

    .info-box h5 {
        font-size: var(--text-h5-size-m) !important;
    }

    .info-box .text-p-small {
        font-size: var(--text-p-small-size-m) !important;
    }

/* ---------------------------------------------------------
   MIXED CONTENT CONTAINER FIX
--------------------------------------------------------- */
.entry-content:not(.gc-container) > *:not([class*="wp-block-acf"]):not([class*="alignfull"]):not([class*="gc-module-"]) {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-gutter);
    padding-right: var(--container-gutter);
}

/* ---------------------------------------------------------
   15. WOOCOMMERCE PREMIUM UI OVERRIDES
   --------------------------------------------------------- */

/* Alerts & Messages */
.woocommerce-error, 
.woocommerce-info, 
.woocommerce-message {
    max-width: var(--container-max);
    margin: 2rem auto !important;
    padding: 1.5rem 2rem !important;
    border: none !important;
    border-radius: var(--radius-default) !important;
    background-color: var(--color-light-azure, #f0f7ff) !important;
    color: var(--color-gc-blue) !important;
    box-shadow: 0 4px 15px rgba(29, 54, 131, 0.05) !important;
    font-size: 0.9375rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
}

.woocommerce-error {
    background-color: #fff5f5 !important;
    color: #c53030 !important;
    border-left: 4px solid #c53030 !important;
}

.woocommerce-message {
    background-color: #f0fff4 !important;
    color: #276749 !important;
    border-left: 4px solid #276749 !important;
}

.woocommerce-info {
    border-left: 4px solid var(--color-gc-blue) !important;
}

.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before {
    content: none !important; /* Hide default WC icons if using custom flex layout */
}

/* Global Form Elements for WC */
.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea {
    padding: 1rem !important;
    border-radius: var(--radius-default) !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.3s ease !important;
    background-color: #ffffff !important;
}

.woocommerce form .form-row input.input-text:focus, 
.woocommerce form .form-row textarea:focus {
    border-color: var(--color-gc-yellow) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(248, 218, 91, 0.2) !important;
}

.woocommerce-MyAccount-content {
    background: #fff;
    padding: 2rem;
    border-radius: var(--radius-default);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}