/*
Theme Name: Onyx Mezn
Theme URI: https://fraga-az.com/
Author: Redaksiya
Description: Тема обзорного портала. Тёмная база, алый акцент, золото на рейтингах.
Version: 1.5.7
License: GPL-2.0+
Text Domain: onyx-mezn
*/

/* ══════════ TOKENS (палитра R1 — выбрана юзером на DESIGN GATE) ══════════ */
:root{
  --c-bg:#101012;
  --c-surface:#1A1B20;
  --c-surface-2:#2C2E36;
  --c-surface-3:#22242B;
  --c-brand:#E8112D;
  --c-brand-lt:#FF3D52;
  --c-brand-dk:#B00D22;
  --c-gold:#FFC633;
  --c-text:#FFFFFF;
  --c-muted:#A8AAB4;
  --c-good:#4FBE87;
  --c-bad:#E0705C;
  --r-sm:10px;
  --r-md:14px;
  --r-btn:22px;
  --s-md:16px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip;max-width:100%}
body{
  background:var(--c-bg);
  color:var(--c-text);
  font-family:"Trebuchet MS",Helvetica,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
}
img,svg,table,video,iframe{max-width:100%}
svg{height:auto}
img{height:auto}
a{color:var(--c-brand-lt)}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--s-md)}
.muted{color:var(--c-muted)}
.small{font-size:.82rem}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:var(--c-surface);padding:8px 12px;z-index:9999;border-radius:8px}

/* ══════════ HEADER ══════════ */
.hdr{
  background:linear-gradient(180deg,#1F2027 0%,#17181D 100%);
  border-bottom:1px solid var(--c-surface-2);
  position:sticky;top:0;z-index:900;
}
.hdr-inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:10px;padding-bottom:10px}
/* min-width:0 обязателен: flex-item по умолчанию min-width:auto — с nowrap лого
   не сожмётся и вытолкнет бургер за вьюпорт (гор. скролл на 320px — блокирующий гейт). */
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--c-text);margin-right:auto;order:1;min-width:0;overflow:hidden}
.logo-mark{
  width:34px;height:34px;border-radius:9px;flex:0 0 34px;
  background:linear-gradient(140deg,var(--c-brand-lt),var(--c-brand-dk));
  display:flex;align-items:center;justify-content:center;
  font-weight:bold;font-size:18px;color:#fff;overflow:hidden;
}
.logo-mark img{width:100%;height:100%;object-fit:contain}
/* nowrap: без него «Fraga Casino» и «Azərbaycan · обзор» рвались на 4 строки и распухала шапка.
   overflow+ellipsis — страховка на самых узких экранах (родитель .logo имеет min-width:0). */
.logo-txt{font-size:1.12rem;font-weight:bold;letter-spacing:.3px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo-txt span{display:block;font-size:.6rem;font-weight:normal;letter-spacing:1.4px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.burger{
  order:2;width:42px;height:38px;border-radius:10px;
  background:var(--c-surface-2);border:1px solid #3A3D47;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer;
}
.burger i{display:block;width:18px;height:2px;background:var(--c-text);border-radius:2px}
.hdr-cta{order:3;flex:0 0 100%;display:flex;gap:10px}
.hdr-cta .btn{flex:1 1 0;min-width:0}
.nav{order:4;flex:0 0 100%;display:none}
.nav.is-open{display:block}
.nav ul{list-style:none;display:flex;flex-direction:column;gap:2px;padding:6px 0 4px}
.nav li{position:relative}
.nav a{
  display:block;padding:9px 10px;border-radius:8px;
  color:var(--c-text);text-decoration:none;font-size:.94rem;
}
.nav a:hover{background:var(--c-surface-2)}
.nav .current-menu-item>a{color:var(--c-brand-lt)}

/* ══════════ BUTTONS ══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:12px 18px;border-radius:var(--r-btn);
  font-family:inherit;font-size:.95rem;font-weight:bold;
  text-decoration:none;border:0;cursor:pointer;text-align:center;
  line-height:1.2;white-space:nowrap;
}
/* Сплошная заливка + белый текст = 4.62:1.
   ⛔ НЕ делать градиент со светлым верхом: #FF3D52 + белый = 3.71 → провал гейта контраста. */
.btn-primary{
  background:var(--c-brand);
  color:#FFFFFF;
  box-shadow:0 6px 16px rgba(232,17,45,.38), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.18);
}
.btn-primary:hover{filter:brightness(1.08)}
.btn-app{
  background:linear-gradient(180deg,#3A3D47 0%,var(--c-surface-2) 100%);
  color:#fff;border:1px solid #474B57;
  box-shadow:0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.10);
}
.btn-app:hover{filter:brightness(1.12)}
.btn-lg{padding:15px 26px;font-size:1.05rem}
.btn-block{display:flex;width:100%}

/* ══════════ BREADCRUMBS ══════════ */
.crumbs{padding-top:14px;padding-bottom:2px;font-size:.8rem;color:var(--c-muted)}
.crumbs a{color:var(--c-muted);text-decoration:none}
.crumbs a:hover{color:var(--c-text)}
.crumbs span{margin:0 6px;opacity:.5}

/* ══════════ LAYOUT ══════════ */
main{padding-bottom:36px}
.page-head{padding-top:10px;padding-bottom:6px}
h1{font-size:1.6rem;line-height:1.25;margin-bottom:8px}
.page-meta{font-size:.8rem;color:var(--c-muted);padding-bottom:8px;border-bottom:1px solid var(--c-surface-2);margin-bottom:18px}
.byline{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  font-size:.82rem;color:var(--c-muted);
  padding:10px 0 4px;border-bottom:1px solid var(--c-surface-2);margin-bottom:18px;
}
/* Байлайн автора внизу над футером */
.byline-bottom{
  margin-top:28px;padding:14px 16px;border:1px solid var(--c-surface-2);border-bottom:1px solid var(--c-surface-2);
  border-radius:var(--r-md);background:var(--c-surface-3);
}
.byline-av{
  width:26px;height:26px;border-radius:50%;flex:0 0 26px;
  background:linear-gradient(140deg,#5B6070,#33363F);
  display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;font-weight:bold;
}
.byline b{color:var(--c-text);font-weight:bold}

h2{font-size:1.25rem;line-height:1.3;margin:22px 0 12px}
h3{font-size:1.02rem;margin:18px 0 8px}
section{margin-bottom:28px;scroll-margin-top:130px}
p{margin-bottom:12px}
.card{
  background:var(--c-surface);
  border:1px solid var(--c-surface-2);
  border-radius:var(--r-md);
  padding:16px;
}
.sec-label{
  display:inline-block;font-size:.68rem;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--c-brand);border:1px solid rgba(255,255,255,.18);
  border-radius:20px;padding:3px 10px;margin-bottom:10px;
}

/* ══════════ CONTENT (текст из post_content) ══════════ */
.entry ul,.entry ol{margin:0 0 14px 22px}
.entry li{margin-bottom:6px}
.entry blockquote{
  border-left:3px solid var(--c-brand);background:var(--c-surface);
  padding:12px 14px;margin:0 0 14px;border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.entry strong{color:#fff}
.content-img{
  display:block;max-width:800px;width:100%;height:auto;margin:1.5rem auto;
  aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-md);
}
.shot{display:block;width:320px;max-width:100%;height:auto;margin:1.2rem auto;border-radius:var(--r-sm)}

/* ══════════ TOC ══════════ */
.toc{background:var(--c-surface-3);border:1px solid var(--c-surface-2);border-radius:var(--r-md);padding:12px 16px;margin:18px 0}
.toc>summary{font-size:.85rem;color:var(--c-muted);letter-spacing:.5px;text-transform:uppercase;font-weight:bold;cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;user-select:none}
.toc>summary::-webkit-details-marker{display:none}
.toc>summary::before{content:"▸";color:var(--c-brand-lt);font-size:.9rem;transition:transform .15s}
.toc[open]>summary::before{transform:rotate(90deg)}
.toc[open]>summary{margin-bottom:12px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:24px}
.toc li{margin-bottom:6px;break-inside:avoid;font-size:.9rem}
.toc a{color:var(--c-text);text-decoration:none;border-bottom:1px dotted #4A4D58}
.toc a:hover{color:var(--c-brand-lt)}

/* ══════════ VERDICT ══════════ */
.verdict{
  background:linear-gradient(160deg,#23242C 0%,var(--c-surface) 55%);
  border:1px solid #34363F;border-radius:var(--r-md);
  padding:18px 16px;
}
.verdict-top{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.score-ring{
  width:104px;height:104px;flex:0 0 104px;border-radius:50%;
  background:conic-gradient(var(--c-brand) 0 92%, #34363F 92% 100%);
  display:flex;align-items:center;justify-content:center;
}
.score-ring i{
  width:84px;height:84px;border-radius:50%;background:#16171C;
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-style:normal;
}
.score-ring b{font-size:1.85rem;line-height:1;color:var(--c-gold)}
.score-ring em{font-style:normal;font-size:.62rem;letter-spacing:1.5px;color:var(--c-muted);text-transform:uppercase;margin-top:2px}
.verdict-txt{flex:1 1 240px;min-width:0}
.verdict-txt h2{margin-top:0;margin-bottom:6px}
.stars{color:var(--c-gold);letter-spacing:3px;font-size:1.05rem}
.verdict-meta{font-size:.85rem;color:var(--c-muted);margin-top:4px}

.crit{list-style:none;margin-top:18px;border-top:1px solid var(--c-surface-2);padding-top:14px}
.crit li{display:flex;align-items:center;gap:10px;margin-bottom:9px;font-size:.88rem}
.crit .cn{flex:0 0 96px}
.crit .cb{flex:1 1 auto;height:8px;border-radius:6px;background:var(--c-surface-2);overflow:hidden;min-width:0}
.crit .cb i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--c-brand-dk),var(--c-brand-lt))}
.crit .cv{flex:0 0 30px;text-align:right;font-weight:bold;color:var(--c-gold)}

.pm{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
.pm-col{background:#16171C;border:1px solid var(--c-surface-2);border-radius:var(--r-sm);padding:12px 14px}
.pm-col h3{font-size:.9rem;letter-spacing:.5px;text-transform:uppercase;margin:0 0 8px}
.pm-plus h3{color:var(--c-good)}
.pm-minus h3{color:var(--c-bad)}
.pm-col ul{list-style:none;font-size:.88rem;margin:0}
.pm-col li{padding-left:20px;position:relative;margin-bottom:6px;line-height:1.5}
.pm-plus li:before{content:"+";position:absolute;left:2px;top:0;color:var(--c-good);font-weight:bold}
.pm-minus li:before{content:"–";position:absolute;left:2px;top:0;color:var(--c-bad);font-weight:bold}

/* ══════════ TABLES ══════════ */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-sm);border:1px solid var(--c-surface-2);margin-bottom:14px}
.entry table,table{border-collapse:collapse;width:100%;font-size:.86rem;min-width:440px}
caption{caption-side:bottom;text-align:left;font-size:.78rem;color:var(--c-muted);padding:8px 2px 0}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--c-surface-2);vertical-align:top}
thead th{background:var(--c-surface-2);font-size:.76rem;letter-spacing:.6px;text-transform:uppercase;color:#D7D9E1;white-space:nowrap}
tbody tr{background:var(--c-surface)}
tbody tr:nth-child(even){background:#1E1F25}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--c-brand-lt)}

/* ══════════ CHART ══════════ */
.chart{background:var(--c-surface);border:1px solid var(--c-surface-2);border-radius:var(--r-md);padding:14px;margin-bottom:14px}
.chart h3{font-size:.95rem;margin:0 0 4px}
.chart p{font-size:.8rem;color:var(--c-muted);margin-bottom:10px}
.chart svg{display:block;width:100%}
.chart figcaption{font-size:.78rem;color:var(--c-muted);margin-top:8px}
.charts{display:grid;grid-template-columns:1fr;gap:14px}

/* ══════════ GAMES ══════════ */
.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.game-card{
  border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--c-surface-2);
  aspect-ratio:16/10;display:flex;flex-direction:column;justify-content:flex-end;
  padding:9px;position:relative;text-decoration:none;color:#fff;
}
.game-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.78) 100%)}
.game-card b,.game-card em{position:relative;z-index:2}
.game-card b{font-size:.85rem;line-height:1.2;display:block}
.game-card em{font-style:normal;font-size:.68rem;color:#C9CBD4;letter-spacing:.4px}
.game-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.g1{background:linear-gradient(135deg,#D6403C,#7A1220)}
.g2{background:linear-gradient(135deg,#8A5CF6,#2B1B60)}
.g3{background:linear-gradient(135deg,#F0629C,#5C1440)}
.g4{background:linear-gradient(135deg,#F58B2C,#5E2410)}
.g5{background:linear-gradient(135deg,#3C7AD6,#0E2144)}
.g6{background:linear-gradient(135deg,#39B37A,#0D3A2A)}
.g7{background:linear-gradient(135deg,#1F9AA6,#062E36)}
.g8{background:linear-gradient(135deg,#C7A03A,#3D2A08)}

/* ══════════ SPORT CHIPS ══════════ */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{
  background:var(--c-surface-2);border:1px solid #3B3E49;border-radius:20px;
  padding:6px 13px;font-size:.82rem;
}
.chip b{color:var(--c-brand-lt)}

/* ══════════ REVIEW BLOCK ══════════ */
.review{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  background:linear-gradient(160deg,#23242C,#191A1F);
  border:1px solid #34363F;border-radius:var(--r-md);padding:16px;
}
.review-score{text-align:center;flex:0 0 92px}
.review-score b{display:block;font-size:2.3rem;line-height:1;color:var(--c-gold)}
.review-score .stars{font-size:.9rem;letter-spacing:2px}
.review-score span{display:block;font-size:.72rem;color:var(--c-muted);margin-top:4px}
.review-body{flex:1 1 220px;min-width:0}
.review-body blockquote{border:0;background:none;padding:0;margin:0 0 8px;font-style:italic}

/* ══════════ CTA STRIP ══════════ */
.cta-strip{
  background:linear-gradient(120deg,rgba(232,17,45,.16),rgba(232,17,45,.04));
  border:1px solid rgba(232,17,45,.35);border-radius:var(--r-md);
  padding:18px 16px;text-align:center;
}
.cta-strip h2{margin-top:0;margin-bottom:6px}
.cta-strip p{font-size:.88rem;color:var(--c-muted);margin-bottom:14px}
.promo{
  display:inline-block;border:1px dashed var(--c-gold);border-radius:8px;color:var(--c-gold);
  padding:4px 12px;font-weight:bold;letter-spacing:1.5px;margin-bottom:12px;
}

/* ══════════ FAQ ══════════ */
.faq details{
  background:var(--c-surface);border:1px solid var(--c-surface-2);
  border-radius:var(--r-sm);padding:12px 14px;margin-bottom:8px;
}
.faq summary{cursor:pointer;font-weight:bold;font-size:.95rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+ ";color:var(--c-brand-lt);font-weight:bold}
.faq details[open] summary:before{content:"– "}
.faq details p{margin-top:10px;margin-bottom:0;font-size:.9rem;color:#D3D5DD}

/* ══════════ EDITORIAL (блок о редакции над футером; страницы автора НЕТ) ══════════ */
.editorial{
  background:var(--c-surface-3);border:1px solid var(--c-surface-2);
  border-radius:var(--r-md);padding:14px 16px;margin-top:26px;font-size:.86rem;color:#D3D5DD;
}
.editorial h3{font-size:.8rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--c-muted);margin:0 0 8px}

/* ══════════ COOKIE NOTICE ══════════ */
.cookie-note{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  background:#16171C;border-top:1px solid var(--c-surface-2);
  padding:12px var(--s-md);display:none;
}
.cookie-note.is-visible{display:block}
.cookie-note-in{
  max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;
}
.cookie-note p{margin:0;font-size:.82rem;color:#D3D5DD;flex:1 1 260px}
.cookie-note .btn{padding:9px 18px;font-size:.86rem}

/* ══════════ FOOTER ══════════ */
.ftr{border-top:1px solid var(--c-surface-2);background:#0C0C0E;padding:26px 0 30px;font-size:.86rem}
.ftr-grid{display:grid;grid-template-columns:1fr;gap:20px}
.ftr h3{font-size:.76rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--c-muted);margin:0 0 9px}
.ftr ul{list-style:none}
.ftr li{margin-bottom:5px}
.ftr a{color:#D3D5DD;text-decoration:none}
.ftr a:hover{color:var(--c-brand-lt)}
.ftr-legal{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--c-surface-2);
  color:var(--c-muted);font-size:.78rem;line-height:1.6;
}
.age{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;border:2px solid var(--c-brand);
  color:var(--c-brand);font-weight:bold;font-size:.78rem;float:left;margin:0 12px 6px 0;
}

/* Узкие экраны: лого компактнее, чтобы nowrap-текст гарантированно влезал рядом с бургером */
@media(max-width:420px){
  .logo-txt{font-size:1rem}
  .logo-txt span{font-size:.55rem;letter-spacing:1px}
  .logo-mark{width:34px;height:34px;flex:0 0 34px}
}
@media(max-width:340px){
  .logo-txt span{display:none} /* на 320px подпись убираем — остаётся «Fraga Casino» */
}

/* ══════════ DESKTOP ══════════ */
@media(min-width:900px){
  .hdr-inner{flex-wrap:nowrap;padding-top:12px;padding-bottom:12px;gap:18px}
  .logo{margin-right:6px}
  .burger{display:none}
  .nav{order:2;display:block;flex:1 1 auto;min-width:0}
  .nav ul{flex-direction:row;gap:2px;padding:0;flex-wrap:wrap}
  .nav a{padding:8px 10px;font-size:.9rem;color:#D9DBE3}
  .hdr-cta{order:3;flex:0 0 auto;gap:10px}
  .hdr-cta .btn{flex:0 0 auto;padding:12px 22px}
  h1{font-size:2.1rem}
  h2{font-size:1.5rem}
  .charts{grid-template-columns:1fr 1fr}
  .games{grid-template-columns:repeat(4,1fr)}
  .pm{grid-template-columns:1fr 1fr}
  .ftr-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
  .score-ring{width:124px;height:124px;flex:0 0 124px}
  .score-ring i{width:100px;height:100px}
  .score-ring b{font-size:2.2rem}
}
@media(max-width:400px){
  .toc ol{columns:1}
  .btn{padding:12px 10px;font-size:.9rem}
  h1{font-size:1.4rem}
}