/*
Theme Name:   Healthwise360 Child
Theme URI:    https://pencompare.com
Description:  Child theme for Healthwise360 / PenCompare. Holds the versioned design
              tokens (theme.json) and the accessible component layer for comparison,
              verification and evidence UI. No business logic lives here: prices,
              provider records, verification events and affiliate links are owned by
              the Healthwise360 Compare Core plugin.
Author:       Healthwise360
Template:     kadence
Version:      0.1.0
Requires PHP: 8.3
Text Domain:  healthwise360-child
*/

/* ==========================================================================
   Healthwise360 component layer
   --------------------------------------------------------------------------
   Tokens are defined in theme.json and emitted by WordPress as CSS custom
   properties. Nothing below hardcodes a hex value: change a token, not this
   file.

   Reference: master build spec s.13 (design system) and s.14.1 (accessibility).
   ========================================================================== */

:root {
  --hw-focus-width: 3px;
  --hw-touch-min: 44px;
}

/* --------------------------------------------------------------------------
   1. Focus visibility  (WCAG 2.2 AA - 2.4.7, 2.4.11)
   A visible, high-contrast focus ring on every interactive element. Kadence
   ships a subtle default; regulated journeys need an unmistakable one.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--hw-focus-width) solid var(--wp--preset--color--link-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Never remove focus styling without replacing it. */
:focus:not(:focus-visible) {
  outline: none;
}

/* --------------------------------------------------------------------------
   2. Body links  (spec s.13.3 - underline in body copy)
   -------------------------------------------------------------------------- */
.entry-content a:not(.wp-block-button__link):not(.hw-cta) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   3. Price figures  (spec s.13.3 - tabular numerals, no condensed font)
   Fixed-width digits so totals align down a column and cannot be misread.
   -------------------------------------------------------------------------- */
.hw-price,
.hw-price-total,
td.hw-numeric,
th.hw-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
}

.hw-price-total {
  font-weight: 700;
  font-size: var(--wp--preset--font-size--lead);
  color: var(--wp--preset--color--navy);
}

/* --------------------------------------------------------------------------
   4. Status pills  (spec s.13.6, s.10.5)
   Freshness and verification states. Colour is NEVER the only signal: every
   pill carries an icon slot and descriptive text. Do not add a colour-only
   variant.
   -------------------------------------------------------------------------- */
.hw-status {
  display: inline-flex;
  align-items: center;
  gap: var(--wp--preset--spacing--xxs);
  padding: 2px var(--wp--preset--spacing--xs);
  border-radius: var(--wp--custom--radius--small);
  border: 1px solid currentColor;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.4;
}

.hw-status__icon {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
}

.hw-status--current {
  color: var(--wp--preset--color--trust-teal);
  background: var(--wp--preset--color--trust-teal-surface);
}

.hw-status--review-due,
.hw-status--stale {
  color: var(--wp--preset--color--warning-amber);
  background: var(--wp--preset--color--warning-amber-surface);
}

.hw-status--expired,
.hw-status--unverified,
.hw-status--suspended {
  color: var(--wp--preset--color--error-red);
  background: var(--wp--preset--color--error-red-surface);
}

/* --------------------------------------------------------------------------
   5. Evidence line
   The timestamp and source that must sit beside every price or verification
   claim (spec s.10.7).
   -------------------------------------------------------------------------- */
.hw-evidence {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--navy-secondary);
  margin-block-start: var(--wp--preset--spacing--xxs);
}

/* --------------------------------------------------------------------------
   6. Notices  (spec s.13.6)
   -------------------------------------------------------------------------- */
.hw-notice {
  border-left: 4px solid;
  padding: var(--wp--preset--spacing--m);
  border-radius: var(--wp--custom--radius--small);
  margin-block: var(--wp--preset--spacing--l);
}

.hw-notice--info {
  border-color: var(--wp--preset--color--trust-teal);
  background: var(--wp--preset--color--trust-teal-surface);
}

.hw-notice--warning {
  border-color: var(--wp--preset--color--warning-amber);
  background: var(--wp--preset--color--warning-amber-surface);
}

.hw-notice--critical {
  border-color: var(--wp--preset--color--error-red);
  background: var(--wp--preset--color--error-red-surface);
}

/* Sitewide compliance disclosure. Must stay visible - never collapse it into
   a tooltip or hover state (spec s.19 interaction requirements). */
.hw-disclosure {
  font-size: var(--wp--preset--font-size--small);
  background: var(--wp--preset--color--soft-grey);
  border: 1px solid var(--wp--preset--color--grey-border);
  border-radius: var(--wp--custom--radius--small);
  padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
}

/* --------------------------------------------------------------------------
   7. Comparison tables
   -------------------------------------------------------------------------- */
.hw-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--wp--preset--color--soft-grey);
}

.hw-table th,
.hw-table td {
  padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
  border-bottom: 1px solid var(--wp--preset--color--grey-border);
  text-align: left;
  vertical-align: top;
}

.hw-table th {
  font-weight: 700;
  color: var(--wp--preset--color--navy);
}

/* Sponsored rows must be visually separated from organic results and must not
   resemble an independent result (spec s.10.4). */
.hw-table tr.is-sponsored {
  background: var(--wp--preset--color--warm-white);
  border-left: 4px solid var(--wp--preset--color--grey-border);
}

.hw-sponsored-label {
  display: inline-block;
  font-size: var(--wp--preset--font-size--x-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--navy-secondary);
}

/* --------------------------------------------------------------------------
   8. Touch targets  (WCAG 2.2 AA - 2.5.8)
   -------------------------------------------------------------------------- */
.hw-cta,
.wp-block-button__link,
.hw-filter input[type="checkbox"] + label {
  min-height: var(--hw-touch-min);
  display: inline-flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   9. Screen-reader utilities
   -------------------------------------------------------------------------- */
.hw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hw-skip-link:focus {
  position: fixed;
  top: var(--wp--preset--spacing--s);
  left: var(--wp--preset--spacing--s);
  z-index: 999999;
  padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
  background: var(--wp--preset--color--navy);
  color: var(--wp--preset--color--warm-white);
  width: auto;
  height: auto;
  clip: auto;
}

/* --------------------------------------------------------------------------
   10. Reduced motion  (spec s.13.6, WCAG 2.3.3)
   -------------------------------------------------------------------------- */
@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;
  }
}

/* --------------------------------------------------------------------------
   11. Reflow  (WCAG 2.2 AA - 1.4.10, 320 CSS px without loss of function)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .hw-table,
  .hw-table thead,
  .hw-table tbody,
  .hw-table tr,
  .hw-table td {
    display: block;
    width: 100%;
  }

  .hw-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .hw-table tr {
    margin-block-end: var(--wp--preset--spacing--m);
    border: 1px solid var(--wp--preset--color--grey-border);
    border-radius: var(--wp--custom--radius--medium);
  }
}

/* --------------------------------------------------------------------------
   12. Print
   -------------------------------------------------------------------------- */
@media print {
  .hw-status,
  .hw-evidence,
  .hw-disclosure {
    border: 1px solid #000;
  }
}