/* ============================================
   shared.css — Styles shared across all pages
   ============================================ */

/* ── Global page dark background ─────── */
html, body {
  background-color: #020810;
  color: #EDF2FF;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* IE / Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;               /* Chrome / Safari / Opera */
}

/* Material Symbols icon weight settings */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Base animation keyframe reused by all pages */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Grain texture overlay — organic, human feel ─── */
.grain-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ── Utility: reliable hide (overrides Tailwind CDN preflight) ── */
.is-hidden {
  display: none !important;
}

/* ── Nav brand hover ─────────────────── */
.hover\:text-primary:hover {
  color: #FE7BCD;
}

/* ── Page transition overlay ─────────────────────────── */
#page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #020810;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
#page-transition-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

/* Page entrance — body starts invisible; JS adds page-entering to animate in */
body {
  opacity: 0;
}

/* Page body entrance — applied via JS on DOMContentLoaded */
body.page-entering {
  animation: pageEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Nav: scrolled state ────────────────────────────── */
nav.nav--scrolled {
  background: rgba(2, 8, 16, 0.92) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 32px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
nav {
  transition: background 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Mobile nav ───────────────────────── */
#mobile-menu {
  transition: all 0.25s ease;
}

/* Hamburger icon lines – animated to X when open */
#mobile-menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#mobile-menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#mobile-menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
#mobile-menu-toggle span {
  transition: transform 0.25s ease, opacity 0.2s ease;
  display: block;
}

/* ── Global dark form inputs ─────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  background-color: rgba(10, 16, 32, 0.85) !important;
  color: #EDF2FF !important;
  border-color: #1E2A44 !important;
}
input::placeholder,
textarea::placeholder {
  color: #3A5070 !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: rgba(254, 123, 205, 0.5) !important;
  background-color: rgba(14, 22, 44, 0.95) !important;
}
select option {
  background-color: #08091A;
  color: #EDF2FF;
}

/* ── Time chips (schedule selector) ─── */
.time-chip {
  background: rgba(10, 16, 32, 0.80);
  border: 1.5px solid #1A2438;
  color: #7A99C2;
  transition: border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.time-chip:hover {
  border-color: rgba(254, 123, 205, 0.45);
  color: #FE7BCD;
  background: rgba(254, 123, 205, 0.08);
  transform: translateY(-2px);
}
.time-chip-selected {
  background: linear-gradient(135deg, #FE7BCD, #D64A9E) !important;
  border-color: transparent !important;
  color: #fff !important;
}