/* Theme variables */
:root { --site-bg:#f5f6f7; --site-fg:#0e0f14; --accent:#0056b3; --hero-h: clamp(260px, 55vh, 720px); }

html, body { height: 100%; }

body{
  background: var(--site-bg);
  color: var(--site-fg);
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Hide Vue bindings until hydrated */
[v-cloak]{
  display:none !important;
}

/* Full-screen bootstrap-powered loader */
.site-loading-overlay{
  position:fixed;
  inset:0;
  z-index:2140;
  background:rgba(255,255,255,.97);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  opacity:0;
  transition:opacity .25s ease;
}

.site-loading-overlay.is-visible{
  opacity:1;
}

.site-loading-overlay.is-dismissed{
  pointer-events:none;
}

/* Background layers */
.screen{ min-height:100vh; width:100%; background-color:#f9fafb; position:relative; }
.grid-bg{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    linear-gradient(to right, #d1d5db 1px, transparent 1px),
    linear-gradient(to bottom, #d1d5db 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%);
  mask-image: radial-gradient(ellipse 80% 80% at 0% 0%, #000 50%, transparent 90%);
}
.svg-hero{ position:fixed; inset:0; z-index:0; pointer-events:none;
  /* Hero background gradient; text overlay is injected by main.js */
  background: linear-gradient(135deg, rgba(249,250,251,1) 0%, rgba(249,250,251,0) 55%);
  overflow:hidden;
}

.svg-hero__svg{ position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  /* JS keeps this SVG oversized + centered so diagonal text never clips */
  display:block; min-width:100%; min-height:100%; pointer-events:none;
}
.content{ position:relative; z-index:2; }

/* Branding & links */
.brand{ letter-spacing:.06em; }
.nav-link-top{ color:var(--site-fg); }
.nav-link-top:hover{ color:var(--accent); }

/* Wave section */
.wave-section{ padding-block:1.25rem; overflow:hidden; }

/* Text along path appearance */
.wave-text{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  fill:var(--site-fg);
}

/* Responsive text sizes */
@media (min-width:320px){ .wave-text{ font-size:24px; } }
@media (min-width:576px){ .wave-text{ font-size:28px; } }
@media (min-width:768px){ .wave-text{ font-size:34px; } }
@media (min-width:992px){ .wave-text{ font-size:40px; } }
@media (min-width:1200px){ .wave-text{ font-size:46px; } }

/* Social styles */
.social-title{ letter-spacing:.04em; }
.social-link{ color:var(--site-fg); opacity:.9; }
.social-link:hover{ color:var(--accent); opacity:1; }

/* Icon next to links */
.icon-link{
  width: 1.25rem;  /* ~20px */
  height: 1.25rem; /* ~20px */
  display: inline-block;
}

/* Make external SVG icons theme-aware using masking */
.icon-mask{
  /* Use the provided --icon-url as a mask so color = currentColor */
  background-color: currentColor;
  -webkit-mask-image: var(--icon-url);
  mask-image: var(--icon-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Decorative accent */
.squiggle{
  height:4px;
  width:120px;
  background:linear-gradient(90deg, var(--accent), transparent);
  border-radius:999px;
}

/* Respect reduced motion 
@media (prefers-reduced-motion: reduce){
  .wave-text{ letter-spacing:.08em; }
}
*/

/* Mobile tweaks */
@media (max-width: 768px){
  header nav{ flex-direction:column; align-items:center; gap:1rem; text-align:center; }
  header nav .brand{ text-align:center; }
  header nav .nav{ justify-content:center; }
  main .row{ text-align:center; }
  .social-link{ justify-content:center; }
  footer .d-flex{ flex-direction:column; align-items:center; gap:.75rem; text-align:center; }
}