/***************************************************************
 * File: responsive.css
 * Purpose: Responsive layout overrides (tablet + mobile)
 * Author: Fizul Islam
 * Note: ONLY responsive overrides here (no base styles).
 ***************************************************************/

/* ╭─────────────────────────────────────────────────────────────╮
   │ TABLET — max-width 1024px                                   │
   ╰─────────────────────────────────────────────────────────────╮*/
   @media (max-width: 1024px) {

    /* Header / Navigation */
    .kc-burger {
        display: block;
    }

    .kc-menu {
        position: fixed;
        inset: 70px 0 0 0;
        flex-direction: column;
        gap: 0;
        background: #fff;
        overflow: auto;
        transform: translateX(-100%);
        transition: transform 0.25s;
        padding: 14px;
    }
    .kc-menu.open {
        transform: translateX(0);
    }

    /* Mega menu to normal dropdown */
    .kc-mega {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    /* Reduce container padding */
    .container {
        padding-inline: 14px;
    }

    /* Optional: reduce large heading sizes */
    h1.entry-title {
        font-size: 28px;
    }
}

/* ╭─────────────────────────────────────────────────────────────╮
   │ MOBILE — max-width 480px                                    │
   ╰─────────────────────────────────────────────────────────────╮*/
@media (max-width: 480px) {

    /* General reset */
    .container {
        padding-inline: 12px;
    }

    /* Hide elements */
    .hide-mobile {
        display: none !important;
    }

    /* Header branding area compact */
    .kc-brand img {
        max-height: 40px;
    }

    /* Breadcrumb text smaller */
    .kc-breadcrumb {
        font-size: 12px;
    }

    /* Breaking ticker space adjust */
    .kc-breaking .container {
        gap: 10px;
    }

    /* Article spacing */
    .entry {
        margin-bottom: 28px;
    }

    .entry-content img {
        margin-inline: auto;
        display: block;
    }

    /* Buttons — full width look */
    .button, .btn, .wp-element-button {
        width: 100%;
        text-align: center;
        padding: 14px 24px;
    }
}

/***************************************************************
 * ADD YOUR RESPONSIVE OVERRIDES BELOW
 ***************************************************************/