/**
 * VSEDIT Theme - Responsive Styles
 * Breakpoints follow the News Portal theme (vipulsquad.com)
 *
 * @package VSEDIT_Theme
 */

/* ============================================
   Large desktop and below: max-width 1200px
   ============================================ */
@media (max-width: 1200px) {
    .mt-container {
        padding: 0 4%;
    }
}

/* ============================================
   Tablet: max-width 979px
   ============================================ */
@media (max-width: 979px) {
    .site-branding {
        justify-content: center;
        text-align: left;
        margin: 0;
    }

    #site-navigation ul li a {
        padding: 0 10px;
    }

    #site-navigation ul li.menu-item-has-children > a,
    #site-navigation ul li.page_item_has_children > a {
        padding-right: 25px;
    }

    #site-navigation ul li.menu-item-has-children > a::before,
    #site-navigation ul li.page_item_has_children > a::before {
        right: 8px;
    }
}

/* ============================================
   Mobile menu + stacked layout: max-width 768px
   ============================================ */
@media (max-width: 768px) {
    /* Layout */
    .site-content > .mt-container {
        display: block;
    }

    #primary.content-area,
    #secondary.widget-area {
        width: 100%;
    }

    #secondary.widget-area {
        margin-top: 30px;
    }

    /* Menu bar: home + hamburger left, switcher + search right */
    .menu-toggle {
        display: block;
    }

    .mt-header-menu-wrap {
        flex: 0 0 auto;
    }

    #site-navigation {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: var(--primary);
        z-index: 99;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    #site-navigation.toggled {
        display: block;
    }

    .sticky-nav #site-navigation {
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }

    #site-navigation > ul {
        display: block;
    }

    #site-navigation ul li {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    #site-navigation ul li:last-child {
        border-bottom: none;
    }

    #site-navigation ul li a,
    #site-navigation ul li.menu-item-has-children > a,
    #site-navigation ul li.page_item_has_children > a {
        border: none;
        padding: 0 50px 0 4%;
    }

    #site-navigation ul li.menu-item-has-children > a::before,
    #site-navigation ul li.page_item_has_children > a::before,
    #site-navigation > ul > li > a::after {
        display: none;
    }

    #site-navigation ul.sub-menu,
    #site-navigation ul.children {
        display: none;
        position: static;
        width: 100%;
        opacity: 1;
        transform: none;
        transition: none;
        box-shadow: none;
        background: rgba(0, 0, 0, 0.08);
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    #site-navigation ul.sub-menu.toggled-sub,
    #site-navigation ul.children.toggled-sub {
        display: block;
    }

    #site-navigation ul.sub-menu li a,
    #site-navigation ul.children li a {
        line-height: 40px;
        padding: 0 50px 0 calc(4% + 15px);
    }

    #site-navigation ul.sub-menu ul li a {
        padding-left: calc(4% + 30px);
    }

    #site-navigation .sub-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        right: 4%;
        top: 8px;
        width: 24px;
        height: 24px;
        padding: 0;
        background: var(--white);
        border: none;
        color: var(--primary);
        cursor: pointer;
        font-size: 12px;
    }

    #site-navigation .sub-toggle i {
        transition: transform 0.2s ease;
    }

    #site-navigation .sub-toggle.is-open i {
        transform: rotate(180deg);
    }

    .np-icon-elements {
        margin-right: 15px;
    }

    .np-header-search-wrapper .search-form-main {
        width: 280px;
        max-width: calc(100vw - 8%);
    }

    /* Single post */
    .np-related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Admin bar is 46px tall under 782px */
@media (max-width: 782px) {
    .admin-bar .np-header-menu-wrapper.sticky-nav {
        top: 46px;
    }
}

/* ============================================
   Phones: max-width 600px
   ============================================ */
@media (max-width: 600px) {
    /* Admin bar scrolls away on small screens */
    .admin-bar .np-header-menu-wrapper.sticky-nav {
        top: 0;
    }

    /* Top header: centered, stacked */
    .np-top-header-wrap .mt-container {
        display: block;
        text-align: center;
    }

    .np-top-left-section-wrapper {
        display: block;
    }

    .date-section {
        display: block;
        margin: 0 0 2px;
    }

    .top-navigation ul {
        justify-content: center;
        row-gap: 6px;
    }

    .top-navigation ul li {
        padding: 0 8px;
    }

    .mt-social-icons-wrapper {
        justify-content: center;
        margin-top: 8px;
    }

    .mt-social-icons-wrapper .social-link a {
        margin: 0 8px;
    }

    /* Logo */
    .np-logo-section-wrapper {
        padding: 15px 0;
    }

    .site-branding {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .site-logo .custom-logo {
        max-height: 80px;
    }

    .site-title {
        font-size: 28px;
        line-height: 36px;
    }

    /* Ticker: caption on top, title below */
    .np-ticker-block {
        display: block;
        margin-top: 25px;
    }

    .ticker-caption {
        display: block;
        margin: 0;
        padding: 5px 60px;
        text-align: center;
        white-space: normal;
    }

    .ticker-content-wrapper {
        padding: 5px 10px;
        text-align: center;
    }

    .ticker-content-wrapper .post-cats-list {
        display: none;
    }

    .news-ticker-title {
        display: block;
        min-height: 0;
    }

    .news-ticker-title > a {
        font-size: 14px;
        line-height: 1.7;
        white-space: normal;
    }

    .ticker-nav {
        top: 4px;
        transform: none;
    }

    .ticker-nav button,
    .ticker-nav button:hover {
        color: var(--white);
    }

    /* Post cards */
    .site-main > article.post,
    .site-main > article.hentry {
        margin-bottom: 30px;
    }

    .np-archive-post-content-wrapper .entry-title {
        font-size: 20px;
    }

    article.hentry h1.entry-title {
        font-size: 24px;
    }

    .entry-content h1 { font-size: 26px; }
    .entry-content h2 { font-size: 24px; }
    .entry-content h3 { font-size: 21px; }
    .entry-content h4 { font-size: 18px; }

    .alignleft,
    .alignright {
        float: none;
        margin: 0 auto 15px;
    }

    /* Post navigation stacks */
    .post-navigation .nav-links {
        flex-direction: column;
        gap: 12px;
    }

    .post-navigation .nav-previous,
    .post-navigation .nav-next {
        width: 100%;
    }

    .np-related-posts-grid {
        grid-template-columns: 1fr;
    }

    /* Comments */
    .comment-metadata,
    .comment-content,
    .reply {
        padding-left: 0;
    }

    .comment-metadata {
        margin-top: 5px;
    }

    .comment-list ol.children {
        margin-left: 8px;
    }

    #respond {
        padding: 15px;
    }

    /* 404 */
    .error404 #primary.content-area {
        padding: 10px 0;
    }

    /* Footer */
    .bottom-footer .mt-container {
        display: block;
        text-align: center;
    }

    #footer-navigation ul {
        justify-content: center;
        margin-top: 4px;
    }
}

/* ============================================
   Small phones: max-width 360px
   ============================================ */
@media (max-width: 360px) {
    .site-title {
        font-size: 24px;
        line-height: 32px;
    }

    .menu-toggle {
        padding: 0 10px;
    }

    .np-icon-elements {
        margin-right: 10px;
    }

    .ticker-caption {
        padding: 5px 55px 5px 10px;
    }
}