/* Base Styles - Typography, Layout, Global Elements */

/* Box Model & Base */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { 
  box-sizing: inherit; 
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--gg-text-primary);
  background-color: var(--gg-background);
  background-image: url("/i/bg/cardboard2.jpg");
  background-position: center;
}

/* Page wrapper with translucent overlay for text contrast */
.page-wrap {
  background: var(--gg-background-overlay);
  min-height: 100dvh;
}

/* Typography Scaling */
h1, .h1 { 
  font-size: var(--gg-font-size-xxl);
}

h2, .h2 { 
  font-size: var(--gg-font-size-xl);
}

h3, .h3 { 
  font-size: var(--gg-font-size-large);
}

/* Navigation spacing adjustments */
.nav-item { 
  padding-left: 15px; 
}

@media (min-width: 768px) {
  .nav-item { 
    padding-left: 0px; 
  }
}

@media (min-width: 1200px) {
  .nav-item { 
    padding-left: 0px; 
  }
}

/* Focus States for Accessibility */
:focus-visible {
  outline: var(--gg-focus-width) solid var(--gg-focus-color);
  outline-offset: var(--gg-focus-offset);
}

/* Mouse vs Keyboard Focus Distinction */
.using-mouse *:focus {
  outline: none;
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* Progressive Enhancement - No JS Fallbacks */
@media all {
  .collapse { 
    display: block !important; 
  }
  .navbar-toggler { 
    display: none !important; 
  }
}

/* When JS loads, these rules will be overridden by Bootstrap */
.js .collapse { 
  display: none; 
}

.js .navbar-toggler { 
  display: block; 
}