/* ==========================================================================
   Main Stylesheet — Mission Control Theme
   Personal Blog & Portfolio for Christina Kneis Wolfenden
   ========================================================================== */

/* -------------------------------------------------------------------------
   Imports — Load all modules
   ------------------------------------------------------------------------- */

/* Base */
@import url('./base/tokens.css');
@import url('./base/reset.css');
@import url('./base/typography.css');

/* Layouts */
@import url('./layouts/grid.css');
@import url('./layouts/sections.css');

/* Components */
@import url('./components/navigation.css');
@import url('./components/buttons.css');
@import url('./components/cards.css');
@import url('./components/panels.css');
@import url('./components/forms.css');
@import url('./components/badges.css');

/* Effects */
@import url('./effects/backgrounds.css');
@import url('./effects/animations.css');

/* Pages */
@import url('./pages/home.css');
@import url('./pages/blog.css');
@import url('./pages/post.css');
@import url('./pages/consulting.css');
@import url('./pages/about.css');
@import url('./pages/contact.css');

/* -------------------------------------------------------------------------
   Google Fonts
   ------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&family=JetBrains+Mono:wght@400;500;600&family=Space+Mono:wght@400;700&display=swap');

/* -------------------------------------------------------------------------
   Base HTML Elements
   ------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Account for fixed nav */
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-void);
  min-height: 100vh;
}

/* Ensure content is above background effects */
main {
  position: relative;
  z-index: 1;
}

/* -------------------------------------------------------------------------
   Scrollbar Styling
   ------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-panel);
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--bg-panel);
}

/* -------------------------------------------------------------------------
   Focus States
   ------------------------------------------------------------------------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent-amber);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Selection
   ------------------------------------------------------------------------- */

::selection {
  background-color: var(--accent-amber);
  color: var(--bg-void);
}

::-moz-selection {
  background-color: var(--accent-amber);
  color: var(--bg-void);
}

/* -------------------------------------------------------------------------
   Skip Link (Accessibility)
   ------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--accent-amber);
  color: var(--bg-void);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  z-index: calc(var(--z-fixed) + 10);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
}

/* -------------------------------------------------------------------------
   Image Handling
   ------------------------------------------------------------------------- */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Prevent layout shift for images */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

/* -------------------------------------------------------------------------
   Links Base
   ------------------------------------------------------------------------- */

a {
  color: var(--accent-blue);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-blue-bright);
}

/* -------------------------------------------------------------------------
   Utility: Visually Hidden (Screen Reader Only)
   ------------------------------------------------------------------------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   Print Styles
   ------------------------------------------------------------------------- */

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  .nav,
  .footer,
  .no-print {
    display: none !important;
  }
}