/* ---------------------------------------------------------------------------
   WordPress specifics only.

   Everything else comes from the compiled stylesheet lifted out of the
   approved Astro build (site.css) — this file exists so that sheet can stay
   untouched and the port stays honestly comparable to the design.

   Part 1 — the admin bar overlaps the sticky header.
   Part 2 — the small set of styles WordPress itself expects.
   Part 3 — rich text written in the editor (Patient Education articles).
   Part 4 — client-requested tweaks the design sheet cannot carry.
   --------------------------------------------------------------------------- */

/* 1 — sticky header under the admin bar ---------------------------------- */
body.admin-bar .site-head {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-head {
    top: 46px;
  }
}

/* the block library is not enqueued on the front end (see inc/assets.php) */
[hidden] {
  display: none !important;
}

/* 2 — WordPress expectations -------------------------------------------- */
.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;
}

.screen-reader-text:focus {
  background-color: var(--color-card);
  border-radius: var(--radius-btn, 0.5rem);
  box-shadow: 0 0 2px 2px rgb(0 0 0 / 0.1);
  clip-path: none;
  color: var(--color-ink);
  display: block;
  font-size: 0.875rem;
  height: auto;
  left: 1rem;
  line-height: normal;
  padding: 0.85rem 1.15rem;
  text-decoration: none;
  top: 1rem;
  width: auto;
  z-index: 100000;
}

.alignleft {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

.alignright {
  float: right;
  margin: 0 0 1rem 1.5rem;
}

.aligncenter {
  display: block;
  margin-inline: auto;
}

/* 3 — article bodies written in the editor ------------------------------ */
.entry-content {
  color: var(--color-body);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* The rhythm between blocks is carried by the block tags themselves.
   It used to be a direct-child selector (`.entry-content > * + *`), which stops
   at the first wrapper the editor leaves behind: a run of paragraphs pasted
   inside a <div> — or any group/columns block — kept no margin at all and the
   paragraphs ran together with no way to see where one ended. Because these
   selectors are one step more specific than `.entry-content > * + *`, the tag
   margins win there and the rule below stays useful for plain wrappers. */
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content blockquote,
.entry-content table,
.entry-content pre {
  margin: 0 0 1.15rem;
}

/* a wrapper the editor added still gets the gap the design's rule gave it */
.entry-content > * + * {
  margin-top: 1.15rem;
}

/* the first block starts flush and the last one does not push the section away */
.entry-content > :first-child,
.entry-content > :first-child > :first-child {
  margin-top: 0;
}

.entry-content > :last-child,
.entry-content > :last-child > :last-child {
  margin-bottom: 0;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  color: var(--color-ink);
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* a heading keeps more air above it than below, at any depth */
.entry-content h2 {
  font-size: var(--fs-h3);
  margin: 2.25rem 0 0.9rem;
}

.entry-content h3,
.entry-content h4 {
  font-size: 1.0625rem;
  margin: 1.75rem 0 0.75rem;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.35rem;
}

.entry-content ul {
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

.entry-content li + li {
  margin-top: 0.45rem;
}

.entry-content a {
  color: var(--color-panel);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entry-content strong {
  color: var(--color-ink);
}

.entry-content img,
.entry-content .wp-block-image img {
  border-radius: var(--radius-card, 0.75rem);
  height: auto;
  max-width: 100%;
}

.entry-content figure {
  /* the flow margin, not 0: a figure between two paragraphs needs the gap the
     paragraphs get (the shorthand above sets their bottom margin) */
  margin: 0 0 1.15rem;
}

/* an image that is the whole content of its paragraph: as an inline box it sits
   on the text baseline and leaves a few pixels of descender space under it */
.entry-content p > img:only-child {
  display: block;
}

.entry-content figcaption {
  color: var(--color-muted);
  font-size: 0.8125rem;
  margin-top: 0.5rem;
}

.entry-content blockquote {
  border-left: 3px solid var(--color-line);
  color: var(--color-ink);
  font-family: var(--font-display);
  padding-left: 1.15rem;
}

.entry-content table {
  border-collapse: collapse;
  width: 100%;
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--color-line);
  padding: 0.6rem 0.8rem;
  text-align: left;
}

.entry-content code {
  background: var(--color-tint);
  border-radius: 0.35rem;
  font-size: 0.9em;
  padding: 0.1rem 0.35rem;
}

/* pagination on archive-style pages ------------------------------------- */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2.5rem;
}

.nav-links .page-numbers {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-btn, 0.5rem);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.6rem 0.85rem;
  text-decoration: none;
}

.nav-links .page-numbers.current,
.nav-links .page-numbers:hover {
  background: var(--color-panel);
  border-color: var(--color-panel);
  color: var(--color-on-panel);
}

/* 4 — client-requested tweaks ------------------------------------------- */

/* Qualifications heading row (home page and About page): on phones the 48px
   award badge is taller than the one-line heading, so the design's flex-end
   leaves the heading sitting 10px above the badge's centre. The client asked
   for centre alignment on phones only — from 640px up the design's flex-end
   stays in force, so this sheet is the only place the change can live without
   editing the compiled design sheet (site.css).

   The breakpoint matches Tailwind's `sm` (40rem = 640px). No `!important` is
   needed: this file loads after site.css and is unlayered, while the utility
   sits in @layer utilities. */
@media (max-width: 639px) {
  [data-section="credentials"] .panel > .flex.flex-wrap {
    align-items: center;
  }
}

/* The light arrow square that sits inside an action row (`a.go-row .go-light`,
   used by the article cards and the treatments index): the design's own hover
   darkens the square to deep-2 but leaves the arrow at ink, so on hover the
   arrow all but disappears — 1.66:1 against the square, under the 3:1 a
   non-text icon needs. The client asked for a white arrow on hover (9.9:1).

   The colour is put on the same 0.18s transition as the background: without it
   the arrow would flash white while the square is still white. */
.go-light {
  transition: background-color 0.18s var(--ease-soft), color 0.18s var(--ease-soft);
}

a:hover > .go-light,
a:hover .go-light {
  color: var(--color-on-panel);
}

/* The footer's appointment pair (WhatsApp Enquiry + phone). From lg up it sits in
   the right-hand column of the footer grid, and the client asked for it to be
   pushed to the right edge of that column; the design leaves it at the start.
   Phones and tablets keep the design's alignment — there the row is on its own
   line under the heading, full width, and right-aligning it would strand it.
   1024px is the design's own `lg`, the width at which this grid becomes two
   columns. The only flex-wrap row in the footer is this one. */
@media (min-width: 1024px) {
  footer .slab .flex.flex-wrap {
    justify-content: flex-end;
  }
}

/* The closing CTA's action (the band above the footer, on nine templates). The
   client wants its button at the right edge of the column from desktop up — where
   the design's field-plus-button row used to end — and left-aligned under the copy
   on phones, which is what it does by default. 1024px is the width at which that
   band's own grid splits into two columns, so it is also where the button gains a
   right edge to sit against. The compiled sheet has no justify-end utility. */
@media (min-width: 1024px) {
  [data-section="cta"] .flex.flex-wrap {
    justify-content: flex-end;
  }
}

/* 5 — utilities the compiled design sheet is missing -------------------- */

/* `lg:grid-cols-[1.2fr_0.8fr]` and `lg:gap-12` are written in the listing
   templates (index.php, search.php) but the design sheet never emitted either
   class: the siblings around them — `[0.8fr_1.2fr]`, `[1.1fr_0.9fr]`,
   `[1.18fr_0.82fr]`, `lg:gap-10`, `lg:gap-14` — are all there, so this pair
   simply fell out of the build. Without them the listing's two-column grid
   stayed a single column: the cards two-up on the left, the right half of the
   page empty, and the search form pushed below the cards.

   The care-area archives no longer use it (index.php gives them the home page's
   four-across rhythm instead), but the blog home, other archives served by
   index.php and the search results page all do. */
@media (min-width: 1024px) {
  .lg\:grid-cols-\[1\.2fr_0\.8fr\] {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .lg\:gap-12 {
    gap: calc(var(--spacing) * 12);
  }
}