/* ==========================================================================
   PayPeak Casinos — navigation, byline and casino review pages
   Loaded after style.css. Mobile-first; desktop rules live in min-width media queries.
   1. Header navigation
   2. Byline, card and footer links
   3. Breadcrumbs
   4. Review header card
   5. Pros and cons
   6. Key facts list
   7. Review article body
   8. Jump links, author box, related reviews
   ========================================================================== */

/* 1. Header navigation ---------------------------------------------------- */
.header { position: sticky; top: 0; }
/* Mobile: logo on the left, Casinos menu on the right, same row */
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h); padding-block: 8px;
}
.nav { display: flex; justify-content: flex-end; align-items: center; }

/* Desktop: logo centred as in the original, Casinos menu on the right */
@media (min-width: 900px) {
  .header__inner {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    min-height: 88px; padding-block: 0;
  }
  .brand { grid-column: 2; }
  .nav { grid-column: 3; justify-self: end; }
}
.nav__link,
.nav__dd > summary {
  display: inline-flex; align-items: center;
  font-family: var(--f-display); font-weight: 700; font-size: .92rem; line-height: 1.2;
  color: var(--ink-soft); text-decoration: none; cursor: pointer; list-style: none;
  padding: 9px 12px; border-radius: 999px;
}
.nav__link:hover,
.nav__dd > summary:hover,
.nav__dd[open] > summary { color: var(--neon); background: rgba(87, 240, 58, .08); }
.nav__dd > summary::-webkit-details-marker { display: none; }
.nav__dd > summary::after {
  content: ""; width: 7px; height: 7px; margin-left: 9px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .2s ease;
}
.nav__dd[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }
.nav__dd { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  z-index: 120; width: min(300px, calc(100vw - 36px));
  display: grid; gap: 4px; padding: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m);
  box-shadow: var(--glow-s), 0 18px 40px rgba(0, 0, 0, .5);
}
.nav__panel a {
  display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: center;
  padding: 8px; border-radius: 12px; color: var(--ink); text-decoration: none;
}
.nav__panel a:hover { background: rgba(87, 240, 58, .08); color: var(--ink); }
.nav__panel img { width: 60px; border-radius: 8px; border: 1px solid var(--line-2); }
.nav__panel strong { display: block; font-family: var(--f-display); font-weight: 700; font-size: .98rem; color: #fff; }
.nav__panel small { display: block; font-size: .78rem; color: var(--ink-mute); line-height: 1.3; }

/* 2. Byline, card and footer links --------------------------------------- */
.byline { margin: 14px auto 0; font-size: .9rem; color: var(--ink-mute); text-align: center; max-width: none; }
.byline strong { color: var(--ink-soft); }
.c-card__review { font-size: .86rem; font-weight: 700; color: var(--neon); text-decoration: none; }
.c-card__review:hover { color: var(--neon-bright); text-decoration: underline; }
.footer__links { font-size: .92rem; margin: 0; }
.footer__links a { color: var(--ink-soft); }

/* 3. Breadcrumbs ---------------------------------------------------------- */
.crumbs { padding-top: 24px; font-size: .84rem; color: var(--ink-mute); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; max-width: none; }
.crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--neon); }
.crumbs [aria-current] { color: var(--ink); }

/* 4. Review header card --------------------------------------------------- */
.rv-head {
  margin-top: 16px; display: grid; gap: 18px; justify-items: center; text-align: center;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid rgba(87, 240, 58, .3); border-radius: var(--radius-l);
  padding: 26px 18px 22px; box-shadow: var(--glow-s);
}
.rv-head__title { display: grid; gap: 8px; justify-items: center; }
.rv-title { font-size: clamp(1.7rem, 5vw, 2.4rem); line-height: 1.12; margin: 0; max-width: 24ch; text-align: center; }
.rv-by { margin: 0; font-size: .9rem; color: var(--ink-mute); max-width: none; }
.rv-head__logo {
  width: 100%; max-width: 320px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2); line-height: 0;
}
.rv-head__logo img { width: 100%; }
.rv-head__block { display: grid; gap: 6px; justify-items: center; }
.rv-head__label {
  font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute);
}
.rv-score {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-display); font-weight: 800; font-size: 2.3rem; line-height: 1; color: #fff;
}
.rv-score small { font-size: 1.05rem; color: var(--ink-mute); font-weight: 700; }
.rv-score svg { width: 24px; height: 24px; color: #FFC53D; margin-right: 6px; }
.rv-offer {
  font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; line-height: 1.25;
  color: var(--neon-bright); margin: 0; max-width: 24ch;
}
.rv-promo { font-size: .84rem; color: var(--ink-mute); margin: 0; max-width: none; }
.rv-head__cta { display: grid; gap: 8px; width: 100%; max-width: 300px; }
.rv-head__cta .c-card__terms { text-align: center; }

@media (min-width: 900px) {
  .rv-head {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr) 200px;
    align-items: center; text-align: left; gap: 22px 26px; padding: 28px 26px;
  }
  .rv-head__title { grid-column: 1 / -1; text-align: center; }
  .rv-head__logo { max-width: none; }
  .rv-head__block { justify-items: center; text-align: center; }
  .rv-head__block--divider { border-left: 1px solid var(--line); padding-left: 26px; }
  .rv-head__cta { justify-self: center; }
}

/* 5. Pros and cons -------------------------------------------------------- */
.pc-grid { display: grid; gap: 16px; margin: 0 0 30px; }
.pc-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 18px 16px;
}
.pc-box--pro { border-color: rgba(87, 240, 58, .3); }
.pc-box--con { border-color: rgba(255, 107, 107, .3); }
.pc-box h2 { font-size: 1.2rem; text-align: left; margin-bottom: 12px; }
.pc-box ul { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: 9px; }
.pc-box li {
  display: flex; gap: 10px; align-items: flex-start; margin: 0;
  font-size: .94rem; color: var(--ink-soft); text-align: left;
}
.pc-box li svg { width: 17px; height: 17px; flex: none; margin-top: 4px; }
.pc-box--pro li svg { color: var(--neon); }
.pc-box--con li svg { color: #FF6B6B; }
@media (min-width: 700px) { .pc-grid { grid-template-columns: 1fr 1fr; } }

/* 6. Key facts list ------------------------------------------------------- */
.kv {
  margin: 0 0 30px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); overflow: hidden;
}
.kv__row {
  display: grid; gap: 4px; padding: 13px 16px; border-top: 1px solid var(--line-2); text-align: left;
}
.kv__row:first-child { border-top: 0; }
.kv dt { font-family: var(--f-display); font-weight: 700; color: #fff; font-size: .95rem; }
.kv dd { margin: 0; font-size: .94rem; color: var(--ink-soft); }
@media (min-width: 700px) {
  .kv__row { grid-template-columns: 210px 1fr; gap: 18px; align-items: start; }
}

/* 7. Review article body -------------------------------------------------- */
.rv-article { max-width: 780px; margin-inline: auto; }
.rv-article h2 {
  text-align: left; font-size: clamp(1.4rem, 3.6vw, 1.85rem);
  margin: 1.7em 0 .5em; scroll-margin-top: 24px;
}
.rv-article h3 { text-align: left; font-size: 1.15rem; margin: 1.4em 0 .4em; }
.rv-article p, .rv-article ul, .rv-article ol { max-width: none; }
.rv-note {
  font-size: .92rem; color: var(--ink-soft); margin: 0 0 1.3em; max-width: none;
  padding: 12px 16px; background: rgba(87, 240, 58, .05);
  border-left: 3px solid rgba(87, 240, 58, .5); border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.rv-article .faq { margin-top: 10px; }

/* 8. Jump links, author box, related reviews ------------------------------ */
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 30px; }
.jump a {
  font-size: .84rem; font-weight: 700; padding: 8px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none;
}
.jump a:hover { color: var(--neon); border-color: rgba(87, 240, 58, .45); }

.rv-author {
  display: flex; gap: 14px; align-items: center; max-width: 780px; margin: 10px auto 30px;
  padding: 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); text-align: left;
}
.rv-author__mark {
  flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(87, 240, 58, .12); border: 1px solid rgba(87, 240, 58, .35);
  color: var(--neon); font-family: var(--f-display); font-weight: 800;
}
.rv-author p { margin: 0; font-size: .92rem; max-width: none; }
.rv-author strong { display: block; color: #fff; font-family: var(--f-display); font-size: 1rem; }

.related { display: grid; gap: 12px; max-width: 780px; margin: 0 auto 30px; }
.related a {
  display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-m); padding: 16px 18px; color: var(--ink-soft);
}
.related a:hover { border-color: rgba(87, 240, 58, .45); box-shadow: var(--glow-s); color: var(--ink-soft); }
.related strong { display: block; font-family: var(--f-display); color: #fff; font-size: 1.02rem; margin-bottom: 4px; }
.related span { font-size: .88rem; }
@media (min-width: 700px) { .related { grid-template-columns: 1fr 1fr; } }

/* 9. Sticky header: keep anchored sections clear of it ------------------- */
[id] { scroll-margin-top: 150px; }
@media (min-width: 900px) { [id] { scroll-margin-top: 110px; } }

/* 10. Sticky mobile call-to-action bar ------------------------------------ */
.m-cta { display: none; }
@media (max-width: 899px) {
  body { padding-bottom: 92px; }
  .m-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 110;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(5, 11, 7, .96); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(87, 240, 58, .3);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
  }
  .m-cta__text { display: grid; min-width: 0; line-height: 1.25; }
  .m-cta__text strong { font-family: var(--f-display); font-size: .95rem; color: #fff; }
  .m-cta__text span {
    font-size: .76rem; color: var(--ink-mute);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .m-cta .btn { flex: none; }
}