/*
 Theme Name:   2able
 Author:       2able
 Author URI:   https://2able.co.uk/
 Template:     generatepress
 Version:      0.1
*/

* {
/* 	outline: solid 1px red; */
}

body {
    min-width: 350px; 
	/* Ensures usability on small screens */
	font-variant-ligatures: none;
}
.middle-header-wrapper, .middle-header-wrapper2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Ensures the wrapper takes full width */
    position: relative;
}

.middle-header {
    display: flex;
    align-items: center;
/*     white-space: nowrap; */
	text-align: center;
    position: relative;
    z-index: 2; /* Ensures the title is above the backgrounds */
    padding: 0 40px; /* Adds spacing around the title */
    background-color: white; /* Optional: Add a background color for clarity */
}

.middle-header2 {
	text-align: center;
    position: relative;
    z-index: 2; /* Ensures the title is above the backgrounds */
/*     padding: 0 40px; */
    background-color: white; /* Optional: Add a background color for clarity */
}

.middle-header2 {
	margin-bottom: 0 !important;
}


.middle-header {
	 display: flex;
    align-items: center; /* Keep everything aligned */
    justify-content: center; /* Center everything */
}

@media screen and (min-width: 531px) {
    .middle-header {
	   white-space: nowrap; /* Prevents breaking */;
	}
}

.middle-header::before, 
.middle-header::after,
.middle-header-wrapper2::before,
.middle-header-wrapper2::after{
    content: "";
    flex-grow: 1; /* Fills available space */
    height: 40px; /* Matches container height */
    min-width: 150px; /* Prevents extreme shrinking on small screens */
    background-size: contain; /* Ensures the entire image is visible */
    background-repeat: no-repeat;
}

.middle-header::before, .middle-header-wrapper2::before {
    background-image: url('/wp-content/uploads/2024/11/Group-1.svg');
    background-position: right;
	    margin-right: 24px;
}

.middle-header::after, .middle-header-wrapper2::after {
    background-image: url('/wp-content/uploads/2024/11/Vector-3.svg');
    background-position: left;
	    margin-left: 24px;
}

@media screen and (max-width: 1200px) {
    .middle-header::before, .middle-header-wrapper2::before {
        margin-left: -20%;
    }
	
	.middle-header::after, .middle-header-wrapper2::after {
        margin-right: -20%;
    }
}

	


/* Accesibility */

*:focus-visible, .has-link:has(.gb-container-link:focus-visible) {
    outline: red solid 8px !important;
}



nav .main-nav .mega-menu > ul:has(a:focus-visible) {
	opacity: 1 !important;
}

.insights-container .insights-content:has(a:focus-visible), .insights-excerpt-link:has(a:focus-visible) {
	transition: none !important;
}

@media screen and (min-width: 927px){
	nav .main-nav .mega-menu ul .sub-menu li > a:focus-visible {
	outline: red solid 8px !important;
}
}
/* Mobile Nav accesibility */
@media screen and (max-width: 926px){
	.sub-menu >li>a:focus-visible, .dropdown-menu-toggle:focus-visible {
		outline-width: 0 !important;
		box-shadow: inset 0 0 0 4px red !important;
	}
	
	.main-nav:has(:focus-visible) .mega-menu > ul:not(.toggled-on), body:has(:focus-visible) #site-navigation:not(.toggled) {
		display:none !important;
	}
	
	.main-nav:has(:focus-visible) .mega-menu > ul.toggled-on:has(a:focus-visible), body:has(:focus-visible) #site-navigation.toggled {
		display:block;
	}
}

/*  */
	.auto-overflow-y {
	overflow-y: auto !important;
}

html {
	font-size: 62.5%;
}

body {
	font-size: 1.8rem;
   /*  animation: fadeInAnimation ease 1s; */
   /*  animation-iteration-count: 1; */
   /*  animation-fill-mode: forwards; */
	overflow-x: hidden;
}

video source {
	display: none;
}


a, li, *:after, *:before, .gb-button {
	/* transition: all .2s ease-in-out .1s; */
}

.protected-page-login {
	color: red !important;
}

@media screen and (min-width: 769px) {
.home-hero-cards-container {
position: absolute;
top: 0;
transform: translateY(-50%);
}
}

/** Insights **/
.backdrop-blur {
backdrop-filter: blur(5px);
}

.insights-content {
transition: all .3s ease-in-out .1s;
}

.insights-excerpt-link {
opacity: 0;
position: absolute;
transition: transform .3s ease-in-out .1s, opacity .4s ease-in-out;
left: 24px;
right: 24px;
top: 90px;
height: 60%;
justify-content: flex-end !important;
	transform: translateY(120px);
}

.insights-container:hover .insights-content, .insights-container .insights-content:has(a:focus-visible) {
min-height: 250px;
}

.insights-container:hover .insights-excerpt-link, .insights-excerpt-link:has(a:focus-visible) {
opacity: 1;
transform: translateY(0px);
transition: transform .3s ease-in-out .1s, opacity .4s ease-in-out;
}

@media screen and (min-width: 300px) and (max-width: 768px) {
.insights-container:hover .insights-content {
min-height: 270px;
}
}

@media screen and (max-width: 299px) {
.insights-container:hover .insights-content {
min-height: 340px;
}
}

/** Single Post  **/
.single-post .site-content {
	padding-top: 80px;
	padding-bottom: 120px;
}

.single-post-header {
	height: clamp(30rem, 36.765vw + 12.353rem, 50rem);
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
			.single-post .site-content {
	padding-bottom: 96px;
}
}

@media screen and (max-width: 768px) {
		.single-post .site-content {
	padding-top: unset !important;
	padding-bottom: 60px;
}
}

.search-container .wp-block-search__input{
	border-radius: 12px 0 0 0;
	border: 1px solid var(--light-gray);
}

.search-container .wp-block-search__button {
	border-radius: 0 12px 12px 0;
	margin-left: 0;
}

.single-post .site-content footer.entry-meta #nav-below{
	display: flex;
	gap: 24px;
}

.single-post .site-content #nav-below .single-nav {
	width: 50%;
	margin-left: auto;
}

.single-post .site-content #nav-below .single-nav img{
	min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
	object-fit: cover;
}
.single-nav-next, .single-nav-previous {
    position: relative;
}
.single-nav-next a:before, .single-nav-previous a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	bottom: 0;
    left: 0;
    top: -150px;
    width: 100%;
    height: 100%;
    height: 200px;
}

.single-nav-next a, .single-nav-previous a {
	position: absolute;
    bottom: 0;
	left: 0;
	right: 0;
	font-size: 1.6rem;
    margin-bottom: 0px;
    color: var(--white);
	    padding: 24px;
	background-color: rgba(28, 28, 28, 0.4);
	    backdrop-filter: blur(5px);
	text-decoration: none;
	 border-bottom-right-radius: 20px;
}

/**  **/
/** Archive Pages **/

#nav-below.paging-navigation {
	margin-bottom: 140px;
	text-align: center;
	margin-top: 16px;
}

#nav-below.paging-navigation .nav-links a, 
#nav-below.paging-navigation .nav-links .dots{
	padding: 8px 12px;
    border: 1px solid var(--orange);
 border-radius: 12px 12px  12px 0;
    color: var(--orange);
    text-decoration: none
}

#nav-below.paging-navigation .nav-links .page-numbers.current, #nav-below.paging-navigation .nav-links a:hover {
		padding: 8px 12px;
    border: 1px solid var(--orange);
 	background-color: var(--orange);
    color: var(--white);
    text-decoration: none;
		 border-radius: 12px 12px  12px 0;
}


@media screen and (max-width: 1024px) {
	#nav-below.paging-navigation {
	margin-bottom: 96px;
}
}

@media screen and (max-width: 768px) {
	#nav-below.paging-navigation {
	margin-bottom: 60px;
}
}

@media screen and (max-width: 480px) {
	#nav-below.paging-navigation .nav-links {
		display: flex;
		flex-wrap: wrap;
		row-gap: 8px;
	}
}

/**  **/

/** Forms **/
.frm_style_2able.with_frm_style .frm_submit button {
	border-radius: 12px 12px 12px 0;
	border: none !important;
}

.frm_style_2able.with_frm_style .frm_submit button:hover {
	background-color: var(--dark-orange);
}

.with_frm_style .frm_submit.frm_flex {
	    justify-content: center;
}

.frm_style_2able input[type=radio]:focus, .frm_style_2able input[type=radio]:focus {
    box-shadow: 0px 0px 5px 0px rgba(250, 84, 0, 0.6) !important;
}
/**  **/