/* ==========================================================================
   SK News Portal — Header CSS (Fixed v3)
   All layout + search + mobile + overlay issues resolved
   ========================================================================== */

/* ── Variables ── */
:root {
    --sk-accent           : #e9ab08;
    --sk-header-bg        : #ffffff;
    --sk-header-border    : #e8e8e8;
    --sk-nav-bg           : #1a1a1a;
    --sk-nav-link         : #ffffff;
    --sk-topbar-bg        : #111111;
    --sk-topbar-text      : #cccccc;
    --sk-topbar-icon      : #888888;
    --sk-topbar-icon-hover: var(--sk-accent);
    --sk-header-height    : 68px;
    --sk-topbar-height    : 36px;
    --sk-trans            : 0.2s ease;
    --sk-max-w            : 1280px;
    --sk-px               : 24px;
    --sk-drawer-w         : 280px;
    --sk-drawer-z         : 400;
    --sk-overlay-z        : 350;
    --sk-header-z         : 100;
}

/* ══════════════════════════════════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════════════════════════════════ */
.bn-top-bar {
    background  : var(--sk-topbar-bg);
    color       : var(--sk-topbar-text);
    height      : var(--sk-topbar-height);
    font-size   : 12px;
    line-height : var(--sk-topbar-height);
    position    : relative;
    z-index     : calc(var(--sk-header-z) + 1);
}

.top-bar-inner {
    padding         : 0 var(--sk-px);
    height          : 100%;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    box-sizing      : border-box;
}

.top-bar-date { font-size: 12px; white-space: nowrap; }

/* ── Social icons ── */
.social-icons-list {
    display     : flex;
    align-items : center;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    gap         : 2px;
}

.social-icons-list li { display: flex; }

.social-icons-list a {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 28px;
    height          : 28px;
    color           : var(--sk-topbar-icon);
    border-radius   : 4px;
    text-decoration : none;
    line-height     : 1;
    transition      : color var(--sk-trans), background var(--sk-trans);
}

.social-icons-list a:hover {
    color      : var(--sk-topbar-icon-hover);
    background : rgba(255,255,255,.08);
}

.social-icons-list svg { display: block; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   SITE HEADER SHELL
   ══════════════════════════════════════════════════════════════════════════ */
.site-header {
    position      : relative;
    background    : var(--sk-header-bg);
    border-bottom : 1px solid var(--sk-header-border);
    z-index       : var(--sk-header-z);
    transition    : box-shadow var(--sk-trans);
}

.site-header.is-scrolled,
.sticky-header-enabled .site-header.is-scrolled {
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

.sticky-header-enabled .site-header {
    position : sticky;
    top      : 0;
}

/* ── Section wrapper ── */
.section-wrapper {
    max-width  : var(--sk-max-w);
    margin     : 0 auto;
    padding    : 2px var(--sk-px);
    width      : 100%;
    box-sizing : border-box;
}

/* ── Header row ── */
.sk-header-row {
    display     : flex;
    align-items : center;
    gap         : 8px;
    min-height  : var(--sk-header-height);
}

/* ══════════════════════════════════════════════════════════════════════════
   BRANDING
   ══════════════════════════════════════════════════════════════════════════ */
.sk-logo-wrap {
    flex-shrink : 0;
    line-height : 0;
    display     : flex;
    align-items : center;
}

.sk-logo-wrap img,
.site-logo img {
    max-height : 70px;
    max-width  : 180px;
    width      : auto;
    display    : block;
}

.site-branding { flex-shrink: 0; }

.site-title {
    margin      : 0;
    font-size   : 22px;
    font-weight : 700;
    line-height : 1.2;
}

.site-title a {
    color           : var(--sk-accent);
    text-decoration : none;
}

.site-description {
    margin      : 2px 0 0;
    font-size   : 12px;
    color       : #888;
    line-height : normal;
}

/* ══════════════════════════════════════════════════════════════════════════
   PRIMARY NAVIGATION
   ══════════════════════════════════════════════════════════════════════════ */
.main-navigation {
    flex      : 1;
    min-width : 0;
}

.main-navigation ul,
ul.menu.primary-menu {
    display     : flex;
    align-items : center;
    list-style  : none;
    margin      : 0;
    padding     : 0;
    flex-wrap   : nowrap;
}

.main-navigation ul li,
.menu.primary-menu > li {
    position    : relative;
    display     : flex;
    align-items : center;
}

.menu.primary-menu > li > a {
    display         : flex;
    align-items     : center;
    height          : var(--sk-header-height);
    padding         : 0 13px;
    font-size       : 14px;
    font-weight     : 600;
    color           : inherit;
    text-decoration : none;
    white-space     : nowrap;
    border-bottom   : 2px solid transparent;
    transition      : color var(--sk-trans), border-color var(--sk-trans);
}

.menu.primary-menu > li > a:hover,
.menu.primary-menu > li.current-menu-item > a,
.menu.primary-menu > li.current-menu-ancestor > a {
    color        : var(--sk-accent);
    border-color : var(--sk-accent);
}

/* Dropdown arrow */
.menu.primary-menu > li.menu-item-has-children > a::after {
    content        : '';
    display        : inline-block;
    width          : 0;
    height         : 0;
    margin-left    : 5px;
    border-left    : 4px solid transparent;
    border-right   : 4px solid transparent;
    border-top     : 4px solid currentColor;
    vertical-align : middle;
    opacity        : 0.55;
    transition     : transform var(--sk-trans);
}

.menu.primary-menu > li.menu-item-has-children:hover > a::after {
    transform : rotate(180deg);
}

/* ── Sub-menu dropdown ── */
.menu.primary-menu .sub-menu {
    display       : none;
    position      : absolute;
    top           : calc(100% + 1px);
    left          : 0;
    min-width     : 200px;
    background    : #fff;
    border        : 1px solid #e8e8e8;
    border-radius : 8px;
    box-shadow    : 0 8px 24px rgba(0,0,0,.10);
    list-style    : none;
    margin        : 0;
    padding       : 6px;
    z-index       : calc(var(--sk-header-z) + 50);
}

.menu.primary-menu > li:hover > .sub-menu,
.menu.primary-menu > li:focus-within > .sub-menu { display: block; }

.menu.primary-menu .sub-menu li { display: block; width: 100%; }

.menu.primary-menu .sub-menu a {
    display         : block;
    height          : auto;
    padding         : 8px 14px;
    font-size       : 13px;
    font-weight     : 400;
    color           : #333;
    text-decoration : none;
    border-radius   : 5px;
    border-bottom   : none;
    white-space     : nowrap;
    transition      : background var(--sk-trans), color var(--sk-trans);
}

.menu.primary-menu .sub-menu a:hover {
    background : #f5f5f5;
    color      : var(--sk-accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER TOOLS
   ══════════════════════════════════════════════════════════════════════════ */
.sk-header-tools {
    display     : flex;
    align-items : center;
    gap         : 6px;
    margin-left : auto;
    flex-shrink : 0;
}

.bn-search-trigger {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 36px;
    height          : 36px;
    background      : transparent;
    border          : none;
    border-radius   : 6px;
    cursor          : pointer;
    color           : inherit;
    transition      : background var(--sk-trans), color var(--sk-trans);
}

.bn-search-trigger:hover,
.bn-search-trigger.active {
    background : rgba(0,0,0,.06);
    color      : var(--sk-accent);
}

.sk-subscribe-btn {
    display         : inline-flex;
    align-items     : center;
    gap             : 6px;
    padding         : 7px 15px;
    background      : var(--sk-accent);
    color           : #fff !important;
    border-radius   : 6px;
    font-size       : 13px;
    font-weight     : 600;
    text-decoration : none;
    white-space     : nowrap;
    transition      : opacity var(--sk-trans);
    line-height     : 1;
}

.sk-subscribe-btn:hover { 
    opacity: 0.88; 
    color: white !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE TOGGLE
   ══════════════════════════════════════════════════════════════════════════ */
.sk-menu-toggle {
    display         : none;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 5px;
    width           : 40px;
    height          : 40px;
    background      : transparent;
    border          : none;
    border-radius   : 6px;
    cursor          : pointer;
    padding         : 0;
    flex-shrink     : 0;
    color           : inherit;
}

.menu-toggle-bar {
    display       : block;
    width         : 22px;
    height        : 2px;
    background    : currentColor;
    border-radius : 2px;
    transition    : transform 0.25s ease, opacity 0.25s ease, width 0.25s ease;
}

/* Animate to X when mobile open */
.site-header.mobile-menu-open .sk-menu-toggle .menu-toggle-bar:nth-child(1) {
    transform : translateY(7px) rotate(45deg);
}
.site-header.mobile-menu-open .sk-menu-toggle .menu-toggle-bar:nth-child(2) {
    opacity : 0;
    width   : 0;
}
.site-header.mobile-menu-open .sk-menu-toggle .menu-toggle-bar:nth-child(3) {
    transform : translateY(-7px) rotate(-45deg);
}

/* ══════════════════════════════════════════════════════════════════════════
   SEARCH DROPDOWN
   FIX: use .is-visible class, not [hidden] attribute alone
   ══════════════════════════════════════════════════════════════════════════ */
.header-search-dropdown {
    display     : none;        /* always hidden by default */
    background  : #f8f8f8;
    border-top  : 1px solid #e8e8e8;
    padding     : 14px 0;
}

/* FIX: JS adds .is-visible — this overrides the hidden attribute */
.header-search-dropdown.is-visible {
    display : block;
}

.header-search-dropdown .search-form {
    display     : flex;
    align-items : center;
    gap         : 8px;
}

.header-search-dropdown .search-field {
    flex          : 1;
    padding       : 10px 16px;
    border        : 1px solid #ddd;
    border-radius : 8px;
    font-size     : 14px;
    outline       : none;
    background    : #fff;
    transition    : border-color var(--sk-trans);
}

.header-search-dropdown .search-field:focus {
    border-color : var(--sk-accent);
}

.header-search-dropdown .search-submit {
    padding       : 10px 22px;
    background    : var(--sk-accent);
    color         : #fff;
    border        : none;
    border-radius : 8px;
    font-size     : 14px;
    font-weight   : 600;
    cursor        : pointer;
    white-space   : nowrap;
    transition    : opacity var(--sk-trans);
}

.header-search-dropdown .search-submit:hover { opacity: 0.88; }

/* ══════════════════════════════════════════════════════════════════════════
   MENU OVERLAY
   FIX: background + z-index were commented out — restored
   ══════════════════════════════════════════════════════════════════════════ */
.menu-overlay {
    display    : none;
    position   : fixed;
    inset      : 0;
    cursor     : pointer;
}

.menu-overlay.is-active { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT 1 — Classic  (Logo Left | Nav Center | Tools Right)
   ══════════════════════════════════════════════════════════════════════════ */
.sk-header-layout-1 .main-navigation {
    padding-left : 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT 2 — Centered  (Logo Row + Full Nav Bar)
   ══════════════════════════════════════════════════════════════════════════ */

/* Branding row wrapper — needed for absolute logo centering */
.sk-header-layout-2 .sk-header-row-branding-wrap {
    position      : relative;
    border-bottom : 1px solid var(--sk-header-border);
}

.sk-header-layout-2 .sk-row-branding {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    min-height      : var(--sk-header-height);
    padding         : 0 var(--sk-px);
    max-width       : var(--sk-max-w);
    margin          : 0 auto;
    box-sizing      : border-box;
    position        : relative;
}

/* Logo absolutely centered so tools don't push it */
.sk-header-layout-2 .sk-logo-center {
    position  : absolute;
    left      : 50%;
    top       : 50%;
    transform : translate(-50%, -50%);
}

.sk-header-layout-2 .sk-header-tools { margin-left: 0; }

/* Nav bar */
.sk-header-layout-2 .sk-row-nav {
    background : var(--sk-nav-bg);
}

.sk-header-layout-2 .sk-row-nav .section-wrapper {
    max-width : 100%;
}

.sk-header-layout-2 .main-navigation {
    width  : 100%;
    flex   : none;
    display: flex;
    justify-content: center;
}

.sk-header-layout-2 ul.menu.primary-menu {
    justify-content : center;
}

.sk-header-layout-2 .menu.primary-menu > li > a {
    color         : rgba(255,255,255,.82);
    height        : 46px;
    padding       : 0 18px;
    border-bottom : 2px solid transparent;
}

.sk-header-layout-2 .menu.primary-menu > li > a:hover,
.sk-header-layout-2 .menu.primary-menu > li.current-menu-item > a {
    color        : #fff;
    background   : rgba(255,255,255,.08);
    border-color : rgba(255,255,255,.6);
}

.sk-header-layout-2 .menu.primary-menu > li > a::after {
    border-top-color : rgba(255,255,255,.5);
}

/* Dropdown on dark bg stays white */
.sk-header-layout-2 .sub-menu {
    top : 100%;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT 3 — Minimal  (Hamburger | Logo Center | Tools Right)
   ══════════════════════════════════════════════════════════════════════════ */
.sk-header-layout-3 .sk-header-inner {
    position      : relative;
    border-bottom : 1px solid var(--sk-header-border);
}

.sk-header-layout-3 .sk-header-row {
    justify-content : space-between;
}

.sk-header-layout-3 .sk-logo-wrap {
    position  : absolute;
    left      : 50%;
    top       : 50%;
    transform : translate(-50%, -50%);
}

/* ── Off-canvas drawer ── */
.sk-offcanvas-nav {
    position   : fixed;
    top        : 0;
    left       : calc(-1 * var(--sk-drawer-w) - 30px);
    width      : var(--sk-drawer-w);
    height     : 100vh;
    background : #fff;
    box-shadow : 4px 0 24px rgba(0,0,0,.15);
    z-index    : var(--sk-drawer-z);
    overflow-y : auto;
    transition : left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding    : 60px 0 32px;
}

.sk-offcanvas-nav.is-open { left: 0; }

.sk-offcanvas-close {
    position      : absolute;
    top           : 14px;
    right         : 14px;
    display       : flex;
    align-items   : center;
    justify-content: center;
    width         : 32px;
    height        : 32px;
    background    : #f5f5f5;
    border        : none;
    border-radius : 6px;
    cursor        : pointer;
    color         : #444;
    transition    : background var(--sk-trans);
}

.sk-offcanvas-close:hover { background: #e8e8e8; }

.sk-offcanvas-nav ul.menu {
    flex-direction : column;
    align-items    : stretch;
    padding        : 0 12px;
}

.sk-offcanvas-nav .menu li { display: block; width: 100%; }

.sk-offcanvas-nav .menu > li > a {
    height        : auto;
    padding       : 11px 14px;
    border-bottom : none;
    border-radius : 7px;
    font-size     : 14px;
    display       : flex;
    align-items   : center;
    justify-content: space-between;
}

.sk-offcanvas-nav .menu > li > a:hover {
    background   : #f5f5f5;
    border-color : transparent;
}

.sk-offcanvas-nav .sub-menu {
    position   : static !important;
    box-shadow : none !important;
    border     : 1px solid #f0f0f0 !important;
    border-radius: 6px !important;
    padding    : 4px 0 4px 8px !important;
    margin     : 0 0 4px 8px !important;
    display    : none;
}

.sk-offcanvas-nav li.is-open > .sub-menu { display: block; }

/* Accordion arrow in off-canvas */
.sk-submenu-arrow {
    display        : inline-block;
    width          : 0;
    height         : 0;
    border-left    : 4px solid transparent;
    border-right   : 4px solid transparent;
    border-top     : 4px solid currentColor;
    opacity        : 0.5;
    margin-left    : auto;
    transition     : transform 0.2s;
    flex-shrink    : 0;
}

.sk-offcanvas-nav li.is-open > a .sk-submenu-arrow {
    transform : rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE  ≤ 900px
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    /* Show hamburger on all layouts */
    .sk-menu-toggle { display: flex; }

    /* ── Layout 1 mobile ── */
    .sk-header-layout-1 .main-navigation { display: none; }

    .sk-header-layout-1.mobile-menu-open .main-navigation {
        display    : block;
        position   : fixed;
        left       : 0;
        width      : var(--sk-drawer-w);
        height     : 100vh;
        background : #fff;
        box-shadow : 4px 0 24px rgba(0,0,0,.15);
        z-index    : var(--sk-drawer-z);
        overflow-y : auto;
    }

    .sk-header-layout-1.mobile-menu-open ul.menu.primary-menu {
        flex-direction : column;
        align-items    : stretch;
        padding        : 12px;
        background     : transparent;
    }

    .sk-header-layout-1.mobile-menu-open .menu > li { display: block; width: 100%; }

    .sk-header-layout-1.mobile-menu-open .menu > li > a {
        height        : auto;
        padding       : 11px 14px;
        color         : #222;
        border-bottom : none;
        border-radius : 7px;
    }

    .sk-header-layout-1.mobile-menu-open .sub-menu {
        position      : static !important;
        box-shadow    : none !important;
        border        : 1px solid #f0f0f0 !important;
        border-radius : 6px !important;
        padding       : 4px 0 4px 8px !important;
        display       : none;
    }

    /* ── Layout 2 mobile ── */
    .sk-header-layout-2 .sk-row-nav { display: none; }

    .sk-header-layout-2.mobile-menu-open .sk-row-nav {
        display    : block;
        position   : fixed;
        left       : 0;
        width      : var(--sk-drawer-w);
        height     : 100vh;
        background : #fff;
        box-shadow : 4px 0 24px rgba(0,0,0,.15);
        z-index    : var(--sk-drawer-z);
        overflow-y : auto;
    }

    .sk-header-layout-2.mobile-menu-open .sk-row-nav .section-wrapper {
        padding : 0;
    }

    .sk-header-layout-2.mobile-menu-open .main-navigation {
        display : block;
        width   : 100%;
        justify-content: flex-start;
    }

    .sk-header-layout-2.mobile-menu-open ul.menu.primary-menu {
        flex-direction  : column;
        align-items     : stretch;
        justify-content : flex-start;
        background      : transparent;
        padding         : 12px;
    }

    .sk-header-layout-2.mobile-menu-open .menu > li { display: block; width: 100%; }

    .sk-header-layout-2.mobile-menu-open .menu > li > a {
        height        : auto;
        padding       : 11px 14px;
        color         : #222;
        border-bottom : none;
        border-radius : 7px;
        background    : transparent;
    }

    .sk-header-layout-2.mobile-menu-open .sub-menu {
        position      : static !important;
        box-shadow    : none !important;
        border        : 1px solid #f0f0f0 !important;
        border-radius : 6px !important;
        display       : none;
        background    : #fff !important;
    }

    /* Layout 2 branding row: reset absolute logo centering */
    .sk-header-layout-2 .sk-logo-center {
        position  : relative;
        left      : auto;
        top       : auto;
        transform : none;
    }

    /* Layout 2 branding row: keep tools visible */
    .sk-header-layout-2 .sk-row-branding {
        justify-content : space-between;
    }

    /* ── Layout 3 mobile ── */
    .sk-header-layout-3 .sk-logo-wrap {
        position  : relative;
        left      : auto;
        top       : auto;
        transform : none;
        margin    : 0 auto;
    }

    /* Subscribe — show only icon on small screens */
    .sk-subscribe-btn .btn-text { display: none; }
    .sk-subscribe-btn { padding: 7px 10px; }
}

@media (max-width: 480px) {
    :root { --sk-px: 14px; --sk-drawer-w: 260px; }
    .site-title { font-size: 18px; }
}