/* ============================================================
   CC-99 brand refresh (2026-06-20): header logo.
   New horizontal lockup (emblem + CASINO CAPYBARA wordmark) as a
   single transparent PNG. Ref: V2/Logo.png.
   ============================================================ */
.site-logo-link.cc-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    text-decoration: none;
}
.cc-emblem {
    display: block;
    width: 60px;
    height: 60px;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.cc-brand-lockup:hover .cc-emblem { transform: scale(1.05); }
.cc-wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.02;
    font-family: var(--font-display, 'Playfair Display', Georgia, serif);
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    font-size: 1.32rem;
}
.cc-wordmark span { display: block; }
@media (max-width: 768px) {
    .cc-emblem { width: 48px; height: 48px; }
    .cc-wordmark { font-size: 1.08rem; letter-spacing: 0.13em; }
}
@media (max-width: 420px) {
    .cc-emblem { width: 42px; height: 42px; }
    .cc-wordmark { font-size: 0.95rem; }
}

/* retire the old floating language globe — replaced by the in-header region dropdown */
#capy-lang-switcher { display: none !important; }

/* header region dropdown (flag + current market + chevron) */
.cv2-hdr-region { position: relative; }
/* invisible hover-bridge across the 8px gap to the menu so it doesn't disappear on mouseover */
/* hover-bridge across the gap to the menu. The menu is min-width:190px anchored
   right:0, so it overhangs the (narrower) button to the LEFT — the bridge must span
   the whole menu width, not just the button, or the dropdown drops on mouseover. */
.cv2-hdr-region::after { content: ""; position: absolute; top: 100%; right: 0; width: 220px; height: 12px; }
.cv2-hdr-region__btn { display:inline-flex; align-items:center; gap:8px; padding:7px 11px; border-radius:9px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); color:#e5e7eb; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; transition:.15s; }
.cv2-hdr-region__btn:hover { border-color:rgba(251,191,36,.45); color:#fbbf24; }
.cv2-hdr-region__chev { opacity:.7; transition:transform .18s; }
.cv2-hdr-region.is-open .cv2-hdr-region__chev { transform:rotate(180deg); }
.cv2-hdr-region__menu { position:absolute; top:calc(100% + 8px); right:0; min-width:190px; display:flex; flex-direction:column; padding:6px; border-radius:11px; border:1px solid rgba(251,191,36,.22); background:#0c1322; box-shadow:0 16px 40px rgba(0,0,0,.5); z-index:10001; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-4px); transition:opacity .14s ease, visibility .14s ease, transform .14s ease; transition-delay:.12s; }
.cv2-hdr-region.is-open .cv2-hdr-region__menu, .cv2-hdr-region:hover .cv2-hdr-region__menu { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition-delay:0s; }
.cv2-hdr-region__menu a { display:flex; align-items:center; gap:9px; padding:9px 11px; border-radius:8px; color:#cbd5e1; font-size:13px; text-decoration:none; }
.cv2-hdr-region__menu a:hover { background:rgba(251,191,36,.10); color:#fbbf24; }
.cv2-hdr-region .cv2-flag { width:20px; height:20px; flex:0 0 20px; border-radius:50%; overflow:hidden; display:inline-flex; border:1px solid rgba(255,255,255,.20); }
.cv2-hdr-region .cv2-flag svg { width:100%; height:100%; display:block; }
@media (max-width: 900px) { .cv2-hdr-region { display:none; } }

/* CC-99: align header content with the page content width so the logo doesn't drift to the far edge */
.site-header-inner { max-width: 1280px; }

/* CC-99 FP4 header: search + Claim Bonus */
.header-right { display:flex; align-items:center; gap:10px; }
.cv2-hdr-search { display:inline-grid; place-items:center; width:38px; height:38px; border-radius:9px; border:1px solid rgba(255,255,255,.12); color:#cbd5e1; text-decoration:none; }
.cv2-hdr-search svg { width:18px; height:18px; }
.cv2-hdr-search:hover { color:#fbbf24; border-color:rgba(251,191,36,.4); }
.cv2-claim-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:9px; background:linear-gradient(135deg,#22c55e,#16a34a); color:#04210f; font-weight:800; font-size:13px; text-decoration:none; white-space:nowrap; }
.cv2-claim-btn svg { width:15px; height:15px; }
.cv2-claim-btn:hover { filter:brightness(1.07); color:#04210f; }
@media(max-width:768px){ .cv2-claim-btn { padding:7px 11px; font-size:12px; } .cv2-hdr-search { display:none; } }

/* ============================================================
   Desktop primary-nav dropdowns — nav consolidation 2026-06-21.
   Casinos ▾ / Bonuses ▾ dropdowns. Scoped to #primary-menu so the mobile
   drawer (#mobile-menu, styled in site-nav.css) is untouched.
   ============================================================ */
#primary-menu > li { position: relative; }
/* caret indicator on the two parent items */
#primary-menu > li.menu-item-has-children > a { display: inline-flex; align-items: center; gap: 5px; }
#primary-menu > li.menu-item-has-children > a::after {
    content: ""; width: 6px; height: 6px; margin-left: 1px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px); opacity: .65; transition: transform .18s ease, opacity .18s ease;
}
#primary-menu > li.menu-item-has-children:hover > a::after,
#primary-menu > li.menu-item-has-children:focus-within > a::after { transform: rotate(225deg) translateY(1px); opacity: 1; }
/* invisible hover-bridge so the gap to the panel doesn't close it */
/* hover-bridge: the sub-menu is 212px and CENTERED under the (~80px) item, so it
   overhangs both sides — the bridge must be centered + as wide as the menu, not the
   item, or the dropdown drops when the mouse moves toward the outer links. */
#primary-menu > li.menu-item-has-children::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 240px; top: 100%; height: 16px; }
/* the dropdown panel */
#primary-menu .sub-menu {
    position: absolute; top: calc(100% + 11px); left: 50%; transform: translateX(-50%) translateY(6px);
    min-width: 212px; display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 7px; list-style: none;
    border-radius: 12px; border: 1px solid rgba(251,191,36,.22); background: #0c1322;
    box-shadow: 0 18px 44px rgba(0,0,0,.55);
    opacity: 0; visibility: hidden; pointer-events: none; z-index: 10001;
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease; transition-delay: .14s; /* close intent-delay */
}
#primary-menu > li.menu-item-has-children:hover > .sub-menu,
#primary-menu > li.menu-item-has-children:focus-within > .sub-menu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s;
}
#primary-menu .sub-menu li { margin: 0; }
#primary-menu .sub-menu a {
    display: block; padding: 9px 13px; border-radius: 8px; white-space: nowrap;
    color: #cbd5e1; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: background .14s, color .14s;
}
#primary-menu .sub-menu a:hover { background: rgba(251,191,36,.10); color: #fbbf24; }

/* ============================================================
   Per-market hero mascot (golden capybara + country-flag shield) on the
   regional hub (template-canada) and virtual locale homes (locale-home).
   Sits to the right, behind the hero text (which is lifted above it).
   ============================================================ */
.capy-fp-hero .capy-fp-hero-inner,
.cv2-hero .cv2-hero__inner { position: relative; z-index: 2; }
.capy-hub-hero-art {
    position: absolute; right: 2%; top: 50%; transform: translateY(-50%);
    width: clamp(210px, 30%, 410px); height: auto; pointer-events: none; z-index: 3;
    filter: drop-shadow(0 14px 36px rgba(0,0,0,.55));
}
/* keep the hero text clear of the mascot on the right */
.capy-fp-hero .capy-hero-glass { padding-right: clamp(0px, 14%, 220px); }
@media (max-width: 1024px) { .capy-hub-hero-art { width: clamp(160px, 40%, 280px); opacity: .85; } .capy-fp-hero .capy-hero-glass { padding-right: 12%; } }
@media (max-width: 720px)  { .capy-hub-hero-art { display: none; } }

/* QA fix: hover bridge across the trigger->submenu gap */
#primary-menu .sub-menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;}