/*
Theme Name: Gamstop Free Casino Sites
Theme URI: https://gamstopfreecasinosites.me.uk
Author: Gamstop Free Casino Sites Team
Author URI: https://gamstopfreecasinosites.me.uk
Description: A professional casino affiliate theme for Gamstop Free Casino Sites.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gamstop-free-casino
*/

/* ── RESET & BASE ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --color-bg:#0b0e17;
  --color-surface:#141827;
  --color-surface-alt:#1a1f35;
  --color-border:#2a2f4a;
  --color-primary:#e4a101;
  --color-primary-hover:#f5b520;
  --color-accent:#ff3e5f;
  --color-green:#22c55e;
  --color-red:#ef4444;
  --color-text:#e2e4ea;
  --color-text-muted:#9196ab;
  --color-heading:#ffffff;
  --color-star:#e4a101;
  --font-body:'Inter',sans-serif;
  --font-heading:'Space Grotesk',sans-serif;
  --max-w:1280px;
  --radius:0px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);line-height:1.7;font-size:16px;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--color-primary-hover)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--color-heading);line-height:1.3;font-weight:700}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.6rem,3.5vw,2.4rem)}
h3{font-size:clamp(1.2rem,2.5vw,1.6rem)}

.container{max-width:var(--max-w);margin:0 auto;padding:0 24px;width:100%}
.section-spacing{padding:80px 0}

/* ── HEADER ── */
.site-header{position:sticky;top:0;z-index:1000;background:var(--color-surface);border-bottom:2px solid var(--color-primary)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:70px}
.site-logo{font-family:var(--font-heading);font-size:1.3rem;font-weight:800;color:var(--color-primary);letter-spacing:-.5px}
.site-logo span{color:var(--color-heading)}
.nav-links{display:flex;gap:32px;list-style:none}
.nav-links a{color:var(--color-text);font-weight:500;font-size:.95rem;transition:color .2s}
.nav-links a:hover,.nav-links a.active{color:var(--color-primary)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:8px}
.hamburger span{display:block;width:24px;height:2px;background:var(--color-text);transition:all .3s}
.mobile-nav{display:none;position:fixed;top:70px;left:0;right:0;bottom:0;background:var(--color-surface);z-index:999;padding:40px 24px;flex-direction:column;gap:24px}
.mobile-nav.active{display:flex}
.mobile-nav a{color:var(--color-text);font-size:1.2rem;font-weight:600;font-family:var(--font-heading)}
.mobile-nav a:hover{color:var(--color-primary)}

/* ── HERO ── */
.hero{min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--color-surface);border-bottom:3px solid var(--color-primary);padding:60px 24px}
.hero h1{margin-bottom:20px}
.hero p{font-size:1.15rem;color:var(--color-text-muted);max-width:700px;margin:0 auto 32px}
.hero-cta{display:inline-block;background:var(--color-primary);color:#0b0e17;font-weight:700;font-family:var(--font-heading);font-size:1.1rem;padding:16px 40px;border-radius:var(--radius);transition:background .2s;text-transform:uppercase;letter-spacing:.5px}
.hero-cta:hover{background:var(--color-primary-hover);color:#0b0e17}

.inner-hero{min-height:40vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--color-surface);border-bottom:3px solid var(--color-primary);padding:60px 24px;flex-direction:column;gap:24px}
.inner-hero.tall{min-height:45vh}
.hero-badges{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.hero-badge{background:var(--color-surface-alt);border:1px solid var(--color-border);padding:10px 20px;font-family:var(--font-heading);font-weight:600;font-size:.9rem;color:var(--color-primary);border-radius:var(--radius)}

/* ── CASINO GRID ── */
.casino-grid-section{padding:80px 0}
.casino-grid-section h2{margin-bottom:40px}
.casino-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.casino-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s}
.casino-card:hover{border-color:var(--color-primary)}
.casino-card-rank{position:absolute;top:12px;left:12px;background:var(--color-primary);color:#0b0e17;font-weight:800;font-family:var(--font-heading);font-size:.85rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius)}
.casino-card-header{position:relative;padding:24px 20px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--color-surface-alt)}
.casino-card-logo{width:120px;height:60px;object-fit:contain}
.casino-card-name{font-family:var(--font-heading);font-size:1.05rem;font-weight:700;color:var(--color-heading);text-align:center}
.casino-card-stars{color:var(--color-star);font-size:.95rem;letter-spacing:2px}
.casino-card-badge{display:inline-block;background:var(--color-green);color:#fff;font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:var(--radius);text-transform:uppercase;margin-top:4px}
.casino-card-body{padding:20px;flex:1;display:flex;flex-direction:column;gap:8px}
.casino-card-bonus{font-weight:700;color:var(--color-primary);font-size:1rem;font-family:var(--font-heading)}
.casino-card-meta{font-size:.85rem;color:var(--color-text-muted);line-height:1.6}
.casino-card-meta span{display:block}
.casino-card-footer{padding:0 20px 20px;margin-top:auto}
.casino-card-cta{display:block;width:100%;text-align:center;background:var(--color-accent);color:#fff;font-weight:700;font-family:var(--font-heading);padding:14px;border-radius:var(--radius);font-size:1rem;transition:background .2s;text-transform:uppercase;letter-spacing:.5px}
.casino-card-cta:hover{background:#e0294a;color:#fff}
.casino-card-terms{font-size:.7rem;color:var(--color-text-muted);text-align:center;margin-top:8px}

/* ── REVIEW BLOCKS ── */
.reviews-section{padding:80px 0}
.reviews-section>h2{margin-bottom:48px}
.review-block{margin-bottom:64px}
.review-topbar{display:flex;align-items:center;gap:20px;padding:20px 24px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);flex-wrap:wrap;margin-bottom:24px}
.review-topbar-logo{width:80px;height:40px;object-fit:contain}
.review-topbar-name{font-family:var(--font-heading);font-size:1.3rem;font-weight:700;color:var(--color-heading)}
.review-topbar-stars{color:var(--color-star);font-size:.95rem;letter-spacing:2px}
.review-topbar-cta{margin-left:auto;display:inline-block;background:var(--color-accent);color:#fff;font-weight:700;font-family:var(--font-heading);padding:12px 28px;border-radius:var(--radius);font-size:.95rem;transition:background .2s;text-transform:uppercase;white-space:nowrap}
.review-topbar-cta:hover{background:#e0294a;color:#fff}
.review-screenshots{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}
.review-screenshot{cursor:pointer;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius)}
.review-screenshot img{width:100%;height:220px;object-fit:cover;transition:transform .3s}
.review-screenshot:hover img{transform:scale(1.03)}
.review-body{margin-bottom:24px;line-height:1.8}
.review-body h3,.review-body h4{margin:24px 0 12px}
.review-body p{margin-bottom:16px}
.review-body ul,.review-body ol{margin:0 0 16px 20px}
.pros-cons-table{width:100%;border-collapse:collapse;margin-bottom:16px}
.pros-cons-table th{padding:12px 16px;text-align:left;font-family:var(--font-heading);font-size:.95rem;font-weight:700;border-radius:var(--radius)}
.pros-cons-table th.pros-col{background:var(--color-green);color:#fff}
.pros-cons-table th.cons-col{background:var(--color-red);color:#fff}
.pros-cons-table td{padding:12px 16px;vertical-align:top;border-bottom:1px solid var(--color-border);background:var(--color-surface);width:50%}
.pros-cons-table td ul{list-style:none;margin:0;padding:0}
.pros-cons-table td ul li{padding:6px 0;font-size:.9rem}
.pros-cons-table td ul li::before{margin-right:8px;font-weight:700}
.pros-cons-table td.pros-td ul li::before{content:"✓";color:var(--color-green)}
.pros-cons-table td.cons-td ul li::before{content:"✗";color:var(--color-red)}

/* ── FAQ ── */
.faq-section{padding:80px 0}
.faq-section h2{margin-bottom:40px}
.faq-item{margin-bottom:32px}
.faq-item h3{color:var(--color-primary);margin-bottom:8px;font-size:1.1rem}
.faq-item p{color:var(--color-text);line-height:1.8}

/* ── AUTHOR BOX ── */
.author-box{padding:80px 0}
.author-box-inner{display:flex;gap:24px;padding:32px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);align-items:flex-start}
.author-box-avatar{width:80px;height:80px;object-fit:cover;border-radius:var(--radius);flex-shrink:0}
.author-box-content h3{margin-bottom:8px;font-size:1.1rem}
.author-box-content p{color:var(--color-text-muted);font-size:.9rem;line-height:1.7}

/* ── FOOTER ── */
.site-footer{background:var(--color-surface);border-top:2px solid var(--color-primary);padding:40px 0}
.site-footer .container{text-align:center}
.footer-name{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;color:var(--color-heading);margin-bottom:12px}
.footer-copy{font-size:.85rem;color:var(--color-text-muted);margin-bottom:16px}
.footer-disclaimer{font-size:.75rem;color:var(--color-text-muted);line-height:1.6;max-width:800px;margin:0 auto}

/* ── LIGHTBOX ── */
.lightbox-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.9);z-index:10000;align-items:center;justify-content:center;cursor:pointer}
.lightbox-overlay.active{display:flex}
.lightbox-overlay img{max-width:90vw;max-height:90vh;object-fit:contain}

/* ── CONTENT SECTIONS ── */
.content-section{padding:0}
.content-section h2,.content-section h3{margin:24px 0 12px}
.content-section p{margin-bottom:16px;line-height:1.8}
.content-section ul,.content-section ol{margin:0 0 16px 20px}

/* ── PAGE CONTENT ── */
.page-content{padding:80px 0}
.page-content h2,.page-content h3{margin:24px 0 12px}
.page-content p{margin-bottom:16px;line-height:1.8}

/* ── CONTACT FORM ── */
.contact-form-wrap{max-width:640px;padding:80px 0}
.contact-form .form-group{margin-bottom:20px}
.contact-form label{display:block;font-weight:600;margin-bottom:6px;font-size:.9rem;color:var(--color-heading)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:14px 16px;background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);font-family:var(--font-body);font-size:.95rem;transition:border-color .2s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--color-primary)}
.contact-form textarea{min-height:160px;resize:vertical}
.contact-form button{background:var(--color-primary);color:#0b0e17;font-weight:700;font-family:var(--font-heading);padding:14px 36px;border:none;border-radius:var(--radius);font-size:1rem;cursor:pointer;transition:background .2s}
.contact-form button:hover{background:var(--color-primary-hover)}
.contact-info-box{margin-top:40px;padding:24px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius)}
.contact-info-box h3{margin-bottom:16px;font-size:1.1rem}
.contact-info-box p{font-size:.9rem;color:var(--color-text-muted);margin-bottom:8px}
.toast{position:fixed;bottom:24px;right:24px;background:var(--color-green);color:#fff;padding:16px 24px;font-weight:600;font-size:.95rem;border-radius:var(--radius);z-index:10001;display:none}
.toast.active{display:block;animation:fadeInUp .3s ease}
@keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ── TEAM GRID ── */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px;margin:40px 0}
.team-member{text-align:center}
.team-member img{width:120px;height:120px;object-fit:cover;border-radius:var(--radius);margin:0 auto 12px;border:2px solid var(--color-border)}
.team-member h4{font-size:.95rem;color:var(--color-heading)}
.team-member p{font-size:.8rem;color:var(--color-text-muted)}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .casino-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .casino-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .review-topbar{flex-direction:column;align-items:flex-start}
  .review-topbar-cta{margin-left:0;width:100%;text-align:center}
  .review-screenshots{grid-template-columns:1fr}
  .author-box-inner{flex-direction:column}
  .section-spacing{padding:48px 0}
  .hero{min-height:50vh;padding:40px 24px}
  .inner-hero{min-height:30vh;padding:40px 24px}
  .pros-cons-table th,.pros-cons-table td{padding:10px 12px}
}
@media(max-width:480px){
  .casino-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .casino-card-header{padding:16px 12px 12px}
  .casino-card-logo{width:80px;height:40px}
  .casino-card-body{padding:12px}
  .casino-card-footer{padding:0 12px 12px}
  .casino-card-bonus{font-size:.85rem}
  .casino-card-meta{font-size:.75rem}
}