@charset "UTF-8";

/* CSS Document */

/*
Theme Name: VersAbility Tech
Theme URI: https://VersAbilityTECH.org/
Author: Consociate
Author URI: consociate.marketing
Text Domain: versability-tech
*/

/* GENERAL 
#################################################### */


body { /* font-family: "open-sans", sans-serif; */ font-family: "proxima-nova", sans-serif; font-weight: 500; font-size: 19px;
	 background: url("images/bg-border-top-trio.jpg") center top no-repeat }

h1, h2, h3, h4, h5, h6 { /*font-family: "nexa", sans-serif !important; */ 
	font-family: "roboto-slab", serif !important; font-weight: 700; line-height: 1.25em; margin-bottom: 1.25rem }
h1 { font-size: 68px }
h2 { font-size: 60px }
h3 { font-size: 52px }
h4 { font-size: 44px }
h5 { font-size: 34px }
h6 { font-size: 28px }

.left { text-align: left }
.right { text-align: right }
.center { text-align: center }

.light { font-weight: 300 }
.norm { font-weight: 400 }
b, strong, .bold { font-weight: 700 }
.heavy { font-weight: 800 }
.black { font-weight: 900 }

.caps { text-transform: uppercase }
.small, small { }

.nexa { font-family: "nexa", sans-serif; font-weight: 700 }
.sans { font-family: "open-sans", sans-serif; font-weight: 400; }
.prox { font-family: "proxima-nova", sans-serif }
.slab { font-family: "roboto-slab", serif; font-weight: 700 !important }

.txt-gold { color: #FDB414 !important }
.txt-purple { color: #692270 !important }

#main i { font-size: 55px }
footer i { font-size: 35px; margin: 0 10px } /* FA icons */


/* Header */

#nav-header { background: url("/wp-content/uploads/2026/01/bg-nav-graphic-fade.jpg") center center no-repeat; position: relative; z-index: 100;
	padding: 25px 0; background-size: cover}
#nav-header .btn { border-radius: 25px }

.logo img { width: 250px; height: auto; transition: 200ms }

.navbar { background-color: #FDB414; z-index: 1050 !important }
.nav-link { text-transform: uppercase; font-size: 16px !important;
	color: #000 }
.nav-link:hover { color: #FDB414 }

.dropdown-menu { background: #672271;
    right: auto !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important;
  }
.dropdown-item { color: #fff }
.dropdown-item:hover { background: #FDB414; color: #672271 }
.dropdown-item.active {  background: #00000065; color: #fff }

header { height: 70vh; background-size: cover; border-bottom: 10px solid #FDB414;
	background: url("images/bg-nav-staff-1920.jpg") center 35% no-repeat; }
#header h1 { font-size: 60px; margin-bottom: .25rem }

#intro { background: linear-gradient(180deg,rgba(103, 34, 113, 1) 65%, rgba(52, 17, 57, 1) 100%);
	color: #fff; border-top: 10px solid #FDB414;
	padding-top: 75px; padding-bottom: 100px }
#intro img { border-bottom: 10px solid #FDB414; margin: 25px 0 }
#intro h4 { color: #FDB414 }
#intro .sticky-top { padding-top: 125px }

footer { padding: 50px 0; text-align: center}
footer small { font-weight: 700 }
footer .partners img { max-width: 150px }
footer .social { margin-bottom: 15px }
footer .copyright { font-size: 16px; margin-top: 35px }
footer .copyright p { font-size: 20px }
footer a:hover { text-decoration: underline }

/* Pages */

#header { margin-top: 0; border-bottom: 10px solid #FDB414 }

#main { padding-bottom: 75px; border-bottom: 10px solid #FDB414;
	background: url(/wp-content/uploads/2026/01/bg-gray-fade.jpg) 0 bottom repeat-x }

/*
####################################################
C O M P O N E N T S
####################################################
*/

/* IMAGES */

img { max-width: 100%; height: auto; }


/* LINKS */

a { text-decoration: none; transition: 200ms; font-weight: 700; color: #672271 }
a:hover { }

a img { transition: 200ms }
a img:hover { opacity: .8 }

/* BUTTONS */

.btn { padding: 12px 20px 10px 20px; font-size: 17px; 
	border: 1px solid #FDB414; background: #FDB414; color: #672271; 
	font-family: "roboto-slab", serif !important; font-weight: 700; text-transform: uppercase }
.btn:hover { border: 1px solid #FDB414; background: #53155C; color: #fff }

.btn-purple { background: #672271; color: #fff }
.btn-purple:hover { background: #FDB414; color: #672271 }

.wp-block-button__link { background-color: #FDBD3D; color: #000; padding: 12px 20px 10px 20px; 
	font-family: "roboto-slab", serif !important; font-weight: 700; font-size: 18px; text-transform: uppercase;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;  }
.wp-block-button__link:hover { 
	opacity: .8;
    transition: opacity 200ms ease }


/* Shadows */

.shadowed { box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px !important }

.shadow-text { text-shadow: -1px -1px 1px #fff, 1px 1px 1px rgba(0,0,0,.50) }

/* Spacing */

.max-800, .max-1000, .max-1200, .max-w { margin-left: auto; margin-right: auto }
.max-800 { max-width: 800px }
.max-1000 { max-width: 1000px }
.max-1200 { max-width: 1200px }

.mar-0 { margin: 0 }
.mar-btm-0 { margin-bottom: 0 !important }
.mar-btm-15 { margin-bottom: 15px }
.mar-btm-25 { margin-bottom: 25px }

.flush { padding-left: 0; padding-right: 0 }

/*
####################################################
E X T R A S
####################################################
*/

/* Anchor scroll sticky menu offset */
html {
  scroll-padding-top: 200px;
}

/* WP admin bar offset */
body.admin-bar .navbar {
    margin-top: 32px;
}

/* Nav scroll */

.navbar-fixed-top.scrolled .logo {
  width: 150px;
  transition: width 200ms ease
}
.home .navbar-fixed-top.scrolled .logo {
  width: 150px;
  transition: width 200ms ease
}
/*
.navbar-fixed-top.scrolled .navbar-nav { 
	padding-top: 15px; padding-bottom: 15px;
	transition: padding-top padding-bottom 200ms ease
}
*/
.navbar-fixed-top.scrolled  {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px !important;
  transition: box-shadow 200ms ease;
}

/* Full-width in WP Block Editor (Cover block) */
.alignfull {
    width:  100vw;
    max-width:  100vw;
    margin-left:  calc(50% - 50vw);
}
.wp-block-cover.alignfull {
    padding-top: 100px; padding-bottom: 100px; margin-top: 50px; margin-bottom: 75px
}
.wp-block-cover.alignfull.flush {
    padding-top: 100px; padding-bottom: 100px; margin-top: 0; margin-bottom: 0
}

.wp-block-cover__inner-container { max-width: 1200px }

#XXX { overflow-x: hidden } /* Fix for PC horizontal scroll bars with .alignfull */

/* Image Wraps */

.crop,
	.wp-block-post-featured-image { height: 350px }
.crop img,
	.wp-block-post-featured-image img { 
	object-fit: cover;
    width: 100%;
    height: 100% !important;
}

/* Nav dropdown on hover */
.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown>.dropdown-toggle:active {
  /*Without this, clicking will make it sticky*/
    pointer-events: none;
}

/* Heading lines */

.bordered { position: relative; display: inline-block; margin-bottom: 50px }

.bordered::after { 
	content: "";
	position: absolute;
	bottom: -25px; /* Aligns with bottom of parent */
	left: 0;   /* Starts at left */
	width: 200px;
	height: 10px; /* Adjust thickness as needed */
	background-color: #FDB414; /* Adjust color */
}
#header .bordered::after { 
	content: "";
	position: absolute;
	bottom: -35px; /* Aligns with bottom of parent */
}

.heading {
  position: relative;
  display: inline-block; /* keeps text width tight */
  text-align: center;
}
.heading::after {
  content: "";
  display: block;
  width: 100px; /* set your line width */
  height: 10px; /* thickness of the line */
  background-color: #D22630; /* color of the line */
  margin: 8px auto 0; /* centers line below text */
}

/* Line centered after text vertically */
.line {
  display:inline-block;
  padding: 10px 10px 15px; /* bottom padding should be higher to make up for pseudo border height */
  background: linear-gradient(90deg, transparent 25%, #fff 25%, #fff 75%, transparent 75%);
  background-size: 100% 5px;
  background-position: 0% 100%;
  background-repeat: no-repeat;
}

/* Line after text Horizontally */
#partners .heading-line { 
  display: flex;
  align-items: center;
  gap: 1em; /* space between text and line */ }
#partners .line { 
  flex-grow: 1;
  height: 10px;
  background-color: #64B9AE; /* line color */ }


/*
####################################################
M E D I A  Q U E R I E S
####################################################
*/

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Bootstrap 4 breakpoints
*/

/* Custom */
@media (min-width: 1925px) {

}

/* Custom */
@media (max-width: 1400px) {

	h1 { font-size: 60px }
	h2 { font-size: 52px }
	h3 { font-size: 44px }
	h4 { font-size: 34px }
	h5 { font-size: 28px }
	h6 { font-size: 22px }
	
}

/* Extra large devices (large desktops, 1200px and up)
 * No media query since this is the default in Bootstrap because it is "mobile first"
 */
@media (min-width: 1200px) {

	#intro img { margin: 35px 0 }
	
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 1199px) {
	
	.offcanvas { background: #FDB414 }
	.offcanvas-body { text-align: center; flex: 1; display: grid; justify-content: center; align-items: center; }
	.navbar-expand-xl .offcanvas-body .navbar-nav .nav-link:hover { color: #692270 !important }
	.navbar-expand-xl .navbar-nav .nav-link { font-size: 25px !important; font-weight: 700 }
	.navbar-toggler { background-color: #FDB414; border-color: #FDB414; color: #000; font-size: 25px }
	
	.dropdown-menu { transform: inherit !important }
	
    .offcanvas-body .btn { font-size: 20px }
	
	#intro .sticky-top { padding-top: 0 }


}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 991px) {
	
	.m-hide { display: none }
	.m-show { display: block }
	
	/* Breaks WP BLOCK columns early w/ tweaks */
	.wp-block-columns { display:block } 
	.wp-block-column:nth-child(2n),
		.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:nth-child(2n) { margin-left: 0 }
	
	/*
	.offcanvas-title img { max-width: 200px }
	.offcanvas .navbar-nav .nav-link.active { border-bottom: 0 }
	*/
	
	#main i { font-size: 45px }
	
	#header.alignfull { padding-top: 50px; padding-bottom: 50px }
	#header h1 { margin-bottom: 1.25rem; font-size: 35px }

}

/* Small devices (landscape phones, 544px and up) */
@media (max-width: 767px) {
	
	.reverse-mobile { flex-direction: column-reverse }
	
	.partners { display: inline-block !important }
}

/* Extra small devices (portrait phones, less than 544px) */
@media (max-width: 543px) {

}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
Custom media queries
*/

/* Set width to make card deck cards 100% width */
@media (max-width: 950px) {

}