/* ==========================================================================
   Base Stylesheet - Shared across all pages
   ========================================================================== */

/* ==========================================================================
   Cascade Layers

   Order determines priority (later layers override earlier):
   - reset: Browser normalizations
   - tokens: Design variables (colors, spacing, fonts)
   - base: Global elements (body, headings, links)
   - layouts: Container, grid, header, footer
   - components: Reusable UI (buttons, cards, info-box, FAQ)
   - pages: Page-specific overrides
   - utilities: Helper classes (.hidden, .sr-only)
   ========================================================================== */

@layer reset, tokens, base, layouts, components, pages, utilities;

/* Import design tokens (colors, spacing, typography, transitions) */
@import url("tokens.css") layer(tokens);

/* Import components */
@import url("components/shared.css");
@import url("components/buttons.css") layer(components);
@import url("components/forms.css") layer(components);

/* ==========================================================================
   Base Styles
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--bg-deep) 0%, var(--bg-elevated) 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hidden utility class (toggled by JS) */
.hidden {
  display: none !important;
}


#grid-bg {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px),
    linear-gradient(var(--border-hover) 2px, transparent 2px),
    linear-gradient(90deg, var(--border-hover) 2px, transparent 2px);
  background-size: 60px 60px, 60px 60px, 240px 240px, 240px 240px;
  background-position: center top;
  opacity: 0.03;
  transform: perspective(600px) rotateX(40deg) scale(2.5);
  transform-origin: top center;
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  z-index: 0;
}

[data-theme="light"] #grid-bg {
  opacity: 0.04;
}

.container {
  flex: 1;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 24px 24px 0;
  position: relative;
  z-index: 1;
}

@media (width >= 1200px) {
  .container {
    max-width: 1100px;
  }
}

/* ==========================================================================
   Scan Form - Mobile Overrides
   ========================================================================== */

/* Stack scan note items on mobile */
.scan-form-note {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.5em;
}

@media (width < 400px) {
  .scan-form-note {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .scan-form-note-separator {
    display: none;
  }
}

/* ==========================================================================
   Typography
   ========================================================================== */

h2 {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

h2::before {
  content: '// ';
  color: var(--accent);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -100%;
  inset-inline-start: 16px;
  padding: 12px 24px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
  border-radius: 4px;
  z-index: 1000;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 16px;
}

/*
 * Main element focus outline removal - INTENTIONAL for skip-link functionality.
 * The <main> has tabindex="-1" to receive programmatic focus from skip-link,
 * but should not show a visible focus ring. Interactive elements within main
 * retain their focus styles via :focus-visible rules below.
 */
main:focus {
  outline: none;
}

/* Global focus styles for interactive elements */
:where(a, button, [role="button"], summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Remove default outline when focus-visible handles it */
:where(a, button, [role="button"], summary):focus:not(:focus-visible) {
  outline: none;
}

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

/* ==========================================================================
   Accessibility - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hamburger-icon,
  .hamburger-icon::before,
  .hamburger-icon::after {
    transition: none;
  }
}

/* ==========================================================================
   Accessibility - High Contrast
   ========================================================================== */

@media (prefers-contrast: more) {
  :root {
    --border-subtle: #555;
    --border-hover: #777;
    --text-secondary: #ccc;
    --text-muted: #aaa;
  }

  [data-theme="light"] {
    --border-subtle: #666;
    --border-hover: #444;
    --text-secondary: #333;
    --text-muted: #444;
  }

  /* Button high contrast styles moved to components/buttons.css */
}

/* ==========================================================================
   Accessibility - Forced Colors (Windows High Contrast)
   ========================================================================== */

@media (forced-colors: active) {
  .severity-badge {
    border: 1px solid currentcolor;
  }

  .loading-spinner {
    border-color: CanvasText;
    border-top-color: Highlight;
  }

  /* Button forced-colors styles moved to components/buttons.css */

  .info-box {
    border: 1px solid CanvasText;
  }

  /* Ensure focus is visible */
  :focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}

/* ==========================================================================
   HTMX Loading States
   ========================================================================== */

/* Hide indicator by default, show during request */
.htmx-indicator {
  display: none;
}

/* When HTMX request is in progress, show indicator and hide content */
.htmx-request .htmx-indicator {
  display: inline;
}

.htmx-request .htmx-content {
  display: none;
}

/* Disable button during HTMX request */
.htmx-request[type="submit"] {
  opacity: 0.7;
  cursor: wait;
}

/* ==========================================================================
   Print Styles

   Hide UI chrome, force light background, show link URLs in content areas.
   Standalone print.css exists for PDF report generation; this handles Ctrl+P.
   ========================================================================== */

@media print {
  .site-header,
  .site-footer,
  .back-to-top,
  .back-to-top-wrapper,
  .skip-link,
  .theme-toggle-link {
    display: none;
  }

  body {
    background: white;
    color: black;
  }

  main {
    padding: 0;
  }

  /* Show link URLs after content links (not buttons or nav) */
  main a[href]:not(.btn, .btn-primary, .btn-secondary)::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #555;
  }
}