/*———— README ————*/

/*
This CSS file adds additional styling to Community Hub beyond what
is possible in Theme Settings (on the Community Hub Settings tab).
This includes several corrections to the Bold Theme that are not
accessible via Theme Settings.

If you are using the Bold Theme and want to rapidly change the
most prominently featured color in Community Hub, simply do a 
Find and Replace All on the current primary color, which is #006241.
This assumes your primary color contrasts well with white (#FFFFFF).
If not, you will find many elements hard to read. We strongly advise
selecting a primary color that contrasts well with white.
In either case, you will need to make additional changes in Theme Settings
since this file is only meant to supplement Theme Settings, not replace it.
*/


/*———— GENERAL ————*/

/* Imports a Google Font so it can be declared in Theme Settings. This includes Barlow Condensed AND Open Sans. */ 
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/*———— GLOBAL HEADER ————*/

/* Sets a minimum height on the global nav to ensure the AASLD logo isn't cut off.
   For a mobile viewport, the mobile menu button gets cut off at 105px but needs at least 50px. */
.navbar {
    min-height: 50px;
}
@media (min-width: 768px) {
    .navbar {
        min-height: 105px;
    }
}

/* Fix the Font Color of the "MENU" Button on Mobile when it's "Active." */
.navbar-default .m-toggle-button.s-active .m-toggle-button-text {
    color: #006241;
}

/* Change the font of the global navbar menu items. */
.navbar-default .navbar-nav>li.m-global-nav-item>a {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
}

/* Sets the padding of each global nav menu item to align more closely with aasld.org */
@media only screen and (min-width: 768px) {
    .navbar-default .navbar-nav>li.m-global-nav-item>a {
        padding-top: 20px;
        padding-right: 26px; /* Adjust as needed to have all nav items fit on a single row. */
        padding-bottom: 8px;
        padding-left: 0px;
    }
}

/* Sets the width of the mobile logo to match aasld.org at the same media sizes.
   This also ensures the global nav doesn't crash into the now-larger logo. */

@media (min-width: 768px) {
    .navbar-right {
        max-width: 570px;
    }
    .m-logo-retina {
    width: 135px;
    }
}
@media (min-width: 992px) {
    .navbar-right {
        max-width: 665px;
    }
    .m-logo-retina {
    width: 175px;
    }
}
@media (min-width: 1200px) {
    .navbar-right {
        max-width: 850px;
    }
    .m-logo-retina {
    width: 240px;
    }
}

/*———— MAIN CANVAS ————*/

/* Removes the right margin from the stock CH CSS on the page contents since it causes horizontal scrolling when combined with AASLD's CSS. */
div[id$=":PageContainer"] {
    margin-right: 0px;
}
/* Adds a right margin on the page header since it's otherwise off-center when combined with AASLD's CSS. */
.page-header {
    margin-right: 15px;
}

/* For "Bottom" buttons, adds a margin to the right so there is spacing between each button. */
.card .pull-left .m-margin-separation {
    margin-right:  5px;
}

/* When full-width-button-wrapper is declared, this is intended to target the button div to ensure the
   buttons can take up the entire card width instead of 7/12 of the width. This works on at least
   record lists with non-bottom buttons, i.e., those displayed in the row. */
.card.full-width-button-wrapper .col-sm-7 {
    width: 100%;
}

/* Changes the colors of non-selected buttons in a filter configuration.
   More technically, it styles ALL the buttons, but the next declaration is more specific. */
.card-list .m-filter-group .btn {
    background-color: #FFFFFF;
    border-color: #E0E0E0;
    color: #006241;
}

/* Changes the colors of the selected button in a filter configuration.
   Overrides the previous declaration because it is more specific. */
.card-list .m-filter-group .btn.m-btn-selected {
    background-color: #006241;
    border-color: #006241;
    color: #FFFFFF;
}

/* Changes the border color on cards (default is white). */
.card, 
.card-list {
    border-color: #006241 !important;
}

/* Changes the top border color on the "Account" navigation menu for larger viewports. */
.l-canvas .list-group {
    border-top-color: #006241;
}

/* Changes the default Nimble orange color for global nav items with the "m-highlight" class */
.navbar-default .navbar-nav>li.m-highlight>a {
    background-color: #006241;
}

/* Sets the hover and focus colors of "m-highlight" global nav items to be a shade of the primary color. Also sets the border color and font color. */
.navbar-default .navbar-nav>li.m-highlight>a:focus,
.navbar-default .navbar-nav>li.m-highlight>a:hover {
    background-color: #006241;
    box-shadow: 0 3000px rgba(0, 0, 0, 0.2) inset;
    color: #FFFFFF;
    border-color: #006241;
}

/* Changes the default dark gray page header background color. */
.page-header.page-header-anchor.m-page-header {
    background-color: #FFFFFF;
}

/* Sets the page header subtitle font color (default = white) and sets the font weight to match the CMS. */
.page-header.page-header-anchor.m-page-header p {
    color: #313131;
    font-weight: 400;
}

/* Resizes the page header title's default font to better align with the CMS. */
.m-page-header h1 {
    font-size: 42px;
    line-height: 50px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
}

/* Reduces the button width for cards with the "btn-hug" class */
.card.btn-hug .card-detail .btn,
.card.btn-hug .card-detail .btn:focus,
.card.btn-hug .card-detail .btn:hover {
    min-width: 7.25rem;
}

/* Indents and shrinks child navigation menu items (mobile and desktop). */
.nav-child {
    margin-left: 2em;
    font-size: .9em;
}

/* Changes the card heading's font to better align with the CMS. */
.card .card-heading {
    font-size: 26px;
    line-height: 31px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
}

/* For card lists, changes its main heading font to better align with the CMS. */
.card-list .card-list-heading {
    font-size: 34px;
    line-height: 39px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    color: #313131; /* Added in, since Theme Settings doesn't apply to this. */
}

/* For card lists, changes the sub-headings font to better align with the CMS. The main application of this is the Affiliations card, which states "Primary Affiliation" and "Other Affiliations". */
.card-list .card-list-heading.row {
    font-size: 30px;
    line-height: 35px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    color: #313131; /* Added in, since Theme Settings doesn't apply to this. */
}

/* Slightly and relatively increases the font size and line height of buttons in cards and button rows to better align with the CMS. This also rounds the edges and applies a different font. */
input.btn, /* Buttons on original pages such as nc__joinrenew */
input.btn:hover,
input.btn:focus,
.m-button-row-item .btn, /* Buttons in button rows */
.m-button-row-item .btn:hover,
.m-button-row-item .btn:focus,
.row a.btn, /* Hardcoded buttons on some cards (such as on "My Checkout" and "View Registration"). */
.row a.btn:hover,
.row a.btn:focus,
.card .card-detail .btn, /* Buttons on most cards */ 
.card .card-detail .btn:hover,
.card .card-detail .btn:focus {
    font-size: 20px;
    line-height: 32px;
    border-radius: 50px; /* Most buttons would be covered by a 26px radius, but this is higher, to be safe. */
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    min-width: 11.25rem;
}

/* Preserves the correct radius on hover for the last button in a button group, since AASLD has rounded buttons. */
.btn-group > .btn:last-child:not(:first-child):focus,
.btn-group > .btn:last-child:not(:first-child):hover {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

/* Overrides the min-width (declared directly above) for hardcoded buttons to ensure they remain as small as possible to prevent issues on small viewports. */
.row p a.btn.btn-secondary,
.row p a.btn.btn-secondary:hover,
.row p a.btn.btn-secondary:focus {
    min-width: 6.25rem;
}

/* Improves the line-height of the "Upload Photo" card to prevent overlap when the first field spans multiple lines, and applies a font family that aligns CMS headings. */
.card.m-profile-card ul.m-profile-info li:first-of-type {
    font-size: 34px;
    line-height: 40px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
}

/* Adds margin above each block button in a list-based card. By default, there is zero margin, causing buttons to touch. */
.card .card-actions .btn-list-button {
    margin-top: 16px;
}

/* Adds margin above each inline button in a list-based card. When there are multiple buttons in a card and they break
   across two or more lines, there is zero margin by default, causing buttons to touch. */
.card .card-actions .l-display-inline .btn-list-button {
    margin-top: 8px;
}

/* Fixes AASLD buttons from overflowing on cards on the Checkout page. */
.card .row .card-actions {
    padding-left: 0px;
}

/* Removes unnecessary spacing from text-based lists in Read Only Field Set cards. */
.card ul.card-detail li > span > ul li,
.card ul.card-detail li > span > ol li {
    padding-left: 0px;
    padding-right: 0px;
}
.card ul.card-detail li > span > ul li:before,
.card ul.card-detail li > span > ol li:before {
    content: none;
}

/* Makes Community Hub show bullets for unordered text-based lists in the Read Only Field Set card type.
   Styles up to six levels deep. */
.card ul.card-detail li > span > ul > li,                                                     /* level 1 */
.card ul.card-detail li > span > ul > li > ul > li > ul > li > ul > li {                      /* level 4 */
    list-style-type: disc;                                                                    /* solid bullets */
}
.card ul.card-detail li > span > ul > li > ul > li,                                           /* level 2 */
.card ul.card-detail li > span > ul > li > ul > li > ul > li > ul > li > ul > li {            /* level 5 */
    list-style-type: circle;                                                                  /* hollow bullets */
}
.card ul.card-detail li > span > ul > li > ul > li > ul > li,                                 /* level 3 */
.card ul.card-detail li > span > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {  /* level 6 */
    list-style-type: square;                                                                  /* solid squares */
}

/* Makes Community Hub show bullets for ordered text-based lists in the Read Only Field Set card type.
   Styles up to six levels deep. */
.card ul.card-detail li > span > ol > li,                                                     /* level 1 */
.card ul.card-detail li > span > ol > li > ol > li > ol > li > ol > li {                      /* level 4 */
    list-style-type: decimal;                                                                 /* numbers like 1. 2. 3. */
}
.card ul.card-detail li > span > ol > li > ol > li,                                           /* level 2 */
.card ul.card-detail li > span > ol > li > ol > li > ol > li > ol > li > ol > li {            /* level 5 */
    list-style-type: lower-alpha;                                                             /* lowercase letters like a. b. c. */
}
.card ul.card-detail li > span > ol > li > ol > li > ol > li,                                 /* level 3 */
.card ul.card-detail li > span > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li {  /* level 6 */
    list-style-type: lower-roman;                                                             /* lowercase roman numerals like i. ii. iii. */
}

/* Makes Community Hub show bullets for unordered text-based lists in the Event card type.
   Styles up to six levels deep. */
.card div.m-event-description > ul > li,                                                      /* level 1 */
.card div.m-event-description > ul > li > ul > li > ul > li > ul > li {                       /* level 4 */
    list-style-type: disc;                                                                    /* solid bullets */
}
.card div.m-event-description > ul > li > ul > li,                                            /* level 2 */
.card div.m-event-description > ul > li > ul > li > ul > li > ul > li > ul > li {             /* level 5 */
    list-style-type: circle;                                                                  /* hollow bullets */
}
.card div.m-event-description > ul > li > ul > li > ul > li,                                  /* level 3 */
.card div.m-event-description > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li {   /* level 6 */
    list-style-type: square;                                                                  /* solid squares */
}

/* Makes Community Hub show bullets for ordered text-based lists in the Event card type.
   Styles up to six levels deep. */
.card div.m-event-description > ol > li,                                                      /* level 1 */
.card div.m-event-description > ol > li > ol > li > ol > li > ol > li {                       /* level 4 */
    list-style-type: decimal;                                                                 /* numbers like 1. 2. 3. */
}
.card div.m-event-description > ol > li > ol > li,                                            /* level 2 */
.card div.m-event-description > ol > li > ol > li > ol > li > ol > li > ol > li {             /* level 5 */
    list-style-type: lower-alpha;                                                             /* lowercase letters like a. b. c. */
}
.card div.m-event-description > ol > li > ol > li > ol > li,                                  /* level 3 */
.card div.m-event-description > ol > li > ol > li > ol > li > ol > li > ol > li > ol > li {   /* level 6 */
    list-style-type: lower-roman;                                                             /* lowercase roman numerals like i. ii. iii. */
}

/* fs-full-image
** Reduces the border-radius from 50% to 5% on "Upload Photo" Cards
** when the fs-full-image CSS Class is declared on the card. */
.m-profile-card.fs-full-image .img-circle {
    border-radius: 5%;
}

/* fs-full-image-borderless
** Removes the border and border-radius on "Upload Photo" Cards
** when the fs-full-image-borderless CSS Class is declared on the card. */
.m-profile-card.fs-full-image-borderless .img-circle {
    border: 0;
    border-radius: 0%;
}

/* On the Join & Renew page, this is used by the "FS_Individual Mailing Address In Place" card.
** This hides the 1st field (which should be Mailing Country Code) from the user. If the Mailing Country Code
** stops being the first field in the "FS_EditIndividualMailingAddressRenew" field set, this must be updated
** accordingly. See User Story for written and video instructions. */
.card.hide-first-field .form-horizontal .form-group:nth-child(1) {
    display: none;
}

/*———— MOBILE MENU CANVAS ————*/

/* Removes margin from the top of the mobile menu so it aligns with the container div. */
.m-off-canvas-nav {
    margin-top: 0px;
}

/* Changes dark gray background color of mobile menu to light gray. */
.l-off-canvas.l-off-canvas-left {
    background-color: #F9F9F9;
}

/* Sets the color of Navigation Menu Items in the mobile menu to the primary color. */
.m-off-canvas-nav a.list-group-item {
    background-color: #006241;
    border-color: #ffffff;
    color: #fff !important;
}

/* Simplifies mobile menu Nav Menu Item hover and focus colors to be a shade of the primary color. */
.m-off-canvas-nav a.list-group-item:focus,
.m-off-canvas-nav a.list-group-item:hover {
    background-color: #006241;
    box-shadow: 0 3000px rgba(0, 0, 0, 0.2) inset;
}

/* In mobile menu, converts left margin of child Nav Menu Items to left padding
   to prevent white background from appearing. */
.m-off-canvas-nav a.list-group-item.nav-child {
    margin-left: 0;
    padding-left: 2.5em;
}

/* Simplify Mobile Menu "list group" border to be a shade of the primary color using ARGB. */
.l-off-canvas .m-off-canvas-nav .list-group {
    border-bottom-color: #00624199;
}

/* Changes the dark gray color of a selected item in a list to the primary color (e.g., Checkout page). */
.m-list-group-select a.list-group-item.active,
.m-list-group-select a.list-group-item.active:focus,
.m-list-group-select a.list-group-item.active:hover,
.m-list-group-select div.list-group-item.active {
    background-color: #006241;
}


/*———— FLOWS ————*/

/* Corrects checkbox option display within a flow. */
.nu-lightning-wrapper .uiBlock .bBody .slds-form-element__control .slds-checkbox {
    width: auto;
}

/* Corrects FlowRuntime fields from extending outside card. */
.nu-lightning-wrapper .slds-scope flowruntime-record-field > div.container {
    width: 100%;
}

/* Adds margin above and below FlowRuntime radio-select and multi-select fields. */
.nu-lightning-wrapper .slds-scope flowruntime-radio-button-input-lwc fieldset,
.nu-lightning-wrapper .slds-scope flowruntime-multi-checkbox-lwc     fieldset {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Corrects text area label display within a flow. */
.nu-lightning-wrapper .bBody .inputHeader .richTextLabel {
    display: inline-block;
    float: none;
    text-align: left;
	width: 100%;
}

/* Corrects previous button display within a flow. */
.slds-button.slds-button_neutral.uiButton--default.uiButton{
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #006241;
    transition: border .15s linear;
    /*background-color: #006241;*/
    color: rgb(255, 255, 255);	
}

/* Relocates the required asterisk on Lightning-wrapped components. */
.nu-lightning-wrapper .uiBlock .bBody .inputHeader .required{
	margin-right: auto;
	margin-left: auto;
}

/* Adds padding to radio button inputs within a flow. */
.flowruntimeRadioButtonInput .bBody .slds-form-element__control{
    padding-top: 25px;
}

/* Allows radio select component to occupy full width. Default is 33%. */
.nu-lightning-wrapper .slds-card .slds-form-element__control .slds-radio {
    width: 100%;
}

/* Adds a backgound color, border radius, and padding to the SLDS help text bubble. */
lightning-primitive-bubble:not(.slds-hide).slds-popover_tooltip {
    background-color: #006241;
    border-radius: 0.5em;
    padding: 0.5em;
}

/* Sets the SLDS help text to use a white font color. */
.slds-popover__body {
    color: #FFFFFF;
}

/* Hides the help text icon for Lookup components since they they never go away once they appear.
They just pull in the Filter Criteria's message, which isn't necessarily helpful.
As of at least Winter '22, you cannot override or disable the help text in the screen flow. */
lightning-lookup lightning-helptext {
    display: none;
}

/* Hides the "Show All Results for" option in the dropdown for Lookup components, since
it doesn't work in Community Hub. */
lightning-base-combobox-item[data-value="actionAdvancedSearch"] {
    display: none !important;
}

/* Applies client's color to the primary flow button background. */
.nu-lightning-wrapper .slds-scope .slds-button_brand {
    background-color: #006241;
}

/* Applies a shade of the client's color to the primary flow button upon hover. */
.nu-lightning-wrapper .slds-scope .slds-button_brand:hover {
    background-color: #006241c7 !important;
    border-color: #006241c7 !important;
}

/* Applies client's color to the secondary flow button text. */
.nu-lightning-wrapper .slds-scope .slds-button_neutral {
    color: #006241;
}