/* ABOUTME: Layout styles for the Plumbline theme. */
/* ABOUTME: Site wrappers, content widths, header, footer, and main structure. */

@layer layout {
  .pl-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  }

  .pl-main {
    flex: 1;
  }

  .pl-content-width {
    max-width: var(--pl-width-content);
    margin-inline: auto;
    padding-inline: var(--pl-gutter);
  }

  .pl-wide-width {
    max-width: var(--pl-width-wide);
    margin-inline: auto;
    padding-inline: var(--pl-gutter);
  }

  .pl-full-width {
    max-width: var(--pl-width-full);
    margin-inline: auto;
    padding-inline: var(--pl-gutter);
  }

  /* Site header */
  .pl-site-header {
    position: relative;
    z-index: var(--pl-z-raised);
    padding-block: var(--pl-space-4);
    border-bottom: var(--pl-border-thin) solid var(--pl-color-neutral-200);
    background: var(--pl-color-surface-page);
  }

  .pl-site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pl-space-5);
  }

  .pl-site-header__branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
  }

  .pl-site-header__branding .custom-logo-link {
    display: inline-flex;
    align-items: center;
    line-height: 0;
  }

  .pl-site-header__branding .custom-logo {
    max-width: var(--pl-logo-max-width, 200px);
    height: auto;
    width: auto;
    object-fit: contain;
  }

  .pl-site-header__branding .pl-site-header__title {
    text-decoration: none;
    font-family: var(--pl-font-heading);
    font-size: var(--pl-text-site-title);
    font-weight: var(--pl-weight-bold);
    color: var(--pl-color-neutral-900);
  }

  .pl-site-header__branding .pl-site-header__title:hover {
    color: var(--pl-color-primary);
  }

  .pl-site-header__end {
    display: flex;
    align-items: center;
    gap: var(--pl-space-5);
    margin-left: auto;
  }

  .pl-nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--pl-space-1);
    align-items: center;
  }

  .pl-nav-menu > li {
    position: relative;
    margin: 0;
  }

  .pl-nav-menu > li > a,
  .pl-nav-menu > li > .pl-nav-search {
    text-decoration: none;
    font-size: var(--pl-text-nav);
    font-weight: var(--pl-weight-medium);
    font-family: inherit;
    color: var(--pl-color-neutral-700);
    background: transparent;
    border: none;
    border-radius: var(--pl-radius-md);
    padding: var(--pl-space-2) var(--pl-space-3);
    cursor: pointer;
    transition:
      color var(--pl-duration-fast) var(--pl-easing-default),
      background-color var(--pl-duration-fast) var(--pl-easing-default);
    display: inline-flex;
    align-items: center;
    gap: var(--pl-space-2);
    line-height: 1.25;
  }

  .pl-nav-menu > li > a:hover,
  .pl-nav-menu > li > .pl-nav-search:hover {
    color: var(--pl-color-neutral-900);
    background-color: var(--pl-color-neutral-100);
  }

  /*
   * A focused item paints above its neighbours. Otherwise a later sibling's
   * pill background (the mega toggle beside its link, a hovered or current
   * item) covers part of the focus ring.
   */
  .pl-nav-menu > li > :is(a, button):focus-visible {
    position: relative;
    z-index: 1;
  }

  /* Active section — soft fill (Linear / Vercel pattern; no outline or shadow). */
  .pl-nav-menu > li.current-menu-item > a,
  .pl-nav-menu > li.current-menu-ancestor > a {
    color: var(--pl-color-neutral-900);
    font-weight: var(--pl-weight-medium);
    background-color: var(--pl-color-neutral-100);
  }

  .pl-nav-menu > li.current-menu-item > a:hover,
  .pl-nav-menu > li.current-menu-ancestor > a:hover {
    color: var(--pl-color-neutral-900);
    background-color: var(--pl-color-neutral-100);
  }

  .pl-nav-menu > li.pl-menu-search-item {
    margin-left: var(--pl-space-1);
  }

  .pl-nav-menu > li.pl-menu-search-item > .pl-nav-search {
    padding: var(--pl-space-2);
    color: var(--pl-color-neutral-700);
  }

  .pl-nav-menu > li.pl-menu-search-item > .pl-nav-search:hover {
    color: var(--pl-color-neutral-900);
  }

  .pl-nav-search__icon {
    display: inline-flex;
    flex-shrink: 0;
  }

  .pl-nav-search__icon svg {
    display: block;
  }

  .pl-nav-search__text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .pl-nav-menu > .menu-item-has-children > a::after {
    content: '';
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.1rem);
    margin-left: var(--pl-space-1);
  }

  .pl-nav-menu > li.menu-item-has-children:not(.pl-has-mega) > .sub-menu {
    position: absolute;
    top: calc(100% + var(--pl-space-2));
    left: 0;
    min-width: 12rem;
    margin: 0;
    padding: var(--pl-space-2);
    list-style: none;
    background: var(--pl-color-surface-page);
    border: var(--pl-border-thin) solid var(--pl-color-neutral-200);
    border-radius: var(--pl-radius-md);
    box-shadow: var(--pl-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    transition:
      opacity var(--pl-duration-normal) var(--pl-easing-default),
      transform var(--pl-duration-normal) var(--pl-easing-default),
      visibility var(--pl-duration-normal) var(--pl-easing-default);
    z-index: var(--pl-z-dropdown);
  }

  .pl-nav-menu > li.menu-item-has-children:not(.pl-has-mega):hover > .sub-menu,
  .pl-nav-menu > li.menu-item-has-children:not(.pl-has-mega):focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .pl-nav-menu .sub-menu a {
    display: block;
    padding: var(--pl-space-2) var(--pl-space-3);
    border-radius: var(--pl-radius-sm);
    white-space: nowrap;
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-normal);
    color: var(--pl-color-neutral-900);
    text-decoration: none;
    transition:
      color var(--pl-duration-fast) var(--pl-easing-default),
      background-color var(--pl-duration-fast) var(--pl-easing-default);
  }

  .pl-nav-menu .sub-menu a:hover {
    background: var(--pl-color-neutral-100);
    color: var(--pl-color-neutral-900);
  }

  .pl-nav-menu .sub-menu .current-menu-item > a {
    background: var(--pl-color-neutral-100);
    color: var(--pl-color-neutral-900);
    font-weight: var(--pl-weight-medium);
  }

  .pl-site-header__actions {
    display: none;
    align-items: center;
    gap: var(--pl-space-3);
  }

  .pl-menu-toggle {
    display: none;
    position: relative;
    z-index: calc(var(--pl-z-modal) + 1);
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: var(--pl-border-thin) solid var(--pl-color-neutral-200);
    border-radius: var(--pl-radius-md);
    background: var(--pl-color-surface-page);
    color: var(--pl-color-neutral-900);
    cursor: pointer;
  }

  .pl-menu-toggle:focus-visible {
    outline: var(--pl-focus-ring-width, 3px) solid var(--pl-focus-ring-dark, #0B2B1E);
    outline-offset: var(--pl-focus-ring-offset, 2px);
    box-shadow: 0 0 0 calc(var(--pl-focus-ring-offset, 2px) + var(--pl-focus-ring-width, 3px) + 2px) var(--pl-focus-ring-light, #FFFFFF);
  }

  .pl-menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 1.125rem;
    height: 0.875rem;
  }

  .pl-menu-bar {
    display: block;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition:
      transform var(--pl-duration-normal) var(--pl-easing-default),
      opacity var(--pl-duration-normal) var(--pl-easing-default);
  }

  .pl-menu-toggle[aria-expanded="true"] .pl-menu-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .pl-menu-toggle[aria-expanded="true"] .pl-menu-bar:nth-child(2) {
    opacity: 0;
  }

  .pl-menu-toggle[aria-expanded="true"] .pl-menu-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Site footer */
  .pl-site-footer {
    padding-block: var(--pl-space-7);
    border-top: var(--pl-border-thin) solid var(--pl-color-neutral-200);
    background-color: var(--pl-color-surface-alt);
  }

  .pl-site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pl-space-5);
    flex-wrap: wrap;
  }

  .pl-footer-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--pl-space-4);
  }

  .pl-footer-menu > li {
    margin: 0;
  }

  .pl-footer-menu a {
    text-decoration: none;
    font-size: var(--pl-text-sm);
    color: var(--pl-color-text-secondary);
  }

  .pl-footer-menu a:hover {
    color: var(--pl-color-primary);
  }

  .pl-site-footer__copyright {
    font-size: var(--pl-text-sm);
    color: var(--pl-color-text-secondary);
    margin: 0;
  }

  .pl-footer-areas {
    display: grid;
    gap: var(--pl-space-6);
    padding-block: var(--pl-space-6);
  }

  .pl-footer-areas--cols-1 {
    grid-template-columns: 1fr;
  }

  .pl-footer-areas--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pl-footer-areas--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pl-footer-areas--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pl-footer-area {
    font-size: var(--pl-text-sm);
    color: var(--pl-color-text-secondary);
    line-height: var(--pl-leading-relaxed, 1.6);
  }

  .pl-footer-area :where(h2, h3, h4) {
    margin-block: 0 var(--pl-space-3);
    font-family: var(--pl-font-heading);
    font-size: var(--pl-text-base);
    color: var(--pl-color-neutral-900);
  }

  .pl-footer-area :where(p) {
    margin-block: 0 var(--pl-space-3);
  }

  .pl-footer-area :where(p:last-child) {
    margin-bottom: 0;
  }

  .pl-footer-area :where(a) {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .pl-footer-area :where(a:hover) {
    color: var(--pl-color-primary);
  }

  .pl-footer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pl-space-2);
    list-style: none;
    margin: var(--pl-space-2) 0 0;
    padding: 0;
  }

  .pl-footer-social li {
    margin: 0;
  }

  .pl-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--pl-radius-sm);
    color: var(--pl-color-neutral-700);
    text-decoration: none;
    transition:
      color var(--pl-transition-fast, 0.15s ease),
      background-color var(--pl-transition-fast, 0.15s ease);
  }

  .pl-footer-social a:hover,
  .pl-footer-social a:focus-visible {
    color: var(--pl-color-primary);
    background-color: var(--pl-color-neutral-100);
  }

  .pl-footer-social svg {
    display: block;
    width: 1.125rem;
    height: 1.125rem;
  }

  /* Entry / content */
  .pl-entry__content {
    max-width: var(--pl-width-content);
    margin-inline: auto;
    padding-inline: var(--pl-gutter);
  }

  .pl-entry__content--full-bleed,
  .pl-entry__content:has(> .wp-block-plumbline-hero:first-child),
  .pl-entry__content:has(> .wp-block-plumbline-section:first-child),
  .pl-entry__content:has(> .wp-block-plumbline-card-grid:first-child),
  .pl-entry__content:has(> .wp-block-plumbline-cta:first-child),
  .pl-entry__content:has(> .wp-block-plumbline-split:first-child),
  .pl-entry__content:has(> .wp-block-plumbline-faq:first-child) {
    max-width: none;
    padding-inline: 0;
  }

  .pl-entry__content--full-bleed > :not([class*="wp-block-plumbline-"]) {
    max-width: var(--pl-width-content, 50rem);
    margin-inline: auto;
    padding-inline: var(--pl-gutter, 1.25rem);
  }

  /*
   * Core alignwide / alignfull inside Plumbline sections are neutralized.
   * Section widthPreset is the only width control inside bands.
   */
  .pl-section__inner :where(.alignwide),
  .pl-section__inner :where(.alignfull),
  .pl-cta__inner :where(.alignwide),
  .pl-cta__inner :where(.alignfull),
  .pl-faq__inner :where(.alignwide),
  .pl-faq__inner :where(.alignfull) {
    width: auto;
    max-width: none;
    margin-inline: 0;
  }

  .pl-entry__header {
    margin-bottom: var(--pl-space-6);
  }

  .pl-entry__title {
    margin-bottom: var(--pl-space-3);
  }

  .pl-entry__meta {
    font-size: var(--pl-text-sm);
    color: var(--pl-color-text-secondary);
  }

  /* Archive header base (band layout in archive.css) */
  .pl-archive-header {
    max-width: var(--pl-width-content);
    margin-inline: auto;
    padding-inline: var(--pl-gutter);
    margin-bottom: var(--pl-space-7);
  }

  /* Search form */
  .pl-search-form {
    display: flex;
    align-items: stretch;
    gap: var(--pl-space-2);
    width: 100%;
  }

  .pl-search-form__label {
    flex: 1;
    min-width: 0;
    margin: 0;
  }

  .pl-search-form__field,
  .pl-search-form .search-field {
    width: 100%;
    padding: var(--pl-space-3) var(--pl-space-4);
    /* neutral-500: >= 4.4:1 on white for any primary tint (WCAG 1.4.11 needs 3:1). */
    border: var(--pl-border-thin) solid var(--pl-color-neutral-500);
    border-radius: var(--pl-radius-md);
    background: var(--pl-color-surface-page);
    color: var(--pl-color-text-primary);
    font: inherit;
    line-height: var(--pl-leading-normal);
    transition:
      border-color var(--pl-duration-fast) var(--pl-easing-default),
      box-shadow var(--pl-duration-fast) var(--pl-easing-default);
  }

  /* Shared focus ring: white / dark / white, visible on any surface. */
  .pl-search-form__field:focus-visible,
  .pl-search-form .search-field:focus-visible {
    outline: var(--pl-focus-ring-width, 3px) solid var(--pl-focus-ring-dark, #0B2B1E);
    outline-offset: var(--pl-focus-ring-offset, 2px);
    border-color: var(--pl-color-primary);
    box-shadow: 0 0 0 calc(var(--pl-focus-ring-offset, 2px) + var(--pl-focus-ring-width, 3px) + 2px) var(--pl-focus-ring-light, #FFFFFF);
  }

  .pl-search-form__submit,
  .pl-search-form .search-submit {
    flex-shrink: 0;
    white-space: nowrap;
    background-color: var(--pl-color-primary);
    color: var(--pl-color-text-inverse);
    border-color: var(--pl-color-primary);
  }

  .pl-search-form__submit:hover,
  .pl-search-form .search-submit:hover {
    background-color: var(--pl-color-primary-dark);
    border-color: var(--pl-color-primary-dark);
    color: var(--pl-color-text-inverse);
  }

  /* Search results page */
  .pl-search-results-header {
    text-align: center;
    margin-bottom: var(--pl-space-8);
    overflow-wrap: anywhere;
  }

  .pl-search-results-header .pl-search-form {
    max-width: 36rem;
    margin-inline: auto;
    margin-top: var(--pl-space-5);
  }

  .pl-entry--search {
    max-width: var(--pl-width-content);
    margin-inline: auto;
    padding-inline: var(--pl-gutter);
    padding-block: var(--pl-space-6);
    border-bottom: var(--pl-border-thin) solid var(--pl-color-neutral-200);
    /* Long URLs and unbroken words wrap at 320px, with text spacing too. */
    overflow-wrap: anywhere;
  }

  .pl-entry--search:last-of-type {
    border-bottom: none;
  }

  .pl-search-result__title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pl-space-4);
    margin-bottom: var(--pl-space-2);
  }

  .pl-search-result__title {
    min-width: 0;
    margin: 0;
    font-size: var(--pl-text-xl);
    line-height: var(--pl-leading-tight);
  }

  .pl-search-result__title a {
    color: var(--pl-color-neutral-900);
    text-decoration: none;
  }

  .pl-search-result__title a:hover {
    color: var(--pl-color-primary);
  }

  .pl-search-result__type {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: var(--pl-radius-sm);
    background: var(--pl-color-neutral-100);
    color: var(--pl-color-text-secondary);
    font-size: var(--pl-text-xs);
    font-weight: var(--pl-weight-semibold);
    letter-spacing: var(--pl-tracking-wide);
    text-transform: uppercase;
  }

  .pl-search-result__url {
    margin-bottom: var(--pl-space-1);
    font-size: var(--pl-text-sm);
    color: var(--pl-color-text-secondary);
  }

  .pl-search-result__date {
    margin-bottom: var(--pl-space-3);
    font-size: var(--pl-text-sm);
    color: var(--pl-color-text-secondary);
  }

  .pl-search-result__excerpt {
    font-size: var(--pl-text-base);
    color: var(--pl-color-text-primary);
    line-height: var(--pl-leading-normal);
  }

  .pl-search-result__excerpt p {
    margin-bottom: 0;
  }

  .pl-search-result__excerpt mark,
  .pl-search-result__excerpt .searchwp-highlight,
  .pl-search-result__title mark,
  .pl-search-result__title .searchwp-highlight {
    background: color-mix(in srgb, var(--pl-color-primary) 18%, transparent);
    color: inherit;
    padding: 0 0.1em;
    border-radius: 0.15em;
  }

  /* No results */
  .pl-no-results {
    padding-block: var(--pl-space-9);
    text-align: center;
  }

  /* 404 */
  .pl-404 {
    padding-block: var(--pl-space-8);
  }

  .pl-404 .pl-search-form {
    margin-top: var(--pl-space-5);
  }

  /* Desktop sticky header (setting-controlled) */
  @media (min-width: 48.0625rem) {
    .pl-site-header {
      padding-block: var(--pl-space-4);
    }
  }

  /*
   * Sticky header modes only on viewports taller than 30em (480px). On
   * shorter ones (1280x720 at 400% zoom is 320x180 CSS px; phones in
   * landscape) a pinned header covers a third of the screen or more and can
   * hide the focused element (WCAG 2.4.11), so the header scrolls away with
   * the page. The mobile header below follows the same rule.
   */
  @media (min-width: 48.0625rem) and (min-height: 30.0625em) {
    /* Always sticky: pin header and shrink after scroll */
    body.pl-desktop-header-sticky-always .pl-site-header {
      position: sticky;
      top: 0;
      z-index: var(--pl-z-sticky);
      background: var(--pl-color-surface-page);
      transition:
        padding var(--pl-duration-normal) var(--pl-easing-default),
        box-shadow var(--pl-duration-normal) var(--pl-easing-default);
    }

    body.admin-bar.pl-desktop-header-sticky-always .pl-site-header {
      top: var(--wp-admin--admin-bar--height, 32px);
    }

    body.pl-desktop-header-sticky-always.pl-desktop-header-scrolled .pl-site-header {
      padding-block: var(--pl-space-2);
      box-shadow: var(--pl-shadow-sm);
    }

    body.pl-desktop-header-sticky-always .pl-site-header__branding .custom-logo {
      transition: max-width var(--pl-duration-normal) var(--pl-easing-default);
    }

    body.pl-desktop-header-sticky-always.pl-desktop-header-scrolled .pl-site-header__branding .custom-logo {
      max-width: calc(var(--pl-logo-max-width, 200px) * 0.75);
    }

    /* Scroll-up reveal: sticky header, parked above viewport until scroll-up */
    body.pl-desktop-header-sticky-scroll-up .pl-site-header {
      position: sticky;
      top: calc(-1 * var(--pl-desktop-header-height, 5rem) - 1px);
      z-index: var(--pl-z-sticky);
      background: var(--pl-color-surface-page);
      padding-block: var(--pl-space-2);
      transition:
        padding var(--pl-duration-slow) var(--pl-easing-default),
        top var(--pl-duration-slow) var(--pl-easing-default),
        box-shadow var(--pl-duration-slow) var(--pl-easing-default);
    }

    body.pl-desktop-header-sticky-scroll-up .pl-site-header__branding .custom-logo {
      max-width: calc(var(--pl-logo-max-width, 200px) * 0.75);
      transition: max-width var(--pl-duration-slow) var(--pl-easing-default);
    }

    body.pl-desktop-header-sticky-scroll-up.pl-desktop-header-visible .pl-site-header {
      top: 0;
      box-shadow: var(--pl-shadow-sm);
    }

    body.pl-desktop-header-sticky-scroll-up.pl-desktop-at-top .pl-site-header {
      top: 0;
      padding-block: var(--pl-space-4);
      box-shadow: none;
    }

    body.pl-desktop-header-sticky-scroll-up.pl-desktop-at-top .pl-site-header__branding .custom-logo {
      max-width: var(--pl-logo-max-width, 200px);
    }

    body.admin-bar.pl-desktop-header-sticky-scroll-up .pl-site-header {
      top: calc(-1 * var(--pl-desktop-header-height, 5rem) - 1px + var(--wp-admin--admin-bar--height, 32px));
    }

    body.admin-bar.pl-desktop-header-sticky-scroll-up.pl-desktop-header-visible .pl-site-header,
    body.admin-bar.pl-desktop-header-sticky-scroll-up.pl-desktop-at-top .pl-site-header {
      top: var(--wp-admin--admin-bar--height, 32px);
    }

    @media (prefers-reduced-motion: reduce) {
      body.pl-desktop-header-sticky-scroll-up .pl-site-header,
      body.pl-desktop-header-sticky-scroll-up .pl-site-header__branding .custom-logo {
        transition: none;
      }
    }
  }

  @media (min-width: 48.0625rem) {
    /* Mega menu (3-level nested primary nav) */
    .pl-site-header__nav {
      overflow: visible;
    }

    .pl-main-nav > li.pl-has-mega {
      position: relative;
      overflow: visible;
    }

    .pl-main-nav > li.pl-has-mega > .sub-menu {
      --pl-mega-panel-width: min(36rem, calc(100vw - 2 * var(--pl-gutter)));
      /*
       * Space between the item and the panel, at least the focus ring's extent:
       * a panel flush with the item covered the lower edge of the link's and the
       * toggle's rings. The pointer tunnel below bridges it for hover.
       */
      --pl-mega-panel-gap: calc(var(--pl-focus-ring-extent, 7px) + 1px);
      display: grid;
      grid-template-columns: repeat(3, minmax(9rem, 1fr));
      gap: var(--pl-space-3);
      position: absolute;
      top: calc(100% + var(--pl-mega-panel-gap));
      left: 50%;
      right: auto;
      width: var(--pl-mega-panel-width);
      max-width: var(--pl-mega-panel-width);
      margin: 0;
      padding: var(--pl-space-4);
      background: var(--pl-color-surface-page);
      border: var(--pl-border-thin) solid var(--pl-color-neutral-200);
      border-radius: var(--pl-radius-md);
      box-shadow: var(--pl-shadow-md);
      visibility: hidden;
      opacity: 0;
      pointer-events: none;
      translate: -50% 0.35rem;
      /*
       * visibility is deliberately not transitioned. A transitioned value is
       * still hidden on the frame the panel opens (Tab straight after Enter
       * skipped the panel) and still visible while it fades out (Tab straight
       * after closing landed in a panel about to disappear).
       */
      transition:
        opacity var(--pl-duration-normal) var(--pl-easing-default),
        translate var(--pl-duration-normal) var(--pl-easing-default);
      z-index: var(--pl-z-dropdown);
    }

    /* Pointer tunnel between trigger and panel (margin is not hoverable on the parent li). */
    .pl-main-nav > li.pl-has-mega > .sub-menu::after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 100%;
      left: 0;
      height: var(--pl-mega-panel-gap);
    }

    /*
     * Open only via .pl-is-mega-open, which plumbline-desktop-nav.js sets
     * together with the toggle's aria-expanded. Opening on :hover or
     * :focus-within here would keep a panel open after Escape (WCAG 1.4.13),
     * show it on focus alone (3.2.1), and leave aria-expanded out of step.
     */
    .pl-main-nav .pl-has-mega.pl-is-mega-open > .sub-menu {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      translate: -50% 0;
    }

    /* Link and disclosure button share one pill; the button carries the chevron. */
    .pl-main-nav > li.pl-has-mega:has(> .pl-mega-toggle) {
      display: flex;
      align-items: stretch;
    }

    /* End padding >= the ring's 7px extent, so the toggle's ring never covers the link text. */
    .pl-main-nav > li.pl-has-mega > a:has(+ .pl-mega-toggle) {
      padding-inline-end: var(--pl-space-2);
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }

    .pl-main-nav > li.pl-has-mega > a:has(+ .pl-mega-toggle)::after {
      content: none;
    }

    .pl-mega-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.625rem;
      margin: 0;
      padding: 0 var(--pl-space-2) 0 var(--pl-space-1);
      border: none;
      border-start-start-radius: 0;
      border-start-end-radius: var(--pl-radius-md);
      border-end-end-radius: var(--pl-radius-md);
      border-end-start-radius: 0;
      background: transparent;
      color: var(--pl-color-neutral-700);
      font: inherit;
      cursor: pointer;
      transition:
        color var(--pl-duration-fast) var(--pl-easing-default),
        background-color var(--pl-duration-fast) var(--pl-easing-default);
    }

    .pl-mega-toggle__icon {
      display: block;
      width: 0.45rem;
      height: 0.45rem;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: translateY(-0.1rem) rotate(45deg);
      transition: transform var(--pl-duration-fast) var(--pl-easing-default);
    }

    .pl-mega-toggle[aria-expanded="true"] .pl-mega-toggle__icon {
      transform: translateY(0.1rem) rotate(225deg);
    }

    .pl-mega-toggle:focus-visible {
      outline: var(--pl-focus-ring-width, 3px) solid var(--pl-focus-ring-dark, #0B2B1E);
      outline-offset: var(--pl-focus-ring-offset, 2px);
      box-shadow: 0 0 0 calc(var(--pl-focus-ring-offset, 2px) + var(--pl-focus-ring-width, 3px) + 2px) var(--pl-focus-ring-light, #FFFFFF);
    }

    .pl-main-nav .pl-has-mega > .sub-menu > .pl-mega-column {
      margin: 0;
    }

    .pl-mega-column {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .pl-main-nav .pl-has-mega > .sub-menu > .pl-mega-column > .pl-mega-column-label,
    .pl-main-nav .pl-has-mega > .sub-menu > li.pl-mega-column-label > a {
      display: block;
      font-weight: var(--pl-weight-bold);
      padding: var(--pl-space-1) var(--pl-space-2);
      margin-bottom: var(--pl-space-1);
      line-height: var(--pl-leading-tight);
      white-space: normal;
      border-radius: var(--pl-radius-sm);
      color: var(--pl-color-neutral-900);
      text-decoration: none;
    }

    .pl-main-nav .pl-has-mega > .sub-menu > .pl-mega-column > .pl-mega-column-label {
      cursor: default;
    }

    .pl-main-nav .pl-has-mega > .sub-menu > li.pl-mega-column-label > a:hover,
    .pl-main-nav .pl-has-mega > .sub-menu > li.pl-mega-column-label > a:focus-visible {
      background-color: var(--pl-color-neutral-100);
      color: var(--pl-color-neutral-900);
    }

    .pl-main-nav > li.pl-has-mega .pl-mega-column > .menu-item-has-children > a::after {
      display: none;
    }

    /* visibility: inherit, not visible: column links stay hidden while the panel is closed. */
    .pl-main-nav .pl-has-mega .pl-mega-column > .sub-menu {
      position: static;
      display: flex;
      flex-direction: column;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
      opacity: 1;
      visibility: inherit;
      transform: none;
      border: none;
      box-shadow: none;
      background: transparent;
      min-width: 0;
    }

    .pl-main-nav .pl-has-mega .pl-mega-column > .sub-menu > li {
      margin: 0;
    }

    .pl-main-nav .pl-has-mega .pl-mega-column > .sub-menu a {
      display: block;
      padding: var(--pl-space-1) var(--pl-space-2);
      line-height: var(--pl-leading-tight);
      white-space: normal;
      font-size: var(--pl-text-sm);
      font-weight: var(--pl-weight-normal);
      border-radius: var(--pl-radius-sm);
    }

    .pl-main-nav .pl-has-mega .pl-mega-column > .sub-menu a:hover,
    .pl-main-nav .pl-has-mega .pl-mega-column > .sub-menu a:focus-visible {
      background-color: var(--pl-color-neutral-100);
      color: var(--pl-color-neutral-900);
    }

    .pl-main-nav .pl-has-mega .pl-mega-column > .sub-menu .current-menu-item > a {
      background-color: var(--pl-color-neutral-100);
      color: var(--pl-color-neutral-900);
      font-weight: var(--pl-weight-medium);
    }
  }

  /* Responsive */
  /* Sticky only when taller than 30em, as on desktop above. */
  @media (max-width: 48rem) and (min-height: 30.0625em) {
    .pl-site-header {
      position: sticky;
      top: 0;
      z-index: var(--pl-z-sticky);
      background: var(--pl-color-surface-page);
      transition: transform var(--pl-duration-normal) var(--pl-easing-default);
    }

    body.pl-mobile-header-hidden .pl-site-header {
      transform: translateY(calc(-1 * var(--pl-mobile-header-height, 4rem)));
    }

    body.pl-mobile-header-visible .pl-site-header {
      transform: translateY(0);
      box-shadow: var(--pl-shadow-sm);
    }
  }

  @media (max-width: 48rem) {
    .pl-site-header__inner {
      flex-wrap: nowrap;
    }

    .pl-site-header__nav {
      display: none;
    }

    .pl-site-header__actions {
      display: flex;
    }

    .pl-menu-toggle {
      display: inline-flex;
    }

    .pl-site-footer__inner {
      flex-direction: column;
      align-items: flex-start;
    }

    .pl-footer-areas,
    .pl-footer-areas--cols-2,
    .pl-footer-areas--cols-3,
    .pl-footer-areas--cols-4 {
      grid-template-columns: 1fr;
    }
  }
}

@layer components {
  /* Mobile navigation panel */
  #pl-mobile-nav {
    position: fixed;
    inset: 0;
    z-index: var(--pl-z-modal);
    height: 100%;
    height: 100dvh;
  }

  #pl-mobile-nav:not(.is-open):not(.is-closing) {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  #pl-mobile-nav.is-open,
  #pl-mobile-nav.is-closing {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    overflow: hidden;
  }

  .pl-mobile-overlay {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    width: 100%;
    height: 100%;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: rgba(28, 25, 23, 0);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    opacity: 0;
    pointer-events: none;
    transition:
      background var(--pl-duration-normal) var(--pl-easing-default),
      opacity var(--pl-duration-normal) var(--pl-easing-default),
      backdrop-filter var(--pl-duration-normal) var(--pl-easing-default);
  }

  #pl-mobile-nav.is-open .pl-mobile-overlay {
    background: var(--pl-color-surface-overlay);
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .pl-mobile-panel {
    display: flex;
    flex-direction: column;
    width: min(20rem, 85vw);
    height: 100%;
    max-height: 100dvh;
    min-height: 0;
    background: var(--pl-color-surface-page);
    color: var(--pl-color-text-primary);
    box-shadow: var(--pl-shadow-lg);
    transform: translateX(100%);
    transition: transform var(--pl-duration-slow) var(--pl-easing-default);
    overflow: hidden;
    padding: var(--pl-space-5);
    padding-bottom: max(var(--pl-space-5), env(safe-area-inset-bottom, 0px));
  }

  #pl-mobile-nav.is-open .pl-mobile-panel {
    transform: translateX(0);
  }

  .pl-mobile-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: var(--pl-space-3);
    margin-bottom: var(--pl-space-4);
    padding-bottom: var(--pl-space-4);
    border-bottom: var(--pl-border-thin) solid var(--pl-color-neutral-200);
  }

  .pl-mobile-title {
    display: inline-flex;
    align-items: center;
    gap: var(--pl-space-2);
    font-family: var(--pl-font-heading);
    font-size: var(--pl-text-lg);
    font-weight: var(--pl-weight-bold);
  }

  .pl-mobile-favicon {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
  }

  .pl-mobile-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--pl-radius-md);
    background: transparent;
    color: var(--pl-color-neutral-700);
    font-size: var(--pl-text-2xl);
    line-height: 1;
    cursor: pointer;
  }

  .pl-mobile-close:focus-visible {
    outline: var(--pl-focus-ring-width, 3px) solid var(--pl-focus-ring-dark, #0B2B1E);
    outline-offset: var(--pl-focus-ring-offset, 2px);
    box-shadow: 0 0 0 calc(var(--pl-focus-ring-offset, 2px) + var(--pl-focus-ring-width, 3px) + 2px) var(--pl-focus-ring-light, #FFFFFF);
  }

  /*
   * The list scrolls, so it clips anything past its padding box. Inline and
   * top padding leave room for the focus ring on edge-to-edge items; the
   * negative margins keep the items where they were.
   */
  .pl-mobile-menu {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    list-style: none;
    margin: calc(-1 * var(--pl-space-2)) calc(-1 * var(--pl-space-2)) 0;
    padding: var(--pl-space-2);
    padding-bottom: var(--pl-space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .pl-mobile-menu > li {
    position: relative;
    margin: 0;
  }

  .pl-mobile-menu__trigger-row {
    display: flex;
    align-items: stretch;
    min-height: 2.75rem;
  }

  .pl-mobile-menu > li > a,
  .pl-mobile-menu > li > .pl-nav-search,
  .pl-mobile-menu__trigger-row > a,
  .pl-mobile-menu__trigger-row > .pl-mega-column-label {
    display: flex;
    align-items: center;
    flex: 1;
    min-height: 2.75rem;
    box-sizing: border-box;
    padding: 0.625rem 0.75rem;
    margin: 0;
    border: none;
    border-radius: var(--pl-radius-md);
    text-decoration: none;
    font-size: var(--pl-text-base);
    font-weight: var(--pl-weight-medium);
    font-family: inherit;
    line-height: 1.25;
    color: var(--pl-color-neutral-900);
    background: transparent;
    cursor: pointer;
  }

  .pl-mobile-menu > li.menu-item-has-children > a {
    padding-right: 0.75rem;
  }

  .pl-mobile-menu__trigger-row > .pl-mega-column-label,
  .pl-mobile-menu__trigger-row > .pl-mobile-menu__label {
    cursor: default;
    font-weight: var(--pl-weight-bold);
  }

  .pl-mobile-menu > li.current-menu-item > a,
  .pl-mobile-menu > li.current-menu-ancestor > a,
  .pl-mobile-menu > li.current-menu-item > .pl-nav-search,
  .pl-mobile-menu > li.current-menu-ancestor > .pl-nav-search {
    background: var(--pl-color-neutral-100);
    color: var(--pl-color-neutral-900);
  }

  .pl-mobile-menu > li.pl-menu-search-item > .pl-nav-search {
    display: inline-flex;
    align-items: center;
    gap: var(--pl-space-2);
    width: 100%;
    text-align: left;
  }

  .pl-mobile-menu > li.pl-menu-search-item .pl-nav-search__text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /*
   * Collapsed submenus are visibility: hidden, not just clipped and
   * transparent, so their links leave the Tab order and the accessibility
   * tree. Visibility is not transitioned: it flips as the clip does.
   */
  .pl-mobile-menu .sub-menu {
    display: flex;
    flex-direction: column;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0 0 0.25rem 1rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
      max-height var(--pl-duration-normal) var(--pl-easing-default),
      opacity var(--pl-duration-normal) var(--pl-easing-default);
  }

  /* inherit, not visible: a submenu left open inside a collapsed parent stays hidden. */
  .pl-mobile-menu .sub-menu.is-open {
    max-height: none;
    overflow: visible;
    opacity: 1;
    visibility: inherit;
  }

  .pl-mobile-menu .sub-menu > li {
    margin: 0;
    border: none;
  }

  .pl-mobile-menu .sub-menu a {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-normal);
    color: var(--pl-color-neutral-700);
    text-decoration: none;
    padding: 0.25rem 0;
    transition: color var(--pl-duration-fast) var(--pl-easing-default);
  }

  .pl-submenu-toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--pl-radius-md);
    background: transparent;
    color: var(--pl-color-neutral-700);
    cursor: pointer;
  }

  .pl-submenu-toggle:focus-visible {
    outline: var(--pl-focus-ring-width, 3px) solid var(--pl-focus-ring-dark, #0B2B1E);
    outline-offset: var(--pl-focus-ring-offset, 2px);
    box-shadow: 0 0 0 calc(var(--pl-focus-ring-offset, 2px) + var(--pl-focus-ring-width, 3px) + 2px) var(--pl-focus-ring-light, #FFFFFF);
  }

  .pl-submenu-caret {
    position: relative;
    display: block;
    width: 0.875rem;
    height: 0.875rem;
    transition: transform var(--pl-duration-fast) var(--pl-easing-default);
  }

  .pl-submenu-caret::before,
  .pl-submenu-caret::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--pl-duration-fast) var(--pl-easing-default);
  }

  .pl-submenu-caret::before {
    width: 0.875rem;
    height: 2px;
    transform: translate(-50%, -50%);
  }

  .pl-submenu-caret::after {
    width: 2px;
    height: 0.875rem;
    transform: translate(-50%, -50%);
  }

  .pl-submenu-toggle[aria-expanded="true"] .pl-submenu-caret::after {
    transform: translate(-50%, -50%) scaleY(0);
  }

  .pl-mobile-menu .sub-menu a:hover,
  .pl-mobile-menu .sub-menu .current-menu-item > a {
    color: var(--pl-color-neutral-900);
    text-decoration: none;
  }

  .pl-mobile-search {
    margin-bottom: var(--pl-space-5);
  }

  .pl-mobile-search__trigger {
    display: flex;
    align-items: center;
    gap: var(--pl-space-2);
    width: 100%;
    padding: var(--pl-space-3);
    border: var(--pl-border-thin) solid var(--pl-color-neutral-200);
    border-radius: var(--pl-radius-md);
    background: var(--pl-color-surface-alt);
    color: var(--pl-color-text-secondary);
    font: inherit;
    cursor: pointer;
    text-align: left;
  }

  .pl-inline-search-form {
    display: none;
    margin-top: var(--pl-space-3);
  }

  .pl-inline-search-form.is-visible {
    display: block;
  }

  .pl-inline-search-form label {
    display: block;
    margin-bottom: var(--pl-space-2);
    font-size: var(--pl-text-sm);
    font-weight: var(--pl-weight-medium);
  }

  .pl-inline-search-form .search-field {
    width: 100%;
    padding: var(--pl-space-3);
    border: var(--pl-border-thin) solid var(--pl-color-neutral-200);
    border-radius: var(--pl-radius-md);
    font: inherit;
  }

  /* Modal */
  /*
   * The overlay scrolls when the dialog is taller than the viewport (400% zoom:
   * 320x180 CSS px); the page behind is scroll-locked, so without this the
   * search field sat below the screen, unreachable.
   */
  .pl-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--pl-z-modal) + 10);
    display: none;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-padding-block: var(--pl-space-4);
    padding: clamp(var(--pl-space-5), 8vh, var(--pl-space-9)) var(--pl-space-5);
    background: var(--pl-color-surface-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .pl-modal.is-open {
    display: flex;
  }

  .pl-modal__dialog {
    width: min(100%, 40rem);
    background: var(--pl-color-surface-page);
    border: var(--pl-border-thin) solid var(--pl-color-neutral-200);
    border-radius: var(--pl-radius-lg);
    box-shadow: var(--pl-shadow-lg);
    padding: var(--pl-space-6);
  }

  .pl-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pl-space-3);
    margin-bottom: var(--pl-space-5);
    padding-bottom: var(--pl-space-4);
    border-bottom: var(--pl-border-thin) solid var(--pl-color-neutral-200);
  }

  .pl-modal__title {
    margin: 0;
    font-size: var(--pl-text-xl);
    font-weight: var(--pl-weight-semibold);
    color: var(--pl-color-neutral-900);
  }

  .pl-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: var(--pl-radius-md);
    background: transparent;
    color: var(--pl-color-neutral-700);
    font-size: var(--pl-text-2xl);
    line-height: 1;
    cursor: pointer;
    transition:
      color var(--pl-duration-fast) var(--pl-easing-default),
      background-color var(--pl-duration-fast) var(--pl-easing-default);
  }

  .pl-modal__close:hover {
    color: var(--pl-color-neutral-900);
    background: var(--pl-color-neutral-100);
  }

  .pl-modal__close:focus-visible {
    outline: var(--pl-focus-ring-width, 3px) solid var(--pl-focus-ring-dark, #0B2B1E);
    outline-offset: var(--pl-focus-ring-offset, 2px);
    box-shadow: 0 0 0 calc(var(--pl-focus-ring-offset, 2px) + var(--pl-focus-ring-width, 3px) + 2px) var(--pl-focus-ring-light, #FFFFFF);
  }

  .pl-modal .pl-search-form {
    gap: var(--pl-space-3);
  }

  .pl-modal .pl-search-form__field {
    min-height: 3rem;
  }

  body.pl-modal-open,
  body.pl-mobile-nav-open {
    overflow: hidden;
  }

  html.pl-mobile-nav-open,
  body.pl-mobile-nav-open {
    height: 100%;
    overscroll-behavior: none;
  }
}

/*
 * Unlayered: main takes focus programmatically (skip link, tabindex="-1"),
 * never by Tab, so it shows no ring — including one from a global
 * :focus-visible rule that would otherwise outline the whole page.
 */
.pl-main[tabindex="-1"]:focus,
.pl-main[tabindex="-1"]:focus-visible {
  outline: none;
  box-shadow: none;
}

/*
 * Sticky header offset for focus and #anchor scrolling (WCAG 2.4.11): the
 * browser brings a focused element or anchor target into view below the
 * header, not under it (Shift+Tab upward reveals the scroll-up header).
 * Heights come from --pl-*-header-height, measured in plumbline-mobile-menu.js.
 * Unlayered and qualified by body class so it beats core's admin-bar.css
 * (html { scroll-padding-top: <bar height> }). Viewports up to 30em tall
 * get none: the header is not sticky there.
 */
@media (max-width: 48rem) and (min-height: 30.0625em) {
  html:has(> body) {
    scroll-padding-top: calc(var(--pl-mobile-header-height, 4rem) + var(--pl-space-4));
  }
}

@media (min-width: 48.0625rem) and (min-height: 30.0625em) {
  html:has(> body.pl-desktop-header-sticky-always),
  html:has(> body.pl-desktop-header-sticky-scroll-up) {
    scroll-padding-top: calc(var(--pl-desktop-header-height, 5rem) + var(--pl-space-4));
  }

  html:has(> body.admin-bar.pl-desktop-header-sticky-always),
  html:has(> body.admin-bar.pl-desktop-header-sticky-scroll-up) {
    scroll-padding-top: calc(var(--pl-desktop-header-height, 5rem) + var(--wp-admin--admin-bar--height, 32px) + var(--pl-space-4));
  }
}

/* Unlayered: beats theme.json global element.link styles from child themes. */
.pl-site-header .pl-nav-menu > li > a,
.pl-site-header .pl-nav-menu > li > .pl-nav-search {
  text-decoration: none;
}

.pl-site-header .pl-nav-menu > li > a,
.pl-site-header .pl-nav-menu > li.pl-menu-search-item > .pl-nav-search {
  color: var(--pl-color-neutral-700);
}

.pl-site-header .pl-nav-menu > li > a:hover,
.pl-site-header .pl-nav-menu > li > .pl-nav-search:hover,
.pl-site-header .pl-nav-menu > li.menu-item-has-children:hover > a,
.pl-site-header .pl-nav-menu > li.menu-item-has-children:focus-within > a,
.pl-site-header .pl-nav-menu > li.pl-is-mega-open > a,
.pl-site-header .pl-nav-menu > li.menu-item-has-children:hover > .pl-mega-toggle,
.pl-site-header .pl-nav-menu > li.menu-item-has-children:focus-within > .pl-mega-toggle,
.pl-site-header .pl-nav-menu > li.pl-is-mega-open > .pl-mega-toggle {
  color: var(--pl-color-neutral-900);
  background-color: var(--pl-color-neutral-100);
}

.pl-site-header .pl-nav-menu > li.current-menu-item > a,
.pl-site-header .pl-nav-menu > li.current-menu-ancestor > a,
.pl-site-header .pl-nav-menu > li.current-menu-item > .pl-mega-toggle,
.pl-site-header .pl-nav-menu > li.current-menu-ancestor > .pl-mega-toggle {
  color: var(--pl-color-neutral-900);
  font-weight: var(--pl-weight-medium);
  background-color: var(--pl-color-neutral-100);
}

.pl-site-header .pl-nav-menu .sub-menu a {
  color: var(--pl-color-neutral-900);
  text-decoration: none;
}

.pl-site-header .pl-nav-menu .sub-menu a:hover,
.pl-site-header .pl-nav-menu .sub-menu .current-menu-item > a {
  color: var(--pl-color-neutral-900);
  background-color: var(--pl-color-neutral-100);
  text-decoration: none;
}

.pl-mobile-menu > li > a,
.pl-mobile-menu__trigger-row > a,
.pl-mobile-menu > li > .pl-nav-search {
  color: var(--pl-color-neutral-900);
  text-decoration: none;
}

.pl-mobile-menu .sub-menu a {
  color: var(--pl-color-neutral-700);
  text-decoration: none;
}

.pl-mobile-menu .sub-menu a:hover,
.pl-mobile-menu .sub-menu .current-menu-item > a {
  color: var(--pl-color-neutral-900);
  text-decoration: none;
}

/* Unlayered: beats WP block library + theme.json button/heading defaults. */
.wp-block-button:not(.is-style-secondary):not(.is-style-outline):not(.is-style-text-link) .wp-block-button__link,
.wp-block-button.is-style-primary .wp-block-button__link {
  background-color: var(--pl-color-primary);
  color: var(--pl-color-text-inverse);
  border: var(--pl-border-medium) solid var(--pl-color-primary);
}

.wp-block-button:not(.is-style-secondary):not(.is-style-outline):not(.is-style-text-link) .wp-block-button__link:hover,
.wp-block-button.is-style-primary .wp-block-button__link:hover {
  background-color: var(--pl-color-primary-dark);
  border-color: var(--pl-color-primary-dark);
  color: var(--pl-color-text-inverse);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--pl-color-primary);
  border: var(--pl-border-medium) solid var(--pl-color-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--pl-color-primary);
  color: var(--pl-color-text-inverse);
  border-color: var(--pl-color-primary);
}

.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: var(--pl-color-button-secondary-bg);
  color: var(--pl-color-button-secondary-text);
  border: var(--pl-border-thin) solid var(--pl-color-button-secondary-border);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background-color: var(--pl-color-button-secondary-bg-hover);
  color: var(--pl-color-button-secondary-text);
}

.wp-block-button.is-style-text-link .wp-block-button__link {
  background-color: transparent;
  color: var(--pl-color-text-link);
  border-color: transparent;
  border-radius: 0;
  padding: 0;
  text-decoration-line: underline;
  text-decoration-color: var(--pl-link-underline-color);
  text-decoration-thickness: var(--pl-link-underline-thickness);
  text-underline-offset: var(--pl-link-underline-offset);
  text-decoration-skip-ink: auto;
}

.wp-block-button.is-style-text-link .wp-block-button__link:hover {
  color: var(--pl-color-text-link-hover);
  background-color: transparent;
  text-decoration-color: var(--pl-link-underline-color-hover);
  text-decoration-thickness: var(--pl-link-underline-thickness-hover);
}

.pl-cta--style-accent .wp-block-button:not(.is-style-outline):not(.is-style-text-link) .wp-block-button__link,
.pl-cta--style-dark .wp-block-button:not(.is-style-outline):not(.is-style-text-link) .wp-block-button__link,
.pl-split--style-accent .wp-block-button:not(.is-style-outline):not(.is-style-text-link) .wp-block-button__link,
.pl-split--style-dark .wp-block-button:not(.is-style-outline):not(.is-style-text-link) .wp-block-button__link {
  background-color: var(--pl-color-surface-page);
  color: var(--pl-color-primary-dark);
  border-color: var(--pl-color-surface-page);
}

.pl-cta--style-accent .wp-block-button:not(.is-style-outline):not(.is-style-text-link) .wp-block-button__link:hover,
.pl-cta--style-dark .wp-block-button:not(.is-style-outline):not(.is-style-text-link) .wp-block-button__link:hover,
.pl-split--style-accent .wp-block-button:not(.is-style-outline):not(.is-style-text-link) .wp-block-button__link:hover,
.pl-split--style-dark .wp-block-button:not(.is-style-outline):not(.is-style-text-link) .wp-block-button__link:hover {
  background-color: var(--pl-color-neutral-100);
  color: var(--pl-color-primary-darker);
  border-color: var(--pl-color-neutral-100);
}

/*
 * Unlayered: beat base link styles and WP global styles in the footer credit line.
 * The links share the line's text color, so the underline is what marks them
 * as links (WCAG 1.4.1). Hover and focus thicken it.
 */
.pl-site-footer__copyright a:is(:link, :visited) {
  color: var(--pl-color-text-secondary);
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: var(--pl-link-underline-thickness);
  text-underline-offset: var(--pl-link-underline-offset);
  transition: color var(--pl-transition-fast, 0.15s ease);
}

.pl-site-footer__copyright a:is(:hover, :focus-visible) {
  color: var(--pl-color-primary);
  text-decoration-line: underline;
  text-decoration-thickness: var(--pl-link-underline-thickness-hover);
}