/* ==================================================================
   betmica.de.com site override
   Loaded last, after base.css, style.css and theme4.css.

   Palette: deep aegean navy ground, gold accent, a cool teal second
   accent and terracotta call to action. The navigation column keeps
   the right hand position of the theme and carries a gold rail on its
   inner edge, so the shell reads differently from the sibling German
   builds at a glance.
   ================================================================== */

:root {
  --font-display: 'Georgia', 'Noto Serif', 'DejaVu Serif', serif;
  --font-body: 'Verdana', 'Noto Sans', 'DejaVu Sans', system-ui, -apple-system, sans-serif;
}

/* ---- 1. Navigation column: right, narrower, gold inner rail ------ */
@media (min-width: 1025px) {
  .wi-shell {
    grid-template-columns: 1fr 262px;
    grid-template-areas: "main sidebar";
  }
  .wi-sidebar {
    border-right: 0;
    border-left: 1px solid var(--color-border, #274058);
    box-shadow: inset 3px 0 0 rgba(226, 174, 76, 0.32);
  }
  .wi-main {
    min-width: 0;
    margin-inline: auto;
  }
}

/* ---- 2. Headings: serif, sentence case, no hyphenation ----------- */
h1, h2, h3, h4,
.hero h1,
.page-hero h1,
.wi-hero__title,
.wi-page-header h1,
.content-section h2,
.content-section h3,
.wi-seo__heading,
.wi-games-tabs__title,
.wi-deal-card__title,
.wi-offer-feed__title,
.wi-payments__title,
.wi-faq__title,
.wi-faq-item__question,
.wi-cta-banner__title,
.wi-banking__title,
.section-title,
.seo-content h2,
.seo-content h3,
.faq-accordion__question {
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0;
  word-spacing: 0.02em;
  font-weight: 700;
  hyphens: none;
}

h1, .wi-page-header h1 { line-height: 1.18; }
h2 { line-height: 1.28; }
h3 { line-height: 1.32; }

.wi-main p,
.wi-main li,
.wi-main td,
.wi-main th {
  hyphens: none;
  overflow-wrap: break-word;
  font-size: 1.01rem;
}

.wi-page-header__eyebrow,
.wi-hero__eyebrow,
.wi-footer__col-label,
.wi-sidebar__nav-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 1.05px;
}

/* ---- 3. Section headings: gold rule under the line ---------------
   The shared sheets wrap content-section headings in .container, so
   the selector has to name that wrapper to win. overflow:hidden keeps
   the heading box beside a floated figure instead of behind it.      */
.wi-main .content-section .container > h2,
.wi-main .seo-content h2 {
  padding-bottom: 10px;
  border-bottom: 3px double var(--color-accent, #e2ae4c);
  overflow: hidden;
}

/* Sub-headings inside the copy get a short terracotta bar instead. */
.wi-main .content-section .container > h3 {
  color: #f1e9db;
  padding-left: 13px;
  border-left: 3px solid var(--color-cta, #d1543c);
}

/* The centred mid-page call to action takes no rule at all. */
.wi-main .content-section.cta-banner .container > h2 {
  border-bottom: 0;
}

/* ---- 4. Supplied artwork: cool marble halo ----------------------- */
.section-illus--transparent {
  background:
    radial-gradient(116% 86% at 50% 16%, rgba(111, 183, 201, 0.11) 0%, rgba(111, 183, 201, 0) 64%);
  border-radius: 14px;
  filter: drop-shadow(0 14px 26px rgba(3, 8, 14, 0.60));
}

/* ---- 5. Hero recolour -------------------------------------------
   theme4.css sets its own gradient and eyebrow colour, restate both
   so the navy and gold palette carries through. */
.wi-hero::before {
  background: linear-gradient(
    90deg,
    rgba(8, 17, 29, 0.95) 0%,
    rgba(26, 47, 69, 0.60) 55%,
    rgba(26, 47, 69, 0.08) 100%
  );
}

.wi-hero__eyebrow {
  color: var(--color-accent, #e2ae4c);
  border-color: rgba(226, 174, 76, 0.44);
  background: rgba(226, 174, 76, 0.09);
}

/* ---- 6. Sticky bottom bar --------------------------------------- */
.sticky-cta {
  background: rgba(8, 17, 29, 0.96);
  border-top: 1px solid var(--color-border-2, #3a5b78);
}

.sticky-cta__bonus {
  text-transform: none;
  letter-spacing: 0;
}

/* ---- 7. Accent details ------------------------------------------ */
.wi-sidebar__cta a {
  color: var(--color-cta-text, #2a0c05);
}

.wi-pay {
  border-radius: 10px;
}

blockquote,
.wi-infobox {
  border-left: 3px solid var(--color-accent-secondary, #6fb7c9);
}

/* Crypto and type tags in the cashier table pick up the teal accent. */
.wi-crypto-tag {
  background: rgba(111, 183, 201, 0.15);
  border-color: rgba(111, 183, 201, 0.42);
  color: #cfe8ef;
}

/* Let the payment strip wrap where there is room, so no tile is clipped. */
@media (min-width: 900px) {
  .wi-payments__strip { flex-wrap: wrap; overflow-x: visible; row-gap: 12px; }
  .wi-payments__strip .wi-pay { flex: 0 1 auto; }
}

/* ---- 8. Comparison table: readable zebra on navy ---------------- */
.wi-main table tbody tr:nth-child(even) {
  background: rgba(31, 53, 73, 0.55);
}