/*
Theme Name: ColoSTAT
Author: Minus Plus Multiply
Author URI: https://minusplusmultiply.com
Version: 1.0.0
Template: MinusPlusMultiply
Text Domain: colostat
*/

/* Load custom overrides here if needed. */

html.header-lock,
html.header-lock body {
  overflow: hidden;
}

html {
  background-color: #002360;
}

body {
  background-color: #002360;
}

.theme-body {
  margin: 0;
  color: #0f172a;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 767px) {
  input,
  select,
  textarea {
    font-size: 16px;
  }
}

.theme-header {
  --header-row-min-height: 3.5rem;
  --header-padding-y: clamp(1rem, 3vw, 2.5rem);
  --header-padding-x: clamp(1rem, 3vw, 2.5rem);
  --header-height: calc(
    var(--header-row-min-height) + (var(--header-padding-y) * 2)
  );
  --theme-header-gradient-rgb: 23, 23, 23;
  --theme-header-gradient-alpha: 0.9;
  --theme-mobile-content-align: flex-start;
  --theme-mobile-text-align: left;
  --theme-mobile-distribution: flex-start;
  --theme-mobile-item-width: auto;
  background: #fff;
  width: 100%;
  position: relative;
  z-index: 1000;
}

.theme-header__inner {
  max-width: none;
  margin: 0;
  padding: var(--header-padding-y) var(--header-padding-x);
  position: relative;
  z-index: 20;
}

.theme-header--contained .theme-header__inner {
  max-width: var(--wp--style--global--wide-size, 1400px);
  margin: 0 auto;
}

.theme-header--full .theme-header__inner {
  max-width: none;
  margin: 0;
}

.theme-header--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.theme-header--static.theme-header--gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.theme-header--solid {
  background: rgb(var(--theme-header-gradient-rgb));
}

.theme-header--gradient {
  background: transparent;
}

.theme-header--gradient::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-height) * 3);
  background: linear-gradient(
    to bottom,
    rgba(var(--theme-header-gradient-rgb), var(--theme-header-gradient-alpha))
      0%,
    rgba(
        var(--theme-header-gradient-rgb),
        calc(var(--theme-header-gradient-alpha) * 0.9)
      )
      16%,
    rgba(
        var(--theme-header-gradient-rgb),
        calc(var(--theme-header-gradient-alpha) * 0.65)
      )
      38%,
    rgba(
        var(--theme-header-gradient-rgb),
        calc(var(--theme-header-gradient-alpha) * 0.35)
      )
      62%,
    rgba(
        var(--theme-header-gradient-rgb),
        calc(var(--theme-header-gradient-alpha) * 0.12)
      )
      82%,
    rgba(var(--theme-header-gradient-rgb), 0) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.theme-header--gradient .theme-brand,
.theme-header--gradient .theme-brand-link {
  color: #fff;
}

.theme-header--gradient .theme-menu--desktop a {
  color: rgba(255, 255, 255, 0.9);
}

.theme-header--gradient .theme-menu--desktop a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.theme-header--gradient .theme-mobile-toggle {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.theme-header--gradient .theme-btn--secondary {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.header-space {
  display: none;
  height: var(--header-height, 5.25rem);
}

.theme-header--fixed.theme-header--solid + .header-space {
  display: block;
}

.theme-header__row {
  min-height: var(--header-row-min-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.theme-header__brand-wrap {
  flex: 1;
  min-width: 0;
}

.theme-brand,
.theme-brand-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  color: #0d9488;
  text-decoration: none;
}

.theme-brand .custom-logo-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
}

.theme-brand .custom-logo,
.theme-brand-icon {
  height: 2rem;
  width: auto;
  max-width: 100%;
}

.theme-header__actions,
.theme-mobile-toggle-wrap {
  flex-shrink: 0;
}

@media (max-width: 479px) {
  .theme-brand .custom-logo,
  .theme-brand-icon {
    height: clamp(1.25rem, 6vw, 2rem);
    max-width: min(100%, 55vw);
  }
}

.theme-header__right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.theme-header__nav {
  display: none;
}

.theme-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.theme-menu--desktop {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.875rem;
}

.theme-menu--desktop a {
  border-bottom: 3px solid transparent;
  color: #6b7280;
  display: inline-block;
  padding-bottom: 0.2rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.theme-menu .current-menu-item > a,
.theme-menu .current_page_item > a,
.theme-menu a[aria-current="page"] {
  font-weight: 700;
}

.theme-menu--desktop .current-menu-item > a,
.theme-menu--desktop .current_page_item > a,
.theme-menu--desktop a[aria-current="page"] {
  border-bottom: 3px solid currentColor;
}

.theme-menu--desktop a:hover {
  color: rgba(107, 114, 128, 0.75);
}

.theme-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.theme-auth-links {
  display: none;
  align-items: center;
  gap: 1rem;
}

.theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: 500;
  text-decoration: none;
}

.theme-btn--primary {
  background: #0d9488;
  color: #fff;
}

.theme-btn--primary:hover {
  background: #0f766e;
}

.theme-btn--secondary {
  background: #f3f4f6;
  color: #0d9488;
}

.theme-btn--secondary:hover {
  background: #e5e7eb;
}

.theme-mobile-toggle {
  border: 0;
  background: #f3f4f6;
  color: #4b5563;
  width: 2rem;
  height: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.theme-mobile-toggle-icon {
  width: 1.25rem;
  height: 1.25rem;
  transition: opacity 0.2s ease;
}

.theme-mobile-toggle-icon--close {
  display: none;
}

.theme-mobile-toggle[aria-expanded="true"] .theme-mobile-toggle-icon--menu {
  display: none;
}

.theme-mobile-toggle[aria-expanded="true"] .theme-mobile-toggle-icon--close {
  display: block;
}

.theme-mobile-panel {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(var(--theme-header-gradient-rgb), 0.96);
  padding: calc(var(--header-height) + 1rem) var(--header-padding-x) 1.5rem;
  position: fixed;
  inset: 0;
  height: 100dvh;
  box-sizing: border-box;
  z-index: 10;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 300ms ease,
    visibility 0s linear 300ms;
}

.theme-mobile-panel__inner {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: var(--theme-mobile-distribution);
  align-items: var(--theme-mobile-content-align);
  gap: 1.5rem;
}

.theme-header--contained .theme-mobile-panel__inner {
  max-width: var(--wp--style--global--wide-size, 1400px);
  margin: 0 auto;
}

.theme-header--full .theme-mobile-panel__inner {
  max-width: none;
  margin: 0;
}

.theme-mobile-panel[data-open="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 300ms ease,
    visibility 0s linear 0s;
}

.theme-mobile-main {
  width: var(--theme-mobile-item-width);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: var(--theme-mobile-content-align);
  gap: 1rem;
}

.theme-mobile-panel .theme-btn--primary {
  background: #fff;
  color: rgb(var(--theme-header-gradient-rgb));
}

.theme-mobile-panel .theme-btn--primary:hover {
  background: rgba(255, 255, 255, 0.88);
}

.theme-mobile-panel .theme-btn--secondary {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.theme-menu--mobile {
  display: flex;
  flex-direction: column;
  align-items: var(--theme-mobile-content-align);
  gap: 1rem;
  font-size: 1rem;
  text-align: var(--theme-mobile-text-align);
  width: var(--theme-mobile-item-width);
  max-width: 100%;
}

.theme-menu--mobile a {
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
  text-decoration: none;
}

.theme-mobile-actions {
  display: flex;
  flex-direction: column;
  align-items: var(--theme-mobile-content-align);
  gap: 0.75rem;
  width: var(--theme-mobile-item-width);
  max-width: 100%;
}

.theme-mobile-pattern {
  width: var(--theme-mobile-item-width);
  max-width: 100%;
  text-align: var(--theme-mobile-text-align);
}

.theme-mobile-panel .theme-btn--full {
  width: var(--theme-mobile-item-width);
  max-width: 100%;
  box-sizing: border-box;
}

.theme-cta-pattern {
  width: var(--theme-mobile-item-width);
  max-width: 100%;
}

.theme-auth-links .theme-cta-pattern {
  width: auto;
}

@media (min-width: 640px) {
  .theme-header__inner {
    padding: var(--header-padding-y) 1.5rem;
  }
}

@media (min-width: 768px) {
  .theme-header__row {
    gap: 2rem;
  }

  .theme-header__right {
    gap: 3rem;
  }

  .theme-header--no-cta .theme-header__right {
    gap: 0;
  }
}

.wp-block-button .wp-block-button__link,
a.wp-block-button__link.wp-element-button {
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.wp-block-button:hover .wp-block-button__link,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible,
a.wp-block-button__link.wp-element-button:hover,
a.wp-block-button__link.wp-element-button:focus,
a.wp-block-button__link.wp-element-button:focus-visible,
a.wp-block-button__link.wp-element-button:active {
  background: #002360 !important;
  background-color: #002360 !important;
}

/*
 * WordPress Grid blocks: responsive stacking.
 * WP generates fixed grid-template-columns with no media query.
 * 4+ cols on desktop → 2 cols on tablet → 1 col on mobile.
 */
@media (max-width: 767px) {
  .wp-block-group.is-layout-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .wp-block-group.is-layout-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Rows grow with the tallest cell so nested stacks (e.g. two MPM cards) don’t overflow the section */
.entry-content .wp-block-group.is-layout-grid {
  grid-auto-rows: minmax(min-content, auto);
  min-height: min-content;
}

/*
 * Side-by-side on small screens, stacked from md up.
 *
 * Use on a Group (Row) block — Additional CSS class(es):
 *   flex flex-row md:flex-col gap-4
 *
 * If `flex` is missing, or WP strips layout classes, `flex-row` alone does NOT
 * create a flexbox (Tailwind only sets flex-direction). These rules fix that.
 */
.entry-content .flex-row.md\:flex-col,
.wp-block-group.flex-row.md\:flex-col {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.entry-content .flex-row.md\:flex-col.gap-4,
.wp-block-group.flex-row.md\:flex-col.gap-4 {
  gap: 1rem;
}

@media (max-width: 767px) {
  .entry-content .flex-row.md\:flex-col > *,
  .wp-block-group.flex-row.md\:flex-col > * {
    flex: 1 1 auto;
    min-width: 0;
    align-self: stretch;
  }
}

@media (min-width: 768px) {
  .entry-content .flex-row.md\:flex-col,
  .wp-block-group.flex-row.md\:flex-col {
    flex-direction: column !important;
    align-items: stretch;
    align-content: flex-start;
    min-height: min-content;
  }

  /* Default: cards size to content */
  .entry-content .flex-row.md\:flex-col > *,
  .wp-block-group.flex-row.md\:flex-col > * {
    flex: 0 0 auto !important;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }

  /*
   * Equal-height stack (md+): add h-full to the Group wrapper.
   * Cards share the column evenly, but grow if content demands more.
   */
  .entry-content .flex-row.md\:flex-col.h-full > *,
  .wp-block-group.flex-row.md\:flex-col.h-full > * {
    flex: 1 1 0% !important;
  }
}

/* When Group still has is-layout-flex, beat WP’s generated flex-direction */
.wp-block-group.is-layout-flex.flex-row {
  flex-direction: row !important;
}

.wp-block-group.is-layout-flex.flex-col {
  flex-direction: column !important;
}

@media (min-width: 768px) {
  .wp-block-group.is-layout-flex.md\:flex-col {
    flex-direction: column !important;
  }

  .wp-block-group.is-layout-flex.md\:flex-row {
    flex-direction: row !important;
  }
}

/*
 * Pathway card — colostat/pathway-card block.
 * Single reusable linked card. Use inside Columns / Grid for layouts.
 */

.cs-pathway-card,
.wp-block-colostat-pathway-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.5rem;
  border: none;
  box-sizing: border-box;
  width: 100%;
  min-height: min-content;
}

.cs-pathway-card__bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  transition: transform 0.5s ease;
}

.cs-pathway-card:hover .cs-pathway-card__bg {
  transform: scale(1.05);
}

.cs-pathway-card__gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.cs-pathway-card__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  padding: 1.5rem;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .cs-pathway-card__body {
    padding: 2rem;
  }
}

.cs-pathway-card__icon {
  flex-shrink: 0;
  align-self: flex-start;
  min-height: 32px;
  margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
  .cs-pathway-card__icon {
    margin-bottom: 1.5rem;
  }
}

.cs-pathway-card__icon-img {
  display: block;
  width: 32px;
  height: auto;
}

.cs-pathway-card__icon-svg {
  display: block;
  line-height: 0;
  color: inherit;
}

.cs-pathway-card__icon-svg svg {
  display: block;
  width: 32px;
  height: auto;
  fill: currentColor;
}

.cs-pathway-card__stack {
  margin-top: auto;
  align-self: flex-start;
  width: 100%;
  max-width: min(100%, 44ch);
  text-align: left;
}

/* Optional: let body copy use the full card width (editor: Layout → full-width text). */
.cs-pathway-card__stack--full-width {
  max-width: none;
}

.cs-pathway-card__stack:first-child {
  margin-top: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.cs-pathway-card__stack:first-child
  .cs-pathway-card__title
  ~ .cs-pathway-card__excerpt {
  margin-top: auto;
  padding-top: 1.25rem;
}

/* No heading: body copy at top, CTA pinned to bottom of the card */
.cs-pathway-card__stack:not(:has(.cs-pathway-card__title)) {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.cs-pathway-card__stack > * + * {
  margin-block-start: 1.25rem;
}

.cs-pathway-card__stack:not(:has(.cs-pathway-card__title)) > * + * {
  margin-block-start: 0;
}

.cs-pathway-card__stack:not(:has(.cs-pathway-card__title))
  .cs-pathway-card__cta {
  margin-top: auto;
  padding-top: 1.25rem;
}

.cs-pathway-card__title {
  margin: 0;
  color: inherit;
  font-size: clamp(1.125rem, 2.6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.cs-pathway-card__excerpt {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: inherit;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.cs-pathway-card__excerpt p {
  margin: 0;
}

.cs-pathway-card__excerpt p + p {
  margin-top: 0.5em;
}

@media (min-width: 768px) {
  .cs-pathway-card__excerpt {
    font-size: 1rem;
  }
}

.cs-pathway-card__cta {
  margin: 0;
  margin-top: 1.5rem;
  color: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
}

.cs-pathway-card__hit {
  position: absolute;
  inset: 0;
  z-index: 4;
  text-decoration: none;
}

.cs-pathway-card__hit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/*
 * MPM Accordion — align with pathway cards (typography, radius, padding).
 * Uses native <details>: each item is independent, so multiple FAQs can stay open at once.
 * Height animation uses ::details-content where supported (see interpolate-size below).
 */
.mpm-accordion .mpm-accordion__item {
  border-radius: 1.5rem;
  border: none;
  interpolate-size: allow-keywords;
}

.mpm-accordion .mpm-accordion__summary {
  padding: 1.5rem;
  font-size: clamp(1.0625rem, 2.2vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: inherit;
  transition: background-color 0.3s ease, color 0.2s ease;
}

.mpm-accordion .mpm-accordion__summary .mpm-accordion__title {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

@media (min-width: 768px) {
  .mpm-accordion .mpm-accordion__summary {
    padding: 2rem;
  }
}

.mpm-accordion .mpm-accordion__summary::after {
  border-color: currentColor;
  opacity: 0.55;
  transition: transform 0.3s ease, opacity 0.2s ease;
}

.mpm-accordion .mpm-accordion__item[open] .mpm-accordion__summary::after {
  opacity: 0.85;
}

.mpm-accordion .mpm-accordion__panel {
  padding: 0 1.5rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.62;
  color: inherit;
  border-top-color: rgba(15, 23, 42, 0.08);
}

@media (min-width: 768px) {
  .mpm-accordion .mpm-accordion__panel {
    padding: 0 2rem 2rem;
    font-size: 0.9375rem;
  }
}

.mpm-accordion .mpm-accordion__panel-inner {
  padding-top: 1.5rem;
}

@media (min-width: 768px) {
  .mpm-accordion .mpm-accordion__panel-inner {
    padding-top: 1.75rem;
  }
}

.mpm-accordion .mpm-accordion__panel-inner p {
  margin: 0;
}

.mpm-accordion .mpm-accordion__panel-inner p + p {
  margin-top: 0.5em;
}

.mpm-accordion .mpm-accordion__item[open] .mpm-accordion__summary {
  background-color: rgba(0, 35, 96, 0.05);
}

/* Add Tailwind utilities on the block (Advanced → Additional CSS class) for extra motion; WindPress will compile them. */
.mpm-accordion .mpm-accordion__item::details-content {
  transition: height 0.35s ease, opacity 0.28s ease;
  overflow: clip;
}

/* Link Wrapper block: shrink to content width inside flow layouts. */
.is-layout-flow > .wp-block-minus-plus-multiply-link-wrapper {
  display: inline-block;
}

/* Keep the gradient behind the header area, not over hero copy. */
.theme-header--static.theme-header--gradient::before {
  height: calc(var(--header-height) * 1.35);
}

/* Keep custom mobile alignment vars active below desktop. */
@media (max-width: 1023px) {
  .theme-mobile-panel__inner {
    justify-content: var(--theme-mobile-distribution);
    align-items: var(--theme-mobile-content-align);
  }

  .theme-mobile-main,
  .theme-menu--mobile,
  .theme-mobile-actions {
    align-items: var(--theme-mobile-content-align);
    width: var(--theme-mobile-item-width);
  }

  .theme-menu--mobile,
  .theme-mobile-pattern {
    text-align: var(--theme-mobile-text-align);
  }
}

/* Match header container width/gutters to the Max-W Block system. */
.theme-header--contained .theme-header__inner,
.theme-header--contained .theme-mobile-panel__inner {
  width: 100%;
  max-width: calc(var(--spacing) * 400);
  padding-left: clamp(1rem, 3vw, 2.5rem);
  padding-right: clamp(1rem, 3vw, 2.5rem);
  box-sizing: border-box;
}

/* Restore mobile/tablet vertical flow and default container behavior. */
@media (max-width: 1023px) {
  .theme-header--contained .theme-header__inner,
  .theme-header--contained .theme-mobile-panel__inner {
    max-width: var(--wp--style--global--wide-size, 1400px);
    padding-left: var(--header-padding-x);
    padding-right: var(--header-padding-x);
  }

  .theme-mobile-panel__inner {
    min-height: 100%;
    justify-content: var(--theme-mobile-distribution);
    align-items: var(--theme-mobile-content-align);
  }
}

/*
 * Resource Card — colostat/resource-card block.
 * Extends the pathway-card pattern for downloadable resources.
 */

.cs-resource-card {
  border-radius: 1.5rem;
}

.cs-resource-card .cs-pathway-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cs-resource-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15em 0.5em;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 0.25rem;
  background-color: currentColor;
  color: inherit;
}

.cs-resource-card__badge {
  background-color: #102E68;
  color: #fff;
}

.cs-resource-card .cs-pathway-card__hit {
  cursor: pointer;
}

.cs-resource-card .cs-pathway-card__hit:hover ~ .cs-pathway-card__body .cs-pathway-card__cta {
  text-decoration: underline;
}