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

   Purpose: this German site has to read differently from all six
   siblings, including the other German one at tower-casino.de.com,
   while reusing the same tested renderers.

   1. Navigation column stays on the left but sits wider, and the
      shell keeps a visible gutter rule between column and text.
   2. Display face is a serif (Palatino group). No sibling uses it:
      .to has Oswald, .bet has Georgia, .games has Trebuchet,
      tower-casino.de.com has a plain sans.
   3. Section headings carry a thick left bar and no bottom rule.
      Nothing to run behind a floated screenshot, so the block
      formatting fix that the olive site needed is not required.
   4. Wine surface, blush rose accent, crimson call to action.
   ================================================================== */

:root {
  --font-display: 'Palatino Linotype', 'Book Antiqua', Palatino, 'URW Palladio L', 'Nimbus Roman', Georgia, serif;
  --font-body: 'Segoe UI', 'Noto Sans', 'DejaVu Sans', system-ui, -apple-system, sans-serif;
}

/* ---- 1. Wider left navigation column with a gutter rule --------- */
@media (min-width: 1025px) {
  .wi-shell {
    grid-template-columns: 292px 1fr;
    grid-template-areas: "sidebar main";
  }
  .wi-sidebar {
    border-left: 0;
    border-right: 1px solid var(--color-border-2, #5f4048);
  }
  .wi-main {
    min-width: 0;
    margin-inline: auto;
  }
}

/* ---- 2. Serif display face, small caps eyebrows ----------------- */
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.004em;
  word-spacing: normal;
  font-weight: 600;
  hyphens: none;
}

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

/* German compounds run long: never break one mid-word in body copy. */
.wi-main p,
.wi-main li,
.wi-main td,
.wi-main th {
  hyphens: none;
  overflow-wrap: break-word;
}

/* Eyebrow and column labels stay in the sans face, widely tracked. */
.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.4px;
  font-size: 0.72rem;
}

/* ---- 3. Thick left bar on section headings, no bottom rule ------
   The shared sheets wrap content-section headings inside .container,
   so the child selector has to name that wrapper to win.            */
.wi-main .content-section .container > h2,
.wi-main .seo-content h2 {
  padding-left: 16px;
  border-left: 4px solid var(--color-accent, #e79aa8);
  border-bottom: 0;
}

.wi-main .content-section .container > h2::before,
.wi-main .seo-content h2::before {
  content: none;
}

/* Third level headings get a slim rose rule above instead. */
.wi-main .seo-content h3,
.wi-main .content-section .container h3 {
  padding-top: 10px;
  border-top: 1px solid var(--color-border, #3f2a30);
}

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

/* ---- 4. Supplied illustrations: soft rose halo ------------------ */
.section-illus--transparent {
  background:
    radial-gradient(116% 90% at 50% 12%, rgba(231, 154, 168, 0.10) 0%, rgba(231, 154, 168, 0) 68%);
  border-radius: 10px;
  filter: drop-shadow(0 14px 26px rgba(10, 5, 7, 0.58));
}

/* ---- 5. Hero recolour ------------------------------------------
   theme4.css hardcodes a navy gradient and a gold eyebrow, which
   fight the wine palette. Restate both. */
.wi-hero::before {
  background: linear-gradient(
    90deg,
    rgba(15, 10, 12, 0.94) 0%,
    rgba(45, 30, 34, 0.62) 52%,
    rgba(45, 30, 34, 0.14) 100%
  );
}

.wi-hero__eyebrow {
  color: var(--color-accent, #e79aa8);
  border-color: rgba(231, 154, 168, 0.42);
  background: rgba(231, 154, 168, 0.08);
}

/* ---- 6. Sticky bottom bar -------------------------------------- */
.sticky-cta {
  background: rgba(15, 10, 12, 0.95);
  border-top: 1px solid var(--color-border-2, #5f4048);
}

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

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

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

blockquote,
.wi-infobox {
  border-left: 4px solid var(--color-cta, #d02b45);
}

/* Branch markers: the running idea on this site is a condition
   followed by the next step, so unordered lists in the body copy
   get a small chevron rather than a disc or a square. */
.wi-main .seo-content ul,
.wi-main .content-section .container > ul {
  list-style: none;
  padding-left: 0;
}

.wi-main .seo-content ul > li,
.wi-main .content-section .container > ul > li {
  position: relative;
  padding-left: 26px;
}

.wi-main .seo-content ul > li::before,
.wi-main .content-section .container > ul > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--color-accent, #e79aa8);
  border-bottom: 2px solid var(--color-accent, #e79aa8);
  transform: rotate(-45deg);
}

/* ---- 8. Primary buttons use the crimson call to action ----------
   The shared theme paints these with --color-accent and dark text.
   Here the accent is a pale blush, so near white text on it would be
   unreadable. Point the filled buttons at the crimson instead and keep
   the pale rose for the outlined and hover states. */
.wi-sidebar__cta a,
.wi-hero__cta--primary,
.wi-mobile-topbar__cta,
.wi-topbar-auth__btn--solid {
  background: var(--color-cta, #d02b45);
  color: var(--color-cta-text, #fff3f5);
}

.wi-sidebar__cta a:hover,
.wi-hero__cta--primary:hover,
.wi-mobile-topbar__cta:hover,
.wi-topbar-auth__btn--solid:hover {
  background: var(--color-cta-hover, #e04159);
  color: var(--color-cta-text, #fff3f5);
}

.wi-hero__cta--primary {
  box-shadow: 0 4px 18px rgba(208, 43, 69, 0.32);
}