/* Mobile Toggle Start */
.mobile-overlay .mega-menu-wrap,
.mobile-overlay #mega-menu-wrap-primary-menu,
.mobile-overlay .mega-menu-toggle,
.mobile-overlay ul.mega-menu {
    display: none !important;
}

/* ── Mobile Overlay — hidden by default ─────────────────── */
.mobile-overlay {
    position: fixed;
    top: 156px;
    /* left: -100%;           */
    width: 100%;
    height: 100%;
    /* background: #000; */
    z-index: 999999;
    transition: left 0.4s ease;
    overflow-y: auto;
    visibility: hidden;
    /* extra: prevent tab focus when hidden */
    display: none;
}

.mobile-overlay.open {
    left: 0;
    display: block;
    visibility: visible;
}

/* ── Mobile Menu List ─────────────────────────────────────── */
.mobile-overlay .mobile-menu-list {
    display: block !important;
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-list>li>a {
    display: block;
    padding: 6px 0;
    color: white;
    font-size: 14px;
    text-decoration: none;
    position: relative;
    width: fit-content;
    padding-right: 0px;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

.mobile-close {
    display: none;
}

.mobile-menu-list .sub-menu {
    padding-left: 15px;
    display: none;
    width: 100%;
}

.mobile-menu-list li.menu-item-has-children>a::after {
    position: absolute;
    content: "";
    width: 7px;
    height: 7px;
    background-image: url(../images/menu-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    left: auto;
    top: 15px;
    right: 0px;
    background-position: center center;
    transition: 0.4s;
}

.mobile-menu-list li.open>.sub-menu {
    display: block;
}

/* ── Desktop vs Mobile Actions ───────────────────────────── */

/* Hide mobile actions on desktop */
.mobile-actions-bar {
    display: none;

}

/* On mobile: hide desktop actions, show mobile actions */
@media (max-width: 991px) {
    .desktop-actions {
        display: none !important;
    }

    div#kn-popup-content a {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .mobile-actions-bar {
        display: block;
        margin-top: 0;
    }

    .header-widget .two-buttons {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        background: black;
        padding: 20px 0;
        gap: 10px;
    }

    .header-widget .one-buttons {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        ;
    }

    .header-widget .one-buttons a.login-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 21px 20px 79px 20px;
        position: relative;
        width: 100%;
        /* --p: 63px;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--p)), 0 100%); */

    }

    .header-widget .one-buttons a.login-btn::before {
        /* background: url(../images/login-bg-blue.svg); */
        background: #0067AE;
        background-position: center;
        background-repeat: no-repeat;
        height: 117% !important;
        width: 116% !important;
        position: absolute;
        content: "";
        left: -11%;
        top: -47%;
        z-index: -1;
        box-shadow: rgb(0 0 0 / 66%) 0px 6px 7px;
        rotate: -10deg;
    }

    .header-widget .one-buttons a.login-btn:hover:before {
        background: #FF9901;
    }

    /* .header-widget .one-buttons a.login-btn:hover {
        background: #FF9901;
    } */


    .container.nav-flex {
        position: unset;
    }

    .mobile-toggle {
        display: block;
        width: 35px;
        height: 23px;
        position: absolute;
        right: 10px;
        top: 18px;
        background: url(../images/hamburger.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 99;
    }

    .mobile-toggle.open {
        background: url(../images/menu-close.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .top-left li {
        font-size: 13px;
        line-height: 16px;
    }

    .container.nav-flex {
        display: flex;
        justify-content: space-between;
        width: 97% !important;
        max-width: 100% !important;
        align-items: center;
        flex-direction: column;
        padding-bottom: 0 !important;
    }

    .top-left {
        width: 100%;
    }

    nav.mobile-nav {
        padding: 20px 20px 20px 54px;
        background: black;
    }

    .header-widget {
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 0;
    }

    .mobile-menu-list .sub-menu {
        border-top: 3px solid orange;
        padding: 7px 0px 18px 0px;
    }

    .mobile-menu-list .sub-menu li a {
        color: white;
        font-family: var(--font-Oswald);
        font-size: 13px;
        text-transform: uppercase;
        font-weight: 400;
        padding: 1px 0 1px 32px;
        display: block;
        position: relative;
    }
}

/* ── Hide desktop mega menu on mobile ────────────────────── */
@media (max-width: 991px) {

    .menu-area #mega-menu-wrap-primary-menu,
    .menu-area .mega-menu-wrap {
        display: none !important;
    }
}

/* Mobile Toggle End */

/* Desktop */
.mega-popup {
    display: none;
}

div#kn-popup-overlay {
    display: none;
}

.mega-popup {
    display: none !important;
}

div#kn-podcast-popup-overlay {
    display: none;
}

/* Mobile */
@media (max-width: 991px) {


    div#kn-podcast-popup-content a p,
    div#kn-popup-content a p {
        display: block;
        font-size: 13px;
        text-transform: uppercase;
        font-family: var(--font-Oswald) !important;
        color: var(--whitecolor) !important;
        font-weight: 400;
        line-height: 18px;
    }

    div#kn-podcast-popup-content a img,
    div#kn-popup-content a img {
        width: 40px;
        height: 40px;
        object-fit: cover;
    }

    div#kn-podcast-popup-content a {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    div#kn-popup-content {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .mega-popup {
        display: block;
    }

    .mega-popup-content,
    div#kn-podcast-popup-content {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .mega-popup-inner,
    .kn-popup-box,
    .kn-popup-box {
        padding: 70px 25px 20px 25px;
        height: 100%;
    }

    div#kn-podcast-popup-overlay,
    div#kn-popup-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 9999;
        overflow-y: auto;
    }

    div#kn-podcast-popup-overlay.active,
    div#kn-popup-overlay.active {
        display: block;
    }

    span#kn-podcast-popup-close {
        color: white;
        font-size: 20px;
        position: absolute;
        right: 30px;
        top: 30px;
    }

    .mobile-event-dropdown {
        width: 100%;
        border-top: 3px solid orange;
        padding: 7px 0px 18px 0px;
        width: 100%;
    }



    .kn-mega-menu .kn-right-menu {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        row-gap: 7px;
        display: none;
    }

    .kn-mega-menu .kn-left-menu ul li {
        color: white !important;
        padding: 1px 0;
        color: #fff;
        font-size: 13px;
        cursor: pointer;
        font-weight: 400 !important;
        letter-spacing: 1px;
        padding-left: 36px;
    }

    .kn-mega-menu.kn-podcast-mega-menu {
        border-top: 3px solid orange;
        padding: 7px 0px 18px 0px;
        width: 100%;
    }

    .kn-mega-menu .kn-left-menu {
        width: 100%;
        padding: 6px 0;
    }

    .mobile-podcast-dropdown {
        width: 100%;
    }

    .mega-right {
        display: none;
        /* hide desktop posts */
    }

    .mega-popup {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 9999;
        overflow-y: auto;
    }


    .mega-close,
    span#kn-podcast-popup-close,
    span#kn-event-popup-close,
    span#kn-popup-close {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 0px;
        color: #fff;
        cursor: pointer;
        background: url(../images/menu-close.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        width: 20px;
        height: 20px;

    }

}

/* Mobile Menu End */

/* ── Mobile Gallery Panel ────────────────────────────────── */
.mobile-gallery-panel {
    display: none;
    padding-top: 10px;
}

.mobile-gallery-panel.active {
    display: block;
}

/* Back button */
.mobile-gallery-back {
    color: #fff;
    font-size: 14px;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 15px;
    display: inline-block;
}

/* Hide the right column (desktop posts grid) on mobile */
.mobile-gallery-panel .mega-right {
    display: none;
}

/* Categories list styled for mobile */
.mobile-gallery-panel .mega-left {
    width: 100%;
}

.mobile-gallery-panel .mega-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-gallery-panel .mega-categories li {
    padding: 12px 0;
    color: #fff;
    font-size: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

.mobile-gallery-panel .mega-categories li.active {
    color: #f00;
    /* your brand accent */
}

/* ── Gallery toggle button (matches + on other menu items) ── */




.gallery-toggle-btn {
    width: 7px;
    height: 7px;
    background-image: url(../images/menu-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    left: 8px;
    top: 14px;
    right: 0px;
    background-position: center center;
    transition: 0.4s;
    position: relative;
}

.mobile-menu-list>li {
    position: relative;
}

span.menu-toggle-btn {
    width: 7px;
    height: 7px;
    background-image: url(../images/menu-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    top: 13px;
    left: 10px;
    background-position: center center;
    transition: 0.4s;
    position: relative;
}

/* ── Galleries menu item wraps dropdown ─────────────────── */

/* ── Gallery dropdown ────────────────────────────────────── */
.mobile-gallery-dropdown {
    border-top: 3px solid orange;
    padding: 7px 0px 18px 0px;
    width: 100%;
}

.mobile-gallery-dropdown .mega-right {
    display: none;
}

.mobile-gallery-dropdown .mega-left {
    width: 100%;
}

.mobile-gallery-dropdown .mega-categories {
    list-style: none;
    padding: 0;
    margin: 0;
}


/* ── Responsive ──────────────────────────────── */
@media (max-width: 991px) {}

/* ── Home Page Banner Slider ──────────────────────────────── */

/* =============================================================
   MEDIA PAGE FEED GRID STYLING
   ============================================================= */

/* Media Archive Feed Grid */
.kn-media-archive-feed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    row-gap: 50px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 15px;
    box-sizing: border-box;
}

/* Individual Media Item Card */
.kn-media-archive-feed .kn-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    box-shadow: 0px 0px 7px 4px rgb(0 0 0 / 25%);
    padding: 20px;
    border-radius: 20px;
}

/* Hover effect */
.kn-media-archive-feed .kn-item:hover {
    /* Kansas Nation Red */
    transform: translateY(-5px);
    box-shadow: 0 0 7px 4px #e0183787;
}

/* Left side (Image/Video Container) */
.kn-media-archive-feed .kn-media-left {
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
}

.kn-media-archive-feed .kn-media-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Video wrapper */
.kn-media-archive-feed .kn-video {
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.kn-media-archive-feed .kn-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    color: #fff;
    background: rgba(226, 35, 26, 0.8);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.kn-media-archive-feed .kn-video:hover .kn-play {
    background: #e2231a;
}

/* Right side (Text Container) */
.kn-media-archive-feed .kn-media-right {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}

/* Headline/Source */
.kn-media-archive-feed .kn-headline {
    display: none;
    color: #777777;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    letter-spacing: 0.5px;
}

/* Title */
.kn-media-archive-feed .kn-title {
    margin: 0 0 0 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.25;
}

.kn-media-archive-feed .kn-title a {
    display: inline-block;
    color: #000000;
    font-family: var(--font-arvo) !important;
    font-size: 20px !important;
    font-weight: 600;
    line-height: 27px;
    text-transform: uppercase;
    margin: 2px auto 15px;
}

.kn-media-archive-feed .kn-title a:hover {
    color: #e2231a;
}

/* Date */
.kn-media-archive-feed .kn-date {
    margin-top: auto;
    font-size: 13px;
    color: #888888;
}

/* Pagination Styles */
.kn-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    font-size: 16px;
    font-weight: 600;
}

.kn-pagination .page-numbers {
    text-decoration: none;
    color: #0056b3;
    /* Inactive Page Link Blue */
    padding: 0 5px;
    transition: color 0.2s ease;
}

.kn-pagination .page-numbers.current {
    color: #e5a93b;
    /* Active Page Gold/Orange */
}

.kn-pagination .page-numbers.next,
.kn-pagination .page-numbers.prev {
    color: #888888;
    text-transform: uppercase;
}

/* Separator using CSS pseudo-element */
.kn-pagination .page-numbers:not(:last-child)::after {
    content: "|";
    margin-left: 12px;
    margin-right: 7px;
    color: #cccccc;
    font-weight: 300;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .kn-media-archive-feed {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        row-gap: 50px;
    }
}

@media (max-width: 600px) {
    .kn-media-archive-feed {
        grid-template-columns: 1fr;
        gap: 20px;
        row-gap: 50px;

    }
}

/* =============================================================
   SINGLE POST PAGE STYLING (Moved from single.php)
   ============================================================= */
.kn-single-post-container {
    max-width: 1140px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #333;
    line-height: 1.6;
}

.kn-single-post .entry-title {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.25;
    color: #111;
    margin: 0 0 12px 0;
}

.kn-single-post .entry-meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.kn-single-post .entry-meta a {
    color: #666;
    text-decoration: none;
}

.kn-single-post .entry-meta a:hover {
    text-decoration: underline;
}

.kn-single-post .post-thumbnail {
    margin-bottom: 30px;
    text-align: left;
}

.kn-single-post .post-thumbnail img {
    max-width: 100%;
    height: auto;
    max-height: 600px;
    border-radius: 4px;
    display: block;
}

.kn-single-post .entry-content {
    font-size: 1rem;
    color: #222;
}

.kn-single-post .entry-content p {
    margin-bottom: 20px;
}

.kn-single-post .entry-content h2,
.kn-single-post .entry-content h3,
.kn-single-post .entry-content h4 {
    color: #111;
    margin-top: 30px;
    margin-bottom: 15px;
    font-weight: 700;
}

.back-to-media-wrapper {
    margin-bottom: 25px;
}

.back-to-media-btn {
    display: inline-flex;
    align-items: center;
    background-color: #0067AE;
    color: #ffffff !important;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none !important;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease;
}

.back-to-media-btn:hover {
    background-color: #e2231a;
}

div#left-area {
    width: 100%;
    padding: 0 0 30px 0 !important;
}

div#sidebar {
    display: none;
}

.et_right_sidebar #main-content .container:before {
  display: none;
}