/* ==========================================================
   🏗️ GLOBAL LAYOUT ENGINE — layout.css (Elite Edition)
   - Architecture: Modern CSS Logical Properties
   - Performance: Containment Contexts & Rendering Isolation
   - Quality: WCAG 2.2 Standard & Future-Proof Flow
========================================================== */

/* 1. ROOT LAYOUT REINFORCEMENT
   - Ensuring a perfect "Sticky Footer" with modern Viewport Units.
---------------------------------------------------------- */
body {
  font-family: var(--font-main);
  line-height: var(--line-height-base);
  color: var(--gray-800);
  background-color: var(--light);

  /* Modern Performance: Preventing horizontal scroll fatigue */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100dvh; /* Dynamic Lvh for mobile toolbars */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* 2. DYNAMIC MAIN CONTENT
   - Isolated rendering context to optimize browser paint cycles.
---------------------------------------------------------- */
main {
  flex: 1 0 auto;
  padding-block-start: var(--navbar-height);

  /* Performance: Tells the browser this area is independent */
  contain: layout style;
  display: block;
}

/* 3. SECTION ARCHITECTURE (Fluid & Isolated)
---------------------------------------------------------- */
section {
  padding-block: var(--space-lg);
  position: relative;
  isolation: isolate; /* Keeps z-index scopes contained */
}

/* Container Engine: Using 'min' for safer edge-to-edge padding */
.container {
  inline-size: min(var(--container-max, 1320px), 100% - (var(--space-md) * 2));
  margin-inline: auto;
}

.section-title {
  font-size: var(--font-size-2xl);
  font-weight: 800;
  margin-block-end: var(--space-xs);
  letter-spacing: var(--tracking-tighter);
  color: var(--dark);
  line-height: var(--line-height-tight);
  text-wrap: balance; /* Prevents awkward single-word lines */
  max-inline-size: 20ch;
}

.section-subtitle {
  max-inline-size: 65ch;
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: var(--line-height-base);
  margin-block-end: var(--space-md);
  text-wrap: pretty;
}

/* 4. STRUCTURAL COMPONENTS (Bento & Flex)
---------------------------------------------------------- */
.section-header-center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-block-end: var(--space-md);
}

.grid-adaptive {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

/* 5. ELITE FOOTER ENGINE
   - Content-Visibility: Saves ~150ms of scripting time on load.
---------------------------------------------------------- */
.footer {
  background: var(--dark);
  color: var(--light);
  padding-block-start: var(--space-lg);
  margin-block-start: auto; /* Pushes to bottom */

  /* PERFORMANCE Trick: Ignore layout until user scrolls near footer */
  content-visibility: auto;
  contain-intrinsic-size: 1px 500px;
}

.footer-wrapper {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-md);
  align-items: start;
}

.footer-brand {
  padding-inline-end: var(--space-md);
}

.footer-logo {
  height: clamp(40px, 6vh, 60px);
  width: auto;
  margin-block-end: var(--space-sm);
  filter: brightness(0) invert(1); /* Pure white logo */
  object-fit: contain;
}

.footer-description {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  color: var(--gray-400);
  max-inline-size: 30ch;
}

.footer-links h4 {
  font-size: var(--font-size-sm);
  font-weight: 700;
  margin-block-end: var(--space-sm);
  color: var(--light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-size: var(--font-size-sm);
  color: var(--gray-400);
  transition: all var(--dur-fast) var(--ease-out-expo);
  display: inline-block;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--accent);
  transform: translateX(5px);
}

/* Social Icon Polish */
.social-icons {
  display: flex;
  gap: 1rem;
  margin-block-start: var(--space-sm);
}

.social-icons a {
  background: rgba(255, 255, 255, 0.05);
  padding: 10px;
  border-radius: var(--radius-full);
  display: flex;
  transition: all var(--dur-fast) var(--ease-elastic);
}

.social-icons a:hover {
  background: var(--primary);
  transform: translateY(-5px) scale(1.1);
}

.footer-bottom {
  margin-block-start: var(--space-lg);
  padding-block: var(--space-sm);
  text-align: center;
  border-block-start: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  margin: 0;
}

/* 6. ADVANCED RESPONSIVE REFINEMENTS
   - No "Jumping" layouts. Uses smooth flex/grid shifts.
---------------------------------------------------------- */
@media (max-width: 1024px) {
  .footer-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
  .footer-brand {
    grid-column: 1 / -1;
    text-align: center;
    padding: 0;
  }
  .footer-brand .footer-description {
    margin-inline: auto;
  }
}

@media (max-width: 600px) {
  .footer-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-links ul {
    align-items: center;
  }
  .social-icons {
    justify-content: center;
  }
}

/* 7. ACCESSIBILITY & PERFORMANCE UTILITIES
---------------------------------------------------------- */
.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Future-Proof: Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}