/*
Theme Name: Hyperlite
Theme URI: https://hyderabad.digital
Author: Chandra Sheker
Author URI: https://hyderabad.digital
Description: An ultra-lightweight, high-performance WordPress canvas theme optimized for custom snippet injections and instant SPA loading.
Version: 1.2.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hyperlite
*/

/* ========= Modern CSS Reset (inspired by Andy Bell / modern-normalize) ========= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  hanging-punctuation: first last;
}

:where(body) {
  margin: 0;
  line-height: 1.5;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, dl, dd) {
  margin: 0;
}

:where(ul[role='list'], ol[role='list']) {
  list-style: none;
  padding: 0;
  margin: 0;
}

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
  max-width: 100%;
}

:where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(a:not([class])) {
  text-decoration-skip-ink: auto;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

:root {
  --container: 1200px;
  --gap: 1rem;
  --font-system: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

body {
  font-family: var(--font-system);
  color: #111;
  background: #fff;
}

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

h1 {
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
  line-height: 1.25;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

p {
  margin-block: 0.75rem;
}

.stack>*+* {
  margin-block-start: var(--gap);
}

.site-header,
.site-footer {
  padding: 1rem 0;
  border-block-end: 1px solid #eee;
}

.site-footer {
  border-block-start: 1px solid #eee;
  border-block-end: 0;
  margin-top: 2rem;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
  color: inherit;
}

/* ==========================================
   SPA Page Swapping & Animation Classes
   ========================================== */
#content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* Page leaving transition state */
.spa-fade-out {
  opacity: 0;
  transform: none; /* Fades out in place to prevent vertical layout shifts */
}

/* Page entering transition state */
.spa-fade-in {
  opacity: 0;
  transform: translateY(8px); /* Starts slightly lower and gently rises up to 0 */
}

/* Horizontal Loading Progress Bar */
#spa-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(to right, #007cba, #00a0d2);
  z-index: 99999;
  width: 0%;
  opacity: 0;
  transition: width 0.3s cubic-bezier(0.08, 0.82, 0.17, 1), opacity 0.2s ease;
}

/* SPA Glassmorphism Loading Spinner Overlay */
#spa-spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.spa-spinner {
  width: 44px;
  height: 44px;
  border: 3.5px solid rgba(0, 124, 186, 0.1);
  border-top-color: #007cba;
  border-radius: 50%;
  animation: spa-spin 0.75s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

@keyframes spa-spin {
  to { transform: rotate(360deg); }
}