/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

:root {
	--col-gap-xl: 4rem;
	--col-gap-med: 2rem;
	--row-gap-sm: 2rem;
	--row-gap-med: 3.5rem;
	--row-gap-xl: 5rem;
	--row-grid-gap-med: 7rem;
	--footer-text: 0.8rem;
	--intro-text: 1.4rem;
}

@media (max-width: 768px) {
	:root {
		--intro-text: 1.2rem;
	}
}

a {
	text-decoration: none;
}

.blog-categories {
	margin: 0;
	list-style-type: none;
}

.blog-categories li {
	margin-bottom: 10px;
}

.blog-categories li a {
	text-decoration: none;
	color: #333;
}

.brand-logos img {
	max-height: 80px;
	max-width: 140px;
}

.btn-white-outline:hover .gb-shape svg path {
	fill: #333;
}

.btn-white-outline:focus, .btn-primary:focus {
	color: white;
}

.centered-text-block h1,
.centered-text-block h2,
.centered-text-block h3,
.centered-text-block h4,
.centered-text-block h5,
.centered-text-block h6,
.centered-text-block p,
.header-block-centered h1,
.header-block-centered h2,
.header-block-centered h3,
.header-block-centered h4,
.header-block-centered h5,
.header-block-centered h6,
.header-block-centered p{
  text-align: center;
}

.cta-gradient p:last-of-type {
	margin-bottom: 0 !important;
}

/* Add vertical dividers using pseudo-elements */
.floating-bar-column:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -0.5em;
    top: 35%;
    width: 1px;
    height: 30%;
    background-color: #999;
    transform: translateX(50%);
}

@media screen and (max-width: 1024px) {
	.floating-bar-column:nth-of-type(even)::after {
		display: none;
	}
}

.footer-list {
    margin: 0;
    list-style-type: none;
}

.footer-list li {
    margin-bottom: 5px;
}

.footer-list li a, .site-footer a {
    text-decoration: none;
    color: inherit;
    font-size: 0.8rem;
}

.site-footer a:hover, .footer-list li a:hover {
    color: #999;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit;
}

h2:has(+ h3) {
    margin-bottom: 0;
}

.header-block-centered:after {
  content: '';
  display: block;
  width: 125px;
  height: 2px;
  margin: 30px auto 50px;
  background-color: #000;
}

.hide {
	display: none !important;
}

img[src$=".jpg"],
img[src$=".jpeg"],
img[src$=".webp"],
img[src$=".png"] {
  border-radius: 10px;
}

img.remove-border-radius {
  border-radius: 0px;
}

p:last-of-type {
	margin-bottom: 0;
}

p:last-of-type + .wp-block-list, p:last-of-type + .wp-block-table {
	margin-top: 20px; /* apply margin-top if the list comes after the last <p> element */
}

.pagination {
	display: flex;
	justify-content: center;
	margin-top: 20px;
	font-size: 0.9rem;
	gap: 5px;
}

.page-numbers {
	border: solid 1px black;
	padding: 12px 16px;
	color: black;
}

.page-numbers.current {
	border: none;
}

.page-numbers:hover {
	color: black;
}

.wp-block-list li {
	margin-bottom: 10px; /* add spacing after bulleted list items */
}

.wp-block-table thead {
	background-color: #222;
	color: white;
}

.wp-block-table tr:nth-of-type(even) {
	background-color: white;
}

@media (max-width: 768px) {
    #apexchat_bar_invitation_wrapper {
        display: none !important; /* Hide Apex Chat buttons on mobile */
    }
	
	body.page {
        padding-top: 0 !important;
    }
}


/**********************************
 * GRAVITY FORM STYLING
**********************************/

.gform_confirmation_message {
	color: #333 !important;
	text-align: center !important;
	font-weight: 700 !important;
	font-size: 1.3rem !important;
}

.gform_wrapper {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.gform_wrapper a {
	color: #333 !important;
	text-decoration: underline;
}

.gform_wrapper input[type="submit"].gform_button, .gform_wrapper input[type="button"] {
	padding: 12px 20px 14px 20px !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	letter-spacing: 0.5px !important;
	text-decoration: none !important;
	border-radius: 5px !important;
}

.gform-theme {
  --gf-ctrl-btn-bg-color-primary: #bc2025 !important;
  --gf-ctrl-btn-bg-color-hover-primary: #272870 !important;
}

.gform_title {
	text-align: center;
	margin-bottom: 50px;
	text-transform: capitalize !important;
}

.sms-compliance {
	font-size: 0.8rem;
	color: #333; /* Sets the color of the compliance message at the bottom of the form. Done here to avoid having to change them individually. */
}


/**********************************
 * RELATED BLOG POSTS ON INDIVIDUAL PAGES
**********************************/

#blog-category-posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns */
  gap: 2em; /* 2em column and row gap */
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
}

#blog-category-posts li {
  /* Styling for individual list items (posts) */
	background-color: #f5f5f5;
}

#blog-category-posts li img {
  width: 100%; /* Make featured image responsive */
  height: 275px;
  object-fit: cover;
  display: block; /* Remove extra space below image */
  margin-bottom: 1em; /* Add some space between image and title */
}

#blog-category-posts li  a {
  text-decoration: none; /* Remove underline from link */
  color: black;
}

#blog-category-posts-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30px;
}

#blog-category-posts-header h3 {
	margin-bottom: 0;
}

#blog-category-posts-header .btn-primary {
	margin-top: 0;
}

.blog-category-posts-text-cntr {
	padding: 0px 30px 30px 30px;
}

@media (max-width: 1024px) {
	#blog-category-posts {
	  grid-template-columns: repeat(2, 1fr); /* 3 columns */
	}

	#blog-category-posts li img {
		height: auto;
	}
}

@media (max-width: 768px) {
	#blog-category-posts {
	  grid-template-columns: repeat(1, 1fr); /* 3 columns */
	}
}


/**********************************
 * LANDING PAGES
**********************************/

.single-landing-page h2:has(+ h3) {
    margin-bottom: 20px;
}

.single-landing-page .site-footer {
	display: none;
}

.single-landing-page .site.grid-container {
	max-width: 1300px;
}

.single-landing-page .page-feature-cntr-text-inner {
	border: solid 5px orangez;
	margin-left: auto;
	margin-right: auto;
	max-width: 70%;
	text-align: center;
}

/*.single-landing-page .page-feature-cntr-text-inner:before {
	content: '';
	display: block;
	background-image: url(https://fordtech.wpenginepowered.com/wp-content/uploads/2025/03/fordtech-logo-white.svg);
	background-repeat: no-repeat;
	width: 160px;
	height: 60px;
	margin: 0 auto 40px;
	top: -40px;
	position: relative;
}*/

.single-landing-page .page-feature-cntr-text-inner h1,
.single-landing-page .page-feature-cntr-text-inner h3,
.single-landing-page .page-feature-cntr-text-inner p {
	text-align: center;
}

.single-landing-page .wp-block-list {
	list-style-position: inside;
}

@media (max-width: 1024px) {
	.single-landing-page .page-feature-cntr-text-inner {
		max-width: 100%;
	}

	.single-landing-page .page-feature-cntr-text-inner:before {
		width: 120px;
		height: 45px;
		top: -15px;
	}
}


/**********************************
 * PAGE FEATURE AREAS
**********************************/

#home-feature {
    position: relative;
}

#home-feature:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(39, 40, 112, 0.6));
    pointer-events: none;
    z-index: 6; /* CRITICAL: Set to a very high z-index to be on top of everything */
}

@media screen and (max-width: 1024px) {
	#home-feature-video {
		display: none;
	}

	#home-feature {
		background-image: url('https://fordtech.wpenginepowered.com/wp-content/uploads/2025/03/home-feature-placeholder-mobile.webp');
		padding-bottom: 150px !important;
		padding-top: 80px !important;
	}

	#home-feature-inner-cntr {
		margin-top: 0;
		top: 0;
		left: 0;
		transform: none;
		z-index: 10;
		position:relative;
	}
}

@media screen and (max-width: 768px) {
	#home-feature {
		padding-bottom: 120px !important;
		padding-top: 50px !important;
	}
}

.page-feature-cntr {
  min-height: 500px;
  display: flex;
  align-items: center;
  position: relative;
  background-position: center right;
}

@media (max-width: 1024px) {
  .page-feature-cntr {
	padding-left: 30px;
    padding-right: 30px;  
  }
	
  .page-feature-cntr .inner-cntr {
	padding-left: 0;
	padding-right: 0;
  }
}

.page-feature-cntr a .gb-shape {
	position: relative;
	top: 2px;
	margin-left: 10px;
}

.page-feature-cntr::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.9), rgba(39, 40, 112, 0.8)); /* Adjust colors and direction */
    pointer-events: none; /* Prevents overlay from blocking clicks */
}

.page-feature-cntr h1, .page-feature-cntr h2, .page-feature-cntr h3, .page-feature-cntr p {
	color: white !important
}

/*@media screen and (min-width: 1024px) {
	.page-feature-cntr .inner-cntr {
		min-width: var(--gb-container-width); /* ensures that the text container spans the full width of the header 
	}
}*/

.page-feature-cntr-text {
	position: relative;
	z-index: 2;
}

.page-feature-cntr p:last-of-type {
	margin-bottom: 0;
}


/**********************************
 * HOME PAGE VIDEO
**********************************/

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (height / width * 100) */
    height: 0;
    overflow: hidden;
    background-color: orange; /* Fallback background color for the container */
    z-index: 2; /* This ensures the video container is below the gradient overlay (z-index: 6) */
}

.video-container iframe,
.video-poster-image,
.video-fallback-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures images/video cover container without distortion */
    /* REMOVED general transition here, applying specifically below */
}

/* Initial state for the poster image (should be visible) */
.video-poster-image {
    z-index: 4; /* Higher than iframe and initial fallback */
    opacity: 1; /* Fully visible initially */
    display: block; /* Ensure it's displayed */
    transition: opacity 2s ease-in-out; /* Controls the fade-out speed */
}

/* Initial state for the iframe (should be hidden) */
.video-container iframe {
    z-index: 3; /* Below the poster image initially */
    opacity: 0; /* Starts fully transparent */
    display: block; /* Important: Keep it block so it can transition opacity */
    transition: opacity 1s ease-in-out; /* ADDED: Match iframe transition to poster */
}

/* Initial state for the fallback image wrapper (should be hidden) */
.video-fallback-image-wrapper {
    z-index: 0; /* Starts hidden and very low, behind poster/video */
    display: none; /* Make sure it's initially hidden */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #333;
    color: #eee;
    text-align: center;
}

.video-fallback-image-wrapper img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


/* ----------------------------------------------------------- */
/* --- JavaScript Controlled States --- */
/* ----------------------------------------------------------- */

/* Styles applied when JavaScript detects video is ready/playing */
.video-container.show-video .video-poster-image {
    opacity: 0 !important;
    pointer-events: none;
    z-index: 5 !important; /* CHANGE: Keep poster temporarily on top (higher than iframe's active z-index) */
    /* The poster's z-index will effectively drop to 0 after its opacity transition is complete */
}
.video-container.show-video iframe {
    opacity: 1 !important;
    z-index: 4 !important; /* This iframe will appear under the fading poster, but eventually on top */
}
.video-container.show-video .video-fallback-image-wrapper {
    display: none !important;
    z-index: 0 !important;
}


/* Styles applied when JavaScript detects a failure and needs to show fallback */
.video-container.show-fallback .video-fallback-image-wrapper {
    display: flex !important;
    z-index: 4 !important;
    opacity: 1 !important;
    transition: opacity 0.5s ease-in-out;
}
.video-container.show-fallback .video-poster-image,
.video-container.show-fallback iframe {
    display: none !important;
    opacity: 0 !important;
    z-index: 0 !important;
}

/* The 'hidden' class from your HTML */
.hidden {
    display: none !important;
}


/* OLD CODE
.video-background-container {
  position: relative;
  overflow: hidden;
}

.youtube-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.youtube-background iframe {
  object-fit: cover;
}

.video-container {
  position: relative;
  width: 100vw;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
*/

/**********************************
 * MENUS
**********************************/
.main-navigation.navigation-clone {
	background-color: #00007c; /* sets sticky header background color */
}

.main-navigation.offside {
	width: 100% !important; /* make flyout mobile menu full width */
}

.slideout-navigation.main-navigation {
    background: #00007c;
    /*background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0, 0,124,0.9) 100%), url('https://fordtech.wpenginepowered.com/wp-content/uploads/2021/07/Cybersecurity.png');*/
    background-position: center center;
    background-size: cover;
}

.slideout-navigation .sub-menu {
    background-color: transparent;
    padding-left: 15px;
}

.slideout-navigation .sub-menu li a {
    color: white !important;
}

.slideout-navigation .sub-menu {
	border-radius: 0;
	border-bottom: none;
	box-shadow: none;
	padding: 0 0 0 15px;
}

.slideout-navigation .sub-menu li a {
	font-weight: bold;
}

#sticky-navigation #menu-main-nav > li > a {
	color: white;
}

#sticky-navigation .menu-toggle {
	color: white !important
}

.sub-menu {
	border-radius: 10px;
	border-bottom: solid 3px #00007c;
	box-shadow: 0 0 5px rgb(0,0,0,0.2) !important;
	padding: 15px 20px;
}

.sub-menu a {
	font-weight: 400;
}

/**********************************
 * GRID
**********************************/

.grid-list-light-bg > div {
  background-color: #f5f5f5; 
  border-radius: 10px;
  padding: 20px 20px 0px 70px;
  position: relative;
}

.grid-list-light-bg > div:before {
  content: '';
  position: absolute;
  top: 15px;
  left: 20px;
  width: 35px;
  height: 35px;
  background-image: url('https://fordtech.wpenginepowered.com/wp-content/uploads/2025/03/wavy-check.svg');
  background-size: contain;
  background-repeat: no-repeat
}

.grid-list-underline > div {
  padding-left: 50px;
  padding-bottom: 30px;
  position: relative;
  border-bottom: solid 1px #ddd;
  margin-bottom: 12px;
}

.grid-list-underline > div:before {
  content: '';
  position: absolute;
  top: -4px;
  left: 0px;
  width: 35px;
  height: 35px;
  background-image: url('https://fordtech.wpenginepowered.com/wp-content/uploads/2025/03/wavy-check.svg');
  background-size: contain;
  background-repeat: no-repeat
}

/*.grid-list-underline > div:last-of-type {
	border: none;
}*/

.grid-list-underline:not(.keep-last-border) > div:last-of-type {
    border: none;
}

@media (max-width: 767px) {
	.grid-list-underline > div:last-child {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}
}

.grid-list-light-bg > div h5, .grid-list-underline > div h5 {
  margin-bottom: 5px;
}


/**********************************
 * TECH TIPS VIDEOS
**********************************/

.tech-tip-youtube-shorts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: flex-start; /* Align to the start */
}

.tech-tip-youtube-shorts li {
    width: calc(25% - 30px); /* Adjust width for 4 videos per row, accounting for gap */
    box-sizing: border-box;
}

.tech-tip-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 177.78%; /* 9:16 aspect ratio */
}

.tech-tip-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (max-width: 1200px) { /* Adjust breakpoint for tablet */
    .tech-tip-youtube-shorts li {
        width: calc(50% - 30px); /* 2 videos per row on tablet */
    }
}

@media (max-width: 768px) { /* Adjust breakpoint for phone */
    .tech-tip-youtube-shorts li {
        width: calc(100% - 30px); /* 1 video per row on phone */
    }
}


/**********************************
 * MEGA MENU
**********************************

@media (min-width: 1200px) {
    nav .main-nav .mega-menu {
        position: static;
    }

    .sub-menu li a {
        font-weight: 400;
    }

    #menu-main-nav > li:not(.mega-menu) > .sub-menu {
        padding: 15px;
        border-radius: 10px;
        background-color: #f5f5f5;
        border-bottom: solid 5px #00007c;
    }

    nav .main-nav .mega-menu > ul {
        position: absolute;
        width: 100%;
        background-color: #f5f5f5;
        left: 0 !important;
        display: flex;
        flex-wrap: wrap;
        padding: 15px;
        border-radius: 10px;
        border-bottom: solid 5px #00007c;
    }

    .main-navigation:not(.is_stuck) .inside-navigation {
        position: initial;
    }
    
    .inside-header {
        position: relative;
    }

    #primary-menu>ul>li, #primary-menu>ul, #primary-menu {
        position: static !important;
    }

    nav .main-nav .mega-menu > ul > li > a {
        font-weight: bold;
    }

    nav .main-nav .mega-menu>ul>li {
        display: inline-block;
        width: 25%;
        vertical-align: top;
    }

    nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
        width: 50%;
    }

    nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
        width: 33.3333%;
    }

    nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
        width: 20%;
    }
	
	nav .main-nav .mega-menu > ul > li > a {
		color: black !important;
	}

    nav .main-nav .mega-menu > ul > li:hover > a,
    nav .main-nav .mega-menu > ul > li:focus > a,
    nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
    nav .main-nav .mega-menu ul ul {
        background-color: transparent !important;
        color: #666;
    }

    nav .main-nav .mega-menu ul .sub-menu {
        position: static;
        display: block;
        opacity: 1;
        visibility: visible;
        width: 100%;
        box-shadow: 0 0 0;
        left: 0;
        height: auto;
        pointer-events: auto;
        transform: scale(1);
    }

    nav .main-nav .mega-menu ul.toggled-on .sub-menu {
        pointer-events: auto;
    }

    nav .main-nav .mega-menu ul .sub-menu li a {
        font-weight: 400 !important;
    }

    nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
}
*/