/* 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);
  }

  /* 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: 2px solid var(--pl-color-primary);
    outline-offset: 2px;
  }

  .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);
    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-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);
  }

  .pl-search-form__field:focus,
  .pl-search-form .search-field:focus {
    outline: none;
    border-color: var(--pl-color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pl-color-primary) 20%, transparent);
  }

  .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);
  }

  .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);
  }

  .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 {
    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);
  }

  .pl-search-result__url a {
    color: var(--pl-color-text-secondary);
    text-decoration: none;
  }

  .pl-search-result__url a:hover {
    color: var(--pl-color-primary);
    text-decoration: underline;
  }

  .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 {
    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;
  }

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

    /* 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;
      }
    }

    /* 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)));
      display: grid;
      grid-template-columns: repeat(3, minmax(9rem, 1fr));
      gap: var(--pl-space-3);
      position: absolute;
      top: 100%;
      left: 50%;
      right: auto;
      width: var(--pl-mega-panel-width);
      max-width: var(--pl-mega-panel-width);
      margin: 0;
      padding: var(--pl-space-4);
      padding-top: calc(var(--pl-space-4) + var(--pl-space-2));
      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;
      transition:
        opacity var(--pl-duration-normal) var(--pl-easing-default),
        visibility 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-space-2);
    }

    .pl-main-nav .pl-has-mega:is(:hover, :focus-within, .pl-is-mega-open) > .sub-menu {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      translate: -50% 0;
    }

    .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;
    }

    .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: visible;
      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 */
  @media (max-width: 48rem) {
    .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);
    }

    .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: 2px solid var(--pl-color-primary);
    outline-offset: 2px;
  }

  .pl-mobile-menu {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    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;
  }

  .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;
    transition:
      max-height var(--pl-duration-normal) var(--pl-easing-default),
      opacity var(--pl-duration-normal) var(--pl-easing-default);
  }

  .pl-mobile-menu .sub-menu.is-open {
    max-height: none;
    overflow: visible;
    opacity: 1;
  }

  .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 {
    outline: none;
  }

  .pl-submenu-toggle:focus-visible {
    outline: var(--pl-border-medium) solid var(--pl-color-primary);
    outline-offset: -2px;
  }

  .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 */
  .pl-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--pl-z-modal) + 10);
    display: none;
    align-items: flex-start;
    justify-content: center;
    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: 2px solid var(--pl-color-primary);
    outline-offset: 2px;
  }

  .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: 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 {
  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 {
  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. */
.pl-site-footer__copyright a:is(:link, :visited) {
  color: var(--pl-color-text-secondary);
  text-decoration: none;
  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: none;
}