/* Royal Slots brand theme.
 * Loaded after Bootstrap (main.css / responsive.css) to restyle the marketing
 * site into the game's royal red/gold identity. Cinzel is self-hosted from the
 * webclient asset set (copied into /assets/fonts by the website build). */

@font-face {
  font-family: "Cinzel";
  src: url("/assets/fonts/Cinzel-VariableWght-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url("/assets/fonts/CinzelDecorative-Bold-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --royal-bg-1: #1b0608;
  --royal-bg-2: #370c10;
  --royal-panel: rgba(38, 10, 12, 0.72);
  --royal-panel-solid: #240a0c;
  --gold: #e6c063;
  --gold-bright: #ffdd8a;
  --gold-deep: #b8860b;
  --cream: #f2e8d5;
  --border-gold: rgba(230, 192, 99, 0.45);
}

body,
body.homepage {
  background: radial-gradient(
      120% 90% at 50% 0%,
      #4a1013 0%,
      var(--royal-bg-2) 42%,
      var(--royal-bg-1) 100%
    )
    no-repeat fixed;
  color: var(--cream);
  font-family: "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
.navbar-brand,
.media-heading,
.feature-wrap h2 {
  font-family: "Cinzel Decorative", "Cinzel", Georgia, serif;
  color: var(--gold) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.5px;
}

p,
li,
.lead,
.faq-item p,
#services .lead {
  color: var(--cream) !important;
}

a {
  color: var(--gold-bright);
}
a:hover,
a:focus {
  color: #fff;
  text-decoration: none;
}

/* ---- Navigation ---------------------------------------------------------- */
.navbar-fixed-top,
.navbar.navbar-fixed-top {
  background: rgba(18, 5, 7, 0.94) !important;
  border-bottom: 2px solid var(--border-gold);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
.navbar-brand,
.navbar-header a.navbar-brand,
.navbar-fixed-top .navbar-brand {
  color: var(--gold) !important;
  font-weight: 700;
  font-size: 22px;
}
.navbar-nav > li > a {
  color: var(--cream) !important;
  font-weight: 600;
}
.navbar-nav > li > a:hover,
.navbar-nav > li.active > a {
  color: var(--gold-bright) !important;
}
.navbar-toggle .icon-bar {
  background: var(--gold) !important;
}

/* ---- Hero ---------------------------------------------------------------- */
.royal-hero {
  position: relative;
  margin: 0 0 10px;
  padding: 0;
  text-align: center;
  border-bottom: 3px solid var(--border-gold);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}
.royal-hero img {
  display: block;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
.royal-hero .royal-hero-cta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  text-align: center;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn-primary,
.btn-lg.btn-primary {
  background: linear-gradient(180deg, #f6d98a 0%, var(--gold) 45%, #a9791f 100%);
  border: 2px solid #ffe9a8;
  color: #40120a !important;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  padding: 12px 34px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(180deg, #ffe9a8 0%, var(--gold-bright) 50%, #c08a24 100%);
  color: #40120a !important;
}

/* ---- Feature cards ------------------------------------------------------- */
.feature-wrap {
  background: var(--royal-panel);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 28px 22px;
  min-height: 300px;
  /* Icon on top, text centered below — avoids the template's float:left
   * wrapping that dropped long headings and stray words below the icon. */
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-wrap h2,
.feature-wrap h4 {
  text-align: center;
  margin-right: 0;
}
.feature-wrap:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
}
.feature-wrap h2 {
  font-size: 22px;
  margin: 14px 0 8px;
}
.feature-wrap h4 {
  color: #d9c9a6 !important;
  font-size: 14px;
  line-height: 1.5;
}
.feature-img {
  max-height: 84px;
  width: auto;
}

/* ---- Kill inherited Bootstrap-template backgrounds ----------------------- */
/* The old template painted #services with a tropical bg.jpg and #feature with
 * a light-grey panel; both fight the royal gradient, so neutralise them. */
#services,
#services.service-item {
  background: transparent !important;
  margin-top: 20px;
}
#feature,
#feature.panel,
.panel {
  background: transparent !important;
  border: none;
  box-shadow: none;
}
.services-wrap {
  background: transparent !important;
}
/* WOW.js hides .wow elements until scrolled into view and animate.css can hold
 * a low-opacity keyframe; force full-opacity static content so the copy is
 * always legible for crawlers, no-JS and the ad-review surface. */
.wow,
.animated {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
  transform: none !important;
}

/* Feature icon holders: gold-rimmed royal discs instead of white ovals. The
 * template markup is <i class="feature-wrap">, so it also matches the card
 * rule above — reset the inherited card padding/min-height to keep a circle. */
.feature-wrap i {
  background: radial-gradient(circle at 50% 35%, #3a0f13 0%, #1b0608 100%) !important;
  color: var(--gold) !important;
  border: 3px solid var(--gold) !important;
  box-shadow: inset 0 0 0 4px rgba(230, 192, 99, 0.22) !important;
  width: 110px !important;
  height: 110px !important;
  min-height: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
  margin: 0 auto 18px !important;
}
.feature-wrap i:hover {
  background: radial-gradient(circle at 50% 35%, #52161b 0%, #250a0d 100%) !important;
  border-color: var(--gold-bright) !important;
  box-shadow: inset 0 0 0 4px rgba(255, 221, 138, 0.3) !important;
}
.feature-img {
  vertical-align: middle;
}
.faq-item {
  background: var(--royal-panel);
  border: 1px solid var(--border-gold);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 0 auto 16px;
  max-width: 900px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.faq-item h2 {
  font-size: 20px;
  margin: 0 0 10px;
}
.faq-item h2 a {
  color: var(--gold) !important;
}

/* ---- Section intro ------------------------------------------------------- */
#services h2,
#feature .center h1 {
  color: var(--gold) !important;
}
#feature .center h1[style],
h1[style] {
  color: var(--gold) !important;
}
.section-lead {
  max-width: 860px;
  margin: 0 auto 26px;
}

/* ---- Footer -------------------------------------------------------------- */
#footer,
#footer.midnight-blue {
  background: #160406 !important;
  border-top: 2px solid var(--border-gold);
  color: #cbb892 !important;
  padding-top: 22px;
}
#footer a {
  color: var(--gold) !important;
}
#footer center {
  color: #b9a888 !important;
  font-size: 13px;
}

/* Legal pages (privacy / terms) use their own inline styles; keep them
 * readable on the dark theme. */
.legal-doc,
.legal-doc p,
.legal-doc span,
.legal-doc li,
.legal-doc td,
.legal-doc div {
  color: var(--cream) !important;
}
.legal-doc h1,
.legal-doc h2,
.legal-doc h3,
.legal-doc b {
  color: var(--gold) !important;
}
.legal-doc a,
.legal-doc a span {
  color: var(--gold-bright) !important;
  text-decoration: underline;
}