/* ==========================================================================
   UNDERSTONE AI AUTOMATION — Master Brand & Mobile Optimization Stylesheet
   ========================================================================== */

:root {
  --white: #f5efff !important;
  --black: #130924 !important;
  --blue: #9047ff !important;
  --twilight: #2a1647 !important;
  --periwinkle: #c49bff !important;
  --light-blue: #eadbff !important;
  --error: #ff2e93 !important;
  --background: var(--white) !important;
  --foreground: var(--twilight) !important;
  --accent: #d946ef !important;
  --primary: #9047ff !important;
}

body.dark {
  --background: #140a26 !important;
  --foreground: #f5efff !important;
  --accent: #e879f9 !important;
  --primary: #a855f7 !important;
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   BRAND LOGO (Header & Mobile Dock)
   ========================================================================== */

.header__logo text,
.mobile-nav__logo text {
  font-family: "PP Neue Montreal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: -0.02em !important;
}

/* ==========================================================================
   LOADER: Only display the bold Understone AI Automation gradient wordmark
   ========================================================================== */

.loader__content svg,
.loader__content .loader__logo {
  display: none !important;
}

.loader__content::before {
  content: 'Understone AI Automation';
  display: block;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 5.2vw, 4.2rem);
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-align: center;
  padding: 0.15em 0.4em;
  margin: 0 auto;
  max-width: 90vw;
  background: linear-gradient(
    90deg,
    var(--foreground) 0%,
    var(--foreground) 46%,
    #9047ff 50%,
    #d946ef 68%,
    #3b0764 100%
  );
  background-size: 240% 100%;
  background-position: calc(100% - var(--progress, 0) * 1%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 6px 24px rgba(144, 71, 255, 0.25));
  user-select: none;
}

/* ==========================================================================
   MOBILE & TOUCH OPTIMIZATION
   ========================================================================== */

/* Fast touch response without 300ms delay */
button,
a,
input,
select,
textarea,
.button,
.pill,
.mobile-nav__burger,
.ai-btn {
  touch-action: manipulation;
}

/* Ensure mobile dock respects modern phone safe areas (e.g. iPhone notch / home bar) */
@media (max-width: 1024px) {
  .mobile-nav[data-v-0fcefd7c] {
    bottom: max(1.25rem, env(safe-area-inset-bottom, 1.25rem)) !important;
  }

  .mobile-nav--expanded[data-v-0fcefd7c] {
    max-height: calc(100dvh - 2.5rem - env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Footer & content padding on mobile */
  .footer-data__group[data-v-eccba1d7]:not(.footer-data__group:last-child) {
    max-width: none !important;
  }

  .c-hero__title {
    word-break: break-word;
  }
}

/* Ensure direct contact links in FooterData have plenty of horizontal room */
.footer-data__group[data-v-eccba1d7]:not(.footer-data__group:last-child) {
  max-width: none !important;
}