/*
Theme Name: Independent Casino Sites
Theme URI: https://independentcasinosites.org.uk
Author: Independent Casino Sites Team
Description: A flat-design WordPress theme for casino affiliate sites with hardcoded casino data, review blocks, and content manager hook support.
Version: 1.0.0
Text Domain: independent-casino-sites
*/

/* ── Reset & Base ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root {
    --color-bg: #F5F0EB;
    --color-surface: #FFFFFF;
    --color-primary: #1B4D3E;
    --color-primary-light: #2A7A5F;
    --color-accent: #D4853A;
    --color-accent-hover: #C07030;
    --color-text: #1E1E1E;
    --color-text-light: #5A5A5A;
    --color-border: #D6CFC7;
    --color-star: #D4853A;
    --color-pro: #1B4D3E;
    --color-con: #A03030;
    --color-badge: #1B4D3E;
    --color-header-bg: #FFFFFF;
    --color-footer-bg: #1B4D3E;
    --color-footer-text: #E8E0D8;
    --color-hero-bg: #1B4D3E;
    --color-hero-text: #FFFFFF;
    --color-section-alt: #EDE7E0;
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --max-w: 1280px;
    --radius: 0px;
}

html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none}
a:hover{color:var(--color-accent)}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.25}

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

/* ── Header ───────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:1000;background:var(--color-header-bg);border-bottom:2px solid var(--color-border);padding:0}
.site-header .container{display:flex;align-items:center;justify-content:space-between;height:68px}
.site-name{font-family:var(--font-heading);font-size:1.25rem;font-weight:800;color:var(--color-primary);letter-spacing:-0.02em}
.site-name span{color:var(--color-accent)}
.main-nav{display:flex;gap:32px;align-items:center}
.main-nav a{font-family:var(--font-heading);font-size:0.9rem;font-weight:600;color:var(--color-text);text-transform:uppercase;letter-spacing:0.04em;padding:4px 0;border-bottom:2px solid transparent;transition:border-color .2s,color .2s}
.main-nav a:hover,.main-nav a.active{color:var(--color-primary);border-bottom-color:var(--color-accent)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;background:none;border:none}
.hamburger span{display:block;width:24px;height:2px;background:var(--color-text);transition:transform .3s,opacity .3s}
.mobile-nav{display:none;position:fixed;top:68px;left:0;right:0;bottom:0;background:var(--color-header-bg);z-index:999;flex-direction:column;padding:32px 24px;gap:24px}
.mobile-nav a{font-family:var(--font-heading);font-size:1.1rem;font-weight:600;color:var(--color-text);text-transform:uppercase;letter-spacing:0.04em;padding:12px 0;border-bottom:1px solid var(--color-border)}
.mobile-nav.open{display:flex}

/* ── Hero ─────────────────────────────────────────── */
.hero{background:var(--color-hero-bg);color:var(--color-hero-text);display:flex;align-items:center;justify-content:center;text-align:center;min-height:60vh;padding:48px 24px}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:16px;letter-spacing:-0.03em}
.hero p{font-size:clamp(1rem,2vw,1.2rem);opacity:.85;max-width:640px;margin:0 auto 32px}
.hero-inner{min-height:40vh}
.hero-howwerate{min-height:45vh}

.hero-badges{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.hero-badge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);padding:10px 20px;font-family:var(--font-heading);font-size:0.85rem;font-weight:600;letter-spacing:0.02em}

.btn-cta{display:inline-block;background:var(--color-accent);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:1rem;padding:14px 36px;border:none;cursor:pointer;text-transform:uppercase;letter-spacing:0.06em;transition:background .2s}
.btn-cta:hover{background:var(--color-accent-hover);color:#fff}

/* ── Casino Grid ──────────────────────────────────── */
.casino-grid-section{background:var(--color-bg);padding:64px 0}
.casino-grid-section h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:32px}
.casino-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.casino-card{background:var(--color-surface);border:1px solid var(--color-border);padding:0;display:flex;flex-direction:column;transition:box-shadow .2s}
.casino-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.08)}
.casino-card-header{padding:20px 20px 12px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--color-border)}
.casino-card-rank{font-family:var(--font-heading);font-size:1.5rem;font-weight:800;color:var(--color-primary);min-width:32px}
.casino-card-logo{width:60px;height:40px;object-fit:contain;flex-shrink:0}
.casino-card-logo-placeholder{width:60px;height:40px;border:2px dashed var(--color-border);display:flex;align-items:center;justify-content:center;font-size:0.6rem;color:var(--color-text-light);flex-shrink:0}
.casino-card-name{font-family:var(--font-heading);font-size:1rem;font-weight:700;color:var(--color-text)}
.casino-card-body{padding:16px 20px;flex:1;display:flex;flex-direction:column;gap:8px}
.casino-card-stars{color:var(--color-star);font-size:0.9rem;letter-spacing:2px}
.casino-card-bonus{font-weight:700;font-size:0.95rem;color:var(--color-primary)}
.casino-card-meta{font-size:0.8rem;color:var(--color-text-light);line-height:1.5}
.casino-card-meta span{display:block}
.casino-card-badge{display:inline-block;background:var(--color-badge);color:#fff;font-size:0.7rem;font-weight:700;padding:3px 10px;text-transform:uppercase;letter-spacing:0.04em;align-self:flex-start}
.casino-card-footer{padding:16px 20px;border-top:1px solid var(--color-border)}
.casino-card-cta{display:block;text-align:center;background:var(--color-accent);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:0.85rem;padding:12px;text-transform:uppercase;letter-spacing:0.06em;transition:background .2s}
.casino-card-cta:hover{background:var(--color-accent-hover);color:#fff}
.casino-card-terms{font-size:0.7rem;color:var(--color-text-light);text-align:center;margin-top:8px}

/* ── Review Blocks ────────────────────────────────── */
.reviews-section{background:var(--color-section-alt);padding:64px 0}
.reviews-section > .container > h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:40px}
.review-block{background:var(--color-surface);border:1px solid var(--color-border);margin-bottom:40px}
.review-topbar{display:flex;align-items:center;gap:16px;padding:20px 24px;border-bottom:1px solid var(--color-border);flex-wrap:wrap}
.review-topbar-logo{width:80px;height:50px;object-fit:contain;flex-shrink:0}
.review-topbar-logo-placeholder{width:80px;height:50px;border:2px dashed var(--color-border);flex-shrink:0}
.review-topbar-info{flex:1;min-width:200px}
.review-topbar-info h3{font-size:1.2rem;margin-bottom:2px}
.review-topbar-info .stars{color:var(--color-star);font-size:0.85rem;letter-spacing:2px}
.review-topbar-cta{background:var(--color-accent);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:0.85rem;padding:10px 24px;text-transform:uppercase;letter-spacing:0.04em;display:inline-block;transition:background .2s;flex-shrink:0}
.review-topbar-cta:hover{background:var(--color-accent-hover);color:#fff}

.review-screenshots{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px;border-bottom:1px solid var(--color-border)}
.review-screenshot{cursor:pointer;overflow:hidden;border:1px solid var(--color-border)}
.review-screenshot img{width:100%;height:200px;object-fit:cover;transition:transform .3s}
.review-screenshot:hover img{transform:scale(1.02)}
.review-screenshot-placeholder{width:100%;height:200px;border:2px dashed var(--color-border);display:flex;align-items:center;justify-content:center;font-size:0.8rem;color:var(--color-text-light)}

.review-body{padding:24px;line-height:1.8}
.review-body p{margin-bottom:16px}
.review-body h2,.review-body h3,.review-body h4{margin:24px 0 12px}

.review-proscons{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--color-border)}
.review-pros,.review-cons{padding:24px}
.review-pros{border-right:1px solid var(--color-border)}
.review-pros h4{color:var(--color-pro);font-size:0.9rem;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:12px}
.review-cons h4{color:var(--color-con);font-size:0.9rem;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:12px}
.review-pros ul,.review-cons ul{list-style:none;padding:0}
.review-pros li,.review-cons li{padding:6px 0;font-size:0.9rem;line-height:1.5}
.review-pros li::before{content:"✓ ";color:var(--color-pro);font-weight:700}
.review-cons li::before{content:"✗ ";color:var(--color-con);font-weight:700}

/* ── FAQ ──────────────────────────────────────────── */
.faq-section{background:var(--color-bg);padding:64px 0}
.faq-section h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:32px}
.faq-item{margin-bottom:24px}
.faq-item h3{font-size:1rem;font-weight:700;margin-bottom:8px;color:var(--color-primary)}
.faq-item p{color:var(--color-text-light);font-size:0.95rem}

/* ── Author Box ───────────────────────────────────── */
.author-box{background:var(--color-surface);border:1px solid var(--color-border);padding:32px;display:flex;gap:24px;align-items:flex-start;margin:0 auto}
.author-box img{width:80px;height:80px;object-fit:cover;flex-shrink:0}
.author-box-info h3{font-size:1.1rem;margin-bottom:4px}
.author-box-info p{font-size:0.9rem;color:var(--color-text-light)}

/* ── Content Section (plugin injected) ────────────── */
.content-section{background:var(--color-surface);border:1px solid var(--color-border)}
.content-section .container{padding:40px 24px}
.content-section p{margin-bottom:16px;line-height:1.8}
.content-section h2,.content-section h3{margin:24px 0 12px}

/* ── Footer ───────────────────────────────────────── */
.site-footer{background:var(--color-footer-bg);color:var(--color-footer-text);padding:40px 0}
.site-footer .container{text-align:center}
.site-footer .footer-name{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;margin-bottom:12px}
.site-footer .footer-copy{font-size:0.8rem;opacity:.7;margin-bottom:16px}
.site-footer .footer-disclaimer{font-size:0.75rem;opacity:.6;max-width:800px;margin:0 auto;line-height:1.6}

/* ── Secondary Pages ──────────────────────────────── */
.page-content{background:var(--color-bg);padding:64px 0}
.page-content .container{width:90%;max-width:var(--max-w)}
.page-content p{margin-bottom:16px;line-height:1.8}
.page-content h2,.page-content h3{margin:32px 0 12px;font-family:var(--font-heading)}
.page-content ul,.page-content ol{margin:0 0 16px 24px}
.page-content li{margin-bottom:8px}

/* ── Contact Form ─────────────────────────────────── */
.contact-form-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:32px}
.contact-form{display:flex;flex-direction:column;gap:16px}
.contact-form label{font-family:var(--font-heading);font-size:0.85rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:var(--color-text)}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:12px 16px;border:1px solid var(--color-border);background:var(--color-surface);font-family:var(--font-body);font-size:0.95rem;color:var(--color-text);outline:none;transition:border-color .2s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--color-primary)}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form .btn-cta{align-self:flex-start}
.contact-info-box{background:var(--color-surface);border:1px solid var(--color-border);padding:32px;height:fit-content}
.contact-info-box h3{margin-bottom:16px;font-size:1.1rem}
.contact-info-box p{margin-bottom:12px;font-size:0.9rem;color:var(--color-text-light)}

.toast{position:fixed;bottom:24px;right:24px;background:var(--color-primary);color:#fff;padding:16px 24px;font-family:var(--font-heading);font-size:0.9rem;z-index:9999;transform:translateY(120%);transition:transform .3s;display:none}
.toast.show{display:block;transform:translateY(0)}

/* About page team */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:32px}
.team-card{background:var(--color-surface);border:1px solid var(--color-border);padding:24px;text-align:center}
.team-card img{width:100px;height:100px;object-fit:cover;margin:0 auto 16px}
.team-card h3{font-size:1rem;margin-bottom:4px}
.team-card p{font-size:0.85rem;color:var(--color-text-light)}

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

/* ── Responsive ───────────────────────────────────── */
@media(max-width:1024px){
    .casino-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
    .hamburger{display:flex}
    .main-nav{display:none}
    .casino-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .review-screenshots{grid-template-columns:1fr}
    .review-proscons{grid-template-columns:1fr}
    .review-pros{border-right:none;border-bottom:1px solid var(--color-border)}
    .contact-form-wrapper{grid-template-columns:1fr}
    .review-topbar{flex-direction:column;align-items:flex-start}
    .hero{min-height:50vh;padding:32px 24px}
    .hero h1{font-size:1.8rem}
    .author-box{flex-direction:column;align-items:center;text-align:center}
}
@media(max-width:480px){
    .casino-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .casino-card-header{padding:12px;gap:8px}
    .casino-card-rank{font-size:1.1rem}
    .casino-card-logo{width:40px;height:28px}
    .casino-card-body{padding:12px}
    .casino-card-footer{padding:12px}
    .container{padding:0 16px}
}