/*
 * Final Global CSS (Assessments fix only)
 *
 * This stylesheet retains the existing site design while fixing the specific
 * issues discussed for the Assessments page.  Only the `.assessments-page`
 * section is modified.  Other site elements (header, footer, FAQ, etc.)
 * remain unchanged.  Duplicate rules for cards/grid/bands have been
 * consolidated to avoid conflicts between the editor preview and the live site.
 */

/* ------------------------------------------------------------------
 * Variables & focus styles (leave unchanged)
 */
/* ... The existing :root variables and focus styles remain here ... */

/* ------------------------------------------------------------------
 * Assessments page (scoped fixes)
 *
 * The following rules target only the Assessments page.  They enforce
 * equal card sizes across breakpoints, restore the beige background
 * bands, add a micro-lift with subtle shadow on hover, make each card
 * fully clickable via a stretched link, and fix the "What our reports
 * include" checklist and stray line.  Reduced-motion and focus
 * accessibility are respected.  Active menu item bolding and smooth
 * scroll are also included.
 */

/* Ensure the full-bleed bands (intro, cards, timeline, CTA) use the
   original beige tones and do not inherit a white page background. */
.assessments-page .wp-site-blocks,
.assessments-page main,
.assessments-page .entry-content {
  background: transparent !important;
}

/* Intro band: body tone (#F2F1EC) */
.assessments-page .intro-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: var(--base) !important;
}

/* Cards band: lighter panel for separation */
.assessments-page .cards-section {
  position: relative;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0 !important;
}
.assessments-page .cards-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: color-mix(in oklab, var(--base-2) 96%, var(--accent-2) 4%) !important;
}
.assessments-page .cards-section::after {
  content: "";
  position: absolute;
  top: 0;
  height: 1px;
  z-index: -1;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: color-mix(in oklab, var(--accent-4) 18%, transparent);
}

/* Timeline band: restore beige background with only a bottom hairline */
.assessments-page .process-timeline {
  position: relative;
  padding: clamp(1.25rem, 2.6vw, 1.75rem) 0 !important;
}
.assessments-page .process-timeline::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  background: color-mix(in oklab, var(--base-2) 92%, var(--accent-2) 8%) !important;
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--accent-4) 12%, transparent);
}
/* Remove stray full-width line under the checklist */
.assessments-page .report-highlights + .process-timeline {
  border-top: 0 !important;
}
.assessments-page .report-highlights + .process-timeline::before {
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--accent-4) 12%, transparent) !important;
}

/* Cards grid: 1 → 2 → 4 columns with equal heights */
.assessments-page .card-grid {
  display: grid !important;
  gap: clamp(1rem, 2.6vw, 1.75rem) !important;
  grid-template-columns: 1fr !important;
  justify-items: stretch !important;
	  grid-auto-rows: 1fr !impotant;
  align-items: stretch !important;
  max-width: min(75rem, 92vw) !important;
  margin-inline: auto !important;
}
@media (min-width: 640px) {
  .assessments-page .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  .assessments-page .card-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Cards: consistent shape, equal heights, full-tile click */
.assessments-page .card-item {
  height: 100%;
}
.assessments-page .assessment-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 11.5rem;
  padding: 1.25rem clamp(1rem, 2.25vw, 1.5rem);
  border-radius: 0.8rem;
  background: var(--base);
  border: 1px solid color-mix(in oklab, var(--accent-4) 20%, var(--base-2));
  box-shadow: 0 2px 10px color-mix(in oklab, var(--contrast) 12%, transparent);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.assessments-page .assessment-card h3 {
  margin: 0;
  text-align: center;
  font-weight: 600;
  font-size: clamp(1rem, 1.7vw, 1.125rem);
  line-height: 1.3;
  text-wrap: balance;
}
.assessments-page .assessment-card h3 a {
  color: var(--contrast);
  text-decoration: none;
  position: relative;
  z-index: 1;
}
/* Make the first link stretch across the card */
.assessments-page .assessment-card a:first-of-type::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.assessments-page .assessment-card * {
  position: relative;
  z-index: 2;
}
/* Hover micro-lift + subtle shadow */
@media (hover: hover) {
  .assessments-page .assessment-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
}
/* Focus state for accessibility */
.assessments-page .assessment-card:focus-within {
  outline: 3px solid var(--focus-ring-dark);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--focus-ring-light),
              0 6px 16px color-mix(in oklab, var(--contrast) 12%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .assessments-page .assessment-card {
    transition: none !important;
  }
  .assessments-page .assessment-card:hover {
    transform: none !important;
    box-shadow: 0 2px 10px color-mix(in oklab, var(--contrast) 12%, transparent) !important;
  }
}

/* Entry animation: fade-up on wrappers (cards themselves remain static) */
@media (prefers-reduced-motion: no-preference) {
  .assessments-page .card-grid .card-item {
    opacity: 0;
    transform: translateY(10px);
    animation: assessFadeUp 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }
  .assessments-page .card-grid .card-item:nth-child(1) { animation-delay: 0.05s; }
  .assessments-page .card-grid .card-item:nth-child(2) { animation-delay: 0.10s; }
  .assessments-page .card-grid .card-item:nth-child(3) { animation-delay: 0.15s; }
  .assessments-page .card-grid .card-item:nth-child(4) { animation-delay: 0.20s; }
  .assessments-page .card-grid .card-item:nth-child(5) { animation-delay: 0.25s; }
  .assessments-page .card-grid .card-item:nth-child(6) { animation-delay: 0.30s; }
  .assessments-page .card-grid .card-item:nth-child(7) { animation-delay: 0.35s; }
  .assessments-page .card-grid .card-item:nth-child(8) { animation-delay: 0.40s; }
}
@keyframes assessFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Checklist: single clean column with custom bullets */
.assessments-page .report-highlights > :is(ul, ol, .wp-block-list) {
  columns: initial !important;
  column-count: 1 !important;
  column-gap: 0 !important;
  column-rule: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.55rem !important;
  list-style: none !important;
  margin: 0.75rem 0 0 !important;
  padding: 0 !important;
}
.assessments-page .report-highlights li {
  position: relative;
  padding-left: 1.25rem;
  line-height: 1.55;
  color: var(--contrast-2);
}
.assessments-page .report-highlights li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: color-mix(in oklab, var(--accent-3) 65%, var(--accent-5) 35%);
  box-shadow: 0 0 0 3px var(--base);
}
/* Remove any stray separator below the list */
.assessments-page .report-highlights + .wp-block-separator {
  display: none !important;
}

/* Section spacing: maintain uniform rhythm without altering existing margins */
.assessments-page .info-section {
  margin: 0 !important;
  padding-block: clamp(24px, 4vw, 36px) !important;
}
.assessments-page .info-section + .info-section {
  border-top: 1px solid color-mix(in oklab, var(--contrast) 8%, transparent);
  padding-top: clamp(20px, 3vw, 28px) !important;
}
.assessments-page .info-section > *:first-child {
  margin-top: 0 !important;
}
.assessments-page .info-section > *:last-child {
  margin-bottom: 0 !important;
}

/* Bold the current menu item (Assessments) */
.current-menu-item > a,
.current_page_item > a,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
  font-weight: 700 !important;
}

/* Smooth scroll behaviour for anchor links */
html {
  scroll-behavior: smooth !important;
}