/* ============================================================
   Chrome (legacy header/footer) for casino v2 pages.
   Reproduces the site header/footer WITHOUT bootstrap.min.css /
   style.css. NOTE: this no longer matches the legacy chrome. The v2
   chrome was rebuilt (navy bar, new logo, pill nav, green CTA) while
   legacy pages still render the white header with the old logo, and
   the v2 header drops the TranslatePress language switcher. The two
   cannot be mixed on a live site, which is why the redesign ships as
   one launch.
   Deleted in phase 6 when the chrome is rebuilt on tokens.
   Targets the real markup in header.php / footer.php.
   ============================================================ */

/* ---------- Shared bits the chrome markup relies on ---------- */
/* Layout container used by the v2 nav/footer markup (and page bodies).
   Lives here, not in a page stylesheet: every v2 page needs it. */
.cv2-container {
  max-width: var(--bji-content-width);
  margin-inline: auto;
  padding-inline: var(--bji-gutter);
}

/* Button vocabulary the chrome markup uses (footer newsletter Subscribe,
   nav CTA variants). Moved from casino-v2.css so every v2 page gets it. */
.cv2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bji-space-2);
  padding: 0.8em 1.6em;
  border: 0;
  border-radius: var(--bji-radius-md);
  font: inherit;
  font-weight: var(--bji-weight-semibold);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background var(--bji-duration) var(--bji-ease), transform var(--bji-duration-fast) var(--bji-ease);
}
.cv2-btn:hover { text-decoration: none; transform: translateY(-1px); }

.cv2-btn--cta {
  background: var(--bji-cta);
  color: var(--bji-cta-text);
  box-shadow: 0 6px 16px rgb(31 162 84 / 0.35);
}
.cv2-btn--cta:hover { background: var(--bji-cta-hover); color: var(--bji-cta-text); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid transparent;
  user-select: none;
}
.btn-primary {
  background-color: #0086e4;
  border-color: #0086e4;
  color: #fff;
}
.btn-primary:hover { background-color: #0073c4; color: #fff; text-decoration: none; }

/* ---------- Navbar ---------- */
.navbar {
  margin: 0;
  border: 0;
  background-color: #f5f7f8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-inline: 15px;
  font-weight: 400;
}
.navbar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 90px;
}
.navbar-brand { display: inline-flex; align-items: center; padding: 8px 15px 8px 0; }
.navbar-brand img { max-height: 73px; width: auto; }

.navbar-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 9px 10px;
  cursor: pointer;
}
.navbar-toggle .icon-bar {
  display: block;
  background-color: #000;
  width: 35px;
  height: 3px;
  border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar { margin-top: 5px; }

.navbar-collapse { display: flex; align-items: center; }
.navbar-nav {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0 50px 0 0;
  padding: 0;
}
.navbar-nav > li { position: relative; }
.navbar-nav > li > a {
  display: block;
  padding: 41px 19px;
  color: #292a29;
  line-height: 22px;
  font-size: 16px;
  text-decoration: none;
}
.navbar-nav > li > a:focus,
.navbar-nav > li > a:hover,
.navbar-nav > .active > a,
.navbar-nav > .open > a {
  background-color: #0086e4;
  color: #fff;
  text-decoration: none;
}
.dropdown { text-transform: uppercase; }
.caret {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 100%;
  margin: 0;
  padding: 5px 0;
  list-style: none;
  background: #f5f7f8;
  box-shadow: 0 6px 12px rgb(0 0 0 / 0.18);
}
.dropdown-menu > li > a {
  display: block;
  padding: 8px 20px;
  color: #292a29;
  font-size: 14px;
  white-space: nowrap;
  text-decoration: none;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus { background-color: #0086e4; color: #fff; }

/* desktop: dropdowns open on hover/focus-within; .open supports the JS toggle */
@media (min-width: 768px) {
  .navbar-nav > li.dropdown:hover > .dropdown-menu,
  .navbar-nav > li.dropdown:focus-within > .dropdown-menu,
  .navbar-nav > li.open > .dropdown-menu { display: block; }
}

/* mobile: collapse behind the burger */
@media (max-width: 767px) {
  .navbar { display: block; }
  .navbar-toggle { display: block; }
  .navbar-collapse {
    display: none;
    width: 100%;
    padding-bottom: 10px;
  }
  .navbar-collapse.cv2-open { display: block; }
  .navbar-nav { flex-direction: column; margin: 0; }
  .navbar-nav > li > a { padding: 12px 15px; }
  .dropdown-menu {
    position: static;
    box-shadow: none;
    padding-left: 15px;
  }
  .navbar-nav > li.open > .dropdown-menu { display: block; }
}

/* ---------- Nav search (uisearch replacement: plain compact form) ---------- */
.sb-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
}
.sb-search input[type="search"],
.sb-search input[type="text"],
.sb-search .sb-search-input {
  border: 1px solid #cfd6dd;
  border-radius: 4px;
  padding: 7px 10px;
  font-size: 14px;
  width: 180px;
  background: #fff;
}
.sb-search button,
.sb-search .sb-search-submit,
.sb-search .sb-icon-search {
  background: none;
  border: 0;
  cursor: pointer;
  color: #292a29;
  font-size: 15px;
  padding: 6px;
}
@media (max-width: 767px) {
  .sb-search { margin: 8px 15px; }
  .sb-search input[type="search"], .sb-search input[type="text"], .sb-search .sb-search-input { width: 100%; }
}

/* ---------- Footer (v2 navy, footer-casino-v2.php) ---------- */
.cv2-footer {
  background: var(--bji-navy-900, #0e1638);
  color: #aab6cf;
  padding: 48px 0 24px;
  font-size: 14px;
  margin-top: var(--bji-section-gap, 4rem);
}
.cv2-footer-inner {
  max-width: 1170px;
  margin-inline: auto;
  padding-inline: 15px;
}
.cv2-footer a { color: #cdd7ea; }
.cv2-footer a:hover { color: #fff; }
.cv2-footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 32px;
}
.cv2-footer-col ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.cv2-footer-head { display: block; color: #fff; font-size: 15px; margin-bottom: 10px; }
.cv2-footer-note { margin: 0 0 14px; line-height: 1.5; }
.cv2-footer-note a { text-decoration: underline; }

/* Responsible gambling logos */
.cv2-footer-rg { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.cv2-footer-rg .rg-gamcare { height: 30px; width: auto; display: block; }
.cv2-footer-rg .rg-18plus { height: 34px; width: auto; display: block; }
.cv2-footer-rg .rg-chip {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border-radius: 6px;
  padding: 5px 10px;
}
.cv2-footer-rg .rg-bga { height: 26px; width: auto; display: block; }

/* App badge */
.cv2-footer-badge img { max-width: 160px; width: 100%; height: auto; display: block; }

/* Newsletter (inline AWeber form) */
.cv2-footer-subscribe { display: grid; gap: 8px; }
.cv2-footer-subscribe input:not([type="hidden"]) {
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--bji-radius-md, 8px);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  font: inherit;
  font-size: 14px;
}
.cv2-footer-subscribe input::placeholder { color: #8a97b5; }
.cv2-footer-subscribe input:focus {
  outline: none;
  border-color: rgb(255 255 255 / 0.5);
  background: rgb(255 255 255 / 0.12);
}
.cv2-footer-subscribe .cv2-btn { padding: 0.65em 1.2em; font-size: 14px; justify-self: start; }

.cv2-footer-fineprint {
  border-top: 1px solid rgb(255 255 255 / 0.12);
  padding-top: 20px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}
.cv2-footer-fineprint p { margin: 0; }
.cv2-footer-langs { display: flex; flex-wrap: wrap; gap: 0 8px; }
.cv2-footer-langs .is-current { color: #fff; font-weight: 600; }

@media (max-width: 1000px) {
  .cv2-footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cv2-footer-cols { grid-template-columns: 1fr; }
}

/* ---------- Sticky utility buttons ---------- */
.sticky-button { position: fixed; font-size: 20px; z-index: 1000; }
.to-top-btn {
  display: none; /* shown by JS after scroll */
  bottom: 10px;
  right: 10px;
  background-color: #dee2e6;
  border-color: #dee2e6;
  color: #6a6a6a;
}
#ask-experts-wrapper {
  text-align: center;
  padding: 5px 0;
  bottom: 0;
  left: 0; right: 0;
  width: 100%;
  background-color: #f6faff;
  box-shadow: 0 -2px 5px -2px #aaa;
  color: #333;
}
#ask-experts-wrapper a { margin-inline: 10px; }

/* (Subscribe modal shim removed 2026-07-10: the v2 footer's inline
   AWeber form replaced footer.php's #myModal on v2 pages.) */

/* ============================================================
   v2 navy nav (header-casino-v2.php) — approved Option H:
   centered pill menu, search popover, mobile sheet. NOT sticky:
   the casino page's .cv2-toc is the element that sticks and takes
   over as the persistent bar on scroll (approved mockup behavior).
   Replaces the legacy .navbar on v2 pages; the legacy navbar
   styles above are dead on v2 and get removed in the 1.5 cleanup.
   ============================================================ */
.cv2-nav {
  position: relative;
  z-index: 200;
  background: linear-gradient(180deg, var(--bji-navy-900), var(--bji-navy-950));
  border-bottom: 1px solid var(--bji-navy-700);
}
.cv2-nav-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding-block: 0.8rem;
}
.cv2-nav-logo img { height: 40px; width: auto; display: block; }

/* floating pill menu, centered (Option C's capsule on navy) */
.cv2-nav-menu {
  display: flex;
  gap: 0.25rem;
  margin: 0 auto;
  padding: 0.3rem;
  list-style: none;
  align-items: center;
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--bji-radius-pill);
}
.cv2-nav-menu > li { position: relative; }
.cv2-nav-menu > li > a {
  display: inline-block;
  padding: 0.5em 1.1em;
  border-radius: var(--bji-radius-pill);
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-medium);
  color: var(--bji-text-inverse-muted);
  text-decoration: none;
}
/* hover and current section share the solid-white pill state */
.cv2-nav-menu > li > a:hover,
.cv2-nav-menu > li.is-current > a {
  background: #fff;
  color: var(--bji-navy-900);
  box-shadow: var(--bji-shadow-sm);
}
/* caret drawn in CSS: the ▾ glyph falls back to a dot in some font stacks */
.cv2-nav-caret {
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  vertical-align: 0.18em;
  opacity: 0.55;
}

/* dropdown panels: white, hover-open, centered under their pill item
   (invisible bridge keeps the pointer path alive between bar and panel) */
.cv2-nav-menu > li::after { content: ""; position: absolute; inset: 100% 0 auto 0; height: 0.6rem; }
.cv2-nav-dd {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 210;
  display: none;
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  box-shadow: var(--bji-shadow-lg);
  margin-top: 0.5rem;
  min-width: 15rem;
  padding: 0.5rem;
  list-style: none;
}
.cv2-nav-menu li:hover > .cv2-nav-dd { display: block; }
.cv2-nav-dd a {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: var(--bji-radius-sm);
  font-size: var(--bji-text-sm);
  color: var(--bji-gray-700);
  text-decoration: none;
  white-space: nowrap;
}
.cv2-nav-dd a:hover { background: var(--bji-blue-050); color: var(--bji-blue-700); }
.cv2-nav-feature {
  display: block;
  background: linear-gradient(170deg, var(--bji-blue-050), var(--bji-surface));
  border: 1px solid var(--bji-blue-200);
  border-radius: var(--bji-radius-md);
  padding: 1rem;
  text-decoration: none;
}
.cv2-nav-feature .k { display: block; font-size: var(--bji-text-xs); color: var(--bji-text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.cv2-nav-feature .t { display: block; font-weight: var(--bji-weight-bold); color: var(--bji-navy-900); margin: 0.3rem 0 0.1rem; }
.cv2-nav-feature .s { display: block; font-size: var(--bji-text-xs); color: var(--bji-text-muted); }
/* (.cv2-nav-feature is used by the mobile sheet's Blackjack School card;
   the desktop mega menu it came from was retired with the Option H pill) */

/* actions: search + CTA + burger */
.cv2-nav-actions { display: flex; align-items: center; gap: 0.9rem; }
.cv2-nav-search-btn,
.cv2-nav-lang-btn {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 50%;
  color: #eaf2ff;
  cursor: pointer;
}
.cv2-nav-search-btn:hover,
.cv2-nav-search-btn[aria-expanded="true"],
.cv2-nav-lang-btn:hover,
.cv2-nav-lang-btn[aria-expanded="true"] { border-color: #fff; color: #fff; background: rgb(255 255 255 / 0.08); }

/* language switcher: globe button + anchored popover. Kept separate from
   the future country/geo picker (language = what you read, country = which
   casinos), which will be its own anchored-popover control. */
.cv2-nav-lang { position: relative; }
.cv2-nav-lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 210;
  margin-top: 0.5rem;
  min-width: 10rem;
  padding: 0.5rem;
  list-style: none;
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-md);
  box-shadow: var(--bji-shadow-lg);
}
.cv2-nav-lang-menu a,
.cv2-nav-lang-menu .is-current {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: var(--bji-radius-sm);
  font-size: var(--bji-text-sm);
  color: var(--bji-gray-700);
  text-decoration: none;
  white-space: nowrap;
}
.cv2-nav-lang-menu a:hover { background: var(--bji-blue-050); color: var(--bji-blue-700); }
.cv2-nav-lang-menu .is-current { font-weight: var(--bji-weight-semibold); color: var(--bji-navy-900); }
.cv2-nav-cta {
  display: inline-flex;
  align-items: center;
  padding: 0.55em 1.3em;
  border-radius: var(--bji-radius-md);
  background: var(--bji-cta);
  color: #fff;
  font-weight: var(--bji-weight-semibold);
  font-size: var(--bji-text-sm);
  text-decoration: none;
  box-shadow: 0 4px 12px rgb(31 162 84 / 0.3);
  border: 0;
  cursor: pointer;
}
.cv2-nav-cta:hover { background: var(--bji-cta-hover); color: #fff; }
.cv2-nav-burger {
  display: none;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.55rem 0.45rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
}
.cv2-nav-burger span { display: block; width: 100%; height: 2px; border-radius: 2px; background: #fff; }

/* search popover */
.cv2-nav-search { border-top: 1px solid var(--bji-navy-700); background: var(--bji-navy-950); }
.cv2-nav-search form { display: flex; gap: 0.6rem; padding-block: 0.7rem; }
.cv2-nav-search input,
.cv2-sheet-search input {
  flex: 1;
  padding: 0.55em 0.9em;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--bji-radius-md);
  background: rgb(255 255 255 / 0.06);
  color: #fff;
  font: inherit;
  font-size: var(--bji-text-sm);
}
.cv2-nav-search input::placeholder,
.cv2-sheet-search input::placeholder { color: var(--bji-text-inverse-muted); }
.cv2-nav-search input:focus,
.cv2-sheet-search input:focus { outline: 2px solid var(--bji-blue-400); border-color: transparent; }

/* mobile sheet */
.cv2-nav-sheet {
  position: fixed;
  inset: 0;
  top: var(--cv2-nav-height, 61px);
  z-index: 190;
  overflow-y: auto;
  background: var(--bji-navy-950);
  padding: 1rem var(--bji-gutter, 1rem) 2.5rem;
}
.cv2-sheet-search { display: flex; margin-bottom: 1rem; }
.cv2-nav-feature--sheet { margin-bottom: 1rem; }
.cv2-nav-sheet details { border-bottom: 1px solid var(--bji-navy-700); }
.cv2-nav-sheet summary {
  padding: 0.9rem 0.2rem;
  font-weight: var(--bji-weight-semibold);
  color: #fff;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cv2-nav-sheet summary::-webkit-details-marker { display: none; }
.cv2-nav-sheet summary::after {
  content: "";
  width: 0.45em;
  height: 0.45em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.55;
  transition: transform var(--bji-duration) var(--bji-ease);
}
.cv2-nav-sheet details[open] summary::after { transform: rotate(225deg); }
.cv2-nav-sheet details a,
.cv2-sheet-link {
  display: block;
  padding: 0.55rem 0.8rem;
  color: var(--bji-text-inverse-muted);
  font-size: var(--bji-text-sm);
  text-decoration: none;
  border-radius: var(--bji-radius-sm);
}
.cv2-nav-sheet details a:hover,
.cv2-sheet-link:hover { background: rgb(255 255 255 / 0.08); color: #fff; }
.cv2-nav-sheet details > a:last-of-type { margin-bottom: 0.6rem; }
.cv2-sheet-link {
  padding: 0.9rem 0.2rem;
  font-weight: var(--bji-weight-semibold);
  color: #fff;
  border-bottom: 1px solid var(--bji-navy-700);
  border-radius: 0;
}
/* sheet language section: current language is a non-link row */
.cv2-sheet-lang span.is-current {
  display: block;
  padding: 0.55rem 0.8rem;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-semibold);
  color: #fff;
}
body.cv2-nav-open { overflow: hidden; }

@media (max-width: 940px) {
  .cv2-nav-menu, .cv2-nav-cta, .cv2-nav-lang { display: none; }
  .cv2-nav-burger { display: flex; }
  .cv2-nav-bar { gap: 0.9rem; }
  .cv2-nav-actions { margin-left: auto; }
}