/* ============================================================
   olxads.in theme: light, boxed, colour-band design (teal).
   Loaded AFTER styles.css by includes/site-header.php.

   Safe by design:
   - Never touches the ad scripts, ad slots' size, .game-play,
     .game-frame, .fullscreen-ad-slot or any game logic.
   - The game stage (.game-play) stays a dark panel so every game's
     own colours keep working.

   To re-colour the whole site change the five --t-accent* values.
   ============================================================ */
:root{
  --t-accent:#0d9488;--t-accent-d:#0f766e;--t-accent-l:#e6f6f4;--t-accent-b:#c4e6e1;
  --t-bg:#f1f6f5;--t-ink:#14282a;--t-ink2:#4b5f61;--t-muted:#7d8e90;--t-border:#d8e6e3;
  --t-dark:#0e1a1c;--t-dark2:#081214;--t-r:4px;
}

/* ---------- Light page chrome: remap the old dark-theme variables ---------- */
body{
  --text-color:var(--t-ink);--color-text-muted:var(--t-ink2);
  --background-color:var(--t-bg);--background-elevated:#fff;
  --text-on-dark:var(--t-ink);--text-on-dark-soft:var(--t-ink2);--text-on-dark-muted:var(--t-ink2);
  --text-heading-sub:var(--t-accent-d);
  --white:#fff;--light-gray:#eef5f4;--border-color:var(--t-border);
  --surface-header:var(--t-accent);--surface-panel:#fff;--surface-panel-soft:#fff;
  --border-panel:var(--t-border);--shadow-panel:0 1px 3px rgba(14,40,40,.08);
  --primary-color:var(--t-accent-d);
}
html body{
  background:var(--t-bg) !important;
  color:var(--t-ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
body.page-games.page-games--library{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
body.page-game{
  --game-text-on-play:#ffffff;--game-muted-on-play:#b9c8ca;
}
h1,h2,h3,h4{letter-spacing:-.01em}

/* ---------- The game stage stays DARK (games depend on light-on-dark) ---------- */
body.page-game .game-play,
body.page-game .game-play-inner{
  --text-color:#f8fafc;--color-text-muted:#b9c8ca;
  --text-on-dark:#f8fafc;--text-on-dark-soft:#e6eeee;--text-on-dark-muted:#b9c8ca;--text-heading-sub:#93c5fd;
  --white:rgba(255,255,255,.08);--light-gray:#1b2e32;--border-color:rgba(255,255,255,.16);
  --background-color:#0e1a1c;--background-elevated:#16262a;
  --surface-panel:#16262a;--surface-panel-soft:rgba(255,255,255,.06);--border-panel:rgba(255,255,255,.14);
}
body.page-game .game-play{
  background:linear-gradient(165deg,#0f1c1f 0%,#17303a 100%);
  border:1px solid #0b1517;
  border-radius:var(--t-r);
  box-shadow:0 1px 3px rgba(14,40,40,.18);
}
body.page-game .game-control{background-color:var(--t-accent);color:#fff}
body.page-game .game-control:hover{background-color:#14b8a6;color:#06201d}

/* ---------- Header: menu left, logo centre, search right ---------- */
html body header.site-header{
  background:var(--t-accent);backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:none;border-bottom:none;position:sticky;top:0;z-index:1000;
}
header.site-header .container{max-width:none;padding:0}
header.site-header nav.hdr{
  max-width:none;margin:0;padding:0 1.5rem;height:60px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
}
.hdr .logo{grid-column:2;justify-self:center;color:#fff;gap:.55rem;font-size:1.3rem;font-weight:800;letter-spacing:-.01em;text-decoration:none}
.hdr .logo .logo-icon{stroke:none;flex-shrink:0}
.hdr .logo-title{color:#fff;font-weight:800}
.hdr .logo-tagline{color:rgba(255,255,255,.85);font-size:.66rem}
.hdr-btn{
  width:42px;height:42px;border:none;border-radius:var(--t-r);background:rgba(255,255,255,.16);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s;
}
.hdr-btn:hover{background:rgba(255,255,255,.28)}
.hdr-menu-btn{grid-column:1;justify-self:start;flex-direction:column;gap:5px}
.hdr-menu-btn span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:all .25s}
.hdr-menu-btn.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr-menu-btn.open span:nth-child(2){opacity:0}
.hdr-menu-btn.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hdr-search-btn{grid-column:3;justify-self:end}
.site-menu{
  display:none;position:absolute;top:60px;left:0;width:240px;background:#fff;
  border:1px solid var(--t-border);border-top:none;border-radius:0 0 var(--t-r) var(--t-r);
  box-shadow:0 12px 28px rgba(8,30,30,.2);z-index:1001;
}
.site-menu.open{display:block}
.site-menu a{display:block;padding:.8rem 1.2rem;color:var(--t-ink);text-decoration:none;font-size:.95rem;font-weight:500;border-bottom:1px solid var(--t-border)}
.site-menu a:last-child{border-bottom:none}
.site-menu a:hover,.site-menu a[aria-current="page"]{background:var(--t-accent-l);color:var(--t-accent-d)}
.site-menu a[aria-current="page"]{font-weight:700}
@media(max-width:640px){
  header.site-header nav.hdr{padding:0 .9rem}
  .site-menu{width:100%;border-radius:0}
}

/* Search bar (Google CSE), opened by the header search button */
.site-search-bar{display:none;background:#fff;border-bottom:1px solid var(--t-border);padding:.7rem 0}
.site-search-bar.open{display:block}
.site-search-bar .gsc-control-cse{padding:0 !important;background:transparent !important;border:none !important}
.site-search-bar .gsc-input-box{border:1px solid var(--t-border) !important;border-radius:var(--t-r) !important}
.site-search-bar .gsc-search-button-v2{background:var(--t-accent) !important;border:1px solid var(--t-accent) !important;border-radius:var(--t-r) !important;padding:10px 14px !important}
.site-search-bar .gsc-search-button-v2 svg{fill:#fff !important}

/* ---------- Boxed layout on desktop ---------- */
@media(min-width:1260px){
  html{background:#d7e6e3}
  body{max-width:1200px;margin-left:auto;margin-right:auto;box-shadow:0 0 36px rgba(8,40,40,.16)}
}

/* ---------- Ad slot: keep the size, restyle the frame only ---------- */
.ad-slot{background:#fff;border:1px solid var(--t-border);border-radius:var(--t-r)}
.ad-slot__label{color:var(--t-muted);opacity:1}

/* ---------- Game library (home + /games) ---------- */
body.page-games.page-games--library .games-library-main{padding-bottom:2rem}
body.page-games.page-games--library .games-library-hero{
  margin-top:1.25rem;margin-bottom:.5rem;padding:clamp(1.5rem,3.5vw,2.25rem) clamp(1.1rem,3vw,2rem);
  border-radius:var(--t-r);background:var(--t-accent);border:none;box-shadow:none;backdrop-filter:none;
}
body.page-games.page-games--library .games-page-eyebrow{color:rgba(255,255,255,.8);background:none;-webkit-text-fill-color:currentColor}
body.page-games.page-games--library .games-page-intro h1{
  color:#fff;background:none;-webkit-text-fill-color:#fff;font-family:inherit;font-weight:800;
}
body.page-games.page-games--library .games-page-lead{color:rgba(255,255,255,.92)}
body.page-games.page-games--library .games-page-stats li{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);color:#fff;
}
body.page-games.page-games--library .games-page-stats__num{color:#fff}

body.page-games.page-games--library .games-board.games-board--grid{gap:1rem}
body.page-games.page-games--library .games-board__card{
  background:#fff;border:1px solid var(--t-border);border-radius:var(--t-r);color:var(--t-ink);
  box-shadow:0 1px 3px rgba(14,40,40,.06);transition:border-color .15s,box-shadow .15s,transform .15s;
}
body.page-games.page-games--library .games-board__card::before{height:0;background:none}
body.page-games.page-games--library .games-board__card:hover{
  transform:translateY(-2px);border-color:var(--t-accent);background:#fff;
  box-shadow:0 6px 18px rgba(13,148,136,.18);
}
body.page-games.page-games--library .games-board__card h2{color:var(--t-ink);font-family:inherit;font-weight:700}
body.page-games.page-games--library .games-board__card p{color:var(--t-ink2)}
body.page-games.page-games--library .games-board__card::after{
  color:#fff;background:var(--t-accent);border:none;box-shadow:none;border-radius:var(--t-r);
}
body.page-games.page-games--library .games-board__card:hover::after{background:var(--t-accent-d)}
body.page-games.page-games--library .games-board__card:focus-visible{outline:2px solid var(--t-accent);outline-offset:3px}
body.page-games.page-games--library .games-board__icon{filter:none}
body.page-games.page-games--library .games-board__thumb{box-shadow:0 1px 4px rgba(14,40,40,.25);border-radius:8px}
body.page-games.page-games--library .games-board__category{
  background:var(--t-accent-l);border:1px solid var(--t-accent-b);color:var(--t-accent-d);
}
.load-more-btn{background:var(--t-accent);border:none;color:#fff;border-radius:var(--t-r);padding:.7rem 1.8rem}
.load-more-btn:hover{background:var(--t-accent-d)}

/* ---------- Game pages: title band + panels ---------- */
body.page-game .game-page-hero{
  max-width:none;margin:1.25rem 0 .25rem;padding:1.2rem 1.5rem;background:var(--t-accent);
  border-radius:var(--t-r);text-align:center;
}
body.page-game .game-page-title{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:#fff;color:#fff;font-weight:800;margin:0 0 .35rem;
}
body.page-game .game-page-lead{color:rgba(255,255,255,.92);font-size:1rem}
/* play.php (uploaded games) has a bare <h1> as the first child */
body.page-game .game-page-main > .container > h1:first-child{
  margin:1.25rem 0 .25rem;padding:1rem 1.5rem;background:var(--t-accent);color:#fff;
  border-radius:var(--t-r);text-align:center;font-size:clamp(1.4rem,3.6vw,2rem);font-weight:800;
}
body.page-game .game-panel{
  background:#fff;border:1px solid var(--t-border);border-radius:var(--t-r);padding:0 0 1.1rem;
  box-shadow:0 1px 3px rgba(14,40,40,.06);overflow:hidden;
}
body.page-game .game-section-title{
  background:var(--t-accent);color:#fff;margin:0 0 1rem;padding:.65rem 1.25rem;font-size:1.02rem;font-weight:700;
}
body.page-game .game-panel > *:not(.game-section-title){margin-left:1.25rem;margin-right:1.25rem}
body.page-game .game-panel p,
body.page-game .game-panel li{color:var(--t-ink2)}
body.page-game .game-panel--desc-alt::before{display:none}
body.page-game .game-desc-alt__intro,
body.page-game .game-desc-alt__body{color:var(--t-ink2)}
body.page-game .game-desc-alt__list li{color:var(--t-ink2)}
body.page-game .game-howto-subhead{color:var(--t-accent-d)}
body.page-game .game-more-grid a{
  background:var(--t-accent-l);border:1px solid var(--t-accent-b);color:var(--t-accent-d);box-shadow:none;
}
body.page-game .game-more-grid a:hover{background:var(--t-accent);border-color:var(--t-accent);color:#fff}

/* ---------- Static pages (FAQ, About, Privacy ...), blog ---------- */
body.page-red-theme{background:var(--t-bg) !important}
body.page-red-theme header.site-header{background:var(--t-accent)}
body.page-red-theme .policy-content,
body.page-red-theme .faq-section,
body.page-red-theme .about-section,
body.page-red-theme .contact-section{
  background:#fff;border:1px solid var(--t-border);border-radius:var(--t-r);box-shadow:0 1px 3px rgba(14,40,40,.06);
}
body.page-red-theme h1{color:var(--t-accent-d);background:none;-webkit-text-fill-color:currentColor}
body.page-red-theme h2,
body.page-red-theme h3,
body.page-red-theme .faq-question{color:var(--t-ink)}
body.page-red-theme p,
body.page-red-theme li,
body.page-red-theme .faq-answer,
body.page-red-theme .about-content{color:var(--t-ink2)}
body.page-red-theme .faq-item,
body.page-red-theme .value-item,
body.page-red-theme .team-member,
body.page-red-theme .contact-info{background:var(--t-bg);border:1px solid var(--t-border);border-radius:var(--t-r)}
body.page-red-theme .important-notice{background:var(--t-accent-l);border:1px solid var(--t-accent-b);color:var(--t-ink)}
body.page-red-theme .form-group label{color:var(--t-ink)}
body.page-red-theme .form-group input,
body.page-red-theme .form-group textarea{background:#fff;border:1px solid var(--t-border);color:var(--t-ink);border-radius:var(--t-r)}
body.page-red-theme .form-group input:focus,
body.page-red-theme .form-group textarea:focus{border-color:var(--t-accent);outline:none;box-shadow:0 0 0 3px var(--t-accent-l)}
body.page-red-theme .submit-btn{background:var(--t-accent);color:#fff;border:none;border-radius:var(--t-r)}
body.page-red-theme .submit-btn:hover{background:var(--t-accent-d)}
body.page-red-theme a{color:var(--t-accent-d)}
body.page-blog main a{color:var(--t-accent-d)}
body.page-blog h1{color:var(--t-ink)}
body.page-blog p{color:var(--t-ink2)}
body.page-blog .blog-post-content,
body.page-blog .blog-post-content p,
body.page-blog .blog-post-content li{color:var(--t-ink)}
body.page-blog .blog-post-content h2,
body.page-blog .blog-post-content h3{color:var(--t-ink)}
body.page-blog main a[href^="/blog/"][style]:hover{border-color:var(--t-accent) !important;box-shadow:0 6px 18px rgba(13,148,136,.15)}

/* ---------- Footer: dark, with colour strip ---------- */
html body footer.site-footer{
  background:var(--t-dark);border-top:none;color:#b9c8ca;padding:0;margin-top:2rem;box-shadow:none;
}
.site-footer .ft-cta{background:var(--t-accent);color:#fff;padding:1.1rem 1.5rem}
.site-footer .ft-cta-in{max-width:1152px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.95rem;line-height:1.5}
.site-footer .ft-cta-in a{background:var(--t-dark2);color:#fff;font-weight:600;font-size:.85rem;padding:.55rem 1.1rem;border-radius:var(--t-r);text-decoration:none;white-space:nowrap}
.site-footer .ft-cta-in a:hover{background:#000}
.site-footer .ft-main{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:1.75rem;align-items:start;padding:2.2rem 0 .8rem}
.site-footer .ft-logo{font-size:1.25rem;font-weight:800;color:#fff;margin-bottom:.5rem}
.site-footer .ft-brand p{font-size:.84rem;line-height:1.65;color:#9db0b2;max-width:300px;margin:0}
.site-footer .ft-col h4{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;margin:0 0 .7rem}
.site-footer .ft-col ul{list-style:none;margin:0;padding:0}
.site-footer .ft-col li{margin:0}
.site-footer .ft-col a{display:block;width:fit-content;font-size:.86rem;color:#b9c8ca;text-decoration:none;padding:.22rem 0;transition:color .15s}
.site-footer .ft-col a:hover{color:#fff}
.site-footer .footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:1.4rem;padding:1.1rem 0 1.4rem;text-align:center}
.site-footer .footer-bottom p{margin:0;font-size:.78rem;color:#8ca0a2}
@media(max-width:900px){.site-footer .ft-main{grid-template-columns:1fr 1fr 1fr}.site-footer .ft-brand{grid-column:1/-1}}
@media(max-width:560px){.site-footer .ft-main{grid-template-columns:1fr 1fr;gap:1.25rem;padding-top:1.6rem}.site-footer .ft-cta{padding:1rem}}

/* ---------- Cookie consent ---------- */
.cookie-consent{background:#fff !important;border-top:1px solid var(--t-border) !important;box-shadow:0 -6px 24px rgba(8,30,30,.14) !important}
.cookie-consent__text{color:var(--t-ink) !important}
.cookie-consent__text a{color:var(--t-accent-d) !important}
.cookie-consent__btn--accept{background:var(--t-accent) !important;color:#fff !important}
.cookie-consent__btn--accept:hover{background:var(--t-accent-d) !important}
.cookie-consent__btn--reject{color:var(--t-ink) !important;border-color:var(--t-border) !important}
.cookie-consent__btn--reject:hover{background:var(--t-accent-l) !important}

/* Fullscreen / rotate helper button on game pages */
.rotate-landscape-btn{background:var(--t-accent-l) !important;border:1px solid var(--t-accent-b) !important;color:var(--t-accent-d) !important}

/* ---------- Static pages: title as colour band ---------- */
body.page-red-theme .policy-content,
body.page-red-theme .faq-section,
body.page-red-theme .about-section,
body.page-red-theme .contact-section{
  max-width:900px;margin:1.5rem auto;padding:0 2rem 2rem;border-radius:var(--t-r);overflow:hidden;
}
body.page-red-theme h1{
  margin:0 -2rem 1.5rem;padding:1rem 2rem;border-bottom:none;text-align:left;
  background:var(--t-accent);-webkit-text-fill-color:#fff;color:#fff;font-weight:800;font-size:clamp(1.35rem,3.2vw,1.8rem);
}
body.page-red-theme h2{
  color:var(--t-ink);font-size:1.12rem;padding-left:.7rem;border-left:3px solid var(--t-accent);margin:1.5rem 0 .6rem;
}
body.page-red-theme h3{color:var(--t-accent-d)}
body.page-red-theme .faq-item{background:none;border:none;border-bottom:1px solid var(--t-border);border-radius:0;padding:0 0 1rem;margin-bottom:1rem}
body.page-red-theme .faq-item:last-child{border-bottom:none;margin-bottom:0}
body.page-red-theme .faq-question{font-weight:700;color:var(--t-ink);margin-bottom:.3rem}
@media(max-width:600px){
  body.page-red-theme .policy-content,body.page-red-theme .faq-section,
  body.page-red-theme .about-section,body.page-red-theme .contact-section{margin:1rem .75rem;padding:0 1.1rem 1.4rem}
  body.page-red-theme h1{margin:0 -1.1rem 1.2rem;padding:.9rem 1.1rem}
}

/* ---------- Blog ---------- */
body.page-blog main > .container > section:first-child{
  background:var(--t-accent);border-radius:var(--t-r);margin:1.25rem 0 1rem;padding:1.4rem 1.6rem !important;text-align:center;
}
body.page-blog main > .container > section:first-child h1{color:#fff;margin:0 0 .3rem;font-weight:800}
body.page-blog main > .container > section:first-child p{color:rgba(255,255,255,.92);margin:0}
body.page-blog main a[href^="/blog/"][style]{
  background:#fff;border:1px solid var(--t-border) !important;border-radius:var(--t-r) !important;
  box-shadow:0 1px 3px rgba(14,40,40,.06);transition:border-color .15s,box-shadow .15s;
}
body.page-blog main a[href^="/blog/"][style] h2{color:var(--t-ink)}
body.page-blog main a[href^="/blog/"][style] p{color:var(--t-ink2) !important}
body.page-blog-post article{
  background:#fff;border:1px solid var(--t-border);border-radius:var(--t-r);padding:1.75rem 1.6rem !important;margin:1.25rem 0;
}
body.page-blog-post article h1{color:var(--t-ink);font-weight:800}
body.page-blog-post article img{border-radius:var(--t-r) !important}

/* ---------- Fixes: centre the boxed layout on every page, wider content ---------- */
@media(min-width:1260px){
  html body{margin-left:auto !important;margin-right:auto !important}
}
body.page-red-theme .policy-content,
body.page-red-theme .faq-section,
body.page-red-theme .about-section,
body.page-red-theme .contact-section{max-width:1152px}
body.page-blog-post main > .container{max-width:1152px !important}
body.page-blog-post .blog-post-content{font-size:1.05rem}
.contact-mail-btn{display:inline-block;background:var(--t-accent);color:#fff !important;text-decoration:none;font-weight:600;padding:.7rem 1.4rem;border-radius:var(--t-r)}
.contact-mail-btn:hover{background:var(--t-accent-d)}
.contact-email-line{text-align:left !important;color:var(--t-ink2) !important}
.contact-email-line a{color:var(--t-accent-d) !important;font-weight:600}

/* ============================================================
   Round 2 fixes: blog post title band, wider mobile pages,
   visible game-card borders
   ============================================================ */

/* ---------- Blog post: green title band (same look as Privacy/FAQ pages) ---------- */
body.page-blog-post article{overflow:hidden}
body.page-blog-post article h1{
  margin:-1.75rem -1.6rem 1.1rem;padding:1rem 1.6rem;
  background:var(--t-accent);-webkit-text-fill-color:#fff;color:#fff;
  font-size:clamp(1.2rem,3.4vw,1.8rem);line-height:1.25;font-weight:800;
  overflow-wrap:anywhere;text-align:left;
}
body.page-blog-post .blog-post-content img{max-width:100%;height:auto}
body.page-blog-post .blog-post-content{overflow-wrap:anywhere}
body.page-blog-post .blog-post-content table,
body.page-blog-post .blog-post-content pre{display:block;max-width:100%;overflow-x:auto}

/* ---------- Game grid cards: clearly visible border + soft corners ---------- */
body.page-games.page-games--library .games-board__card{
  border:2px solid #8fc4bc;border-radius:8px;
  box-shadow:0 1px 4px rgba(14,40,40,.12);
}
body.page-games.page-games--library .games-board__card:hover{border-color:var(--t-accent-d)}

/* ---------- Mobile: wider pages (blog, blog post, static pages) ---------- */
@media(max-width:600px){
  body.page-blog main > .container,
  body.page-blog-post main > .container,
  body.page-red-theme main > .container{
    width:100% !important;max-width:100% !important;
    padding-left:.6rem !important;padding-right:.6rem !important;box-sizing:border-box;
  }
  body.page-red-theme .policy-content,
  body.page-red-theme .faq-section,
  body.page-red-theme .about-section,
  body.page-red-theme .contact-section{margin:.9rem 0;padding:0 1rem 1.3rem}
  body.page-red-theme h1{margin:0 -1rem 1.1rem;padding:.85rem 1rem}

  body.page-blog-post article{padding:1.25rem 1rem !important;margin:.9rem 0}
  body.page-blog-post article h1{
    margin:-1.25rem -1rem 1rem;padding:.8rem 1rem;font-size:1.2rem;line-height:1.3;
  }
  body.page-blog main > .container > section:first-child{padding:1.1rem 1rem !important}
}