/*
    4 - Header and footer styling

    4.10 - header menu
    4.11 - header logo area
    4.12 - header menu links area
    4.13 - header contact us button

    4.20 - header mobile menu
    4.21 - mobile header nav menu
    4.22 - mobile header bottom

    4.30 - footer menu
    4.31 - footer social links
    4.32 - footer signup form
    4.33 - footer orange links
    4.34 - footer orange ribbon
    4.35 - footer privacy links
    4.36 - footer copyright
 */

/* 4.10 - header menu */
header.far-header {
    --link-green: var(--color-bravo);
    background-color: var(--color-charlie);
    box-shadow: 0 0 12px rgb(0, 0, 0, .47);
    color: var(--link-green);
    margin: 0;
}
.far-header-content {
    width: 100%;
    max-width: var(--page-width-extra);
    margin: 0 auto;
    padding: 0 var(--padding);
    --gap: 0;
}
.far-header-content .header__menu {
    width: calc(100% - 260px);
    gap: 0;
}

/* 4.11 - header logo area */
.far-header-content .header__logo {
    max-width: 260px;
    gap: 0;
}

/* 4.12 - header menu links area */
.far-header-content .header__menu > div {
    padding: 0 65px 0 50px;
    width: calc(100% - 180px);
}
.far-header-content ul {
    padding: 0;
    gap: 5px 0;
}
.far-header-content li {
    list-style: none;
    display: block;
    line-height: 44px;
}
.far-header-content .header__menu li a {
    padding: var(--padding) 0;
    display: block;
    height: 100%;
}
.far-header-content li a {
    color: var(--link-green);
    font-family: var(--font-family-alt);
    font-size: var(--font-size-h2);
    font-weight: normal;
    font-stretch: condensed;
    font-style: normal;
    letter-spacing: 0.6px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
.far-header-content .header__menu li ul.sub-menu {
    display: none;
    background-color: var(--color-golf);
    position: absolute;
    z-index: 100;
    margin-left: -20px;
}
.far-header-content .header__menu li ul.sub-menu li:first-child {
    margin-top: 2.5px;
}
.far-header-content .header__menu ul.sub-menu li a {
    border-top: 1px dashed var(--color-alpha);
    padding: 3px 20px;
    min-width: 300px;
    text-align: left;
}
.far-header-content .header__menu li:hover a {
    color: var(--color-alpha);
}
.far-header-content .header__menu li:hover ul.sub-menu a{
    color: var(--color-bravo);
}

.far-header-content .header__menu li ul.sub-menu a:hover{
    color: var(--color-alpha);
}
.far-header-content .header__menu li:hover ul.sub-menu {
    display: block;
}

/* 4.13 - header contact us button */
.far-header-content .wp-block-button a {
    line-height: initial;
    height: auto;
    padding: .5em 1em;
}



/* 4.20 - mobile header styles */
.far-header-mobile {
    --color-link: var(--color-bravo);
    background-color: var(--color-bravo);
    color: var(--color-link);
    margin: 0;
}
.far-header-mobile .logo-row {
    background-color: var(--color-golf);
    padding: 13px 17px;
    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
}
.far-header-mobile .logo-row .wp-block-button {
    flex-grow: 1;
    text-align: right;
}
.far-header-mobile .mobile-logo {
    max-width: min(40%, 250px);
    padding-top: 5px;
}
#mobile-toggle {
    color: var(--color-alpha);
    font-size: 1.5em;
    min-width: 15.75px;
    line-height:0;
}
.far-header-mobile .wp-block-button a {
    --color-link: var(--white);
    margin: 0;
    height: auto;
    line-height: 1;
    font-family: var(--font-family-alt);
    font-stretch: condensed;
    padding: 6px 14px;
}

/* 4.21 - mobile header nav menu */
.far-header-mobile .mobile-header__nav {
    background-color: #ecf3d8;
    padding: 0;
    min-width: 100vw;
}
.far-header-mobile.mobile-nav-show {
    height: 100vh;
    width: 100vw;
    gap: 0;
}
.far-header-mobile .mobile-header-content-wrapper {
    display: none;
}
.far-header-mobile.mobile-nav-show .mobile-header-content-wrapper {
    display: block;
    height: calc(100vh - 54px);
}
.far-header-mobile.mobile-nav-show .mobile-header-content-wrapper > div {
    height: 100%;
}
.far-header-mobile.mobile-nav-show .logo-row .wp-block-button {
    visibility: hidden;
}
.far-header-mobile .mobile-header__nav li {
    list-style: none;
    border-top: 1px dashed var(--color-alpha);
}
.far-header-mobile li a {
    color: var(--color-link);
    font-family: var(--font-family-alt);
    font-size: var(--font-size-lg);
    font-weight: normal;
    font-stretch: condensed;
    font-style: normal;
    letter-spacing: 0.6px;
    padding: var(--padding);
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    align-items: center;
}
.far-header-mobile ul.sub-menu {
    padding: 0;
    display: none;
}
.show-submenu ul.sub-menu {
    display: block;
}
.far-header-mobile ul.sub-menu li {
    padding: 0 var(--padding);
}
.far-header-mobile ul li i{
    transition: 300ms ease all;
}
.far-header-mobile ul li.show-submenu i {
    transform: rotate(90deg);
}

/* 4.22 - mobile header bottom */
.mobile-header__bottom {
    flex: 1;
    background-size: 36vw;
    background-repeat: no-repeat;
    background-position: -10px calc(100% + 10px);
}
.mobile-header__bottom > div {
    margin: 60px auto auto auto;
    text-align: center;
}
.header-social {
    padding: 0;
    margin: var(--padding) auto 0 auto;
}
.header-social li {
    list-style: none;
    display: inline-block;
    margin: 0 6px;
}
.header-social li a {
    --color-link: var(--color-alpha);
    color: var(--color-link);
    font-size: 26px;
}



/* 4.30 - footer menu */
.far-footer {
    background-color: var(--color-echo);
}
.far-footer-wrapper {
    min-height: 436px;
    background-position: 0 calc(100% + 40px);
    background-repeat: no-repeat;
    width: 100%;
    margin: 0 auto;
}
@media screen and (max-width: 781px) {
    .far-footer-wrapper {
        min-height: 170px;
        background-size: 36vw;
        background-position: -10px calc(100% + 10px);
    }
}

/* 4.31 - footer social links */
.footer-social {
    background: var(--white);
    margin: 0 auto;
    padding: 66px 0;
}
.footer-social li {
    list-style: none;
    display: inline-block;
    margin: 0 6px;
}
.footer-social li a {
    --color-link: var(--color-bravo);
    color: var(--color-link);
    font-size: 42px;
}
@media screen and (max-width:781px) {
    .footer-social {
        padding: 30px 0;
    }
    .footer-social li a {
        font-size: 24px;
    }
}

/* 4.32 - footer signup form */
#footer-signup {
    background: var(--color-alpha);
    min-height: 438px;
    color: var(--white);
}
#footer-signup h2 {
    text-transform: capitalize;
    font-size: 40px;
    font-family: var(--font-family-h);
}
#footer-signup .content {
    max-width: 500px;
}
@media screen and (max-width:781px) {
    #footer-signup {
        min-height: 244px;
        padding: 3em 0 1.5em 0;
    }
    #footer-signup h2{
        font-size: 30px;
    }
    #footer-signup .content{
        padding: 0 1rem;
    }
}

/* 4.33 - footer orange links */
.far-footer-link-wrapper {
    --color-link: var(--white);
    max-width: var(--page-width-extra);
    margin: 0 auto;
}
@media screen and (max-width: 781px) {
    .far-footer-link-wrapper {
        gap: 0;
    }
}
.far-footer-links {
    padding: 0;
    padding-top: 100px;
    gap: 0;
}
@media screen and (max-width: 781px) {
    .far-footer-links {
        --gap: 0;
        padding: 27px 0 35px 0;
    }
}
.far-footer-links li {
    list-style: none;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
}
.far-footer-links li:nth-child(odd):nth-last-child(-n + 2),
.far-footer-links li:nth-child(even):last-child {
    border-bottom: 0;
}
.far-footer-links a {
    color: var(--color-link);
    display: block;
    font-family: var(--font-family-alt);
    font-size: var(--font-size-h2);
    font-weight: normal;
    font-stretch: condensed;
    font-style: normal;
    letter-spacing: 0.6px;
    padding: 15px 0;
    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
}
@media screen and (max-width: 781px) {
    .far-footer-links a {
        font-size: 16px;
    }
}

/* 4.34 - footer orange ribbons */
.far-footer-ribbon {
    height: 66px;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    background-color: var(--color-delta);
    background: repeating-linear-gradient(32deg, var(--white), var(--white) 1px, var(--color-delta) 1px, var(--color-delta) 12px);
}
@media screen and (max-width: 781px) {
    .far-footer-ribbon {
        height: 36px;
        background: repeating-linear-gradient(45deg, var(--white), var(--white) 1px, var(--color-delta) 1px, var(--color-delta) 5px);
    }
}
.far-ribbon-spacer {
	height: 66px;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    margin-top: -33px;
    margin-bottom: -33px;
    position: absolute;
}
.ribbon-edge {
	height: 66px;
	width: 30%;
	transform: skew(20deg);
    margin-left: auto;
    margin-right: -20px;
    background-color: var(--color-delta);
    background: repeating-linear-gradient(88deg, var(--white), var(--white) 1px, var(--color-delta) 1px, var(--color-delta) 8px);
}
@media screen and (max-width: 781px) {
    .far-ribbon-spacer {
        height: 38px;
        margin-top: -20px;
        margin-bottom: -16px;
    }
    .ribbon-edge {
        height: 38px;
        width: 36vw;
        background: repeating-linear-gradient(88deg, var(--white), var(--white) 1px, var(--color-delta) 1px, var(--color-delta) 5px);
    }
}

/* 4.35 - footer privacy links */
.far-footer-privacy-links {
    --color-link: var(--color-alpha);
    background: var(--color-bravo);
}
.far-footer-privacy-links ul {
    padding: 30px 0 20px 0;
    margin: 0 auto;
}
.far-footer-privacy-links ul li {
    display: block;
    list-style: none;
    margin: 0 var(--spacing-text);
}
.far-footer-privacy-links a {
    color: var(--color-link);
    font-family: var(--font-family-alt);
    font-size: 20px;
    font-weight: normal;
    font-stretch: condensed;
    font-style: normal;
    letter-spacing: 0.6px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}
@media screen and (max-width: 781px) {
    .far-footer-privacy-links {
        padding: 0 calc(var(--padding) *2);
    }
    .far-footer-privacy-links ul {
        gap: 0 var(--gap);
    }
    .far-footer-privacy-links ul li {
        line-height: 1;
        margin: 0;
        text-align: center;
        width: 100%;
    }
    .far-footer-privacy-links a {
        font-size: 14px;
    }
}

/* 4.36 - footer copyright */
.far-footer-copyright {
    border-top: 1px dashed rgba(255, 255, 255, 0.5);
    width: 100%;
    background: var(--color-bravo);
    color: var(--white);
    height: 83px;
    font-family: var(--font-family-alt);
    font-size: 20px;
    font-weight: normal;
    font-stretch: condensed;
    font-style: normal;
    line-height: 0.55;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
}
@media screen and (max-width: 781px) {
    .far-footer-copyright {
        padding: 12px 0 13px 0;
        font-size: var(--font-size-sm);
        height: auto;
        line-height: 1.5;
    }
}