/* main.css — belperfoodfestival.co.uk */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;color:#1f2937;background:#fff;line-height:1.7}
img{max-width:100%;height:auto;display:block}
a{color:#16a34a;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* MOBILE NAV BASE — must be outside media query */
.mobile-nav{display:none}

/* HEADER */
.site-header{background:#0a0f1e;padding:14px 0;position:sticky;top:0;z-index:1000;box-shadow:0 2px 20px rgba(0,0,0,.4)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.site-logo{color:#fff;font-size:1.3rem;font-weight:800;letter-spacing:-0.5px}
.site-logo span{color:#16a34a}
.main-nav{display:flex;gap:28px;list-style:none}
.main-nav a{color:#e5e7eb;font-size:.9rem;font-weight:500;transition:color .2s}
.main-nav a:hover{color:#16a34a;text-decoration:none}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}
.hamburger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s}

/* HERO */
.hero-section{background:#0a0f1e;padding:80px 0 60px;color:#fff}
.hero-section h1{font-size:clamp(1.8rem,4vw,3rem);font-weight:900;line-height:1.2;margin-bottom:20px;color:#fff !important}
.hero-lead{font-size:1.15rem;color:#9ca3af;max-width:720px;margin-bottom:30px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px}
.badge{background:rgba(22,163,74,.15);border:1px solid rgba(22,163,74,.4);color:#4ade80;padding:6px 14px;border-radius:20px;font-size:.82rem;font-weight:600}
.hero-cta-btn{display:inline-block;background:#16a34a;color:#fff;padding:14px 36px;border-radius:8px;font-size:1rem;font-weight:700;transition:background .2s,transform .2s}
.hero-cta-btn:hover{background:#15803d;transform:translateY(-2px);text-decoration:none}

/* HERO AUTHOR BLOCK */
.hero-author-block{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.hero-author-img{width:44px;height:44px;border-radius:50%;border:2px solid #16a34a;object-fit:cover}
.hero-author-details{display:flex;flex-direction:column;gap:2px}
.hero-author-name{color:#f9fafb;font-size:.9rem;font-weight:600}
.hero-author-name a{color:#4ade80}
.hero-author-role{color:#9ca3af;font-size:.78rem}
.hero-pub-date{color:#6b7280;font-size:.75rem}

/* AUTHOR META BLOCK */
.author-meta{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding:16px 20px;background:rgba(255,255,255,.05);border-radius:10px;border:1px solid rgba(255,255,255,.1)}
.author-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #16a34a;flex-shrink:0}
.author-info,.author-details{display:flex;flex-direction:column;gap:3px}
.author-name{font-weight:700;font-size:.95rem}
.author-name a{color:#4ade80}
.author-title{color:#9ca3af;font-size:.82rem}
.author-dates{color:#6b7280;font-size:.78rem}

/* SECTIONS */
.section-light{background:#fff;padding:70px 0}
.section-gray{background:#f9fafb;padding:70px 0}
.section-dark{background:#0a0f1e;padding:70px 0;color:#e5e7eb}
.section-title{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:800;margin-bottom:14px;color:#111827}
.section-dark .section-title{color:#f9fafb}
.section-lead{font-size:1.05rem;color:#4b5563;margin-bottom:40px;max-width:800px}
.section-dark .section-lead{color:#9ca3af}

/* H2 BANNER */
.h2-banner-wrap{margin:0 0 40px;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.1)}
.h2-banner-img{width:100%;height:auto;display:block}
figcaption{color:#6b7280;font-size:.82rem;padding:8px 12px;font-style:italic}

/* CASINO CARDS */
.casinos-grid{display:flex;flex-direction:column;gap:16px}
.casino-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:20px 24px;display:flex;align-items:center;gap:20px;transition:box-shadow .2s,transform .2s;position:relative}
.casino-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.12);transform:translateY(-2px)}
.casino-card.featured{border-color:#16a34a;border-width:2px;background:linear-gradient(135deg,#f0fdf4 0%,#fff 100%)}
.best-badge{position:absolute;top:-10px;left:20px;background:#16a34a;color:#fff;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:12px}
.casino-rank{font-size:1.4rem;font-weight:900;color:#9ca3af;min-width:36px;text-align:center}
.casino-card.featured .casino-rank{color:#16a34a}
.casino-icon{width:56px;height:56px;border-radius:10px;object-fit:cover;flex-shrink:0;background:linear-gradient(135deg,#1e3a5f,#16a34a);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.casino-icon-placeholder{width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,#1e3a5f,#16a34a);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.casino-info{flex:1}
.casino-name{font-size:1.05rem;font-weight:700;color:#111827;margin-bottom:4px}
.casino-bonus{color:#16a34a;font-size:.9rem;font-weight:600;margin-bottom:4px}
.casino-features{color:#6b7280;font-size:.8rem}
.casino-rating{display:flex;flex-direction:column;align-items:center;gap:6px}
.stars{color:#f59e0b;font-size:1rem;letter-spacing:2px}
.rating-num{font-size:.8rem;color:#6b7280}
.casino-cta{background:#16a34a;color:#fff;padding:12px 22px;border-radius:8px;font-weight:700;font-size:.9rem;white-space:nowrap;transition:background .2s}
.casino-cta:hover{background:#15803d;text-decoration:none}
.show-more-btn{display:block;margin:28px auto 0;background:transparent;border:2px solid #16a34a;color:#16a34a;padding:12px 36px;border-radius:8px;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s}
.show-more-btn:hover{background:#16a34a;color:#fff}
.casino-card.hidden{display:none}

/* TABLES */
.table-wrap{overflow-x:auto;margin:30px 0;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,.08)}
table{width:100%;border-collapse:collapse;background:#fff}
thead{background:#0a0f1e;color:#fff}
th{padding:14px 18px;text-align:left;font-size:.88rem;font-weight:700;letter-spacing:.5px}
td{padding:13px 18px;border-bottom:1px solid #f3f4f6;font-size:.9rem}
tr:last-child td{border-bottom:none}
tr:hover td{background:#f9fafb}
.check{color:#16a34a;font-weight:700}
.cross{color:#ef4444;font-weight:700}

/* REVIEWED BY */
.reviewed-by-section{background:#f0fdf4;padding:50px 0;border-top:3px solid #16a34a}
.reviewed-by-header{text-align:center;margin-bottom:30px}
.reviewed-by-label{font-size:1.1rem;font-weight:800;color:#15803d}
.reviewed-by-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.reviewer-card{background:#fff;border-radius:14px;padding:24px;display:flex;gap:14px;box-shadow:0 2px 12px rgba(0,0,0,.07)}
.reviewer-img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid #16a34a}
.reviewer-info{flex:1}
.reviewer-name{font-weight:700;font-size:.95rem;color:#111827;margin-bottom:2px}
.reviewer-role{color:#6b7280;font-size:.78rem;margin-bottom:6px}
.reviewer-stars{color:#f59e0b;font-size:.85rem;margin-bottom:6px}
.reviewer-quote{color:#4b5563;font-size:.82rem;font-style:italic;line-height:1.5}
.reviewer-date{color:#9ca3af;font-size:.75rem;margin-top:6px}

/* INTERACTIVE TOOLS */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:40px}
.tool-card{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:28px;transition:box-shadow .2s}
.tool-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.1)}
.tool-icon{font-size:2rem;margin-bottom:14px}
.tool-title{font-size:1.05rem;font-weight:700;margin-bottom:10px;color:#111827}
.tool-card select,.tool-card input[type=range]{width:100%;padding:8px;border:1px solid #d1d5db;border-radius:6px;margin:8px 0;font-size:.9rem}
.tool-card label{font-size:.85rem;color:#4b5563;display:block;margin-bottom:4px}
.tool-result{background:#f0fdf4;border-radius:8px;padding:12px;margin-top:12px;font-size:.9rem;color:#15803d;font-weight:600;min-height:36px}
.tool-btn{background:#16a34a;color:#fff;border:none;padding:10px 20px;border-radius:6px;cursor:pointer;font-weight:600;font-size:.9rem;margin-top:10px;transition:background .2s}
.tool-btn:hover{background:#15803d}

/* QUIZ */
.quiz{background:#fff;border-radius:14px;padding:28px;border:1px solid #e5e7eb}
.quiz-question{font-weight:700;margin-bottom:14px;color:#111827}
.quiz-options{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.quiz-option{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;transition:all .2s;font-size:.9rem}
.quiz-option:hover{border-color:#16a34a;background:#f0fdf4}
.quiz-option input{accent-color:#16a34a}
.quiz-result{background:#f0fdf4;border-radius:8px;padding:14px;font-size:.9rem;color:#15803d;font-weight:600;display:none}

/* CALCULATOR */
.calculator{background:#fff;border-radius:14px;padding:28px;border:1px solid #e5e7eb}

/* FINDER */
.finder{background:#fff;border-radius:14px;padding:28px;border:1px solid #e5e7eb}

/* CHECKER */
.checker{background:#fff;border-radius:14px;padding:28px;border:1px solid #e5e7eb}

/* FAQ */
.faq-section{background:#f9fafb;padding:70px 0}
.faq-list{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.faq-item{background:#fff;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden}
.faq-question{padding:18px 22px;font-weight:700;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#111827;transition:background .2s}
.faq-question:hover{background:#f9fafb}
.faq-question::after{content:'▼';font-size:.75rem;color:#9ca3af;transition:transform .3s}
.faq-item.open .faq-question::after{transform:rotate(180deg)}
.faq-answer{padding:0 22px;max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s}
.faq-item.open .faq-answer{max-height:400px;padding:16px 22px}
.faq-answer p{font-size:.95rem;color:#4b5563;line-height:1.7}

/* STICKY CTA */
.sticky-cta{position:fixed;bottom:0;left:0;right:0;background:#0a0f1e;border-top:2px solid #16a34a;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;z-index:9999;transform:translateY(100%);transition:transform .4s}
.sticky-cta.visible{transform:translateY(0)}
.sticky-cta-text{color:#e5e7eb;font-size:.9rem}
.sticky-cta-text strong{color:#4ade80}
.sticky-cta-btn{background:#16a34a;color:#fff;padding:10px 24px;border-radius:6px;font-weight:700;font-size:.9rem;white-space:nowrap}
.sticky-cta-btn:hover{background:#15803d;text-decoration:none}
.sticky-close{background:none;border:none;color:#9ca3af;cursor:pointer;font-size:1.2rem;padding:4px 8px}

/* SCROLL POPUP */
.scroll-popup{position:fixed;bottom:80px;right:20px;background:#fff;border:2px solid #16a34a;border-radius:14px;padding:24px;max-width:300px;box-shadow:0 12px 40px rgba(0,0,0,.2);z-index:9998;transform:translateX(110%);transition:transform .4s}
.scroll-popup.visible{transform:translateX(0)}
.popup-close{position:absolute;top:8px;right:12px;background:none;border:none;cursor:pointer;color:#9ca3af;font-size:1.2rem}
.popup-title{font-size:1rem;font-weight:800;color:#111827;margin-bottom:8px}
.popup-text{font-size:.85rem;color:#4b5563;margin-bottom:14px}
.popup-cta{display:block;text-align:center;background:#16a34a;color:#fff;padding:10px;border-radius:8px;font-weight:700}
.popup-cta:hover{background:#15803d;text-decoration:none}

/* AUTHOR PAGE */
.author-page-hero{background:#0a0f1e;padding:60px 0;color:#fff}
.author-page-img{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid #16a34a;margin:0 auto 20px}

/* FOOTER */
.site-footer{background:#0a0f1e;color:#9ca3af;padding:50px 0 30px}
.footer-inner{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;margin-bottom:40px}
.footer-brand{font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:12px}
.footer-desc{font-size:.85rem;line-height:1.7;color:#6b7280}
.footer-heading{font-size:.85rem;font-weight:700;color:#e5e7eb;text-transform:uppercase;letter-spacing:.8px;margin-bottom:14px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:8px}
.footer-links a{color:#6b7280;font-size:.85rem;transition:color .2s}
.footer-links a:hover{color:#4ade80;text-decoration:none}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:24px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}
.footer-copy{font-size:.8rem;color:#4b5563}
.disclaimer{font-size:.75rem;color:#374151;margin-top:20px;padding:16px;background:rgba(255,255,255,.03);border-radius:8px;border-left:3px solid #374151;line-height:1.6}
.age-badge{display:inline-block;background:#ef4444;color:#fff;font-size:.7rem;font-weight:700;padding:3px 8px;border-radius:4px;margin-right:8px}

/* RESPONSIVE */
@media(max-width:768px){
  .main-nav{display:none}
  .hamburger{display:flex}
  .mobile-nav.active{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#0a0f1e;padding:20px;gap:16px;list-style:none;z-index:999}
  .mobile-nav.active a{color:#e5e7eb;font-size:1rem}
  .casino-card{flex-wrap:wrap}
  .casino-cta{width:100%;text-align:center}
  .sticky-cta{flex-direction:column;gap:10px;text-align:center}
  .scroll-popup{right:10px;max-width:280px}
  .tools-grid{grid-template-columns:1fr}
  .hero-section{padding:50px 0 40px}
}
@media(max-width:480px){
  .casino-card{padding:16px}
  .table-wrap table{font-size:.8rem}
  th,td{padding:10px 12px}
}