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

   Palette: graphite ground, a turquoise primary accent and a warm
   brass second accent. The navigation column stays on the left and
   runs wider, headings are set in a sans face with a turquoise block
   marker, and the corners are squared off, so this build reads
   differently from the sibling German projects at a glance.
   ================================================================== */

:root {
  --font-display: 'Trebuchet MS', 'Noto Sans', 'DejaVu Sans', system-ui, sans-serif;
  --font-body: 'Tahoma', 'Noto Sans', 'DejaVu Sans', system-ui, -apple-system, sans-serif;
}

/* ---- 1. Navigation column: left, wider, turquoise inner rail ----- */
@media (min-width: 1025px) {
  .wi-shell {
    grid-template-columns: 288px 1fr;
    grid-template-areas: "sidebar main";
  }
  .wi-sidebar {
    border-left: 0;
    border-right: 1px solid var(--color-border, #333c44);
    box-shadow: inset -3px 0 0 rgba(49, 195, 180, 0.30);
  }
  .wi-main { min-width: 0; }
}

/* ---- 2. Headings: sans, tight, 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-seo__title,
.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.005em;
  font-weight: 700;
  hyphens: none;
}

h1, .wi-page-header h1 { line-height: 1.14; }
h2 { line-height: 1.22; }
h3 { line-height: 1.30; }

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

.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.3px;
}

/* ---- 3. Section headings: turquoise block marker ----------------
   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-left: 16px;
  border-left: 6px solid var(--color-accent, #31c3b4);
  overflow: hidden;
}

/* Sub-headings inside the copy get a brass underline instead. */
.wi-main .content-section .container > h3 {
  color: #f2ede2;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(201, 162, 92, 0.55);
}

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

/* ---- 4. Squared corners across the shell ------------------------- */
.wi-card,
.wi-pay,
.wi-panel,
.wi-faq-item,
.wi-banking,
.wi-seo,
.wi-games-tabs__tile,
.wi-cta-banner,
.wi-main table {
  border-radius: 4px;
}

/* ---- 5. Supplied artwork: cool turquoise halo -------------------- */
.section-illus--transparent {
  background:
    radial-gradient(112% 84% at 50% 18%, rgba(49, 195, 180, 0.13) 0%, rgba(49, 195, 180, 0) 62%);
  border-radius: 6px;
  filter: drop-shadow(0 12px 22px rgba(4, 8, 10, 0.62));
}

/* ---- 6. Hero recolour -------------------------------------------
   theme4.css sets its own gradient and eyebrow colour, restate both
   so the graphite and turquoise palette carries through. */
.wi-hero::before {
  background: linear-gradient(
    90deg,
    rgba(14, 17, 20, 0.95) 0%,
    rgba(31, 42, 46, 0.62) 52%,
    rgba(31, 42, 46, 0.06) 100%
  );
}

.wi-hero__eyebrow {
  color: var(--color-accent, #31c3b4);
  border-color: rgba(49, 195, 180, 0.44);
  background: rgba(49, 195, 180, 0.10);
  border-radius: 3px;
}

/* ---- 7. Sticky bottom bar --------------------------------------- */
.sticky-cta {
  background: rgba(14, 17, 20, 0.96);
  border-top: 1px solid var(--color-border-2, #48545e);
}

.sticky-cta__bonus {
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-accent-secondary, #c9a25c);
}

/* ---- 8. Accent details ------------------------------------------ */
.wi-sidebar__cta a {
  color: var(--color-cta-text, #06201d);
}

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

/* Crypto and type tags in the cashier table pick up the brass tone. */
.wi-crypto-tag {
  background: rgba(201, 162, 92, 0.15);
  border-color: rgba(201, 162, 92, 0.42);
  color: #ecdcbc;
}

/* 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; }
}

/* ---- 9. Tables: turquoise header rule, quiet zebra --------------- */
.wi-main table thead th {
  border-bottom: 2px solid rgba(49, 195, 180, 0.5);
}

.wi-main table tbody tr:nth-child(even) {
  background: rgba(38, 45, 51, 0.55);
}

/* ---- 12. Copy blocks with supplied artwork ------------------------
   Headings must never share a line box with a floated illustration:
   a narrow first line breaks the brass rule and the turquoise marker.
   Clearing keeps every heading on the full measure. */
.wi-main .content-section .container > h3 {
  clear: both;
}

.section-illus {
  max-width: 300px;
}

@media (max-width: 820px) {
  .section-illus {
    max-width: 320px;
  }
}