/* ============================================================
   v124 — PREMIUM MICRO-POLISH
   ============================================================ */

/* 1. Canonical elevation language on interactive primitives.
   Uses var(--pz-shadow-*) tokens (v100). Fallback values match the
   "subtle resting" + "lifted hover" + "deep overlay" pattern. */

/* Resting state — subtle shadow */
body .pz-card,
body .pz-card-a,
body .pz-shortlist-card,
body .pz-smart-rec__card,
body .pz-explore-card {
  box-shadow: var(--pz-shadow-1, 0 1px 2px rgba(28, 25, 23, 0.04), 0 4px 12px -4px rgba(28, 25, 23, 0.06)) !important;
}

/* Hover state — lifted shadow */
body .pz-card:hover,
body .pz-card-a:hover,
body .pz-shortlist-card:hover,
body .pz-smart-rec__card:hover,
body .pz-explore-card:hover {
  box-shadow: var(--pz-shadow-2, 0 4px 8px rgba(28, 25, 23, 0.06), 0 16px 36px -12px rgba(28, 25, 23, 0.18)) !important;
}

/* Overlay surfaces — deep shadow */
body .pz-search-overlay__body,
body .pz-overlay-nav,
body .pz-compare__dropdown[aria-expanded="true"],
body .pz-mob-bar {
  box-shadow: var(--pz-shadow-3, 0 8px 24px rgba(0, 0, 0, 0.12), 0 32px 60px -16px rgba(0, 0, 0, 0.24)) !important;
}

/* Pinned (focused) elements — orange-tinted glow for premium focus signal.
   Only applies when no other focus replacement is set; v103-press's
   :focus-visible takes precedence via cascade order. */
body .pz-btn--primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.18), 0 6px 18px -6px rgba(194, 65, 12, 0.35) !important;
}

/* 2. Selection color — subtle orange-on-paper instead of system blue */
::selection {
  background-color: rgba(194, 65, 12, 0.16);
  color: var(--pz-ink, #1c1917);
}
::-moz-selection {
  background-color: rgba(194, 65, 12, 0.16);
  color: var(--pz-ink, #1c1917);
}

/* 3. Webkit/Chromium scrollbar — thin, branded, restrained */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(28, 25, 23, 0.18) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: rgba(28, 25, 23, 0.16);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(194, 65, 12, 0.32);
  background-clip: padding-box;
}

/* 4. Smooth scroll for in-page anchor navigation */
html {
  scroll-behavior: smooth;
}
/* But respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Scroll-margin-top on headings so anchor links don't jump under the sticky
   mobile bar / desktop nav */
h1[id], h2[id], h3[id], h4[id],
.pz-anchor {
  scroll-margin-top: 80px;
}

/* 5. Caret color on form inputs — branded */
input,
textarea,
[contenteditable="true"] {
  caret-color: var(--pz-orange, #c2410c);
}

/* 6. Image rendering hints — photographic content uses high quality */
img,
.wp-block-image img,
.pz-figure img,
.pz-page-hero img,
.pz-injected-hero img {
  image-rendering: auto;
}

/* Logos and icons can use crisp-edges (sharp at small sizes) */
.custom-logo,
.site-logo img,
img[src*="logo"],
img[src*="icon"] {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* 7. Premium link-hover signal in body content — subtle underline animation
   (color-only, no layout shift) */
body .entry-content a:not(.pz-btn):not(.pz-card-a):not(.pz-card):hover {
  text-decoration-color: var(--pz-orange, #c2410c);
}

/* 8. Premium form-field focus state */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.18);
  border-color: var(--pz-orange, #c2410c);
}