/*
Theme Name: Ultimate Slots Dark — v10d (Stable)
Author: Ultimate Slots
Description: Dark + gold mockup-exact theme with mobile drawer, dropdowns, shortcode styling, widgetized footer, and Customizer options.
Version:  10.4
Text Domain: ultimate-slots-dark
*/

:root{
  --bg:#0b0d10; --panel:#181a1d; --panel-2:#181a1d;
  --border:#2a2d33; --text:#f5f6f8; --muted:#c7ccd4;
  --gold:#f2b01e; --gold-2:#ffd166;
  --radius:12px;
}

/* Typography */
html{font-family:"Noto Sans",system-ui,-apple-system,Segoe UI,Roboto,Inter,"Helvetica Neue",Arial}
*,*::before,*::after{box-sizing:border-box;font-family:inherit}
body{margin:0;background:var(--bg);color:var(--text);font-size:17px;line-height:1.65}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}

/* Containers */
.container-1280{max-width:1280px;margin-inline:auto;padding:0 20px}
.container-960{max-width:960px;margin-inline:auto;padding:0 16px}

/* Header */
.site-header{position:sticky;top:0;z-index:40;background:var(--panel);border-bottom:1px solid var(--border)}
.header-inner{height:72px;padding:0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800}
.brand .chip{width:32px;height:32px;display:grid;place-items:center;border:3px solid var(--gold);border-radius:999px}
.brand .brand-text strong{color:var(--gold-2);font-weight:900}

/* Desktop nav with submenus */
.nav .menu{display:flex;gap:6px;list-style:none;margin:0;padding:0}
.menu-item{position:relative;white-space:nowrap}
.nav .menu > .menu-item > a{display:inline-block;padding:.6rem .85rem;border-radius:10px;color:#fff;font-size:1.1rem}
.nav .menu > .menu-item > a:hover{background:var(--gold);color:#111;text-decoration:none}
.submenu,.sub-menu{display:none;position:absolute;top:100%;left:0;min-width:220px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:.4rem;margin-top:8px;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.menu-item.open > .submenu, .menu-item.open > .sub-menu{display:block}
.submenu li,.sub-menu li{list-style:none}
.submenu a,.sub-menu a{display:block;padding:.5rem .75rem;border-radius:8px;color:#fff}
.submenu a:hover,.sub-menu a:hover{background:var(--gold);color:#111;text-decoration:none}
html,body{overflow-x:hidden}
.submenu.align-right,.sub-menu.align-right{left:auto;right:0}

/* Mobile menu button */
.menu-btn{display:none;padding:.55rem .9rem;border:1px solid var(--border);border-radius:10px;background:#0f1217;color:#fff;font-weight:800}
@media (max-width: 960px){
  .nav{display:none}
  .menu-btn{display:inline-block}
}

/* Mobile drawer */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.25s;z-index:50}
.overlay.show{opacity:1;visibility:visible}
.no-scroll{overflow:hidden}
.mobile-nav{position:fixed;top:0;right:0;bottom:0;width:320px;background:#0f1217;border-left:1px solid var(--border);transform:translateX(100%);transition:transform .25s ease;z-index:60;padding:16px;overflow:auto}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav-header{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;color:#fff}
.mobile-nav .custom-logo, .mobile-logo{height:28px;width:auto}
.mobile-nav .close{margin-left:auto;background:transparent;border:1px solid var(--border);color:#fff;border-radius:8px;width:32px;height:32px;cursor:pointer}
.m-menu{list-style:none;margin:0;padding:0}
.m-menu a{display:block;padding:.7rem 0;color:#fff}
@media (max-width: 960px){
  .mobile-nav .m-menu a:hover { text-decoration: none; background: rgba(255,255,255,.04); }
  .mobile-nav .m-menu a:active { background: rgba(255,255,255,.06); }
}

/* Mobile submenu toggles */
.mobile-nav .m-menu li{position:relative}
.mobile-nav .m-menu li.menu-item-has-children > a{padding-right:44px}
.mobile-nav .m-menu .m-sub-toggle{
  position:absolute;top:4px;right:0;width:34px;height:34px;
  border:1px solid var(--border);border-radius:8px;background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer
}
.mobile-nav .m-menu .m-sub-toggle svg{width:16px;height:16px}
.mobile-nav .m-menu li.has-open > .sub-menu{display:block}
.mobile-nav .m-menu .sub-menu{
  display:none;margin:4px 0 6px 12px;padding:6px 0 6px 10px;border-left:1px solid var(--border)
}
.mobile-nav .m-menu .sub-menu a{padding:.55rem 0}

/* Page head */
.page-head{margin:18px 0 8px}
.page-head h1{margin:0 0 4px 0;font-size:2.15rem;line-height:1.25}
.page-head .meta{margin:0;color:#a9b0bb;font-size:.98rem}

/* Breadcrumbs */
.breadcrumbs{margin:16px 0 8px;color:var(--muted);font-size:.95rem}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumbs li{display:flex;align-items:center}
.breadcrumbs li+li::before{content:"›";opacity:.7;margin:0 6px}
.breadcrumbs a{color:var(--muted);text-decoration:none;padding:2px 0}
.breadcrumbs a:hover{color:var(--gold);text-decoration:underline}
.breadcrumbs [aria-current="page"]{color:#fff}

/* Cards & player */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius)}
.player{margin:12px 0 18px}
.iframe-ph{height:360px;display:grid;place-items:center;color:#9aa3b4;background:#0f1319;border-radius:var(--radius)}
.player-actions{display:flex;gap:10px;padding:10px;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:.75rem 1.1rem;border-radius:10px;font-weight:800;border:1px solid transparent;text-decoration:none}
.btn .icon svg{width:16px;height:16px}
.btn-gold,.btn-gold:link,.btn-gold:visited{background:var(--gold);color:#000!important}
.btn-gold:hover{background:#ffc53d;color:#000}
.btn-dark{background:#0f1319;color:#d0d6e2;border-color:#242a34}
.btn-dark:hover{background:#121720}

/* TOC */
.toc{padding:12px;margin:10px 0 16px}
.toc h4{margin:.25rem 0 .4rem}
.toc a{color:var(--muted)}

/* Sections */
.section{padding:12px 0 18px}
.section h2{font-size:1.5rem;margin:10px 0}
.entry-content p, .card p, .section p { margin:0 0 1.05rem; }

/* Callout */
.callout{border:1px solid var(--gold);background:var(--panel);padding:14px;border-radius:12px}

/* Pros & Cons — flex to avoid grid holes */
.pros-cons{display:flex;flex-wrap:wrap;gap:14px}
.pros-cons .card{flex:1 1 320px;min-width:280px;max-width:100%;padding:12px}
.pros-cons .title, .pc-head{font-weight:900;color:var(--gold);margin-bottom:.4rem}
.pros-cons ul{margin:0 0 6px 20px}

/* Review Summary */
.review-summary{padding:12px}
.review-summary .rs-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.review-summary .rs-title .m0{margin:0}
.review-summary .rs-title .subtle{color:var(--muted);margin:.2rem 0 0}
.review-summary .rs-score{display:flex;align-items:baseline;gap:2px;font-weight:900}
.review-summary .rs-score .num{font-size:1.6rem}
.review-summary .rs-score .den{opacity:.8}
.review-summary .rs-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:.6rem 0}
.review-summary .rs-item .label{color:var(--muted);font-size:.9rem;margin-bottom:.15rem}
.review-summary .rs-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:.25rem}

/* Tables */
.table-wrap{padding:12px}
.table-wrap table{width:100%;border-collapse:separate;border-spacing:0}
.table-wrap th, .table-wrap td{padding:10px 14px;vertical-align:top;border-bottom:1px solid var(--border)}
.table-wrap th{color:#e8edf5;font-weight:900;width:180px;white-space:nowrap}
.table-wrap tr:last-child th, .table-wrap tr:last-child td{border-bottom:0}
.table-wrap caption{caption-side:bottom;color:var(--muted);font-size:.92rem;padding-top:.5rem}

/* FAQ */
.faq details{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin:8px 0}
.faq summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq summary span{ color:var(--gold); font-weight:700; }
.faq .faq-toggle{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--border); border-radius:8px; background:transparent; color:var(--text); margin-left:.5rem; }
.faq .faq-toggle svg{ width:16px; height:16px; }
details summary::-webkit-details-marker{display:none}
details summary::marker{content:""}

/* Footer */
.site-footer{margin-top:28px;background:var(--panel);border-top:1px solid var(--border)}
.footer-grid{display:grid;row-gap:18px;column-gap:24px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));padding:26px 0}
.footer-heading{color:#fff;font-weight:700;margin:0 0 .5rem 0;font-size:1rem}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:.6rem 0}
.site-footer a{color:#cfd4de}
.site-footer a:hover{color:#fff;text-decoration:underline}
.footer-bottom{border-top:1px solid var(--border);padding:20px 0 26px;color:#9aa3b4;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{border:1px solid var(--border);padding:.2rem .5rem;border-radius:999px;color:#cfd4de}

/* Widgets in footer */
.site-footer .widget{margin:0 0 .9rem 0}
.site-footer .widget ul{list-style:none;margin:0;padding:0}
.site-footer .widget li{margin:.6rem 0}

/* Skip link */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:12px;z-index:1000;width:auto;height:auto;background:#000;color:#fff;padding:8px 12px;border-radius:8px}


/* === v10b: Mobile drawer submenu fix === */
/* Reset desktop dropdown styles inside the drawer */
.mobile-nav .m-menu .sub-menu{
  position: static !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: none;
  margin: 4px 0 6px 12px;
  padding: 6px 0 6px 10px;
  border-left: 1px solid var(--border);
  width: 100%;
  z-index: auto;
}
.mobile-nav .m-menu li.has-open > .sub-menu{ display:block; }
.mobile-nav .m-menu .sub-menu a{ padding:.55rem 0; white-space:normal; }
.mobile-nav .m-menu li.menu-item-has-children > a{ padding-right:44px; }
.mobile-nav .m-menu .m-sub-toggle svg{ transition:transform .2s ease; }
.mobile-nav .m-menu li.has-open > .m-sub-toggle svg{ transform:rotate(180deg); }


/* === v10c: Mobile drawer polish === */
/* Equal sizing for close & chevrons */
.mobile-nav .close,
.mobile-nav .m-menu .m-sub-toggle{
  width:32px; height:32px; border:1px solid var(--border); border-radius:8px;
  background:transparent; color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer
}
.mobile-nav .m-menu .m-sub-toggle{ position:absolute; top:2px; right:0; }
/* No hover backgrounds in drawer; keep text white */
@media (max-width:960px){
  .mobile-nav .m-menu a{ color:#fff; }
  .mobile-nav .m-menu a:hover,
  .mobile-nav .m-menu a:active{ text-decoration:none; background:transparent; }
}


/* v10c logo-left fix */
.brand{ margin:0; }
.brand .custom-logo-link{ display:inline-flex; align-items:center; margin:0; }
.brand .custom-logo{ display:block; height:auto; margin:0; }
.header-inner{   } /* ensure predictable inner padding */
 /* prevent double-padding if any */


}


/* v10c final tablet gutter fix: ensure header-inner keeps responsive inline padding even when sharing classes */
.site-header .header-inner{
  padding-block: 0;
  padding-inline: clamp(16px, 3.5vw, 28px);
}


.header-bar{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* v10d: breadcrumbs minor size & tap target */
.breadcrumbs{ font-size: .92rem; }
.breadcrumbs a{ padding: 3px 0; }

.faq .faq-toggle svg{ transition: transform .2s ease; }
.faq details[open] .faq-toggle svg{ transform: rotate(90deg); }