/* 
Theme Name:		 National Lipid Assn.
Theme URI:		 https://steadyrain.com/wp/sr-block-theme-fse
Description:	 National Lipid Assn. is a child theme of SteadyRain Block Theme (Full Site Editing). A flexible and modern Full Site Editing (FSE) WordPress theme designed by SteadyRain, perfect for creating dynamic, customizable, and accessible websites. This theme supports full-site editing capabilities, allowing users to build and manage layouts with ease. Key features include custom colors, logos, flexible headers, footer widgets, and RTL language support, making it ideal for a wide range of projects.
Author:			 SteadyRain
Author URI:		 https://steadyrain.com
Template:		 steadyrain-theme
Version:		 1.0.0
Text Domain:	 nla
*/

/*
    Add your custom styles here
*/
/******GENERAL******/
.wp-block-buttons .wp-block-button__link {
    transition: all .3s ease-in-out;
}

@media screen and (max-width: 768px) {
    .wp-block-button {
        flex-basis: 100% !important;
    }
    .is-style-primary-lg a, .is-style-primary-outline-lg a, .is-style-secondary-lg a, .is-style-secondary-outline-lg a, .is-style-accent-lg a, .is-style-accent-outline-lg a {
        font-size: 1rem !important;
        line-height: 1em !important;
        padding: 1rem 1.25rem !important;
        letter-spacing: 0.04rem !important;
        border-radius: 2rem !important;
    }
}

/******HEADER******/
header {
    position: sticky;
    top: -42px;
    z-index: 9999;
}
header .outer-header.is-sticky {
    box-shadow: 0 4px 8px 0 rgba(21, 25, 70, 0.20);
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
}
header .outer-header #mega-menu-primary_menu .logo > a::before {
    margin-top: -22px !important;
}
header .outer-header.is-sticky #mega-menu-primary_menu .logo > a::before {
    width: 4rem !important;
    height: 3.125rem !important;
    background-size: 4rem 3.125rem !important;
    line-height: 3.125rem !important;
    margin-top: 0 !important;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu {
    margin-top: 28px !important;
}
header .outer-header.is-sticky #mega-menu-primary_menu > li > .mega-sub-menu {
    margin-top: .75rem !important;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu > li > ul > li.mega-knowledge-block {
    margin-right: 1.25rem !important;
    width: calc((var(--span) / var(--columns) * 100%) - 1.25rem) !important;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu > li > ul > li.mega-knowledge-block .knowledge-block-bg {
    margin: 0 !important;
    mix-blend-mode: multiply;
    opacity: 0.5;
    position: absolute;
    top: -1.75rem;
    right: -1.38rem;
    bottom: -1.75rem;
    left: -1.38rem;
    z-index: 0;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu > li > ul > li.mega-knowledge-block .knowledge-block-bg img {
    width: 100%;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu > li > ul > li:not(.mega-knowledge-block) {
    margin-right: 1.25rem !important;
    margin-left: 1.25rem !important;
    width: calc((var(--span) / var(--columns) * 100%) - 2.5rem) !important;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu .mega-has-icon a {
    display: flex !important;
    gap: 1rem;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu .mega-has-icon > a:not(:has(.mega-menu-description)) {
    align-items: center;
    border-bottom: 1px solid #cdcdd1 !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu .mega-has-icon > a.fa-angles-right {
    gap: .5rem !important;
    border-bottom-width: 0 !important;
    padding-bottom: 0 !important;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu .mega-has-icon > a.fa-angles-right::before {
    width: auto !important;
    margin-right: 0 !important;
    color: var(--wp--preset--color--secondary) !important;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu .mega-has-icon > a.fa-angles-right:hover::before {
    text-decoration: none !important;
    color: var(--wp--preset--color--secondary-hover) !important;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu .mega-has-icon a:not(.fa-angles-right)::before {
    background-color: var(--wp--preset--color--primary-tint) !important;
    width: 3rem !important;
    height: 3rem !important;
    background-position: center center !important;
    border-radius: 50%;
    margin-right: 0 !important;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu .mega-has-icon .view-all a {
    font-size: 1rem !important;
    color: var(--wp--preset--color--secondary) !important;
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    border-bottom-width: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu .mega-has-icon .view-all a::before {
    width: auto !important;
    height: auto !important;
    background-color: unset !important;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu .mega-has-icon .view-all a:hover {
    color: var(--wp--preset--color--secondary-hover) !important;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu .mega-has-icon a .mega-menu-title {
    line-height: 1.2em !important;
}
header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu .mega-has-icon a .mega-menu-description {
    margin-bottom: 0 !important;
    margin-top: .5rem !important;
}
header .mobile-header {
    display: none !important;
}
header .mobile-menu-socials .socials {
    display: flex;
    gap: 1rem;
    margin: 1rem 0;
}
header .mobile-menu-socials .socials a {
    color: var(--wp--preset--color--secondary);
    font-family: "Font Awesome 7 Brands";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}
header .mobile-menu-socials .socials a:hover {
    color: var(--wp--preset--color--secondary-hover);
}
@media screen and (max-width: 1024px) {
    header .header-bar {
        display: none !important;
    }
    header .outer-header {
        padding: 1rem !important;
    }
    header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu {
        margin-top: 0 !important;
        padding: 0 !important;
        box-shadow: unset !important;
    }
    header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu > li > ul > li.mega-knowledge-block {
        margin-top: 1.5rem !important;
        margin-right: 0 !important;
        width: 100%!important;
    }
    header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu > li > ul > li.mega-knowledge-block .knowledge-block-bg {
        top: -2.12rem;
        left: .63rem;
        right: -1.25rem;
        bottom: -2.5rem;
    }
    header .outer-header #mega-menu-primary_menu > li > .mega-sub-menu > li > ul > li:not(.mega-knowledge-block) {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    header .mega-menu-item:has(#menu-header-tertiary-menu) {
        margin: 1rem 0 !important;
    }
    header .mega-menu-item:has(#menu-header-tertiary-menu) #menu-header-tertiary-menu, header .mega-menu-item:has(#menu-header-tertiary-menu) #menu-header-tertiary-menu .sub-menu {
        all: unset;
    }
    header .mega-menu-item:has(#menu-header-tertiary-menu) #menu-header-tertiary-menu {
        font-size: 1rem !important;
        line-height: 1.2em !important;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin: .5rem 0 !important;
    }
    header .mega-menu-item:has(#menu-header-tertiary-menu) #menu-header-tertiary-menu > li:has(.sub-menu) > a {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
    }
    header .mega-menu-item:has(#menu-header-tertiary-menu) #menu-header-tertiary-menu > li:has(.sub-menu) > a:hover {
        color: var(--wp--preset--color--secondary-hover);
        text-decoration: none !important;
    }
    header .mega-menu-item:has(#menu-header-tertiary-menu) #menu-header-tertiary-menu > li:has(.sub-menu) > a::after {
        content: "\f107";
        font-family: 'Font Awesome 7 Pro';
        color: var(--wp--preset--color--gray-70);
    }
    header .mega-menu-item:has(#menu-header-tertiary-menu) #menu-header-tertiary-menu > li:has(.sub-menu) > a:hover::after {
        color: var(--wp--preset--color--secondary-hover);
        text-decoration: none !important;
    }
    header .mega-menu-item:has(#menu-header-tertiary-menu) #menu-header-tertiary-menu > li > .sub-menu {
        display: none;
        flex-direction: column;
        gap: 1rem;
        margin: 1rem 0 0rem 1rem !important;
    }
}
/******FOOTER******/
footer .footer-logo img {
    width: 100%;
    max-width: 15rem;
}
@media screen and (max-width: 768px) {
    footer > .footer-content {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    footer nav[aria-label="Footer Menu"] {
        padding-bottom: 2rem;
        border-bottom: 1px solid var(--wp--preset--color--gray-20);
    }
    footer nav[aria-label="Footer Menu"] > ul, footer nav[aria-label="Footer Secondary Menu"] > ul  {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 1rem;
        grid-row-gap: 1.5rem;
    }
    footer nav[aria-label="Footer Secondary Menu"] > ul {
        grid-row-gap: 1rem !important;
    }
    footer .footer-columns {
        gap: 2rem !important;
    }
    footer .footer-bar > div{
        justify-content: flex-start;
        grid-gap: .75rem !important;
    }
    footer .footer-bar nav > ul {
        justify-content: flex-start !important;
    }
}
/******HOMEPAGE*****/
.home-banner .mobile-hero {
    display: none !important;
}
.members-section {
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.members-section .members-bg-overlay {
    mix-blend-mode: multiply;
    position: absolute !important;
    right: 0;
    bottom: -1.25rem;
    z-index: 0;
}
.members-section .members-start {
    min-width: 27.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.40);
}
.members-section .members-start .members-icon {
    flex-shrink: 0;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.members-section .member-button-grid {
    align-items: center;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.40);
}
.course-grid .course-card .course-card-buttons .course-read-more {
    width: calc(100% - 2.5rem);
    text-align: center;
    text-decoration: none;
    max-height: 1rem;
    transition: background-color .3s ease-in-out;
}
.course-grid .course-card .course-read-more:hover {
    background-color: var(--wp--preset--color--secondary-hover) !important;
}
.practice-tools {
    position: relative;
    z-index: 2;
}
.lipidology-resource-center .lipidology-group .topic-card {
    grid-template-columns: 5rem auto !important;
    align-items: center !important;
}
.lipidology-resource-center .lipidology-group .topic-list .topic-list-item {
    grid-template-columns: 2.5rem auto !important;
}
@media screen and (max-width: 1024px) {
    .members-section .members-start {
        min-width: 100%;
        width: auto;
        justify-content: center;
    }
    .members-section .member-button-grid {
        grid-template-columns: 1fr auto 1fr;
    }
    .members-section .member-button-grid .my-account {
        padding-left: 0 !important;
        border-left-width: 0 !important;
    }
    .course-grid .course-card {
        padding: 1.5rem !important;
    }
    .course-grid .course-card .course-card-buttons {
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 768px) {
    .home-banner > img {
        display: none;
    }
    .home-banner {
        background-color: #9CD5FC;
        padding: 2rem 0 0 !important;
        align-items: flex-start !important;
    }
    .home-banner h1 {
        font-size: 2.5rem !important;
    }
    .home-banner p {
        font-size: 1rem !important;
    }
    .home-banner h2 {
        font-size: 1.75rem !important;
    }
    .course-grid {
        grid-template-columns: 1fr 1fr;
    }
    .practice-tools {
        margin-bottom: -9rem !important;
    }
    .practice-tools .practice-tools-grid {
        gap: 1rem !important;
    }
    .practice-tools .practice-tools-grid > div {
        display: grid;
        grid-template-columns: 3.5rem auto;
        grid-row-gap: .5rem !important;
        grid-column-gap: 1rem !important;
        align-content: center;
    }
    .practice-tools .practice-tools-grid > div .wp-block-font-awesome-icon {
        width: 3.5rem;
        height: 3.5rem;
        grid-row: span 2;
    }
    .practice-tools .practice-tools-grid > div .wp-block-font-awesome-icon svg {
        font-size: 1.75rem !important;
    }
    .practice-tools .practice-tools-grid > div h3 {
        text-align: left !important;
        font-size: 1.5rem;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        align-self: stretch;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lipidology-resource-center-outer {
        background-position: center;
    }
    .lipidology-resource-center {
        padding-top: 15rem !important;
        padding-bottom: 5rem !important;
    }
    .lipidology-resource-center .lipidology-group .topic-card {
        grid-template-columns: 3.5rem auto !important;
        grid-row-gap: 0 !important;
        padding: 1.25rem !important;
    }
    .lipidology-resource-center .lipidology-group .topic-card:first-of-type {
        flex-basis: 7.625rem !important;
    }
    .lipidology-resource-center .lipidology-group .topic-card:not(:first-of-type) {
        flex-basis: 6rem !important;
    }
    .lipidology-resource-center .lipidology-group .topic-card .wp-block-font-awesome-icon {
        width: 3.5rem;
        height: 3.5rem;
        grid-row: span 2;
    }
    .lipidology-resource-center .lipidology-group .topic-card .wp-block-font-awesome-icon svg {
        font-size: 1.75rem !important;
    }
    .lipidology-resource-center .lipidology-group .topic-list {
        padding: 1.25rem !important;
        gap: 1.25rem !important;
    }
    .lipidology-resource-center .lipidology-group .topic-list .topic-list-item h4 {
        font-size: 1.25rem !important;
    }
}
@media screen and (max-width: 600px) {
    .home-banner .wp-block-buttons {
        flex-wrap: wrap;
    }
    .home-banner .wp-block-button {
        flex-basis: 100% !important;
    }
    .home-banner .mobile-hero {
        display: block !important;
        position: relative;
    }
    .home-banner .mobile-hero::after {
        content: '';
        display: block;
        background: linear-gradient(180deg, rgba(156, 213, 252, 0.50) 0%, rgba(225, 242, 254, 0.00) 50%);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    .home-banner .mobile-hero img {
        overflow: visible !important;
    }
    .members-section {
        padding: 1.5rem 1rem !important;
    }
    .members-section .members-start {
        gap: .75rem;
    }
    .members-section .members-start .members-icon {
        width: 3.5rem;
        height: 3.5rem;
        flex-basis: 3.5rem !important;
    }
    .members-section .members-start .members-icon .svg-inline--fa {
        height: .75em;
    }
    .members-section .members-start h2 {
        font-size: 1.5rem;
    }
    .members-section .member-button-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem !important;
        width: 100%;
    }
    .members-section .member-button-grid .my-account, .members-section .member-button-grid .find-a-member {
        padding-bottom: 1.25rem !important;
        border-bottom: 1px solid var(--wp--preset--color--gray-20) !important;
    }
    .members-section .member-button-grid .my-account, .members-section .member-button-grid .find-a-member, .members-section .member-button-grid .cme-credits {
        padding-left: 0 !important;
        border-left-width: 0 !important;
        flex-direction: row !important;
        justify-content: space-between;
        align-items: center;
        gap: .75rem;
        flex-wrap: nowrap;

        h3 {
            font-size: 1.5rem !important;
        }
    }
    .latest-events-grid .latest-events-grid-buttons, .latest-journal-grid .latest-journal-grid-buttons {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .latest-events-grid .latest-events-grid-buttons > a, .latest-journal-grid .latest-journal-grid-buttons > a {
        width: calc(100% - 2.5rem);
        text-align: center;
    }
    .course-grid {
        grid-template-columns: 1fr;
    }
}
/******ARTICLE******/
.resource-types-article .article-card .wp-block-post-terms--resource-types {
    display: flex;
    gap: .5rem;
}
.resource-types-article .article-card .wp-block-post-terms--resource-types a, .latest-journal .resource-types-publication .wp-block-post-terms--resource-types a {
    background-color: var(--wp--preset--color--primary);
    border-radius: .5rem;
    padding: .63rem .75rem;
    line-height: 1em;
    font-family: "Outfit";
    font-size: .875rem;
    font-weight: 700;
    display: inline-flex;
    gap: .5rem;
    justify-content: center;
    text-transform: none;
    letter-spacing: 0;
    transition: background-color .3s ease-in-out;
}
.resource-types-article .article-card .wp-block-post-terms--resource-types a::before, .latest-journal .resource-types-publication .wp-block-post-terms--resource-types a::before {
    content: '\f1ea';
    font-family: "Font Awesome 7 Pro";
    font-weight: 400;
}
.latest-journal .latest-journal-grid {
    grid-template-columns: 39.351852% 56.296296% !important;
    align-items: center;
}
.latest-events .latest-events-grid {
    grid-template-columns: 56.296296% 39.351852% !important;
    align-items: center;
}
.latest-journal .resource-types-publication .wp-block-post-terms--resource-types a::before {
    content: '\f02d';
}
.resource-types-article .article-card .wp-block-post-terms--resource-types a:hover, .latest-journal .resource-types-publication .wp-block-post-terms--resource-types a:hover {
    text-decoration: none;
    background-color: var(--wp--preset--color--primary-hover);
}
.latest-journal .resource-types-publication .has-accent-background-color.wp-block-read-more:hover {
    background-color: var(--wp--preset--color--accent-hover) !important;
}

.st-custom-button {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: center;
  color: var(--wp--preset--color--secondary);
}
.st-custom-button:hover {
  cursor: pointer;
  color: var(--wp--preset--color--secondary-hover);
}
.st-custom-button span {
  font-weight: 700;
}
@media screen and (max-width: 1024px) {
    .latest-journal .latest-journal-grid, .latest-events .latest-events-grid, .lipidology-group {
        grid-template-columns: 1fr !important;
        align-items: center;
        gap: 1.5rem;
    }
    .latest-events .latest-events-grid .article-card {
        order: 2;
    }
    .latest-events .latest-events-grid figure {
        order: 1;
    }
}

/* The footer can't have a top margin on many pages where there is a blue block right above the footer */
.wp-site-blocks > footer {
    margin-block-start: 0 !important;
}
/* used by some blocks in the templates for responsive */
@media(max-width:768px){
	.row_on_desktop_stack_on_mobile {
		flex-direction:column !important;
	}
}