/*
 * Joy News Theme — Header CSS
 */

/* ── Sticky header shadow on scroll ──────────────────────────────────────── */
.jns-header.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

/* ── Date format ─────────────────────────────────────────────────────────── */
.jns-header-date {
    font-family: var(--jns-font, 'Hind Siliguri', sans-serif);
    min-width: 180px;
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.jns-site-logo .custom-logo-link { display: block; }
.jns-site-logo .custom-logo { max-height: 72px; width: auto; display: block; }

/* ── Breaking news ticker text ───────────────────────────────────────────── */
.jns-breaking-ticker a {
    color: #fff;
    font-family: var(--jns-font, 'Hind Siliguri', sans-serif);
    white-space: nowrap;
}
.jns-breaking-ticker a:hover { text-decoration: underline; }

/* ── Dropdown menu ───────────────────────────────────────────────────────── */
.jns-nav-inner ul li ul li:last-child a { border-bottom: none; }
.jns-nav-inner ul li ul { border-top: 2px solid var(--jns-accent, #FD0000); }
.jns-nav-inner ul li:hover > a { background: var(--jns-accent, #FD0000); }

/* ── Search icon in nav ──────────────────────────────────────────────────── */
.jns-nav-search {
    display: flex; align-items: center;
    margin-left: auto; padding: 0 10px;
}
.jns-nav-search-btn {
    background: none; border: none; color: #fff;
    cursor: pointer; padding: 6px; border-radius: 4px;
    transition: background .15s;
}
.jns-nav-search-btn:hover { background: rgba(255,255,255,.15); }
.jns-nav-search-btn svg { width: 18px; height: 18px; }

/* ── Search overlay ──────────────────────────────────────────────────────── */
.jns-search-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.75); z-index: 9999;
    align-items: center; justify-content: center;
}
.jns-search-overlay.active { display: flex; }
.jns-search-overlay-inner {
    background: #fff; border-radius: 10px;
    padding: 28px; width: min(580px, 90vw);
}
.jns-search-overlay-inner form {
    display: flex; gap: 0;
    border: 2px solid var(--jns-accent, #FD0000);
    border-radius: 6px; overflow: hidden;
}
.jns-search-overlay-inner input {
    flex: 1; padding: 12px 16px; border: none; outline: none;
    font-size: 16px; font-family: var(--jns-font);
}
.jns-search-overlay-inner button {
    background: var(--jns-accent, #FD0000); color: #fff;
    border: none; padding: 0 20px; cursor: pointer; font-size: 18px;
}
.jns-search-overlay-close {
    display: block; text-align: right; margin-bottom: 10px;
    color: #888; cursor: pointer; font-size: 22px; line-height: 1;
    background: none; border: none;
}

/* ── Dark mode support ───────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* Respect user's system preference — theme color vars override this */
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
    .jns-header, .jns-footer, .jns-sidebar,
    .jns-mobile-share-sticky, .jns-breaking-wrap { display: none !important; }
    .jns-article-content { font-size: 12pt; line-height: 1.6; }
}

/* ── WP Admin bar offset ─────────────────────────────────────────────────── */
.admin-bar .jns-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .jns-header { top: 46px; } }
.admin-bar .jns-single-sidebar--left,
.admin-bar .jns-single-sidebar--right,
.admin-bar .jns-homepage-right { top: 112px; }