/* ==========================================================================
   kekoolani.org — Hawaii Online Casinos
   Kekoolani palette: maroon #A11514 · navy #003366 · tan #CCCC99 · gold #c9a84a
   Type: Fraunces (display serif) for headings, Inter for body.
   ========================================================================== */

:root{
  --maroon:#A11514; --maroon-dk:#7e1010; --maroon-2:#9D1515;
  --navy:#022a4e; --navy-2:#003366; --navy-dk:#011d38;
  --tan:#CCCC99; --tan-dk:#999966; --gold:#c9a84a; --gold-lt:#e7d292; --gold-dk:#a8842f;
  --rule:#AE0000; --note:#9D1515;
  --ink:#20242b; --muted:#5d6470; --line:#e6e1d4;
  --card:#ffffff; --cream:#fbf7ee; --cream-2:#f5efe1;
  --ok:#1e7f4f;
  --sh-sm:0 1px 3px rgba(10,20,40,.10);
  --sh:0 6px 22px rgba(10,20,40,.13);
  --sh-lg:0 16px 44px rgba(10,20,40,.22);
  --wrap:1120px; --radius:14px;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* ---------- skip-to-main ---------- */
.skip-nav{position:absolute;top:-50px;left:0;background:var(--navy);color:#fff;padding:10px 18px;font-size:14px;font-weight:600;text-decoration:none;z-index:9999;border-radius:0 0 8px 0;transition:top .15s}
.skip-nav:focus{top:0}

/* ---------- focus-visible ---------- */
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
a:focus-visible{outline-color:var(--maroon)}
.nav-links > a:focus-visible,.nav-item > a:focus-visible,.nav-cta:focus-visible{outline-color:var(--gold-lt);border-radius:8px}
.cta:focus-visible{outline:2px solid #fff;outline-offset:3px}
button:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
body{
  margin:0; font-family:var(--body); color:var(--ink); font-size:17px; line-height:1.68;
  background:var(--cream-2);
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}
a{color:var(--navy-2); text-decoration-color:rgba(2,42,78,.3); text-underline-offset:2px}
img{max-width:100%; height:auto}
h1,h2,h3,h4{font-family:var(--display); line-height:1.16; color:var(--maroon); font-weight:600; letter-spacing:-.01em}

/* ---------- top warning bar ---------- */
.topbar{background:var(--maroon-dk); color:#f0d9b8; font-size:12.5px; padding:6px 0; text-align:center; letter-spacing:.01em}
.topbar b{color:#fff}

/* ---------- header / nav ---------- */
header.site{background:var(--navy); position:sticky; top:0; z-index:1000; box-shadow:0 2px 0 var(--gold), 0 6px 20px rgba(0,0,0,.28)}
.nav{display:flex; align-items:center; gap:22px; height:70px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0}
.brand-logo{height:44px; width:auto; display:block}
.brand .mark{width:40px;height:40px;border-radius:9px;background:linear-gradient(135deg,var(--maroon),var(--gold));display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--display);font-weight:700;font-size:22px}
.brand-tx{font-family:var(--display);font-weight:700;font-size:21px;color:#fff;line-height:1}
.brand-tx small{display:block;font-family:var(--body);font-size:9.5px;color:var(--gold-lt);font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-top:3px}
.nav-links{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav-links > a,.nav-item > a{color:#e9eef5; text-decoration:none; font-size:14.5px; font-weight:500; padding:9px 11px; border-radius:8px; white-space:nowrap; position:relative; display:inline-block}
.nav-links > a:hover,.nav-item > a:hover{color:#fff; background:rgba(255,255,255,.07)}
.nav-links > a.cur{color:var(--gold-lt)}
.nav-links > a.cur::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;background:var(--gold);border-radius:2px}
.nav-item{position:relative}
.nav-item .sub{display:none; position:absolute; top:calc(100% + 6px); left:0; background:#fff; min-width:230px; box-shadow:var(--sh); border-radius:10px; padding:7px; z-index:50}
.nav-item:hover .sub{display:block}
.nav-item .sub a{display:block; color:var(--ink); padding:8px 11px; border-radius:7px; text-decoration:none; font-size:14px}
.nav-item .sub a:hover{background:var(--cream); color:var(--maroon)}
.nav-cta{display:none}
.nav-toggle{display:none; margin-left:auto; width:46px;height:46px;border:0;background:transparent;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.nav-toggle span{display:block;width:25px;height:2.5px;background:#fff;border-radius:2px;transition:.2s}
.nav-overlay{display:none}

/* ---------- hero ---------- */
.hero{position:relative; color:#fff; overflow:hidden;
  background:var(--navy-dk); padding:0; isolation:isolate}
.hero::before{content:""; position:absolute; inset:0; z-index:-2;
  background-image:url("/assets/img/hero.webp"); background-size:cover; background-position:center 60%}
.hero::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, rgba(2,29,56,.93) 0%, rgba(2,29,56,.74) 46%, rgba(126,16,16,.55) 100%)}
.hero .wrap{padding:56px 20px 50px; max-width:var(--wrap)}
.hero .eyebrow{display:inline-block; font-family:var(--body); font-weight:600; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-lt); border:1px solid rgba(231,210,146,.4); padding:5px 12px; border-radius:30px; margin-bottom:16px}
.hero h1{color:#fff; font-size:clamp(30px,5vw,52px); font-weight:600; margin:0 0 14px; max-width:16ch; text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero h1 .amp{color:var(--gold-lt)}
.hero p.lead{font-size:clamp(16px,2vw,19px); color:#eaf0f7; max-width:60ch; margin:0 0 22px; line-height:1.6}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.btn-gold{display:inline-block; background:linear-gradient(180deg,var(--gold-lt),var(--gold) 55%,var(--gold-dk)); color:#3a2c05 !important; font-family:var(--body); font-weight:700; font-size:16px; text-decoration:none; padding:15px 26px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.3); border:1px solid var(--gold-dk)}
.btn-gold:hover{filter:brightness(1.06); transform:translateY(-1px)}
.btn-ghost{display:inline-block; color:#fff !important; text-decoration:none; font-weight:600; font-size:15px; padding:14px 18px; border:1px solid rgba(255,255,255,.45); border-radius:10px}
.btn-ghost:hover{background:rgba(255,255,255,.12)}
.hero .trust{display:flex; flex-wrap:wrap; gap:10px 18px; font-size:13px; color:#dfe7f0; margin-top:22px}
.hero .trust span{display:inline-flex;align-items:center;gap:6px}
.hero .trust span::before{content:"\2713"; color:var(--gold-lt); font-weight:700}
.hero-top-pick{display:none}
.hero-author{display:flex; align-items:center; gap:12px; margin-top:20px}
.hero-author-img{width:44px; height:44px; border-radius:50%; border:2px solid var(--gold-lt); object-fit:cover; flex-shrink:0}
.hero-author-tx{display:flex; flex-direction:column; gap:2px}
.hero-author-name{font-size:13.5px; color:#dfe7f0}
.hero-author-name a{color:var(--gold-lt); text-decoration:none}
.hero-author-meta{font-size:12px; color:#99a8bc}
.hero-author-meta a{color:var(--gold-lt)}
.page-author{display:flex; align-items:center; gap:11px; margin:2px 0 14px}
.page-author-img{width:40px; height:40px; border-radius:50%; border:2px solid var(--gold-lt); object-fit:cover; flex-shrink:0}
.page-author-tx{display:flex; flex-direction:column; gap:1px}
.page-author-tx span{font-size:13.5px; color:var(--muted)}
.page-author-tx a{color:var(--navy-2)}
.page-author-meta{font-size:12px !important; color:#8a919e !important}
.toplist-lead{font-size:16px; color:var(--muted); margin:-2px 0 14px; max-width:72ch}

/* ---------- content cards ---------- */
main{padding:30px 0 10px}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--sh); padding:30px 34px; margin:0 0 26px; border:1px solid rgba(230,225,212,.7)}
.card > h2:first-child{margin-top:0}
section h2,.card h2{font-family:var(--display); font-size:clamp(22px,3vw,29px); color:var(--maroon); margin:38px 0 16px; padding-top:14px; position:relative; font-weight:600}
section h2::before,.card h2::before{content:""; position:absolute; top:0; left:0; width:46px; height:3px; background:var(--gold); border-radius:2px}
h2:first-child::before{display:none}
section h3,.card h3{font-family:var(--display); font-size:20px; color:var(--maroon-2); margin:26px 0 9px; font-weight:600}
p{margin:0 0 15px}
.byline{font-size:14px; color:var(--muted); margin:0 0 4px}
.byline a{color:var(--navy-2)}
.lastmod{color:var(--muted); font-size:13px}
.note,em.note{color:var(--note); font-style:italic; font-size:14.5px}
.disclosure{background:linear-gradient(180deg,var(--cream),var(--cream-2)); border:1px solid var(--line); border-left:4px solid var(--gold); padding:12px 16px; border-radius:10px; font-size:13.5px; color:#4a4f57; margin:0 0 18px}

/* ---------- toplist ---------- */
.toplist{width:100%; border-collapse:separate; border-spacing:0 12px}
.toplist th{display:none}
.toplist tr.row{background:#fff; box-shadow:var(--sh-sm); transition:box-shadow .18s,transform .18s}
.toplist tr.row:hover{box-shadow:var(--sh-lg); transform:translateY(-2px)}
.toplist td{padding:16px 14px; vertical-align:middle; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.toplist td:first-child{border-left:1px solid var(--line); border-radius:14px 0 0 14px; width:44px}
.toplist td:last-child{border-right:1px solid var(--line); border-radius:0 14px 14px 0}
.toplist tr.row:nth-child(1) td{border-color:var(--gold); border-width:2px; background:linear-gradient(180deg,#fffdf6,#fff)}
.toplist tr.row:nth-child(1) td:first-child{position:relative}
.toplist tr.row:nth-child(1) td:first-child::after{content:"TOP PICK"; position:absolute; top:-11px; left:8px; background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk)); color:#3a2c05; font-family:var(--body); font-weight:700; font-size:9px; letter-spacing:.08em; padding:2px 7px; border-radius:20px; white-space:nowrap; box-shadow:var(--sh-sm)}
.rank{font-family:var(--display); font-weight:700; color:#fff; background:var(--navy); width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:17px}
.toplist tr.row:nth-child(1) .rank{background:linear-gradient(135deg,var(--gold),var(--gold-dk)); color:#3a2c05}
.brandcell{min-width:150px}
.brandcell .bname{font-family:var(--display); font-weight:700; font-size:17px; color:var(--maroon); text-decoration:none}
.brandcell .bname:hover{text-decoration:underline; text-decoration-color:var(--gold)}
.brandcell .btag{display:block; font-size:12.5px; color:var(--muted); margin-top:2px}
.logo-chip{width:112px;height:58px;object-fit:contain;background:var(--cream);border:1px solid var(--line);border-radius:9px;padding:5px}
.initials{width:112px;height:58px;border-radius:9px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.04em}
.bonus{font-family:var(--display); font-weight:700; color:#5e4708; background:linear-gradient(180deg,#f6e7bd,#e4cd86); padding:9px 13px; border-radius:9px; text-align:center; font-size:15px; line-height:1.2; border:1px solid #d8bd6f}
.bonus small{display:block; font-family:var(--body); font-weight:600; color:#86702f; font-size:10px; text-transform:uppercase; letter-spacing:.07em; margin-top:2px}
.cta{display:inline-block; background:linear-gradient(180deg,#c01e1e,#8a1111); color:#fff !important; font-family:var(--body); font-weight:700; text-decoration:none; padding:13px 22px; border-radius:10px; text-align:center; box-shadow:0 4px 12px rgba(138,17,17,.32); white-space:nowrap; border:1px solid #7a0d0d; transition:.15s}
.cta:hover{filter:brightness(1.08); transform:translateY(-1px)}
.cta.sm{padding:10px 15px; font-size:13.5px}
.ratecell{text-align:center; font-family:var(--display); color:var(--maroon); font-weight:700; font-size:19px}
.ratecell small{display:block; font-family:var(--body); color:var(--muted); font-weight:500; font-size:11px}

/* ---------- data tables ---------- */
table.data{width:100%; border-collapse:collapse; margin:14px 0 20px; font-size:15px; box-shadow:var(--sh-sm); border-radius:10px; overflow:hidden}
table.data th{background:var(--navy); color:#fff; text-align:left; padding:11px 13px; font-family:var(--body); font-weight:600; font-size:13.5px; letter-spacing:.01em}
table.data td{padding:11px 13px; border-bottom:1px solid var(--line)}
table.data tr:nth-child(even) td{background:var(--cream)}

/* ---------- review above-fold CTA ---------- */
.review-hero-cta{margin:14px 0 8px}
.review-hero-cta .cta{display:block; text-align:center; padding:15px; font-size:16px}

/* ---------- review blocks / pros-cons ---------- */
.opblock{border:1px solid var(--line); border-radius:13px; padding:20px 22px; margin:0 0 18px; background:#fff; box-shadow:var(--sh-sm)}
.opblock .head{display:flex; align-items:center; gap:15px; flex-wrap:wrap}
.opblock .head h3{margin:0}
.proscons{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:16px 0}
.proscons ul{margin:6px 0 0; padding-left:20px}
.pros li{color:#155e3a; margin-bottom:4px} .cons li{color:#8a1111; margin-bottom:4px}
.proscons h4{margin:0; font-family:var(--display); font-size:16px}
.pros h4{color:var(--ok)} .cons h4{color:var(--maroon)}

/* ---------- FAQ ---------- */
.faq details{border:1px solid var(--line); border-radius:10px; margin:0 0 10px; background:#fff; padding:0 18px; box-shadow:var(--sh-sm)}
.faq summary{font-family:var(--display); font-weight:600; color:var(--maroon); cursor:pointer; padding:14px 0; font-size:16.5px; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--gold-dk); font-weight:700}
.faq details[open] summary::after{content:"\2013"}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq p{margin:13px 0}

/* ---------- callouts ---------- */
.callout{background:var(--cream); border-left:4px solid var(--navy); padding:14px 18px; border-radius:10px; margin:16px 0}
.callout.legal{border-left-color:var(--rule)}
.rg{background:#fff7f0;border:1px solid #f0d8c0;border-left:4px solid var(--maroon);border-radius:10px;padding:15px 18px;font-size:14.5px;margin-top:18px}

/* ---------- author ---------- */
.author-portrait{width:118px;height:118px;border-radius:50%;object-fit:cover;border:3px solid var(--gold-lt);box-shadow:var(--sh-sm)}

/* ---------- footer ---------- */
footer.site{background:var(--navy-dk); color:#bcc8d6; margin-top:36px; padding:38px 0 20px; font-size:14px; border-top:3px solid var(--gold)}
footer.site .cols{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px}
footer.site h4{color:#fff; font-family:var(--display); font-size:16px; margin:0 0 12px; border-bottom:1px solid #123a5e; padding-bottom:7px}
footer.site a{color:#bcc8d6; text-decoration:none; display:block; padding:3px 0}
footer.site a:hover{color:var(--gold-lt)}
footer.site .fbrand{font-family:var(--display);font-weight:700;color:#fff;font-size:20px}
footer.site .legal{border-top:1px solid #123a5e; margin-top:22px; padding-top:16px; font-size:12.5px; color:#8298b2}
.rg-line{color:var(--gold-lt); font-weight:600}

/* ---------- breadcrumb ---------- */
.crumb{font-size:13px; color:var(--muted); padding:12px 0 0}
.crumb a{color:var(--navy-2)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav-links{position:fixed; top:0; right:0; bottom:0; width:min(86vw,360px); background:var(--navy); flex-direction:column; align-items:stretch; gap:0; margin:0; padding:74px 22px 28px; transform:translateX(100%); transition:transform .26s ease; z-index:1001; box-shadow:-10px 0 40px rgba(0,0,0,.4); overflow-y:auto}
  .nav-links.open{transform:translateX(0)}
  .nav-overlay{display:block; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000}
  .nav-overlay[hidden]{display:none}
  .nav-links > a,.nav-item > a{font-size:18px; padding:13px 6px; border-bottom:1px solid rgba(255,255,255,.08); border-radius:0; width:100%}
  .nav-links > a.cur::after{display:none}
  .nav-item{width:100%}
  .nav-item .sub{position:static; display:none; box-shadow:none; background:rgba(255,255,255,.05); padding:4px 0 8px 12px; margin-top:4px}
  .nav-item.subopen .sub{display:block}
  .nav-item .sub a{color:#cfe0ff}
  .nav-item:hover .sub{display:none}
  .nav-item.subopen .sub{display:block}
  .nav-close{display:block; position:absolute; top:16px; right:18px; width:44px;height:44px; background:transparent; border:0; color:#fff; font-size:32px; line-height:1; cursor:pointer}
  .nav-cta{display:block; margin-top:18px; text-align:center; background:linear-gradient(180deg,var(--gold-lt),var(--gold-dk)); color:#3a2c05 !important; font-weight:700; padding:14px; border-radius:10px; text-decoration:none}
  footer.site .cols{grid-template-columns:1fr 1fr}
}
.nav-close{display:none}
@media (max-width:768px){
  body{font-size:16px}
  .card{padding:20px 18px}
  /* compact hero on mobile so the first toplist card peeks (affiliate-list-placement §3) */
  .hero .wrap{padding:22px 20px 22px}
  .hero h1{font-size:25px; margin-bottom:10px}
  .hero p.lead{font-size:15px; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .hero .eyebrow{margin-bottom:12px; font-size:11px}
  .hero .trust{margin-top:14px; gap:6px 14px; font-size:12px}
  .hero-byline{display:none}
  main{padding:14px 0 10px}
  section h2,.card h2{font-size:20px; margin:18px 0 9px; padding-top:11px}
  .toplist-lead{font-size:14px; margin:0 0 10px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .proscons{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr}
  /* toplist -> stacked cards */
  .toplist tr.row{display:block; padding:16px; margin-bottom:14px; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-sm)}
  .toplist tr.row:nth-child(1){border:2px solid var(--gold)}
  .toplist td{display:block; border:0 !important; padding:6px 0; text-align:center}
  .toplist td:first-child,.toplist td:last-child{border-radius:0; width:auto}
  .toplist tr.row:nth-child(1) td:first-child::after{position:static; display:inline-block; margin-bottom:6px}
  .toplist .rank{margin:0 auto}
  .logo-chip,.initials{margin:8px auto; width:150px;height:74px}
  .bonus{font-size:18px; padding:12px}
  .cta{display:block; width:100%; padding:15px}
  .hero-cta{flex-direction:column; align-items:stretch}
  .btn-gold,.btn-ghost{text-align:center}
  .hero-top-pick{
    display:flex; flex-direction:column; gap:10px; margin-top:18px;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18);
    border-radius:12px; padding:12px 14px
  }
  .htprow{display:flex; align-items:center; gap:12px}
  .htplogo{width:86px; height:44px; object-fit:contain; background:#fff; border-radius:7px; padding:4px; flex-shrink:0}
  .htptx{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
  .htplabel{font-size:10.5px; font-weight:700; color:var(--gold-lt); text-transform:uppercase; letter-spacing:.06em}
  .htpbonus{font-size:15px; font-weight:700; color:#fff; line-height:1.2}
  .hero-top-pick .cta{display:block; text-align:center; padding:13px; font-size:15px}
}
@media (max-width:600px){
  /* stack table.data rows into labelled cards — data-label attrs injected by JS */
  table.data{display:block; border-radius:10px; overflow:hidden}
  table.data thead{display:none}
  table.data tbody{display:block}
  table.data tr{display:block; padding:10px 2px; border-bottom:2px solid var(--line)}
  table.data tr:last-child{border-bottom:0}
  table.data tr:nth-child(even) td{background:transparent}
  table.data td{
    display:block; border:0 !important; padding:5px 13px; text-align:left; background:transparent
  }
  table.data td[data-label]::before{
    content:attr(data-label); display:block;
    font-size:11px; font-weight:700; color:var(--muted);
    text-transform:uppercase; letter-spacing:.07em; margin-bottom:2px
  }
}