/* 0.0 Font Import - disabled for now */
/* @import url("fonts.css"); */

/*------------------------------------------------------------------
[TABLE OF CONTENTS]
0.0 Font Import
1. General Styles
    1.1 Reset Styles
    1.2 Branding Styles
    1.3 Buttons
2. UI Styles
    2.1 Font Sizes
    2.2 Navigation
    2.3 Membership Card
    2.4 Account Settings
        2.4.1 Account Settings Sidebar
3. Component Styles
    3.1 Grid-cols-3
    3.2 Post Card
    3.1 Grid-cols-3-links
5. Temp Styles
    5.1 Cancel override for /member/account
------------------------------------------------------------------*/


/* 1. GENERAL STYLES */

/* 1.1 Reset Styles */

#membership-dashboard .btn-reset,
#membership-account-settings .btn-reset,
#membership-landing .membership-info .btn-reset {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
    color: var(--rom-primary);
    font-weight: 400;
}

/* 1.2 Branding Styles */
:root {
    --rom-primary: #000;
    --rom-standout: #E39300;
    --grey-bg: #F5F5F5; 
    --grey-stroke: #d9d9d9;
    --grey-text: #707070;


    --main-font: 'ABC Monument Grotesk', Arial, sans-serif;
    --heading-font: 'ROM Coign', Arial, sans-serif;

    --line-height-regular: 1.25rem;

    --font-size-h1: 12.5rem; /* 200px */
    --font-size-h2: 8.5rem; /* 136px */
    --font-size-h3: 5.5rem; /* 88px */
    --font-size-h4: 4.5rem; /* 72px */
    --font-size-h5: 3rem; /* 48px */
    --font-size-h7: 1.375rem; /* 22px */
    --font-size-h9: 0.8125rem; /* 13px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-md: 0.875rem; /* 14px */
    --font-size-sm: 0.75rem; /* 12px */

    @media (max-width: 992px) {
        --font-size-h1: 6.5rem; /* 104px */
        --font-size-h2: 5.5rem; /* 88px */
        --font-size-h3: 4.5rem; /* 64px */
        --font-size-h4: 3.5rem; /* 56px */
        --font-size-h5: 1.125rem; /* 18px */
        --font-size-h7: 1.125rem; /* 18px */
        --font-size-h9: 0.6875rem; /* 11px */
    }

    --border-light: 1px solid var(--grey-stroke);
    --border-normal: 1px solid var(--rom-primary);

    --transition-normal: all 300ms cubic-bezier(0.4, 0, 0.2, 1);

    --icon-arrow-16: url("/image/icons/arrow-right-16.svg");
    --icon-arrow-24: url("/image/icons/arrow-right-24.svg");
    --icon-chevron-down-16: url("/image/icons/chevron-down-16.svg");
    --icon-search-16: url("/image/icons/search-16.svg");
}

/* 1.3 Buttons */
#membership-dashboard .btn-rom-primary,
#membership-account-settings .btn-rom-primary {
    background-color: var(--rom-primary);
    border: var(--border-normal);
    padding: 18px 30px;
    font-size: var(--font-size-h9);
    font-weight: 500;
    text-transform: uppercase;
    color: #fff;
    transition: var(--transition-normal);
    &:hover, &:focus {
        background-color: #fff;
        color: var(--rom-primary);
    }
}

#membership-dashboard .btn-rom-secondary,
#membership-account-settings .btn-rom-secondary {
    background-color: #fff;
    border: var(--border-normal);
    padding: 18px 30px;
    font-size: var(--font-size-h9);
    font-weight: 500;
    text-transform: uppercase;
    color: var(--rom-primary);
    transition: var(--transition-normal);
    &:hover, &:focus {
        background-color: var(--rom-primary);
        color: #fff;
    }
}

#membership-dashboard .btn-link,
#membership-account-settings .btn-link,
#membership-landing .membership-info .btn-link {
    text-decoration: underline;
    &:focus {
        outline: solid 2px var(--rom-primary);
        border-radius: 3px;
    }
}

/* 2. UI Styles */

/* 2.1 Font Sizes */
#membership-dashboard,
#membership-account-settings,
#membership-landing .membership-info {
    h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
        font-family: var(--heading-font);
        text-transform: uppercase;
        font-weight: 400;
        line-height: 80%;
        margin-bottom: 20px;
    }

    h1, .h1 {
        font-size: var(--font-size-h1);
        line-height: var(--font-size-h1);
    }

    h2, .h2 {
        font-size: var(--font-size-h2);
        line-height: var(--font-size-h2);
    }

    h3, .h3 {
        font-size: var(--font-size-h3);
        line-height: var(--font-size-h3);
    }

    h4, .h4 {
        font-size: var(--font-size-h4);
        line-height: var(--font-size-h4);
    }

    h5, .h5 {
        font-size: var(--font-size-h5);
        line-height: var(--font-size-h5);
        font-weight: 500;
    }

    h7, .h7 {
        font-size: var(--font-size-h7);
        line-height: var(--font-size-h7);
        font-weight: 500;
    }

    h8, .h8 {
        font-size: var(--font-size-h7);
        line-height: var(--font-size-h7);
        font-weight: 400;
    }

    h9, .h9 {
        font-size: var(--font-size-h9);
        line-height: var(--font-size-h9);
        font-weight: 500;
        text-transform: uppercase;
    }
}

/* 2.2 Navigation */

#membership-nav {
    .account-info-box {
        background: none;
        border-bottom: var(--border-normal);
        padding-bottom: 10px;
        margin-bottom: 20px;
        @media (max-width: 992px) {
            flex-direction: column-reverse;
            gap: 20px;
            align-items: baseline;
        }
        .navbar-nav {
            width: auto;
            text-align: left;
            gap: 20px;
            display: flex;
            flex-wrap: wrap;
            @media (max-width: 992px) {
                &:last-child {
                    align-self: flex-end;
                }
            }
            &.account-settings {
                min-width: 200px;
                li {
                    width: 100%;
                }
            }
        }
        a {
            color: var(--rom-primary);
            font-weight: 500;
            font-size: var(--font-size-lg);
            padding: 0 !important;
            @media (max-width: 992px) {
                font-size: 1rem;
            }
        }
        .member-dropdown {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px !important;
            background: var(--grey-bg);
            &:after {
                content: var(--icon-chevron-down-16);
            }
            .account-number {
                display: block;
                font-size: 0.75rem;
                color: var(--grey-text);
                font-weight: 400;
            }
        }
        .dropdown-menu {
            background: var(--grey-bg);
            border: none;
            padding: 10px;
            border-radius: 0;
            margin: 0;
            width: 100%;
            a {
                font-weight: 400;
            }
        }
    }
}

#telemarketers-nav {
    .account-info-box {
        background: var(--rom-standout);
        margin-bottom: 20px;
        padding: 10px;
        @media (max-width: 992px) {
            flex-direction: column-reverse;
            gap: 10px;
            align-items: baseline;
        }
        .navbar-nav {
            width: auto;
            text-align: left;
            gap: 10px 20px;
            width: 100%;
            flex-wrap: wrap;
            background: none;
            .end-session {
                margin-left: auto;
                @media (max-width: 992px) {
                    margin-left: 0;
                }
                a {
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    &:after {
                        content: var(--icon-arrow-16);
                        display: flex;
                        line-height: 1;
                    }
                }
            }
        }
        a {
            color: var(--rom-primary);
            font-weight: 500;
            font-size: 1.125rem;
            padding: 0 !important;
            border-bottom: solid 1px transparent !important;
            @media (max-width: 992px) {
                font-size: 1rem;
            }
            &:hover, &:focus {
                text-decoration: none;
                border-bottom: var(--border-normal) !important;
            }
        }
        .search {
            display: flex;
            align-items: center;
            gap: 5px;
            &:after {
                content: var(--icon-search-16);
                display: flex;
                line-height: 1;
            }
        }
    }
}

/* 2.3 Membership Card */
#membership-dashboard .membership-info,
#membership-landing .membership-info {
    display: flex;
    padding: 20px;
    border: var(--border-normal);
    background: var(--grey-bg);
    gap: 20px;
    justify-content: space-between;
    margin: 0;
    @media (max-width: 992px) {
        flex-direction: column;
        gap: 10px;
    }
    .member-links {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }
    .member-info,
    .membership-main-actions {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
    }
    .member-info {
        flex: 1;
        .membership-type {
            margin: 0;
        }
        .mobile {
            display: none;
            @media (max-width: 992px) {
                display: block;
                margin-bottom: 10px;
            }
        }
        .membership-holders {
            margin: 10px 0;
            @media (max-width: 992px) {
                margin: 5px 0;
            }
            span {
                font-weight: 500;
            }
        }
        .membership-nonholders {
            margin-bottom: 20px;
        }
    }
    .membership-main-actions {
        max-width: 50%;
        @media (max-width: 992px) {
            max-width: 100%;
        }
        .member-links {
            justify-content: flex-end;
            @media (max-width: 992px) {
                justify-content: flex-start;
            }
        }
        .member-number {
            text-align: right;
            @media (max-width: 992px) {
                display: none;
            }
        }
    }
    &.renew-membership {
        margin-top: 40px;
    }
}

#membership-dashboard .subtitle {
    font-size: var(--font-size-h9);
    line-height: var(--line-height-regular);
    color: var(--grey-text);
    margin-top: 10px;
    border: none; 
    a {
        color: var(--grey-text);
        border: none;
        font-weight: 500;
    }
}

#membership-landing .membership-info  {
    margin-bottom: 40px;
}

/* 2.4 Account Settings */

/* 2.4.1 Account Settings Sidebar */
#membership-account-settings {
    > .d-flex {
        margin: 50px 0;
        column-gap: 50px;
        row-gap: 40px;
    }
    #settingSidebar {
        background: var(--grey-bg);
        border-top: var(--border-normal);
        border-bottom: var(--border-normal);
        padding: 20px;
        align-self: flex-start;
        ul ul {
            margin: 0;
        }
        .sideBar {
            display: flex;
            flex-direction: column;
            row-gap: 40px;
            .ul-reset {
                display: flex;
                flex-direction: column;
                row-gap: 5px;
                li {
                    margin: 0;
                }
                .h9 {
                    margin: 0 0 15px 0;
                }
            }
            a {
                font-size: var(--font-size-lg);
                color: var(--rom-primary);
                font-weight: 400;
                padding: 0;
                &.active {
                    background: none; 
                }
            }
        }
    }
    form.checkout,
    #form_submit_participant {
        border-top: var(--border-normal);
        padding-top: 20px;
        .required-label {
            top: 20px;
            position: absolute;
        }
    }
    .member-info-group {
        margin-bottom: 30px;
        .member-info { 
            margin-bottom: 20px;
                h2 {
                font-family: var(--main-font);
                font-size: var(--font-size-h7);
                line-height: var(--font-size-h7);
                font-weight: 500;
                text-transform: capitalize;
                margin: 0;
            }
        }
    }
    .second-cardholder-group .second-cardholder h2,
    .billing-address-group .billing-address h2 {
        font-family: var(--main-font);
        font-size: var(--font-size-h7);
        line-height: var(--font-size-h7);
        font-weight: 500;
        text-transform: capitalize;
        margin: 0;
    }
    #form_submit_participant h7 {
        margin-bottom: 20px;
        display: inline-block;
    }
}



/* 3 - Component Styles */

/* 3.1 Grid-cols-3 */
.grid-cols-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 20px;
    margin: 50px 0;
    @media (max-width: 992px) {
        grid-template-columns: 1fr;
    }
    .img-container {
        overflow: hidden;
        aspect-ratio: 5 / 4;
        @media (max-width: 992px) {
            width: 30%;
        }
        img {
            transition: var(--transition-normal);
            scale: 100%;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .item-content {
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        flex: 1;
        .item-title {
            margin-bottom: 20px; 
        }
        .item-description {
            font-weight: 400;
            line-height: var(--line-height-regular);
            display: flex;
            flex: 1;
            gap: 5px;
            @media (max-width: 992px) {
                font-size: var(--font-size-md);
            }
            &:after {
                content: var(--icon-arrow-24);
                align-self: flex-end;
            }
        }
    }
    a {
        color: var(--rom-primary);
        text-decoration: none;
        display: flex;
        flex-direction: column;
        height: 100%;
        border-bottom: var(--border-light);
        @media (max-width: 992px) {
            flex-direction: row;
            column-gap: 10px;
            padding-bottom: 10px;
        }
        &:hover, &:focus {
            color: var(--rom-primary);
            text-decoration: none;
            border-bottom: var(--border-normal);
            .img-container {
                img {
                    scale: 105%;
                }
            }
        }
    }
}

/* 3.2 Post Card */

.post-card {
    margin: 50px 0;
    display: flex;
    gap: 50px;
    @media (max-width: 992px) {
        flex-direction: column;
        gap: 25px;
    }
    &.img-left {
        flex-direction: row-reverse;
        @media (max-width: 992px) {
            flex-direction: column-reverse;
        }
    }
    .post-card-content {
        width: 40%;
        @media (max-width: 992px) {
            width: 100%;
        }
    }
    .post-card-description {
        line-height: var(--line-height-regular);
    }
    .post-card-link {
        margin-top: 20px;
        color: var(--rom-primary);
        text-transform: uppercase;
        font-size: var(--font-size-h9);
        display: inline-flex;
        align-items: center;
        font-weight: 500;
        gap: 5px;
        border-bottom: solid 1px transparent;
        &:after {
            content: var(--icon-arrow-16);
        }
        &:hover, &:focus {
            color: var(--rom-primary);
            text-decoration: none;
            border-bottom: solid 1px var(--rom-primary);
        }
    }
    .post-card-img {
        flex: 1;
        aspect-ratio: 5 / 4;
        display: flex;
        align-items: center;
        overflow: hidden;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            overflow-clip-margin: unset;
        }
    }
}

/* 3.3 Grid-cols-3-links */

.grid-cols-3-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 20px;
    margin: 50px 0;
    @media (max-width: 992px) {
        grid-template-columns: 1fr;
    }
    .img-container {
        overflow: hidden;
        aspect-ratio: 5 / 4;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .item-content {
        padding: 10px 0;
        .item-title {
            margin-bottom: 20px; 
        }
        .item-description {
            font-weight: 400;
            p {
                line-height: var(--line-height-regular);
            }
            @media (max-width: 992px) {
                font-size: var(--font-size-md);
            }
            strong, b {
                font-weight: 500;
            }
            a {
                margin: 0;
                color: var(--rom-primary);
                border-bottom: solid 1px transparent;
                font-weight: 500;
                &:hover, &:focus {
                    color: var(--rom-primary);
                    border-bottom: var(--border-normal);
                }
                &.booking-link {
                    text-transform: uppercase;
                    display: inline-flex;
                    align-items: center;
                    gap: 5px;
                    font-weight: 500;
                    font-size: var(--font-size-h9);
                    &:after {
                        content: var(--icon-arrow-16);
                        line-height: 1;
                    }
                }
            }
        }
    }
    .fine-print {
        grid-column: 1 / -1;
    }
}

/* 5 - Temp Styles */

/* 5.1 Cancel override for /member/account */
/* WEB-7245 - This is temp code only. This should be removed when the whole page is redone */
#membership-account-settings .checkout-buttons .float-left {
    visibility: hidden;
}