/* ============================================================
   UNU Guitars — theme styles
   Layout is mostly inline in the PHP templates; this file holds
   resets, fonts wiring, keyframes, reveal + hover/interaction states.
   ============================================================ */

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:#0C0E12;}
body{font-family:'Hanken Grotesk',sans-serif;color:#F2F4F7;overflow-x:hidden;line-height:1.4;}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:#2563EB;color:#fff;}

/* ---- keyframes ---- */
@keyframes unu-eq{0%,100%{height:5px}50%{height:22px}}
@keyframes unu-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes unu-toast{0%{opacity:0;transform:translate(-50%,16px)}100%{opacity:1;transform:translate(-50%,0)}}

/* ---- scroll progress ---- */
#unu-prog{position:fixed;top:0;left:0;height:3px;width:0%;background:#2563EB;z-index:200;transition:width .08s linear;}

/* ---- nav ---- */
.unu-nav{position:sticky;top:0;z-index:100;background:rgba(12,14,18,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(242,244,247,.1);}
.unu-nav-inner{position:relative;max-width:1180px;margin:0 auto;padding:16px 40px;display:flex;align-items:center;justify-content:space-between;}
.unu-brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;}
.unu-logo{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;letter-spacing:0.04em;}
.unu-tag{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:#79818d;}
.unu-links{display:flex;align-items:center;gap:30px;font-size:14px;font-weight:600;color:#aab2bd;}
.unu-nl{text-decoration:none;color:inherit;transition:color .2s ease;}
.unu-nl:hover{color:#F2F4F7;}
/* When a WordPress menu is assigned (Appearance → Menus), its items live
   inside .unu-links as <li><a>; style them like .unu-nl. */
.unu-links ul,.unu-links li{list-style:none;margin:0;padding:0;display:contents;}
.unu-links li a{text-decoration:none;color:inherit;transition:color .2s ease;}
.unu-links li a:hover{color:#F2F4F7;}
.unu-links .current-menu-item > a,.unu-links .current_page_item > a{color:#F2F4F7;}
.unu-cta{text-decoration:none;}

/* ---- buttons ---- */
.unu-pill{padding:11px 22px;border-radius:999px;background:#2563EB;color:#fff;font-weight:700;cursor:pointer;transition:transform .15s ease,background .2s ease;}
.unu-pill:hover{background:#1E5BE6;transform:translateY(-1px);}
.unu-btn{display:inline-block;padding:16px 32px;border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;}
.unu-btn-primary{background:#2563EB;color:#fff;transition:transform .15s ease,background .2s ease;}
.unu-btn-primary:hover{background:#1E5BE6;transform:translateY(-2px);}
.unu-btn-light{background:#F2F4F7;color:#0C0E12;transition:transform .15s ease;}
.unu-btn-light:hover{transform:translateY(-2px);}
.unu-ghost{border:1.5px solid rgba(242,244,247,.32);transition:border-color .2s ease,background .2s ease;}
.unu-ghost:hover{border-color:#4D8DFF;background:rgba(37,99,235,.12);}

/* ---- hear-it strum + EQ ---- */
.unu-hear{display:inline-flex;align-items:center;gap:10px;cursor:pointer;}
.unu-eq{display:none;align-items:flex-end;gap:3px;height:22px;}
.unu-hear.is-playing .unu-eq{display:inline-flex;}
.unu-eq span{width:3px;background:#4D8DFF;border-radius:2px;height:5px;}

/* ---- tabs + chips ---- */
.unu-tab{padding:12px 26px;border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;font-family:'Space Grotesk',sans-serif;letter-spacing:0.02em;transition:all .2s ease;background:rgba(242,244,247,.06);color:#9aa3ad;border:1px solid rgba(242,244,247,.12);}
.unu-tab.is-active{background:#2563EB;color:#fff;border-color:#2563EB;}
.unu-arrow{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:999px;font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;line-height:1;cursor:pointer;user-select:none;background:rgba(242,244,247,.06);color:#F2F4F7;border:1px solid rgba(242,244,247,.16);transition:all .18s ease;}
.unu-arrow:hover{background:#2563EB;border-color:#2563EB;color:#fff;transform:translateY(-1px);}
.unu-chip{padding:9px 18px;border-radius:999px;font-weight:700;font-size:13px;cursor:pointer;transition:all .18s ease;background:rgba(242,244,247,.06);color:#9aa3ad;border:1px solid rgba(242,244,247,.12);}
.unu-chip.is-active{background:#2563EB;color:#fff;border-color:#2563EB;}

/* ---- swatches / thumbs ---- */
.unu-finish,.unu-pfinish{display:inline-block;width:26px;height:26px;border-radius:999px;cursor:pointer;border:1px solid rgba(242,244,247,.3);outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s ease;}
.unu-pfinish{width:28px;height:28px;outline-offset:3px;}
.unu-thumb{cursor:pointer;transition:border-color .15s ease;}

/* ---- reveal: hiding is applied by JS only to below-the-fold sections, so
   above-the-fold content paints instantly (no blank-then-pop flash) ---- */
[data-reveal]{transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
[data-reveal].unu-pre{opacity:0;transform:translateY(30px);}

/* ---- hover lifts ---- */
.unu-lift{transition:transform .25s ease,box-shadow .25s ease;}
.unu-lift:hover{transform:translateY(-4px);box-shadow:0 18px 40px -20px rgba(14,17,22,.25);}
.unu-cardlift{transition:transform .25s ease,border-color .25s ease;}
.unu-cardlift:hover{transform:translateY(-5px);border-color:rgba(77,141,255,.4);}
.unu-tile{transition:transform .3s ease;}
.unu-tile:hover{transform:translateY(-6px);}

/* ---- toast ---- */
.unu-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:300;background:#F2F4F7;color:#0C0E12;padding:15px 26px;border-radius:999px;font-weight:700;font-size:15px;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);animation:unu-toast .25s ease;align-items:center;gap:10px;}
.unu-toast[style*="flex"]{display:flex;}

/* ---- mobile menu button (hidden on desktop) ---- */
.unu-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:8px;}
.unu-burger span{display:block;width:24px;height:2px;background:#F2F4F7;border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
.unu-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.unu-burger.open span:nth-child(2){opacity:0;}
.unu-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---- responsive ---- */
@media (max-width:1024px){
	.unu-grid-3{grid-template-columns:repeat(2,1fr) !important;}
	.unu-grid-4{grid-template-columns:repeat(2,1fr) !important;}
	[style*="repeat(6,1fr)"]{grid-template-columns:repeat(3,1fr) !important;}
}
@media (max-width:860px){
	.unu-hero{grid-template-columns:1fr !important;}
	h1{font-size:clamp(46px,10vw,90px) !important;}
}
@media (max-width:820px){
	.unu-burger{display:inline-flex;}
	.unu-links{position:absolute;top:100%;right:0;left:0;flex-direction:column;align-items:flex-start;gap:4px;background:rgba(12,14,18,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:14px 24px 22px;border-bottom:1px solid rgba(242,244,247,.1);display:none;}
	.unu-links.open{display:flex;}
	.unu-nl{padding:10px 0;font-size:16px;}
	.unu-links li a{padding:10px 0;font-size:16px;}
	.unu-cta{margin-top:10px;}
}
@media (max-width:700px){
	[style*="max-width:1180px"]{padding-left:20px !important;padding-right:20px !important;}
	.unu-grid-2,.unu-grid-3,.unu-grid-4{grid-template-columns:1fr !important;}
	h1{font-size:clamp(40px,11vw,62px) !important;}
	h2{font-size:clamp(30px,7vw,42px) !important;}
	h3{font-size:clamp(38px,10vw,56px) !important;}
	#unu-stats [style*="gap:52px"]{gap:24px !important;}
}
@media (max-width:480px){
	.unu-tag{display:none;}
	[style*="repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important;}
}