/*
Theme Name: SaltBayTech
Theme URI: 
Author: SaltBayTech
Author URI: 
Description: SaltBayTech
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: saltbaytech
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

:root {
  --font-size: 16px;
  --text-2xl: 2.25rem;
  --text-xl: 1.5rem;
  --text-lg: 1.125rem;
  --text-base: 1rem;
  --background: #0d1f3c;
  --foreground: #d4e4f7;
  --card: #152847;
  --card-foreground: #d4e4f7;
  --popover: #152847;
  --popover-foreground: #d4e4f7;
  --primary: #f5780a;
  --primary-foreground: #ffffff;
  --secondary: #1a3358;
  --secondary-foreground: #d4e4f7;
  --muted: #122040;
  --muted-foreground: #7a9cc0;
  --accent: #1e6fd9;
  --accent-foreground: #ffffff;
  --destructive: #d4183d;
  --destructive-foreground: #ffffff;
  --border: rgba(255, 255, 255, 0.09);
  --input: transparent;
  --input-background: #1a3358;
  --switch-background: #203d6a;
  --font-weight-medium: 500;
  --font-weight-normal: 400;
  --ring: #f5780a;
  --chart-1: #f5780a;
  --chart-2: #1a73e8;
  --chart-3: #f5a623;
  --chart-4: #1565c0;
  --chart-5: #e8630a;
  --radius: 0.375rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: #030213;
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

a {
  outline: none;
}

button,
.button,
.wp-element-button {
  transition: transform 0.2s ease;
}

button:hover,
.button:hover,
.wp-element-button:hover {
  transform: scale(1.05);
}

div.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  overflow: visible !important;
  background: transparent !important;
}

div.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.3s ease;
}

div.header[data-scrolled="true"]::before {
  background: color-mix(in srgb, var(--background) 65%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

div.header[data-scrolled="false"] {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 1rem;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  transition: all 0.3s ease-out;
  background: color-mix(in srgb, white 10%, var(--background));
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.brand:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.logo {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.brand:hover .logo {
  transform: scale(1.05);
}

nav {
  display: none;
  align-items: center;
  gap: 0.5rem !important;
  margin-left: auto;
}

header nav ul {
  li a {
    position: relative;
    padding: 0.625rem 1.25rem !important;
    border-radius: 1rem;
    border: 1px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
    color: var(--muted-foreground) !important;
    display: inline-flex;
    align-items: center;

    &.active,
    &:hover,
    &:focus {
      background: color-mix(in srgb, white 10%, var(--background)) !important;
      border-color: rgba(255, 255, 255, 0.15);
      outline-color: none !important;
      color: var(--foreground) !important;
      text-decoration: none !important;
      outline: none !important;
    }
  }
}

.wp-block-navigation__responsive-container-open {
  color: var(--foreground) !important;
  outline: none !important;
}

.wp-block-navigation__responsive-container.is-menu-open {
  background: color-mix(in srgb, var(--background) 90%, transparent) !important;
  transition: max-height 0.35s ease, opacity 0.35s ease;

  .wp-block-navigation__responsive-dialog {
    background: var(--background) !important;
  }

  button.wp-block-navigation-overlay-close {
    color: var(--foreground) !important;
    outline: none !important;
  }
}

.hero {
  position: relative;
  min-height: 80vh;
  display: block;
  padding-top: 3rem;
  padding-bottom: 6rem;
  overflow: hidden;

  /* h1 {
    @media(max-width:900px) {
      margin-top: 5rem !important;
    }
  } */
}

.hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #071024 0%, #1c223d 25%, #4b2b55 55%, #6f417d 80%, #a862bd 100%);
  opacity: 1;
  z-index: 0
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding-top: 3rem;
  padding-bottom: 6rem
}

.hero-title {
  font-size: clamp(28px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.hero-title .primary {
  color: var(--primary)
}

.hero-copy {
  max-width: 44rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center
}

.hero-stats {
  display: flex;
  align-items: center;
  gap: 1rem
}

.stat {
  display: flex;
  align-items: center;
  gap: .6rem
}

.stat-value {
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--primary)
}

.stat-label {
  font-size: .675rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted-2)
}

.divider {
  width: 1px;
  height: 2rem;
  background: rgba(255, 255, 255, 0.12)
}

.waves {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 220px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 10 !important;
}

.wave-layer {
  position: absolute !important;
  bottom: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
}

.wave-track {
  display: flex !important;
  width: 200% !important;
  height: 100% !important;
  will-change: transform !important;
}

.wave-track svg {
  flex: 0 0 50% !important;
  width: 50% !important;
  height: 100% !important;
  display: block !important;
}

@keyframes wavesLeft {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes wavesRight {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.wave-1 {
  left: -3% !important;
  width: 106% !important;
  z-index: 1 !important;
}

.wave-1 .wave-track {
  animation: wavesLeft 72s linear infinite !important;
}

.wave-2 {
  left: -7% !important;
  width: 114% !important;
  z-index: 2 !important;
}

.wave-2 .wave-track {
  animation: wavesRight 59s linear infinite !important;
}

.wave-3 {
  left: -10% !important;
  width: 120% !important;
  z-index: 3 !important;
}

.wave-3 .wave-track {
  animation: wavesLeft 47s linear infinite !important;
}

.wave-4 {
  left: -14% !important;
  width: 128% !important;
  z-index: 4 !important;
}

.wave-4 .wave-track {
  animation: wavesRight 38s linear infinite !important;
}

@media (max-width: 640px) {
  .waves {
    height: 175px !important;
  }

  .wave-1 {
    left: -8% !important;
    width: 116% !important;
  }

  .wave-2 {
    left: -12% !important;
    width: 124% !important;
  }

  .wave-3 {
    left: -16% !important;
    width: 132% !important;
  }

  .wave-4 {
    left: -20% !important;
    width: 140% !important;
  }
}

/* Hide decorative waves on narrow screens to avoid overlap and improve performance */
@media (max-width: 765px) {
  .waves {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wave-track {
    animation: none !important;
  }
}

.wave-background {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.14);
}

.wave-background svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140vw;
  height: 140vh;
  transform: translate(-50%, -50%) rotate(135deg);
  transform-origin: center;
  pointer-events: none;
}

.page-content {
  position: relative;
  overflow: hidden;
}

.page-content>*:not(.wave-background) {
  position: relative;
  z-index: 1;
}

@media(max-width:800px) {

  .wp-block-post-content {
    padding-top: 50px !important;
  }
}

form {

  input,
  textarea {
    width: 100% !important;
    display: block;
    padding: 15px 15px !important;
    background: var(--input-background) !important;
    color: var(--primary-foreground) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    outline: 0 !important;
    font-size: 14px !important;

    &::placeholder {
      font-size: 14px !important;
      color: var(--muted-foreground) !important;
    }

    &:focus {
      border-color: var(--primary) !important;
    }
  }

  button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 15px 15px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    background: var(--primary) !important;
    color: var(--primary-foreground);
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;

    &:hover {
      background: color-mix(in srgb, var(--primary) 80%, black) !important;
    }

    &:active {
      transform: translateY(1px)
    }
  }

  @media(min-width:640px) {
    form {
      grid-template-columns: repeat(2, 1fr)
    }
  }
}