/**
 * ily.dog Accessibility & Responsive Design v3.0
 * WCAG 2.1 AA compliant — aligned with Grid Paper design system
 */

/* ============================================
   FOCUS MANAGEMENT
   ============================================ */

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px dashed var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Focus within for complex components — scoped to intentional containers only */
.form-group:focus-within,
.card-interactive:focus-within {
  outline: 2px dashed var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-accent-primary);
  color: #0d0f14;
  padding: var(--space-3) var(--space-4);
  z-index: var(--z-tooltip);
  font-weight: var(--font-semibold);
  font-family: var(--font-family-mono);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: 0;
}

/* ============================================
   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-width: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: inherit;
}

/* ============================================
   ARIA STATES
   ============================================ */

/* Disabled state */
[aria-disabled="true"],
.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  border-style: dotted;
}

/* Hidden state */
[aria-hidden="true"] {
  display: none !important;
}

/* Expanded state */
[aria-expanded="false"] + .expandable-content {
  display: none;
}

[aria-expanded="true"] + .expandable-content {
  display: block;
}

/* Selected state */
[aria-selected="true"] {
  background: var(--color-accent-primary-subtle);
  border-color: var(--color-accent-primary);
}

/* Busy state */
[aria-busy="true"] {
  cursor: wait;
}

/* ============================================
   HIGH CONTRAST MODE
   ============================================ */
@media (prefers-contrast: high) {
  :root {
    --color-bg-primary:      #000000;
    --color-bg-secondary:    #111111;
    --color-bg-tertiary:     #222222;
    --color-text-primary:    #ffffff;
    --color-text-secondary:  #e0e0e0;
    --color-border-dashed:   #888888;
    --color-accent-primary:  #ffcc00;
    --color-accent-success:  #00ff66;
    --color-accent-danger:   #ff3333;
    --color-accent-warning:  #ffdd00;
  }

  .btn,
  .card,
  .module,
  .form-input,
  .form-select,
  .form-textarea {
    border-width: 2px;
    border-style: dashed;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-spin,
  .animate-pulse,
  .animate-bounce,
  .animate-float {
    animation: none !important;
  }
}

/* ============================================
   COLOR SCHEME
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
  }

  /* Light mode overrides — grid paper in light */
  --color-bg-primary:      #f5f0e8;
  --color-bg-secondary:    #ede8de;
  --color-bg-tertiary:     #e5dfd4;
  --color-bg-elevated:     #faf5ec;
  --color-text-primary:    #1a1612;
  --color-text-secondary:  #4a4540;
  --color-text-tertiary:   #6b6560;
  --color-text-muted:      #8a8580;
  --color-border-dashed:   rgba(0, 0, 0, 0.15);
  --color-border-dashed-hover: rgba(0, 0, 0, 0.25);
  --color-accent-primary:  #b8860b;
  --color-accent-primary-hover: #d4a017;
  --color-accent-primary-subtle: rgba(184, 134, 11, 0.1);
  --color-accent-primary-dashed: rgba(184, 134, 11, 0.4);

  body {
    background-image:
      linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
      linear-gradient(rgba(0, 0, 0, 0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0, 0, 0, 0.08) 1px, transparent 1px);
    background-size:
      20px 20px,
      20px 20px,
      100px 100px,
      100px 100px;
  }

  .header {
    background: var(--color-bg-secondary);
    backdrop-filter: none;
  }
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */
h1 { font-size: clamp(1.8rem, 1.5rem + 1.5vw, 2.5rem); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); }
h3 { font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem); }
h4 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.25rem); }

p, li, td, th, label, input, textarea, select, button {
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
}

/* ============================================
   RESPONSIVE SPACING
   ============================================ */
.container {
  padding-left: clamp(1rem, 5vw, 3rem);
  padding-right: clamp(1rem, 5vw, 3rem);
}

.gap-responsive {
  gap: clamp(1rem, 3vw, 2rem);
}

/* ============================================
   RESPONSIVE GRID
   ============================================ */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--space-6);
}

.grid-responsive-2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}

.grid-responsive-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid-responsive-4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Small devices (576px+) */
@media (min-width: 576px) {
  .container { max-width: 540px; }
  .sm\:hidden { display: none; }
  .sm\:block  { display: block; }
  .sm\:flex   { display: flex; }
  .sm\:grid   { display: grid; }
}

/* Medium devices (768px+) */
@media (min-width: 768px) {
  .container { max-width: 720px; }
  .md\:hidden { display: none; }
  .md\:block  { display: block; }
  .md\:flex   { display: flex; }
  .md\:grid   { display: grid; }
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col  { flex-direction: column; }
}

/* Large devices (992px+) */
@media (min-width: 992px) {
  .container { max-width: 960px; }
  .lg\:hidden { display: none; }
  .lg\:block  { display: block; }
  .lg\:flex   { display: flex; }
  .lg\:grid   { display: grid; }
}

/* Extra large (1200px+) */
@media (min-width: 1200px) {
  .container { max-width: 1140px; }
  .xl\:hidden { display: none; }
  .xl\:block  { display: block; }
  .xl\:flex   { display: flex; }
  .xl\:grid   { display: grid; }
}

/* ============================================
   MOBILE-FIRST UTILITIES
   ============================================ */
.mobile\:hidden { display: none; }
@media (min-width: 768px) {
  .mobile\:hidden { display: block; }
}

.mobile\:block { display: block; }
@media (min-width: 768px) {
  .mobile\:block { display: none; }
}

/* ============================================
   TOUCH-FRIENDLY SIZING
   ============================================ */
@media (max-width: 767px) {
  .btn,
  button,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
    padding: var(--space-3) var(--space-4);
  }

  .form-input,
  .form-select,
  .form-textarea {
    min-height: 44px;
    padding: var(--space-3) var(--space-4);
  }

  .nav-link,
  a[role="button"] {
    padding: var(--space-3) var(--space-4);
  }
}

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

  body {
    background-image: none !important;
  }

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

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

  pre {
    white-space: pre-wrap !important;
    border: 1px solid #999;
  }

  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr, img {
    page-break-inside: avoid;
  }

  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  h2, h3 {
    page-break-after: avoid;
  }

  .header, .footer, nav, .sidebar {
    display: none !important;
  }

  .container {
    max-width: none !important;
    padding: 0 !important;
  }

  .card, .module {
    border: 1px solid #999 !important;
  }
}

/* ============================================
   LANDSCAPE MODE
   ============================================ */
@media (orientation: landscape) and (max-height: 500px) {
  .header {
    padding: var(--space-2) 0;
  }

  .modal-body {
    max-height: 60vh;
  }
}

/* ============================================
   SAFE AREA INSETS (notched devices)
   ============================================ */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(var(--space-6), env(safe-area-inset-left));
    padding-right: max(var(--space-6), env(safe-area-inset-right));
  }

  .footer {
    padding-bottom: max(var(--space-8), env(safe-area-inset-bottom));
  }
}

/* ============================================
   FORCED COLORS MODE (Windows High Contrast)
   ============================================ */
@media (forced-colors: active) {
  .btn,
  .card,
  .module,
  .form-input,
  .form-select,
  .form-textarea {
    border: 2px dashed ButtonText;
  }

  .btn-primary {
    background: Highlight;
    color: HighlightText;
  }

  .badge,
  .status-badge {
    border: 1px dashed ButtonText;
  }
}

/* ============================================
   CONTAINER QUERIES (Progressive Enhancement)
   ============================================ */
@supports (container-type: inline-size) {
  .container-query {
    container-type: inline-size;
  }

  @container (min-width: 400px) {
    .cq\:grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @container (min-width: 600px) {
    .cq\:grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @container (min-width: 800px) {
    .cq\:grid-4 {
      grid-template-columns: repeat(4, 1fr);
    }
  }
}