/* ============================================================
   RENUCE — CSS RESET & NORMALIZATION (reset.css)
   Modern reset combining best practices from:
   - Josh Comeau's Custom CSS Reset
   - Andy Bell's Modern Reset
   - Normalize.css patterns
   Load order: AFTER variables.css, BEFORE everything else
   ============================================================ */


/* =====================================================
   1. BOX SIZING
   All elements use border-box so padding/border
   are included inside the declared width/height
===================================================== */

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


/* =====================================================
   2. ROOT & HTML
===================================================== */

html {
  /* Prevent font size inflation on mobile */
  -webkit-text-size-adjust:  100%;
  -moz-text-size-adjust:     100%;
  text-size-adjust:          100%;

  /* Smooth scrolling — reduced-motion is handled in variables.css */
  scroll-behavior:           smooth;

  /* Better text rendering on macOS */
  -webkit-font-smoothing:    antialiased;
  -moz-osx-font-smoothing:   grayscale;
  text-rendering:            optimizeLegibility;

  /* Set base font size — 1rem = 16px */
  font-size:                 16px;

  /* Tab size normalization */
  tab-size:                  4;

  /* Consistent line height */
  line-height:               1.55;

  /* Base text color */
  color:                     var(--color-text-primary);
  background-color:          var(--color-bg-primary);
}


/* =====================================================
   3. BODY
===================================================== */

body {
  margin:            0;
  padding:           0;
  min-height:        100vh;
  font-family:       var(--font-sans);
  font-size:         var(--text-base);
  font-weight:       var(--weight-regular);
  line-height:       var(--leading-normal);
  color:             var(--color-text-primary);
  background-color:  var(--color-bg-primary);

  /* Prevent horizontal scroll */
  overflow-x:        hidden;

  /* Push content below announcement bar + header via CSS variable.
     Set dynamically by JS after components load */
  padding-top:       var(--body-offset, 0px);
}


/* =====================================================
   4. TYPOGRAPHY ELEMENTS
   Remove default margins — typography.css sets them properly
===================================================== */

h1, h2, h3, h4, h5, h6 {
  margin:        0;
  padding:       0;
  font-weight:   var(--weight-bold);
  line-height:   var(--leading-tight);
  color:         var(--color-text-primary);
  /* Font family set in typography.css */
}

p {
  margin:       0;
  padding:      0;
  line-height:  var(--leading-relaxed);
}

blockquote {
  margin:   0;
  padding:  0;
}

cite {
  font-style: normal;
}

address {
  font-style: normal;
}

abbr[title] {
  text-decoration:          underline dotted;
  cursor:                   help;
  text-decoration-skip-ink: none;
}

/* Remove default styling from small/sub/sup */
small {
  font-size: var(--text-sm);
}

sub,
sup {
  font-size:      75%;
  line-height:    0;
  position:       relative;
  vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top:    -0.5em;  }

/* Code elements */
code,
kbd,
samp,
pre {
  font-family:  var(--font-mono);
  font-size:    0.875em;
}

pre {
  margin:     0;
  overflow:   auto;
  white-space: pre-wrap;
  word-break: break-all;
}


/* =====================================================
   5. LISTS
   Remove default list styles — apply only when semantic
===================================================== */

ul,
ol {
  list-style:  none;
  margin:      0;
  padding:     0;
}

/* Restore list style only when inside prose content area */
.prose ul  { list-style: disc;    padding-left: 1.5em; }
.prose ol  { list-style: decimal; padding-left: 1.5em; }
.prose li  { margin-bottom: 0.5em; }

dl, dt, dd {
  margin:  0;
  padding: 0;
}

dt {
  font-weight: var(--weight-semibold);
}


/* =====================================================
   6. LINKS
===================================================== */

a {
  color:                   inherit;
  text-decoration:         none;
  background-color:        transparent;
  -webkit-text-decoration-skip: objects;
  text-decoration-skip-ink: auto;
  transition:              var(--transition-colors);
}

a:hover {
  color: var(--color-text-link-hover);
}

/* Remove outline for mouse users, keep for keyboard */
a:focus {
  outline: none;
}

a:focus-visible {
  outline:        var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius:  var(--radius-sm);
}


/* =====================================================
   7. IMAGES & MEDIA
===================================================== */

img,
picture,
video,
canvas,
svg {
  display:    block;
  max-width:  100%;
  height:     auto;
}

img {
  border-style: none;
  /* Prevent ghost space below inline images */
  vertical-align: middle;
}

/* Preserve SVG aspect ratio */
svg {
  flex-shrink: 0;
  overflow:    hidden;
}

/* Responsive iframe/embed */
iframe {
  border: none;
}

audio,
video {
  max-width: 100%;
}

/* Prevent broken image icon showing */
img[src=""],
img:not([src]) {
  visibility: hidden;
}


/* =====================================================
   8. FIGURES
===================================================== */

figure {
  margin:  0;
  padding: 0;
}

figcaption {
  font-size:  var(--text-sm);
  color:      var(--color-text-muted);
  margin-top: var(--space-2);
}


/* =====================================================
   9. FORMS
   Normalize across browsers — component styles in components.css
===================================================== */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size:   100%;
  line-height: 1.15;
  margin:      0;
  padding:     0;
}

button,
select {
  text-transform: none;
}

/* Fix clickability in iOS */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance:         button;
  cursor:             pointer;
  border:             none;
  background:         none;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor:  not-allowed;
  opacity: 0.6;
}

/* Remove inner border and padding in Firefox */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding:      0;
}

input,
textarea,
select {
  -webkit-appearance: none;
  appearance:         none;
  border-radius:      0;       /* iOS rounds inputs by default */
  background:         none;
  border:             none;
  outline:            none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none; /* Handled per-component in components.css */
}

/* Consistent checkbox/radio sizing */
[type="checkbox"],
[type="radio"] {
  box-sizing:  border-box;
  padding:     0;
  cursor:      pointer;
}

/* Number input — hide spin arrows */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  height:             auto;
}

/* Search input — remove default styling */
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset:     -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* File input */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font:               inherit;
}

/* Textarea — vertical resize only */
textarea {
  overflow:   auto;
  resize:     vertical;
  min-height: 120px;
}

/* Select — remove default arrow (custom arrow in components.css) */
select::-ms-expand {
  display: none;
}

/* Placeholder color */
::placeholder {
  color:   var(--input-placeholder);
  opacity: 1;
}

::-webkit-input-placeholder { color: var(--input-placeholder); }
::-moz-placeholder          { color: var(--input-placeholder); opacity: 1; }
:-ms-input-placeholder      { color: var(--input-placeholder); }

/* Legend */
legend {
  padding:    0;
  display:    table;
  max-width:  100%;
  color:      inherit;
  white-space: normal;
}

fieldset {
  margin:  0;
  padding: 0;
  border:  none;
}

label {
  display: block;
  cursor:  pointer;
}


/* =====================================================
   10. TABLES
===================================================== */

table {
  border-collapse: collapse;
  border-spacing:  0;
  width:           100%;
}

th, td {
  padding:    0;
  text-align: left;
}

th {
  font-weight: var(--weight-semibold);
}


/* =====================================================
   11. HR / DIVIDERS
===================================================== */

hr {
  box-sizing: content-box;
  height:     0;
  overflow:   visible;
  border:     none;
  border-top: 1px solid var(--color-border);
  margin:     0;
}


/* =====================================================
   12. DETAILS / SUMMARY
===================================================== */

details {
  display: block;
}

summary {
  display:        list-item;
  cursor:         pointer;
  user-select:    none;
  -webkit-user-select: none;
}

summary:focus-visible {
  outline:        var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}


/* =====================================================
   13. DIALOG
===================================================== */

dialog {
  padding:          0;
  border:           none;
  background:       none;
  max-width:        100vw;
  max-height:       100vh;
}


/* =====================================================
   14. INTERACTIVE ELEMENTS
===================================================== */

/* Remove tap highlight on mobile */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Prevent text selection on interactive UI elements */
button,
[role="button"],
label,
[role="tab"],
[role="radio"],
[role="checkbox"] {
  user-select:         none;
  -webkit-user-select: none;
}

/* Pointer cursor for all interactive elements */
[role="button"],
[role="tab"],
[role="menuitem"],
[role="option"] {
  cursor: pointer;
}

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

/* Hidden attribute must actually hide elements */
[hidden] {
  display: none !important;
}


/* =====================================================
   15. FOCUS MANAGEMENT
   Visible focus for keyboard navigation
   Mouse users get no focus ring (handled via :focus-visible)
===================================================== */

/* Default focus — remove outline (we use :focus-visible) */
*:focus {
  outline: none;
}

/* Keyboard focus — show ring */
*:focus-visible {
  outline:        var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Buttons focus ring */
button:focus-visible,
[role="button"]:focus-visible {
  outline:        2px solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius:  var(--radius-btn);
}


/* =====================================================
   16. SCROLLBAR STYLING (webkit browsers)
===================================================== */

/* Global scrollbar */
::-webkit-scrollbar {
  width:  var(--scrollbar-width);
  height: var(--scrollbar-width);
}

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

::-webkit-scrollbar-thumb {
  background:    var(--scrollbar-thumb);
  border-radius: var(--radius-full);
  border:        2px solid var(--scrollbar-track);
}

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

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

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}


/* =====================================================
   17. SELECTION
   Custom text selection color
===================================================== */

::selection {
  background-color: var(--color-brand-gold);
  color:            var(--color-brand-black);
}

::-moz-selection {
  background-color: var(--color-brand-gold);
  color:            var(--color-brand-black);
}


/* =====================================================
   18. PRINT RESET
   Basic print normalization
===================================================== */

@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) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /* Hide non-essential elements on print */
  .announcement-bar,
  .header,
  .hero,
  .cart-sidebar,
  .search-overlay,
  .wa-float,
  .back-to-top,
  .toast-container,
  nav,
  footer {
    display: none !important;
  }

  img {
    page-break-inside: avoid;
  }

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

  p {
    orphans: 3;
    widows:  3;
  }

}


/* =====================================================
   19. UTILITY — VISUALLY HIDDEN
   Accessible hiding — visible to screen readers,
   invisible to sighted users
===================================================== */

.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:     0;
}

/* Focusable version — shows on keyboard focus */
.sr-only-focusable:focus,
.sr-only-focusable:active {
  position:   static;
  width:      auto;
  height:     auto;
  padding:    inherit;
  margin:     inherit;
  overflow:   visible;
  clip:       auto;
  white-space: normal;
}


/* =====================================================
   20. UTILITY — SKIP TO CONTENT LINK
   Accessibility: lets keyboard users skip to main content
===================================================== */

.skip-link {
  position:         absolute;
  top:              -100%;
  left:             var(--space-4);
  z-index:          var(--z-max);
  padding:          var(--space-3) var(--space-5);
  background:       var(--color-brand-black);
  color:            var(--color-brand-white);
  font-size:        var(--text-sm);
  font-weight:      var(--weight-semibold);
  border-radius:    0 0 var(--radius-md) var(--radius-md);
  text-decoration:  none;
  transition:       top var(--duration-fast) var(--ease-out);
}

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