/*
Theme Name: KUB Mono
Theme URI: https://kubam.co
Author: KUB
Description: Monochrome, animated theme for KUA APF "KUB" with red cube mark, bilingual (UA/EN), and Reports CPT (year/quarter/lang + PDF).
Version: 1.0.0
Text Domain: kubmono
*/

:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#0b1220;       /* main text */
  --muted:#5b657c;
  --line:#e7ecf6;
  --brand:#d81e5b;     /* red cube / primary button */
  --brand-2:#ef476f;
  --accent:#6b7280;    /* mono gray */
  --accent-2:#9ca3af;  /* light gray */
  --accent-bg: rgba(107,114,128,.12);
  --accent-br: rgba(107,114,128,.30);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial;background:var(--bg);color:var(--ink)}
a{color:#0a84ff;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin-inline:auto;padding:22px}
.bg-wrap{position:fixed; inset:0; z-index:-1; overflow:hidden}
.bg-grad{position:absolute; inset:-20%; background:
  radial-gradient(1200px 600px at 70% -20%, rgba(156,163,175,.18), transparent 55%),
  radial-gradient(900px 500px at 10% 10%, rgba(156,163,175,.16), transparent 45%),
  linear-gradient(180deg,#ffffff,#f7fbff)}
.bg-grid:before{content:""; position:absolute; inset:0; background:
  linear-gradient(transparent 95%, rgba(0,0,0,.04) 95%) 0 0/24px 24px,
  linear-gradient(90deg, transparent 95%, rgba(0,0,0,.04) 95%) 0 0/24px 24px; mask:linear-gradient(180deg,transparent, #000 10%, #000 90%, transparent); opacity:.14}

header{position:sticky; top:0; backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line); z-index:50; background:rgba(255,255,255,.7)}
nav{display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.brand .mark{width:34px; height:34px; position:relative; perspective:800px}
.brand .mark .cube{width:100%; height:100%; position:absolute; transform-style:preserve-3d; animation:spin 9s linear infinite}
.face{position:absolute; inset:0; background:linear-gradient(145deg,var(--brand),var(--brand-2)); border:1px solid rgba(0,0,0,.06); box-shadow:inset 0 0 18px rgba(0,0,0,.12)}
.f1{transform:translateZ(17px)} .f2{transform:rotateY(90deg) translateZ(17px)} .f3{transform:rotateY(180deg) translateZ(17px)} .f4{transform:rotateY(-90deg) translateZ(17px)} .f5{transform:rotateX(90deg) translateZ(17px)} .f6{transform:rotateX(-90deg) translateZ(17px)}
@keyframes spin{from{transform:rotateX(18deg) rotateY(0)} to{transform:rotateX(18deg) rotateY(360deg)}}

....nav-links{display:flex; gap:18px; align-items:center}
.nav-links a{position:relative; color:var(--ink); font-weight:600; padding:8px 10px; border-radius:10px; transition:color .2s ease, background .2s ease, border-color .2s ease}
.nav-links a:after{content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px; background:linear-gradient(90deg,var(--brand),var(--accent)); transition:all .35s ease}
.nav-links a:hover{color:var(--accent); background:var(--accent-bg)}
.nav-links a:hover:after{right:0}
.nav-links a.active{ color: var(--accent); background: var(--accent-bg); border:1px solid var(--accent-br); }
.nav-links a.active:after{right:0}
.hamb{display:none}
.actions{display:flex; gap:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:11px 16px; border-radius:12px; font-weight:700; border:1px solid rgba(0,0,0,.08); background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.00)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 8px 16px rgba(0,0,0,.06)}
.btn.primary{background:linear-gradient(90deg, var(--brand), var(--brand-2)); border-color:transparent; color:#fff}
.btn.ghost{background:transparent; border-color:var(--line)}

.hero{position:relative; padding:64px 0 48px}
.hero-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:34px; align-items:center}
h1{font-size:clamp(34px,5vw,56px); line-height:1.03; margin:8px 0}
p.lead{font-size:clamp(16px,2.4vw,20px); color:var(--muted); max-width:64ch}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0}
.badge{padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:13px}

.glass{background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow: 0 10px 30px rgba(0,0,0,.08)}
.card{padding:22px}

section{padding:74px 0}
h2{font-size:clamp(22px,3.4vw,34px); margin:0 0 16px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}

.kpi{display:flex; gap:12px; align-items:flex-start}
.kpi i{width:12px; height:12px; border-radius:3px; background:linear-gradient(180deg,var(--brand),var(--brand-2)); margin-top:6px}

.list{padding-left:18px}
.list li{margin:6px 0}
.note{font-size:14px; color:var(--muted)}

.gcard{position:relative; border-radius:18px; padding:1px; background:linear-gradient(120deg,rgba(0,0,0,.06),rgba(0,0,0,0) 40%), linear-gradient(90deg,var(--accent),var(--accent-2))}
.gcard .inner{border-radius:17px; background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02)); padding:22px; color:#0b1220}

.cols{display:grid; grid-template-columns:1.4fr 1fr; gap:22px}

.form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field{position:relative}
.field input,.field textarea{width:100%; padding:16px 14px 12px; border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--ink)}
.field label{position:absolute; left:12px; top:12px; color:var(--muted); pointer-events:none; transition:all .2s ease; background:transparent; padding:0 4px}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label{top:-9px; font-size:12px; color:var(--accent); background:var(--bg)}

.reveal{opacity:0; transform:translateY(12px); transition:all .6s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1; transform:none}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}}

footer{border-top:1px solid var(--line)}

@media (max-width:1024px){.hero-grid{grid-template-columns:1fr}}
@media (max-width:880px){.grid-3{grid-template-columns:1fr}.grid-2,.cols{grid-template-columns:1fr}....nav-links{display:none}.hamb{display:inline-flex}}


/* --- Menu fixes (2025-10-25) --- */
.nav-links ul{
  display:flex;
  gap:22px;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links li{list-style:none}
.nav-links a{
  display:inline-block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
  color:var(--ink);
}
.nav-links a:hover{background:rgba(0,0,0,.05)}
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a{
  background:var(--ink);
  color:#fff;
}
@media (max-width: 900px){
  .nav-links ul{gap:14px; flex-wrap:wrap}
}


/* ===== KUB Mono — UI/UX refresh (2025-10-25) ===== */

/* Design tokens */
:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --ink:#0b1220;
  --muted:#5b657c;
  --line:#e8edf7;
  --brand:#d81e5b;        /* red cube / primary */
  --brand-ink:#fff;
  --ring: rgba(216,30,91,.35);
}

/* Base layout & type */
html{scroll-behavior:smooth}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Inter',Arial,sans-serif; color:var(--ink); background:var(--bg);}
.container{max-width:1200px; margin:0 auto; padding:0 18px}
a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible{outline:3px solid var(--ring); outline-offset:2px; border-radius:12px}

/* Header / nav */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(9px); background:rgba(255,255,255,.74); border-bottom:1px solid var(--line)}
header .container{padding:12px 18px}
nav{display:flex; align-items:center; justify-content:space-between; gap:18px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.brand span{white-space:nowrap}

/* Menu */
..nav-links{display:flex; align-items:center}
.nav-links .menu{display:flex; gap:22px; margin:0; padding:0}
.nav-links .menu>li{list-style:none}
.nav-links .menu>li>a{display:inline-block; padding:10px 14px; border-radius:12px; font-weight:600; color:var(--ink);}
.nav-links .menu>li>a:hover{background:rgba(0,0,0,.05)}
.nav-links .menu>.current-menu-item>a,
.nav-links .menu>.current_page_item>a{background:var(--ink); color:#fff}

/* Language segmented control */
.actions{display:flex; align-items:center; gap:10px}
.lang.segmented{display:inline-flex; padding:4px; border-radius:14px; background:#fff; border:1px solid var(--line); box-shadow:0 1px 0 rgba(0,0,0,.04);}
.lang.segmented .seg{min-width:38px; text-align:center; font-weight:700; padding:8px 10px; border-radius:10px}
.lang.segmented .seg.active{background:var(--brand); color:var(--brand-ink);}
.lang.segmented .seg:not(.active):hover{background:rgba(0,0,0,.05)}

/* Hamburger */
.hamb{width:40px; height:40px; display:inline-grid; place-items:center; border-radius:12px; border:1px solid var(--line); background:#fff}
.hamb .hamb-i{position:relative; width:17px; height:2px; background:var(--ink); display:block}
.hamb .hamb-i::before, .hamb .hamb-i::after{content:""; position:absolute; left:0; right:0; height:2px; background:var(--ink)}
.hamb .hamb-i::before{top:-6px} .hamb .hamb-i::after{top:6px}

/* Mobile panel */
#mobile{display:none; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 40px rgba(15,23,42,.12)}
#mobile .menu{display:grid; gap:8px; margin:0; padding:8px}
#mobile .menu>li{list-style:none}
#mobile .menu>li>a{display:block; padding:12px 14px; border-radius:12px; font-weight:600}
#mobile .menu>li>a:hover{background:rgba(0,0,0,.05)}

/* Buttons */
.btn{border:1px solid var(--line); background:#fff; padding:10px 12px; border-radius:12px; font-weight:600}
.btn.ghost{background:transparent}

/* Hero & sections — nicer rhythm */
.hero{padding:76px 0 54px}
section{padding:80px 0}
h1{font-size:clamp(36px,5vw,58px); line-height:1.04; margin:8px 0}
p.lead{font-size:clamp(16px,2.2vw,20px); color:var(--muted); max-width:66ch}

/* Cards */
.glass{background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 12px 30px rgba(8,15,30,.08)}
.card{padding:22px}

/* Footer */
footer{border-top:1px solid var(--line); padding:22px 0; background:#fff}

/* Responsive */
@media (max-width: 1000px){
  ..nav-links{display:none}
}
@media (max-width: 640px){
  .brand span{font-size:14px}
}

/* ===== UI/UX Plus pack (animated touches, 2025-10-25) ===== */

/* Skip link */
.skip-link{position:absolute; left:-9999px; top:0; padding:8px 12px; background:#000; color:#fff; border-radius:10px}
.skip-link:focus{left:12px; z-index:80}

/* Header shrink + shadow */
header.scrolled{background:rgba(255,255,255,.9); box-shadow:0 10px 30px rgba(15,23,42,.06);}
header.scrolled .container{padding:8px 18px}

/* Brand cube glow */
.brand .mark .cube{filter:drop-shadow(0 8px 18px rgba(216,30,91,.30))}

/* Animated underline for nav links */
.nav-links .menu>li>a{
  position:relative; transition:transform .2s ease, background .2s ease;
}
.nav-links .menu>li>a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:7px; height:2px;
  background:linear-gradient(90deg, var(--brand), #ff6b9e);
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
  border-radius:2px;
}
.nav-links .menu>li>a:hover::after{ transform:scaleX(1) }
.nav-links .menu>.current-menu-item>a::after,
.nav-links .menu>.current_page_item>a::after{ transform:scaleX(1) }
.nav-links .menu>.current-menu-item>a,
.nav-links .menu>.current_page_item>a{ background:transparent; color:var(--ink) }

/* Mobile pop */
#mobile{animation:pop .18s ease}
@keyframes pop{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)}}

/* Brand logo */
.brand .home-link{display:flex; align-items:center; gap:12px}
.custom-logo{max-height:36px; width:auto}
.brand .site-title{font-weight:800; letter-spacing:.2px}

/* Mobile menu & backdrop */
#backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:59}
#backdrop[hidden]{display:none}
#mobile .menu{display:grid; gap:8px; margin:0; padding:8px}
#mobile .menu>li{list-style:none}
#mobile .menu>li>a{display:block; padding:12px 14px; border-radius:12px; font-weight:600}
#mobile .menu>li>a:hover{background:rgba(0,0,0,.05)}
@media (max-width:1000px){ ..nav-links{display:none} } /* desktop-only menu */