/* ============================================================
   MOMAGIC.NET — GLOBAL STYLESHEET
   - Warm purple brand (matches banner)
   - Clean layout, accessible focus, responsive video grid
   - Light performance helpers (lazy images, CLS-safe sizes)
   ============================================================ */


/* ==========================
   1) THEME TOKENS (CSS VARS)
   ========================== */
:root{
  /* Typography */
  --font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Colors */
  --text-color: #d9d9d9;       /* main body text on black */
  --muted-text: #9aa3ab;       /* supporting text */
  --background-color: #000;    /* page bg */
  --surface: #0b0b0b;          /* cards/panels */
  --border-color: #1e1e1e;     /* subtle hairline borders */

  /* Brand (warmer purple — less blue) */
  --primary-color:  #6E2A8A;   /* royal warm purple (anchor) */
  --accent-color:   #B050A1;   /* lavender-magenta highlight */
  --primary-gradient: linear-gradient(90deg, #6E2A8A 0%, #B050A1 100%);

  /* Radii / effects */
  --radius: 14px;
  --shadow: 0 10px 24px rgba(0,0,0,.35);
}


/* ====================================
   2) GLOBAL RESETS & BASE TYPOGRAPHY
   ==================================== */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Optional: subtle dusk-violet backdrop like the banner */
body{
  background: radial-gradient(80% 55% at 50% 0%, #190020 0%, #000 65%);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Headings inherit gradient for brand feel where applied in sections */
h1, h2 { line-height: 1.2; margin: 0 0 10px; }
p { line-height: 1.65; margin: 0 0 12px; font-size: 1.05rem; }


/* ==========================
   3) HEADER / BANNER
   ========================== */
#logo-container{
  text-align: center;
  margin: 24px auto;
  max-width: 1100px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

/* Keep the banner slim; object-fit preserves composition */
.logo-image{
  width: 100%;
  height: auto;
  max-height: 280px;      /* tweak 220–300px to taste */
  object-fit: cover;
  border-radius: 10px;
}

/* Rotating slogan under banner (Typed.js) */
#slogan{
  margin: 12px 0 4px;
  font-size: 1.25rem;
  color: var(--muted-text);
}

/* Primary CTA row in header */
.top-cta{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 10px;
}


/* ==========================
   4) SECTION CONTAINERS
   ========================== */
.index-container{
  margin: 20px auto;
  max-width: 1100px;
  background: var(--surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

/* Gradient headings to match banner light trails */
.index-container h2,
.about-highlight{
  font-size: 1.6rem;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;        /* reveals the gradient */
  letter-spacing: 0.3px;
}


/* ==========================
   5) VIDEO GRID (RESPONSIVE)
   - Uses CSS aspect-ratio (no JS)
   ========================== */
.video-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin-top: 10px;
}
.video{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: #000;
}
.video iframe{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0; border-radius: 12px;
}


/* ==========================
   6) ABOUT LAYOUT
   - Floats photo on desktop, stacks on mobile
   ========================== */
.about{
  position: relative;
}
.about .about-pic{
  width: 140px;
  border-radius: 16px;
  border: 1px solid var(--border-color);
  margin: 6px 16px 12px 0;
}
.about .about-pic.left{ float: left; }

/* Clear the float without extra markup */
.about::after{ content: ""; display: table; clear: both; }


/* ==========================
   7) PRESS GALLERY
   ========================== */
.press-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 8px 0 12px;
}
.press-img{
  border-radius: 14px;
  border: 1px solid var(--border-color);
}


/* ==========================
   8) BUTTONS / CTAs
   ========================== */
.index-button-container{
  text-align: center;
  margin-top: 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.momagic-button{
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;             /* pill */
  border: 1px solid transparent;
  background: var(--primary-gradient);
  color: #0b0b0b;                   /* legible on light gradient */
  font-weight: 700;
  font-size: 0.95rem;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    opacity .12s ease,
    background .12s ease,
    color .12s ease;
}
.momagic-button:hover{
  transform: translateY(-1px);
  opacity: .95;
  /* warm magenta glow */
  box-shadow: 0 10px 22px rgba(176,80,161,.18);
}

/* Outline variant: subtle and brand-y */
.momagic-button.outline{
  background: transparent;
  color: #e6cfe0;              /* soft lavender text */
  border-color: #3b3b3b;
}
.momagic-button.outline:hover{
  background: rgba(110,42,138,.14);
  border-color: #555;
}

/* Ghost variant for neutral links (e.g., social) */
.momagic-button.ghost{
  background: transparent;
  color: var(--text-color);
  border-color: var(--border-color);
}
.momagic-button.ghost:hover{ background:#111; }

/* Accessible keyboard focus */
.momagic-button:focus-visible{
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}


/* ==========================
   9) QUOTES / TESTIMONIALS
   ========================== */
blockquote{
  margin: 14px auto;
  padding: 14px 18px;
  max-width: 700px;
  background: #0e0e0e;
  border-left: 5px solid #7A2C8F; /* warmer purple to match brand */
  border-radius: 8px;
  color: var(--text-color);
  font-style: italic;
}
blockquote cite{
  display: block;
  margin-top: 6px;
  color: var(--muted-text);
  font-style: normal;
}


/* ==========================
   10) FOOTER
   ========================== */
footer{ padding: 0; background: transparent; }
.footer-container{
  text-align: center;
  padding: 12px 0 28px;
  color: var(--muted-text);
}
.footer-powered-by a{
  color: #e91e63;                 /* brand credit pop */
  text-decoration: none;
}
.footer-powered-by a:hover{
  color: #fff;
  text-decoration: underline;
}


/* ==========================
   11) RESPONSIVE TWEAKS
   ========================== */
@media (max-width: 768px){
  #logo-container { margin: 14px; padding: 12px; }
  .logo-image { max-height: 200px; }   /* slimmer banner on phones */
  .index-container { margin: 14px; padding: 16px; }
  .about .about-pic{ width: 120px; margin: 4px 12px 10px 0; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}