/**
 * Custom CSS overrides for GSA Nihilex theme
 */

/* Ensure upper-page (hero section) is full viewport height */
.upper-page {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
}

/* Fix hero video height to match original template */
.hero-fullscreen {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 0;
  background: #111;
}

.hero-fullscreen-FIX {
  width: 100%;
  height: 100%;
}

.hero-bg {
  position: relative;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.html5-videoContainment {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  background: #111;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 0;
}

/* Ensure video element fills container */
.html5-videoContainment video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  object-fit: cover;
}

/* Hide fallback background when video loads */
.html5-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -ms-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -1;
}

/* Responsive video adjustments to prevent cutoff at various viewport widths */
/* Change from cover to contain to show full video without cropping */
/* Apply at wider viewport to ensure text is never cut off */
@media only screen and (max-width: 1920px) {
  .html5-videoContainment video {
    object-fit: contain;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
  }

  /* Add padding to the hero section to prevent edge cutoff */
  .html5-videoContainment {
    padding: 0 30px;
  }
}

@media only screen and (max-width: 1400px) {
  .html5-videoContainment {
    padding: 0 20px;
  }
}

@media only screen and (max-width: 992px) {
  .html5-videoContainment {
    padding: 0 15px;
  }
}

@media only screen and (max-width: 880px) {
  .html5-videoContainment {
    padding: 0 10px;
  }
}

/* Mobile fallback background */
@media only screen and (max-width: 768px) {
  .html5-videoContainment video {
    display: none;
  }

  .html5-bg {
    display: block;
    z-index: 1;
  }
}

/* Fix logo display - GSA Logo */
.logo-img:before {
  content: "";
  background: url(../images/gsa-logo-black.png) no-repeat;
  background-size: contain;
  display: block;
  width: 200px;
  height: 60px;
  line-height: 60px;
  -webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
}

.logo-light .logo-img:before {
  background: url(../images/gsa-logo-white.png) no-repeat;
  background-size: contain;
}

/* Adjust inner divider height */
.inner-divider {
  height: 60px;
}

.inner-divider-half {
  height: 30px;
}

/* ==========================================================================
   Counter Block Styles (About page)
   ========================================================================== */
.counter-block {
  text-align: left;
}

.counter-block .counter-number {
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: #cc6633;
  display: inline-block;
}

.counter-block sup {
  font-size: 36px;
  font-weight: 700;
  color: #cc6633;
  vertical-align: super;
}

.counter-block h6 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: #5f5f5f;
}

/* Change h1 font from Montserrat to Raleway */
h1, .hero-heading {
  font-family: 'Raleway', sans-serif !important;
}

/* Style h5 headings to match static site */
h5 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: #101010;
  letter-spacing: -0.02em;
  margin: 0 0 10px 0;
}

.section-txt h5 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: #101010;
  margin-bottom: 10px;
}

/* Hide search bar */
.search-form,
.search-block-form,
#block-search,
.block-search {
  display: none !important;
}

/* Fill section headers with color instead of transparent outline */
/* Using brand orange color #cc6633 from static site for highlighted text */
h1.section-header {
  color: #5f5f5f !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
}

h1.section-header span {
  color: #cc6633 !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
}

h1.section-header.section-header-light {
  color: #fff !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
}

h1.section-header.section-header-light span {
  color: #cc6633 !important;
  -webkit-text-stroke: 0 !important;
  text-stroke: 0 !important;
}

/* ==========================================================================
   Brand Color Override: Replace red (#ff264a) with brand orange (#cc6633)
   ========================================================================== */

/* Links */
a {
  color: #cc6633 !important;
}

a:hover,
a:visited,
a:active,
a:focus {
  color: #cc6633 !important;
}

p a,
p a:hover {
  color: #cc6633 !important;
}

/* Text selection */
::-moz-selection {
  background: #cc6633 !important;
}

::selection {
  background: #cc6633 !important;
}

/* Navigation menu active state */
nav.navigation-menu li a.active {
  color: #cc6633 !important;
  -webkit-text-stroke: 1px #cc6633 !important;
  text-stroke: 1px #cc6633 !important;
}

/* Navigation secondary experience */
nav.nav-secondary-experience > h4 {
  color: #cc6633 !important;
}

nav.nav-secondary-experience li span:hover,
nav.nav-secondary-experience li a:hover {
  color: #cc6633 !important;
}

/* Works navigation buttons */
.bt-nav.close {
  background: #cc6633 !important;
  border: 1px solid #cc6633 !important;
}

/* Box title */
.box-title h2 {
  color: #cc6633 !important;
}

/* Icon works buttons - only override non-inverse buttons */
.icon-works:not(.icon-works-inverse) a {
  background: #cc6633 !important;
  border: 1px solid #cc6633 !important;
}

/* Inverse buttons keep dark background, hover turns orange */
.icon-works.icon-works-inverse a {
  background: #111 !important;
  border: 1px solid #111 !important;
  color: #fff !important;
}

.icon-works.icon-works-inverse a:hover {
  background: #cc6633 !important;
  border: 1px solid #cc6633 !important;
}

.icon-works.icon-works-inverse a:hover:after {
  background: #cc6633 !important;
}

/* Link underline */
.link-underline {
  color: #cc6633 !important;
}

.link-underline:after {
  background: #cc6633 !important;
}

/* Form elements - buttons and inputs */
.contact-form input[type="submit"],
.form-submit,
input[type="submit"] {
  background: #cc6633 !important;
  border-color: #cc6633 !important;
}

/* Preloader */
.preloader-position.loader span {
  background: #cc6633 !important;
}

/* Awesome text (highlighted names) */
.awesome {
  color: #cc6633 !important;
}

/* Section heading styles */
.section-heading span,
.section-heading-all span {
  color: #cc6633 !important;
}

/* Hero heading highlights */
.hero-heading span {
  color: #cc6633 !important;
}

/* Counter/stats numbers */
.counter-number {
  color: #cc6633 !important;
}

/* Read more links */
.read-more {
  color: #cc6633 !important;
}

.read-more:hover {
  color: #cc6633 !important;
}

/* Team info highlights */
.team-info h3 span.awesome {
  color: #cc6633 !important;
}

/* Border accents */
.border-accent,
.accent-border {
  border-color: #cc6633 !important;
}

/* Background accents */
.bg-accent,
.accent-bg {
  background-color: #cc6633 !important;
}

/* Scroll down indicator */
.scroll-down-link:hover {
  color: #cc6633 !important;
}

/* Social icons hover */
.signature-home-social a:hover {
  color: #cc6633 !important;
}

/* ==========================================================================
   Footer Styles
   ========================================================================== */
footer {
  background: #111 !important;
  padding: 60px 0 40px;
  margin-top: 60px;
}

.footer-bottom {
  text-align: center;
}

.footer-social {
  margin-bottom: 20px;
}

.footer-social a {
  color: #999 !important;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 15px;
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: #cc6633 !important;
}

.footer-text {
  color: #999 !important;
  font-size: 14px;
  margin: 0;
}

.footer-text a {
  color: #cc6633 !important;
}

.footer-text a:hover {
  color: #fff !important;
}

/* ==========================================================================
   Volunteer Form Styles
   ========================================================================== */
.volunteer-form-container {
  max-width: 100%;
  margin: 0 auto;
}

.volunteer-form-container iframe {
  width: 100% !important;
  min-height: 600px;
  border: none;
}

/* JotForm specific styling */
.jotform-form {
  padding: 0 !important;
}

/* Ensure form inputs match site styling */
.volunteer-form-container input[type="text"],
.volunteer-form-container input[type="email"],
.volunteer-form-container input[type="tel"],
.volunteer-form-container textarea,
.volunteer-form-container select {
  font-family: 'Raleway', sans-serif;
}

/* ==========================================================================
   Navigation Menu Background Images - Hide placeholder images
   ========================================================================== */
.navigation-menu-img-wrapper {
  display: none !important;
}

/* ==========================================================================
   Case Studies Page - Hide placeholder background images
   ========================================================================== */
/* Hide all photo/image divs without actual images */
.lower-page-works .photo.image-works {
  display: none !important;
}

/* Hide empty row items that create black spaces */
.lower-page-works .row-item.n-3:not(:has(.box-description)):not(:has(.box-title)) {
  display: none !important;
}

/* Hide col-items that only contain hidden photo divs */
.lower-page-works .col-item.n-2:has(.photo.image-works):not(:has(.box-description)):not(:has(.box-title)) {
  display: none !important;
}

/* Case studies page - keep original layout intact */

/* Increase padding for case study content */
.lower-page-works .box-description {
  padding: 40px !important;
  overflow: visible !important;
}

/* Fix video container overflow issues */
.lower-page-works .box-cell {
  overflow: visible !important;
}

.lower-page-works .box-table {
  overflow: visible !important;
}

.lower-page-works .row-item {
  overflow: visible !important;
}

/* Ensure text is visible on light backgrounds */
.lower-page-works .box-description p,
.lower-page-works .box-description h2,
.lower-page-works .box-description h3,
.lower-page-works .box-description h4,
.lower-page-works .box-description h5,
.lower-page-works .box-description li {
  color: #101010 !important;
}

/* Fix box title styling */
.lower-page-works .box-title {
  padding: 40px !important;
  background-color: #fff !important;
}

.lower-page-works .box-title h2 {
  color: #101010 !important;
}

.lower-page-works .box-title h2 .item-desc {
  color: #cc6633 !important;
}

/* Add dividers between case study sections */
section#item-tiol,
section#item-fogic,
section#item-gagv,
section#item-aic,
section#item-supgv,
section#item-premorial,
section#item-shv,
section#item-glss {
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 60px;
  margin-bottom: 60px;
}

section#item-glss {
  border-bottom: none;
  margin-bottom: 0;
}

/* Hide bottom credits */
.bottom-credits.bottom-credits-dark {
  display: none !important;
}