/*
Theme Name: FairLuck Odyssey
Theme URI: https://fairluckguide.com/
Author: Atlas Studio
Description: Bold, magazine-style iGaming guide theme with diagonal sections, asymmetric cards, and editable policy pages.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: fairluck
License: GPL-2.0-or-later
Tags: custom-logo, editor-style, grid-layout, accessibility-ready, mobile-first
*/

:root{
  --bg:#fcfcfd;
  --paper:#ffffff;
  --ink:#0a0f1c;
  --muted:#3f4a5a;
  --line:#e6e9f0;
  --brand:#0ea5a3;   /* teal */
  --brand2:#22c55e;  /* emerald */
  --accent:#f97316;  /* orange */
  --pink:#ec4899;
  --radius:20px;
  --shadow: 0 8px 26px rgba(2,6,23,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(900px 700px at 110% -20%, rgba(34,197,94,.08), transparent 50%),
    radial-gradient(900px 700px at -10% -10%, rgba(14,165,163,.10), transparent 55%),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height:1.65;
}

h1,h2,h3{font-family: ui-serif, Georgia, 'Times New Roman', serif; letter-spacing:.2px}
a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
a:hover{color:#0c8e8b}

.container{max-width:1240px;margin-inline:auto;padding:24px}
.container-narrow{max-width:980px;margin-inline:auto;padding:24px}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;margin:18px 0}
.kicker{text-transform:uppercase;letter-spacing:.18em;color:var(--muted);font-size:12px}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;box-shadow:var(--shadow)}
.btn:hover{box-shadow:0 12px 36px rgba(2,6,23,.12)}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border:none}
.btn.ghost{background:transparent}

.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 980px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} }

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.2px}
.brand img{height:32px;width:auto;display:block}
.brand span{font-size:14px}
.menu{display:flex;gap:12px;flex-wrap:wrap}
.menu a{text-decoration:none;color:var(--muted);padding:8px 12px;border-radius:10px}
.menu a:hover{background:#eef2f7}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:#fff}
@media (max-width: 900px){ .menu{display:none} .burger{display:block} }

.drawer{position:fixed;inset:0;display:none;z-index:70}
.drawer.active{display:block}
.drawer .shade{position:absolute;inset:0;background:rgba(0,0,0,.35)}
.drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(85vw,360px);background:#fff;border-left:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:10px}
.drawer .panel a{text-decoration:none;color:var(--ink);padding:10px 12px;border:1px solid var(--line);border-radius:10px}

/* Hero */
.hero{padding:30px 0 0 0;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-60px;height:160px;background:linear-gradient(180deg,transparent, rgba(34,197,94,.10), transparent);transform:skewY(-5deg)}
.hero-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center}
.hero h1{font-size:clamp(30px,4.8vw,52px);margin:0 0 8px}
.hero .lead{color:var(--muted);max-width:65ch}
.hero .chips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 12px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#f1f5f9;border:1px solid var(--line);font-size:12px;color:var(--muted)}
.hero img{width:100%;max-width:560px;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
@media (max-width: 900px){ .hero-wrap{grid-template-columns:1fr} .hero img{max-width:360px} }

/* Section basics */
.section{padding:36px 0}
.section h2{margin:0 0 8px;font-size:clamp(22px,3.6vw,36px)}
.section .lead{color:var(--muted)}

/* Asymmetric feature cards */
.feature{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch
}
.feature .a{padding:22px}
.feature .b{padding:0;overflow:hidden;border-radius:var(--radius)}
.feature .b img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
@media (max-width: 980px){ .feature{grid-template-columns:1fr}}

/* Comparison rows with accent bar */
.rows{display:flex;flex-direction:column;gap:12px}
.row{display:grid;grid-template-columns:1.2fr .8fr .8fr .6fr;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow);position:relative}
.row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--brand),var(--brand2));border-top-left-radius:14px;border-bottom-left-radius:14px}
.row .title{font-weight:800}
.row .meta{display:flex;gap:8px;flex-wrap:wrap}
.row .actions .btn{padding:10px 12px}
@media (max-width: 980px){ .row{grid-template-columns:1fr} }

/* License grid badges */
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{padding:8px 10px;border:1px dashed var(--line);border-radius:12px;background:#fff;color:var(--muted);font-size:13px}

/* FAQ */
.faq .item{border:1px solid var(--line);border-radius:12px;background:#fff}
.faq .q{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;cursor:pointer}
.faq .a{display:none;padding:0 16px 16px;color:var(--muted)}
.faq .item.open .a{display:block}

/* Footer */
.footer{border-top:1px solid var(--line);margin-top:30px;background:#fff}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:22px}
@media (max-width: 900px){ .footer .cols{grid-template-columns:1fr 1fr} }
@media (max-width: 600px){ .footer .cols{grid-template-columns:1fr} }
.footer small{color:var(--muted)}