/**
 * ps-a11y.css
 * Accessibility utilities and responsive design utilities
 * WCAG 2.1 AA compliance guidelines
 */

/* ── CSS Custom Properties for Breakpoints ── */
:root {
  --breakpoint-xs: 320px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Focus outline */
  --focus-outline-width: 3px;
  --focus-outline-color: var(--gold, #c9a84c);
  --focus-outline-offset: 2px;

  /* Transition for reduced motion */
  --transition-duration-fast: 0.15s;
  --transition-duration-normal: 0.3s;
  --transition-duration-slow: 0.6s;
}

/* ── Skip to Content Link ── */
.sr-skip-to-content {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--gold, #c9a84c);
  color: var(--bg, #0c0b09);
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  font-size: 14px;
}

.sr-skip-to-content:focus {
  top: 0;
}

/* ── Focus Visible ── */
*:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
  border-radius: 2px;
}

/* Suppress focus outline on mouse users */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Custom focus styles for common interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

/* Remove default outline for buttons with custom styling */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a[role="button"] {
  position: relative;
}

/* ── Screen Reader Only Content ── */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Unhide on focus */
.sr-only:focus,
.visually-hidden:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ── 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;
  }
}

/* Conditional transitions that respect prefers-reduced-motion */
@supports (animation: test) {
  @media (prefers-reduced-motion: no-preference) {
    * {
      scroll-behavior: smooth;
    }
  }
}

/* ── Color Contrast Enhancements ── */
/* Note: We do NOT set global a {} styles here to avoid
   overriding component-specific link colors (nav CTA, buttons, etc.)
   Each component defines its own link styles. */

/* ── Text Resize Support ── */
html {
  font-size: 16px;
}

/* Allow users to zoom up to 200% */
@media (max-width: 30em) {
  /* Prevent zoom issues on mobile */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── Responsive Text Scaling ── */
/* Use fluid typography for better readability */
h1, h2, h3, h4, h5, h6 {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Note: We do NOT set p { max-width } globally as it breaks
   many layout components. Line-height is set per component. */

/* ── Touch Target Sizing ── */
/* WCAG 2.1 Level AAA: 44x44px minimum — applied only to standalone
   interactive elements, not inline links or nav items which handle
   their own sizing. Using padding rather than min-height/width to
   avoid breaking existing layouts. */
button:not(.ps-nav-btn):not(.ps-lang-opt):not(.ps-dd-row),
input[type="button"],
input[type="submit"],
input[type="reset"] {
  min-height: 44px;
}

input[type="checkbox"],
input[type="radio"] {
  min-height: 20px;
  min-width: 20px;
}

/* ── Form Accessibility ── */
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

/* ── Images ── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Responsive Design Utilities ── */

/* Mobile First Approach */
@media (max-width: 479px) {
  :root {
    --container-padding: 16px;
    --spacing-unit: 8px;
  }
}

@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --container-padding: 20px;
    --spacing-unit: 10px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --container-padding: 24px;
    --spacing-unit: 12px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  :root {
    --container-padding: 32px;
    --spacing-unit: 14px;
  }
}

@media (min-width: 1280px) {
  :root {
    --container-padding: 40px;
    --spacing-unit: 16px;
  }
}

/* ── Responsive Utilities ── */
.hidden-xs {
  @media (max-width: 479px) {
    display: none !important;
  }
}

.hidden-sm {
  @media (max-width: 767px) {
    display: none !important;
  }
}

.hidden-md {
  @media (max-width: 1023px) {
    display: none !important;
  }
}

.hidden-lg {
  @media (max-width: 1279px) {
    display: none !important;
  }
}

.visible-xs-only {
  @media (min-width: 480px) {
    display: none !important;
  }
}

.visible-sm-only {
  @media (max-width: 479px),
  (min-width: 768px) {
    display: none !important;
  }
}

/* ── Print Styles ── */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
    color: #000 !important;
  }

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

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }

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

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

/* ── Dark Mode Support ── */
@media (prefers-color-scheme: dark) {
  /* Ensure contrast in dark mode */
  body {
    background: var(--bg, #0c0b09);
    color: var(--cream, #f0ead8);
  }

  /* Reduce text brightness in dark mode for accessibility */
  input::placeholder,
  textarea::placeholder {
    color: var(--muted, #8a8070);
    opacity: 0.8;
  }
}

@media (prefers-color-scheme: light) {
  /* Adjust if needed for light mode */
}

/* ── Motion Preferences ── */
@media (prefers-reduced-motion: reduce) {
  /* Reduce animations for users sensitive to motion */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Smooth scrolling for users without motion sensitivity */
  html {
    scroll-behavior: smooth;
  }
}