/*
Theme Name: Online Sweeps
Theme URI: https://online-sweeps.com/
Author: Vitalii Kubrak
Description: A playful, modern WordPress theme for sweepstakes casino rankings, brand pages, and blog.
Version: 1.1.0
License: GPLv2 or later
Text Domain: online-sweeps
Tags: blog, custom-menu, one-column, two-columns, three-columns, featured-images
*/

/* ===== Base ===== */
:root{
  --indigo-950:#1e1b4b;
  --indigo-900:#312e81;
  --indigo-700:#4338ca;
  --indigo-400:#818cf8;
  --white:#ffffff;
}

html,body{height:100%}
body{
  margin:0;
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

/* Utility helpers (non-Tailwind) */
.fredoka{font-family:'Fredoka One', cursive;}
.container-max{max-width:72rem;margin-left:auto;margin-right:auto;}
.page-pad{padding-left:1rem;padding-right:1rem;}
.os-skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.os-skip-link:focus{
  left:1rem;top:1rem;width:auto;height:auto;z-index:100000;
  background:#fff;padding:.75rem 1rem;border-radius:1rem;box-shadow:0 10px 20px rgba(0,0,0,.25);
}

/* ===== Background (Ranking/Blog) ===== */
.os-bg-rank{
  background:
    radial-gradient(circle at 50% 25%, rgba(129,140,248,.55) 0%, rgba(67,56,202,.10) 55%, rgba(67,56,202,0) 75%),
    linear-gradient(90deg, #4338ca 0%, #818cf8 50%, #4338ca 100%);
  min-height:100vh;
  position:relative;
}

/* ===== Clouds ===== */
.cloud-bg{
  position:fixed;
  background:#fff;
  border-radius:50px;
  opacity:.3;
  pointer-events:none;
  z-index:1;
  left:-350px;
  animation-name:floatCloud;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform;
}
.cloud-bg::before,.cloud-bg::after{
  content:'';
  position:absolute;
  background:#fff;
  border-radius:50%;
}
.cloud-bg::before{width:50%;height:100%;top:-40%;left:15%;}
.cloud-bg::after{width:40%;height:80%;top:-30%;right:15%;}
@keyframes floatCloud{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 700px))}}

/* ===== Balloon ===== */
.balloon{
  position:fixed;
  top:15%;
  right:10%;
  width:120px;
  z-index:5;
  pointer-events:none;
  animation:balloonFloat 6s ease-in-out infinite;
  filter:drop-shadow(0 20px 15px rgba(0,0,0,.2));
}
@keyframes balloonFloat{
  0%,100%{transform:translateY(0) rotate(2deg)}
  50%{transform:translateY(-30px) rotate(-2deg)}
}
@media (max-width:768px){
  .balloon{width:80px;top:5%;right:5%;opacity:.85;}
}

/* ===== Ranking cards ===== */
.page-content{position:relative;z-index:10;width:100%;}
.game-card{
  background:#fff;
  border-radius:40px;
  padding:8px;
  box-shadow:0 15px 0 #312e81, 0 25px 50px rgba(0,0,0,.3);
  transition:all .3s cubic-bezier(.175,.885,.32,1.275);
  position:relative;
  z-index:10;
  transform-style:preserve-3d;
  will-change:transform;
}
.game-card:hover{
  transform:translateY(-5px) scale(1.02);
  box-shadow:0 20px 0 #312e81, 0 35px 60px rgba(0,0,0,.4);
}
.card-inner{border-radius:32px;padding:30px;height:100%;position:relative;overflow:hidden;}
.bg-purple{background:linear-gradient(180deg,#a855f7 0%,#7c3aed 100%)}
.bg-pink{background:linear-gradient(180deg,#ec4899 0%,#db2777 100%)}
.bg-blue{background:linear-gradient(180deg,#3b82f6 0%,#2563eb 100%)}
.bg-emerald{background:linear-gradient(180deg,#34d399 0%,#059669 100%)}
.bg-amber{background:linear-gradient(180deg,#fbbf24 0%,#f59e0b 100%)}

.btn-game{
  background:linear-gradient(180deg,#4ade80 0%,#16a34a 100%);
  border-radius:20px;
  box-shadow:0 8px 0 #15803d, 0 10px 20px rgba(22,163,74,.4);
  font-family:'Fredoka One', cursive;
  transition:all .2s cubic-bezier(.175,.885,.32,1.275);
  color:#fff;
  text-shadow:0 2px 4px rgba(0,0,0,.3);
  animation:buttonBreathe 3s infinite ease-in-out;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}
.btn-game:hover{transform:scale(1.1);filter:brightness(1.1);}
.btn-game:active{transform:translateY(6px) scale(.95);box-shadow:0 2px 0 #15803d;}
@keyframes buttonBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}

.rank-star{
  position:absolute;left:-15px;top:-15px;width:60px;height:60px;
  background:#facc15;border:4px solid #fff;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Fredoka One', cursive;font-size:24px;color:#854d0e;
  box-shadow:0 5px 15px rgba(0,0,0,.2);z-index:20;transform:rotate(-10deg);
}
.rank-star.silver{background:#e2e8f0;color:#475569;}
.rank-star.bronze{background:#fdba74;color:#9a3412;}
.divider{height:4px;background:rgba(0,0,0,.1);border-radius:2px;margin:20px 0;}
.info-bubble{background:rgba(255,255,255,.2);border-radius:12px;padding:4px 12px;font-size:.85rem;font-weight:800;}
.particle{position:fixed;pointer-events:none;z-index:100;}

/* ===== SEO container ===== */
.seo-container{
  /* IMPORTANT: keep the blue sky background clean (no visible "light overlay" box edges)
     The container is kept for spacing but without a solid panel/border. */
  background:transparent;
  border-radius:50px;
  box-shadow:none;
  border:0;
  position:relative;
  margin-top:50px;
}

/* Make text readable when .seo-container has no background */
.seo-container,
.seo-container p,
.seo-container li,
.seo-container div{
  color:rgba(255,255,255,.92) !important;
}
.seo-container h1,
.seo-container h2,
.seo-container h3,
.seo-container h4,
.seo-container h5{
  color:#ffffff !important;
  text-shadow:0 10px 30px rgba(0,0,0,.25);
}
.seo-container a{
  color:#facc15 !important;
  text-decoration:none;
  border-bottom:2px solid rgba(250,204,21,.55);
}
.seo-container a:hover{
  border-bottom-color:rgba(250,204,21,.9);
}
.seo-icon-float{animation:floatingIcon 4s infinite ease-in-out;}
@keyframes floatingIcon{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-15px) rotate(5deg)}
}

/* ===== Header styles (from mockup) ===== */
.header-font{font-family:'Fredoka One', cursive;}
.nav-font{font-family:'Nunito', sans-serif;}

#mobile-menu{
  transition:all .3s cubic-bezier(.175,.885,.32,1.275);
  transform:translateY(-20px) scale(.95);
  pointer-events:none;
  opacity:0;
}
#mobile-menu.active{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.burger-line{transition:.3s;transform-origin:center;}
.open .line-1{transform:translateY(10px) rotate(45deg);}
.open .line-2{opacity:0;}
.open .line-3{transform:translateY(-9px) rotate(-45deg);}
.nav-link{position:relative;transition:color .3s;}
.nav-link::after{
  content:'';
  position:absolute;
  bottom:-4px;left:50%;
  width:0;height:4px;
  background:#818cf8;
  border-radius:2px;
  transition:all .3s;
  transform:translateX(-50%);
}
.nav-link:hover::after{width:100%;}

/* ===== Blog cards ===== */
.blog-card{
  background:#fff;
  border-radius:35px;
  padding:10px;
  box-shadow:0 12px 0 #312e81, 0 20px 40px rgba(0,0,0,.2);
  transition:all .3s cubic-bezier(.175,.885,.32,1.275);
}
.blog-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 0 #312e81, 0 30px 50px rgba(0,0,0,.3);
}
.image-container{
  border-radius:25px;
  overflow:hidden;
  position:relative;
  aspect-ratio:16/9;
  background:linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.05));
}
.category-badge{
  position:absolute;
  top:15px;left:15px;
  background:#facc15;color:#854d0e;
  padding:5px 15px;
  border-radius:12px;
  font-weight:900;
  text-transform:uppercase;
  font-size:.75rem;
  box-shadow:0 4px 0 #ca8a04;
}
.read-more-btn{
  background:#818cf8;color:#fff;
  padding:10px 20px;border-radius:15px;
  box-shadow:0 4px 0 #4338ca;
  transition:all .2s;
  display:inline-block;
}
.read-more-btn:hover{transform:scale(1.05);background:#6366f1;}
.read-more-btn:active{transform:translateY(3px) scale(.98);box-shadow:0 2px 0 #4338ca;}

/* ===== Article ===== */
.article-container{
  background:#fff;
  border-radius:50px;
  box-shadow:0 20px 0 #312e81, 0 30px 60px rgba(0,0,0,.3);
  position:relative;
  overflow:hidden;
}
.article-content h2{
  font-family:'Fredoka One', cursive;
  color:#312e81;
  font-size:2rem;
  margin-top:2rem;
  margin-bottom:1rem;
  text-transform:uppercase;
}
.article-content p{
  color:#475569;
  line-height:1.8;
  font-size:1.125rem;
  font-weight:700;
  margin-bottom:1.5rem;
}
.tip-box{
  background:#fef9c3;
  border-left:8px solid #facc15;
  padding:20px;
  border-radius:20px;
  margin:2rem 0;
}
.back-btn{transition:all .2s;}
.back-btn:hover{transform:translateX(-5px);}

/* ===== Pagination buttons ===== */
.os-pagination{
  display:flex;gap:.75rem;justify-content:center;margin-top:4rem;
}
.os-page-btn{
  width:3rem;height:3rem;
  display:flex;align-items:center;justify-content:center;
  border-radius:1rem;
  background:#fff;
  font-family:'Fredoka One', cursive;
  color:#312e81;
  box-shadow:0 5px 0 #cbd5e1;
  transition:all .2s;
}
.os-page-btn:hover{transform:translateY(4px);box-shadow:none;}
.os-page-btn.is-current{
  background:#4f46e5;
  color:#fff;
  box-shadow:0 5px 0 #312e81;
}

/* ===== Brand page CTA ===== */
.os-cta{
  background:linear-gradient(90deg, rgba(67,56,202,.2) 0%, rgba(129,140,248,.25) 50%, rgba(67,56,202,.2) 100%);
  border:2px solid rgba(255,255,255,.25);
  border-radius:30px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cloud-bg,.btn-game,.seo-icon-float,.balloon{animation:none !important;}
}

/* =========================================
   FIX: Gradient seam / repeat on .os-bg-rank
   Make background a fixed full-viewport layer
========================================= */

.os-bg-rank{
  min-height: 100vh;
  position: relative;
  isolation: isolate;          /* own stacking context */
  background: transparent !important;
}

/* Full-screen background layer (no edges, no repeating) */
.os-bg-rank::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;                /* behind all content inside */
  pointer-events: none;

  /* IMPORTANT: one continuous background */
  background:
    radial-gradient(circle at 50% 25%,
      rgba(129,140,248,.55) 0%,
      rgba(67,56,202,.10) 55%,
      rgba(67,56,202,0) 75%
    ),
    linear-gradient(90deg,
      #4338ca 0%,
      #818cf8 50%,
      #4338ca 100%
    );

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  /* Helps avoid tiny 1px seams on some GPUs */
  transform: translateZ(0);
}

/* As an extra safety: ensure body doesn't “shine through” differently */
body{
  background: #4338ca;
}
/* =========================================
   Legal pages (Privacy / Terms / Policy)
   ========================================= */

.os-legal-wrap{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  overflow: hidden;
  color: #fff;
}

.os-legal-head{
  padding: 28px 22px 20px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  text-align: center;
}

.os-legal-title{
  margin: 0;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.os-legal-meta{
  margin-top: 12px;
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: .88rem;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  padding: 8px 14px;
}

.os-legal-body{
  /* ширше і читабельніше */
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 22px 30px;
  font-family: 'Nunito', sans-serif;
  color: rgba(255,255,255,.96);
  font-size: 1.03rem;
  line-height: 1.85;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* CMS blocks spacing reset */
.os-legal-body > *:first-child{margin-top:0}
.os-legal-body > *:last-child{margin-bottom:0}

.os-legal-body p{
  margin: 0 0 1.05em;
  font-weight: 700;
  color: rgba(255,255,255,.95);
}

.os-legal-body h2,
.os-legal-body h3,
.os-legal-body h4{
  margin: 1.8em 0 .7em;
  color: #fbbf24;
  font-family: 'Fredoka One', cursive;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: uppercase;
}

.os-legal-body h2{font-size: clamp(1.25rem, 2vw, 1.6rem);}
.os-legal-body h3{font-size: clamp(1.1rem, 1.7vw, 1.35rem);}
.os-legal-body h4{font-size: clamp(1rem, 1.5vw, 1.2rem);}

.os-legal-body ul,
.os-legal-body ol{
  margin: .3em 0 1.2em 1.2em;
  padding: 0;
}

.os-legal-body li{
  margin: .42em 0;
  padding-left: .15em;
  font-weight: 700;
  color: rgba(255,255,255,.93);
}

.os-legal-body a{
  color: #fde68a;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.os-legal-body a:hover{color:#fff5c2;}

.os-legal-body strong{
  color:#fff;
  font-weight:900;
}

.os-legal-body blockquote{
  margin: 1.2em 0;
  padding: 14px 16px;
  border-left: 4px solid rgba(251,191,36,.9);
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  color: rgba(255,255,255,.92);
}

.os-legal-body table{
  width:100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: .95rem;
}
.os-legal-body th,
.os-legal-body td{
  border: 1px solid rgba(255,255,255,.22);
  padding: 10px 12px;
  text-align:left;
}
.os-legal-body th{
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 900;
}

@media (min-width: 768px){
  .os-legal-head{padding: 34px 34px 24px;}
  .os-legal-body{
    padding: 30px 36px 38px;
    font-size: 1.06rem;
    line-height: 1.9;
  }
}

@media (max-width: 767px){
  .os-legal-wrap{border-radius: 22px;}
  .os-legal-body{
    font-size: .98rem;
    line-height: 1.78;
  }
}
/* =========================================
   iOS Safari full-height background fix
   (no white gaps with dynamic toolbars)
   ========================================= */

/* 1) Base canvas color everywhere */
html,
body{
  margin:0;
  padding:0;
  background:#4338ca !important;
}

/* 2) Use dynamic viewport units where supported */
html{
  min-height:100%;
  min-height:100svh;
  min-height:100dvh;
}

body{
  min-height:100%;
  min-height:100svh;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

/* 3) Main section must be at least full dynamic viewport height */
.os-bg-rank{
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  position:relative;
  isolation:isolate;
  background:transparent !important;
}

/* 4) Fixed background layer (desktop/most browsers) */
.os-bg-rank::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 25%,
      rgba(129,140,248,.55) 0%,
      rgba(67,56,202,.10) 55%,
      rgba(67,56,202,0) 75%
    ),
    linear-gradient(90deg,#4338ca 0%,#818cf8 50%,#4338ca 100%);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  transform:translateZ(0);
}

/* 5) iOS Safari: switch fixed -> absolute (prevents top/bottom white flashes) */
@supports (-webkit-touch-callout: none){
  .os-bg-rank::before{
    position:absolute;
    top:0; left:0; right:0;
    height:100%;
    min-height:100svh;
    min-height:100dvh;
  }
}

/* 6) Safe-area support (notch/home indicator) */
@supports (padding: max(0px)){
  body{
    padding-top:max(0px, env(safe-area-inset-top));
    padding-bottom:max(0px, env(safe-area-inset-bottom));
    padding-left:max(0px, env(safe-area-inset-left));
    padding-right:max(0px, env(safe-area-inset-right));
  }
}
/* ===== iOS Safari top-edge fix ===== */

/* 1) Забираємо будь-які дефолтні відступи */
html, body {
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) Фон тягнемо до самого верху viewport */
.os-bg-rank,
.os-bg-rank::before {
  top: 0 !important;
}

/* 3) Прибираємо верхній "зазор" від safe-area (якщо він додається контейнером/обгорткою) */
body,
.site,
#page,
.site-content,
.os-bg-rank {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 4) Якщо хедер fixed/sticky і дає синю смугу — притискаємо його */
.site-header,
header[role="banner"],
#masthead {
  top: 0 !important;
  margin-top: 0 !important;
}

/* 5) iOS Safari specific: не додавати safe-area зверху */
@supports (padding-top: env(safe-area-inset-top)) {
  html, body {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .os-bg-rank,
  .os-bg-rank::before,
  .site,
  #page,
  .site-content,
  #content {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .site-header,
  header[role="banner"],
  #masthead {
    top: 0 !important;
  }
}
/* =========================================
   ONLINE SWEEPS — FINAL VIEWPORT / BACKGROUND FIX
   Put this block at the VERY END of style.css
   ========================================= */

/* ---------- 1) Root canvas & viewport ---------- */
:root{
  --os-bg-base:#4338ca;
}

html,
body{
  margin:0 !important;
  padding:0 !important;
  width:100%;
  min-height:100%;
  background:var(--os-bg-base) !important;
}

html{
  height:auto;
  min-height:100%;
  min-height:100svh;
  min-height:100dvh;
}

body{
  position:relative;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  min-height:100%;
  min-height:100svh;
  min-height:100dvh;
}

/* IMPORTANT:
   Не додаємо safe-area padding на body, бо саме це часто дає
   верхню/нижню смугу на iOS Safari */
@supports (padding: env(safe-area-inset-top)) {
  html, body{
    padding-top:0 !important;
    padding-bottom:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* ---------- 2) Main background section ---------- */
.os-bg-rank{
  position:relative;
  isolation:isolate;
  background:transparent !important;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
}

/* Fixed gradient layer for all modern browsers */
.os-bg-rank::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(129,140,248,.55) 0%,
      rgba(67,56,202,.10) 55%,
      rgba(67,56,202,0) 75%
    ),
    linear-gradient(
      90deg,
      #4338ca 0%,
      #818cf8 50%,
      #4338ca 100%
    );

  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  transform:translateZ(0);
  will-change:transform;
}

/* iOS Safari stability:
   fixed псевдофон інколи "плаває", тому для iOS робимо absolute,
   але з висотою на весь dynamic viewport */
@supports (-webkit-touch-callout: none){
  .os-bg-rank{
    min-height:100svh;
    min-height:100dvh;
  }

  .os-bg-rank::before{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:auto;
    height:100%;
    min-height:100svh;
    min-height:100dvh;
    background-attachment:scroll;
  }
}

/* ---------- 3) Remove top ghost gap from wrappers ---------- */
.site,
#page,
.site-content,
#content,
main,
.os-bg-rank{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Header anchoring */
.site-header,
#masthead,
header[role="banner"]{
  margin-top:0 !important;
}

/* If header is fixed/sticky, pin it cleanly */
.site-header.is-fixed,
.site-header.is-sticky,
#masthead.is-fixed,
#masthead.is-sticky{
  top:0 !important;
}

/* ---------- 4) Footer bottom-gap fix ---------- */
/* Прибираємо "дихання" після футера */
.site-footer,
footer{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

/* Якщо тема/плагіни додають spacer після футера */
body > .site:last-child,
body > #page:last-child{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
}

/* Гарантуємо, що останній блок контенту не лишає зайвий відступ */
.site-content > *:last-child,
#content > *:last-child,
main > *:last-child{
  margin-bottom:0 !important;
}

/* ---------- 5) Keep decorative fixed elements stable ---------- */
.cloud-bg,
.balloon{
  position:fixed;
  backface-visibility:hidden;
  transform:translateZ(0);
}

/* ---------- 6) Prevent accidental horizontal seams ---------- */
*{
  box-sizing:border-box;
}

img,
svg,
video,
canvas{
  max-width:100%;
  height:auto;
}