/*
Theme Name: HexagoneGay Casino
Theme URI: https://www.hexagonegay.com/
Author: HexagoneGay
Description: Casino affiliate theme for hexagonegay.com
Version: 1.0.0
Text Domain: hexagonegay
*/

:root{--bg-body:#f5f5f5;--bg-white:#fff;--bg-card:#f9f9f9;--text-primary:#1a1a2e;--text-secondary:#555;--text-muted:#888;--accent-green:#2e8b57;--accent-green-hover:#246d45;--accent-orange:#c87533;--accent-gold:#d4a03c;--border-light:#e0e0e0;--shadow-card:0 2px 12px rgba(0,0,0,.08);--shadow-hover:0 4px 20px rgba(0,0,0,.12);--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--max-w:900px}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-body);color:var(--text-primary);line-height:1.7;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit}img{max-width:100%;height:auto}

.site-header{background:var(--bg-white);border-bottom:1px solid var(--border-light);position:sticky;top:0;z-index:100}
.header-inner{max-width:var(--max-w);margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between}
.site-logo{display:flex;align-items:center;text-decoration:none;gap:10px}
.site-logo img{height:40px;width:auto}
.site-logo-text{font-size:20px;font-weight:800;color:var(--text-primary);letter-spacing:-.5px}
.site-logo-text span{color:var(--accent-green)}
.header-nav{display:flex;gap:24px;align-items:center}
.header-nav a{font-size:14px;font-weight:500;color:var(--text-secondary);text-decoration:none;transition:color .2s}
.header-nav a:hover,.header-nav a.active{color:var(--accent-green)}

.main-content{max-width:var(--max-w);margin:0 auto;padding:0 20px}

.hero{background:var(--bg-white);border-radius:var(--radius-lg);padding:40px 36px;margin:28px 0;box-shadow:var(--shadow-card)}
.hero h1{font-size:30px;font-weight:800;line-height:1.25;margin-bottom:18px}
.author-row{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--border-light)}
.author-avatar{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--border-light)}
.author-info{font-size:13px;color:var(--text-muted);line-height:1.5}
.author-info strong{color:var(--text-primary);font-weight:600}
.hero p{color:var(--text-secondary);margin-bottom:14px;font-size:15.5px}

.content-section{background:var(--bg-white);border-radius:var(--radius-lg);padding:36px;margin-bottom:22px;box-shadow:var(--shadow-card)}
.content-section h1{font-size:30px;font-weight:800;line-height:1.25;margin-bottom:18px}
.content-section h2{font-size:24px;font-weight:800;margin-bottom:18px;line-height:1.3}
.content-section h3{font-size:19px;font-weight:700;margin-top:28px;margin-bottom:12px}
.content-section h4{font-size:16px;font-weight:700;margin-top:20px;margin-bottom:8px}
.content-section p{color:var(--text-secondary);margin-bottom:14px;font-size:15.5px}
.content-section ul,.content-section ol{margin:12px 0 16px 20px;color:var(--text-secondary);font-size:15px}
.content-section li{margin-bottom:6px}

.content-img{width:100%;border-radius:var(--radius-md);margin:20px 0;display:block;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.content-img-caption{text-align:center;font-size:13px;color:var(--text-muted);margin-top:-12px;margin-bottom:20px}

.casino-list{margin:24px 0}
.casino-card{background:var(--bg-white);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:24px 28px;margin-bottom:16px;display:grid;grid-template-columns:160px 1fr auto;align-items:center;gap:24px;position:relative;box-shadow:var(--shadow-card);transition:box-shadow .25s,transform .2s}
.casino-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.card-rank{position:absolute;top:-8px;left:-8px;width:34px;height:34px;background:linear-gradient(135deg,var(--accent-orange),var(--accent-gold));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.card-logo-wrap{width:160px;height:100px;background:var(--bg-card);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;border:1px solid var(--border-light);overflow:hidden}
.card-logo-wrap img{max-width:140px;max-height:80px;object-fit:contain}
.card-info{min-width:0}
.card-name-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.card-name{font-size:18px;font-weight:700}
.card-stars{color:var(--accent-gold);font-size:14px;letter-spacing:1px}
.card-score{font-size:13px;color:var(--text-muted);font-weight:500}
.card-tags{display:flex;gap:8px;flex-wrap:wrap}
.card-tag{background:#f0f0f0;border:1px solid var(--border-light);border-radius:20px;padding:4px 14px;font-size:12.5px;font-weight:500;color:var(--text-secondary);white-space:nowrap}
.card-cta{text-align:center;min-width:220px}
.card-bonus-label{font-size:13px;font-weight:500;color:var(--text-muted);margin-bottom:4px}
.card-bonus-value{font-size:22px;font-weight:800;color:var(--accent-orange);line-height:1.2;margin-bottom:2px}
.card-bonus-extra{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:12px}
.cta-button{display:inline-block;background:var(--accent-green);color:#fff;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:13px 30px;border-radius:8px;border:2px dashed rgba(255,255,255,.4);outline:2px dashed var(--accent-green);outline-offset:2px;text-decoration:none;transition:background .2s,transform .15s;cursor:pointer}
.cta-button:hover{background:var(--accent-green-hover);transform:scale(1.03)}

.review-block{border:1px solid var(--border-light);border-radius:var(--radius-md);padding:28px;margin:24px 0;background:var(--bg-card)}
.review-block h3{margin-top:0;font-size:20px}
.review-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.review-logo{width:60px;height:60px;border-radius:var(--radius-sm);object-fit:contain;background:#fff;border:1px solid var(--border-light);padding:4px}
.review-pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:16px}
.pros h4,.cons h4{font-size:14px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.pros h4{color:var(--accent-green)}.cons h4{color:#c0392b}
.pros ul,.cons ul{list-style:none;margin-left:0}
.pros li::before{content:"✓ ";color:var(--accent-green);font-weight:700}
.cons li::before{content:"✗ ";color:#c0392b;font-weight:700}

.compare-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.compare-table th{background:var(--text-primary);color:#fff;padding:12px 16px;text-align:left;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.3px}
.compare-table td{padding:12px 16px;border-bottom:1px solid var(--border-light);color:var(--text-secondary)}
.compare-table tr:nth-child(even) td{background:#fafafa}
.compare-table tr:hover td{background:#f0f7f3}

.faq-item{border:1px solid var(--border-light);border-radius:var(--radius-md);margin-bottom:10px;overflow:hidden}
.faq-question{padding:16px 20px;font-weight:600;font-size:15px;cursor:pointer;background:var(--bg-card);display:flex;justify-content:space-between;align-items:center;transition:background .2s;user-select:none}
.faq-question:hover{background:#eef5f0}
.faq-question::after{content:"+";font-size:20px;font-weight:300;color:var(--accent-green)}
.faq-question.active::after{content:"−"}
.faq-answer{padding:0 20px;max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;color:var(--text-secondary);font-size:14.5px;line-height:1.7}
.faq-answer.open{max-height:500px;padding:0 20px 18px}

.values-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin:20px 0}
.value-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:20px;text-align:center}
.value-icon{font-size:32px;margin-bottom:10px}
.value-card h4{font-size:15px;font-weight:700;margin-bottom:6px}
.value-card p{font-size:13px;color:var(--text-muted);line-height:1.5;margin-bottom:0}

.subtitle{font-size:16px;color:var(--text-muted);margin-bottom:28px}
.contact-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:24px 0}
.contact-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:24px;text-align:center;transition:box-shadow .2s}
.contact-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.contact-icon{font-size:28px;margin-bottom:10px}
.contact-card h3{font-size:15px;font-weight:700;margin-bottom:6px}
.contact-card p{font-size:14px;color:var(--text-muted);margin-bottom:0;line-height:1.5}
.contact-card a{color:var(--accent-green);text-decoration:none;font-weight:600}
.contact-card a:hover{text-decoration:underline}
.contact-form{margin-top:28px}
.form-row{margin-bottom:18px}
.form-row label{display:block;font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:6px}
.form-row input,.form-row textarea,.form-row select{width:100%;padding:12px 16px;border:1px solid var(--border-light);border-radius:var(--radius-md);font-family:'Inter',sans-serif;font-size:15px;color:var(--text-primary);background:var(--bg-card);transition:border-color .2s,box-shadow .2s;outline:none}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{border-color:var(--accent-green);box-shadow:0 0 0 3px rgba(46,139,87,.12)}
.form-row textarea{resize:vertical;min-height:140px}
.form-row-double{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-submit{display:inline-block;background:var(--accent-green);color:#fff;font-size:15px;font-weight:700;padding:14px 36px;border:none;border-radius:8px;cursor:pointer;transition:background .2s,transform .15s;letter-spacing:.3px}
.form-submit:hover{background:var(--accent-green-hover);transform:translateY(-1px)}

.page-404{text-align:center;padding:60px 20px}
.page-404 h1{font-size:72px;font-weight:800;color:var(--accent-green);margin-bottom:10px}
.page-404 h2{font-size:24px;font-weight:700;margin-bottom:16px}
.page-404 p{color:var(--text-secondary);margin-bottom:24px}
.page-404 .cta-button{outline:none;border:none}

.site-footer{background:var(--text-primary);color:#aaa;text-align:center;padding:32px 20px;margin-top:40px;font-size:13px;line-height:1.8}
.site-footer a{color:#ccc;text-decoration:none}
.site-footer a:hover{color:#fff}

@media(max-width:768px){
  .casino-card{grid-template-columns:1fr;text-align:center;padding:20px;gap:16px}
  .card-logo-wrap{width:100%;height:80px}
  .card-name-row{justify-content:center}
  .card-tags{justify-content:center}
  .card-cta{min-width:unset}
  .card-rank{top:-6px;left:-6px}
  .hero{padding:28px 20px}
  .hero h1{font-size:24px}
  .content-section{padding:24px 20px}
  .content-section h2{font-size:20px}
  .review-pros-cons{grid-template-columns:1fr}
  .header-nav{gap:14px}
  .header-nav a{font-size:13px}
  .form-row-double{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .values-grid{grid-template-columns:1fr}
}