/*
Theme Name: Casino Navi
Theme URI: https://example.com/casino-navi
Author: Lee
Author URI: https://example.com
Description: カジノ・ブックメーカー徹底レビュー用の日本語WordPressテーマ。Stake / 1xBet / BitStarz のレビューページを美しく表示します。ブランドカラー対応・スティッキージャンプナビ・スコアリング・レスポンシブ対応。
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: casino-navi
Tags: casino, review, japanese, custom-colors, full-width-template, threaded-comments
*/

/* =========================================================
   0. RESET & TOKENS
   ========================================================= */
:root{
  --bg:#f4f6fb;
  --surface:#ffffff;
  --ink:#0d1526;
  --ink-soft:#475069;
  --ink-faint:#8a93a8;
  --line:#e6e9f2;
  --line-soft:#eef1f7;
  --navy:#0b1220;
  --navy-2:#121b30;
  --brand-a:#22d3ee;   /* portal cyan */
  --brand-b:#818cf8;   /* portal violet */
  --good:#16a34a;
  --bad:#e11d48;
  --warn:#f59e0b;
  --radius:16px;
  --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(13,21,38,.05), 0 2px 8px rgba(13,21,38,.05);
  --shadow:0 6px 24px rgba(13,21,38,.08), 0 2px 6px rgba(13,21,38,.04);
  --shadow-lg:0 20px 60px rgba(13,21,38,.16);
  --maxw:1120px;
  --readw:760px;
  --f-disp:'Outfit','Noto Sans JP',system-ui,sans-serif;
  --f-body:'Noto Sans JP','Outfit',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--ink);
  font-size:15px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"palt" 1;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:rgba(129,140,248,.28)}

/* =========================================================
   1. SITE HEADER / NAV
   ========================================================= */
.site-head{
  position:sticky;top:0;z-index:60;
  background:rgba(11,18,32,.92);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.site-head__inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;align-items:center;gap:1.25rem;
  padding:.7rem 1.25rem;
}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.brand__mark{
  width:34px;height:34px;border-radius:10px;
  background:linear-gradient(135deg,var(--brand-a),var(--brand-b));
  display:grid;place-items:center;
  box-shadow:0 4px 18px rgba(129,140,248,.45);
  position:relative;
}
.brand__mark::after{
  content:"";position:absolute;inset:0;border-radius:10px;
  border:1px solid rgba(255,255,255,.35);
}
.brand__mark span{
  font-family:var(--f-disp);font-weight:800;font-size:18px;color:#0b1220;
  transform:translateY(-.5px);
}
.brand__name{
  font-family:var(--f-disp);font-weight:700;font-size:1.12rem;color:#fff;
  letter-spacing:.2px;line-height:1;
}
.brand__name b{
  background:linear-gradient(90deg,var(--brand-a),var(--brand-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;
}
.brand__tag{display:block;font-family:var(--f-body);font-size:10.5px;color:rgba(255,255,255,.5);font-weight:500;letter-spacing:1.2px;margin-top:2px}

.nav{margin-left:auto;display:flex;align-items:center;gap:.35rem}
.nav a{
  color:rgba(255,255,255,.72);font-size:13.5px;font-weight:600;
  padding:.5rem .8rem;border-radius:9px;transition:.18s;white-space:nowrap;
}
.nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav a.is-current{color:#fff;background:rgba(129,140,248,.22)}

.nav-toggle{
  display:none;margin-left:auto;width:42px;height:38px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);border-radius:10px;cursor:pointer;
  flex-direction:column;gap:4px;align-items:center;justify-content:center;
}
.nav-toggle span{width:18px;height:2px;background:#fff;border-radius:2px;transition:.2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:840px){
  .nav-toggle{display:flex}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:#0b1220;border-bottom:1px solid rgba(255,255,255,.08);
    padding:.5rem .75rem .9rem;
    max-height:0;overflow:hidden;transition:max-height .28s ease;
  }
  .nav.is-open{max-height:60vh}
  .nav a{padding:.8rem .7rem;border-radius:9px}
}

/* =========================================================
   2. BREADCRUMB
   ========================================================= */
.crumb{max-width:var(--maxw);margin:0 auto;padding:.85rem 1.25rem .25rem}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:12px;color:var(--ink-faint)}
.crumb a{color:var(--ink-soft);font-weight:600}
.crumb a:hover{color:var(--ink)}
.crumb li+li::before{content:"›";margin-right:.45rem;color:var(--line)}
.crumb [aria-current]{color:var(--ink);font-weight:700}

/* =========================================================
   3. BUTTONS (shared)
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-disp);font-weight:700;font-size:15px;letter-spacing:.3px;
  padding:.95rem 1.6rem;border-radius:13px;border:none;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s;
  line-height:1;
}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);}

/* =========================================================
   4. SITE FOOTER
   ========================================================= */
.site-foot{
  background:var(--navy);color:rgba(255,255,255,.62);
  margin-top:4rem;padding:2.6rem 1.25rem 2rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.site-foot__inner{max-width:var(--maxw);margin:0 auto}
.foot-grid{display:flex;flex-wrap:wrap;gap:2.5rem 3rem;align-items:flex-start}
.foot-brand{max-width:300px}
.foot-brand .brand{margin-bottom:.8rem}
.foot-brand p{font-size:12.5px;line-height:1.8;color:rgba(255,255,255,.5)}
.foot-col h4{font-family:var(--f-disp);color:#fff;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:.7rem}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:.4rem}
.foot-col a{font-size:13px;color:rgba(255,255,255,.62);transition:.15s}
.foot-col a:hover{color:#fff}
.foot-rg{
  margin-top:2rem;padding:1rem 1.2rem;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  display:flex;gap:.9rem;align-items:flex-start;font-size:12px;line-height:1.75;color:rgba(255,255,255,.6)
}
.foot-rg .age{
  flex-shrink:0;font-family:var(--f-disp);font-weight:800;font-size:13px;color:#fff;
  background:#e11d48;border-radius:8px;padding:.3rem .55rem;line-height:1;
}
.foot-base{
  max-width:var(--maxw);margin:1.6rem auto 0;padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:11.5px;color:rgba(255,255,255,.4);text-align:center;
}

/* =========================================================
   5. GENERIC PAGE (page.php / index.php)
   ========================================================= */
.page-wrap{max-width:var(--readw);margin:2rem auto;padding:0 1.25rem 2rem}
.page-wrap h1{font-family:var(--f-disp);font-size:2rem;font-weight:800;margin-bottom:1rem}
.page-wrap h2{font-family:var(--f-disp);font-size:1.4rem;font-weight:700;margin:2rem 0 .8rem}
.page-wrap p{margin-bottom:1rem;color:var(--ink-soft)}
.page-wrap img{border-radius:12px;margin:1rem 0}
.page-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm)}