/* ==========================================================================
   PANAP — WordPress layer.

   style.css is the approved design, ported verbatim. Everything WordPress
   needs that the static prototype had no equivalent for lives here: core
   classes, navigation submenus, archives and faceted search, single templates,
   comments, and plugin overrides.
   ========================================================================== */

/* --------------------------------------------------------- Accessibility */

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  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: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: var(--teal-dark);
  display: block;
  font-size: 14px;
  height: auto;
  left: 8px;
  line-height: normal;
  padding: 14px 22px;
  text-decoration: none;
  top: 8px;
  width: auto;
  z-index: 100000;
}

.skip-link:focus {
  position: fixed;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ Core blocks */

.alignleft {
  float: left;
  margin: 6px 24px 18px 0;
}

.alignright {
  float: right;
  margin: 6px 0 18px 24px;
}

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

.alignwide,
.alignfull {
  max-width: none;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption-text,
.wp-element-caption,
figcaption {
  color: var(--gray-600);
  font-size: 14px;
  margin-top: 8px;
  text-align: center;
}

.sticky .panap-card {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

.panap-page-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

/* The hero reuses h1 styling for the non-first slides' h2 (one h1 per page). */
.hero-content h2 {
  color: #fff;
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.14;
  margin: 0 0 18px;
}
span.panap-filter-label {
  text-transform: capitalize;
}
/* ------------------------------------------- Header: submenus and search */

/*
 * Dropdowns & Mega Menus.
 * Normal dropdowns (Media, Get Involved) are compact anchored panels.
 * Mega menus (Campaigns, Resources) span a centered container with interactive feature cards.
 */
.main-nav .has-dropdown {
  position: relative;
}

.main-nav .mega-menu {
  position: static;
}

/* Base submenu for compact dropdowns */
.main-nav .sub-menu {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow:
    0 20px 45px -12px rgba(2, 135, 136, 0.16),
    0 8px 20px -6px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 4px;
  left: 0;
  list-style: none;
  margin: 0;
  min-width: 320px;
  opacity: 0;
  padding: 12px;
  pointer-events: none;
  position: absolute;
  top: calc(100% + 14px);
  transform: translateY(-8px);
  transition:
    opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
}

/* Hover bridge for smooth cursor transition */
.main-nav .sub-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 20px;
}

/* Mega menu panel (Campaigns, Resources) */
.main-nav .mega-menu > .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: min(1180px, calc(100vw - 48px));
  max-width: 1180px;
  right: auto;
  border-radius: 20px;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow:
    0 25px 60px -15px rgba(2, 135, 136, 0.18),
    0 12px 24px -6px rgba(0, 0, 0, 0.08);
}

.main-nav .mega-menu > .sub-menu::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 24px;
}

.main-nav .has-dropdown:hover > .sub-menu,
.main-nav .has-dropdown.is-expanded > .sub-menu,
.main-nav .has-dropdown:focus-within > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.main-nav .mega-menu:hover > .sub-menu,
.main-nav .mega-menu.is-expanded > .sub-menu,
.main-nav .mega-menu:focus-within > .sub-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Submenu card links */
.main-nav .sub-menu a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid transparent;
  color: var(--ink);
  text-decoration: none;
  transition: all 0.22s ease;
  position: relative;
}

.main-nav .sub-menu a:hover,
.main-nav .sub-menu a:focus {
  background: #f4faf9;
  border-color: rgba(2, 135, 136, 0.18);
  transform: translateY(-1px);
}

.main-nav .mega-item-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(
    135deg,
    rgba(2, 135, 136, 0.1) 0%,
    rgba(90, 47, 119, 0.1) 100%
  );
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.main-nav .sub-menu a:hover .mega-item-icon {
  background: linear-gradient(135deg, var(--teal) 0%, var(--purple) 100%);
  color: #ffffff;
  transform: scale(1.08);
}

.main-nav .mega-item-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.main-nav .mega-item-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  transition: color 0.2s ease;
}

.main-nav .sub-menu a:hover .mega-item-title {
  color: var(--teal-dark);
}

.main-nav .mega-item-desc {
  font-size: 12px;
  color: var(--gray-700);
  line-height: 1.4;
  font-weight: 400;
}

.main-nav .mega-item-arrow {
  color: #c2d2d3;
  font-size: 13px;
  margin-left: auto;
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.22s ease;
  flex-shrink: 0;
}

.main-nav .sub-menu a:hover .mega-item-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--teal);
}

/* Parent menu highlighting & active indicator */
.main-nav > ul > li > a {
  position: relative;
  padding: 8px 0;
  transition: color 0.2s ease;
}

.main-nav > ul > li > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--purple));
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition:
    transform 0.25s ease,
    opacity 0.25s ease;
}

.main-nav > ul > li > a:hover,
.main-nav > ul > li.has-dropdown:hover > a,
.main-nav > ul > li.has-dropdown.is-expanded > a,
.main-nav > ul > li.has-dropdown:focus-within > a,
.main-nav > ul > li.current-menu-item > a,
.main-nav > ul > li.current-menu-ancestor > a,
.main-nav > ul > li.current-menu-parent > a,
.main-nav > ul > li > a.is-active {
  color: var(--teal-dark) !important;
  font-weight: 700;
}

.main-nav > ul > li > a:hover::after,
.main-nav > ul > li.has-dropdown:hover > a::after,
.main-nav > ul > li.has-dropdown.is-expanded > a::after,
.main-nav > ul > li.current-menu-item > a::after,
.main-nav > ul > li.current-menu-ancestor > a::after,
.main-nav > ul > li.current-menu-parent > a::after,
.main-nav > ul > li > a.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.main-nav > ul > li.has-dropdown:hover > a .chevron,
.main-nav > ul > li.has-dropdown.is-expanded > a .chevron,
.main-nav > ul > li.has-dropdown:focus-within > a .chevron,
.main-nav > ul > li.current-menu-ancestor > a .chevron,
.main-nav > ul > li.current-menu-parent > a .chevron,
.main-nav > ul > li > a.is-active .chevron {
  color: var(--teal-dark) !important;
}

/* The chevron stays put while its panel is open — hovering a mega-menu item
   recolours the arrow, it does not flip it. */
.main-nav .chevron {
  transition: color 0.2s ease;
}

/* The dropdown slides open from a collapsed box. navigation.js drops the
   `hidden` attribute before adding .is-open and puts it back only after the
   closing transition has finished, so both directions stay visible. */
.panap-search-panel {
  background: #fff;
  border-top: 1px solid var(--border);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  transform: translateY(-12px);
  transition:
    max-height 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    padding 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.45s ease,
    transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.panap-search-panel.is-open {
  max-height: 160px;
  opacity: 1;
  padding: 20px 0;
  transform: translateY(0);
}

/* The form trails the panel slightly so the field appears to settle into it. */
.panap-search-panel .panap-searchform {
  opacity: 0;
  transform: translateY(-8px);
  transition:
    opacity 0.4s ease 0.14s,
    transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) 0.14s;
}

.panap-search-panel.is-open .panap-searchform {
  opacity: 1;
  transform: translateY(0);
}

#panap-search-toggle {
  transition: background 0.35s ease;
}

/* Open state: the button darkens, the icon itself stays put. */
#panap-search-toggle.is-active {
  background: var(--teal-dark, #016f70);
}

@media (prefers-reduced-motion: reduce) {
  .panap-search-panel,
  .panap-search-panel .panap-searchform,
  #panap-search-toggle {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

.panap-searchform {
  display: flex;
  gap: 10px;
  margin: 0 auto; 
  padding-top: 30px;
}

.panap-searchform-input {
  border: 1px solid var(--border);
  border-radius: 999px;
  flex: 1;
  font: inherit;
  padding: 12px 20px;
}

.panap-searchform-input:focus {
  border-color: var(--teal);
  outline: none;
}

body.panap-nav-open {
  overflow: hidden;
}

/* ------------------------------------------------- Resources carousel */

.resources-carousel.swiper {
  overflow: hidden;
  padding-bottom: 4px;
}

/* Swiper sizes the slides; the card itself keeps the design's column layout. */
.resources-carousel .resource-card.swiper-slide {
  height: auto;
}

.resources-carousel-controls {
  align-items: center;
  display: flex;
  gap: 22px;
  justify-content: center;
  margin-top: 32px;
}

.resources-arrow {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 44px;
  font-size: 17px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    opacity 0.25s ease;
  width: 44px;
}

.resources-arrow:hover:not(.swiper-button-disabled) {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.resources-arrow.swiper-button-disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.resources-dots {
  align-items: center;
  display: flex;
  gap: 9px;
  justify-content: center;
}

.resources-dot {
  background: #a7b1b2;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: block;
  height: 8px;
  padding: 0;
  transition:
    background 0.3s ease,
    border-radius 0.3s ease,
    width 0.3s ease;
  width: 8px;
}

.resources-dot.is-active {
  background: var(--teal);
  border-radius: 8px;
  width: 26px;
}

.resources-dot:focus-visible,
.resources-arrow:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
}

.resources-more {
  margin-top: 34px;
  text-align: center;
}

/* ------------------------------------------- Search results: type filters */

.panap-search-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.panap-search-filter {
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--gray-700);
  display: inline-flex;
  font-size: 14.5px;
  gap: 8px;
  padding: 8px 16px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.panap-search-filter:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
}

.panap-search-filter.is-active {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
}

.panap-search-filter-count {
  background: var(--bg-soft);
  border-radius: 999px;
  color: var(--gray-600);
  font-size: 12.5px;
  min-width: 22px;
  padding: 1px 7px;
  text-align: center;
}

.panap-search-filter.is-active .panap-search-filter-count {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.panap-card-type {
  color: var(--teal-dark);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
  text-transform: uppercase;
}

/* --------------------------------------------- Google-style search results */

.panap-search-container {
  max-width: 880px;
  margin: 40px auto 90px;
  padding: 0 20px;
}

.panap-google-results-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.panap-search-result-item {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.panap-search-result-item:hover {
  border-color: rgba(2, 136, 137, 0.28);
  box-shadow: 0 8px 24px -4px rgba(2, 136, 137, 0.1);
  transform: translateY(-2px);
}

.panap-search-result-item.has-pdf {
  border-left: 4px solid #e03131;
}

.panap-result-main {
  flex: 1;
  min-width: 0;
}

.panap-result-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.panap-result-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-600);
}

.panap-result-breadcrumb .panap-result-icon {
  color: var(--teal-dark);
  font-size: 12px;
}

.panap-result-breadcrumb .panap-result-source {
  font-weight: 600;
  color: var(--ink);
}

.panap-result-breadcrumb .panap-result-sep {
  color: #adb5bd;
  font-size: 14px;
}

.panap-result-breadcrumb .panap-result-type-label {
  color: var(--gray-700);
}

.panap-result-breadcrumb .panap-result-slug {
  color: var(--teal-dark);
  font-weight: 500;
}

.panap-result-badges {
  display: flex;
  align-items: center;
  gap: 6px;
}

.panap-badge-pdf {
  background: #ffe3e3;
  color: #c92a2a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.panap-badge-type {
  background: var(--bg-soft);
  color: var(--gray-700);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: capitalize;
}

.panap-result-title {
  font-size: 20px;
  line-height: 1.35;
  margin: 0 0 10px 0;
  font-family: var(--font-heading, "Poppins", sans-serif);
  font-weight: 600;
}

.panap-result-title a {
  color: #1a0dab;
  text-decoration: none;
  transition: color 0.15s ease;
}

.panap-result-title a:hover {
  color: var(--teal-dark);
  text-decoration: underline;
}

/* Search keyword highlighting */
mark.search-highlight {
  background: #fff3bf;
  color: #212529;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.panap-result-snippet {
  font-size: 14.5px;
  line-height: 1.62;
  color: #4a5568;
  margin-bottom: 12px;
}

.panap-snippet-date {
  color: #718096;
  font-weight: 500;
  font-size: 13.5px;
}

.panap-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.panap-btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.panap-btn-download {
  background: #fff0f0;
  border: 1px solid #ffc9c9;
  color: #c92a2a;
}

.panap-btn-download:hover {
  background: #e03131;
  border-color: #e03131;
  color: #ffffff;
}

.panap-btn-download .panap-pdf-filesize {
  font-weight: 400;
  opacity: 0.85;
  font-size: 12px;
}

.panap-btn-view {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--ink);
}

.panap-btn-view:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #ffffff;
}

.panap-result-thumb {
  flex: 0 0 92px;
  width: 92px;
  height: 92px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.panap-result-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.panap-search-result-item:hover .panap-result-thumb img {
  transform: scale(1.05);
}

/* Progressive loading spinner & indicator */
.panap-search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  padding: 16px 24px;
  background: #f8f9fa;
  border: 1px dashed #ced4da;
  border-radius: 10px;
  color: var(--gray-700);
  font-size: 14.5px;
  font-weight: 500;
}

.panap-search-spinner {
  width: 20px;
  height: 20px;
  border: 2.5px solid rgba(2, 136, 137, 0.2);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: panap-spin 0.75s linear infinite;
}

@keyframes panap-spin {
  to {
    transform: rotate(360deg);
  }
}

.panap-search-end {
  text-align: center;
  margin-top: 28px;
  padding: 14px;
  color: var(--gray-600);
  font-size: 13.5px;
}

.panap-search-end p {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.panap-search-end i {
  color: var(--teal);
}

@media (max-width: 680px) {
  .panap-search-result-item {
    flex-direction: column-reverse;
    padding: 18px;
    gap: 14px;
  }

  .panap-result-thumb {
    width: 100%;
    height: 140px;
    flex: 0 0 140px;
  }

  .panap-result-title {
    font-size: 18px;
  }

  .panap-result-meta-top {
    flex-wrap: wrap;
  }
}

/* --------------------------------------------- Inner page: hero + content */

.panap-page-hero {
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
  padding: 56px 0;
}

.panap-page-hero h1 {
  font-size: clamp(28px, 4vw, 44px);
  margin: 0;
}

.panap-page-hero .eyebrow {
  margin-bottom: 8px;
}

.panap-page-hero .section-lede {
  max-width: 720px;
}

.panap-archive-desc {
  color: var(--gray-700);
  margin-top: 12px;
  max-width: 760px;
}

.panap-result-count {
  color: var(--gray-600);
  font-size: 15px;
  margin-top: 10px;
}

.panap-page-content {
  padding: 56px 0 80px;
}

/* Elementor owns its own spacing; the theme must not add any. */
.panap-page-content--full {
  padding: 0;
  width: 100%;
}

.panap-page-content > * + * {
  margin-top: 1.1em;
}

.panap-page-content h2 {
  font-size: clamp(24px, 3vw, 34px);
  margin-top: 1.6em;
}

.panap-page-content h3 {
  font-size: 22px;
  margin-top: 1.4em;
}

.panap-page-content ul,
.panap-page-content ol {
  list-style: revert;
  padding-left: 1.4em;
}

.panap-page-content li + li {
  margin-top: 0.4em;
}

.panap-page-content blockquote {
  border-left: 4px solid var(--teal);
  color: var(--gray-700);
  font-size: 19px;
  margin: 1.6em 0;
  padding: 6px 0 6px 24px;
}

.panap-page-content a:not(.btn) {
  color: var(--teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ Breadcrumbs */

.panap-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 6px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.panap-breadcrumbs li {
  align-items: center;
  color: var(--gray-600);
  display: flex;
  gap: 6px;
}

.panap-breadcrumbs li + li::before {
  color: var(--border);
  content: "/";
}

.panap-breadcrumbs a {
  color: var(--teal-dark);
}

.panap-breadcrumbs a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------- Post cards */

.panap-archive {
  padding: 56px 0 80px;
}

.panap-post-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(3, 1fr);
}

.panap-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.panap-card:hover {
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.08);
  transform: translateY(-4px);
}

.panap-card-media {
  aspect-ratio: 16 / 11;
  background: var(--bg-soft);
  display: block;
  overflow: hidden;
  position: relative;
}

.panap-card-media img {
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  width: 100%;
}

.panap-card:hover .panap-card-media img {
  transform: scale(1.05);
}

.panap-card-media .badge {
  left: 14px;
  position: absolute;
  top: 14px;
  text-transform: capitalize;
}

#search-2751 .panap-google-results-list {
  width: 80%;
  margin: auto;
  padding: 85px 0;
}

.panap-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
}

.panap-card-body h3 {
  font-size: 19px;
  line-height: 1.35;
}

.panap-card-excerpt {
  color: var(--gray-700);
  flex: 1;
  font-size: 15px;
  line-height: 1.7;
}

.panap-card-link {
  align-items: center;
  color: var(--teal-dark);
  display: inline-flex;
  font-weight: 600;
  gap: 8px;
  font-size: 15px;
}

.panap-card-link i {
  font-size: 11px;
  transition: transform 0.25s ease;
}

.panap-card-link:hover i {
  transform: translateX(4px);
}

/* ------------------------------------------------- Faceted archive layout */

.panap-archive-layout {
  align-items: start;
  display: grid;
  gap: 40px;
  grid-template-columns: 280px 1fr;
  padding: 48px 0 80px;
}

.panap-archive-hero {
  margin-bottom: 0;
}

.panap-filters-toggle {
  display: none;
  grid-column: 1 / -1;
}

.panap-filters {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  position: sticky;
  top: 110px;
}

.panap-filters-head {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 14px;
}

.panap-filters-head h2 {
  font-size: 18px;
}

.panap-filters-close {
  color: var(--gray-600);
  display: none;
  font-size: 26px;
  line-height: 1;
  padding: 0 4px;
}

.panap-filter-group {
  border: 0;
  margin: 0 0 22px;
  padding: 0;
}

.panap-filter-title {
  color: var(--ink);
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
  padding: 0;
}

.panap-filter-group input[type="search"],
.panap-filter-group select {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  padding: 10px 12px;
  width: 100%;
}

.panap-filter-group input[type="search"]:focus,
.panap-filter-group select:focus {
  border-color: var(--teal);
  outline: none;
}

.panap-filter-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 260px;
  overflow-y: auto;
}

.panap-filter-list label {
  align-items: center;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  font-size: 15px;
  gap: 10px;
  padding: 7px 8px;
  transition: background 0.18s ease;
}

.panap-filter-list label:hover {
  background: var(--bg-soft);
}

.panap-filter-list input {
  accent-color: var(--teal);
  flex-shrink: 0;
}

.panap-filter-label {
  flex: 1;
}

.panap-filter-count {
  color: var(--gray-600);
  font-size: 13px;
}

.panap-filters-actions {
  align-items: center;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 18px;
}

.panap-filters-clear {
  color: var(--gray-600);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.panap-filters-clear:hover {
  color: var(--teal-dark);
}

.panap-archive-bar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 22px;
}

.panap-archive-bar .panap-result-count {
  margin: 0;
}

.panap-results {
  min-height: 160px;
  transition: opacity 0.2s ease;
}

.panap-results.is-loading {
  opacity: 0.45;
  pointer-events: none;
}

.panap-no-results {
  background: var(--bg-soft);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  grid-column: 1 / -1;
  padding: 48px 24px;
  text-align: center;
}

.panap-no-results-title {
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 6px;
}

.panap-filters-overlay {
  background: rgba(13, 27, 42, 0.45);
  inset: 0;
  position: fixed;
  z-index: 70;
}

/* ------------------------------------------------------------ Pagination */

.panap-pagination,
.panap-archive-main .page-numbers {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
}

.panap-pagination .page-numbers,
.panap-page-btn {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink-2);
  display: inline-flex;
  font-size: 15px;
  justify-content: center;
  min-width: 42px;
  padding: 9px 14px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.panap-pagination .page-numbers:hover,
.panap-page-btn:hover:not(:disabled) {
  border-color: var(--teal);
  color: var(--teal-dark);
}

.panap-pagination .page-numbers.current,
.panap-page-btn.is-current {
  background: var(--gradient-main);
  border-color: transparent;
  color: #fff;
}

.panap-page-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.panap-page-ellipsis {
  color: var(--gray-600);
  padding: 0 4px;
}

.panap-pagination .screen-reader-text {
  display: none;
}

/* --------------------------------------------------- Single: post layout */

.panap-single-hero {
  background: var(--bg-section);
  border-bottom: 1px solid var(--border);
  padding: 52px 0;
}

.panap-single-hero h1 {
  font-size: clamp(18px, 4vw, 36px);
  margin-bottom: 12px;
  line-height: 45px;
}

.panap-single-hero .story-date {
  color: var(--gray-600);
}

#single-updates-6646 .panap-single-content.panap-prose {
  width: 52% !important;
  margin: auto;
  max-width: 80% !important;
  padding-top: 65px !important;
}

#single-updates-6646 .container.panap-single-thumb {
  width: 52% !important;
  margin: auto;
  max-width: 80% !important;
  padding-top: 65px !important;
}

#single-updates-6646 header.panap-single-hero .container {
  width: 52% !important;
  margin: auto;
  max-width: 80% !important;
}

#single-updates-6646 nav.navigation.post-navigation {
  padding-bottom: 138px !important;
}

#single-updates-6646 nav.navigation.post-navigation {
  padding-bottom: 138px !important;
  width: 77% !important;
  margin: auto;
  max-width: 80% !important;
  margin-top: 38px !important;
}

.panap-single-thumb {
  margin-top: -40px;
  position: relative;
}

/*
 * Fixed frame rather than a free-flowing image. Featured images come in every
 * shape — some sources are only a couple of hundred pixels wide — and width:100%
 * against an intrinsic height attribute stretched them badly. aspect-ratio plus
 * object-fit crops instead of distorting, whatever the source.
 */
.panap-single-thumb img {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

/*
 * Editor-written body copy.
 *
 * Split in two on purpose: .panap-prose is the typography, and
 * .panap-single-content adds the single-column measure on top of it. The event
 * page's body sits in a two-column grid and so wants the first without the
 * second — before the split it had neither, and the_content() rendered as
 * unstyled browser defaults.
 */
.panap-prose > * + * {
  margin-top: 1.1em;
}

.panap-prose p {
  color: var(--gray-700);
  line-height: 1.85;
}

.panap-prose h2 {
  font-size: 28px;
  margin-top: 1.6em;
}

.panap-prose h3 {
  color: var(--ink);
  font-size: 22px;
  margin-top: 1.5em;
}

.panap-prose h4 {
  color: var(--ink);
  font-size: 18px;
  margin-top: 1.4em;
}

.panap-prose ul,
.panap-prose ol {
  color: var(--gray-700);
  line-height: 1.85;
  list-style: revert;
  padding-left: 1.4em;
}

.panap-prose li + li {
  margin-top: 0.4em;
}

.panap-prose a {
  color: var(--teal-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.panap-prose blockquote {
  border-left: 4px solid var(--teal);
  color: var(--gray-700);
  margin-left: 0;
  padding-left: 24px;
}

.panap-prose img {
  border-radius: var(--radius-sm);
  height: auto;
  max-width: 100%;
}

.panap-single-content {
  max-width: 820px;
  padding: 48px 24px 32px;
}

/*
 * the_post_navigation() wraps both links in .nav-links, so the flex container
 * has to be that wrapper — putting it on .post-navigation laid out a single
 * child and left the two links stacked.
 */
.post-navigation {
  border-top: 1px solid var(--border);
  margin-top: 32px;
  padding: 28px 0 72px;
}

.post-navigation .nav-links {
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
  max-width: 46%;
}

.post-navigation .nav-next {
  margin-left: auto;
  text-align: right;
}

.post-navigation a {
  color: var(--ink);
  font-weight: 600;
}

.post-navigation a:hover {
  color: var(--teal-dark);
}

.panap-nav-label {
  color: var(--teal);
  display: block;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ----------------------------------------------- Single: resource layout */

.panap-resource-single {
  padding: 40px 0 0;
}

.panap-resource-layout {
  display: grid;
  gap: 48px;
  grid-template-columns: 340px 1fr;
  padding-bottom: 72px;
}

.panap-resource-cover img {
  border-radius: var(--radius-md);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.12);
  width: 100%;
}

.panap-resource-body h1 {
  font-size: clamp(26px, 3.4vw, 40px);
  margin-bottom: 20px;
}

.panap-resource-facts {
  border-block: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 26px;
  padding: 18px 0;
}

.panap-resource-facts li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.panap-resource-facts span {
  color: var(--gray-600);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.panap-resource-facts strong {
  color: var(--ink);
  font-size: 16px;
}

.panap-resource-facts a {
  color: var(--teal-dark);
}

.panap-resource-description {
  color: var(--gray-700);
  line-height: 1.85;
}

.panap-resource-description > * + * {
  margin-top: 1em;
}

.panap-downloads {
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  margin-top: 36px;
  padding: 28px;
}

.panap-downloads h2 {
  font-size: 20px;
  margin-bottom: 16px;
}

.panap-download-list li {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 12px;
  padding: 12px 0;
}

.panap-download-list li:last-child {
  border-bottom: 0;
}

.panap-download-list i {
  color: #c0392b;
}

.panap-download-list a {
  color: var(--ink);
  flex: 1;
  font-weight: 600;
}

.panap-download-list a:hover {
  color: var(--teal-dark);
}

.panap-download-size {
  color: var(--gray-600);
  font-size: 13px;
}

/* ------------------------------------------------------- Single: video */

.panap-video-single {
  padding: 40px 0 0;
}

.panap-video-single h1 {
  font-size: clamp(26px, 3.4vw, 40px);
}

.panap-video-meta {
  align-items: center;
  color: var(--gray-600);
  display: flex;
  gap: 18px;
  margin-top: 10px;
}

.panap-video-meta .story-date {
  color: inherit;
}

.panap-video-duration {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.panap-video-player {
  padding-block: 28px;
}

.panap-video-embed {
  background: var(--ink) center / cover no-repeat;
  border-radius: var(--radius-lg);
  display: grid;
  overflow: hidden;
  place-items: center;
  position: relative;
  aspect-ratio: 16 / 9;
}

.panap-video-embed::before {
  background: rgba(13, 27, 42, 0.32);
  content: "";
  inset: 0;
  position: absolute;
}

.panap-video-embed.is-playing::before {
  display: none;
}

.panap-video-embed iframe {
  border: 0;
  height: 100%;
  position: absolute;
  inset: 0;
  width: 100%;
}

.panap-video-play {
  align-items: center;
  background: var(--gradient-main);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 24px;
  height: 84px;
  justify-content: center;
  position: relative;
  transition: transform 0.25s ease;
  width: 84px;
}

.panap-video-play:hover {
  transform: scale(1.08);
}

.resource-play {
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  color: var(--teal-dark);
  display: inline-flex;
  height: 54px;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
}

.panap-term-links a {
  color: var(--teal-dark);
}

/* -------------------------------------------------- Homepage extras */

/*
 * The prototype's media wrappers were <div>s; here they are links, so they
 * need to be block-level for the design's aspect-ratio and fixed sizes to
 * apply at all. Without this the featured story runs ~32px tall and the story
 * thumbnails lose their 140x100 crop.
 */
a.featured-story-image,
a.story-thumb {
  display: block;
}

.featured-story h3 a,
.story-copy h4 a {
  transition: color 0.2s ease;
}

.featured-story h3 a:hover,
.story-copy h4 a:hover {
  color: var(--teal-dark);
}

.resources-more {
  margin-top: 36px;
  text-align: center;
}

/*
 * Swiper takes over layout once it initialises, so the prototype's own
 * carousel CSS has to step aside: a grid wrapper would stop Swiper laying
 * slides out at all, and a fixed flex-basis plus `gap` would fight the inline
 * widths and spaceBetween margins Swiper sets. Scoped to .swiper-initialized
 * so the no-Swiper fallback keeps the original rules.
 */
.partners-carousel-viewport.swiper-initialized .partners-carousel-track {
  gap: 0 !important;
  display: flex !important;
}

.partners-carousel-viewport.swiper-initialized
  .partners-carousel-track
  .partner-card {
  flex: 0 0 auto !important;
  height: auto;
}

.partners-carousel .partner-card {
  height: auto;
}

.partners-carousel-track .partner-card-body {
  display: flex;
  flex-direction: column;
  min-height: 191px;
}

.partners-carousel-track .partner-card-body .btn {
  margin-top: auto;
  align-self: flex-start;
}

.partners-arrow {
  align-items: center;
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 50%;
  color: var(--ink) !important;
  cursor: pointer;
  display: inline-flex !important;
  flex: 0 0 44px;
  font-size: 16px;
  height: 44px;
  justify-content: center;
  line-height: 1;
  transition: all 0.25s ease;
  width: 44px;
}

.partners-arrow:hover:not(.swiper-button-disabled) {
  background: var(--teal) !important;
  border-color: var(--teal) !important;
  color: #ffffff !important;
}

.partners-arrow.swiper-button-disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.partners-dot.swiper-pagination-bullet-active,
.partners-dot.is-active {
  width: 26px !important;
  border-radius: 8px !important;
  background: var(--teal) !important;
}

.resources-carousel.swiper .swiper-wrapper {
  display: flex !important;
}

.resources-carousel.swiper .resource-card.swiper-slide {
  flex: 0 0 auto !important;
  height: auto;
  display: flex;
  flex-direction: column;
}

.resources-carousel.swiper .resource-card.swiper-slide .btn {
  margin-top: auto;
  align-self: flex-start;
}

.resources-dot.swiper-pagination-bullet-active,
.resources-dot.is-active {
  width: 26px !important;
  border-radius: 8px !important;
  background: var(--teal) !important;
}

.resource-card .resource-cover {
  display: block;
  position: relative;
  aspect-ratio: 2.8/3;
  overflow: hidden;
  border-radius: 12px;
}

.resource-card .resource-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Honeypot: present for bots, invisible and unreachable for people. */
.panap-hp {
  height: 0;
  left: -9999px;
  overflow: hidden;
  position: absolute;
  width: 0;
}

.form-note.is-success {
  color: var(--teal-dark);
}

.form-note.is-error {
  color: #c0392b;
}

/*
 * The GSAP suite only loads on the homepage, so inner pages get the same
 * header reveal from CSS instead of a 150KB download.
 */
@media (prefers-reduced-motion: no-preference) {
  body.panap-inner-page .header-inner {
    animation: panap-header-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes panap-header-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------- 404 */

.panap-404 {
  padding: 96px 0 110px;
  text-align: center;
}

.panap-404 h1 {
  font-size: clamp(30px, 4.4vw, 48px);
  margin-bottom: 14px;
}

.panap-404 .section-lede {
  margin-inline: auto;
  max-width: 560px;
}

.panap-404 .panap-searchform {
  margin-block: 30px;
}

.panap-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ---------------------------------------------------------- Comments */

.panap-comments {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding: 40px 0 80px;
}

.panap-comments-title {
  font-size: 22px;
  margin-bottom: 24px;
}

.panap-comment-list,
.panap-comment-list .children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.panap-comment-list .children {
  margin-left: 32px;
}

.panap-comment-list .comment-body {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}

.panap-comment-list .comment-author {
  align-items: center;
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
}

.panap-comment-list .comment-author img {
  border-radius: 50%;
}

.panap-comment-list .comment-metadata {
  color: var(--gray-600);
  font-size: 13px;
  margin-bottom: 10px;
}

.comment-form p {
  margin-bottom: 16px;
}

.comment-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  padding: 11px 14px;
  width: 100%;
}

.comment-form textarea:focus,
.comment-form input:focus {
  border-color: var(--teal);
  outline: none;
}

/* ------------------------------------------------------ MailPoet overrides */

.panap-mailpoet .mailpoet_form {
  padding: 0 !important;
  background: none !important;
}

.panap-mailpoet .mailpoet_paragraph {
  margin-bottom: 16px !important;
}

.panap-mailpoet .mailpoet_text_label,
.panap-mailpoet .mailpoet_paragraph > label {
  color: var(--ink);
  display: block;
  font-family: "Lato", sans-serif;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.panap-mailpoet .mailpoet_text,
.panap-mailpoet .mailpoet_email,
.panap-mailpoet input[type="text"],
.panap-mailpoet input[type="email"] {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  font: inherit !important;
  padding: 12px 14px !important;
  width: 100% !important;
}

.panap-mailpoet .mailpoet_submit,
.panap-mailpoet input[type="submit"] {
  background: var(--gradient-main) !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  cursor: pointer;
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  padding: 14px 22px !important;
  width: 100% !important;
}

.panap-mailpoet .mailpoet_validate_success {
  color: var(--teal-dark) !important;
}

.panap-mailpoet .mailpoet_validate_error {
  color: #c0392b !important;
}

/* Contact Form 7, used on inner pages. */
.wpcf7-form-control:not(.wpcf7-submit) {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  padding: 12px 14px;
  width: 100%;
}

.wpcf7-submit {
  background: var(--gradient-main);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  padding: 14px 26px;
}

/* ======================================================= RESPONSIVE */

@media (max-width: 1100px) {
  .panap-post-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .panap-archive-layout {
    grid-template-columns: 240px 1fr;
    gap: 28px;
  }

  .panap-resource-layout {
    gap: 32px;
    grid-template-columns: 260px 1fr;
  }
}

@media (max-width: 900px) {
  /*
   * The design already styles the off-canvas top-level list (column layout,
   * flex-start alignment, 20px gap), so nothing here touches it — only the
   * submenus, which the static prototype never had.
   */
  .main-nav > ul > li {
    width: 100%;
  }

  #single-updates-6646 .panap-single-content.panap-prose,
  #single-updates-6646 .container.panap-single-thumb {
    width: 80% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
  }

  #single-updates-6646 .container.panap-single-thumb {
    width: 90% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
  }

  #single-updates-6646 header.panap-single-hero .container {
    width: 80% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
  }

  .panap-single-hero h1 {
    line-height: 28px;
  }
  .main-nav > ul > li > a {
    justify-content: space-between;
  }

  .main-nav .sub-menu {
    border: 0;
    box-shadow: none;
    display: none;
    opacity: 1;
    pointer-events: auto;
    position: static;
    transform: none;
    min-width: 0;
    padding: 0 0 10px;
  }

  /* The desktop hover bridge has no purpose in the stacked mobile panel. */
  .main-nav .sub-menu::before {
    display: none;
  }

  .main-nav .has-dropdown.is-expanded > .sub-menu {
    display: block;
  }

  .main-nav .has-dropdown::after {
    display: none;
  }

  .main-nav .sub-menu a {
    padding: 8px 0 8px 16px;
  }

  /* Filters become an off-canvas drawer (specification 5.2). */
  .panap-archive-layout {
    grid-template-columns: 1fr;
  }

  .panap-filters-toggle {
    align-items: center;
    display: inline-flex;
    gap: 8px;
    justify-self: start;
  }

  .panap-archive-sidebar {
    display: contents;
  }

  .panap-filters {
    border-radius: 0;
    bottom: 0;
    max-width: 90vw;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top: 0;
    transform: translateX(100%);
    transition: transform 0.28s ease;
    width: 360px;
    z-index: 80;
  }

  .panap-filters.is-open {
    transform: translateX(0);
  }

  .panap-filters-close {
    display: block;
  }

  body.panap-filters-open {
    overflow: hidden;
  }

  .panap-resource-layout {
    grid-template-columns: 1fr;
  }

  .panap-resource-cover {
    margin-inline: auto;
    max-width: 320px;
  }

  .panap-single-thumb {
    margin-top: -24px;
  }
}

@media (max-width: 640px) {
  .panap-post-grid {
    grid-template-columns: 1fr;
  }

  .panap-page-hero {
    padding: 36px 0;
  }

  .panap-archive,
  .panap-page-content {
    padding: 36px 0 56px;
  }

  .panap-searchform {
    flex-direction: column;
  }

  .panap-searchform .btn {
    width: 100%;
  }

  .post-navigation .nav-links {
    flex-direction: column;
  }

  .post-navigation .nav-previous,
  .post-navigation .nav-next {
    max-width: none;
    text-align: left;
  }

  .post-navigation .nav-next {
    margin-left: 0;
  }
}

/* ==========================================================================
   Search Filters Collapsible Controls
   ========================================================================== */

.panap-search-filters-wrapper {
  margin-top: 18px;
}

.panap-filters-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.panap-filters-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  color: var(--ink, #1e293b);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.panap-filters-toggle-btn:hover,
.panap-filters-toggle-btn.is-open {
  background: #f0fdfa;
  border-color: var(--teal, #028788);
  color: var(--teal-dark, #026b6c);
}

.panap-filter-pill-count {
  background: rgba(2, 135, 136, 0.12);
  color: var(--teal-dark, #026b6c);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
}

.panap-filter-chevron {
  font-size: 11px;
  transition: transform 0.22s ease;
}

.panap-filters-toggle-btn.is-open .panap-filter-chevron {
  transform: rotate(180deg);
}

.panap-clear-filter-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #dc2626;
  text-decoration: none;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.panap-clear-filter-link:hover {
  background: rgba(220, 38, 38, 0.08);
}

.panap-search-filters {
  display: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0 4px;
}

.panap-search-filters.is-open {
  display: flex;
}

/* ==========================================================================
   Mobile Nav Drawer & Mobile Sticky Footer Nav (Isolated from Desktop)
   ========================================================================== */

/* Desktop defaults: strictly hidden */
.panap-mobile-drawer {
  display: none !important;
}

.panap-mobile-sticky-bar {
  display: none !important;
}

/* Mobile styles: <= 900px */
@media (max-width: 900px) {
  body.panap-nav-open {
    overflow: hidden !important;
  }

  body {
    padding-bottom: 64px;
  }

  .site-header .main-nav {
    display: none !important;
  }

  .hero-download-card {
    display: none !important;
  }

  /* Campaign cards on mobile: show first image and then text in all cards */
  .campaign-card {
    display: flex !important;
    flex-direction: column !important;
  }

  .campaign-card .campaign-photo {
    order: 1 !important;
    width: 100% !important;
  }

  .campaign-card .campaign-content {
    order: 2 !important;
    width: 100% !important;
  }

  /* Mobile Drawer Container */
  .panap-mobile-drawer {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 999999;
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.3s ease;
  }

  .panap-mobile-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
  }

  .panap-mobile-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .panap-mobile-drawer.is-open .panap-mobile-backdrop {
    opacity: 1;
  }

  .panap-mobile-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(380px, 86vw);
    background: #ffffff;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
  }

  .panap-mobile-drawer.is-open .panap-mobile-panel {
    transform: translateX(0);
  }

  .panap-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #f8fafc;
  }

  .panap-mobile-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink, #1e293b);
  }

  .panap-mobile-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--ink-2, #334155);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .panap-mobile-close-btn:hover {
    background: rgba(2, 135, 136, 0.08);
    color: var(--teal, #028788);
  }

  .panap-mobile-nav {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    -webkit-overflow-scrolling: touch;
  }

  /* Tree hierarchy navigation */
  .mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .mobile-top-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding-bottom: 6px;
  }

  .mobile-item-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    transition: background-color 0.2s ease;
  }

  .mobile-item-row:hover {
    background: #f1f5f9;
  }

  .mobile-nav-link {
    flex: 1;
    padding: 11px 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink, #1e293b);
    text-decoration: none;
    display: flex;
    align-items: center;
  }

  .mobile-nav-link.is-active {
    color: var(--teal, #028788);
  }

  .mobile-submenu-toggle {
    width: 44px;
    height: 44px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition:
      transform 0.25s ease,
      color 0.2s ease;
  }

  .mobile-submenu-toggle:hover {
    color: var(--teal, #028788);
  }

  .mobile-toggle-chevron {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .mobile-top-item.is-expanded .mobile-toggle-chevron,
  .mobile-submenu-toggle[aria-expanded="true"] .mobile-toggle-chevron {
    transform: rotate(180deg);
  }

  .mobile-sub-menu {
    list-style: none;
    margin: 4px 0 8px 14px;
    padding: 6px 0 6px 14px;
    border-left: 2px solid rgba(2, 135, 136, 0.22);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .mobile-sub-menu[hidden] {
    display: none;
  }

  .mobile-sub-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: #475569;
    transition: all 0.2s ease;
  }

  .mobile-sub-link:hover {
    background: #f1f5f9;
    color: var(--teal, #028788);
  }

  .mobile-sub-link.is-active {
    color: var(--teal, #028788);
    font-weight: 600;
    background: rgba(2, 135, 136, 0.06);
  }

  .mobile-child-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: rgba(2, 135, 136, 0.08);
    color: var(--teal, #028788);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
  }

  .mobile-child-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-child-title {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: #334155;
  }

  .mobile-child-desc {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.3;
  }

  .panap-mobile-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #f8fafc;
  }

  .panap-mobile-donate {
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
  }

  /* Sticky App-Style Bottom Nav */
  .panap-mobile-sticky-bar {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    align-items: center;
    justify-content: space-around;
    z-index: 9990;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .panap-sticky-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    height: 100%;
    color: #64748b;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 500;
    font-family: inherit;
    padding: 4px 0;
    transition:
      color 0.2s ease,
      transform 0.15s ease;
  }

  .panap-sticky-item i {
    font-size: 18px;
    transition: transform 0.2s ease;
  }

  .panap-sticky-item:hover,
  .panap-sticky-item:focus,
  .panap-sticky-item.is-active {
    color: var(--teal, #028788);
  }

  .panap-sticky-item.is-active i {
    transform: scale(1.12);
  }
}

/* ------------------------------------------------------ Post loops */

/* The PANAP Publications and PANAP Updates widgets (inc/widgets/).
   Elementor's own controls own the column count and the gap — they are
   written into the page's generated CSS from the widget's responsive
   `columns` and `gap` controls — so all this file supplies is the grid
   itself, the batch-reveal state, and the button that drives it.

   The cards inside are the site's ordinary .panap-card and .resource-card,
   styled in style.css and assets/css/wp.css. Nothing is restyled here, so an
   Elementor page and a CPT archive cannot drift apart.

   These rules live here rather than in elementor.css because the events
   archive renders the same grid with no Elementor involved, and because in
   the Elementor editor preview of an unsaved page the .panap-elementor-page
   body class is not yet there to match. */

.panap-loop {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}

.panap-loop > .is-hidden {
  display: none;
}

/* A grid item that is also a flex card needs to fill its track, or a short
   card in a tall row floats with its buttons halfway up. */
.panap-loop > .panap-card,
.panap-loop > .resource-card {
  height: 100%;
}

.panap-loop-empty {
  color: var(--gray-700);
  font-style: italic;
  margin: 0;
  text-align: center;
}

.panap-loop-more {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.panap-loop-more .btn {
  border: 0;
  cursor: pointer;
}

@media (max-width: 782px) {
  .panap-loop {
    gap: 18px;
  }
}