/* ============================================================
   core/layout.css
   Containers, sections, grids, utilities
   ============================================================ */

.plx-container {
  width: min(1200px, 92%);
  margin: 0 auto;
}

.plx-section {
  padding: var(--plx-space-7) 0;
}

.plx-section-lg {
  padding: var(--plx-space-8) 0;
}

.plx-flex {
  display: flex;
}

.plx-flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.plx-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.plx-flex-col {
  display: flex;
  flex-direction: column;
}

.plx-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--plx-space-5);
}

.plx-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--plx-space-5);
}

@media (max-width: 992px) {
  .plx-grid-2, .plx-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Spacing utilities */
.plx-mt-0 { margin-top: 0; }
.plx-mt-2 { margin-top: var(--plx-space-2); }
.plx-mt-3 { margin-top: var(--plx-space-3); }
.plx-mt-4 { margin-top: var(--plx-space-4); }
.plx-mt-5 { margin-top: var(--plx-space-5); }
.plx-mt-6 { margin-top: var(--plx-space-6); }

.plx-mb-0 { margin-bottom: 0; }
.plx-mb-2 { margin-bottom: var(--plx-space-2); }
.plx-mb-3 { margin-bottom: var(--plx-space-3); }
.plx-mb-4 { margin-bottom: var(--plx-space-4); }
.plx-mb-5 { margin-bottom: var(--plx-space-5); }
.plx-mb-6 { margin-bottom: var(--plx-space-6); }

.plx-p-4  { padding: var(--plx-space-4); }
.plx-px-4 { padding-inline: var(--plx-space-4); }
.plx-pt-4 { padding-top: var(--plx-space-4); }
.plx-pb-4 { padding-bottom: var(--plx-space-4); }

/* Divider line */
.plx-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(var(--plx-brand-primary-raw), 0.4), transparent);
  margin: var(--plx-space-7) 0;
}

/* ============================================================
   New Premium System: Full-Screen Centering Utility
   ============================================================ */

/* Attach this to any first section to achieve a true full viewport layout */
.plx-hero-fullscreen {
  /* Set size exactly to the remaining viewport height */
  min-height: calc(100vh - var(--plx-navbar-height, 70px));
  
  /* Flexbox configuration to center everything flawlessly */
  display: flex;
  align-items: center;
  justify-content: center;
  
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* Ensure the inner container expands properly during flex layout centering */
.plx-hero-fullscreen > .plx-container {
  width: 100%;
}

#moaThemeToggle {
        position: fixed !important; /* Force it out of the layout flow */
        bottom: 24px !important;
        right: 24px !important;
        z-index: 99999 !important; /* Stay on top of ALL components */
        
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        
        /* Fallbacks if your CSS variables fail to load */
        background: var(--plx-glass-bg, rgba(15, 23, 42, 0.85));
        border: 1px solid var(--plx-glass-border, rgba(255, 255, 255, 0.15));
        color: var(--plx-text-primary, #ffffff);
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    #moaThemeToggle:hover {
        transform: scale(1.08);
    }
    
    #moaThemeToggle i {
        font-size: 1.25rem;
    }

    /* ============================================================
   WORKING ORBIT SYSTEM — FINAL VERSION
   ============================================================ */

/* Orbit container */
.plx-orbit {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible; /* IMPORTANT */
  z-index: 5;
}

/* The ring that rotates */
.plx-orbit-ring {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.18);
  animation: plx-orbit-rotate 12s linear infinite;
  transform-origin: center center;
  overflow: visible;
}

/* The dot that orbits */
.plx-orbit-dot {
  position: absolute;
  top: -6px; /* sits above the ring */
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--plx-brand-primary, #14b8ff);
  box-shadow: 0 0 12px var(--plx-brand-primary, #14b8ff);
  z-index: 10;
}

/* Rotation animation */
@keyframes plx-orbit-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Premium section spacing */
.plx-section-xs {
  padding: var(--plx-space-5) 0; /* 24px top/bottom */
}

.plx-section-sm {
  padding: var(--plx-space-6) 0; /* 32px */
}

.plx-section-md {
  padding: var(--plx-space-7) 0; /* 48px */
}

.plx-section-lg {
  padding: var(--plx-space-8) 0; /* 64px */
}

.plx-section-xl {
  padding: calc(var(--plx-space-8) * 1.5) 0; /* 96px */
}

/* Vertical rhythm utilities */
.plx-stack > * + * {
  margin-top: var(--plx-space-5); /* 24px */
}

.plx-stack-sm > * + * {
  margin-top: var(--plx-space-3); /* 12px */
}

.plx-stack-md > * + * {
  margin-top: var(--plx-space-6); /* 32px */
}

.plx-stack-lg > * + * {
  margin-top: var(--plx-space-7); /* 48px */
}