/* ontario-casinos.ca — oc skin */
:root{
  --navy:#16346a; --navy2:#1f4a94; --navy3:#0f2550; --red:#cf2a3c; --red-soft:#fde9eb;
  --bg:#f3f5f9; --card:#fff; --line:#dfe4ee; --txt:#1c2333; --mute:#5f6b82; --sky:#e8eefb;
  --ok:#14915f; --gold:#f2b51d;
  --h:'Urbanist',system-ui,sans-serif; --b:'Be Vietnam Pro',system-ui,sans-serif;
  --r:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:15.5px/1.7 var(--b)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy2)}
.oc-wrap{max-width:1140px;margin:0 auto;padding:0 20px}

/* header */
.oc-top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.oc-top .oc-wrap{display:flex;align-items:center;height:62px;gap:20px}
.oc-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);font:800 19px var(--h);letter-spacing:-.01em}
.oc-logo svg{width:34px;height:34px}
.oc-logo span b{color:var(--red)}
.oc-nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.oc-nav a,.oc-nav summary{color:var(--txt);text-decoration:none;font-weight:600;font-size:14px;padding:8px 11px;border-radius:8px;cursor:pointer;list-style:none}
.oc-nav a:hover,.oc-nav summary:hover{background:var(--sky)}
.oc-nav summary::-webkit-details-marker{display:none}
.oc-nav summary:after{content:"▾";margin-left:5px;font-size:11px;color:var(--mute)}
.oc-nav details{position:relative}
.oc-drop{position:absolute;right:0;top:42px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 34px #16346a26;padding:8px;min-width:250px;display:grid}
.oc-lang{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:5px 12px!important;font-size:13px!important}
.oc-lang i{font-style:normal;font-weight:800;color:var(--red)}
.oc-burger{display:none;margin-left:auto;border:0;background:none;font-size:26px;color:var(--navy);cursor:pointer}

/* title band (like the old blue header) */
.oc-band{background:linear-gradient(120deg,var(--navy3),var(--navy) 55%,var(--navy2));color:#fff;padding:30px 0 34px;position:relative;overflow:hidden}
.oc-band:after{content:"";position:absolute;right:-60px;top:-40px;width:340px;height:340px;background:url(/img/maple.svg) center/contain no-repeat;opacity:.07}
.oc-crumbs{font-size:13px;color:#c7d3ee;margin-bottom:10px}
.oc-crumbs a{color:#fff;text-decoration:none}
.oc-band h1{font:800 clamp(28px,4.2vw,44px)/1.1 var(--h);margin:0 0 10px;letter-spacing:-.015em;max-width:900px}
.oc-band p{margin:0;color:#dbe4f6;max-width:820px;font-size:16px}
.oc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;background:#fff;border-bottom:1px solid var(--line);padding:12px 0;font-size:13.5px;color:var(--mute)}
.oc-meta .oc-wrap{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.oc-meta b{color:var(--txt)}
.oc-badge{display:inline-flex;align-items:center;gap:6px;background:var(--red-soft);color:var(--red);font-weight:700;font-size:12px;border-radius:999px;padding:2px 10px}
.oc-badge svg{width:13px;height:13px;fill:var(--red)}
.oc-meta details{position:relative}
.oc-meta summary{cursor:pointer;color:var(--navy2);font-weight:600;list-style:none}
.oc-meta summary::-webkit-details-marker{display:none}
.oc-meta details p{position:absolute;z-index:5;top:28px;left:0;width:min(420px,calc(100vw - 48px));background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:0 12px 30px #16346a22;color:var(--txt);margin:0}

/* layout */
.oc-main{padding:28px 0 20px}
.oc-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px 32px;margin:0 0 22px}
.oc-sec > h2.oc-st{font:800 24px/1.2 var(--h);margin:0 0 6px;color:var(--navy)}
.oc-lead{color:var(--mute);margin:0 0 18px}

/* operator cards */
.oc-count{font:800 21px var(--h);margin:0 0 14px;color:var(--txt)}
.oc-list{display:grid;gap:16px}
.oc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.oc-cm{display:grid;grid-template-columns:170px 1fr 190px;gap:22px;padding:20px 22px;align-items:center}
.oc-cl{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.oc-cl img{width:150px;height:72px;object-fit:contain;border-radius:8px;background:var(--bg)}
.oc-rate{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:3px 10px;font-weight:700;font-size:14px}
.oc-rate i{color:var(--gold);font-style:normal}
.oc-rank{font:800 13px var(--h);color:var(--mute)}
.oc-cc h3{font:800 19px/1.25 var(--h);margin:6px 0 8px}
.oc-tags{display:flex;flex-wrap:wrap;gap:6px}
.oc-tag{background:var(--sky);color:var(--navy);border-radius:6px;font-size:12px;font-weight:600;padding:2px 8px}
.oc-ca{text-align:center}
.oc-btn{display:inline-flex;justify-content:center;align-items:center;gap:6px;background:var(--red);color:#fff;font:700 15px var(--b);border-radius:10px;padding:12px 18px;text-decoration:none;width:100%;border:0;cursor:pointer}
.oc-btn:hover{background:#b72232}
.oc-btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.oc-btn.ghost:hover{background:var(--sky)}
.oc-ca .oc-btn+.oc-btn{margin-top:8px}
.oc-small{font-size:11.5px;color:var(--mute);margin-top:6px;line-height:1.4}
.oc-card details{border-top:1px solid var(--line)}
.oc-card summary{cursor:pointer;list-style:none;padding:12px 22px;font:700 15px var(--h);display:flex;justify-content:space-between}
.oc-card summary::-webkit-details-marker{display:none}
.oc-card summary:after{content:"⌄";font-size:18px;line-height:1;color:var(--navy2)}
.oc-card details[open] summary:after{transform:rotate(180deg)}
.oc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 20px;padding:0 22px 16px}
.oc-grid div{font-size:14px}
.oc-grid span{display:block;font-weight:700;font-size:13.5px;color:var(--txt)}
.oc-grid em{font-style:normal;color:var(--mute)}
.oc-pays{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 22px;border-top:1px solid var(--line);background:#fafbfd}
.oc-pays img{height:26px;width:auto;border-radius:4px;background:#fff;border:1px solid var(--line);padding:2px}
.oc-pays span{font-size:12.5px;color:var(--mute)}

/* article */
.oc-art h2{font:800 25px/1.25 var(--h);color:var(--navy);margin:34px 0 10px}
.oc-art h3{font:700 19px/1.3 var(--h);margin:24px 0 8px}
.oc-art p{margin:0 0 14px}
.oc-art ul,.oc-art ol{padding-left:22px;margin:0 0 16px}
.oc-art li{margin:4px 0}
.oc-art > :first-child{margin-top:0}
.oc-art .oc-tw{overflow-x:auto;margin:6px 0 20px;border:1px solid var(--line);border-radius:10px}
.oc-art table{width:100%;border-collapse:collapse;font-size:14.5px}
.oc-art th{background:var(--sky);color:var(--navy);text-align:left;padding:10px 12px;font-weight:700}
.oc-art td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:top}
.oc-art blockquote{margin:18px 0;padding:14px 18px;background:var(--sky);border-radius:10px;border-left:4px solid var(--navy2)}
.oc-art figure,.oc-fig{margin:22px 0}
.oc-art figure img,.oc-fig img{border-radius:12px;border:1px solid var(--line);background:#fff}
.oc-art figcaption,.oc-fig figcaption{font-size:13px;color:var(--mute);margin-top:6px}
.oc-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.oc-split > *,.oc-art{min-width:0}
.oc-toc{position:sticky;top:80px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:14px}
.oc-toc b{font:800 14px var(--h);color:var(--navy)}
.oc-toc ol{margin:8px 0 0;padding-left:18px}
.oc-toc li{margin:5px 0}
.oc-toc a{text-decoration:none;color:var(--txt)}
.oc-toc a:hover{color:var(--red)}

/* cluster tiles */
.oc-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.oc-tile{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:12px;padding:14px;text-decoration:none;color:var(--txt);background:#fff}
.oc-tile:hover{border-color:var(--navy2);box-shadow:0 8px 20px #16346a14}
.oc-tile svg{width:30px;height:30px;stroke:var(--red);fill:none;stroke-width:1.8}
.oc-tile b{font:800 15px var(--h);color:var(--navy)}
.oc-tile span{font-size:13px;color:var(--mute);line-height:1.4}

/* review header */
.oc-rev{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}
.oc-rbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.oc-rbox .oc-rh{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.oc-rbox .oc-rh img{width:120px;height:58px;object-fit:contain;background:var(--bg);border-radius:8px}
.oc-facts div{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding:8px 0;font-size:14px}
.oc-facts div:last-child{border:0}
.oc-facts span{color:var(--mute)}
.oc-facts b{text-align:right}
.oc-shot{border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.oc-notice{border-radius:12px;padding:16px 20px;margin:0 0 20px;background:var(--red-soft);color:#7b1422;font-weight:600}

/* scores */
.oc-scores{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 22px;margin:8px 0}
.oc-scores div{display:grid;grid-template-columns:1fr auto;gap:4px;font-size:13.5px}
.oc-scores i{grid-column:1/-1;height:6px;border-radius:6px;background:var(--line);position:relative;overflow:hidden}
.oc-scores i:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--navy2);border-radius:6px}

/* land-based cards */
.oc-land{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.oc-lc{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff}
.oc-lc b{font:800 16px var(--h);color:var(--navy);display:block}
.oc-lc span{font-size:13px;color:var(--mute)}
.oc-lc ul{margin:8px 0 0;padding-left:18px;font-size:13.5px}

/* faq */
.oc-faq details{border:1px solid var(--line);border-radius:10px;margin:0 0 10px;background:#fff}
.oc-faq summary{cursor:pointer;padding:14px 18px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:12px}
.oc-faq summary::-webkit-details-marker{display:none}
.oc-faq summary:after{content:"+";font:800 20px var(--h);color:var(--red)}
.oc-faq details[open] summary:after{content:"−"}
.oc-faq p{margin:0;padding:0 18px 16px;color:#3a4459}

/* help strip + footer */
.oc-help{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 22px}
.oc-help img{height:38px;width:auto}
.oc-foot{background:var(--navy3);color:#c4cee4;padding:40px 0 22px;font-size:14px}
.oc-foot .oc-wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:26px}
.oc-foot h4{color:#fff;font:800 14px var(--h);margin:0 0 10px;text-transform:uppercase;letter-spacing:.05em}
.oc-foot a{display:block;color:#dfe6f5;text-decoration:none;padding:3px 0}
.oc-foot a:hover{color:#fff}
.oc-foot .oc-logo{color:#fff}
.oc-legal{grid-column:1/-1;border-top:1px solid #ffffff1f;padding-top:16px;font-size:12.5px;color:#93a1c0}

@media (max-width:960px){
  .oc-cm{grid-template-columns:140px 1fr}
  .oc-ca{grid-column:1/-1}
  .oc-split{grid-template-columns:1fr}
  .oc-toc{position:static;order:-1}
  .oc-rev{grid-template-columns:1fr}
  .oc-foot .oc-wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:15px}
  .oc-wrap{padding:0 16px}
  .oc-burger{display:block}
  .oc-nav{display:none;position:absolute;left:0;right:0;top:62px;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:10px 16px 16px}
  .oc-nav.on{display:flex}
  .oc-drop{position:static;box-shadow:none;border:0;padding:0 0 0 10px}
  .oc-sec{padding:20px 16px}
  .oc-cm{grid-template-columns:1fr;gap:12px;padding:16px}
  .oc-cl{flex-direction:row;align-items:center;flex-wrap:wrap}
  .oc-cl img{width:120px;height:58px}
  .oc-grid{grid-template-columns:1fr 1fr}
  .oc-scores{grid-template-columns:1fr}
  .oc-foot .oc-wrap{grid-template-columns:1fr}
  .oc-meta details{position:static}
  .oc-meta details p{left:16px;right:16px;width:auto}
  .oc-meta .oc-wrap{position:relative}
}