/* ╔══════════════════════════════════════════════════════╗
   ║  JJW HEADER + DRAWER SYSTEM  v3.0                    ║
   ║  Palette: Sky Blue #2296D0 · Berry Pink #D21776      ║
   ║  Font: Play (Google) · Tone: Playful & Fun           ║
   ╚══════════════════════════════════════════════════════╝ */

@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

:root {
    --jj-blue:        #2296D0;
    --jj-blue-light:  #e8f4fb;
    --jj-blue-dark:   #1a7ab0;
    --jj-pink:        #D21776;
    --jj-pink-light:  #fce8f1;
    --jj-pink-dark:   #b01363;
    --jj-cream:       #FFFDF7;
    --jj-white:       #ffffff;
    --jj-bg:          #FFFDF7;
    --jj-card:        #ffffff;
    --jj-border:      rgba(0,0,0,0.06);
    --jj-shadow:      0 2px 12px rgba(0,0,0,0.06);
    --jj-shadow-lg:   0 8px 32px rgba(0,0,0,0.1);
    --jj-shadow-pink: 0 4px 20px rgba(210,23,118,0.2);
    --jj-shadow-blue: 0 4px 20px rgba(34,150,208,0.2);
    --jj-text:        #2a2a2a;
    --jj-text-mid:    #5a5a5a;
    --jj-text-light:  #8a8a8a;
    --jj-text-faint:  #b0b0b0;
    --jj-font:        'Play', sans-serif;
    --jj-radius:      14px;
    --jj-radius-sm:   8px;
    --jj-radius-pill: 100px;
    --jj-header-h:    68px;
    --jj-z:           9000;
    --jj-z-drawer:    9100;
    --jj-z-overlay:   9050;
    --jj-drawer-w:    400px;
    --jj-ease:        cubic-bezier(0.34,1.56,0.64,1);
    --jj-ease-smooth: cubic-bezier(0.25,0.46,0.45,0.94);
}
@media (max-width:768px) { :root { --jj-header-h:58px; --jj-drawer-w:100vw; } }

/* ── Header bar ────────────────────────────── */
.jh {
    position:sticky; top:0; left:0; right:0;
    height:var(--jj-header-h); z-index:var(--jj-z);
    background:rgba(255,253,247,0.92);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--jj-border);
    transition:transform 0.4s var(--jj-ease-smooth), box-shadow 0.3s ease;
}
.jh.is-hidden { transform:translateY(-100%); }
.jh.is-scrolled { box-shadow:0 2px 20px rgba(0,0,0,0.06); }

.jh__inner {
    display:flex; align-items:center; justify-content:space-between;
    max-width:1400px; margin:0 auto; padding:0 32px; height:100%;
}
@media (max-width:768px) { .jh__inner { padding:0 16px; } }

/* Logo */
.jh__logo a { display:flex; align-items:center; text-decoration:none; }
.jh__logo-img { height:36px; width:auto; display:block; transition:transform 0.3s var(--jj-ease); }
.jh__logo-img:hover { transform:scale(1.05) rotate(-1deg); }
.jh__logo-text {
    font-family:var(--jj-font); font-size:20px; font-weight:700;
    background:linear-gradient(135deg,var(--jj-blue),var(--jj-pink));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
@media (max-width:768px) { .jh__logo-img { height:28px; } }

/* Desktop nav */
.jh__nav { display:flex; align-items:center; }
.jh__nav-list { display:flex; gap:8px; list-style:none; margin:0; padding:0; }
.jh__nav-list li { position:relative; }
.jh__nav-list a {
    font-family:var(--jj-font); font-size:14px; font-weight:700;
    color:var(--jj-text-mid); text-decoration:none;
    padding:8px 14px; border-radius:var(--jj-radius-sm);
    transition:all 0.25s ease;
}
.jh__nav-list a:hover { color:var(--jj-blue); background:var(--jj-blue-light); }
.jh__nav-list .current-menu-item > a { color:var(--jj-pink); background:var(--jj-pink-light); }

.jh__nav-list .sub-menu {
    position:absolute; top:calc(100% + 8px); left:0;
    min-width:200px; background:var(--jj-white); border:1px solid var(--jj-border);
    border-radius:var(--jj-radius); padding:8px; box-shadow:var(--jj-shadow-lg);
    list-style:none; opacity:0; visibility:hidden; transform:translateY(8px);
    transition:all 0.25s var(--jj-ease); z-index:10;
}
.jh__nav-list li:hover > .sub-menu { opacity:1; visibility:visible; transform:translateY(0); }
.jh__nav-list .sub-menu a { display:block; padding:10px 14px; border-radius:var(--jj-radius-sm); font-size:13px; }
.jh__nav-list .sub-menu a:hover { background:var(--jj-blue-light); }
@media (max-width:1024px) { .jh__nav { display:none; } }

/* Action icons */
.jh__actions { display:flex; align-items:center; gap:4px; }
.jh__icon {
    position:relative; display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; background:none; border:none;
    color:var(--jj-text-mid); cursor:pointer; padding:0; outline:none;
    border-radius:var(--jj-radius-sm); transition:all 0.25s ease;
}
.jh__icon:hover { color:var(--jj-blue); background:var(--jj-blue-light); }
.jh__icon svg { display:block; stroke:currentColor; fill:none; }

.jh__badge {
    position:absolute; top:4px; right:2px;
    min-width:18px; height:18px; background:var(--jj-pink); color:#fff;
    font-family:var(--jj-font); font-size:10px; font-weight:700;
    line-height:18px; text-align:center; border-radius:var(--jj-radius-pill);
    padding:0 5px; pointer-events:none;
}
.jh__badge:empty { display:none; }
.jh__badge.bump { animation:jj-bounce 0.4s var(--jj-ease); }
@keyframes jj-bounce { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }

/* Hamburger */
.jh__burger { display:none; }
@media (max-width:1024px) { .jh__burger { display:flex; } }
.jh__burger-bar {
    display:block; width:20px; height:2px; background:var(--jj-text-mid);
    border-radius:2px; transition:all 0.3s var(--jj-ease); position:absolute;
}
.jh__burger-bar:nth-child(1) { transform:translateY(-6px); }
.jh__burger-bar:nth-child(3) { transform:translateY(6px); }
.jh__burger.is-active .jh__burger-bar:nth-child(1) { transform:rotate(45deg); background:var(--jj-pink); }
.jh__burger.is-active .jh__burger-bar:nth-child(2) { opacity:0; }
.jh__burger.is-active .jh__burger-bar:nth-child(3) { transform:rotate(-45deg); background:var(--jj-pink); }

/* ── Drawer base ───────────────────────────── */
.jd {
    position:fixed; top:0; right:0;
    width:var(--jj-drawer-w); max-width:100vw;
    height:100vh; height:100dvh;
    background:var(--jj-cream);
    border-left:1px solid var(--jj-border);
    box-shadow:-8px 0 40px rgba(0,0,0,0.08);
    z-index:var(--jj-z-drawer);
    transform:translateX(100%);
    transition:transform 0.4s var(--jj-ease-smooth);
    display:flex; flex-direction:column;
}
.jd[hidden] { display:flex; pointer-events:none; }
.jd.is-open { transform:translateX(0); pointer-events:auto; }
.jd__inner { display:flex; flex-direction:column; height:100%; overflow:hidden; }

.jd__head {
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 24px; border-bottom:1px solid var(--jj-border); flex-shrink:0;
}
.jd__title { font-family:var(--jj-font); font-size:16px; font-weight:700; color:var(--jj-text); }
.jd__close {
    display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; background:var(--jj-blue-light); border:none;
    border-radius:var(--jj-radius-sm); color:var(--jj-blue);
    cursor:pointer; padding:0; outline:none; transition:all 0.25s var(--jj-ease);
}
.jd__close:hover { background:var(--jj-pink-light); color:var(--jj-pink); transform:rotate(90deg); }
.jd__close svg { display:block; stroke:currentColor; fill:none; }
@media (max-width:768px) { .jd { border-left:none; } }

/* ── Mobile overlay ────────────────────────── */
.jh-mob {
    position:fixed; inset:0; background:var(--jj-cream);
    z-index:var(--jj-z-drawer); display:flex; flex-direction:column;
    opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s ease;
}
.jh-mob[hidden] { display:flex; }
.jh-mob.is-open { opacity:1; visibility:visible; }

.jh-mob__inner { display:flex; flex-direction:column; height:100%; overflow-y:auto; padding:0 24px; }
.jh-mob__head { display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--jj-border); }
.jh-mob__close { display:flex; align-items:center; justify-content:center; width:44px; height:44px; background:none; border:none; color:var(--jj-text-light); cursor:pointer; outline:none; transition:color 0.3s ease; }
.jh-mob__close:hover { color:var(--jj-pink); }
.jh-mob__close svg { display:block; stroke:currentColor; fill:none; }

.jh-mob__nav { flex:1; padding:24px 0; }
.jh-mob__nav-list { list-style:none; margin:0; padding:0; }
.jh-mob__nav-list > li { border-bottom:1px solid var(--jj-border); }
.jh-mob__nav-list a {
    display:block; padding:18px 0;
    font-family:var(--jj-font); font-size:22px; font-weight:700;
    color:var(--jj-text); text-decoration:none; transition:color 0.2s ease;
}
.jh-mob__nav-list a:hover { color:var(--jj-blue); }
.jh-mob__nav-list .sub-menu { list-style:none; margin:0; padding:0 0 8px 16px; }
.jh-mob__nav-list .sub-menu a { font-size:15px; color:var(--jj-text-mid); padding:10px 0; }

.jh-mob__foot { padding:20px 0 calc(20px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--jj-border); }
.jh-mob__search-btn {
    display:inline-flex; align-items:center; gap:8px;
    background:var(--jj-blue-light); border:none; border-radius:var(--jj-radius-pill);
    padding:10px 20px; font-family:var(--jj-font); font-size:14px; font-weight:700;
    color:var(--jj-blue); cursor:pointer; outline:none; transition:all 0.25s var(--jj-ease);
}
.jh-mob__search-btn:hover { background:var(--jj-blue); color:#fff; }
.jh-mob__search-btn svg { display:block; stroke:currentColor; fill:none; }

/* ── Backdrop ──────────────────────────────── */
.jh-backdrop {
    position:fixed; inset:0; background:rgba(0,0,0,0.25);
    z-index:var(--jj-z-overlay); opacity:0; visibility:hidden;
    transition:opacity 0.3s ease, visibility 0.3s ease; pointer-events:none;
}
.jh-backdrop.is-active { opacity:1; visibility:visible; pointer-events:auto; }

@keyframes jj-spin { to { transform:rotate(360deg); } }