/*
Theme Name: Roulette King
Theme URI: https://rouletteking.uk/
Author: Roulette King
Author URI: https://rouletteking.uk/
Description: Astra child theme for rouletteking.uk. Warm paper palette (terracotta accent), soft radii, one sheet width for every block in the page flow: prose, tables, figures, tickers and the board share the same left and right rules. Owns the locale filter and the full header and footer chrome (Astra's own header and footer markup are removed, so no duplicate header and no Powered by credit can print). The header menu holds one row on desktop with a dropdown of every page in each category, and becomes a burger driven vertical list on small screens. The offer board ships its own stylesheet with the board plugin. Carries the build-time preview generator that turns every pages/*.html fragment into a full HTML file with the offer board placed straight after the hero.
Template: astra
Version: 2.4.1
Requires at least: 6.0
Tested up to: 6.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: roulette-king
*/

/* ============================================================
   Warm paper tokens. One sheet width: every block below starts
   on the sheet's left rule and ends on its right rule.
   ============================================================ */
:root {
  --rk-paper: #FBF7F0;
  --rk-paper-deep: #F5EEDF;
  --rk-ink: #241B14;
  --rk-ink-soft: #5D5346;
  --rk-terracotta: #C05B3C;
  --rk-terracotta-deep: #8F3F24;
  --rk-olive: #5E6F3D;
  --rk-olive-deep: #46522C;
  --rk-rule: #E7DCC8;
  --rk-radius: 14px;
  --rk-radius-soft: 8px;
  --rk-sheet: 72rem;
}

body {
  background: var(--rk-paper);
  color: var(--rk-ink);
}

/* the sheet: one width for everything in the flow */
.site-content .ast-container,
main .ast-container,
#primary {
  max-width: var(--rk-sheet);
}

/* ---------- page section frames from the pages plugin ---------- */
.rk-hero,
.rk-boardlead,
.rk-tablewrap,
.rk-figure,
.rk-pages-calc,
.rk-faq,
.rk-body section,
.ast-container .rk-hero,
.ast-container .rk-boardlead,
.ast-container .rk-tablewrap,
.ast-container .rk-figure,
.ast-container .rk-pages-calc,
.ast-container .rk-faq {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.rk-hero {
  background: var(--rk-paper-deep);
  border-radius: var(--rk-radius);
  padding: 2.6rem 2.4rem;
  margin-bottom: 1.4rem;
}

.rk-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--rk-terracotta-deep);
  margin: 0 0 0.7rem;
}

.rk-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.14;
  margin: 0 0 0.9rem;
  color: var(--rk-ink);
}

.rk-standfirst {
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--rk-ink-soft);
  margin: 0;
  max-width: 100%;
}

/* ---------- ranking lead-in ---------- */
.rk-boardlead {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--rk-ink-soft);
  border-left: 4px solid var(--rk-terracotta);
  background: #fff;
  border-radius: var(--rk-radius-soft);
  padding: 1rem 1.2rem;
  margin: 0 0 1.2rem;
}

/* ---------- body typography ---------- */
.rk-body section,
.rk-body p,
.rk-faq {
  font-size: 1.04rem;
  line-height: 1.68;
}

.rk-body h2 {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  margin: 2.4rem 0 1rem;
  color: var(--rk-ink);
}

.rk-body h3 {
  font-size: 1.15rem;
  margin: 1.4rem 0 0.5rem;
  color: var(--rk-ink);
}

/* ---------- data tables ---------- */
.rk-tablewrap {
  margin: 1.4rem 0 1.8rem;
}

.rk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: #fff;
  border-radius: var(--rk-radius-soft);
  overflow: hidden;
}

.rk-table th {
  text-align: left;
  background: var(--rk-terracotta);
  color: #fff;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
}

.rk-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--rk-rule);
  vertical-align: top;
}

.rk-table tr:nth-child(even) td {
  background: var(--rk-paper-deep);
}

.rk-table td:first-child {
  font-weight: 700;
  color: var(--rk-ink);
}

/* at phone width a wide table scrolls inside its own wrapper and the
   document itself never scrolls sideways */
@media (max-width: 600px) {
  .rk-tablewrap {
    overflow-x: auto;
  }
  .rk-table {
    min-width: 560px;
  }
}

/* ---------- figures ---------- */
.rk-figure {
  margin: 1.6rem 0 2rem;
  background: #fff;
  border: 1px solid var(--rk-rule);
  border-radius: var(--rk-radius-soft);
  padding: 1.2rem;
}

.rk-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rk-radius-soft);
}

.rk-figure figcaption {
  font-size: 0.88rem;
  color: var(--rk-ink-soft);
  margin-top: 0.7rem;
}

/* ---------- calculators (pages plugin) ---------- */
.rk-pages-calc {
  background: #fff;
  border: 1px solid var(--rk-rule);
  border-radius: var(--rk-radius);
  padding: 1.5rem 1.6rem;
  margin: 1.8rem 0 2.2rem;
}

.rk-pages-calc h3,
.rk-calc-title {
  margin-top: 0;
  font-size: 1.15rem;
}

.rk-calc-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  margin: 0.8rem 0;
}

.rk-calc-row label {
  flex: 1 1 220px;
  font-size: 0.92rem;
  color: var(--rk-ink-soft);
}

.rk-calc-row input[type="number"] {
  width: 100%;
  margin-top: 0.3rem;
  border: 1px solid var(--rk-rule);
  border-radius: var(--rk-radius-soft);
  padding: 0.55rem 0.7rem;
  font-size: 1rem;
  color: var(--rk-ink);
  background: var(--rk-paper);
}

.rk-calc-result {
  margin-top: 1rem;
  background: var(--rk-paper-deep);
  border-radius: var(--rk-radius-soft);
  padding: 1rem 1.2rem;
  font-size: 1.05rem;
}

.rk-calc-result strong {
  color: var(--rk-terracotta-deep);
  font-variant-numeric: tabular-nums;
}

/* ---------- FAQ ---------- */
.rk-faq h3 {
  font-size: 1.05rem;
  margin: 1.2rem 0 0.4rem;
}

.rk-faq p {
  margin: 0 0 0.6rem;
}

/* ---------- colophon ---------- */
.rk-colophon {
  margin-top: 2.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rk-rule);
  font-size: 0.9rem;
  color: var(--rk-ink-soft);
}

/* ---------- header / menu ---------- */
.rk-header {
  background: var(--rk-paper);
  border-bottom: 1px solid var(--rk-rule);
}

.rk-header__inner {
  max-width: var(--rk-sheet);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.9rem 1.4rem;
}

.rk-logo {
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--rk-ink);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.rk-logo span {
  color: var(--rk-terracotta);
}

/* burger: hidden on desktop, the only nav control at 900px and under */
.rk-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 40px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--rk-rule);
  border-radius: var(--rk-radius-soft);
  cursor: pointer;
  flex-shrink: 0;
}

.rk-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--rk-ink);
  border-radius: 2px;
}

.rk-nav {
  min-width: 0;
}

.rk-menu {
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 1.4rem;
  margin: 0;
  padding: 0;
}

/* one row on desktop and never wrapping: the labels are short, gaps and
   type tighten as the sheet narrows, and the burger takes over at 900px */
.rk-menu > li {
  position: relative;
  white-space: nowrap;
}

.rk-menu > li > a {
  color: var(--rk-ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 0;
  white-space: nowrap;
}

.rk-menu > li > a:hover,
.rk-menu > li > a:focus {
  color: var(--rk-terracotta-deep);
}

/* caret: a small border triangle that turns over when the panel opens */
.rk-caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.55;
  transition: transform 0.18s ease;
}

.rk-menu > li:hover .rk-caret,
.rk-menu > li:focus-within .rk-caret {
  transform: rotate(180deg);
}

/* dropdown panel: absolutely positioned under its entry, opened on hover
   and on keyboard focus within, scrolling rather than ever growing past
   the viewport height; shadow carries the depth, z-index stays quiet */
.rk-sub {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 30;
  background: #fff;
  border: 1px solid var(--rk-rule);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(36, 27, 20, 0.16);
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.rk-menu > li:hover > .rk-sub,
.rk-menu > li:focus-within > .rk-sub {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.rk-sub li {
  display: block;
}

.rk-sub a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--rk-ink);
  text-decoration: none;
}

.rk-sub a:hover,
.rk-sub a:focus {
  background: var(--rk-paper-deep);
}

/* the last three entries sit against the right edge of the sheet, so
   their panels open to the left instead of off the screen */
.rk-menu > li:nth-last-child(-n+3) .rk-sub {
  left: auto;
  right: 0;
}

.rk-sub__all a {
  border-top: 1px solid var(--rk-rule);
  font-weight: 700;
  color: var(--rk-terracotta-deep);
}

/* visible keyboard focus on both menu levels and the burger */
.rk-menu > li > a:focus-visible,
.rk-sub a:focus-visible,
.rk-burger:focus-visible {
  outline: 2px solid var(--rk-terracotta);
  outline-offset: 2px;
}

/* narrower desktop: smaller gaps and type so the eight entries hold one
   row with room to spare at 901px */
@media (max-width: 1180px) {
  .rk-header__inner {
    gap: 1rem;
    padding: 0.9rem 1.1rem;
  }
  .rk-logo {
    font-size: 1.15rem;
  }
  .rk-menu {
    gap: 0.7rem;
  }
  .rk-menu > li > a {
    font-size: 0.86rem;
  }
  .rk-caret {
    margin-left: 4px;
  }
}

/* mobile: the burger appears, the menu becomes a full width vertical
   list, and every dropdown renders expanded and indented, no hover
   needed; all widths stay fluid so nothing scrolls sideways */
@media (max-width: 900px) {
  .rk-burger {
    display: inline-flex;
  }
  .rk-header__inner {
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    padding: 0.75rem 1rem;
  }
  .rk-logo {
    flex: 1 1 auto;
    font-size: 1.2rem;
  }
  .rk-nav {
    display: none;
    flex-basis: 100%;
    width: 100%;
  }
  .rk-header.rk-open .rk-nav {
    display: block;
  }
  .rk-menu {
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.4rem 0 0.2rem;
    margin-top: 0.4rem;
    border-top: 1px solid var(--rk-rule);
  }
  .rk-menu > li {
    white-space: normal;
  }
  .rk-menu > li > a {
    display: block;
    padding: 0.55rem 0.15rem;
    font-size: 1rem;
  }
  .rk-caret {
    display: none;
  }
  .rk-sub {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    max-height: none;
    overflow: visible;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--rk-rule);
    border-radius: 0;
    margin: 0 0 0.4rem 1rem;
    min-width: 0;
    padding: 0.1rem 0;
    transition: none;
  }
  .rk-menu > li:nth-last-child(-n+3) .rk-sub {
    left: auto;
    right: auto;
  }
  .rk-sub a {
    padding: 0.45rem 0.8rem;
    font-size: 0.92rem;
  }
}

/* ---------- breadcrumb, contents bar, onward links ---------- */
.rk-breadcrumb {
  font-size: 0.85rem;
  color: var(--rk-ink-soft);
  margin-bottom: 0.9rem;
}

.rk-toc {
  background: #fff;
  border: 1px solid var(--rk-rule);
  border-radius: var(--rk-radius-soft);
  padding: 1rem 1.3rem;
  margin: 0 0 1.8rem;
  font-size: 0.92rem;
}

.rk-toc-title {
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.rk-toc ul {
  margin: 0;
  padding-left: 1.1rem;
}

.rk-toc a {
  color: var(--rk-terracotta-deep);
  text-decoration: none;
}

.rk-toc a:hover {
  text-decoration: underline;
}

.rk-onward {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  background: var(--rk-paper-deep);
  border-radius: var(--rk-radius-soft);
}

.rk-onward ul {
  margin: 0.4rem 0 0;
  padding-left: 1.1rem;
}

.rk-onward a {
  color: var(--rk-terracotta-deep);
  text-decoration: none;
}

.rk-onward a:hover {
  text-decoration: underline;
}

/* ---------- footer ---------- */
.rk-footer {
  border-top: 1px solid var(--rk-rule);
  background: var(--rk-paper-deep);
  margin-top: 3rem;
}

.rk-footer__inner {
  max-width: var(--rk-sheet);
  margin: 0 auto;
  padding: 2rem 1.4rem;
  font-size: 0.9rem;
  color: var(--rk-ink-soft);
}

.rk-footer a {
  color: var(--rk-terracotta-deep);
}

.rk-helpline {
  margin-top: 0.8rem;
  font-size: 0.88rem;
}

.rk-footer__copy {
  margin-top: 0.8rem;
  font-size: 0.85rem;
}

/* ============================================================
   Build-time previews. These rules exist so that the generated
   preview/ HTML files look like the finished site when opened
   from disk, without WordPress or Astra present.
   ============================================================ */
html { background: #FBF7F0; }

body {
  font-family: Georgia, "Times New Roman", serif;
  color: #241B14;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 20px;
  background: transparent;
  -webkit-text-size-adjust: 100%;
}

p { line-height: 1.68; }

.rk-header {
  background: #FBF7F0;
  border-bottom: 1px solid #E7DCC8;
  margin: 0 -20px 2rem;
}

.rk-header__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.9rem 1.4rem;
}

.rk-logo {
  font-weight: 800;
  font-size: 1.3rem;
  color: #241B14;
  text-decoration: none;
}

.rk-logo span { color: #C05B3C; }

.rk-footer {
  border-top: 1px solid #E7DCC8;
  background: #F5EEDF;
  margin: 3rem -20px 0;
  padding: 1.6rem 1.4rem;
  font-size: 0.9rem;
  color: #5D5346;
}

.rk-footer a { color: #8F3F24; }

.rk-hero {
  background: #F5EEDF;
  border-radius: 14px;
  padding: 2.6rem 2.4rem;
  margin-bottom: 1.4rem;
}

.rk-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  color: #8F3F24;
  margin: 0 0 0.7rem;
}

.rk-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  line-height: 1.14;
  margin: 0 0 0.9rem;
}

.rk-standfirst {
  font-size: 1.16rem;
  line-height: 1.6;
  color: #5D5346;
  margin: 0;
}

.rk-boardlead {
  border-left: 4px solid #C05B3C;
  background: #fff;
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin: 0 0 1.2rem;
}

.rk-breadcrumb { color: #5D5346; font-size: 0.85rem; margin-bottom: 0.9rem; }

.rk-tablewrap { overflow-x: auto; margin: 1.4rem 0 1.8rem; }

.rk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: #fff;
}

.rk-table th {
  text-align: left;
  background: #C05B3C;
  color: #fff;
  padding: 0.75rem 1rem;
}

.rk-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #E7DCC8;
  vertical-align: top;
}

.rk-figure {
  background: #fff;
  border: 1px solid #E7DCC8;
  border-radius: 8px;
  padding: 1.2rem;
  margin: 1.6rem 0 2rem;
}

.rk-figure img { display: block; width: 100%; height: auto; }

.rk-pages-calc {
  background: #fff;
  border: 1px solid #E7DCC8;
  border-radius: 14px;
  padding: 1.5rem 1.6rem;
  margin: 1.8rem 0;
}

.rk-calc-note, .rk-figure figcaption, .rk-table-note { color: #5D5346; font-size: 0.88rem; }

@media (max-width: 600px) {
  .rk-hero { padding: 1.6rem 1.2rem; }
  .rk-header__inner { gap: 1rem; padding: 0.75rem 1rem; }
  .rk-menu { gap: 0.7rem; }
}