/* Non AAMS Gioco | Component-based stylesheet. */

/* Visual values and breakpoints retained from approved design; selectors and tokens rebuilt. */


/* 01  Tokens and shared media */

:root {
  --brand-primary: #087852;
  --brand-hover: #056647;
  --text-primary: #152b34;
  --text-muted: #64747b;
  --border-soft: #dce6e2;
  --alert-color: #c43e48;
  --canvas-color: #f5f7f6;
}

img {
  max-width: 100%;
}

svg {
  display: inline-block;
}

.jump-to-content {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  background: #fff;
  padding: 12px;
}

.jump-to-content:focus {
  top: 10px;
}


/* 02  Editorial content and semantic tables */

.content-stage {
  padding: 8px 0 44px;
}

.main-article {
  min-width: 0;
}

.editorial-copy {
  line-height: 1.75;
  color: #314049;
  font-size: .985rem;
  overflow-wrap: anywhere;
}

.editorial-copy>p:first-child {
  font-size: .98rem;
  line-height: 1.55;
  margin: 0 0 12px;
  color: #3a4a53;
}

.editorial-copy h2 {
  scroll-margin-top: 90px;
  font-size: clamp(1.3rem,3.7vw,1.92rem);
  line-height: 1.22;
  letter-spacing: -.023em;
  margin: 33px 0 14px;
  color: #152b34;
}

.editorial-copy>h2:first-of-type {
  margin-top: 18px;
}

.editorial-copy h3 {
  scroll-margin-top: 90px;
  font-size: clamp(1.12rem,3vw,1.35rem);
  line-height: 1.3;
  margin: 23px 0 9px;
  color: #19353a;
}

.editorial-copy p {
  margin: 0 0 16px;
}

.editorial-copy ul,.editorial-copy ol {
  padding-left: 24px;
  margin: 0 0 20px;
}

.editorial-copy li {
  margin: 0 0 7px;
}

.editorial-copy strong {
  color: #203840;
}

.editorial-copy table {
  border-collapse: separate;
  border-spacing: 0;
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  margin: 12px 0 24px;
  font-size: .89rem;
  white-space: normal;
}

.editorial-copy table th,.editorial-copy table td {
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 12px 14px;
  min-width: 155px;
  vertical-align: top;
  text-align: left;
  line-height: 1.45;
}

.editorial-copy table th {
  background: #edf5f1;
  color: #183b35;
  font-weight: 750;
}

.editorial-copy table tr:last-child td {
  border-bottom: 0;
}

.editorial-copy table th:last-child,.editorial-copy table td:last-child {
  border-right: 0;
}

.editorial-copy table th p,.editorial-copy table td p {
  margin: 0;
}

.legal-page .editorial-copy {
  max-width: 860px;
  background: #fff;
  border: 1px solid var(--border-soft);
  padding: 20px 18px;
  border-radius: 13px;
}

.legal-page .editorial-copy h2 {
  font-size: 1.3rem;
}

.legal-page .editorial-copy h2:first-child {
  margin-top: 0;
}


/* 03  Ranked operator entries and calls to action */

.operator-rankings {
  margin: 11px 0 28px;
}

.ranking-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 9px;
  color: #5b6b73;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: .025em;
}

.operator-card {
  display: grid;
  grid-template-columns: 32px minmax(0,1fr);
  align-items: start;
  gap: 8px 11px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  padding: 13px 12px;
  box-shadow: 0 5px 21px #1d3c2d0a;
  margin: 0 0 10px;
  min-width: 0;
}

.operator-position {
  display: grid;
  place-items: center;
  background: #ecf3ef;
  color: var(--brand-primary);
  border-radius: 8px;
  font-size: .92rem;
  font-weight: 800;
  min-height: 34px;
  min-width: 32px;
  line-height: 1;
}

.operator-identity {
  display: flex;
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.operator-mark {
  position: relative;
  width: 85px;
  height: 51px;
  flex: none;
  display: grid;
  place-items: center;
  background: #f7f9f8;
  border: 1px solid #ebf0ee;
  border-radius: 8px;
  overflow: hidden;
}

.operator-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 7/3;
  padding: 2px;
}

.operator-mark-fallback {
  display: none;
  padding: 2px;
  text-align: center;
  font-size: .66rem;
  font-weight: 800;
  color: var(--brand-primary);
  line-height: 1.15;
}

.operator-mark img.img-missing {
  display: none;
}

.operator-mark img.img-missing+.operator-mark-fallback {
  display: block;
}

.operator-label {
  min-width: 0;
}

.operator-label h3 {
  margin: 0 0 3px;
  font-size: 1rem;
  line-height: 1.23;
  letter-spacing: -.01em;
}

.editorial-score {
  display: flex;
  flex-wrap: wrap;
  gap: 1px 6px;
  align-items: center;
  font-size: .76rem;
  color: #d09b30;
  line-height: 1.2;
}

.editorial-score small {
  color: #718087;
  font-size: .6rem;
  font-weight: 500;
}

.welcome-offer,.operator-highlights,.operator-action {
  grid-column: 2;
  min-width: 0;
}

.welcome-offer {
  padding-top: 1px;
}

.offer-caption {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  color: var(--brand-primary);
}

.offer-headline {
  font-size: 1rem;
  font-weight: 760;
  line-height: 1.38;
  color: #193841;
  margin: 3px 0 !important;
}

.offer-terms {
  display: flex;
  gap: 4px 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: .72rem;
  color: #6d7c82;
  margin: 2px 0 !important;
}

.offer-terms strong {
  color: #304c51;
}

.operator-highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  list-style: none;
  padding: 0 !important;
  margin: 3px 0 !important;
}

.operator-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: .76rem;
  color: #546871;
  line-height: 1.3;
  margin: 0 !important;
}

.positive-mark {
  width: 14px;
  height: 14px;
  color: #087852;
  flex: none;
  margin-top: 1px;
}

.operator-action .offer-link {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
  padding: 9px 12px;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 750;
  font-size: .88rem;
  border-radius: 9px;
  line-height: 1.15;
}

.offer-link:hover {
  background: var(--brand-hover);
}

.link-chevron {
  width: 17px;
  height: 17px;
  flex: none;
}

.operator-action p {
  font-size: .66rem;
  text-align: center;
  color: #8a989c;
  margin: 5px 0 0 !important;
}

.ranking-footnote {
  font-size: .77rem;
  color: #748389;
  line-height: 1.45;
  margin: 10px 1px 0 !important;
}

.operator-heading {
  display: contents;
}


/* 04  Editorial review media */

.review-artwork {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16/9;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 14px 0 18px;
  background: linear-gradient(145deg,#fff,#f3f8f5);
  border: 1px solid var(--border-soft);
  border-radius: 15px;
  box-shadow: 0 9px 25px rgba(21,43,52,.075);
}

.review-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 16/9;
}


/* 05  Footer and contact block */

.site-bottom {
  border-top: 1px solid var(--border-soft);
  background: #fff;
  padding: 25px 0;
}

.bottom-layout {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.site-bottom strong {
  font-size: .9rem;
}

.site-bottom p {
  font-size: .78rem;
  line-height: 1.55;
  color: #6b7b82;
  max-width: 750px;
  margin: 7px 0 0;
}

.site-bottom nav {
  display: flex;
  gap: 20px;
  align-items: center;
}

.site-bottom a {
  color: var(--brand-primary);
  font-size: .87rem;
  text-decoration: none;
  font-weight: 650;
}

.bottom-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.contact-channel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.contact-channel span {
  font-size: .74rem;
  color: var(--text-muted);
  font-weight: 700;
}

.site-bottom .contact-channel a {
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
  font-size: .81rem;
}

.site-bottom .contact-channel a:hover {
  text-decoration: underline;
}


/* 08  Responsive layout layers */

@media (min-width:600px) {
  .operator-card {
    grid-template-columns: 36px 170px minmax(0,1fr);
    gap: 12px;
    padding: 17px;
  }

  .operator-position {
    grid-column: 1;
    grid-row: 1/3;
  }

  .operator-identity {
    grid-column: 2;
    grid-row: 1/3;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .operator-mark {
    width: 142px;
    height: 70px;
  }

  .operator-label h3 {
    font-size: 1.07rem;
  }

  .welcome-offer {
    grid-column: 3;
  }

  .operator-highlights {
    grid-column: 3;
  }

  .operator-action {
    grid-column: 3;
  }

  .operator-highlights li {
    font-size: .81rem;
  }

  .offer-headline {
    font-size: 1.1rem;
  }

  .operator-action .offer-link {
    max-width: 300px;
  }

  .operator-action p {
    text-align: left;
  }

  .editorial-copy table {
    font-size: .93rem;
  }
}

@media (min-width:760px) {
  .review-artwork {
    float: right;
    width: 36%;
    max-width: 370px;
    margin: 3px 0 16px 26px;
  }

  .editorial-copy h3:has(+ .review-artwork) {
    clear: both;
  }

  .editorial-copy h2 {
    clear: both;
  }
}

@media (min-width:880px) {
  .content-stage {
    padding: 13px 0 68px;
  }

  .editorial-copy {
    font-size: 1.015rem;
    line-height: 1.75;
  }

  .editorial-copy>p:first-child {
    font-size: 1.02rem;
    line-height: 1.65;
  }

  .editorial-copy h2 {
    margin-top: 41px;
  }

  .editorial-copy>h2:first-of-type {
    margin-top: 18px;
  }

  .operator-card {
    grid-template-columns: 34px 185px minmax(200px,1fr) minmax(185px,1fr) 190px;
    align-items: center;
    gap: 15px;
    padding: 17px 18px;
  }

  .operator-position {
    grid-column: 1;
    grid-row: 1;
  }

  .operator-identity {
    grid-column: 2;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .operator-mark {
    width: 80px;
    height: 56px;
  }

  .operator-label h3 {
    font-size: 1.03rem;
  }

  .welcome-offer {
    grid-column: 3;
    grid-row: 1;
  }

  .operator-highlights {
    grid-column: 4;
    grid-row: 1;
  }

  .operator-action {
    grid-column: 5;
    grid-row: 1;
  }

  .operator-action .offer-link {
    font-size: .85rem;
  }

  .operator-action p {
    text-align: center;
  }

  .offer-headline {
    font-size: 1rem;
  }

  .operator-highlights {
    gap: 7px;
  }

  .operator-highlights li {
    font-size: .74rem;
  }

  .ranking-legend {
    font-size: .84rem;
  }

  .bottom-layout {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }

  .legal-page .editorial-copy {
    padding: 35px 45px;
  }

  .bottom-details {
    align-items: flex-end;
    text-align: right;
  }
}

@media (min-width:1080px) {
  .operator-card {
    grid-template-columns: 34px 202px minmax(210px,1fr) minmax(195px,1fr) 195px;
  }

  .operator-mark {
    width: 100px;
    height: 60px;
  }

  .operator-highlights li {
    font-size: .79rem;
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* Additional editorial pages: consistent site component styling. */
.feature-page .longread-content {
  max-width: 900px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 13px;
  padding: clamp(18px, 3vw, 32px);
  box-shadow: 0 5px 21px #1d3c2d0a;
}
.feature-page .longread-content h2:first-child {margin-top: 0;}
.feature-page .longread-content a,
.legal-page .editorial-copy a {color: var(--brand-primary);text-decoration: underline;text-underline-offset: 2px;}
.read-breadcrumb {font-size: .8rem; color: var(--text-muted);display: flex;gap: 5px;align-items: baseline;flex-wrap: wrap;margin: 0 0 12px;}
.read-breadcrumb a {color: var(--brand-primary);font-weight: 650;text-decoration: none;}
.read-breadcrumb a:hover {text-decoration: underline;}
/* Directory disclosure is present only on the root homepage. */
.has-site-directory .primary-links {min-width: 0;}
.site-directory {position: relative;min-width: 0;}
.site-directory summary {display:flex;align-items:center;gap:7px;list-style:none;cursor:pointer;color:#38505a;font-size:.83rem;text-decoration:none;font-weight:650;padding:10px 8px;border-radius:8px;white-space:nowrap;user-select:none;}
.site-directory summary::-webkit-details-marker{display:none;}
.site-directory summary:hover,.site-directory[open] summary{background:#f1f6f3;color:var(--brand-primary);}
.site-directory summary:focus-visible{outline:3px solid var(--alert-color);outline-offset:3px;}
.site-directory[open] summary span{transform:rotate(180deg);}
.site-directory-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:50;width:min(650px,calc(100vw - 32px));max-height:min(70vh,640px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--border-soft);border-radius:14px;padding:14px;background:#fff;box-shadow:0 16px 40px rgba(20,45,46,.18);}
.site-directory-panel > a{display:block;color:#314049;text-decoration:none;font-size:.85rem;border-radius:8px;padding:7px 9px;white-space:normal;}
.site-directory-group{border-top:1px solid var(--border-soft);padding-top:8px;margin-top:8px;}
.site-directory-group h2{font-size:.77rem;margin:5px 8px 7px;text-transform:uppercase;letter-spacing:.07em;color:var(--brand-primary);}
.site-directory-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:7px;}
.site-directory-list a{display:block;color:#314049;padding:8px 9px;text-decoration:none;line-height:1.4;font-size:.85rem;border-radius:8px;white-space:normal;overflow-wrap:anywhere;}
.site-directory-list a:hover,.site-directory-panel>a:hover{background:#f1f6f3;color:var(--brand-primary);}
@media (min-width:760px){.site-directory summary{font-size:.9rem;padding:12px;}}
@media (max-width:680px){.has-site-directory .masthead-row{flex-direction:column;align-items:stretch;gap:4px;padding-block:6px;}.has-site-directory .masthead-brand{align-self:flex-start;}.has-site-directory .primary-links{width:100%;flex:0 1 auto;justify-content:space-between;flex-wrap:nowrap;gap:1px;}.has-site-directory .primary-links>a,.has-site-directory .site-directory summary{font-size:.79rem;padding:8px 6px;}.site-directory-panel{position:fixed;top:110px;right:16px;left:16px;width:auto;max-height:calc(100dvh - 130px);}.site-directory-list{grid-template-columns:1fr;}}