/* custom overrides for Boostify site width */
/* Constrain page content to 1200px and center it. Keep section backgrounds full-width. */
.container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1200px) {
  .container {
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Color theme overrides to match daniel-camus */
:root {
  --bg-900: #050506;
  --bg-800: #0d0d0d;
  --accent-1: #2b6fff;
  --accent-2: #7b61ff;
}

/* Glass effect for cards */
.bg-indigo-lightest-10 {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.04);
}

/* Header glass effect */
/* Header: use a lighter, performant semi-transparent background to avoid repaint flicker
   Avoid heavy backdrop-filter when there are animated elements behind (causes repainting/flicker on Safari/Chrome).
   If you want the blur effect, we can enable it only on scroll or on supported browsers. */
nav.w-100pc {
  /* Header glass effect (kept but optimized) */
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(10,10,10,0.28));
  border-bottom: 1px solid rgba(255,255,255,0.025);
  box-shadow: 0 4px 12px rgba(2,6,23,0.28);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  will-change: transform, opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: background 180ms ease, box-shadow 180ms ease;
}

/* Button colors */
.bg-indigo, .hover-bg-indigo:hover {
  background-color: var(--accent-1) !important;
}

/* Adjust fixed elements (like back-to-top) so they align with the container on wide screens */
.right-adjust {
  right: 10px; /* default for small screens */
}

@media (min-width: 1200px) {
  /* move fixed element inward so it sits near the container edge */
  .right-adjust {
    right: calc((100vw - 1200px) / 2 - 10px);
  }
}

/* Optimize spacing for 1200px layout while maintaining responsive behavior */
/* Navigation and general spacing */
.container .md-px-10 { padding-left: 0 !important; padding-right: 0 !important; }
.container nav { padding: 1rem 0; }
.container .mx-5 { margin-left: 12px !important; margin-right: 12px !important; }
.container .m-5 { margin: 12px !important; }

/* Hero section */
.container #home {
    padding-top: 2rem;
    padding-bottom: 3rem;
}
.container #home .md-mx-l5 {
    margin-left: 0 !important;
    max-width: 800px;
}

/* Features section */
.container #features {
    padding: 3rem 0;
}
.container #features .md-w-40pc {
    padding: 1rem;
}
.container #features .br-8 {
    margin: 0.5rem;
    padding: 1.5rem;
}

/* Content sections general */
.container .p-10 { padding: 1.5rem !important; }
.container .md-p-l5 { padding: 2rem 1rem !important; }
.container .md-p-l10 { padding: 3rem 1rem !important; }

/* Footer optimizations */
.container footer {
    padding: 3rem 0 2rem;
}
.container footer .md-w-25pc {
    padding-right: 2rem;
}
.container footer .md-px-10 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.container footer .mb-10 {
    margin-bottom: 1.5rem;
}

/* Pricing section */
.container #pricing .p-5 {
    padding: 1.5rem !important;
}
.container #pricing .m-3 {
    margin: 0.5rem !important;
}

/* Offset content to avoid being covered by the fixed header */
/* Apply by adding the class `header-offset` to the main .container element */
/* NOTE: removed dynamic header-offset CSS to restore original layout. */

/* Ensure the top hero section clears the fixed header so the first line is readable */
#home {
  padding-top: 140px; /* increased to ensure hero first line clears fixed header */
}

@media (max-width: 768px) {
  #home {
    padding-top: 180px; /* mobile header may be taller */
  }
}

/* Specifically push down elements that use the combined classes used in the hero
   (e.g. <div class="mx-5 md-mx-l5">) so the first lines are visible below the fixed header */
.mx-5.md-mx-l5 {
  margin-top: 70px;
}

@media (max-width: 768px) {
  .mx-5.md-mx-l5 {
    margin-top: 120px;
  }
}