/*!
Theme Name: CBD
Theme URI: https://www.cbwebsitedesign.co.uk/
Author: Creative Brand Design
Author URI: https://www.cbwebsitedesign.co.uk/
Description: Creative Brand Design
Version: 6.3
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cbd
*/

/* Admin Bar */
.admin-bar .header {
	top: 32px;
}

/* Group Block */

main > .wp-block-group {
    width: 100%;
    max-width: 105rem;
    padding: 0 1.5rem;
    margin: 4rem auto;
}

@media (min-width: 640px) {
    main > .wp-block-group {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    main > .wp-block-group {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    main > .wp-block-group {
        max-width: 1024px;
    }
}

@media (min-width: 1200px) {
    main > .wp-block-group {
        width: 87.5vw;
    }
}

@media (min-width: 1280px) {
    main > .wp-block-group {
        max-width: 1280px;
    }
}

@media (min-width: 1536px) {
    main > .wp-block-group {
        max-width: 1536px;
    }
}

.wp-block-group table {
    background: var(--color-navy);
    color: #fff;
    font-weight: 500;
    border-radius: 0.5rem;
}

.wp-block-group table td {
    padding: 1em;
    border-color: rgba(255,255,255,0.4);
}

.wrapper {
	position: relative;
	z-index: 0;
}

.error-message {
    color: red;
    font-weight: bold;
    margin-bottom: 10px;
}

@media (min-width: 1200px) {
	.header__menu .menu{
		display: flex;
	}
	.header__menu .menu__btn-box{
		flex-wrap: nowrap;
	}
	
	.lg\:text-center{
		text-align: center;
	}
}
@media (max-width: 1199px) {
	.admin-bar .menu__body._active {
		top: 32px;
		height: calc(100% - 32px);
	}
	.md\:flex-column-reverse{
		flex-direction: column-reverse;
	}
}
@media (max-width: 991px) {
	.noUi-target{
		width: 95%;
		margin: auto;
	}
	.breadcrumbs{
		width: 93vw;
	}
	.tabs__nav{
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.md\:text-center{
		text-align: center;
	}
	.md\:mr-auto{
		margin-right: auto;
	}

}

@media (max-width: 782px) {
	.admin-bar .header {
		top: 46px;
	}

	.admin-bar .menu__body._active {
		top: 46px;
		height: calc(100% - 46px);
	}
	.xs\:flex-column-reverse{
		flex-direction: column-reverse;
	}
}

@media (max-width: 600px) {
	#wpadminbar {
		position: fixed;
	}

}

@media (min-width: 1200px) {
	.admin-bar .menu__sublist {
	    top: - calc(var(--header-height) - 1.25rem + 32px);
	}

}

@media (min-width: 1024px) {
    .lg\:max-h-\[75rem\] {
        max-height: 75rem;
    }
}

@media (min-width: 1670px) {
    .xl\:max-h-\[65rem\] {
        max-height: 65rem;
    }
}


.pt-32 {
    padding-top: 9rem
}
form button .arrow{
    display: none;
}
.gform_footer.top_label{
    position: relative;
    justify-content: flex-end;
}
.gform_ajax_spinner{
    width: 20px;
    height: 20px;
    position: absolute;
    right: -2rem;
    top: 1.5rem;
}
.gfield_validation_message{
    padding: 0.5rem !important;
}
.ginput_container input, .ginput_container textarea{
    border-radius: 25px;
    line-height: 2rem;
    border-color: #b0b0b0 !important;
    padding: 0.5rem 1.5rem !important;
    transition: box-shadow 0.3s;
}
.ginput_container input::placeholder, .ginput_container textarea::placeholder{
    color: #b0b0b0 !important;
    font-size: 1rem;
    font-weight: 600;
    /* padding: 0rem 0.8rem; */
}
.ginput_container input:focus, .ginput_container textarea:focus, .ginput_container input:hover, .ginput_container textarea:hover, .ginput_container input:focus, .ginput_container textarea:focus{
    /* border-color: #22024e !important; */
    box-shadow: 0 0 10px 0px #22024e27;
}
.gform-field-label{
    color: #22024e;
    font-size: 1.1rem !important;
}


.calendly-inline-widget{
	height: 44rem !important;
}
[data-typeit-id]:before {
    position: absolute;
}
.text-block a{
	color: var(--color-primary); 
	text-decoration: underline;
	font-weight: bold;
}
.post-password-form{
	gap: 2rem;
    padding: 15rem 1.5rem 8rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    font-size: 2rem;
}
.post-password-form input[type="submit"] {
	--ripple-color: var(--color-primary);
    align-items: center;
    background-color: var(--color-white);
    border: .0625rem solid var(--color-primary);
    border-radius: .3125rem;
    color: var(--color-primary);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.125rem;
    font-weight: 700;
    gap: .625rem;
    line-height: 1.29;
    outline: none;
    overflow: hidden;
    padding: .625rem 1.125rem;
    position: relative;
    text-align: center;
    transition: border-color var(--transition-duration-primary), background-color var(--transition-duration-primary), color var(--transition-duration-primary);
    white-space: nowrap;
    z-index: 0;
}

@keyframes bounce-in-left {
  0% {
    transform: translateX(0);
  }
  50% { transform: translateX(5rem); }
  100% { transform: translateX(0); }
}

.bounce-in-left.aos-animate .noUi-handle {
  animation: bounce-in-left 2s ease;
}
.min-h-\[12rem\] {
    min-height: 9rem;
}
@media (min-width: 1024px) {
	.min-h-\[12rem\] {
		min-height: 35rem;
		font-size: 6rem !important
	}
}
@media (min-width: 1524px) {
	.min-h-\[12rem\] {
		min-height: 25rem;
		font-size: 6rem !important
	}
}
.breadcrumbs{
	flex-wrap: wrap;
}
.noUi-horizontal .noUi-handle{
	--dot-size: 2.5rem;
    top: -0.8rem;
}
.footer-top__menu>li.current-menu-item>a, .menu__body>ul:not(.soc)>li.current-menu-item>a{
	color: var(--color-green-01);
}
._active .hover\:text-white{
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}
._active.group .group-hover\:opacity-100{
	visibility: visible;
}
._active.group .group-hover\:opacity-100{
	opacity: 1
}
.max-w-\[29\.0rem\] {
    max-width: 29rem
}
.max-w-\[70\.125rem\] {
    max-width: 67.125rem;
}
.recent-posts .post-item{
    text-decoration: unset !important;
}
.author-box{
	border-bottom: .0625rem solid #f1f1f1;
}
.recent-posts .post-thumbnail{
	height: 6rem;
	transition: 0.3s;
}
.recent-posts .post-item:hover .post-thumbnail{
	box-shadow: 2px 5px 10px rgb(0 0 0 / 15%)
}
   
.recent-posts .post-info h4{
	line-height: 1.3;
}
.text-block{
	line-height: 1.5;
}
.article-card img{
	transition: transform 0.8s;
}
.article-card:hover img{
	transform: scale(1.1);
}
#swiper-partners .swiper-pagination .swiper-pagination-bullet-active{
	background-color: var(--color-gold);
    border-color: var(--color-gold);
}
@media (min-width: 600px) {
	.recent-posts .post-thumbnail {
    	height: 12rem;
	}
}

@media (min-width: 1024px) {
    .lg\:basis-\[11\.875rem\] {
        flex-basis: 11.875rem;
    }

    .lg\:size-\[11\.875rem\] {
        height: 11.875rem;
        width: 11.875rem;
    }

	.lg\:min-h-\[6\.25rem\] {
        min-height: 6.25rem
    }
	.lg\:max-w-\[23\.875rem\] {
    	max-width: 23.875rem;
	}
	.recent-posts .post-thumbnail {
    	height: 6rem;
	}
	.mob_vissible{
		display: none;
	}

}
.labels-hero{
	width: 95vw;
}

.icon-x:before {
    content: url('data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22 version%3D%221.1%22 id%3D%22Layer_1%22 width%3D%2216px%22 height%3D%2216px%22 viewBox%3D%220 0 24 24%22 fill%3D%22white%22 style%3D%22enable-background%3Anew 0 0 24 24%3B%22 xml%3Aspace%3D%22preserve%22%3E%3Cpath d%3D%22M14.095479%2C10.316482L22.286354%2C1h-1.940718l-7.115352%2C8.087682L7.551414%2C1H1l8.589488%2C12.231093L1%2C23h1.940717%0A l7.509372-8.542861L16.448587%2C23H23L14.095479%2C10.316482z M11.436522%2C13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339%0A l5.58978%2C7.82155l0.867949%2C1.218704l7.26506%2C10.166271h-2.981339L11.436522%2C13.338465z%22/%3E%3C/svg%3E');
    display: inline-block;
    width: 16px;
    height: 16px;
}

.service-tabs li:hover img, .service-tabs li._active img{
	filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(257deg) brightness(107%) contrast(101%);
}


@media (max-width: 1024px) {
    .md\:basis-\[9rem\] {
    	flex-basis: 9rem;
	}
	.md\:size-\[9rem\] {
		height: 9rem;
		width: 9rem;
	}
	.mob_hidden{
		display: none;
	}


}
@media (min-width: 1200px) and (max-width: 1279px) {
	.header__menu .menu{
		gap: .75rem 0.7rem;
	}
	.header__menu .menu__body>ul:not(.soc)>li>a{
		font-size: 0.7rem !important;
	}
}

.hover\:text-green._active{
    color: var(--color-green-01);
}

@media (max-width: 479px) {
    .footer-top__logo-slogan {
        flex-direction: row;
    }
}

.h-\[12rem\] {
	height: 12rem;
}

.breadcrumbs>li:not(:last-child):after {
    display:none;
}
.breadcrumbs>li:not(:last-child) a:after {
    background-color: var(--color-gray-dark);
    content: "";
    height: .0625rem;
    width: 1rem;
	display: inline-block;
	vertical-align: middle;
    margin-left: 10px;
}
.icon-navy{
	filter: invert(12%) sepia(21%) saturate(7142%) hue-rotate(252deg) brightness(84%) contrast(119%);
}
.w-36 {
    width: 9rem;
}
.h-36 {
    height: 9rem;
}
.header__logo, ._scroll-up .header__logo{
	background: var(--color-navy);
}
.header__logo svg{
	width: 100%;
	height: 100%;
}
.header._scroll-down .header__logo{
	background: var(--color-white);
}
.header .header__logo .logo_colors{
	transition: var(--transition-duration-primary);
}
.header._scroll-down .header__logo .logo_colors{
	fill: #22024e !important;
}
/* .header._scrolled .header__logo img:first-child:not(:last-child){
	display: none;
}
.header:not(._scrolled) .header__logo img + img{
	display: none;
} */
.hover\:text-navy:hover {
    color: var(--color-navy)
}

/* Custom Base */
@media (min-width: 1200px) {
    .xl\:basis-1\/2 {
        flex-basis: 50%;
    }
}
@media (min-width: 1200px) {
    .xl\:max-w-\[50\%\] {
        max-width: 50%;
    }
	.lg\:min-w-\[19rem\] {
    	min-width: 19rem;
	}
}
@media (max-width: 1280px) {
	.lg\:flex-column-reverse{
	flex-direction: column-reverse;
	}
}

@media (min-width: 1280px) {
    .menu__body>ul:not(.soc) {
        gap: .75rem 1.0875rem;
    }
	.step:after {
        content: '';
        position: absolute;
        top: 35%;
        transform: translateY(0%);
        left: 25%;
        display: block;
        width: 100%;
        height: 7px;
        background: #3fb8af47;
        z-index: -1;
	}
	.step:last-child:after{
		display: none;
	}

	.step::after {
		transition: width 1.2s linear 0s;
		width: 0%;
	}

	.step.aos-animate::after {
		width: 100%;
	}

	.step.aos-animate[data-aos-delay='200']::after {
		transition-delay: 0.2s !important;
	}

	.step.aos-animate[data-aos-delay='700']::after {
		transition-delay: 0.8s !important;
	}

	.step.aos-animate[data-aos-delay='1200']::after {
		transition-delay: 1.2s !important;
	}
	
	.xxl\:basis-1\/2 {
        flex-basis: 50%;
    }
	.xxl\:max-w-\[50\%\] {
        max-width: 50%;
    }
}
@media (min-width: 1580px) {
	.menu__body>ul:not(.soc) {
        gap: .75rem 2.0875rem;
    }
	.menu__body>ul:not(.soc)>li>a{
		font-size: 1.125rem;
	}
}
.min-w-\[14rem\] {
	min-width: 14rem;
}

@media (max-width: 767px) {
	.mb\:column-reverse {
		flex-direction: column-reverse;
	}
}
.wrap-reverse {
	flex-wrap: wrap-reverse;
}
.w-24 {
	width: 6rem;
}
.sidebar-post{
	position: sticky;
	top: 2rem;
}
/* Single Resources */
@media (min-width: 1024px) {
    .sidebar-post {
        position: absolute;
		top: -2rem;
		width: 20rem;
    }
}
@media (max-width: 767px) {
	.sidebar-post .recent-posts {
		display: none;
	}
}

/* Container */
@media (min-width: 1200px) {
	.container {
		width: 87.5vw;
	}
}

.footer-bottom__wrap {
    display: flex;
    justify-content: space-between;
}

/* Tabs small screens */
.tabsClass {
    min-width: 10rem;
}

@media (max-width: 1200px) {
    .tabsClass .hero-benefit-card__title {
        font-size: 1rem;   
    }
}

@media (max-width: 992px) {
    #Services .container {
        padding: 0;
    }
    #Services .servicesTitle {
        padding: 0 1rem;
    }
    #Services .basis-full {
        padding-left: 2.25rem;
        padding-right: 2.25rem;
    }
    #service-tabs {
        column-gap: .25rem;
    }
    .tabsClass .innerTab {
        flex-direction: column;
    }
    .hero-benefit-card__title {
        text-align: center;
    }
    .tabsClass {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        min-width: 5rem;
    }
    .tabsClass .hero-benefit-card__title {
        font-size: 0.6rem;
    }
}

@media (max-width: 448px) {
    .tabsClass {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        min-width: 4rem;
        max-width: 4rem;
    }
    
    #service-tabs {
        justify-content: space-around;
    }
}

/* Embed Block */

.wp-block-embed.aligncenter .wp-block-embed__wrapper {
	position: relative;
	margin: 3rem auto;
	aspect-ratio: 16 / 9;
	width: min(1024px, 90vw);
}

.wp-block-embed.aligncenter iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Main Menu Dropdown */
.header__menu .menu-item-has-children a {
    position: relative;
}

.header__menu .menu-item-has-children:after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2322024e' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
    height: 15px;
    width: 15px;
    display: inline-block;
    transition: all 0.5s;
}

.header__menu .menu-item-has-children:hover:after {
    /*transition: background ease-in-out .5s;*/
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2356bcbb' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
}

.header__menu .menu-item-has-children:hover .sub-menu {
    display: block !important;
}

.header__menu .menu-item-has-children .sub-menu {
    position: absolute;
    opacity: 0;
    display: none;
    width: 100%;
    box-shadow: 2px 2px 6px 0px rgba(34, 2, 78, 0.3);
    border-radius: .3125rem;
}

.header__menu .menu-item-has-children:hover .sub-menu {
    opacity: 1;
    display: block;
}

.header__menu .menu-item-has-children .sub-menu li a {
    color: var(--color-navy);
    display: inline-block;
    font-weight: 500;
    line-height: 116.67%;
    padding: 0 .25rem;
}

.header__menu .menu-item-has-children .sub-menu li a:hover {
    color: var(--color-green-01);
}

.header__menu .menu-item-has-children .sub-menu li {
    padding: 0.5rem 0;
}

@media(max-width: 768px) {
    .header__menu .menu-item-has-children .sub-menu {
        position: inherit;
        box-shadow: unset;
        border-radius: unset;
        opacity: 1;
    }
    
    .header__menu .menu-item-has-children .sub-menu li:first-of-type {
        border-top: .0625rem dashed var(--color-primary);
    }
    
    .header__menu .menu-item-has-children .sub-menu li:not(:last-child) {
        border-bottom: .0625rem dashed var(--color-primary);
    }
    
    .header__menu .menu-item-has-children:after {
        content: '';
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%2322024e' d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");
        height: 25px;
        width: 25px;
        display: inline-block;
        transition: all 0.5s;
        position: absolute;
        right: 0;
        top: 0.5rem;
    }
}


/* Video Pop-up */
.pop-up-wrap.pop-up-hidden {
    pointer-events: none;
    opacity: 0;
}

.pop-up-wrap {
    pointer-events: auto;
    opacity: 1;
    z-index: 99;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100vh;
    padding: 20px 0;
    transition: all .4s cubic-bezier(.215,.61,.355,1);
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    overflow: hidden auto;
}

.pop-up-wrap:before {
    content: "";
    z-index: 0;
    opacity: .8;
    background-color: #0d3137;
    width: 100%;
    height: 100%;
    transition: opacity .4s cubic-bezier(.215,.61,.355,1);
    position: fixed;
    top: 0;
    left: 0;
}

.pop-up-wrap .pop-up {
    --tw-scale-x: 100%;
    --tw-scale-y: 100%;
    --tw-scale-z: 100%;
    scale: var(--tw-scale-x)var(--tw-scale-y);
    width: min(100%,120rem);
    transition: all .8s cubic-bezier(.215,.61,.355,1);
}

.pop-up-wrap.pop-up-hidden .pop-up {
    --tw-scale-x: 95%;
    --tw-scale-y: 95%;
    --tw-scale-z: 95%;
    scale: var(--tw-scale-x)var(--tw-scale-y); 
}

.pop-up-wrap .pop-up-content {
    background-color: var(--color-white);
    width: 100%;
    min-height: 50vh;
    padding: calc(.25rem*10);
    padding-block: calc(.25rem*16);
    text-align: center;
    color: var(--color-black);
    z-index: 1;
    border-radius: 2rem;
    margin-inline: auto;
    position: relative;
    overflow: hidden;
    box-shadow: 1px 1px 30px #00000017;
}

.pop-up-wrap .icon-close {
    transform: origin;
    cursor: pointer;
    z-index: 3;
    border-radius: 3.5px;
    justify-content: center;
    align-items: center;
    width: 51px;
    height: 51px;
    font-weight: 100;
    line-height: .4;
    transition: all .5s cubic-bezier(.215,.61,.355,1);
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
}

.pop-up-wrap .icon-close span:nth-last-of-type(2) {
    transform: rotate(-45deg);
}

.pop-up-wrap .icon-close span {
    background-color: var(--color-black);
    width: 30px;
    height: 1px;
    position: absolute;
    transform: rotate(45deg);
}

.video-box {
    width: 100%;
    height: 36vmax;
    position: relative;
}

.size-full {
    width: 100%;
    height: 100%;
}

.video-js .vjs-tech {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.video-js {
    padding-top: 50% !important;
}

@media(min-width: 640px) {
    .pop-up-wrap .pop-up-content {
        padding: calc(.25rem*12);
    }
}

@media(min-width: 1025px) {
    .pop-up-wrap {
        align-items: center;
    }
    
    .pop-up-wrap .pop-up-content {
        padding: calc(.25rem*16);
        text-align: left;
        border-radius: 4rem;
    }
    
    .pop-up-wrap .icon-close {
        top: 2rem;
        right: 2rem;
    }
}

@media(min-width: 1281px) {
    .pop-up-wrap .pop-up-content {
        padding: calc(.25rem*24);
    }
}

.vistage-speaker-robert-day .hero-text span {
    display: block;
    width: 100%;
}

/* ==========================================================================
   Search — results page, form and header overlay
   Hand-written rather than composed from utilities: the compiled Tailwind
   bundle (css/style.css) is purged to only the classes the theme used at
   build time and there is no build source to regenerate it, so any new
   utility class would silently do nothing. The results grid and cards reuse
   the Insights markup verbatim, so those styles come from the bundle.
   ========================================================================== */

/* Form ------------------------------------------------------------------- */
.search-form__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.search-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: calc(.25rem * 3);
	align-items: stretch;
}

.search-form__field {
	flex: 1 1 16rem;
	min-width: 0;
	/* 16px floor: anything smaller triggers iOS auto-zoom on focus. */
	font-size: 1rem;
	font-family: inherit;
	line-height: 1.5;
	color: var(--color-navy);
	background: var(--color-white);
	border: 1px solid #dcdcdc;
	border-radius: 999px;
	padding: calc(.25rem * 4) calc(.25rem * 6);
	/* Meets the 44px minimum touch target. */
	min-height: 3.25rem;
	transition: border-color .2s ease, box-shadow .2s ease;
	appearance: none;
	-webkit-appearance: none;
}

.search-form__field::placeholder {
	color: var(--color-gray-dark);
	opacity: 1;
}

.search-form__field:focus {
	outline: none;
	border-color: var(--color-green-01);
	box-shadow: 0 0 0 3px rgba(86, 188, 187, .35);
}

.search-form__submit {
	flex: 0 0 auto;
	min-height: 3.25rem;
	cursor: pointer;
}

/* Results page ----------------------------------------------------------- */

/* The header is fixed, and Insights clears it with an editor-inserted
   wp-block-spacer. A template cannot rely on page content, so reserve the
   equivalent room here. */
.search-page {
	padding-top: 4rem;
}

@media (min-width: 768px) {
	.search-page {
		padding-top: 8rem;
	}
}

/* One flex item, so the label and the query wrap together as a single text
   run. As separate items they competed for width and the query broke mid-word
   on narrow screens. */
.search-page__heading {
	min-width: 0;
}

.search-page__term {
	color: var(--color-green-03);
	/* break-word, not anywhere: only break a word that cannot fit on its own
	   line, so ordinary queries still wrap at spaces. */
	overflow-wrap: break-word;
}

.search-page__count {
	margin: calc(.25rem * 4) 0 0;
	font-size: .9375rem;
	color: #5a5a5a;
}

/* Cards ------------------------------------------------------------------ */

/* Insights labels nothing, but search mixes post types, so a small eyebrow
   tells people what they are about to open. */
.search-card__type {
	display: inline-block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-green-03);
	margin-bottom: calc(.25rem * 2);
}

/* Stretch the Read More link across the card so the whole card is clickable,
   while keeping exactly one link per result for screen readers. */
.search-card {
	position: relative;
	/* Column + margin-top:auto on the link pins Read More to the bottom. Cards
	   already stretch to equal height via h-full, but results with no excerpt
	   left the link floating mid-card against its neighbour. */
	display: flex;
	flex-direction: column;
}

.search-card__link {
	margin-top: auto;
}

.search-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.search-card__link:focus-visible {
	outline: 2px solid var(--color-green-01);
	outline-offset: 4px;
	border-radius: 2px;
}

/* 136 of the site's pages have no featured image, which would otherwise leave
   an empty padded box. Fall back to the site logo on a navy tile — the same
   treatment .header__logo already gives it, so the logo's default white
   colours are correct without overriding its fills. */
.search-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-navy);
}

.search-card__placeholder p {
	margin: 0;
	line-height: 0;
}

.search-card__placeholder svg {
	width: auto;
	height: 50%;
	max-height: 5rem;
}

/* Empty state ------------------------------------------------------------ */
.search-empty {
	max-width: 44rem;
}

.search-empty__title {
	font-size: 1.5rem;
	line-height: 1.25;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 calc(.25rem * 4);
	overflow-wrap: break-word;
}

.search-empty__text {
	margin: 0 0 calc(.25rem * 5);
	color: #4a4a4a;
	line-height: 1.6;
}

.search-empty__suggestions {
	list-style: none;
	margin: 0 0 calc(.25rem * 8);
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: calc(.25rem * 3);
}

.search-empty__suggestions a {
	display: inline-block;
	padding: calc(.25rem * 2) calc(.25rem * 4);
	border: 1px solid var(--color-green-01);
	border-radius: 999px;
	color: var(--color-navy);
	text-decoration: none;
	font-size: .9375rem;
	background: var(--color-white);
	transition: background-color .2s ease, color .2s ease;
}

.search-empty__suggestions a:hover {
	background: var(--color-green-01);
	color: var(--color-white);
}

.search-empty__suggestions a:focus-visible {
	outline: 2px solid var(--color-green-01);
	outline-offset: 2px;
}

/* Pagination ------------------------------------------------------------- */
.search-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: calc(.25rem * 2);
	margin-top: calc(.25rem * 12);
}

.search-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 calc(.25rem * 3);
	border-radius: 999px;
	border: 1px solid #e2e2e2;
	background: var(--color-white);
	color: var(--color-navy);
	text-decoration: none;
	font-size: .9375rem;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.search-pagination .page-numbers:hover {
	border-color: var(--color-green-01);
	color: var(--color-green-03);
}

.search-pagination .page-numbers.current {
	background: var(--color-navy);
	border-color: var(--color-navy);
	color: var(--color-white);
}

.search-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.search-pagination .page-numbers:focus-visible {
	outline: 2px solid var(--color-green-01);
	outline-offset: 2px;
}

/* Header nav fit ---------------------------------------------------------
   The toggle takes 44px out of the header row, which tipped the 9-item nav
   onto a second line. Buy it back by tightening the gap between nav items —
   the same lever the theme already uses to fit the nav per breakpoint (see
   the 1280 / 1580 rules earlier in this file).

   These come later in the file at equal specificity, so they win, and they
   set column-gap only — the theme's shorthand row-gap of .75rem still stands.

   The 1580 rule widens the gap to 2.0875rem and the font to 1.125rem, which
   costs more width than the extra viewport gives back: the nav wrapped there
   even before the toggle existed. Hold the tighter gap until there is
   genuinely room for it. */
@media (min-width: 1280px) {
	.menu__body > ul:not(.soc) {
		column-gap: .75rem;
	}
}

@media (min-width: 1580px) {
	.menu__body > ul:not(.soc) {
		column-gap: .875rem;
	}
}

@media (min-width: 1800px) {
	.menu__body > ul:not(.soc) {
		column-gap: 1.75rem;
	}
}

/* Header toggle ---------------------------------------------------------- */
.header__search-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* .menu__body::after paints the mobile header bar as a fixed, hit-testable
	   strip across the top of the viewport. A statically positioned button sits
	   underneath it and cannot be clicked on mobile, so match the stacking the
	   theme already gives the burger (relative / z-index 100). */
	position: relative;
	z-index: 100;
	/* 44px minimum touch target even though the glyph is 20px. */
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	align-self: center;
	/* The header is transparent and floats over both navy heroes and white
	   pages, so a flat glyph colour is unreadable on one or the other
	   (currentColor resolved to black here, on a navy hero). A white disc with
	   a navy glyph matches the adjacent CTA pills and reads on any background. */
	background: var(--color-white);
	color: var(--color-navy);
	cursor: pointer;
	border-radius: 999px;
	transition: color .2s ease, background-color .2s ease;
}

.header__search-btn:hover {
	background: var(--color-green-01);
	color: var(--color-white);
}

.header__search-btn:focus-visible {
	outline: 2px solid var(--color-green-01);
	outline-offset: 2px;
}

/* Overlay ---------------------------------------------------------------- */
.search-overlay {
	position: fixed;
	inset: 0;
	/* Above the fixed header (z-index 100). */
	z-index: 200;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: calc(.25rem * 6);
	background: rgba(34, 2, 78, .97);
	opacity: 1;
	transition: opacity .25s ease;
}

/* Needs higher specificity than .search-overlay: the class sets display:flex,
   which beats the UA stylesheet's [hidden]{display:none}, so without this the
   hidden attribute would not drop the overlay from the tab order. */
.search-overlay[hidden] {
	display: none;
}

/* Opacity only, deliberately no visibility. A visibility transition still
   computes as hidden on the frame the class is removed, and focus() on a
   hidden element is silently ignored, so the input never received focus. */
.search-overlay.is-hidden {
	opacity: 0;
	pointer-events: none;
}

.search-overlay__inner {
	position: relative;
	width: 100%;
	max-width: 46rem;
	margin-top: 12vh;
	transform: translateY(0);
	transition: transform .25s ease;
}

.search-overlay.is-hidden .search-overlay__inner {
	transform: translateY(-1rem);
}

.search-overlay__form .search-form__field {
	font-size: 1.125rem;
	min-height: 3.75rem;
}

.search-overlay__close {
	position: absolute;
	top: -3.5rem;
	right: 0;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.search-overlay__close span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.25rem;
	height: 2px;
	background: var(--color-white);
	transition: background-color .2s ease;
}

.search-overlay__close span:nth-of-type(1) {
	transform: translate(-50%, -50%) rotate(45deg);
}

.search-overlay__close span:nth-of-type(2) {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.search-overlay__close:hover span {
	background: var(--color-green-01);
}

.search-overlay__close:focus-visible {
	outline: 2px solid var(--color-green-01);
	outline-offset: 2px;
	border-radius: 999px;
}

@media (min-width: 768px) {
	.search-empty__title {
		font-size: 1.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.search-overlay,
	.search-overlay__inner,
	.search-form__field,
	.search-pagination .page-numbers {
		transition: none;
	}

	.search-overlay.is-hidden .search-overlay__inner {
		transform: none;
	}
}

/* BBB Torch Awards badge in the footer contacts column.
   The media library image has a solid dark background baked in, so contrast plus
   screen blend keys it out against the purple footer. If a transparent version is
   uploaded later, remove the last two declarations. */
.footer-top__award {
	display: block;
	margin-top: 28px;
}

.footer-top__award img {
	display: block;
	width: 150px;
	height: auto;
	max-width: 100%;
	filter: contrast(2.5);
	mix-blend-mode: screen;
}