/* ==========================================================================
   CAREFINITY — WORDPRESS ADAPTATIONS
   --------------------------------------------------------------------------
   The four design stylesheets are the source design, untouched. This file
   holds only what WordPress itself needs: admin-bar offsets, core content
   classes inside editable page content, and the non-sticky header option.

   Loaded last so it can adjust, but never replace, the design system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Admin bar — nudge the fixed header down for logged-in users
   -------------------------------------------------------------------------- */
body.admin-bar .site-header { top: 32px; }
body.admin-bar .nav-drawer  { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
  body.admin-bar .nav-drawer  { top: 46px; }
}

/* --------------------------------------------------------------------------
   2. Non-sticky header option (Carefinity → Header → Sticky header: off)
   The header still overlays a transparent hero; it simply scrolls away.
   -------------------------------------------------------------------------- */
body.header-static .site-header { position: absolute; }

/* --------------------------------------------------------------------------
   3. Core accessibility class — WordPress emits .screen-reader-text where the
      design uses .visually-hidden. Same behaviour, both names.
   -------------------------------------------------------------------------- */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed !important;
  top: var(--sp-3); left: var(--sp-3);
  width: auto; height: auto;
  margin: 0; padding: 0.75rem 1.25rem;
  clip: auto; clip-path: none;
  z-index: 999;
  background: var(--c-white);
  color: var(--c-teal-dark);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-md);
}

/* --------------------------------------------------------------------------
   4. Editor output inside .prose (legal pages, blog posts, any Page)
   -------------------------------------------------------------------------- */
.prose img,
.entry-content img { max-width: 100%; height: auto; border-radius: var(--r-md); }

.prose figure,
.entry-content figure { margin: var(--sp-6) 0; }

.prose figcaption,
.entry-content figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.prose .alignleft,
.entry-content .alignleft { float: left; margin: 0 var(--sp-6) var(--sp-4) 0; }

.prose .alignright,
.entry-content .alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-6); }

.prose .aligncenter,
.entry-content .aligncenter { display: block; margin-inline: auto; }

.prose .alignwide,
.prose .alignfull { margin-inline: 0; }

.prose blockquote,
.entry-content blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-6);
  border-left: 3px solid var(--c-teal-tint);
  background: var(--c-teal-light);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--c-heading);
}

.prose table,
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-6) 0;
  font-size: var(--fs-sm);
}
.prose th, .prose td,
.entry-content th, .entry-content td {
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  text-align: left;
}
.prose th, .entry-content th { background: var(--c-offwhite); }

/* Wide content must scroll inside itself rather than the page. */
.prose > table,
.entry-content > table,
.prose > pre,
.entry-content > pre { display: block; max-width: 100%; overflow-x: auto; }

@media (max-width: 640px) {
  .prose .alignleft,
  .prose .alignright,
  .entry-content .alignleft,
  .entry-content .alignright { float: none; margin: var(--sp-4) 0; }
}

/* --------------------------------------------------------------------------
   5. Blog / archive fallback — the design has no blog, so posts reuse the
      legal page's prose column rather than inventing a new layout.
   -------------------------------------------------------------------------- */
.post-list { display: grid; gap: var(--sp-8); }

.post-card__meta {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: var(--sp-2);
}

.post-card h2 { margin-bottom: var(--sp-2); }
.post-card h2 a { text-decoration: none; color: inherit; }
.post-card h2 a:hover { color: var(--c-teal); }

.pagination { margin-top: var(--sp-10); }
.pagination .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 42px; height: 42px;
  padding-inline: 0.6rem;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  margin-right: var(--sp-2);
  text-decoration: none;
  color: var(--c-navy);
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover { background: var(--c-teal); border-color: var(--c-teal); color: var(--c-white); }

/* --------------------------------------------------------------------------
   6. One-column contact layout
   The design pairs the info panel with the form. If an administrator switches
   one of the two off, the remaining column centres instead of leaving a hole.
   -------------------------------------------------------------------------- */
@media (min-width: 940px) {
  .contact-layout--single { grid-template-columns: minmax(0, 46rem); justify-content: center; }
}

/* --------------------------------------------------------------------------
   7. Form-level error notice
   The design styles field-level errors and the lavender privacy notice; a
   whole-form failure (expired session, mail server down) reuses that notice
   in the design system's error colours.
   -------------------------------------------------------------------------- */
.form-notice--error {
  background: var(--c-error-bg);
  border-color: #F3C9C5;
  color: #8A231D;
  margin-bottom: var(--sp-5);
}