/**
 * Kolaras Hulchal - Cross-Breakpoint Responsive Overrides & Accessibility Enhancements
 *
 * Consolidated responsive rules, touch-target refinements (>= 44px),
 * overflow protection, and print/contrast media queries.
 *
 * @package Kolaras_Hulchal
 * @version 1.0.1
 */

/* 1. Global Viewport & Overflow Protection */
html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Ensure images, media and SVG icons never breach layout boundaries */
img,
video,
iframe,
svg,
canvas {
    max-width: 100%;
    height: auto;
}

/* 2. Global Touch Target Sizing (Accessibility >= 44px) */
button,
input[type="button"],
input[type="submit"],
.kh-share-btn,
.kh-pagination-item a,
.kh-pagination-item .current,
.kh-footer-social-icon-btn,
.footer-connect-link,
.kh-mobile-menu-toggle,
.kh-hero-nav-btn {
    min-height: 44px;
    min-width: 44px;
}

/* Adjust inline share button flex alignment to preserve padding */
.kh-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
}

.kh-footer-social-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kh-pagination-item a,
.kh-pagination-item .current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 3. Breakpoint: Desktop Ultra-Wide (>= 1440px) */
/* @media (min-width: 1440px) {
    .kh-container {
        max-width: 1320px;
    }
} */

/* 4. Breakpoint: Laptop / Standard Desktop (1024px - 1439px) */
/* @media (max-width: 1439px) and (min-width: 1024px) {
    .kh-container {
        max-width: 1140px;
    }
} */

@media (min-width: 1024px) {
    .kh-container {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }
}
/* 5. Breakpoint: Tablet & Small Desktop Collapse (< 1024px) */
@media (max-width: 1023px) {
    .kh-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .kh-homepage-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Move sidebar below main content on tablet/mobile */
    .kh-homepage-primary {
        width: 100%;
    }

    .kh-sidebar {
        width: 100%;
        max-width: 100%;
    }

    .kh-grid-5-col {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }

    .kh-hero-row {
        flex-direction: column;
    }

    .kh-hero-col-left,
    .kh-hero-col-right {
        width: 100%;
    }

    .kh-trending-panel {
        margin-top: 1.5rem;
    }
}

/* 6. Breakpoint: Tablet Portrait (< 768px) */
@media (max-width: 767px) {
    /* Header Top Bar & Branding */
    .kh-top-bar-inner {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .kh-branding-inner {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .kh-brand-logo-area {
        justify-content: center;
    }

    .kh-header-widget-area {
        justify-content: center;
    }

    /* Grid Collapses */
    .kh-grid-5-col,
    .kh-grid-4-col,
    .kh-grid-3-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .kh-quick-access-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.75rem;
    }

    /* Article Reading Typography */
    .kh-article-title {
        font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
    }

    .kh-article-meta {
        gap: 0.75rem;
        font-size: 0.75rem;
    }

    .kh-single-article {
        padding: 1.25rem;
    }

    .kh-author-bio-box {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    /* Footer 5-Column Collapse */
    .kh-footer-grid.kh-grid-5-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .kh-bottom-bar-inner {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
}

/* 7. Breakpoint: Mobile Portrait (< 480px) */
@media (max-width: 479px) {
    /* News Card Single Column Stack */
    .kh-grid-5-col,
    .kh-grid-4-col,
    .kh-grid-3-col {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.25rem;
    }

    .kh-quick-access-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .kh-district-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .kh-footer-grid.kh-grid-5-col {
        grid-template-columns: repeat(1, 1fr);
        gap: 1.5rem;
    }

    .kh-hero-caption {
        padding: 1rem;
    }

    .kh-hero-headline {
        font-size: 1.25rem;
    }

    .kh-hero-meta {
        display: none;
    }

    .kh-share-buttons-list {
        width: 100%;
        justify-content: flex-start;
    }

    .kh-share-btn {
        flex: 1;
        min-width: 120px;
    }
}

/* 8. Breakpoint: Ultra-Small Screens (320px - 360px) */
@media (max-width: 360px) {
    .kh-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .kh-quick-access-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .kh-quick-card {
        padding: 0.625rem 0.375rem;
    }

    .kh-quick-card-title {
        font-size: 0.75rem;
    }

    .kh-card-title {
        font-size: 0.875rem;
    }
}
/* 9. Print Stylesheet Refinements */
@media print {
    .site-header,
    .kh-breaking-strip-wrap,
    .kh-homepage-sidebar,
    .kh-article-share-bar,
    .site-footer,
    .kh-pagination-nav {
        display: none !important;
    }

    body {
        background: #FFF !important;
        color: #000 !important;
        font-size: 12pt !important;
    }

    .kh-container,
    .kh-single-article {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: none !important;
    }

    a {
        text-decoration: underline !important;
        color: #000 !important;
    }
}

/* 10. High-Contrast Accessibility Mode */
@media (prefers-contrast: high) {
    :root {
        --kh-navy-dark: #000000;
        --kh-navy-main: #0B132B;
        --kh-red-primary: #B90000;
        --kh-border: #000000;
    }

    .kh-article-badge,
    .kh-card-badge,
    .kh-trending-num-box {
        border: 1px solid #FFF;
    }
}
/* =========================================================
   HERO - MOBILE / TABLET RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {

    /* -----------------------------------------
       HERO ARROWS - MOBILE/TABLET HIDDEN
       ----------------------------------------- */

    .kh-hero-slider-container .kh-slider-arrow,
    .kh-hero-slider-container #kh-hero-prev,
    .kh-hero-slider-container #kh-hero-next {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }


    /* -----------------------------------------
       HERO CONTROLS - HIDE DOTS / PAUSE
       ----------------------------------------- */

    .kh-hero-slider-container .kh-hero-controls,
    .kh-hero-slider-container .kh-slider-dots,
    .kh-hero-slider-container .kh-slider-playpause,
    .kh-hero-slider-container #kh-hero-playpause {
        display: none !important;
    }


    /* -----------------------------------------
       HERO BREAKING NEWS BADGE
       ----------------------------------------- */

    .kh-hero-slider-container .kh-hero-badge {
        font-size: 0.62rem !important;
        line-height: 1.2 !important;
        padding: 0.2rem 0.5rem !important;
        border-radius: 3px !important;
    }


    /* -----------------------------------------
       HERO READ MORE BUTTON
       ----------------------------------------- */

    .kh-hero-slider-container .kh-hero-cta {
        font-size: 0.7rem !important;
        line-height: 1.2 !important;
        padding: 0.4rem 0.75rem !important;
        border-radius: 4px !important;
    }


    /* -----------------------------------------
       TOUCH SWIPE
       ----------------------------------------- */

    .kh-hero-slider-container {
        touch-action: pan-y;
        -webkit-user-select: none;
        user-select: none;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 576px) {

    .kh-hero-slider-container .kh-hero-badge {
        font-size: 0.58rem !important;
        padding: 0.18rem 0.45rem !important;
    }

    .kh-hero-slider-container .kh-hero-cta {
        font-size: 0.66rem !important;
        padding: 0.35rem 0.65rem !important;
    }
}