/* ==================================================================
   norse-mania.com - site sheet, loaded last, after base.css,
   style.css and theme4.css.

   1. Steel navy ground, bronze for accents and every button, frost
      blue for secondary labels. Colours follow the bronze menu bar and
      the blue knotwork in the supplied NorseMania artwork.
   2. Marcellus SC headings over Nunito Sans body text.
   3. Each H2 carries a bronze diamond and a frost hairline below.
   4. Supplied artwork keeps its transparent background and sits on a
      soft steel glow, floated left or right of the matching text.
   ================================================================== */

:root {
  --font-display: 'Marcellus SC', 'Marcellus', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --nm-bronze-wash: rgba(208, 138, 74, 0.10);
  --nm-bronze-line: rgba(208, 138, 74, 0.38);
  --nm-frost-line: rgba(159, 211, 227, 0.26);
  --nm-row: rgba(24, 37, 52, 0.55);
}

body { background: var(--color-bg, #0c131b); }

/* ---- 1. Sidebar on the left with a bronze edge ------------------- */
@media (min-width: 1025px) {
  .wi-shell {
    grid-template-columns: 268px 1fr;
    grid-template-areas: "sidebar main";
  }
  .wi-sidebar {
    grid-column: 1;
    grid-row: 1;
    border-left: 0;
    border-right: 1px solid var(--nm-bronze-line);
    background:
      linear-gradient(180deg, rgba(24, 37, 52, 0.92) 0%, rgba(7, 11, 16, 0.98) 100%);
  }
  .wi-main { grid-column: 2; grid-row: 1; min-width: 0; margin-inline: auto; }
}

.wi-sidebar__logo-img { max-width: 210px; height: auto; }

.wi-sidebar__nav-label {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 2.4px;
  font-size: 0.62rem;
  color: var(--color-accent-secondary, #9fd3e3);
}

.wi-sidebar__nav a {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 6px;
}
.wi-sidebar__nav a.active,
.wi-sidebar__nav a:hover {
  background: var(--nm-bronze-wash);
  color: var(--color-accent-hover, #e4a266);
  box-shadow: inset 3px 0 0 var(--color-accent, #d08a4a);
}
.wi-sidebar__nav-icon { color: var(--color-accent, #d08a4a); font-size: 0.9rem; }

.wi-sidebar__cta a {
  color: var(--color-cta-text, #140c05);
  background: linear-gradient(135deg, #e4a266 0%, #d08a4a 55%, #9c6232 100%);
  font-family: var(--font-display);
  letter-spacing: 0.6px;
}
.wi-sidebar__cta-sub { color: #2a1a0b; opacity: 0.92; font-family: var(--font-body); }

/* ---- 2. Type ----------------------------------------------------- */
h1, h2, h3,
.wi-hero__h1,
.wi-page-header h1,
.wi-faq-accordion__title,
.wi-payments__title,
.cta-banner h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  hyphens: none;
}
h1, .wi-hero__h1, .wi-page-header h1 { line-height: 1.16; }
h2 { line-height: 1.28; }
h3 {
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--color-accent-secondary, #9fd3e3);
  clear: both;
}

.wi-main p, .wi-main li, .wi-main td, .wi-main th {
  font-family: var(--font-body);
  overflow-wrap: break-word;
  hyphens: none;
}
.wi-main p, .wi-main li { font-size: 0.98rem; line-height: 1.74; color: var(--color-text, #e8eef4); }
.wi-main a:not(.btn):not(.wi-hero__cta):not(.wi-topbar-auth__btn) { color: var(--color-accent-hover, #e4a266); }

/* Bronze diamond in front of each section heading, frost hairline under it */
.wi-main .content-section .container > h2 {
  position: relative;
  padding: 0 0 0.65rem 1.9rem;
  border-bottom: 1px solid var(--nm-frost-line);
}
.wi-main .content-section .container > h2::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.42em;
  width: 0.72rem;
  height: 0.72rem;
  transform: rotate(45deg);
  border: 2px solid var(--color-accent, #d08a4a);
  background: var(--nm-bronze-wash);
}

/* ---- 3. Hero ---------------------------------------------------- */
.wi-hero::before {
  background: linear-gradient(95deg, rgba(7, 11, 16, 0.9) 0%, rgba(12, 19, 27, 0.55) 55%, rgba(12, 19, 27, 0) 100%);
}
.wi-hero__eyebrow {
  color: var(--color-accent-secondary, #9fd3e3);
  border: 1px solid var(--nm-frost-line);
  background: rgba(159, 211, 227, 0.08);
  border-radius: 999px;
  font-family: var(--font-body);
  letter-spacing: 1.6px;
}
.wi-hero__h1 { color: var(--color-text, #e8eef4); font-size: clamp(28px, 3.3vw, 44px); line-height: 1.14; letter-spacing: 0.01em; }
.wi-hero__bg { filter: none; }
.wi-hero__cta--primary {
  background: linear-gradient(135deg, #e4a266 0%, #d08a4a 60%, #b8773d 100%);
  color: var(--color-cta-text, #140c05);
  border-color: transparent;
}
.wi-hero__cta--ghost { border-color: var(--nm-frost-line); color: var(--color-text, #e8eef4); }
.wi-hero__trust-dot { background: var(--color-accent, #d08a4a); }

.wi-page-header__eyebrow {
  color: var(--color-accent-secondary, #9fd3e3);
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 1.8px;
}
.wi-page-header { border-bottom: 1px solid var(--nm-bronze-line); }

/* ---- 4. Supplied artwork --------------------------------------- */
.shot {
  margin: 0 0 1.1rem;
  padding: 0;
  border-radius: 16px;
  background: radial-gradient(110% 80% at 50% 20%, rgba(159, 211, 227, 0.14) 0%, rgba(208, 138, 74, 0.07) 55%, rgba(12, 19, 27, 0) 100%);
  filter: drop-shadow(0 16px 28px rgba(3, 6, 10, 0.75));
}
.shot img { display: block; width: 100%; height: auto; }

@media (min-width: 761px) {
  .shot { width: 290px; max-width: 40%; }
  .shot--right { float: right; margin-left: 2rem; }
  .shot--left  { float: left;  margin-right: 2rem; }
}
@media (max-width: 760px) {
  .shot { width: 100%; max-width: 300px; margin-inline: auto; float: none; }
}

.wi-main .content-section .container::after { content: ""; display: block; clear: both; }
.wi-main .content-section .container > ul,
.wi-main .content-section .container > ol { display: flow-root; }

/* ---- 5. Tables -------------------------------------------------- */
.tw {
  margin: 1.4rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border-2, #2f4660);
  border-radius: 10px;
  background: rgba(18, 28, 39, 0.7);
}
.tw > table { width: 100%; margin: 0; border-collapse: collapse; min-width: 30rem; font-size: 0.93rem; }
.tw caption {
  caption-side: top;
  text-align: left;
  padding: 0.65rem 0.9rem;
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.8px;
  color: var(--color-accent-hover, #e4a266);
  background: rgba(7, 11, 16, 0.6);
  border-bottom: 1px solid var(--nm-bronze-line);
}
.tw thead th {
  text-align: left;
  padding: 0.6rem 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--color-accent-secondary, #9fd3e3);
  background: rgba(24, 37, 52, 0.8);
  border-bottom: 1px solid var(--color-border-2, #2f4660);
}
.tw tbody td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--color-border, #22344a);
  border-right: 1px solid var(--color-border, #22344a);
  vertical-align: top;
  color: var(--color-text, #e8eef4);
}
.tw tbody td:last-child { border-right: 0; }
.tw tbody tr:last-child td { border-bottom: 0; }
.tw tbody tr:nth-child(even) td { background: var(--nm-row); }
@media (max-width: 620px) {
  .tw > table { min-width: 0; font-size: 0.86rem; }
  .tw thead th, .tw tbody td { padding: 0.5rem 0.6rem; }
}

/* Step list on the promotions page */
.pairs { margin: 1.5rem 0; border: 1px solid var(--color-border-2, #2f4660); border-radius: 10px; overflow: hidden; }
.pr-row { display: grid; grid-template-columns: 9rem 1fr; border-bottom: 1px solid var(--color-border, #22344a); }
.pr-row:last-child { border-bottom: 0; }
.pr-row:nth-child(even) { background: var(--nm-row); }
.pr-row > span { padding: 0.66rem 0.9rem; font-size: 0.93rem; line-height: 1.55; }
.pr-key { color: var(--color-accent-hover, #e4a266); background: var(--nm-bronze-wash); border-right: 1px solid var(--color-border, #22344a); font-weight: 700; }
.pr-val { color: var(--color-text, #e8eef4); }
.pr-head > span { font-size: 0.72rem; letter-spacing: 1.1px; text-transform: uppercase; color: var(--color-accent-secondary, #9fd3e3); background: rgba(24, 37, 52, 0.85); font-weight: 700; }
@media (max-width: 520px) { .pr-row { grid-template-columns: 6.4rem 1fr; } }

/* Aside note */
p.aside {
  margin: 1.4rem 0;
  padding: 0.9rem 1.1rem;
  background: var(--color-surface, #121c27);
  border: 1px solid var(--nm-frost-line);
  border-left: 3px solid var(--color-accent, #d08a4a);
  border-radius: 0 10px 10px 0;
  color: var(--color-text-muted, #a3b3c4);
}

/* ---- 6. CTA banner, payments strip, FAQ ------------------------- */
.cta-banner {
  background: linear-gradient(120deg, rgba(208, 138, 74, 0.16) 0%, rgba(24, 37, 52, 0.9) 60%);
  border: 1px solid var(--nm-bronze-line);
  border-radius: 14px;
}
.cta-banner h2 { color: var(--color-text, #e8eef4); }
.cta-banner .btn--primary,
.btn--primary {
  background: linear-gradient(135deg, #e4a266 0%, #d08a4a 60%, #b8773d 100%);
  color: var(--color-cta-text, #140c05);
  border-color: transparent;
}
.cta-banner .container--narrow p { max-width: 44rem; margin-left: auto; margin-right: auto; }

.wi-payments { border-color: var(--color-border-2, #2f4660); }
.wi-payments__strip { flex-wrap: wrap; overflow: visible; row-gap: 10px; }
.wi-payments__strip .wi-pay { flex: 1 1 auto; border-radius: 8px; border-color: var(--color-border-2, #2f4660); background: var(--color-surface, #121c27); }
.wi-pay__name { color: var(--color-text, #e8eef4); }
.wi-payments__link { color: var(--color-accent-hover, #e4a266); }
@media (max-width: 520px) { .wi-payments__strip .wi-pay { min-width: 90px; } }

.wi-faq-item { border-color: var(--color-border, #22344a); }
.wi-faq-item__question { font-family: var(--font-body); font-weight: 700; color: var(--color-text, #e8eef4); }
.wi-faq-item__question[aria-expanded="true"] { color: var(--color-accent-hover, #e4a266); }
.wi-faq-chevron { color: var(--color-accent, #d08a4a); }

/* ---- 7. Top bar, mobile bar, sticky CTA ------------------------- */
.wi-topbar-auth__btn--solid,
.wi-mobile-topbar__cta {
  background: linear-gradient(135deg, #e4a266 0%, #d08a4a 100%);
  color: var(--color-cta-text, #140c05);
  border-color: transparent;
}
.wi-topbar-auth__btn--ghost,
.wi-mobile-topbar__signin { border-color: var(--nm-frost-line); color: var(--color-text, #e8eef4); }
.wi-mobile-topbar { background: rgba(7, 11, 16, 0.96); border-bottom: 1px solid var(--nm-bronze-line); }

.sticky-cta { background: rgba(7, 11, 16, 0.97); border-top: 1px solid var(--color-accent, #d08a4a); }
.sticky-cta__bonus { text-transform: none; letter-spacing: 0; color: var(--color-accent-hover, #e4a266); }
@media (max-width: 640px) {
  .sticky-cta__text > span:first-child { display: none; }
  .sticky-cta__bonus { font-size: 0.82rem; line-height: 1.25; }
  .sticky-cta__text { min-width: 0; }
  .sticky-cta .container { gap: 0.6rem; }
  .sticky-cta .btn { white-space: nowrap; }
}

.wi-footer__cols a:hover { color: var(--color-accent-hover, #e4a266); }
.content-section[id], .wi-main h2[id] { scroll-margin-top: 80px; }

@media (min-width: 1300px) { .wi-main { max-width: 1080px; } }

/* Theme 4 sets uppercase bold section titles; this site keeps Marcellus SC at its regular weight */
.wi-main .content-section h2,
.wi-main .wi-faq-accordion h2,
.wi-main .cta-banner h2,
.wi-main .wi-payments__title {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.wi-main .content-section h2 { font-size: clamp(24px, 2.3vw, 32px); }
.wi-main .content-section h3 { font-weight: 400; color: var(--color-accent-secondary, #9fd3e3); }