/* ================================================================
   KTV CREATIONS — HEADER.CSS
   Base: proven working version. Added: body::before page bg,
   CSS-native positioning (no JS needed for layout), admin-bar
   support, CRM link styles.
   ================================================================ */

/* ── CSS variables ─────────────────────────────────────────────── */
:root {
    --ktv-accent       : #ffd700;
    --ktv-toggle-color : #ffffff;
    --ktv-cart-color   : #ffd700;
    --ktv-search-color : #ffffff;
    --ktv-ann-close    : #ffffff;
    --ktv-ann-hover    : #ffd700;
    --ktv-logo-h       : 60px;
    --ktv-logo-h-mob   : 44px;
    --ktv-scroll-bg    : rgba(10,10,10,0.88);
    --ktv-drawer-bg    : #111111;
    --ktv-dim          : rgba(0,0,0,0.6);
    --ktv-border       : rgba(255,255,255,0.1);
    --ktv-ease         : cubic-bezier(0.25,0.46,0.45,0.94);

    /* structural heights */
    --ktv-adminbar-h : 0px;
    --ktv-ann-h      : 44px;
    --ktv-hdr-h      : 80px;
}

/* WP admin bar — shifts everything down when logged in */
/*.admin-bar { --ktv-adminbar-h: 32px; }*/
/*@media screen and (max-width: 782px) {*/
/*    .admin-bar { --ktv-adminbar-h: 46px; }*/
/*}*/

/* ================================================================
   GLOBAL SITE BACKGROUND
   Uses Customizer variables injected by header.php before wp_head().
   Fallback URL ensures image shows even if Customizer var is unset.
   ================================================================ */

/* Solid colour base — always visible */
html {
    background : var(--global-bg-color, #000) !important;
}

/* Fixed image layer via html::before — sits below all content */
html::before {
    content             : "";
    position            : fixed;
    inset               : 0;
    z-index             : -1;
    pointer-events      : none;
    /* Fallback URL hardcoded so image always shows even if var not set */
    background-image    : var(--global-bg-image,
                            url(https://keonnathomasvision.com/wp-content/uploads/2026/02/ChatGPT-Image-Feb-11-2026-04_52_31-AM.png));
    background-size     : var(--global-bg-size, cover);
    background-position : var(--global-bg-position, center center);
    background-repeat   : no-repeat;
    background-attachment: var(--global-bg-attachment, fixed);
}

/* body — clear any theme default bg so html::before shows through */
body {
    background         : transparent !important;
    margin             : 0;
    padding-top        : calc(var(--ktv-adminbar-h) + var(--ktv-ann-h) + var(--ktv-hdr-h));
}
body.ktv-ann-gone {
    padding-top : calc(var(--ktv-adminbar-h) + var(--ktv-hdr-h));
}

/* ================================================================
   ANNOUNCEMENT BAR
   ================================================================ */
.ktv-ann {
    position        : fixed;
    top             : var(--ktv-adminbar-h);
    left            : 0;
    width           : 100%;
    z-index         : 1002;
    min-height      : var(--ktv-ann-h);
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 8px 52px 8px 16px;
    box-sizing      : border-box;
    background      : rgba(255,255,255,0.1);
    border-bottom   : 1px solid var(--ktv-border);
    color           : #fff;
    overflow        : hidden;
    transition      : max-height .32s ease, opacity .22s ease,
                      padding .3s ease, min-height .3s ease;
}

.ktv-ann-inner { flex: 1; text-align: center; }

.ktv-ann-text,
.ktv-ann-text a {
    font-family    : 'Montserrat', Arial, sans-serif;
    font-size      : 12px;
    font-weight    : 600;
    letter-spacing : 2px;
    text-transform : uppercase;
    color          : #fff;
    text-decoration: none;
}
.ktv-ann-text a:hover { opacity: .75; }

.ktv-ann-x {
    position   : absolute;
    right      : 12px;
    top        : 50%;
    transform  : translateY(-50%);
    background : none;
    border     : none;
    color      : var(--ktv-ann-close, #fff);
    font-size  : 22px;
    line-height: 1;
    cursor     : pointer;
    padding    : 4px 8px;
    transition : color .2s, transform .2s;
}
.ktv-ann-x:hover {
    color      : var(--ktv-ann-hover, #ffd700) !important;
    transform  : translateY(-50%) scale(1.12);
}

/* ================================================================
   HEADER — always transparent until scroll
   ================================================================ */
.ktv-header {
    position   : fixed;
    left       : 0;
    top        : calc(var(--ktv-adminbar-h) + var(--ktv-ann-h));
    width      : 100%;
    z-index    : 1000;
    /* NO background — browser default transparent */
    transition : background .35s var(--ktv-ease),
                 backdrop-filter .35s var(--ktv-ease),
                 box-shadow .3s ease;
}
/* When announcement dismissed */
body.ktv-ann-gone .ktv-header {
    top: var(--ktv-adminbar-h);
}

/* Scroll state — JS adds .scrolled */
.ktv-header.scrolled {
    background              : var(--ktv-scroll-bg) !important;
    backdrop-filter         : blur(12px) !important;
    -webkit-backdrop-filter : blur(12px) !important;
    box-shadow              : 0 2px 20px rgba(0,0,0,0.3) !important;
}

/* Admin bar — add margin so header clears it with breathing room */
/*.admin-bar .ktv-header {*/
/*    margin-top: 31px;*/
/*}*/

/* ── Inner layout: 3-col grid — hamburger | logo | actions ── */
.ktv-header-inner {
    display               : grid;
    grid-template-columns : 1fr auto 1fr;
    align-items           : center;
    width                 : 100%;
    padding               : 12px 24px;
    min-height            : var(--ktv-hdr-h);
    box-sizing            : border-box;
}

/* ── Hamburger ─────────────────────────────────────────────── */
.ktv-burger {
    justify-self    : start;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
    align-items     : center;
    gap             : 5px;
    width           : 44px;
    height          : 44px;
    padding         : 8px;
    /* Subtle dark pill — bars ALWAYS visible on any page bg */
    background      : rgba(0,0,0,0.35);
    border          : 1px solid rgba(255,255,255,0.20);
    border-radius   : 8px;
    cursor          : pointer;
    flex-shrink     : 0;
    backdrop-filter : blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition      : background .2s, border-color .2s, transform .2s;
}
.ktv-burger:hover {
    background  : rgba(0,0,0,0.55);
    border-color: rgba(255,255,255,0.4);
    transform   : scale(1.05);
}
.ktv-burger.is-active {
    background  : rgba(255,215,0,0.15);
    border-color: var(--ktv-accent);
}
.ktv-burger:focus-visible { outline: 2px solid var(--ktv-accent); border-radius: 8px; }

.ktv-burger-bar {
    display          : block;
    width            : 22px;
    height           : 2px;
    /* HARD white — renders even if CSS vars fail to resolve */
    background-color : #ffffff;
    background-color : var(--ktv-toggle-color, #ffffff);
    border-radius    : 2px;
    transition       : transform .3s ease, opacity .3s ease;
}
.ktv-burger.is-active .ktv-burger-bar:nth-child(1) { transform: rotate(45deg)  translate(5.5px,  5.5px); }
.ktv-burger.is-active .ktv-burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ktv-burger.is-active .ktv-burger-bar:nth-child(3) { transform: rotate(-45deg) translate(5.5px, -5.5px); }

/* ── Logo — centered column ────────────────────────────────── */
.ktv-logo {
    justify-self    : center;
    display         : flex;
    align-items     : center;
    justify-content : center;
    max-width       : calc(100vw - 240px);
}
.ktv-logo-link,
.ktv-logo .custom-logo-link { display: block; line-height: 0; }

.ktv-logo-img,
.ktv-logo .custom-logo {
    height       : var(--ktv-logo-h, 60px);
    width        : auto;
    max-width    : 100%;
    object-fit   : contain;
    display      : block;
}

.ktv-site-name {
    font-family    : 'Montserrat', Arial, sans-serif;
    font-size      : clamp(1.2rem, 3vw, 1.8rem);
    font-weight    : 700;
    color          : #fff;
    text-decoration: none;
    text-transform : uppercase;
    letter-spacing : 2px;
    white-space    : nowrap;
}

/* ── RIGHT: icons + admin ──────────────────────────────────── */
/* Both .ktv-header-right (PHP output) and .ktv-right (alias) */
.ktv-header-right,
.ktv-right {
    justify-self : end;
    display      : flex;
    align-items  : center;
    gap          : 6px;
    flex-shrink  : 0;
}

/* Icon buttons */
.ktv-icon-btn {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 38px;
    height          : 38px;
    background      : none;
    border          : none;
    color           : var(--ktv-search-color, #fff);
    font-size       : 16px;
    cursor          : pointer;
    border-radius   : 50%;
    text-decoration : none;
    position        : relative;
    flex-shrink     : 0;
    transition      : color .2s, background .2s, transform .2s;
}
.ktv-icon-btn:hover {
    color      : var(--ktv-accent);
    background : rgba(255,255,255,0.08);
    transform  : scale(1.1);
}

.ktv-cart-btn { color: var(--ktv-cart-color, #ffd700) !important; }

/* Cart badge */
.ktv-cart-badge {
    position        : absolute;
    top: 1px; right: 1px;
    background      : var(--ktv-accent);
    color           : #000;
    border-radius   : 50%;
    min-width       : 16px;
    height          : 16px;
    font-size       : 9px;
    font-weight     : 700;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 0 2px;
    pointer-events  : none;
}
/* Also handle .ktv-badge (in case new PHP ships it) */
.ktv-badge {
    position        : absolute;
    top: 2px; right: 2px;
    background      : var(--ktv-accent);
    color           : #000;
    border-radius   : 50%;
    min-width       : 17px;
    height          : 17px;
    font-size       : 9px;
    font-weight     : 700;
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 0 2px;
    pointer-events  : none;
}

/* ── Admin dropdown ────────────────────────────────────────── */
.ktv-admin-wrap { position: relative; }

.ktv-admin-btn {
    display       : flex;
    align-items   : center;
    gap           : 5px;
    background    : rgba(255,255,255,0.1);
    border        : 1px solid rgba(255,255,255,0.15);
    color         : #fff;
    padding       : 6px 12px;
    border-radius : 20px;
    font-size     : 12px;
    font-weight   : 600;
    font-family   : 'Montserrat', Arial, sans-serif;
    cursor        : pointer;
    white-space   : nowrap;
    transition    : background .2s, border-color .2s, color .2s;
}
.ktv-admin-btn:hover,
.ktv-admin-btn[aria-expanded="true"] {
    background   : rgba(255,215,0,0.15);
    border-color : var(--ktv-accent);
    color        : var(--ktv-accent);
}
.ktv-admin-lbl { font-size: 12px; }
.ktv-caret     { font-size: 9px; transition: transform .2s; }

.ktv-admin-drop {
    position      : absolute;
    top           : calc(100% + 8px);
    right         : 0;
    min-width     : 190px;
    background    : #161622;
    border        : 1px solid rgba(255,255,255,0.1);
    border-radius : 10px;
    box-shadow    : 0 10px 40px rgba(0,0,0,0.55);
    list-style    : none;
    margin        : 0;
    padding       : 6px 0;
    z-index       : 10000;
    opacity       : 0;
    visibility    : hidden;
    pointer-events: none;
    transform     : translateY(-8px);
    transition    : opacity .2s, visibility .2s, transform .2s;
}
.ktv-admin-drop.is-open {
    opacity       : 1;
    visibility    : visible;
    pointer-events: auto;
    transform     : translateY(0);
}
.ktv-admin-drop li { margin: 0; padding: 0; }
.ktv-admin-drop a {
    display         : flex;
    align-items     : center;
    gap             : 10px;
    padding         : 10px 16px;
    color           : rgba(255,255,255,0.85);
    font-size       : 12px;
    font-family     : 'Montserrat', Arial, sans-serif;
    text-decoration : none;
    transition      : background .15s, color .15s;
}
.ktv-admin-drop a:hover    { background: rgba(255,215,0,0.1); color: var(--ktv-accent); }
.ktv-admin-drop a i        { width: 14px; text-align: center; flex-shrink: 0; opacity: .7; }
.ktv-admin-drop a:hover i  { opacity: 1; }
.ktv-sep,
.ktv-drop-sep {
    list-style : none !important;
    border-top : 1px solid rgba(255,255,255,0.08) !important;
    margin     : 4px 0 !important;
    padding    : 0 !important;
}
.ktv-crm-link         { color: #7eb8f7 !important; }
.ktv-crm-link:hover   { color: #a8d4ff !important; background: rgba(126,184,247,0.1) !important; }
.ktv-crm-link i       { opacity: 1 !important; }
.ktv-logout-link      { color: #ff7070 !important; }
.ktv-logout-link:hover{ color: #ff3333 !important; background: rgba(255,70,70,0.1) !important; }

/* ================================================================
   SLIDE-OUT NAV OVERLAY
   ================================================================ */
.ktv-overlay {
    position             : fixed;
    inset                : 0;
    z-index              : 9999;
    background           : var(--ktv-dim);
    backdrop-filter      : blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity              : 0;
    visibility           : hidden;
    transition           : opacity .35s var(--ktv-ease), visibility .35s;
}
.ktv-overlay.is-open { opacity: 1; visibility: visible; }

.ktv-drawer {
    position   : absolute;
    top: 0; left: 0;
    width      : min(360px, 86vw);
    height     : 100%;
    height     : 100dvh;
    background : var(--ktv-drawer-bg, #111);
    padding    : 72px 24px 32px;
    box-sizing : border-box;
    display    : flex;
    flex-direction: column;
    overflow-y : auto;
    -webkit-overflow-scrolling: touch;
    box-shadow : 8px 0 40px rgba(0,0,0,0.45);
    transform  : translateX(-100%);
    transition : transform .35s var(--ktv-ease);
}
.ktv-overlay.is-open .ktv-drawer { transform: translateX(0); }

.ktv-drawer-close {
    position        : absolute;
    top: 16px; right: 16px;
    width: 36px; height: 36px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background      : rgba(255,255,255,0.07);
    border          : 1px solid var(--ktv-border);
    border-radius   : 50%;
    color           : #fff;
    font-size       : 14px;
    cursor          : pointer;
    transition      : background .2s, color .2s, transform .2s;
}
.ktv-drawer-close:hover { background: rgba(255,255,255,0.14); color: var(--ktv-accent); transform: rotate(90deg); }

.ktv-nav-list { list-style: none; margin: 0 0 1.5rem; padding: 0; width: 100%; }

.ktv-nav-item {
    border-bottom : 1px solid var(--ktv-border);
    opacity       : 0;
    transform     : translateX(-16px);
    animation     : ktvSlide .4s ease forwards;
}
.ktv-nav-item:last-child    { border-bottom: none; }
.ktv-nav-item:nth-child(1)  { animation-delay: .06s }
.ktv-nav-item:nth-child(2)  { animation-delay: .12s }
.ktv-nav-item:nth-child(3)  { animation-delay: .18s }
.ktv-nav-item:nth-child(4)  { animation-delay: .24s }
.ktv-nav-item:nth-child(5)  { animation-delay: .30s }
.ktv-nav-item:nth-child(6)  { animation-delay: .36s }
.ktv-nav-item:nth-child(7)  { animation-delay: .42s }
.ktv-nav-item:nth-child(8)  { animation-delay: .48s }
@keyframes ktvSlide { to { opacity: 1; transform: translateX(0); } }

/* Support both old .ktv-nav-item-row and new .ktv-nav-row */
.ktv-nav-item-row,
.ktv-nav-row { display: flex; align-items: center; }
.ktv-nav-item-row .ktv-nav-link,
.ktv-nav-row .ktv-nav-link { flex: 1; }

.ktv-sub-toggle {
    background : none; border: none;
    color      : rgba(255,255,255,0.55);
    padding    : 14px 10px;
    cursor     : pointer; font-size: 11px;
    transition : color .2s, transform .2s;
}
.ktv-sub-toggle[aria-expanded="true"] { transform: rotate(180deg); color: var(--ktv-accent); }
.ktv-sub-toggle:hover                 { color: var(--ktv-accent); }

.ktv-nav-link {
    display        : block;
    font-family    : 'Montserrat', Arial, sans-serif;
    font-size      : clamp(.9rem, 2.2vw, 1rem);
    font-weight    : 500;
    letter-spacing : 1.5px;
    text-transform : uppercase;
    color          : rgba(255,255,255,0.88);
    text-decoration: none;
    padding        : 16px 0;
    transition     : color .2s, padding-left .2s;
    position       : relative;
}
.ktv-nav-link::after {
    content    : '';
    position   : absolute; bottom: 0; left: 0;
    width: 0; height: 1.5px;
    background : var(--ktv-accent);
    transition : width .25s;
}
.ktv-nav-link:hover,
.ktv-nav-item.current-menu-item > .ktv-nav-link           { color: var(--ktv-accent); padding-left: 10px; }
.ktv-nav-link:hover::after,
.ktv-nav-item.current-menu-item > .ktv-nav-link::after    { width: 44px; }

.ktv-sub-menu {
    list-style : none; margin: 0; padding: 0 0 0 14px;
    max-height : 0; overflow: hidden;
    transition : max-height .3s ease;
}
.ktv-sub-menu .ktv-nav-link { font-size: .85rem; padding: 10px 0; opacity: .8; }

/* Admin in drawer */
.ktv-drawer-admin {
    border-top  : 1px solid var(--ktv-border);
    padding-top : .75rem; margin-top: .5rem;
}
.ktv-drawer-label {
    font-family    : Montserrat, Arial, sans-serif;
    font-size      : 9px; font-weight: 700;
    letter-spacing : 2.5px; text-transform: uppercase;
    color          : rgba(255,255,255,0.3); margin: 0 0 6px;
}
.ktv-drawer-admin ul { list-style: none; margin: 0; padding: 0; }
.ktv-drawer-admin a {
    display         : flex; align-items: center; gap: 10px;
    font-family     : Montserrat, Arial, sans-serif;
    font-size       : 12px; color: rgba(255,255,255,0.65);
    text-decoration : none;
    padding         : 9px 0; border-bottom: 1px solid var(--ktv-border);
    transition      : color .2s;
}
.ktv-drawer-admin li:last-child a { border-bottom: none; }
.ktv-drawer-admin a:hover  { color: var(--ktv-accent); }
.ktv-drawer-admin a i      { width: 14px; }
.ktv-crm-drawer            { color: #7eb8f7 !important; }
.ktv-crm-drawer:hover      { color: #a8d4ff !important; }
.ktv-drawer-logout         { color: #ff8080 !important; }
.ktv-drawer-logout:hover   { color: #ff3333 !important; }

.ktv-drawer-social {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: auto; padding-top: 1.5rem;
    border-top: 1px solid var(--ktv-border);
}
.ktv-drawer-social a {
    display         : flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    background      : rgba(255,255,255,0.07);
    border          : 1px solid var(--ktv-border); border-radius: 50%;
    color           : rgba(255,255,255,0.8); font-size: .9rem; text-decoration: none;
    transition      : background .2s, color .2s, transform .2s, box-shadow .2s;
}
.ktv-drawer-social a:hover {
    background : var(--ktv-accent); color: #000;
    transform  : translateY(-2px);
    box-shadow : 0 4px 14px rgba(255,215,0,0.3);
}

/* ================================================================
   SEARCH OVERLAY
   ================================================================ */
.ktv-search-overlay {
    position             : fixed; inset: 0; z-index: 9998;
    background           : rgba(0,0,0,0.93);
    backdrop-filter      : blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display              : flex; align-items: center; justify-content: center;
    padding              : 20px;
    opacity              : 0; visibility: hidden;
    transition           : opacity .3s, visibility .3s;
}
.ktv-search-overlay.is-open { opacity: 1; visibility: visible; }

/* Support both .ktv-search-inner (old) and .ktv-search-box (new) */
.ktv-search-inner,
.ktv-search-box {
    display     : flex; align-items: center; gap: 10px;
    width       : min(580px, 92vw);
}
.ktv-search-inner form,
.ktv-search-box form {
    flex: 1; position: relative;
    display: flex; align-items: center;
}
.ktv-search-inner input[type="search"],
.ktv-search-box   input[type="search"] {
    width       : 100%;
    padding     : 16px 52px 16px 22px;
    font-size   : clamp(1rem, 2.5vw, 1.3rem);
    background  : rgba(255,255,255,0.09);
    border      : 2px solid rgba(255,255,255,0.2);
    border-radius: 50px; color: #fff;
    outline     : none; box-sizing: border-box;
    transition  : border-color .2s, background .2s;
}
.ktv-search-inner input::placeholder,
.ktv-search-box   input::placeholder   { color: rgba(255,255,255,.35); }
.ktv-search-inner input:focus,
.ktv-search-box   input:focus          { border-color: var(--ktv-accent); background: rgba(255,255,255,.12); }
.ktv-search-inner button[type="submit"],
.ktv-search-box   button[type="submit"] {
    position    : absolute; right: 14px;
    background  : none; border: none;
    color       : rgba(255,255,255,.7); font-size: 1.1rem;
    cursor      : pointer; padding: 8px; transition: color .2s;
}
.ktv-search-inner button[type="submit"]:hover,
.ktv-search-box   button[type="submit"]:hover { color: var(--ktv-accent); }

.ktv-search-close {
    flex-shrink     : 0;
    background      : rgba(255,255,255,.07);
    border          : 1px solid rgba(255,255,255,.15);
    border-radius   : 50%; width: 40px; height: 40px;
    color           : rgba(255,255,255,.8); font-size: 1.4rem;
    cursor          : pointer;
    display         : flex; align-items: center; justify-content: center;
    transition      : color .2s, background .2s, transform .2s;
}
.ktv-search-close:hover { color: var(--ktv-accent); background: rgba(255,255,255,.12); transform: rotate(90deg); }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .ktv-header-inner { padding: 10px 18px; }
}
@media (max-width: 768px) {
    :root { --ktv-hdr-h: 64px; --ktv-ann-h: 38px; }
    .ktv-header-inner { padding: 8px 14px; }
    .ktv-logo         { max-width: calc(100vw - 200px); }
    .ktv-logo-img,
    .ktv-logo .custom-logo { height: var(--ktv-logo-h-mob, 44px); }
    .ktv-ann          { padding: 6px 44px 6px 12px; min-height: 36px; }
    .ktv-ann-text,
    .ktv-ann-text a   { font-size: 10px; letter-spacing: 1.5px; }
    .ktv-admin-lbl    { display: none; }
    .ktv-admin-btn    { padding: 6px 9px; gap: 3px; }
}
@media (max-width: 480px) {
    :root { --ktv-hdr-h: 56px; }
    .ktv-header-inner { padding: 6px 12px; }
    .ktv-logo         { max-width: calc(100vw - 160px); }
    .ktv-logo-img,
    .ktv-logo .custom-logo { height: calc(var(--ktv-logo-h-mob, 44px) * .85); }
    .ktv-burger       { width: 36px; height: 36px; padding: 6px; }
    .ktv-burger-bar   { width: 22px; }
    .ktv-icon-btn     { width: 34px; height: 34px; font-size: 14px; }
    .ktv-header-right,
    .ktv-right        { gap: 4px; }
    .ktv-drawer       { width: min(300px, 93vw); padding: 64px 18px 24px; }
}

/* ── Accessibility ─────────────────────────────────────────── */
.ktv-sr {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
    .ktv-overlay, .ktv-drawer, .ktv-header,
    .ktv-admin-drop, .ktv-search-overlay, .ktv-nav-item {
        transition: none !important; animation: none !important;
    }
    .ktv-nav-item { opacity: 1 !important; transform: none !important; }
    .ktv-overlay.is-open,
    .ktv-search-overlay.is-open { opacity: 1; visibility: visible; }
    .ktv-overlay.is-open .ktv-drawer { transform: translateX(0); }
}