/* CSS Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #000;
} */

/* Font Classes */
.font-grotesk {
    font-family: var(--font-family-base);
    font-weight: 500;
    letter-spacing: 0px;
    font-size: 30px;
    line-height: 48px;
}
.font-grotesk-2 {
    font-family: var(--font-family-base);
    font-weight: 500;
    letter-spacing: 0px;
    font-size: 16px;
    line-height: 48px;
    letter-spacing: 0px;
}

.container {
    margin: 0 auto !important;
}

/* Utility Classes */
.min-h-screen { min-height: 100vh; }
.bg-white { background-color: white; }
.bg-black { background-color: black; }
.bg-gray-700 { background-color: #374151; }
.bg-gray-600 { background-color: #4B5563; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-gray-300 { background-color: #d1d5db; }
.text-black { color: var(--color-text); }
.text-white { color: var(--color-white); }
.text-gray-300 { color: #d1d5db; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Spacing */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-8 { padding-top: 2rem; }
.py-10 { padding-top: 55px;}
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-8 { margin: 2rem 0 0 0; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-8 { margin-top: 2rem; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-2px { gap: 20px; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-12 { gap: 3rem; }
.pb-2 { padding-bottom: 20px; }

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

/* Grid */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }

/* Typography */
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-base { font-size: 30px; line-height: 48px; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.leading-\[48px\] { line-height: 48px; }
.leading-\[1\.4\] { line-height: 1.4; }
.leading-\[30px\] { line-height: 30px; }
.tracking-\[-0\.245px\] { letter-spacing: -0.245px; }

/* Positioning */
.relative { position: relative; }
.fixed { position: fixed; }
.bottom-4 { bottom: 1rem; }
.bottom-8 { bottom: 2rem; }
.right-4 { right: 1rem; }
.right-8 { right: 2rem; }
.z-50 { z-index: 50; }

/* Sizing */
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-12 { width: 3rem; }
.w-15 { width: 3.75rem; }
.w-28 { width: 7rem; }
.w-36 { width: 9rem; }
.w-full { width: 100%; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-12 { height: 3rem; }
.h-15 { height: 3.75rem; }
.h-48 { height: 12rem; }

/* Border */
.border { border-width: 1px; }
.border-black { border-color: black; }
.border-gray-300 { border-color: #d1d5db; }
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }

/* Effects */
.transition-all { 
    transition-property: all; 
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    transition-duration: 150ms; 
}
.shadow-lg { 
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 
}

/* Object fit */
.object-cover { object-fit: cover; }

/* Hover States */
.hover\:bg-black:hover { background-color: black; }
.hover\:bg-gray-50:hover { background-color: #f9fafb; }
.hover\:bg-gray-600:hover { background-color: #4B5563; }
.hover\:text-white:hover { color: white; }

/* Category Button Styles - use style guide btn-primary */
.category-btn.btn.btn-primary {
    border: 1px solid var(--color-text);
    background-color: var(--color-white) !important;
    padding: 0 29.5px;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--color-text-light) !important;
    border-radius: 8px;
    text-decoration: none;
    letter-spacing: -0.25px;
    line-height: 2.875;
    width: auto;
    outline: none;
    transition-duration: 0.4s;
    cursor: pointer;
    height: 49px;
    min-width: 144px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hover and focus states */
.category-btn.btn.btn-primary:hover,
.category-btn.btn.btn-primary:focus {
    background-color: var(--color-text) !important;
    color: var(--color-white) !important;
}

/* Active state */
.category-btn.btn.btn-primary.active {
    background-color: var(--color-text) !important;
    color: var(--color-white) !important;
    border: 1px solid var(--color-text) !important;
}

.category-btn.btn.btn-primary.active:hover,
.category-btn.btn.btn-primary.active:focus {
    background-color: var(--color-text) !important;
    color: var(--color-white) !important;
}

/* Sort Select - use style guide */
.select2-container {
    width: 261px !important;
}

.select2-container select {
    width: 261px !important;
}

/* Make sure Select2 rendered element has the right width */
.select2-container .select2-selection--single {
    width: 261px !important;
}

/* Select2 dropdown has a width of 261px */
.select2-container .select2-dropdown {
    width: 261px !important;
}

/* Override to ensure news listing block uses the right style */
.block-news .select2-container {
    width: 261px !important;
}

/* Fix Select2 selection element to not cover the container border */
.block-news .select2-container--default .select2-selection--single {
    width: calc(261px - 2px) !important; /* Subtract 2px for left and right borders */
    height: auto !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 1px !important; /* Add margin to create space from container border */
    padding: 15px 19px !important; /* Adjust padding to account for margin */
}

/* Style the main container with proper border and styling */
.block-news .select2.select2-container--default {
    width: 261px !important;
    font-family: 'neue-haas-grotesk-display', sans-serif !important;
    line-height: 1 !important;
    letter-spacing: -0.25px !important;
    border: 1px solid #000 !important;
    border-radius: 7.5px !important;
    background: #fff !important;
    font-weight: 500 !important;
    padding: 0 !important; /* Remove padding from container */
}

.block-news .select2-container .select2-dropdown {
    width: 261px !important;
    position: relative;
    z-index: 9999;
}

/* Style the selection text */
.block-news .select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0 !important;
    padding-right: 0 !important;
    color: #000 !important;
    line-height: 1 !important;
}

/* Style for placeholder option (disabled) */
.block-news .select2-results__option[aria-disabled="true"] {
    display: none !important; /* Hide disabled placeholder in dropdown */
}

/* Style the arrow */
.block-news .select2-container--default .select2-selection--single .select2-selection__arrow {
    background: url('../../assets/images/icon-arrow-down.svg') no-repeat center center !important;
    background-size: contain !important;
    right: 19px !important; /* Adjust for new margin */
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition-duration: 0.3s !important;
    width: 24.97px !important;
    height: 11.13px !important;
}

.block-news .select2-container--default .select2-selection--single[aria-expanded="true"] .select2-selection__arrow {
    transform: translateY(-50%) rotateX(180deg) !important;
}

.block-news .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

/* Style the dropdown */
.block-news .select2-dropdown {
    border-radius: 7.5px !important;
    border: 1px solid #000 !important;
    overflow: auto !important;
    width: 261px !important;
}

.block-news .select2-container .select2-search--dropdown {
    display: none !important;
}

.block-news .select2-results__option {
    margin-left: 0 !important;
    background: #fff !important;
    margin-bottom: 0 !important;
    line-height: 3 !important;
    padding: 0 20px !important;
    font-weight: 500 !important;
    transition-duration: 0.4s !important;
}

/* Only highlight the truly active sort option, not the Select2 highlighted one */
.block-news .select2-results__option.active-sort-option {
    background: #000 !important;
    color: #fff !important;
}

/* Override Select2 default highlight when it's not the active option */
.block-news .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable:not(.active-sort-option) {
    background: #f8f9fa !important;
    color: #000 !important;
}

/* Keep Select2 selected state for active option only */
.block-news .select2-container--default .select2-results__option--selected.active-sort-option {
    background: #000 !important;
    color: #fff !important;
}

.block-news .select2-container--open .select2-dropdown--below {
    transform: translateY(6px) !important;
}

.block-news .select2-container--open .select2-dropdown--above {
    transform: translateY(-6px) !important;
}

/* Tablet responsive styles - move dropdown below filter tabs */
@media screen and (max-width: 1024px) {
    /* Make the filter header container flex-column on tablet */
    .block-news .flex.items-center.justify-between.mb-6 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }
    
    /* Ensure filter tabs take full width */
    .block-news .filter-tabs {
        width: 100% !important;
        order: 1 !important;
    }
    
    /* Move dropdown to second row and align to right */
    .block-news .select2-container {
        order: 2 !important;
        align-self: flex-end !important;
        width: 100% !important;
    }
    
    /* Ensure dropdown container maintains proper styling */
    .block-news .select2.select2-container--default {
        width: 100% !important;
    }
}

/* Mobile responsive adjustments */
@media screen and (max-width: 768px) {
    /* On mobile, dropdown can be full width or maintain 261px based on design preference */
    .block-news .select2-container {
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .block-news .select2.select2-container--default {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .block-news .select2-container .select2-selection--single {
        width: calc(100% - 2px) !important;
        max-width: calc(261px - 2px) !important;
    }
    
    .block-news .select2-container .select2-dropdown {
        width: 100% !important;
        max-width: 100% !important;
        z-index: 9999 !important;
    }
    
    .block-news .select2-dropdown {
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* Article Cards */
.article-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Image container với overflow hidden */
.article-card > a {
    position: relative;
    display: block;
    padding-bottom: 72.727272727272727272727272727273%;
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
}

.article-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    transition-duration: 0.3s;
    display: block;
    max-width: none !important;
}

.article-card > a:hover .article-image {
    transform: scale(1.02);
}

/* Custom cursor for article images */
.article-card > a:first-child:hover {
    cursor: url("../../assets/images/explore-hover.png") 34 8, pointer !important;
}

/* Remove custom cursor for title */
.article-card > a:last-child:hover {
    cursor: default !important;
}

.article-title {
    font-family: var(--font-family-heading);
    font-size: 21px;
    font-weight: 400;
    color: #0D0D0D;
    line-height: 30px;
    letter-spacing: -0.245px;
    padding-bottom: 18px;
}

.article-card a{
    -webkit-text-stroke: 0px transparent !important;
}

@media(min-width: 640px){
    .article-title {
        padding-bottom: 38px;
    }
}


/* Block News Container - Override theme constraints */
.block-news {
    font-family: var(--font-family-base-2);
}

.block-news-full-width {
    max-width: none !important; /* Override theme's default max-width constraint */
    width: 100% !important;
}

/* Ensure News block container doesn't inherit theme width constraints */
.wp-block-acf-news-listing {
    max-width: none !important;
    width: 100% !important;
}

.wp-block-acf-news-listing .block-news-full-width {
    max-width: none !important;
    width: 100% !important;
}

/* More specific overrides for theme constraints */
.entry-content .wp-block-acf-news-listing {
    max-width: none !important;
    width: 100% !important;
}

.entry-content .block-news-full-width {
    max-width: none !important; 
    width: 100% !important;
}

/* Override alignfull constraints specifically for news block */
.block-news-full-width.alignfull {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* Ensure content wrapper is not constrained */
.entry-content .block-news-full-width.alignfull {
    max-width: none !important;
    width: 100vw !important;
}

/* Our own container max-width inside the full-width section */
.block-news .max-w-container {
    max-width: 1380px !important;
    margin: 0 auto;
    width: 100%;
    padding-top: 16px;
}

/* Ultimate override to prevent theme CSS from constraining our news block */
.wp-block-acf-news-listing,
.wp-block-acf-news-listing *,
.block-news-full-width,
.block-news-full-width * {
    max-width: none !important;
}

/* News Grid */
#articlesGrid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 1500px) {
    .block-news .max-w-container {
        max-width: none !important;
    }
}
@media (min-width: 768px) {
    #articlesGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }   
}

@media (min-width: 1024px) {
    #articlesGrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Responsive Sort Dropdown */
@media (max-width: 768px) {
    .flex.items-center.justify-between {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }
    
    .filter-tabs {
        width: 100%;
    }
    
    .select2-container {
        align-self: center;
        width: 100% !important;
    }
    
    .block-news .select2-container {
        width: 100% !important;
        position: relative;
        z-index: 9999;
    }
    
    /* Make sure Select2 rendered elements are full-width on mobile */
    .select2-container select {
        width: 100% !important;
    }
    
    .block-news .select2-container .select2-selection--single {
        width: calc(100% - 2px) !important;
    }
    
    .block-news .select2.select2-container--default {
        width: 100% !important;
    }
    
    .block-news .select2-container .select2-dropdown {
        width: 100% !important;
        position: relative;
        z-index: 9999;
    }
}

/* Pagination Styles */
.paginations {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    
}

.paginations-container {
    display: flex;
    align-items: center;
    gap: 20px;
}

.paginations-numbers {
    display: flex;
    gap: 10px;
}

/* Base styles for all pagination elements - High specificity to override theme styles */
.paginations a.page-numbers,
.paginations span.page-numbers,
.paginations button.page-numbers {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 0.25rem !important;
    background-color: white !important;
    color: black !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
    font-size: 16px !important;
    position: relative !important;
    border: none !important;
    font-family: var(--font-family-base) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: normal !important;
}

/* Current page styles - có underline đen */
.paginations .page-numbers.current {
    background-color: white !important;
    color: #1B1817 !important;
    font-weight: 400 !important;
    border: none !important;
    box-shadow: none !important;
}

.paginations .page-numbers.current::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background-color: black !important;
}

/* Disabled states */
.paginations .page-numbers.disabled {
    color: #d1d5db !important;
    cursor: not-allowed !important;
    background-color: white !important;
    border: none !important;
    box-shadow: none !important;
}

.paginations .page-numbers.disabled:hover {
    background-color: white !important;
    color: #d1d5db !important;
    border: none !important;
    box-shadow: none !important;
}


.paginations .page-numbers.prev.disabled,
.paginations .page-numbers.next.disabled {
    border-color: #d1d5db !important;
    background-color: white !important;
    color: #d1d5db !important;
}

/* Extra high specificity overrides for button elements */
.paginations button.page-numbers.ajax-page {
    background: white !important;
    background-color: white !important;
    border: none !important;
    color: black !important;
    outline: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-style: normal !important;
    text-decoration: none !important;
}

.paginations button.page-numbers.ajax-page:focus {
    background: white !important;
    background-color: white !important;
    color: black !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.paginations button.page-numbers.ajax-page:active {
    background: white !important;
    background-color: white !important;
    color: black !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Loading States */
.block-news-content-section {
    transition: opacity 0.3s ease;
    margin-bottom: 100px;
}

/* No Posts Found */
.no-posts-found {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

/* Responsive Design */
@media (max-width: 639px){
    .font-grotesk {
        font-size: 22.5px;
        line-height: 36px;
    }
    .block-news .max-w-container{
        padding-top: 10px;
    }
}

@media (min-width: 640px) {
    .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
    .sm\:mb-16 { margin-bottom: 50px; }
    .sm\:mb-12 { margin-bottom: 3rem; }
    .sm\:mb-0 { margin-bottom: 0; }
    .sm\:gap-2 { gap: 0.5rem; }
    .sm\:gap-5 { gap: 1.25rem; }
    .sm\:gap-12 { gap: 3rem; }
    .sm\:flex-row { flex-direction: row; }
    .sm\:items-center { align-items: center; }
    .sm\:text-\[30px\] { font-size: 30px; }
    .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
    .sm\:w-36 { width: 9rem; }
    .sm\:w-auto { width: auto; }
    .sm\:w-\[261px\] { width: 261px; }
    .sm\:w-15 { width: 3.75rem; }
    .sm\:w-6 { width: 1.5rem; }
    .sm\:h-15 { height: 3.75rem; }
    .sm\:h-64 { height: 16rem; }
    .sm\:h-6 { height: 1.5rem; }
    .sm\:bottom-8 { bottom: 2rem; }
    .sm\:right-8 { right: 2rem; }
    .sm\:leading-\[30px\] { line-height: 30px; }
}

@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:flex-row { flex-direction: row; }
    .lg\:items-center { align-items: center; }
    .lg\:justify-between { justify-content: space-between; }
    .lg\:h-\[328px\] { height: 328px; }
}