/**
 * Custom Styles for 501st SCG Website
 */

/* Screen-reader only: hide visually, keep for assistive tech (accessibility) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Footer widget titles: use h2 for heading hierarchy, keep compact size (accessibility) */
#footer .widget .widget-title {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 1rem 0;
}

/* Hero Section Gradient Overlay
 * Dark overlay to ensure hero text meets WCAG contrast (min 3:1 for large text).
 * Gradient is dark across the hero so white text remains readable on any background image.
 */

/* Gradient overlay DOM element - must be above background image but below content */
#hero .hero-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.8) 50%,
    rgba(0, 0, 0, 0.55) 80%,
    rgba(0, 0, 0, 0.25) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Ensure parallax content (if any) is below the gradient */
#hero .parallax-content {
  z-index: 0;
}

/* Ensure hero content sits above the gradient overlay */
#hero #page-title {
  position: relative;
  z-index: 2;
}

/* Loading Page - Imperial Cog
 * Centers the imperial cog vertically and horizontally with a subtle fade animation
 */

/* Hide loader-figure and loader-label if they exist */
#page-loader .loader-figure,
#page-loader .loader-label {
  display: none;
}

/* Center the imperial cog vertically and horizontally */
#page-loader .page-loader-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Style the imperial cog */
#page-loader .loader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100px;
  max-height: 100px;
  width: auto;
  height: auto;
  opacity: 0.4;
  animation: fadeInOut 2.5s ease-in-out infinite;
}

/* Subtle fade in/out animation */
@keyframes fadeInOut {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

/* Form Field Styling - Extend theme styles to include tel, url, number and datetime-local input types
 * This ensures all form fields match the theme's styling consistently
 */
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="datetime-local"] {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 14px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  line-height: 22px;
  height: 22px;
  color: #1a1a1a;
  padding: 10px;
  transition: all 200ms ease;
  border-radius: 0px;
  -moz-border-radius: 0x;
  -khtml-border-radius: 0px;
  -webkit-border-radius: 0px;
  width: 100%;
  max-width: calc(100% - 22px);
}
.text-light input[type="tel"],
.text-light input[type="url"],
.text-light input[type="number"],
.text-light input[type="datetime-local"] {
  border-color: #3d3d3d;
  color: #ffffff;
  background: #0f0f0f;
}
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="datetime-local"]:focus {
  border-color: #1a1a1a;
}
.text-light input[type="tel"]:focus,
.text-light input[type="url"]:focus,
.text-light input[type="number"]:focus,
.text-light input[type="datetime-local"]:focus {
  border-color: #ffffff;
}
input.false[type="tel"],
input.false[type="url"],
input.false[type="number"],
input.false[type="datetime-local"] {
  border-color: #fa4d5a;
}
.check-error input[type="tel"],
.check-error input[type="url"],
.check-error input[type="number"],
.check-error input[type="datetime-local"],
input[type="tel"].check-error,
input[type="url"].check-error,
input[type="number"].check-error,
input[type="datetime-local"].check-error {
  border-color: #ff4b14;
}
/* Native datetime-local calendar icon - match theme grey */
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  cursor: pointer;
}
input[type="datetime-local"]::-webkit-datetime-edit {
  color: #1a1a1a;
}
input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
  color: #1a1a1a;
}

/* Logo and Header Custom Styling
 *
 * Makes the logo appear like a coin that sits over the bar.
 */
header #logo {
  border-right: none !important;
  height: 140px !important;
  position: absolute;
  top: -55px;
}

/* Override on white header */
header.header-bordered.small-header:not(.not-sticky):not(.header-style-vertical)
  #logo {
  border-right: none !important;
}

header.small-header:not(.not-sticky):not(.header-style-vertical) {
  border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

header.header-bordered {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 50px;
}

header.small-header {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

header.small-header #logo img {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  border-radius: 100%;
}

/* Gallery: keep image zoom on hover, remove grey/dark overlay shade */
#gallery-grid .thumb-overlay.overlay-effect-1:hover:after {
  opacity: 0;
}