/* =============================================================================
   HEALS base layer
   =============================================================================
   Sits between hello-elementor's reset and the component styles. Its job is to set
   the site's typographic ground and to keep other people's CSS off our components.

   Loads AFTER the parent theme and AFTER tokens.css, by explicit enqueue dependency
   in functions.php. As everywhere else in this project, no brand value is written
   here: every colour and font resolves through a token.
   ========================================================================== */

/* ------------------------------------------------------------------- ground */

body {
  margin: 0;
  background: var(--heals-surface);
  font-family: var(--heals-font-body);
  font-size: var(--heals-fs-body);
  line-height: var(--heals-lh-body);
  color: var(--heals-text);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--heals-selection); }

a { color: var(--heals-indigo); }
a:hover { color: var(--heals-indigo-700); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heals-font-heading);
  color: var(--heals-ink);
}

img { max-width: 100%; height: auto; }

/* ------------------------------------------------------- content-only resets
   THE TRAP THIS AVOIDS
   A page-content rule that styles bare `button`, `input[type="button"]`,
   `input[type="submit"]` and the WooCommerce button set is correct for article
   content and wrong for site chrome, which styles its own controls. In BKK exactly
   that rule turned the nav toggle and the player controls into empty red lozenges in
   the header, and the mobile menu button lost its display:none and appeared on
   desktop. The fix there grew into a chain of :not() escapes that has to be extended
   every time a new control appears.

   hello-elementor's own reset has the same shape and loads late, so assume any bare
   element selector will meet it.

   So we invert it: element-level styling is confined to .heals-content, which wraps
   post and page body copy only. Chrome and widgets select classes they own, and
   nothing here can reach them.                                                    */

.heals-content button,
.heals-content input[type="button"],
.heals-content input[type="submit"],
.heals-content .wp-element-button,
.heals-content .wp-block-button__link {
  font-family: var(--heals-font-body);
  font-size: var(--heals-fs-xs);
  font-weight: 700;
  color: var(--heals-surface);
  background: var(--heals-indigo);
  border: 1.5px solid var(--heals-indigo);
  border-radius: var(--heals-radius-pill);
  padding: 13px 26px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.heals-content button:hover,
.heals-content input[type="button"]:hover,
.heals-content input[type="submit"]:hover,
.heals-content .wp-element-button:hover,
.heals-content .wp-block-button__link:hover {
  background: var(--heals-indigo-600);
  border-color: var(--heals-indigo-600);
}

.heals-content { max-width: var(--heals-maxw); margin: 0 auto; padding: 48px var(--heals-gutter); }
.heals-content h2 { font-size: var(--heals-fs-h2); line-height: var(--heals-lh-heading); }
.heals-content h3 { font-size: var(--heals-fs-h3); }
.heals-content p  { color: var(--heals-text-body); }

/* ------------------------------------------------------------ theme templates
   Blog index, article, archive, search and 404. These render through the child
   theme's own templates rather than Elementor, so they need their own layer.     */

.heals-main { display: block; }

/* Skip link. Off-screen until focused, then a real, visible control. */
.heals-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--heals-indigo);
  color: var(--heals-surface);
  font-weight: 700;
  font-size: var(--heals-fs-xs);
  padding: 12px 20px;
  border-radius: 0 0 var(--heals-radius) 0;
  text-decoration: none;
}
.heals-skip:focus {
  left: 0;
  color: var(--heals-surface);
}

/* ---- post list ----
   A fixed 3-column grid left a single post marooned in the left third of an empty
   row, which reads as broken rather than as "one article so far". auto-fill with a
   max column width and start alignment means one, two or three posts all look
   deliberate, and the cards keep a sensible reading width either way. */
.heals-postlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 373px));
  justify-content: start;
  gap: 20px;
}

/* ---- post cards ---- */

.heals-postcard__media {
  display: block;
  margin: -26px -26px 4px;
  overflow: hidden;
  border-radius: var(--heals-radius-lg) var(--heals-radius-lg) 0 0;
}
.heals-postcard__media img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* 13px at every width, same reasoning as the footer disclaimer: this is the publish
   date on a health article and it should never need squinting at. */
.heals-postcard__meta {
  margin: 0;
  font-size: 13px;
  color: var(--heals-text-faint);
}

article.heals-card h2 a { color: var(--heals-ink); text-decoration: none; }
article.heals-card h2 a:hover { color: var(--heals-indigo-500); }

/* ---- article ---- */

.heals-article__lead {
  max-width: var(--heals-maxw);
  margin: 0 auto;
  padding: 0 var(--heals-gutter);
}
.heals-article__lead img {
  width: 100%;
  height: auto;
  border-radius: var(--heals-radius-xl);
  margin-top: 32px;
}

.heals-article__notes {
  max-width: 68ch;
  margin: 40px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.heals-article__note {
  margin: 0;
  font-size: var(--heals-fs-card);
  line-height: var(--heals-lh-body);
  color: var(--heals-text-body);
  background: var(--heals-surface-alt);
  border: 1px solid var(--heals-line);
  border-left: 4px solid var(--heals-indigo);
  border-radius: var(--heals-radius);
  padding: 16px 20px;
}
.heals-article__note--crisis {
  border-left-color: var(--heals-alert);
  background: var(--heals-alert-surface);
  border-color: var(--heals-alert-line);
}
.heals-article__reviewed {
  margin: 0;
  font-size: 12.5px;
  color: var(--heals-text-faint);
}

.heals-related { margin-top: 56px; display: flex; flex-direction: column; gap: 20px; }
.heals-related a.heals-card h3 { color: var(--heals-ink); }

/* ---- pagination ---- */

.heals-pagination { margin-top: 40px; }
.heals-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.heals-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  font-size: var(--heals-fs-card);
  font-weight: 600;
  color: var(--heals-text-body);
  text-decoration: none;
  background: var(--heals-surface-chip);
  border: 1px solid var(--heals-line-chip);
  border-radius: var(--heals-radius-pill);
}
.heals-pagination .page-numbers.current {
  background: var(--heals-indigo);
  border-color: var(--heals-indigo);
  color: var(--heals-surface);
}

/* ---- empty states ---- */

.heals-empty {
  max-width: 60ch;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 40px 0;
}

.heals-404__search { margin-top: 40px; max-width: 520px; }

/* --------------------------------------------------------------- utilities */

/* Used by the newsletter form's label. hello-elementor ships a version of this but
   we do not depend on a parent theme's utility class staying put. */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Visible keyboard focus everywhere. A health site is exactly the kind of place
   where keyboard and screen-reader users must not be an afterthought. */
:focus-visible {
  outline: 2px solid var(--heals-indigo-500);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ small screens */

/* Nothing below 13px on a touch-sized screen. These are the article's review date and
   post meta: secondary, but still have to be readable. Applied from tablet down, since
   a 768px tablet is no easier to read on than a phone. */
@media (max-width: 900px) {
  .heals-postcard__meta,
  .heals-article__reviewed { font-size: 13px; }
}

@media (max-width: 600px) {
  .heals-content { padding: 32px var(--heals-gutter); }
}

/* Width OR coarse pointer, never pointer alone: headless Chromium and any narrowed
   desktop browser report `pointer: fine`, so a pointer-only query is unverifiable.
   See the longer note in heals-chrome.css. */
@media (max-width: 900px), (pointer: coarse) {
  /* Prose links sit in running text, where a mis-tap is most likely. */
  .heals-prose a { padding: 2px 0; }
  .heals-pagination .page-numbers { min-height: 44px; min-width: 44px; }
  /* Post-card titles in the blog, archive and search listings. */
  article.heals-card h2 a { display: inline-block; padding: 6px 0; }
}

/* -------------------------------------------------------- motion preference */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}