/* ============================================
   FairSettlement.org — Shared Component Styles
   Wrapped in @layer components so these never
   override Tailwind utility classes.
   ============================================ */

@layer components {

/* CTA Buttons (hover via CSS, replaces inline onmouseover) */
.cta-btn {
    display: inline-block;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff; padding: 16px 48px; border-radius: 12px;
    font-weight: 700; font-size: 1.125rem; text-decoration: none;
    transition: all .3s ease; box-shadow: 0 8px 30px rgba(99,102,241,.35);
    font-family: 'Space Grotesk', sans-serif;
}
.cta-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(99,102,241,.45); color: #fff }

/* Calculate Yours link (results page) */
.calc-link {
    display: inline-block; margin-top: 8px; padding: 8px 20px;
    background: rgba(99,102,241,.15); border: 1px solid rgba(99,102,241,.3);
    border-radius: 8px; font-size: 0.875rem; font-weight: 600;
    color: #a5b4fc; text-decoration: none; transition: all .3s ease;
}
.calc-link:hover { background: rgba(99,102,241,.25); color: #a5b4fc }

/* Mobile Nav */
.mobile-menu-btn {
    display: none; background: none; border: none; cursor: pointer;
    padding: 8px; color: #e2e8f0;
}

#mobileMenu {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(10,10,20,.97); backdrop-filter: blur(20px);
    display: none; flex-direction: column;
    padding: 0; opacity: 0;
    transition: opacity .25s ease;
}
#mobileMenu.open { display: flex; opacity: 1 }
#mobileMenu .mobile-nav-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; border-bottom: 1px solid rgba(255,255,255,.08);
}
#mobileMenu .mobile-nav-links {
    display: flex; flex-direction: column; padding: 16px 0;
    overflow-y: auto; flex: 1;
}
#mobileMenu .mobile-nav-links a {
    padding: 16px 28px; font-size: 1.125rem; font-weight: 500;
    color: rgba(226,232,240,.7); text-decoration: none;
    transition: all .2s ease; border-left: 3px solid transparent;
}
#mobileMenu .mobile-nav-links a:hover,
#mobileMenu .mobile-nav-links a.active {
    color: #fff; background: rgba(99,102,241,.08);
    border-left-color: #6366f1;
}
#mobileMenu .mobile-nav-cta {
    padding: 20px 24px; border-top: 1px solid rgba(255,255,255,.08);
}
.mobile-close-btn {
    background: none; border: none; cursor: pointer;
    color: #e2e8f0; padding: 8px;
}

} /* end @layer components */

/* Mobile breakpoint - outside layer for proper media query support */
@media (max-width: 767px) {
    .mobile-menu-btn { display: flex; align-items: center; justify-content: center }
}

/* ============================================
   Layout Overrides — force centering/spacing
   regardless of inline <style> * { margin:0 }
   ============================================ */
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.px-4  { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-6  { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-8  { padding-left: 2rem !important; padding-right: 2rem !important; }
.py-4  { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-8  { padding-top: 2rem !important; padding-bottom: 2rem !important; }
.py-10 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
.py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.gap-4  { gap: 1rem !important; }
.gap-6  { gap: 1.5rem !important; }
.gap-8  { gap: 2rem !important; }
.gap-12 { gap: 3rem !important; }
.flex   { display: flex !important; }
.grid   { display: grid !important; }
.hidden { display: none !important; }
.block  { display: block !important; }
.items-center   { align-items: center !important; }
.items-start    { align-items: flex-start !important; }
.justify-between { justify-content: space-between !important; }
.justify-center  { justify-content: center !important; }
.grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
.grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
@media (min-width: 768px) {
  .md\:flex   { display: flex !important; }
  .md\:hidden { display: none !important; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .md\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
  .md\:grid-cols-5 { grid-template-columns: repeat(5,minmax(0,1fr)) !important; }
}
@media (min-width: 640px) {
  .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}
@media (min-width: 1024px) {
  .lg\:px-8  { padding-left: 2rem !important; padding-right: 2rem !important; }
  .lg\:py-16 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}