/**
 * Modern CSS Reset with Mobile Hacks and Safe Defaults
 * Based on mayank99/reset.css with enhancements for mobile, touch, accessibility, and compatibility
 */

@layer reset {
  /* Base box model reset */
  *,
  *::before,
  *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* Hide elements with [hidden] (except for until-found) */
  :where([hidden]:not([hidden="until-found"])) {
    display: none !important;
  }

  /* HTML defaults */
  :where(html) {
    font-size: 16px;
    font-weight: normal;
    -webkit-text-size-adjust: 100%; /* Prevent iOS text size adjustment */
    text-size-adjust: 100%; /* Prevent Android text size adjustment */
    tab-size: 2;
    scrollbar-gutter: stable;
    line-height: 1.5;
    min-height: 100dvh; /* Use dynamic viewport height for mobile */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scroll-behavior: smooth;
    touch-action: manipulation; /* Improve touch responsiveness */
  }

  /* Prevent body scrolling when modal is open */
  :where(html:has(dialog:modal[open])) {
    overflow: hidden; /* Safer than clip to avoid breaking layouts */
  }

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

  /* Body defaults */
  :where(body) {
    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    line-height: inherit;
  }

  /* Normalize buttons */
  :where(button, [type="button"], [type="submit"], [type="reset"]) {
    appearance: none;
    background: none;
    border: none;
    font: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
    -webkit-appearance: none; /* Extra iOS button reset */
  }

  /* Normalize form elements */
  :where(input, textarea, select) {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    /* Remove iOS default styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  /* Prevent iOS zoom on input focus */
  :where(input, textarea) {
    font-size: 16px; /* Minimum font size to disable zoom */
  }

  /* Remove number input spinners */
  :where(input[type="number"]) {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  :where(
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button
  ) {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Textarea defaults */
  :where(textarea) {
    resize: vertical;
  }

  /* Cursor for interactive elements */
  :where(button, label, select, summary, [role="button"], [role="option"]) {
    cursor: pointer;
  }

  /* Disabled state */
  :where(:disabled, label:has(> :disabled, + :disabled)) {
    cursor: not-allowed;
    opacity: 0.5; /* Visual feedback for disabled state */
  }

  /* Anchor defaults */
  :where(a) {
    color: inherit;
    text-underline-offset: 0.2ex;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* List defaults */
  :where(ul, ol) {
    list-style: none;
  }

  /* Media elements */
  :where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block;
    max-inline-size: 100%;
  }
  :where(img) {
    block-size: 100%;
    object-fit: cover;
  }

  /* Typography */
  :where(p, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
  }

  :where(h1, h2, h3) {
    /* line-height: calc(1em + 0.5rem); */
    line-height: calc(2px + 2ex + 2px);
    text-wrap: balance;
  }

  :where(p) {
    margin-bottom: 1.2rem;
  }

  :where(.container p:last-of-type) {
    margin-bottom: 0;
  }

  /* HR defaults */
  :where(hr) {
    border: none;
    border-block-start: 1px solid;
    color: inherit;
    block-size: 0;
    overflow: visible;
  }

  /* Dialog and popover */
  :where(dialog, [popover]) {
    border: none;
    background: none;
    color: inherit;
    inset: unset;
    max-width: unset;
    max-height: unset;
    overflow: unset;
  }

  :where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
    display: none !important;
  }

  /* Focus ring for accessibility */
  /* :where(:focus-visible) {
    outline: 3px solid CanvasText;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px Canvas;
  } */

  :where(:focus-visible, :target) {
    scroll-margin-block: 8vh;
  }

  /* Visually hidden utility */
  :where(.visually-hidden:not(:focus-within, :active)) {
    clip-path: inset(50%) !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
    position: absolute !important;
    white-space: nowrap !important;
    border: 0 !important;
    user-select: none !important;
  }

  /* Mobile-specific viewport fix */
  @supports (height: 100svh) {
    :where(html) {
      min-height: 100svh; /* Smallest viewport height for mobile */
    }
  }

  /* Fix for iOS sticky elements */
  @media screen and (max-device-width: 1024px) {
    :where([style*="position: sticky"]) {
      -webkit-transform: translate3d(0, 0, 0); /* Force hardware acceleration */
      transform: translate3d(0, 0, 0);
    }
  }

  /* Print styles */
  @media print {
    :where(html) {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    :where(img, svg, video, canvas) {
      max-width: 100%;
    }
    :where(a[href]::after) {
      content: " (" attr(href) ")"; /* Show URL in print */
    }
  }
}