/*
Theme Name: RobsDrops Play
Theme URI: https://robsdrops.com/
Author: Chris / RobsDrops
Description: Clean, playful custom WordPress theme for RobsDrops games and learning pages.
Version: 5.0
Text Domain: robsdrops-play
*/
:root{--bg:#f6f8fc;--surface:#fff;--ink:#182033;--muted:#667085;--line:#e4e8f0;--accent:#5b5ff5;--accent2:#00b894;--warm:#ffb84d;--shadow:0 14px 40px rgba(35,42,75,.10);--radius:24px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}.site-shell{min-height:100vh}.site-header{position:relative;overflow:hidden;background:linear-gradient(135deg,#1c2340 0%,#282c62 55%,#173d52 100%);color:#fff;padding:28px 24px 64px}.site-header:before,.site-header:after{content:"";position:absolute;border-radius:50%;filter:blur(1px);opacity:.35}.site-header:before{width:240px;height:240px;background:#7657ff;right:-50px;top:-80px}.site-header:after{width:170px;height:170px;background:#00d4a4;left:8%;bottom:-100px}.header-inner{position:relative;z-index:2;max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:14px}.brand-mark{width:52px;height:52px;border-radius:17px;background:#fff;color:#252a5a;display:grid;place-items:center;font-size:26px;box-shadow:0 10px 30px rgba(0,0,0,.18);transform:rotate(-4deg)}.brand-title{font-size:clamp(1.55rem,3vw,2.25rem);font-weight:850;letter-spacing:-.04em}.brand-tag{display:block;font-size:.82rem;color:#dbe3ff;font-weight:600;letter-spacing:.04em}.main-nav{display:flex;gap:8px;flex-wrap:wrap}.main-nav a{padding:9px 14px;border-radius:999px;color:#edf1ff;font-weight:700;font-size:.9rem}.main-nav a:hover{background:rgba(255,255,255,.12)}.menu-toggle{display:none;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:9px 12px;font-weight:800}.hero{position:relative;z-index:2;max-width:1180px;margin:52px auto 0}.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.15);padding:7px 11px;border-radius:999px;font-size:.78rem;font-weight:800}.hero h1{max-width:760px;margin:14px 0 8px;font-size:clamp(2rem,5vw,4rem);line-height:1.02;letter-spacing:-.055em}.hero p{max-width:680px;margin:0;color:#dce3f7;font-size:1.05rem}.main-wrap{max-width:1180px;margin:-28px auto 0;padding:0 24px 55px;position:relative;z-index:3}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:0 0 18px}.section-head h2{margin:0;font-size:1.55rem;letter-spacing:-.03em}.section-head p{margin:0;color:var(--muted)}.game-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.game-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .18s ease}.game-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(35,42,75,.15)}.game-media{aspect-ratio:16/10;background:linear-gradient(135deg,#e7e9ff,#dffaf2);overflow:hidden;position:relative}.game-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.game-card:hover .game-media img{transform:scale(1.025)}.game-badge{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);padding:6px 10px;border-radius:999px;font-size:.73rem;font-weight:850;color:#39405c}.game-body{padding:20px}.game-body h2{font-size:1.35rem;line-height:1.2;margin:0 0 7px;letter-spacing:-.025em}.game-body p{color:var(--muted);font-size:.92rem;margin:0 0 18px}.play-link{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:9px 14px;border-radius:12px;font-weight:800;font-size:.88rem}.play-link:hover{filter:brightness(.96)}.content-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,4vw,42px);box-shadow:var(--shadow)}.entry-title{font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.04em;line-height:1.08;margin:0 0 22px}.entry-content{font-size:1rem}.entry-content a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}.entry-content iframe{max-width:100%;border-radius:18px}.site-footer{padding:28px 24px 38px;color:#7b8497;text-align:center;font-size:.85rem}.site-footer strong{color:#343c52}.pagination{display:flex;gap:8px;justify-content:center;margin-top:28px}.pagination .page-numbers{background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:10px}.pagination .current{background:var(--accent);color:#fff;border-color:var(--accent)}
@media(max-width:850px){.game-grid{grid-template-columns:1fr 1fr}.main-nav{display:none}.main-nav.is-open{display:flex;position:absolute;right:0;top:62px;background:#252a55;padding:10px;border-radius:16px;box-shadow:var(--shadow);flex-direction:column;min-width:180px}.menu-toggle{display:block}.header-inner{align-items:flex-start}}
@media(max-width:600px){.site-header{padding:20px 18px 52px}.main-wrap{padding:0 14px 38px}.game-grid{grid-template-columns:1fr}.hero{margin-top:38px}.brand-mark{width:46px;height:46px}.content-card{border-radius:18px}.section-head{align-items:start;flex-direction:column;gap:3px}}

/* ===== RobsDrops Play V2 ===== */
:root{--rd-bg:#11182d;--rd-panel:#1d2947;--rd-panel2:#243252;--rd-text:#f5f7ff;--rd-muted:#aeb8d1;--rd-accent:#706cff;--rd-line:rgba(255,255,255,.10)}
body{background:radial-gradient(circle at 12% 45%,rgba(34,199,169,.10),transparent 24rem),radial-gradient(circle at 88% 70%,rgba(112,108,255,.10),transparent 28rem),var(--rd-bg)!important;color:var(--rd-text)!important}
.site-main,main,.games-section,.home-games{background:transparent!important}
.hero,.home-hero{min-height:0!important;padding-top:48px!important;padding-bottom:54px!important;background:linear-gradient(125deg,#20294f 0%,#1d3551 100%)!important}
.hero h1,.home-hero h1{max-width:760px;font-size:clamp(2.5rem,5vw,4.5rem)!important;line-height:.98!important;margin-bottom:14px!important}
.hero p,.home-hero p{color:#d0d7e8!important}
.games-section,.home-games{padding-top:38px!important;padding-bottom:70px!important}
.games-section h2,.home-games h2,.games-section .section-title,.home-games .section-title{color:var(--rd-text)!important}
.games-section p,.home-games p{color:var(--rd-muted)!important}
.game-grid,.games-grid,.posts-grid{align-items:stretch!important;gap:24px!important}
.game-card,.games-grid article,.posts-grid article{background:linear-gradient(180deg,var(--rd-panel2),var(--rd-panel))!important;border:1px solid var(--rd-line)!important;border-radius:22px!important;overflow:hidden!important;box-shadow:0 18px 42px rgba(0,0,0,.22)!important;min-height:0!important;height:auto!important;color:var(--rd-text)!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.game-card:hover,.games-grid article:hover,.posts-grid article:hover{transform:translateY(-5px);border-color:rgba(112,108,255,.55)!important;box-shadow:0 24px 50px rgba(0,0,0,.30)!important}
.game-card img,.games-grid article img,.posts-grid article img,.game-card .wp-post-image,.games-grid .wp-post-image,.posts-grid .wp-post-image{display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;object-fit:cover!important;object-position:center!important;border-radius:0!important}
.game-card figure,.game-card .card-image,.games-grid article figure,.posts-grid article figure{margin:0!important;width:100%!important;aspect-ratio:16/9!important;overflow:hidden!important;background:#0d1427!important}
.game-card .card-content,.game-card .entry-content,.game-card .entry-header,.games-grid article .entry-content,.games-grid article .entry-header,.posts-grid article .entry-content,.posts-grid article .entry-header{padding:18px 20px!important}
.game-card h2,.game-card h3,.games-grid article h2,.games-grid article h3,.posts-grid article h2,.posts-grid article h3{color:#fff!important;margin:0 0 8px!important}
.game-card p,.games-grid article p,.posts-grid article p{color:var(--rd-muted)!important}
.game-card a.button,.game-card .button,.game-card .btn,.games-grid article .button,.posts-grid article .button{background:var(--rd-accent)!important;color:#fff!important;border:0!important}
.site-footer,footer{background:#0c1223!important;color:var(--rd-muted)!important;border-top:1px solid var(--rd-line)!important}
.site-content,.content-area{background:transparent!important}.entry-title{color:var(--rd-text)!important}
@media(max-width:780px){.hero,.home-hero{padding-top:36px!important;padding-bottom:42px!important}.games-section,.home-games{padding-top:28px!important}}


/* ===== V3: centered hero message ===== */
.hero .hero-inner,
.home-hero .hero-inner,
.hero .wrap,
.home-hero .wrap,
.hero .container,
.home-hero .container{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
}

.hero .eyebrow,
.home-hero .eyebrow,
.hero .badge,
.home-hero .badge{
  margin-left:auto!important;
  margin-right:auto!important;
}

.hero h1,
.home-hero h1{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:900px!important;
}

.hero p,
.home-hero p{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  max-width:760px!important;
}

/* Keep the game section separate and below the hero */
.games-section,
.home-games{
  position:relative!important;
  margin-top:0!important;
}


/* ===== V4: compact homepage hero ===== */
.hero,
.home-hero{
  padding-top:28px!important;
  padding-bottom:30px!important;
}

.hero .hero-inner,
.home-hero .hero-inner,
.hero .wrap,
.home-hero .wrap,
.hero .container,
.home-hero .container{
  max-width:900px!important;
  padding-top:0!important;
  padding-bottom:0!important;
}

.hero .eyebrow,
.home-hero .eyebrow,
.hero .badge,
.home-hero .badge{
  margin-bottom:14px!important;
}

.hero h1,
.home-hero h1{
  font-size:clamp(2.15rem,4vw,3.55rem)!important;
  line-height:1.02!important;
  margin-top:0!important;
  margin-bottom:10px!important;
}

.hero p,
.home-hero p{
  font-size:1rem!important;
  line-height:1.45!important;
  margin-top:0!important;
  margin-bottom:0!important;
  max-width:720px!important;
}

/* Pull game selection closer to hero */
.games-section,
.home-games{
  padding-top:26px!important;
}

@media(max-width:780px){
  .hero,.home-hero{
    padding-top:22px!important;
    padding-bottom:24px!important;
  }
  .hero h1,.home-hero h1{
    font-size:clamp(2rem,9vw,2.8rem)!important;
  }
  .games-section,.home-games{
    padding-top:22px!important;
  }
}


/* ===== V5 compatibility fix =====
   Homepage game-card styling must NEVER affect plugin elements that happen
   to use the class "game-card".
*/
body:not(.home) .content-card .game-card {
    background: initial !important;
    color: inherit !important;
    border: initial !important;
    border-radius: initial !important;
    overflow: visible !important;
    box-shadow: none !important;
    height: auto !important;
    transform: none !important;
}

/* Undo the overly broad V2 image/card selectors inside normal post content. */
body:not(.home) .content-card .game-card img {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: initial !important;
    border-radius: initial !important;
}
body:not(.home) .content-card .game-card figure,
body:not(.home) .content-card .game-card .card-image {
    width: auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
    background: transparent !important;
}
body:not(.home) .content-card .game-card h2,
body:not(.home) .content-card .game-card h3,
body:not(.home) .content-card .game-card p {
    color: inherit !important;
}

/* Single pages use a white content card, therefore their page title must be dark. */
body:not(.home) .content-card .entry-title {
    color: #172033 !important;
}