@import url(/assets/plugins/font-awesome4/css/font-awesome.css);
@import url("https://use.fontawesome.com/releases/v5.15.4/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Mynerve');

/* ============================================================
   CHRISTMAS UNLOCKED — MASTER STYLESHEET
   Bootstrap 5 + Font Awesome 5
   ============================================================

   TABLE OF CONTENTS
   1.  Google Fonts Import
   2.  CSS Variables
   3.  Base / Reset
   4.  Typography Scale
   5.  Navigation — Marketing
   6.  Navigation — Funnel
   7.  Footer
   8.  Buttons & CTAs
   9.  Badges
   10. Cards
   11. Utility Classes
   12. Snowflakes
   13. Fireplace Glow
   14. Back To Top
   ============================================================ */


/* ── 1. GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=DM+Sans:wght@300;400;500&display=swap');


/* ── 2. CSS VARIABLES ── */
:root {

  /* Brand — Red */
  --color-red:          #B91C1C;
  --color-red-dark:     #7F1212;
  --color-red-mid:      #991818;
  --color-red-light:    rgba(185, 28, 28, 0.12);

  /* Brand — Gold / Cream */
  --color-gold:         #FEF3C7;
  --color-gold-mid:     #FCD34D;
  --color-gold-dark:    #D97706;

  /* Neutrals */
  --color-white:        #FFFFFF;
  --color-off-white:    #FDF8F0;
  --color-dark:         #0d0404;
  --color-dark-mid:     #1a0505;

  /* Text */
  --color-text-primary:    #FFFFFF;
  --color-text-muted:      rgba(255, 255, 255, 0.6);
  --color-text-faint:      rgba(255, 255, 255, 0.35);
  --color-text-dark:       #1C1C1C;
  --color-text-dark-muted: #6B6B6B;

  /* Borders */
  --color-border-light: rgba(255, 255, 255, 0.12);
  --color-border-gold:  rgba(254, 243, 199, 0.35);
  --color-border-dark:  rgba(0, 0, 0, 0.1);

  /* Typography */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  52px;

  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  --leading-tight:  1.08;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.75;

  --tracking-tight:   -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.12em;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.15);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.18);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.25);

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* Nav */
  --nav-height: 56px;
}


/* ── 3. BASE / RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  color: var(--color-text-dark);
  background-color: var(--color-off-white);
  line-height: var(--leading-normal);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Prevent mobile zoom on inputs */
input, textarea, select, .form-control {
  font-size: 16px !important;
}

/* Hide platform breadcrumbs */
.breadcrumbs,
.bs5-breadcrumbs {
  display: none;
}

/* Hide platform back-to-top */
#topcontrol {
  display: none;
}


/* ── 4. TYPOGRAPHY SCALE ── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
  color: var(--color-text-dark);
}

h1 { font-size: clamp(var(--text-3xl), 4vw,   var(--text-4xl)); }
h2 { font-size: clamp(var(--text-2xl), 3vw,   var(--text-3xl)); }
h3 { font-size: clamp(var(--text-xl),  2.5vw, var(--text-2xl)); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-md); }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-gold);
  display: block;
  margin-bottom: var(--space-3);
}

.text-gold { color: var(--color-gold) !important; }
.text-red  { color: var(--color-red)  !important; }
.text-muted-light { color: var(--color-text-muted); }


/* ── 5. NAVIGATION — MARKETING ── */
/* Used on: Home, FAQ, and future marketing pages */

.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: rgba(100, 10, 10, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-light);
  display: flex;
  align-items: center;
}

.site-nav .navbar-brand {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-gold) !important;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav .navbar-brand .brand-icon {
  font-size: 12px;
  color: var(--color-gold);
}

.site-nav .nav-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-muted) !important;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-2) var(--space-3) !important;
  transition: color var(--transition-fast);
  position: relative;
}

.site-nav .nav-link:hover {
  color: var(--color-white) !important;
}

/* Active page indicator — gold underline */
.site-nav .nav-link.active {
  color: var(--color-gold) !important;
}

.site-nav .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: var(--space-3);
  right: var(--space-3);
  height: 2px;
  background: var(--color-gold);
  border-radius: 2px;
}

/* Hamburger toggler */
.site-nav .navbar-toggler {
  border-color: var(--color-border-gold);
  padding: 4px 8px;
}

.site-nav .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28254,243,199,0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Nav CTA button — "Start Now"
   Desktop: fades in after scrolling past hero
   Mobile: always visible in collapsed menu */
.btn-nav-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-gold);
  color: var(--color-red-dark) !important;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: 8px 20px;
  border-radius: var(--radius-full);
  border: none;
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
  /* Hidden by default on desktop — JS adds .visible after scroll */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, background var(--transition-fast), transform var(--transition-fast);
}

.btn-nav-cta.visible {
  opacity: 1;
  pointer-events: auto;
}

.btn-nav-cta:hover {
  background: var(--color-white);
  color: var(--color-red-dark) !important;
  transform: translateY(-1px);
}

/* Mobile collapse panel */
@media (max-width: 991px) {
  .site-nav .navbar-collapse {
    background: rgba(90, 8, 8, 0.97);
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-4) var(--space-5);
    margin-top: 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }

  .site-nav .nav-link {
    padding: var(--space-3) var(--space-2) !important;
    border-bottom: 1px solid var(--color-border-light);
    font-size: var(--text-base) !important;
  }

  .site-nav .navbar-nav .nav-item:last-child .nav-link {
    border-bottom: none;
  }

  /* Always show CTA in mobile collapsed menu */
  .btn-nav-cta {
    opacity: 1 !important;
    pointer-events: auto !important;
    width: 100%;
    justify-content: center;
    padding: 15px !important;
    border-radius: var(--radius-md) !important;
    margin-top: var(--space-4);
    font-size: var(--text-base) !important;
  }
}


/* ── 6. NAVIGATION — FUNNEL ── */
/* Used on: Packages, Setup, Puzzle, Summary
   Stripped down — logo + quiet FAQ link only
   Keeps parents focused on completing setup    */

.site-nav--funnel {
  background: rgba(80, 8, 8, 0.85) !important;
}

/* Quiet FAQ link — subtle, not distracting */
.nav-link-quiet {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-light);
  color: rgba(255,255,255,0.45) !important;
  text-decoration: none;
  letter-spacing: var(--tracking-wide);
  transition: color var(--transition-fast);
}

.nav-link-quiet:hover {
  color: rgba(255,255,255,0.8) !important;
}


/* ── 7. FOOTER ── */

.site-footer {
  background: var(--color-red-dark);
  color: var(--color-text-muted);
  padding: var(--space-16) 0 var(--space-8);
  border-top: 1px solid var(--color-border-light);
}

.site-footer .footer-brand {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

.site-footer .footer-tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
  max-width: 280px;
}

.site-footer .footer-heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.site-footer .footer-link {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: var(--weight-light);
  margin-bottom: var(--space-2);
  transition: color var(--transition-fast);
}

.site-footer .footer-link:hover {
  color: var(--color-white);
}

.site-footer .footer-bottom {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-light);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.site-footer .footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-light);
  color: var(--color-text-muted);
  font-size: 14px;
  margin-right: var(--space-2);
  transition: all var(--transition-fast);
}

.site-footer .footer-social a:hover {
  background: var(--color-red);
  border-color: var(--color-red);
  color: var(--color-white);
}


/* ── 8. BUTTONS & CTAs ── */

/* Primary — Gold fill */
.btn-xprimary {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  background: var(--color-gold) !important;
  color: var(--color-red-dark) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-medium) !important;
  padding: 15px 30px !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none !important;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn-xprimary:hover,
.btn-xprimary:focus,
.btn-xprimary:active {
  background: var(--color-white) !important;
  color: var(--color-red-dark) !important;
  transform: translateY(-1px);
  box-shadow: none !important;
  outline: none !important;
}

/* Secondary — Outlined gold */
.btn-xsecondary {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  background: transparent !important;
  color: var(--color-gold) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: var(--weight-medium) !important;
  padding: 14px 30px !important;
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-border-gold) !important;
  box-shadow: none !important;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none !important;
  transition: all var(--transition-fast);
}

.btn-xsecondary:hover,
.btn-xsecondary:focus {
  background: rgba(254, 243, 199, 0.1) !important;
  color: var(--color-white) !important;
  box-shadow: none !important;
}

/* Ghost — for light backgrounds */
.btn-xghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--color-red);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  padding: 14px 30px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-red);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-xghost:hover {
  background: var(--color-red);
  color: var(--color-white);
}

/* Size modifiers */
.btn-x-sm { font-size: var(--text-sm) !important; padding: 10px 20px !important; }
.btn-x-lg { font-size: var(--text-md) !important; padding: 18px 40px !important; }

/* CTA note text below button */
.cta-note {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-3);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}


/* ── 9. BADGES ── */

.xbadge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-full);
  padding: 5px 14px;
}

.xbadge span {
  font-size: var(--text-xs);
  color: var(--color-gold);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.xbadge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
  animation: badge-pulse 4s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}


/* ── 10. CARDS ── */

.xcard {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-dark);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.xcard:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.xcard-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-border-light);
  color: var(--color-white);
}

.xcard-glass {
  background: rgba(20, 4, 4, 0.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--radius-lg);
  color: var(--color-white);
}


/* ── 11. UTILITY CLASSES ── */
/* ── SANTA MODAL ── */
.santa-modal-content {
  background: var(--color-off-white);
  border: 2px solid var(--color-gold-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
 
.santa-modal-header {
  background: var(--color-red-dark);
  padding: var(--space-5) var(--space-6);
  border-bottom: none;
}
 
.santa-modal-header .modal-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  text-align: center;
  width: 100%;
}
 
.santa-modal-body {
  padding: var(--space-6);
  color: var(--color-text-dark);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow-y: auto;
  max-height: calc(100vh - 280px);
}
 
.santa-modal-body p {
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
  color: var(--color-red-dark);
}
 
.santa-modal-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.santa-modal-body li {
  font-size: var(--text-sm);
  color: var(--color-text-dark);
  font-weight: var(--weight-light);
  padding: var(--space-2) 0 var(--space-2) var(--space-6);
  position: relative;
  border-bottom: 1px solid var(--color-border-dark);
}
 
.santa-modal-body li:last-child { border-bottom: none; }
 
.santa-modal-body li::before {
  content: '🎅';
  position: absolute;
  left: 0;
  font-size: 14px;
}
 
.santa-modal-footer {
  padding: var(--space-4) var(--space-6);
  text-align: center;
  background: var(--color-off-white);
  border-top: 1px solid var(--color-border-dark);
}
 
.santa-ok-btn {
  background: var(--color-gold);
  color: var(--color-red-dark);
  border: none;
  padding: 14px 32px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
  width: 100%;
}
 
.santa-ok-btn:hover { background: var(--color-white); }

.section-pad    { padding: var(--space-20) 0; }
.section-pad-sm { padding: var(--space-12) 0; }
.section-pad-lg { padding: var(--space-24) 0; }

.xdivider {
  width: 1px;
  background: var(--color-border-light);
  flex-shrink: 0;
}

.xdivider-h {
  height: 1px;
  background: var(--color-border-light);
  border: none;
  margin: var(--space-6) 0;
}

/* Stat / trust items */
.stat-num {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-gold);
  display: block;
  line-height: 1;
}

.stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-weight: var(--weight-light);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  display: block;
  margin-top: 3px;
}

/* Background helpers */
.bg-red      { background-color: var(--color-red); }
.bg-red-dark { background-color: var(--color-red-dark); }
.bg-dark     { background-color: var(--color-dark); }
.bg-cream    { background-color: var(--color-off-white); }


/* ── 12. SNOWFLAKES ── */

.xsnow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.xsf {
  position: absolute;
  color: rgba(255, 255, 255, 0.14);
  animation: snow-fall linear infinite;
  user-select: none;
}

@keyframes snow-fall {
  0%   { transform: translateY(-20px) rotate(0deg);   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 0.8; }
  100% { transform: translateY(105vh) rotate(540deg); opacity: 0; }
}


/* ── 13. FIREPLACE GLOW ── */

.fireplace-glow {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(
    to right,
    transparent       0%,
    var(--color-gold-dark) 20%,
    var(--color-red)       50%,
    var(--color-gold-dark) 80%,
    transparent       100%
    display: none;
  );
  opacity: 0.6;
  z-index: 500;
  pointer-events: none;
  animation: glow-flicker 3s ease-in-out infinite alternate;
}

@keyframes glow-flicker {
  0%   { opacity: 0.4; }
  50%  { opacity: 0.75; }
  100% { opacity: 0.5; }
}


/* ── 14. BACK TO TOP — Christmas Edition ── */

#backToTop {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 999;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-red);
  border: 1px solid var(--color-border-gold);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  /* Hidden by default — JS adds .show */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background var(--transition-fast);
  /* Christmas glow */
  animation: christmas-glow 6s ease-in-out infinite;
}

#backToTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#backToTop:hover {
  background: var(--color-red-dark);
  color: var(--color-white);
}

#backToTop:active {
  transform: translateY(2px);
}

/* Chevron bobs gently */
#backToTop .fa-chevron-up {
  display: inline-block;
  animation: gentle-bob 3s ease-in-out infinite;
}

@keyframes gentle-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* Warm ember glow pulse */
@keyframes christmas-glow {
  0%, 100% {
    box-shadow:
      0 0 8px  2px  rgba(185, 28, 28, 0.5),
      0 0 20px 4px  rgba(254, 243, 199, 0.2);
  }
  50% {
    box-shadow:
      0 0 16px 6px  rgba(185, 28, 28, 0.8),
      0 0 40px 10px rgba(254, 243, 199, 0.35);
  }
}

/* Ripple rings — red / gold / green staggered */
#backToTop::before,
#backToTop::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  animation: ripple-out 4.5s ease-out infinite;
  pointer-events: none;
}

#backToTop::before {
  border: 2px solid var(--color-red);
  animation-delay: 0s;
}

#backToTop::after {
  border: 2px solid #16a34a;
  animation-delay: 1.5s;
}

.ripple-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  opacity: 0;
  animation: ripple-out 4.5s ease-out infinite;
  animation-delay: 3s;
  pointer-events: none;
}

@keyframes ripple-out {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.4); opacity: 0; }
}