/* layout.css — header, footer, hero, grid, breadcrumbs, dialogs */

/* ---- Site header ---- */
.site-header{
  background:var(--c-bg-dark); color:var(--c-text-dark);
  padding:.9em 0;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between; gap:1em; flex-wrap:wrap;
}
.brand{
  display:flex; align-items:center; gap:.5em;
  font-family:var(--font-head); font-size:var(--fs-22); font-weight:600;
  color:var(--c-text-dark); text-decoration:none;
}
.brand svg{flex:none}
.site-nav{display:flex; align-items:center; gap:1.1em; flex-wrap:wrap}
.site-nav a{
  color:var(--c-text-dark); text-decoration:none; font-size:var(--fs-14); font-weight:600;
  border-bottom:2px solid transparent; padding:.2em 0;
}
.site-nav a:hover, .site-nav a[aria-current="page"]{border-bottom-color:var(--c-accent); color:#fff}
.nav-toggle{
  display:none; background:transparent; border:1px solid var(--c-text-dark); color:var(--c-text-dark);
  border-radius:6px; padding:.4em .6em; font-size:var(--fs-14);
}
@media (max-width:899px){
  .nav-toggle{display:inline-block}
  .site-nav{
    flex-basis:100%; display:none; flex-direction:column; align-items:flex-start;
    gap:.7em; padding-top:.8em; border-top:1px solid #274436; margin-top:.6em;
  }
  .site-nav.is-open{display:flex}
}

/* ---- Hero ---- */
.hero{background:var(--c-bg-dark); color:var(--c-text-dark); padding:3em 0 3.2em}
.hero h1{color:#fff; max-width:16ch}
.hero p.lead{font-size:var(--fs-18); max-width:56ch; color:#dfe7e0}
.hero .cta{
  display:inline-block; margin-top:1em; background:var(--c-accent); color:#fff;
  text-decoration:none; padding:.75em 1.3em; border-radius:8px; font-weight:600;
}
.hero .cta:hover{background:#c76f38; color:#fff}

/* ---- Estatuto regulatorio ---- */
.regulatory-block{
  background:var(--c-surface-dark); color:var(--c-text-dark);
  border-left:4px solid var(--c-accent); border-radius:8px;
  padding:1.2em 1.4em; margin:1.6em 0;
}
.regulatory-block p{margin:0; color:#dfe7e0}
.regulatory-block strong{color:#fff}

/* ---- Breadcrumbs ---- */
.breadcrumbs{padding:.8em 0; font-size:var(--fs-12)}
.breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:.35em; margin:0; padding:0}
.breadcrumbs li:not(:last-child)::after{content:"›"; margin-left:.35em; color:#9a9484}
.breadcrumbs a{text-decoration:none}

/* ---- Main / sections ---- */
main{display:block}
.section{padding:2.2em 0}
.card-grid{display:grid; grid-template-columns:1fr; gap:1.1em}
@media (min-width:600px){ .card-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .card-grid{grid-template-columns:repeat(4,1fr)} }
.card{
  background:#fff; border:1px solid var(--c-border); border-radius:var(--radius);
  padding:1.2em; position:relative;
}
.card::before{
  content:""; position:absolute; top:6px; left:6px; width:14px; height:14px;
  border-top:2px solid var(--c-mist); border-left:2px solid var(--c-mist); opacity:.6;
}
.card h3{margin-top:0}
.card a{text-decoration:none; font-weight:600}

.fact-row{display:flex; align-items:flex-start; gap:.8em; margin:0 0 1em}
.fact-row .fact-icon{flex:none; color:var(--c-mist)}
.fact-row strong{display:block; font-size:var(--fs-22); font-family:var(--font-head)}

/* ---- Tables ---- */
table.era-table{width:100%; border-collapse:collapse; margin:1.2em 0; font-size:var(--fs-14)}
table.era-table caption{text-align:left; font-weight:600; margin-bottom:.5em}
table.era-table th, table.era-table td{
  border:1px solid var(--c-border); padding:.6em .7em; text-align:left; vertical-align:top;
}
table.era-table thead th{background:var(--c-bg-dark); color:#fff}

/* ---- FAQ accordion ---- */
.faq-item{border-bottom:1px solid var(--c-border)}
.faq-q{
  width:100%; text-align:left; background:none; border:0; padding:1em 0;
  font-family:var(--font-head); font-size:var(--fs-18); font-weight:600; cursor:pointer;
  display:flex; justify-content:space-between; gap:1em; color:inherit;
}
.faq-q .sign{color:var(--c-accent); flex:none}
.faq-a{padding:0 0 1.1em; max-width:68ch}

/* ---- Responsible gaming strip ---- */
.rg-strip{
  background:var(--c-surface-dark); color:var(--c-text-dark);
  padding:1em 0; font-size:var(--fs-14);
}
.rg-strip .container{display:flex; flex-wrap:wrap; gap:.6em 1.4em; align-items:center; justify-content:space-between}
.rg-strip a{color:var(--c-mist); font-weight:600}

/* ---- Footer ---- */
.site-footer{background:var(--c-bg-dark); color:#c9d3cc; padding:2.4em 0 1.6em; font-size:var(--fs-14)}
.footer-grid{display:grid; grid-template-columns:1fr; gap:1.6em}
@media (min-width:600px){ .footer-grid{grid-template-columns:2fr 1fr 1fr} }
.site-footer a{color:#cfe0d6}
.site-footer .disclaimer{max-width:60ch; color:#9fb0a6; font-size:var(--fs-12); margin-top:1.4em}
.site-footer h2{font-size:var(--fs-16); color:#fff}
.site-footer ul{list-style:none; padding:0; margin:0}
.site-footer li{margin-bottom:.4em}

/* ---- Age gate dialog ---- */
.age-gate-overlay{
  position:fixed; inset:0; background:rgba(10,18,14,.72);
  display:flex; align-items:center; justify-content:center; z-index:2000; padding:1em;
}
.age-gate-box{
  background:var(--c-bg-light); color:var(--c-text-light); border-radius:12px;
  max-width:420px; width:100%; padding:1.8em; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.age-gate-box h2{font-size:var(--fs-22); margin-bottom:.5em}
.age-gate-box p{font-size:var(--fs-14); margin-bottom:1.2em}
.age-gate-actions{display:flex; gap:.8em; justify-content:center; flex-wrap:wrap}
.age-btn{
  border:0; border-radius:8px; padding:.7em 1.4em; font-weight:600; font-size:var(--fs-16); cursor:pointer;
}
.age-btn-yes{background:var(--c-accent); color:#fff}
.age-btn-no{background:#e6e1d3; color:var(--c-text-light)}

/* ---- Cookie banner ---- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:1900;
  background:var(--c-surface-dark); color:var(--c-text-dark);
  padding:1em; box-shadow:0 -6px 24px rgba(0,0,0,.25);
}
.cookie-banner .container{
  display:flex; flex-wrap:wrap; gap:1em; align-items:center; justify-content:space-between;
}
.cookie-banner p{margin:0; font-size:var(--fs-14); max-width:60ch}
.cookie-actions{display:flex; gap:.6em; flex-wrap:wrap}
.cookie-btn{border:0; border-radius:8px; padding:.6em 1.1em; font-weight:600; cursor:pointer; font-size:var(--fs-14)}
.cookie-btn-accept{background:var(--c-accent); color:#fff}
.cookie-btn-reject{background:transparent; color:var(--c-text-dark); border:1px solid #3f5a4b}

@media (max-width:599px){
  .cookie-banner .container{flex-direction:column; align-items:stretch; text-align:center}
}