/**
 * Styles for Header and Social links
 */

/**
 * Header and menu
 */
.header-bar {
    --ffs-main-menu-colour: #00364cd4;
    --ffs-sub-lvl1-colour: #295772;
    --ffs-sub-lvl2-colour: #3b6780;
    --ffs-main-menu-sticky-colour: #00364ced;
    --ffs-sub-lvl1-sticky-colour: #295772;
    --ffs-sub-lvl2-sticky-colour: #3b6780;
    --ffs-header-socials-bg: #4f759cd4;
    --ffs-transition-timing: 250ms ease;
    --ffs-menu-bg-transition: background-color var(--ffs-transition-timing);
    --ffs-border-transition: border-color var(--ffs-transition-timing);
    --ffs-socials-timing: 750ms ease-out;
    --ffs-follow-us-transition: background-color var(--ffs-transition-timing), border-radius var(--ffs-socials-timing);
    --ffs-header-socials-transition: all var(--ffs-socials-timing);
}
.masthead,
.phantom-sticky .sticky-on.masthead:not(.masthead-mobile),
.masthead:not(.mixed-header) {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1), transparent) !important;
}
#primary-menu > .menu-item,
#primary-menu + .mini-widgets .custom-icon,
#primary-menu .sub-nav {
    -webkit-transition: var(--ffs-menu-bg-transition);
	-moz-transition: var(--ffs-menu-bg-transition);
	-ms-transition: var(--ffs-menu-bg-transition);
	-o-transition: var(--ffs-menu-bg-transition);
	transition: var(--ffs-menu-bg-transition);
}
#primary-menu > .menu-item,
#primary-menu + .mini-widgets .custom-icon {
    background-color: var(--ffs-main-menu-colour);
}
.masthead.sticky-on #primary-menu > .menu-item,
.masthead.sticky-on #primary-menu + .mini-widgets .custom-icon {
    background-color: var(--ffs-main-menu-sticky-colour);
}
#primary-menu > .menu-item:first-of-type {
    border-top-left-radius: var(--ffs-menu-radius);
    border-bottom-left-radius: var(--ffs-menu-radius);
    padding-left: 10px;
}
#primary-menu + .mini-widgets .custom-icon {
    padding: 16px 20px 16px 12px;
    border-top-right-radius: var(--ffs-menu-radius);
    border-bottom-right-radius: var(--ffs-menu-radius);
}
#primary-menu .sub-nav {
    border-radius: var(--ffs-menu-radius);
    background-color: var(--ffs-sub-lvl1-colour);
}
.masthead.sticky-on #primary-menu .sub-nav {
    background-color: var(--ffs-sub-lvl1-sticky-colour);
}
#primary-menu .sub-nav .sub-nav {
    background-color: var(--ffs-sub-lvl2-colour);
}
.masthead.sticky-on #primary-menu .sub-nav .sub-nav {
    background-color: var(--ffs-sub-lvl2-sticky-colour);
}
#primary-menu > .menu-item-has-children > a .menu-text::after {
    content: ' \002b';
    display: inline;
}
#primary-menu > .current-menu-ancestor > a .menu-text::after,
#primary-menu .sub-nav .current-menu-ancestor > a .menu-item-text::after {
    content: ' \2212';
    display: inline;
}
#primary-menu .sub-nav .menu-item-text {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
#primary-menu > .menu-item > .sub-nav {
    padding-block: 15px;
    margin-top: 12px;
}
#primary-menu > .menu-item > .sub-nav::before {
    display: block;
    content: '';
    height: 26px;
    width: 100%;
    margin-top: -30px;
}
#primary-menu > .menu-item > .sub-nav::after {
    display: block;
    position: absolute;
    content: '';
    top: -12px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 8px 15px 8px;
    border-color: transparent transparent var(--ffs-sub-lvl1-colour) transparent;
    transform: rotate(0deg);
    -moz-transition: var(--ffs-border-transition);
	-ms-transition: var(--ffs-border-transition);
	-o-transition: var(--ffs-border-transition);
	transition: var(--ffs-border-transition);
}
#primary-menu > .menu-item:not(.last) > .sub-nav::after {
    left: 25px;
}
#primary-menu > .menu-item.last > .sub-nav::after {
    right: 25px;
}
.masthead.sticky-on #primary-menu > .menu-item > .sub-nav::after {
    border-color: transparent transparent var(--ffs-sub-lvl1-sticky-colour) transparent;
}
.header-bar .popup-search-wrap,
.mini-search .searchform .popup-search-wrap {
    background-color: var(--ffs-light-blue-outline);
    border-radius: calc(var(--ffs-menu-radius) * 1.25);
    padding: 4px;
    overflow: hidden;
}
.header-bar .popup-search-wrap .searchform-s,
.mini-search .searchform .popup-search-wrap .searchform-s {
    border-radius: var(--ffs-menu-radius);
}
.header-bar .popup-search-wrap,
.masthead .header-bar .popup-search .popup-search-wrap {
    top: calc(100% + 16px);
}
.header-bar .popup-search-wrap::before {
    border-bottom-color: var(--ffs-light-blue-outline);
}
/* mobile menu */
.dt-mobile-header .mobile-main-nav > li.has-children > a:after,
.dt-mobile-header .mobile-main-nav .next-level-button svg,
.dt-mobile-header .mobile-main-nav > li.menu-item-language > a:after {
    color: #ffffff;
    fill: #ffffff;
}
/* mobile search form */
.mobile-mini-widgets-in-menu .mini-search .searchform {
    position: relative;
}
.mobile-mini-widgets-in-menu .mini-search > .searchform > .popup-search-wrap {
    position: absolute;
    top: 40px !important;
    width: 220px;
    max-width: 90vw;
}


/**
* Social media links
*/
.header-bar .mini-widgets .microwidget-btn {
    padding: 14px;
    margin: 0;
    background-color: var(--ffs-header-socials-bg);
    border-radius: var(--ffs-menu-radius);
    -webkit-transition: var(--ffs-follow-us-transition);
	-moz-transition: var(--ffs-follow-us-transition);
	-ms-transition: var(--ffs-follow-us-transition);
	-o-transition: var(--ffs-follow-us-transition);
	transition: var(--ffs-follow-us-transition);
}
.header-bar .mini-widgets:not(.expanded) .microwidget-btn:hover {
    background-color: var(--ffs-main-menu-colour);
}
.header-bar .mini-widgets .soc-ico.show-on-desktop {
    box-sizing: border-box;
    position: relative;
    padding: 10.5px 0 10.5px 0;
    max-height: 48px;
    overflow: hidden;
    background-color: var(--ffs-header-socials-bg);
    margin: 0;
    border-radius: var(--ffs-menu-radius);
    white-space: nowrap;
    -webkit-transition: var(--ffs-header-socials-transition);
	-moz-transition: var(--ffs-header-socials-transition);
	-ms-transition: var(--ffs-header-socials-transition);
	-o-transition: var(--ffs-header-socials-transition);
	transition: var(--ffs-header-socials-transition);
    max-width: 0;
}
.header-bar .mini-widgets.expanded .microwidget-btn {
    border-radius: var(--ffs-menu-radius) 0 0 var(--ffs-menu-radius);
}
.header-bar .mini-widgets.expanded .soc-ico.show-on-desktop {
    border-radius: 0 var(--ffs-menu-radius) var(--ffs-menu-radius) 0;
    padding-right: 14px;
    max-width: 400px;
}
#primary-menu .menu-item a > .menu-item-text,
.top-bar .soc-ico a, .masthead .soc-ico a,
.mobile-mini-widgets-in-menu .soc-ico a,
.ffs-social-media-links a {
    --ffs-soc-media-transition: opacity 250ms ease;
    -webkit-transition: var(--ffs-soc-media-transition);
    -moz-transition: var(--ffs-soc-media-transition);
    -ms-transition: var(--ffs-soc-media-transition);
    -o-transition: var(--ffs-soc-media-transition);
    transition: var(--ffs-soc-media-transition);
    opacity: 1;
}
#primary-menu .menu-item a:hover > .menu-item-text,
.top-bar .soc-ico a:hover, .masthead .soc-ico a:hover,
.masthead .mini-widgets .soc-ico a:hover,
.masthead .top-bar .mini-widgets .soc-ico a:hover,
.mobile-mini-widgets-in-menu .soc-ico a:hover,
.ffs-social-media-links a:hover {
    opacity: 0.7;
}
.top-bar .soc-ico .soc-font-icon,
.masthead .top-bar .mini-widgets .soc-ico a .soc-font-icon,
.masthead > .top-bar > .mini-widgets > .soc-ico > a > .soc-font-icon,
.masthead .mini-widgets .soc-ico a:not(:hover) .soc-font-icon,
.masthead.inline-header .mini-widgets .soc-ico a:not(:hover) .soc-font-icon,
.mobile-mini-widgets-in-menu .soc-ico .soc-font-icon,
.mobile-mini-widgets-in-menu > .soc-ico > a > .soc-font-icon,
.dt-mobile-header .soc-ico a:not(:hover) .soc-font-icon,
.show-mobile-header .dt-mobile-header .soc-ico a:not(:hover) .soc-font-icon,
.ffs-social-media-links .soc-font-icon {
    color: var(--ffs-fg-text-colour) !important;
}
.top-bar .soc-ico a::before,
.top-bar .soc-ico a::after,
.top-bar .soc-ico a:hover::before,
.top-bar .soc-ico a:hover::after,
.masthead .soc-ico a::before,
.masthead .soc-ico a::after,
.masthead .soc-ico a:hover::before,
.masthead .soc-ico a:hover::after,
.mobile-mini-widgets-in-menu .soc-ico a::before,
.mobile-mini-widgets-in-menu .soc-ico a::after,
.mobile-mini-widgets-in-menu .soc-ico a:hover::before,
.mobile-mini-widgets-in-menu .soc-ico a:hover::after,
.ffs-social-media-links a:hover::before,
.ffs-social-media-links a:hover::after {
    display: none;
}
.ffs-social-media-links .general-link .soc-font-icon::before {
    content: '\e800';
}

/**
 * Media Queries
 */
@media (min-width: 480px) {
    .mobile-main-nav li.menu-item > a,
    .mobile-main-nav .sub-nav > li.menu-item > a {
        flex-grow: 0;
        max-width: calc(100% - 55px);
        padding-right: 25px;
    }
}
@media (max-width: 1722px) {
    body .masthead.sticky-mobile-on,
    body .sticky-mobile-on.masthead:not(.side-header) {
        background: transparent !important;
        background-color: var(--ffs-mobile-menu-bg-colour) !important;
    }
}
@media (min-width: 1723px) {
    .masthead.sticky-off .top-bar,
    .masthead:not(.side-header):not(.side-header-menu-icon).sticky-off .top-bar {
        margin-bottom: -20px;
    }
}