@charset "utf-8";
/* ==========================================================================
   CSC @ Bukit Batok - navigation: right-hand utility block
   Figma: CSC-Menu / "New navigation bar - Clubhouses changi LATEST" (39:96)

   Scope is deliberately narrow - only the four components from the design:
     1. the gradient CTA pill          (Figma 39:114 / 39:116)
     2. Members' Portal | Be a Member  (Figma 39:115 / 39:140-39:149)
     3. CLUB & RESORTS pill            (Figma 39:191 / 38:11)
     4. CLUB & RESORTS dropdown card   (Figma 38:9)

   The rest of the navigation (logo, text links, category links and their
   mega-dropdowns) is left exactly as it is today.
   Loaded after masterpage.css / master.css so the CTA override wins.
   ========================================================================== */

:root {
    --nav-orange: #eb4534;
    --nav-maroon: #880a28;
    --nav-green-from: #9ada49;
    --nav-green-to: #58c399;
    --nav-green-hover: #57c39a;
    --nav-ddl-text: #656566;
    --nav-ddl-rule: #e5e5e5;
    --nav-font: 'Inter', 'SourceSansPro', 'OpenSans Regular', Arial, Helvetica, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Book Now button
      Geometry follows Figma 39:114 (186x41, radius 9). The fill uses the club's
      green rather than the design's orange gradient - the colours are sampled
      from btn_book.png (#9ada49 -> #58c399) and its hover state (#57c39a),
      but painted in CSS rather than by using the sprite.
   -------------------------------------------------------------------------- */

/* The top row is float-based with each cell at a fixed 16%, which totals more
   than the row can hold once the 186px pill and the utility block are in.
   Size the cells to their labels instead; the navi_dot.png separator keeps its
   place via the padding, so the links themselves look unchanged. */
#Master #Nav .navi_area #navUL.topnavi {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 60px;
    float: none;
    margin: 0;
}

#Master #Nav .navi_area #navUL.topnavi li {
    flex: 0 0 auto;
    width: auto;
    padding-right: 24px;
    background-position: right 8px center;
}

#Master #Nav .navi_area #navUL.topnavi li:nth-child(5) {
    padding-right: 16px;
}

#Master #Nav .navi_area #navUL.topnavi li.nav-cta,
#Master #Nav .navi_area #navUL.topnavi li.nav-cta:hover {
    width: auto;
    padding-right: 13px;
    background: none;
    max-width: none;
    text-align: right;
    vertical-align: middle;
}

#Master #Nav .navi_area #navUL.topnavi li.nav-cta a.navLink {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 186px;
    height: 41px;
    padding: 0 18px;
    border-radius: 9px;
    overflow: hidden;
    /* The fill is painted twice as wide as the button: the left half is the
       resting gradient, the right half the darker hover colour. Hovering slides
       the whole thing left to reveal that darker half.
       background-position interpolates continuously, so unlike a background /
       background-image swap there is no discrete flip mid-transition and so no
       flicker. */
    background-image: linear-gradient(to right,
        var(--nav-green-from) 0%,
        var(--nav-green-to) 50%,
        var(--nav-green-hover) 50%,
        var(--nav-green-hover) 100%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 0 0;
    transition: background-position .35s ease;
}

#Master #Nav .navi_area #navUL.topnavi li.nav-cta a.navLink:hover {
    background-position: 100% 0;
}

#Master #Nav .navi_area #navUL.topnavi li.nav-cta .navidiv {
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    font-family: var(--nav-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
}

/* --------------------------------------------------------------------------
   Right-hand utility column holding the two maroon pills
   -------------------------------------------------------------------------- */
/* The legacy shell gives #logo_area a fixed 40% and #nav_wrap 60%, which leaves
   no room for the pills. Lay the shell out with flexbox so the logo column
   shrinks to its artwork and the utility block gets its designed 345px.
   Only the shell changes - the links inside #nav_wrap keep their own layout. */
#Master #Nav .bg {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
    padding-right: 3%;
}

#Master #Nav #logo_area {
    order: 1;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    float: none;
    margin-right: auto;
}

#Master #Nav #nav_wrap {
    order: 2;
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
    float: none;
    padding-right: 0;
}

#Master #Nav .nav-utility {
    order: 3;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-top: 10px;
}

/* --------------------------------------------------------------------------
   2. Members' Portal | Be a Member
      Figma 39:115: 335x41, radius 8, #880a28, shadow 0 4px 5.8px rgba(0,0,0,.15)
   -------------------------------------------------------------------------- */
#Master #Nav .nav-account {
    display: flex;
    min-width: 335px;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 41px;
    padding: 0 16px;
    border-radius: 8px;
    background: var(--nav-maroon);
    box-shadow: 0 4px 5.8px rgba(0, 0, 0, .15);
}

#Master #Nav .nav-account a,
#Master #Nav .nav-account a:link,
#Master #Nav .nav-account a:visited {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--nav-font);
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
    transition: opacity .25s ease;
}

#Master #Nav .nav-account a:hover {
    color: #fff;
    opacity: .8;
}

#Master #Nav .nav-account a img {
    display: block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

#Master #Nav .nav-account .nav-account-rule {
    flex: 0 0 auto;
    width: 1px;
    height: 23px;
    background: rgba(255, 255, 255, .55);
}

/* --------------------------------------------------------------------------
   3. CLUB & RESORTS pill
      Figma 39:191: 298x41, radius 8, #880a28
   -------------------------------------------------------------------------- */
#Master #Nav .nav-club {
    position: relative;
    display: flex;
    min-width: 298px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 41px;
    margin-top: 3px;
    padding: 0 20px;
    border-radius: 8px;
    background: var(--nav-maroon);
    box-shadow: 0 4px 5.8px rgba(0, 0, 0, .15);
    font-family: var(--nav-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
}

#Master #Nav .nav-club .nav-club-icon {
    display: block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background: url(../images/nav/icon_umbrella.svg) no-repeat center;
    background-size: 18px 18px;
}

/* --------------------------------------------------------------------------
   4. CLUB & RESORTS dropdown card
      Figma 38:9: 358 wide, radius 24, shadow 0 10px 10px rgba(0,0,0,.1)
   -------------------------------------------------------------------------- */
#Master #Nav .club-ddl {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    width: 358px;
    margin-top: 20px;
    padding: 27px 0 0;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}

#Master #Nav .nav-club:hover .club-ddl,
#Master #Nav .nav-club:focus .club-ddl,
#Master #Nav .nav-club:focus-within .club-ddl,
#Master #Nav .nav-club.is-open .club-ddl {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* caret (Figma 39:187) */
#Master #Nav .club-ddl::before {
    content: "";
    position: absolute;
    top: -11px;
    right: 162px;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 12px solid #fff;
}

/* hover bridge across the 20px gap under the pill */
#Master #Nav .club-ddl::after {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
}

#Master #Nav .club-ddl .club-ddl-title {
    margin: 0 0 10px;
    padding: 0 23px;
    font-family: var(--nav-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--nav-orange);
}

#Master #Nav .club-ddl ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#Master #Nav .club-ddl ul li {
    display: block;
    float: none;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: none;
}

#Master #Nav .club-ddl ul li a,
#Master #Nav .club-ddl ul li a:link,
#Master #Nav .club-ddl ul li a:visited {
    display: flex;
    align-items: center;
    gap: 22px;
    height: 51px;
    padding: 0 23px;
    font-family: var(--nav-font);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--nav-ddl-text);
    text-decoration: none;
    text-transform: none;
    transition: background .2s ease, color .2s ease;
}

#Master #Nav .club-ddl ul li a:hover {
    background: #faf6f4;
    color: var(--nav-orange);
}

/* each clubhouse mark keeps its own designed box (Figma 39:136-39:182) */
#Master #Nav .club-ddl .club-logo {
    display: flex;
    flex: 0 0 63px;
    align-items: center;
    justify-content: flex-start;
    width: 63px;
}

#Master #Nav .club-ddl .club-logo img {
    display: block;
}

#Master #Nav .club-ddl .club-logo img.logo-bukitbatok { width: 54px; height: 30px; }
#Master #Nav .club-ddl .club-logo img.logo-changi     { width: 63px; height: 29px; }
#Master #Nav .club-ddl .club-logo img.logo-tessensohn { width: 53px; height: 29px; }
#Master #Nav .club-ddl .club-logo img.logo-loyang     { width: 36px; height: 35px; }
#Master #Nav .club-ddl .club-logo img.logo-stargames  { width: 60px; height: 20px; }
#Master #Nav .club-ddl .club-logo img.logo-events     { width: 58px; height: 22px; }

/* the clubhouse you are already on gets the tick (Figma 39:185) */
#Master #Nav .club-ddl ul li.is-current a::after {
    content: "";
    flex: 0 0 auto;
    width: 14px;
    height: 8px;
    margin: -4px 0 0 auto;
    border-left: 2px solid var(--nav-orange);
    border-bottom: 2px solid var(--nav-orange);
    transform: rotate(-45deg);
}

#Master #Nav .club-ddl .club-ddl-foot {
    margin-top: 8px;
    padding: 20px 23px 28px;
    border-top: 1px solid var(--nav-ddl-rule);
    text-align: center;
}

#Master #Nav .club-ddl .club-ddl-foot a,
#Master #Nav .club-ddl .club-ddl-foot a:link,
#Master #Nav .club-ddl .club-ddl-foot a:visited {
    font-family: var(--nav-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--nav-orange);
    text-decoration: none;
}

#Master #Nav .club-ddl .club-ddl-foot a:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Mobile push menu: same Book Now button as the desktop bar
   masterpage.css still paints this one with the old btn_book.png sprite.
   -------------------------------------------------------------------------- */
#mp-menu .mbbookbtn,
#mp-menu .mbbookbtn:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 186px;
    max-width: calc(100% - 40px);
    height: 41px;
    padding: 0 18px;
    margin: 0 auto;
    border-radius: 9px;
    font-family: var(--nav-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    /* identical fill and slide to the desktop button - see section 1 */
    background-image: linear-gradient(to right,
        var(--nav-green-from) 0%,
        var(--nav-green-to) 50%,
        var(--nav-green-hover) 50%,
        var(--nav-green-hover) 100%);
    background-repeat: no-repeat;
    background-size: 200% 100%;
    background-position: 0 0;
    transition: background-position .35s ease;
}

#mp-menu a:hover .mbbookbtn,
#mp-menu .mbbookbtn:hover {
    background-position: 100% 0;
}

/* Clubhouses & Chalets submenu: same marks as the desktop dropdown (38:9).
   The empty logo box on the last row keeps "Visit CSC Corporate Website"
   aligned with the clubhouse names above it. */
#mp-menu .mp-level ul li a.mb-club-link {
    display: flex;
    align-items: center;
    gap: 14px;
}

#mp-menu .mb-club-logo {
    display: flex;
    flex: 0 0 63px;
    align-items: center;
    justify-content: flex-start;
    width: 63px;
}

#mp-menu .mb-club-logo img {
    display: block;
}

#mp-menu .mb-club-logo img.logo-changi     { width: 63px; height: 29px; }
#mp-menu .mb-club-logo img.logo-tessensohn { width: 53px; height: 29px; }
#mp-menu .mb-club-logo img.logo-loyang     { width: 36px; height: 35px; }

/* Members' Portal / Be a Member - same maroon as the desktop pill (39:115),
   stacked as separate buttons because the combined 335px pill will not fit
   the 300px push menu. */
#mp-menu .mbmemberbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    width: 186px;
    max-width: calc(100% - 40px);
    height: 41px;
    padding: 0 14px;
    margin: 0 auto;
    border-radius: 8px;
    background: var(--nav-maroon);
    box-shadow: 0 4px 5.8px rgba(0, 0, 0, .15);
    font-family: var(--nav-font);
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .01em;
    text-transform: none;
    text-align: center;
    color: #fff;
    cursor: pointer;
    transition: opacity .25s ease;
}

#mp-menu a:hover .mbmemberbtn,
#mp-menu .mbmemberbtn:hover {
    opacity: .85;
}

#mp-menu .mbmemberbtn img {
    display: block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   Compact (scrolled) state - legacy #Master.onScroll shrink
   -------------------------------------------------------------------------- */
#Master.onScroll #Nav .nav-utility {
    padding-top: 12px;
}

#Master.onScroll #Nav .nav-account,
#Master.onScroll #Nav .nav-club,
#Master.onScroll #Nav .navi_area #navUL.topnavi li.nav-cta a.navLink {
    height: 36px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1559px) {
    #Master #Nav #logo_area img {
        width: 190px;
    }

    /* the pills may size to their labels rather than the design's fixed widths */
    #Master #Nav .nav-account,
    #Master #Nav .nav-club {
        min-width: 0;
    }

    /* the labels' 20px side padding is the biggest single saving in the row */
    #Master #Nav .navi_area #navUL.topnavi li .navidiv {
        padding-left: 12px;
        padding-right: 12px;
    }

    #Master #Nav .navi_area #navUL.topnavi li {
        padding-right: 12px;
        background-position: right 3px center;
    }

    #Master #Nav .navi_area #navUL.topnavi li:nth-child(5) {
        padding-right: 8px;
    }

    #Master #Nav .navi_area #navUL.topnavi li.nav-cta a.navLink {
        min-width: 160px;
    }
}

/* 1280 is the narrowest desktop width (masterpage.css hands over to the push
   menu at 1279). Everything below is squeezed to fit that exact width: without
   it the top row needs ~800px in a ~680px slot and spills left over the logo. */
@media only screen and (max-width: 1365px) {
    #Master #Nav .bg {
        padding-right: 20px;
    }

    #Master #Nav .nav-account a {
        gap: 6px;
        font-size: 13px;
    }

    /* the labels carry 20px of side padding each - the single biggest saving */
    #Master #Nav .navi_area #navUL.topnavi li .navidiv {
        padding-left: 8px;
        padding-right: 8px;
    }

    #Master #Nav .navi_area #navUL.topnavi li {
        padding-right: 10px;
        background-position: right 2px center;
    }

    #Master #Nav .navi_area #navUL.topnavi li:nth-child(5) {
        padding-right: 6px;
    }

    #Master #Nav .navi_area #navUL.topnavi li.nav-cta a.navLink {
        min-width: 140px;
    }
}

/* below 1280 the legacy layout hands over to the mobile push menu */
@media only screen and (max-width: 1279px) {
    #Master #Nav .bg {
        display: none;
    }

    #Master #Nav .nav-utility {
        display: none;
    }
}