/* ==========================================================================
   Club Ambiance — top bar + navigation drawer
   --------------------------------------------------------------------------
   Everything the header needs, in one file, because two layouts render it:
   the site (layouts/master, which also loads style.css and custom.css) and the
   membership section (membership/layout/app), which loads none of those and
   would otherwise get an unstyled bar.

   That is why the .nav-toggle, .headerCard and .overlay rules below are
   repeated here from style.css rather than left there: this file has to stand
   on its own. The values are the ones style.css already used — keep them in
   step, or move them here for good.
   ========================================================================== */

/* ---------- menu trigger ----------
   Still the .nav-toggle button top-bar.js binds the drawer to, restyled into
   the pill the design asks for. style.css also has .nav-toggle rules — the old
   three-line hamburger — and turns every child <span> into a bar, so the rules
   below both draw the pill and undo that on the two spans it now holds. */
.ca-bar .nav-toggle { display: flex; align-items: center; gap: 11px; width: auto; height: 40px;
    padding: 0 16px 0 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 40px;
    background: none; cursor: pointer; flex: 0 0 auto; outline: none !important;
    transition: background .15s, border-color .15s; }
.ca-bar .nav-toggle:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .6); }

.ca-bar .nav-toggle .ca-bar__burger { position: static; display: flex; flex-direction: column;
    justify-content: center; gap: 4px; width: 20px; height: auto; margin: 0; background: none; }
.ca-bar .nav-toggle .ca-bar__burger::before,
.ca-bar .nav-toggle .ca-bar__burger::after { content: none; }
.ca-bar .nav-toggle .ca-bar__burger span { position: static; display: block; width: 20px; height: 1.6px;
    margin: 0; background: #fff; }
.ca-bar .nav-toggle .ca-bar__burger span::before,
.ca-bar .nav-toggle .ca-bar__burger span::after { content: none; }
/* The short third line is the design's, not a rendering accident. */
.ca-bar .nav-toggle .ca-bar__burger span:nth-child(3) { width: 13px; }

.ca-bar .nav-toggle .ca-bar__menuTxt { position: static; display: block; width: auto; height: auto;
    margin: 0; background: none; font-size: 12px; font-weight: 500; letter-spacing: 2.2px;
    text-transform: uppercase; color: #fff; line-height: 1; }
.ca-bar .nav-toggle .ca-bar__menuTxt::before,
.ca-bar .nav-toggle .ca-bar__menuTxt::after { content: none; }

/* ---------- drawer panel + backdrop (also in style.css, kept identical) ---------- */
.headerCard { position: fixed; top: 0; left: 0; bottom: 0; z-index: 20; width: min(400px, 90vw); background: #fff;
    transform: translate3d(-100%, 0, 0); transition: all .15s linear; }
.headerCard.open { transform: translate3d(0, 0, 0); z-index: 99999; }
.headerCard .close-card { position: absolute; top: 15px; right: 15px; cursor: pointer; z-index: 2; }
/* The backdrop top-bar.js puts in front of the page while the drawer is open.
   Its own class, not the site's generic .overlay, which is also the spinner
   backdrop inside the search suggestions. */
.ca-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 15; display: none;
    background: rgba(0, 0, 0, .6); cursor: pointer; }

/* ===================== Top bar (header) =====================
   Full-bleed black bar with the row inside held to the exact width of the
   page's .container, so the logo on the left and the language switcher on the
   right land on the same lines as the content underneath. The width rules
   below are .container's own (style.css, "1400px then fluid with a 100/60/40/20
   gutter") repeated rather than referenced — if that container is ever
   re-sized, this block has to move with it.
   .header-top .container-fluid loses its padding: the height now comes from
   .ca-bar, and .header-search still hangs off the container at top:100%, i.e.
   straight under the bar. */
.header-top .container-fluid { padding: 0; }
.header-top .h-menu-top { background: #000; }
/* The full-bleed black is on the wrapper, not on .ca-bar, which is only as wide
   as the page content — that way the bar reaches the viewport edges on the
   membership layout too, where there is no .header-top around it. */
.ca-topbar { background: #000; border-bottom: 1px solid rgba(255, 255, 255, .1); }

.ca-bar { max-width: 1400px; margin: 0 auto; padding: 0 15px; height: 96px; display: flex; align-items: center; gap: 22px;
    font-family: 'Futura', -apple-system, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
@media (max-width: 1600px) { .ca-bar { max-width: 100%; padding: 0 100px; } }
@media (max-width: 1400px) { .ca-bar { padding: 0 60px; } }
@media (max-width: 1023px) { .ca-bar { padding: 0 40px; } }
@media (max-width: 767px)  { .ca-bar { padding: 0 20px; } }
.ca-bar a { text-decoration: none; }
.ca-bar .nav-toggle { flex: 0 0 auto; margin: 0; }

.ca-bar__logo { display: flex; align-items: center; flex: 0 0 auto; }
.ca-bar__logo img { height: 46px; width: auto; display: block; }

.ca-bar__right { margin-left: auto; display: flex; align-items: center; gap: 26px; }

.ca-bar__nav { display: flex; align-items: center; gap: 30px; }
.ca-bar__nav a { color: #fff; font-size: 13px; font-weight: 500; letter-spacing: 2.2px; text-transform: uppercase; transition: opacity .15s; }
.ca-bar__nav a:hover { color: #fff; opacity: .65; }

/* The one permanent call to action in the bar. */
.ca-bar__join { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 22px;
    background: rgba(255,255,255,.12); border-radius: 40px; font-size: 13px; font-weight: 500; letter-spacing: 2.2px;
    text-transform: uppercase; color: #fff; white-space: nowrap; transition: background .15s cubic-bezier(.22,.61,.36,1), color .15s; }
.ca-bar__join:hover { background: #fff; color: #1e1d1b; }

/* Login — an icon, so the CTA above stays the only worded button in the bar. */
.ca-bar__pop { position: relative; flex: 0 0 auto; display: flex; }
.ca-bar__login { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: transparent;
    cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; transition: all .15s cubic-bezier(.22,.61,.36,1); }
.ca-bar__login:hover,
.ca-bar__pop[data-open="true"] .ca-bar__login { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }

.ca-bar__card { display: none; position: absolute; top: calc(100% + 12px); right: 0; z-index: 1000; width: 290px;
    max-height: min(560px, calc(100vh - 130px)); overflow-y: auto; background: #fff; border: 1px solid #e4e2dd;
    border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.4); text-align: left; }
.ca-bar__pop[data-open="true"] .ca-bar__card { display: block; }
.ca-bar__welcome { margin: 0; font-family: 'Montserrat', system-ui, -apple-system, sans-serif; font-weight: 800;
    font-size: 22px; line-height: 1.12; letter-spacing: -.02em; color: #1e1d1b; }
.ca-bar__sub { margin: 9px 0 16px; font-size: 13.5px; line-height: 1.5; color: #3a3a37; }
.ca-bar__btnInk { display: flex; align-items: center; justify-content: center; min-height: 48px; background: #1e1d1b;
    color: #fff; border-radius: 40px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase;
    transition: transform .15s cubic-bezier(.22,.61,.36,1); }
.ca-bar__btnInk:hover { transform: translateY(-1px); color: #fff; }
.ca-bar__or { display: flex; align-items: center; gap: 10px; margin: 16px 0 14px; }
.ca-bar__or > span:first-child,
.ca-bar__or > span:last-child { flex: 1; height: 1px; background: #e4e2dd; }
.ca-bar__orTxt { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #55524d; }
.ca-bar__social { display: flex; flex-direction: column; gap: 9px; }
.ca-bar__socialBtn { display: flex; align-items: center; gap: 11px; min-height: 46px; padding: 0 16px; background: #fff;
    color: #1e1d1b; border: 1px solid #e4e2dd; border-radius: 40px; font-size: 13.5px; font-weight: 600; transition: border-color .15s; }
.ca-bar__socialBtn:hover { border-color: #1e1d1b; color: #1e1d1b; }
.ca-bar__socialBtn svg { flex: 0 0 auto; }
.ca-bar__btnLine { display: flex; align-items: center; justify-content: center; min-height: 46px; margin-top: 14px; background: #fff;
    color: #1e1d1b; border: 1px solid #1e1d1b; border-radius: 40px; font-size: 12px; font-weight: 700; letter-spacing: 1.4px;
    text-transform: uppercase; transition: all .15s; }
.ca-bar__btnLine:hover { background: #1e1d1b; color: #fff; }

/* Search + language, paired at the far right. */
.ca-bar__tail { display: flex; align-items: center; gap: 10px; margin-left: 12px; }
.ca-bar__search { width: 34px; height: 34px; border-radius: 50%; border: none; background: none; cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center; color: #fff; transition: opacity .15s; }
.ca-bar__search:hover { opacity: .65; color: #fff; }

.ca-bar__lang { display: flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; padding: 0;
    font-family: inherit; font-size: 13px; font-weight: 500; letter-spacing: 2.2px; text-transform: uppercase;
    white-space: nowrap; color: #fff; transition: opacity .15s; }
.ca-bar__lang:hover { opacity: .65; }
.ca-bar__langCode { display: none; }
.ca-bar__chev { transition: transform .2s ease; }
.ca-bar__pop[data-open="true"] .ca-bar__chev { transform: rotate(180deg); }
.ca-bar__langMenu { display: none; position: absolute; top: calc(100% + 20px); right: -14px; z-index: 1000; min-width: 280px;
    background: #1e1d1b; border-radius: 10px; padding: 14px 0; box-shadow: 0 30px 70px -24px rgba(0,0,0,.6); }
.ca-bar__pop[data-open="true"] .ca-bar__langMenu { display: block; }
.ca-bar__langOpt { display: block; padding: 16px 30px; font-size: 15px; font-weight: 400; letter-spacing: 1.6px;
    text-transform: uppercase; color: #fff; transition: opacity .15s; }
.ca-bar__langOpt:hover { color: #fff; opacity: .65; }
.ca-bar__langOpt.is-active { color: rgba(255,255,255,.45); cursor: default; }

/* The two search icons hand over at 991px, the same breakpoint custom.css uses
   to switch .search-mb-detail on — one pixel off and both would show at once. */
@media (max-width: 991px) {
    .ca-bar__search.clc-scroll-search { display: none; }
}

/* custom.css switches the mobile icon on with `display: block !important`
   (.search-mb-detail below 991px, and below 1023px on the homepage). That wins
   over the `display: flex` above and takes the centring with it, leaving the
   19px glyph in the top-left corner of its 34px box. The two rules below put
   the flex box back on exactly the widths custom.css turns the icon on, so it
   is centred without ever appearing where it was meant to stay hidden.
   !important is what it takes to beat custom.css, which this file follows in
   the <head>; the centring itself still comes from .ca-bar__search. */
@media (max-width: 991px) {
    .ca-bar__tail .ca-bar__search.search-mb-detail { display: flex !important; }
}
@media (max-width: 1023px) {
    .page-home .ca-bar__tail .ca-bar__search.search-mb-detail { display: flex !important; }
}

/* Below 920px the bar keeps only what the brand guide asks for: menu, logo,
   the CTA and the login icon, plus the site's own mobile search icon. */
@media (max-width: 919px) {
    /* No padding here — the gutter stays whatever .container uses at this width. */
    .ca-bar { height: 72px; gap: 14px; }
    .ca-bar .nav-toggle { padding: 0 12px; }
    .ca-bar .nav-toggle .ca-bar__menuTxt { display: none; }
    .ca-bar__logo img { height: 32px; }
    .ca-bar__nav { display: none; }
    .ca-bar__right { gap: 14px; }
    .ca-bar__tail { margin-left: 0; gap: 6px; }
    .ca-bar__lang { font-size: 12px; letter-spacing: 1.4px; gap: 6px; }
    .ca-bar__langFull { display: none; }
    .ca-bar__langCode { display: inline; }
    .ca-bar__langMenu { min-width: 220px; right: -8px; }
    .ca-bar__card { width: min(290px, calc(100vw - 32px)); }
    .ca-bar__join { min-height: 38px; padding: 0 16px; font-size: 11px; letter-spacing: 1.4px; }
}
/* On a phone the CTA is what gives up its place, not the language switcher.
   "Lid worden" has a second way in — the drawer's own button points at the same
   route('membership') — while a visitor dropped on the wrong language has no
   other way back, so the switcher has to stay reachable from the bar itself.
   It is the last child of .ca-bar__tail, which is the last thing in the row, so
   simply showing it again lands it at the far right on its own. */
@media (max-width: 479px) {
    .ca-bar { gap: 10px; }
    .ca-bar__right { gap: 10px; }
    .ca-bar__logo img { height: 26px; }
    .ca-bar__join { display: none; }
    /* Back to the flex the base rule gives it, not `block`: the code and the
       chevron sit side by side. */
    .ca-bar__lang { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
    .ca-bar *, .ca-bar__card * { transition: none !important; }
}

/* ===================== Drawer (headerCard) — accordion nav ===================== */
.headerCard .ca-drawer { display: flex; flex-direction: column; height: 100%; background: #fff; color: #1e1d1b; }
.headerCard .ca-drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 22px 30px; background: #1e1d1b; flex: 0 0 auto; }
.headerCard .ca-drawer__logo img { height: 24px; display: block; }
.headerCard .ca-drawer__close { position: static; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.24); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.headerCard .ca-drawer__close:hover { background: rgba(255,255,255,0.1); }
.headerCard .ca-drawer__nav { flex: 1 1 auto; overflow-y: auto; padding: 14px 30px 20px; }
.headerCard .ca-sec { border-bottom: 1px solid #e4e2dd; }
.headerCard .ca-sec__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 22px 0; margin: 0; background: none; border: 0; -webkit-appearance: none; appearance: none; box-shadow: none; text-align: left; color: #1e1d1b; cursor: pointer; text-decoration: none; }
.headerCard .ca-sec__head:hover { opacity: .6; color: #1e1d1b; }
.headerCard .ca-sec__head:focus,
.headerCard .ca-sec__head:focus-visible,
.headerCard .ca-sec__head:active { outline: none; box-shadow: none; border: 0; }
.headerCard .ca-sec__head span { font-family: 'Montserrat', system-ui, sans-serif; font-weight: 700; font-size: 21px; line-height: 1.1; letter-spacing: -0.01em; }
.headerCard .ca-sec__head--desc { align-items: flex-start; }
.headerCard .ca-sec__label { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.headerCard .ca-sec__desc { display: block; font-family: 'Montserrat', system-ui, sans-serif; font-weight: 400; font-size: 15px; line-height: 1.35; letter-spacing: 0; color: #8a8a8a; }
.headerCard .ca-sec__chev { flex: 0 0 auto; transition: transform .25s ease; }
.headerCard .ca-sec__head--desc .ca-sec__chev { margin-top: 2px; }
.headerCard .ca-sec.is-open .ca-sec__chev { transform: rotate(90deg); }
.headerCard .ca-sec.is-open .ca-sec__chev--ext { transform: none; }
.headerCard .ca-sec__body { max-height: 0; overflow: hidden; transition: max-height .32s ease; }
.headerCard .ca-sec.is-open .ca-sec__body { max-height: 640px; }
.headerCard .ca-sec__link { display: block; padding: 11px 0; font-family: 'Montserrat', system-ui, sans-serif; font-size: 15px; color: #4a4a4a; text-decoration: none; }
.headerCard .ca-sec__link:first-child { padding-top: 4px; }
.headerCard .ca-sec__link:last-child { padding-bottom: 22px; }
.headerCard .ca-sec__link:hover { color: #1e1d1b; }
.headerCard .ca-drawer__cta { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 20px 30px 28px; border-top: 1px solid #e4e2dd; }
.headerCard .ca-drawer__cta a { display: flex; align-items: center; justify-content: center; min-height: 50px; background: #1e1d1b; color: #fff; border: 1px solid #1e1d1b; border-radius: 40px; font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; transition: transform .15s; }
.headerCard .ca-drawer__cta a:hover { transform: translateY(-1px); color: #fff; }
.headerCard .ca-drawer__cta .ca-login { background: #fff; color: #1e1d1b; }
.headerCard .ca-drawer__cta .ca-login:hover { color: #1e1d1b; background: #f4f2ee; }
.headerCard .ca-user { display: flex; align-items: center; gap: 14px; padding: 20px 30px; background: #1e1d1b; color: #fff; }
.headerCard .ca-user .img-user img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.headerCard .ca-user .name-user-eiy { font-size: 15px; line-height: 1.3; }
.headerCard .ca-account { list-style: none; margin: 0; padding: 10px 30px 0; }
.headerCard .ca-account li a { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #e4e2dd; color: #1e1d1b; text-decoration: none; }
.headerCard .ca-account li a img { width: 22px; height: 22px; }