/* ==========================================================================
   Texium Solutions — Header
   Consumes design tokens from theme.css only. No new raw values here.
   ========================================================================== */

.texium-header {
  position: sticky;
  top: 0;
  z-index: var(--texium-z-header);
  width: 100%;
}

/* The WordPress admin bar is fixed over the top of the page for logged-in
   users, so the sticky header has to start below it. */

body.admin-bar .texium-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .texium-header {
    top: 46px;
  }
}

.texium-header--static {
  position: static;
}

.texium-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--texium-space-md);
  transition:
    box-shadow var(--texium-transition-normal),
    background-color var(--texium-transition-normal);
}

.texium-header__start {
  display: flex;
  align-items: center;
  gap: var(--texium-space-2xl);
  min-width: 0;
}

/* Layout: boxed — floating glass bar inset from the viewport edges.
   Shadow lives on the inner card since it's the visible surface. */

.texium-header--boxed {
  padding-block: var(--texium-space-sm);
}

.texium-header--boxed .texium-header__inner {
  padding: var(--texium-space-xs) var(--texium-space-md);
  min-height: 3.5rem;
  background: var(--texium-glass-background);
  border: 1px solid var(--texium-glass-border);
  backdrop-filter: blur(var(--texium-glass-blur));
  -webkit-backdrop-filter: blur(var(--texium-glass-blur));
  border-radius: var(--texium-radius-xl);
}

.texium-header--boxed.is-scrolled .texium-header__inner {
  padding-right: 6px;
}

/* Layout: full width — standard edge-to-edge sticky bar. */

.texium-header--full-width {
  background: var(--texium-background);
  transition:
    background-color var(--texium-transition-normal),
    border-color var(--texium-transition-normal),
    backdrop-filter var(--texium-transition-normal);
}

.texium-header--full-width .texium-header__inner {
  padding-block: var(--texium-space-xs);
  min-height: 3.25rem;
  /* Overrides .texium-container's shared right padding-inline for the
     header specifically, so the CTA button sits closer to the edge. */
  padding-right: 8px;
}

/* Scrolled: the bar keeps its normal full-width shape (no pill morph)
   but its background becomes frosted glass, same blur/tint tokens as
   the boxed layout's floating pill. */

.texium-header--full-width.is-scrolled {
  background: var(--texium-glass-background);
  backdrop-filter: blur(var(--texium-glass-blur));
  -webkit-backdrop-filter: blur(var(--texium-glass-blur));
}

@media (prefers-reduced-motion: reduce) {
  .texium-header--full-width .texium-header__inner {
    transition-duration: 1ms;
  }
}

/* Boxed layout already floats; scrolled just deepens its shadow. */

/* Logo */

.texium-logo {
  display: flex;
  align-items: center;
}

.texium-logo img {
  max-height: 2.75rem;
  width: auto;
}

.texium-logo__text {
  font-family: var(--texium-font-heading);
  font-size: var(--texium-font-size-lg);
  font-weight: var(--texium-weight-semibold);
  color: var(--texium-heading);
  text-decoration: none;
  letter-spacing: var(--texium-tracking-tight);
}

/* Primary nav (also styles secondary nav — same visual language) */

.texium-nav {
  display: none;
}

.texium-nav--secondary .texium-nav__list {
  gap: var(--texium-space-md);
}

.texium-nav__list {
  display: flex;
  align-items: center;
  gap: var(--texium-space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.texium-nav__item {
  position: relative;
}

.texium-nav__link {
  display: inline-flex;
  align-items: center;
  font-size: var(--texium-font-size-sm);
  font-weight: var(--texium-weight-semibold);
  color: #000;
  text-decoration: none;
  padding-block: var(--texium-space-xs);
  transition: color var(--texium-transition-fast);
}

:root[data-theme='dark'] .texium-nav__link {
  color: var(--texium-text);
}

.texium-nav__link:hover,
.texium-nav__item.current-menu-item > .texium-nav__link {
  color: var(--texium-primary);
}

.texium-nav__link:focus-visible {
  outline: 2px solid var(--texium-accent);
  outline-offset: 4px;
  border-radius: var(--texium-radius-sm);
}

/* Submenu (dropdown) */

.texium-nav__item--has-children > .texium-nav__link::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  margin-left: var(--texium-space-xs);
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  /* Only two borders are drawn, so the visible mark is the lower half of
     a rotated square: its optical centre sits a quarter of the square's
     diagonal (0.4rem x root(2) / 4 ~= 2.26px) below the box centre. Shifting
     by exactly that — and by the same amount the other way when flipped —
     keeps both the down and up states on one optical line. */
  transform: translateY(-0.16em) rotate(45deg);
  transition: transform var(--texium-transition-fast);
}

.texium-nav__item--has-children:hover > .texium-nav__link::after,
.texium-nav__item--has-children:focus-within > .texium-nav__link::after {
  transform: translateY(0.16em) rotate(225deg);
}

.texium-nav__item .sub-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 8px);
  /* Offset from the <li>, which ends above the bar's own bottom edge, so
     this is larger than the 16px the JS-positioned panels use in order to
     land every dropdown the same distance below the bar. */
  margin-top: calc(var(--texium-space-lg) + 4px);
  min-width: 220px;
  list-style: none;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
  padding: var(--texium-space-xs);
  background: var(--texium-glass-background);
  border: 1px solid var(--texium-glass-border);
  backdrop-filter: blur(var(--texium-glass-blur));
  -webkit-backdrop-filter: blur(var(--texium-glass-blur));
  border-radius: var(--texium-radius-md);
  box-shadow: var(--texium-shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--texium-transition-normal),
    transform var(--texium-transition-normal),
    visibility var(--texium-transition-normal);
}

/* Invisible bridge closing the gap between the link and the dropdown,
   attached to the <li> (always present, regardless of the dropdown's
   own visibility) so the pointer never leaves a hoverable area while
   moving from the link down into the menu. */

.texium-nav__item--has-children::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--texium-space-lg);
}

.texium-nav__item--has-children:hover .sub-menu,
.texium-nav__item--has-children:focus-within .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.texium-nav__item .sub-menu .texium-nav__link {
  display: block;
  padding: 10px var(--texium-space-xs);
  border-radius: var(--texium-radius-sm);
}

.texium-nav__item .sub-menu .texium-nav__link:hover {
  background: var(--texium-background-soft);
}

/* ==========================================================================
   About Us mega menu — compact 2-part panel: nav list (left, ~38%) +
   one featured "About Texium" card (right, ~62%). Rendered by
   texium_get_about_megamenu_panel_html() (inc/navigation.php) as a
   sibling of the About Us link inside its <li>. Same position:fixed +
   JS-measured-top architecture as the Services/Resources panels (see
   their own comment blocks for why fixed rather than absolute), so all
   three mega menus behave identically and stay visually consistent.
   ========================================================================== */

.texium-megamenu {
  position: fixed;
  top: 0;
  left: 38%;
  z-index: var(--texium-z-overlay);
  display: grid;
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr);
  grid-template-rows: 1fr;
  align-items: stretch;
  gap: 20px;
  width: calc(100% - 2 * var(--texium-container-padding));
  max-width: 680px;
  max-height: 320px;
  padding: 10px;
  background: var(--texium-surface);
  border: 1px solid var(--texium-megacard-border);
  border-radius: 18px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease;
}

.texium-nav__item--mega.is-open .texium-megamenu,
html:not(.texium-js) .texium-nav__item--mega:hover .texium-megamenu,
html:not(.texium-js) .texium-nav__item--mega:focus-within .texium-megamenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

html:not(.texium-js) .texium-megamenu {
  top: 6rem;
}

.texium-nav__item--mega.is-open > .texium-nav__link {
  color: var(--texium-megacard-blue);
}

.texium-nav__item--mega.is-open > .texium-nav__link::after {
  transform: translateY(0.16em) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  .texium-megamenu {
    transition-duration: 1ms;
  }
}

.texium-megamenu a:focus-visible {
  outline: 2px solid var(--texium-accent);
  outline-offset: 2px;
  border-radius: var(--texium-radius-sm);
}

/* ---- Left: nav list (~38%) ---- */

.texium-megamenu__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.texium-megamenu__nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 180ms ease;
}

/* ---- Accent palette ----
   Same 4-accent system as the Sub-Services Grid widget (icon color +
   tint cycle by position: blue/green/purple/orange), so "About Us",
   "Strategic Partners" and "Diversity, Equity & Inclusion" each read
   as their own distinct item rather than three identical blue rows. */

.texium-megamenu__nav-item--accent-0 {
  --texium-megamenu-accent: var(--texium-megacard-blue);
  --texium-megamenu-accent-tint: var(--texium-megacard-soft-blue);
}

.texium-megamenu__nav-item--accent-1 {
  --texium-megamenu-accent: #1F9D6B;
  --texium-megamenu-accent-tint: #E7F7EF;
}

.texium-megamenu__nav-item--accent-2 {
  --texium-megamenu-accent: #7B4FD1;
  --texium-megamenu-accent-tint: #F1ECFC;
}

.texium-megamenu__nav-item--accent-3 {
  --texium-megamenu-accent: #E06A2C;
  --texium-megamenu-accent-tint: #FDEEE4;
}

.texium-megamenu__nav-item:hover {
  background: var(--texium-megamenu-accent-tint, var(--texium-megacard-soft-blue));
}

.texium-megamenu__nav-item.is-active {
  background: var(--texium-megamenu-accent-tint, var(--texium-megacard-soft-blue));
  box-shadow: inset 0 0 0 1px var(--texium-megacard-border);
}

.texium-megamenu__nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--texium-megamenu-accent-tint, var(--texium-megacard-soft-blue));
  color: var(--texium-megamenu-accent, var(--texium-megacard-blue));
}

.texium-megamenu__nav-icon svg {
  width: 18px;
  height: 18px;
}

.texium-megamenu__nav-item.is-active .texium-megamenu__nav-icon {
  background: var(--texium-megacard-white);
}

.texium-megamenu__nav-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.texium-megamenu__nav-title {
  font-family: var(--texium-font-heading);
  font-size: 0.875rem;
  font-weight: var(--texium-weight-semibold);
  line-height: 1.3;
  color: var(--texium-megacard-navy);
  transition: color 180ms ease;
}

.texium-megamenu__nav-item.is-active .texium-megamenu__nav-title {
  color: var(--texium-megamenu-accent, var(--texium-megacard-blue));
}

.texium-megamenu__nav-desc {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--texium-megacard-desc);
}

.texium-megamenu__nav-chev {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--texium-megacard-desc);
}

.texium-megamenu__nav-chev svg {
  width: 16px;
  height: 16px;
}

.texium-megamenu__nav-item.is-active .texium-megamenu__nav-chev {
  color: var(--texium-megamenu-accent, var(--texium-megacard-blue));
}

/* ---- Right: image-only feature card ----
   Just the image fills the column; on hover/focus it blurs + darkens
   and the eyebrow/heading/desc/CTA fade in on top of it. */

.texium-megamenu__feature {
  display: block;
  position: relative;
  height: 100%;
  min-width: 0;
  border: 1px solid var(--texium-megacard-border);
  border-radius: 16px;
  overflow: hidden;
}

.texium-megamenu__feature-media {
  display: block;
  position: absolute;
  inset: 0;
}

.texium-megamenu__feature-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 220ms ease, transform 220ms ease;
}

.texium-megamenu__feature:hover .texium-megamenu__feature-media img,
.texium-megamenu__feature:focus-within .texium-megamenu__feature-media img {
  filter: blur(3px) brightness(0.55);
  transform: scale(1.04);
}

.texium-megamenu__feature-content {
  display: flex;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  gap: 8px;
  padding: 28px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.texium-megamenu__feature:hover .texium-megamenu__feature-content,
.texium-megamenu__feature:focus-within .texium-megamenu__feature-content {
  opacity: 1;
  transform: translateY(0);
}

.texium-megamenu__feature-eyebrow {
  font-size: 0.625rem;
  font-weight: var(--texium-weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texium-megacard-white);
}

.texium-megamenu__feature-heading {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-family: var(--texium-font-heading);
  font-size: 1.0625rem;
  font-weight: var(--texium-weight-bold);
  line-height: 1.25;
  color: var(--texium-megacard-white);
}

.texium-megamenu__feature-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}

.texium-megamenu__feature-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  margin-top: 4px;
  min-height: 40px;
  padding: 9px 16px;
  font-size: 0.75rem;
  font-weight: var(--texium-weight-semibold);
  color: var(--texium-megacard-navy);
  background: var(--texium-megacard-white);
  border-radius: var(--texium-radius-pill);
  text-decoration: none;
  transition: background-color 180ms ease;
}

.texium-megamenu__feature-cta:hover,
.texium-megamenu__feature-cta:focus-visible {
  background: var(--texium-megacard-soft-blue);
  text-decoration: none;
}

.texium-megamenu__feature-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 180ms ease;
}

.texium-megamenu__feature-cta:hover svg,
.texium-megamenu__feature-cta:focus-visible svg {
  transform: translateX(3px);
}

/* ---- Tablet ---- */

@media (max-width: 1199px) {
  .texium-megamenu {
    grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    gap: 14px;
    padding: 10px;
  }

  .texium-megamenu__nav-desc {
    display: none;
  }

  .texium-megamenu__feature-content {
    padding: 20px;
  }

  .texium-megamenu__feature-desc {
    display: none;
  }
}

/* ---- Mobile drawer ----
   Below the desktop nav's breakpoint the panel never renders; About Us
   falls back to its real WP sub-menu items rendered as a plain nested
   list (the walker only diverts rendering when texium_megamenu is
   passed, which the mobile drawer's wp_nav_menu() call doesn't do), so
   theme.js's existing accordion handles it like any other parent item. */

@media (max-width: 1023px) {
  .texium-megamenu {
    display: none;
  }
}

/* ==========================================================================
   Resources mega menu
   Rendered by texium_get_resmega_panel_html() (inc/navigation.php) as a
   sibling of the Resources link inside its <li>.

   Fixed (not absolute) positioning for the same reason as the Services
   panel: out of document flow, so a panel far wider than its trigger can
   never extend the page's scroll width. theme.js sets `top` so it tracks
   the sticky header and the admin bar.
   ========================================================================== */

.texium-resources-mega {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: var(--texium-z-overlay);
  display: grid;
  grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
  gap: 20px;
  width: calc(100% - 2 * var(--texium-container-padding));
  max-width: 820px;
  max-height: 440px;
  padding: 10px;
  background: var(--texium-surface);
  border: 1px solid var(--texium-megacard-border);
  border-radius: 18px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease;
}

.texium-nav__item--resmega.is-open .texium-resources-mega,
html:not(.texium-js) .texium-nav__item--resmega:hover .texium-resources-mega,
html:not(.texium-js) .texium-nav__item--resmega:focus-within .texium-resources-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

html:not(.texium-js) .texium-resources-mega {
  top: 6rem;
}

.texium-nav__item--resmega.is-open > .texium-nav__link {
  color: var(--texium-megacard-blue);
}

.texium-nav__item--resmega.is-open > .texium-nav__link::after {
  transform: translateY(0.16em) rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
  .texium-resources-mega {
    transition-duration: 1ms;
  }
}

.texium-resources-mega a:focus-visible,
.texium-resources-mega button:focus-visible {
  outline: 2px solid var(--texium-accent);
  outline-offset: 2px;
  border-radius: var(--texium-radius-sm);
}

/* ---- Column 1: resource category nav (~28%) ----
   Navigation, not cards: compact rows with a soft icon chip, title,
   one-line description and a chevron. Active row gets a subtle tint,
   not a boxed card. */

.texium-resources-mega__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding-right: 20px;
  border-right: 1px solid var(--texium-megacard-border);
  overflow-x: hidden;
  overflow-y: auto;
}

.texium-resources-mega__nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px;
  background: none;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background-color 180ms ease;
}

/* ---- Accent palette ----
   Same 4-accent system as the Sub-Services Grid widget and the About
   Us mega menu (icon color + tint cycle by position: blue/green/
   purple/orange), so Blogs/News/Podcasts each read as distinct. */

.texium-resources-mega__nav-item--accent-0 {
  --texium-resmega-accent: var(--texium-megacard-blue);
  --texium-resmega-accent-tint: var(--texium-megacard-soft-blue);
}

.texium-resources-mega__nav-item--accent-1 {
  --texium-resmega-accent: #1F9D6B;
  --texium-resmega-accent-tint: #E7F7EF;
}

.texium-resources-mega__nav-item--accent-2 {
  --texium-resmega-accent: #7B4FD1;
  --texium-resmega-accent-tint: #F1ECFC;
}

.texium-resources-mega__nav-item--accent-3 {
  --texium-resmega-accent: #E06A2C;
  --texium-resmega-accent-tint: #FDEEE4;
}

.texium-resources-mega__nav-item:hover {
  background: var(--texium-resmega-accent-tint, var(--texium-megacard-soft-blue));
}

.texium-resources-mega__nav-item.is-active {
  background: var(--texium-resmega-accent-tint, var(--texium-megacard-soft-blue));
}

.texium-resources-mega__nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--texium-resmega-accent-tint, var(--texium-megacard-soft-blue));
  color: var(--texium-resmega-accent, var(--texium-megacard-blue));
}

.texium-resources-mega__nav-icon svg {
  width: 18px;
  height: 18px;
}

.texium-resources-mega__nav-item.is-active .texium-resources-mega__nav-icon {
  background: var(--texium-megacard-white);
}

.texium-resources-mega__nav-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.texium-resources-mega__nav-title {
  font-family: var(--texium-font-heading);
  font-size: 0.875rem;
  font-weight: var(--texium-weight-semibold);
  line-height: 1.3;
  color: var(--texium-megacard-navy);
  transition: color 180ms ease;
}

.texium-resources-mega__nav-item.is-active .texium-resources-mega__nav-title {
  color: var(--texium-resmega-accent, var(--texium-megacard-blue));
}

.texium-resources-mega__nav-desc {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--texium-megacard-desc);
}

.texium-resources-mega__nav-chev {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--texium-megacard-desc);
}

.texium-resources-mega__nav-chev svg {
  width: 16px;
  height: 16px;
}

.texium-resources-mega__nav-item.is-active .texium-resources-mega__nav-chev {
  color: var(--texium-resmega-accent, var(--texium-megacard-blue));
}

.texium-resources-mega__nav-viewall-wrap {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  /* Sticky (not just margin-top:auto) so the button always stays
     pinned to the bottom of the nav column, even while the item list
     above it is mid-scroll (.texium-resources-mega__nav has its own
     overflow-y: auto) rather than scrolling out of view with it. The
     background below covers list items as they scroll underneath it. */
  padding-top: 16px;
  background: var(--texium-surface);
}

.texium-resources-mega__nav-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 44px;
  margin-top: 8px;
  padding: 12px 16px;
  font-size: 0.8125rem;
  font-weight: var(--texium-weight-semibold);
  color: var(--texium-text-inverse);
  background: var(--texium-megacard-blue);
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 180ms ease;
}

.texium-resources-mega__nav-viewall:hover,
.texium-resources-mega__nav-viewall:focus-visible {
  background: var(--texium-megacard-blue-dark);
  color: var(--texium-text-inverse);
  text-decoration: none;
}

/* ---- Column 2: recent content (~40%) ----
   One panel per category; only the active one is visible. An editorial
   list of horizontal rows, not cards — separated by a thin divider. */

.texium-resources-mega__panels {
  position: relative;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.texium-resources-mega__panel:not(.is-active) {
  display: none;
}

.texium-resources-mega__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--texium-space-sm);
  margin-bottom: 12px;
}

.texium-resources-mega__subhead {
  margin: 0;
  font-family: var(--texium-font-heading);
  font-size: 0.9375rem;
  font-weight: var(--texium-weight-bold);
  color: var(--texium-megacard-navy);
}

.texium-resources-mega__view-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: var(--texium-weight-semibold);
  color: var(--texium-megacard-blue);
  text-decoration: none;
}

.texium-resources-mega__view-all:hover,
.texium-resources-mega__view-all:focus-visible {
  text-decoration: underline;
}

.texium-resources-mega__view-all-arrow {
  display: inline-flex;
  align-items: center;
  transition: transform 180ms ease;
}

.texium-resources-mega__view-all-arrow svg {
  width: 14px;
  height: 14px;
}

.texium-resources-mega__view-all:hover .texium-resources-mega__view-all-arrow,
.texium-resources-mega__view-all:focus-visible .texium-resources-mega__view-all-arrow {
  transform: translateX(4px);
}

.texium-resources-mega__type-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.texium-resources-mega__type-list li {
  min-width: 0;
}

.texium-resources-mega__type {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 76px;
  padding: 10px;
  background: var(--texium-surface);
  border: 1px solid var(--texium-megacard-border);
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.texium-resources-mega__type:hover,
.texium-resources-mega__type:focus-visible {
  background: var(--texium-megacard-soft-blue);
  border-color: var(--texium-megacard-blue);
}

.texium-resources-mega__thumb {
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--texium-megacard-soft-blue);
}

.texium-resources-mega__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.texium-resources-mega__thumb--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--texium-megacard-blue);
}

.texium-resources-mega__thumb--empty svg {
  width: 20px;
  height: 20px;
}

.texium-resources-mega__card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.texium-resources-mega__type-cat {
  font-size: 0.6875rem;
  font-weight: var(--texium-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texium-megacard-blue);
}

.texium-resources-mega__type-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.875rem;
  font-weight: var(--texium-weight-semibold);
  line-height: 1.35;
  color: var(--texium-megacard-navy);
}

.texium-resources-mega__chev {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--texium-megacard-desc);
  transition: transform 180ms ease, color 180ms ease;
}

.texium-resources-mega__chev svg {
  width: 15px;
  height: 15px;
}

.texium-resources-mega__type:hover .texium-resources-mega__chev,
.texium-resources-mega__type:focus-visible .texium-resources-mega__chev {
  color: var(--texium-megacard-blue);
  transform: translateX(3px);
}

.texium-resources-mega__empty {
  margin: 0;
  padding: var(--texium-space-md) 4px;
  font-size: 0.875rem;
  color: var(--texium-megacard-desc);
}

/* ---- Tablet: tighten spacing, keep the 2-column hierarchy ---- */

@media (max-width: 1199px) {
  .texium-resources-mega {
    grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr);
    gap: 14px;
    padding: 10px;
  }

  .texium-resources-mega__nav-desc {
    display: none;
  }

  .texium-resources-mega__thumb {
    width: 44px;
    height: 44px;
  }

  .texium-resources-mega__type {
    min-height: 64px;
  }
}

/* ---- Mobile drawer ----
   Below the desktop nav's breakpoint the panel never renders; Resources
   is a plain two-level accordion in the drawer instead (see
   texium_resmega_mobile_items). */

@media (max-width: 1023px) {
  .texium-resources-mega {
    display: none;
  }
}

/* The drawer's Resources list is long, so its rows are tightened a touch
   while staying above the 44px touch-target minimum. */

.texium-mobile-nav .menu-item-has-children .sub-menu .texium-nav__link {
  font-size: var(--texium-font-size-md);
}


/* ==========================================================================
   Services mega menu — 3-column: category list / sub-services / CTA
   Rendered by texium_get_servicesmega_panel_html() (inc/navigation.php)
   as a sibling of the Services link inside its <li>. Reads real Pages
   (Services parent page > category pages > sub-service pages), not a
   manually-built nav menu tree.

   Fixed (not absolute) positioning is deliberate: the panel is far wider
   than the space to the right of its trigger, so an absolutely positioned
   panel would extend the page's scroll width and switch on a horizontal
   scrollbar — even while hidden, since visibility:hidden elements still
   take part in layout. Out of flow, it cannot. theme.js sets the inline
   `top` so the panel tracks the (sticky) header and the admin bar.
   ========================================================================== */

.texium-servicesmega {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: var(--texium-z-overlay);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  align-items: stretch;
  width: calc(100% - 2 * var(--texium-container-padding));
  max-width: 820px;
  max-height: 680px;
  /* Fallback only; theme.js replaces this with the exact space left
     under the header (admin bar and top bar included). */
  padding: 10px;
  background: var(--texium-surface);
  border: 1px solid var(--texium-megacard-border);
  border-radius: 18px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease;
}

/* Opened by `.is-open` from theme.js, which positions the panel first.
   The :hover/:focus-within fallback applies only when JS has not marked
   the document as enhanced, so the menu still works without it — the
   spec's "don't open on incidental hover" is handled by theme.js using
   an intentional-hover delay before adding .is-open, not by CSS alone. */

.texium-nav__item--colmega.is-open .texium-servicesmega,
html:not(.texium-js) .texium-nav__item--colmega:hover .texium-servicesmega,
html:not(.texium-js) .texium-nav__item--colmega:focus-within .texium-servicesmega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

html:not(.texium-js) .texium-servicesmega {
  top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
  .texium-servicesmega {
    transition-duration: 1ms;
  }
}

/* Chevron on the Services trigger: down when closed, up when open. The
   base rotate(45deg) points the square corner down. */

.texium-nav__item--colmega.is-open > .texium-nav__link::after {
  transform: translateY(0.16em) rotate(225deg);
}

.texium-nav__item--colmega.is-open > .texium-nav__link {
  color: var(--texium-megacard-blue);
}

.texium-servicesmega a:focus-visible,
.texium-servicesmega button:focus-visible {
  outline: 2px solid var(--texium-accent);
  outline-offset: 2px;
  border-radius: var(--texium-radius-sm);
}

/* ---- Column 1: category list (~30%) ---- */

.texium-servicesmega__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-right: 20px;
  border-right: 1px solid var(--texium-megacard-border);
  overflow-x: hidden;
  overflow-y: auto;
}

.texium-servicesmega__nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px;
  background: none;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition: background-color 180ms ease;
}

/* ---- Accent palette ----
   Same 4-accent system as the Sub-Services Grid widget, the About Us
   mega menu, and the Resources mega menu (icon color + tint cycle by
   position: blue/green/purple/orange), so each service category reads
   as distinct rather than uniformly blue. */

.texium-servicesmega__nav-item--accent-0 {
  --texium-servicesmega-accent: var(--texium-megacard-blue);
  --texium-servicesmega-accent-tint: var(--texium-megacard-soft-blue);
}

.texium-servicesmega__nav-item--accent-1 {
  --texium-servicesmega-accent: #1F9D6B;
  --texium-servicesmega-accent-tint: #E7F7EF;
}

.texium-servicesmega__nav-item--accent-2 {
  --texium-servicesmega-accent: #7B4FD1;
  --texium-servicesmega-accent-tint: #F1ECFC;
}

.texium-servicesmega__nav-item--accent-3 {
  --texium-servicesmega-accent: #E06A2C;
  --texium-servicesmega-accent-tint: #FDEEE4;
}

.texium-servicesmega__nav-item:hover {
  background: var(--texium-servicesmega-accent-tint, var(--texium-megacard-soft-blue));
}

.texium-servicesmega__nav-item.is-active {
  background: var(--texium-servicesmega-accent-tint, var(--texium-megacard-soft-blue));
}

.texium-servicesmega__nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--texium-servicesmega-accent-tint, var(--texium-megacard-soft-blue));
  color: var(--texium-servicesmega-accent, var(--texium-megacard-blue));
  font-size: 18px;
  transition: background-color 180ms ease, color 180ms ease;
}

.texium-servicesmega__nav-item.is-active .texium-servicesmega__nav-icon {
  background: var(--texium-megacard-white);
}

.texium-servicesmega__nav-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.texium-servicesmega__nav-title {
  font-family: var(--texium-font-heading);
  font-size: 0.875rem;
  font-weight: var(--texium-weight-semibold);
  line-height: 1.3;
  color: var(--texium-megacard-navy);
  transition: color 180ms ease;
}

.texium-servicesmega__nav-item.is-active .texium-servicesmega__nav-title {
  color: var(--texium-servicesmega-accent, var(--texium-megacard-blue));
}

.texium-servicesmega__nav-desc {
  font-size: 0.6875rem;
  line-height: 1.4;
  color: var(--texium-megacard-desc);
}

.texium-servicesmega__nav-arrow {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--texium-megacard-desc);
}

.texium-servicesmega__nav-arrow svg {
  width: 16px;
  height: 16px;
}

.texium-servicesmega__nav-item.is-active .texium-servicesmega__nav-arrow {
  color: var(--texium-servicesmega-accent, var(--texium-megacard-blue));
}

.texium-servicesmega__nav-viewall-wrap {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  /* Sticky (not just margin-top:auto) so the button always stays
     pinned to the bottom of the nav column, even while the item list
     above it is mid-scroll (.texium-servicesmega__nav has its own
     overflow-y: auto) rather than scrolling out of view with it. The
     background below covers list items as they scroll underneath it. */
  padding-top: 12px;
  background: var(--texium-surface);
}

.texium-servicesmega__nav-viewall {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 8px;
  padding: 12px 16px;
  font-size: 0.8125rem;
  font-weight: var(--texium-weight-semibold);
  color: var(--texium-text-inverse);
  background: var(--texium-megacard-blue);
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 180ms ease;
}

.texium-servicesmega__nav-viewall:hover,
.texium-servicesmega__nav-viewall:focus-visible {
  background: var(--texium-megacard-blue-dark);
  color: var(--texium-text-inverse);
  text-decoration: none;
}

/* ---- Columns 2 + 3: per-category panel (~70% combined) ----
   Only the active category's panel is visible; theme.js toggles which
   one via the is-active class / hidden attribute. Each inactive panel
   still exists in the DOM (already rendered server-side) so switching
   categories is instant, no request. */

.texium-servicesmega__panels {
  position: relative;
  min-width: 0;
  padding-left: 24px;
  overflow-x: hidden;
  overflow-y: auto;
}

.texium-servicesmega__panel {
  display: block;
  height: 100%;
}

.texium-servicesmega__panel:not(.is-active) {
  display: none;
}

/* ---- Column 2: sub-services ---- */

.texium-servicesmega__sub {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.texium-servicesmega__sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--texium-space-sm);
  margin-bottom: 16px;
}

.texium-servicesmega__sub-heading {
  margin: 0;
  font-family: var(--texium-font-heading);
  font-size: 1.0625rem;
  font-weight: var(--texium-weight-bold);
  color: var(--texium-megacard-navy);
}

.texium-servicesmega__view-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: var(--texium-weight-semibold);
  color: var(--texium-megacard-blue);
  text-decoration: none;
}

.texium-servicesmega__view-all:hover,
.texium-servicesmega__view-all:focus-visible {
  text-decoration: underline;
}

.texium-servicesmega__view-all svg {
  width: 14px;
  height: 14px;
  transition: transform 180ms ease;
}

.texium-servicesmega__view-all:hover svg,
.texium-servicesmega__view-all:focus-visible svg {
  transform: translateX(3px);
}

.texium-servicesmega__sub-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.texium-servicesmega__sub-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 12px 14px;
  background: var(--texium-megacard-white);
  border: 1px solid var(--texium-megacard-border);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 180ms ease;
}

.texium-servicesmega__sub-card:hover,
.texium-servicesmega__sub-card:focus-visible {
  border-color: var(--texium-megacard-blue);
}

.texium-servicesmega__sub-thumb {
  display: block;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--texium-megacard-soft-blue);
}

.texium-servicesmega__sub-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.texium-servicesmega__sub-thumb--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--texium-megacard-blue);
  font-size: 20px;
}

.texium-servicesmega__sub-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.texium-servicesmega__sub-title {
  font-family: var(--texium-font-heading);
  font-size: 0.875rem;
  font-weight: var(--texium-weight-semibold);
  line-height: 1.3;
  color: var(--texium-megacard-navy);
}

.texium-servicesmega__sub-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--texium-megacard-desc);
}

.texium-servicesmega__sub-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--texium-megacard-soft-blue);
  color: var(--texium-megacard-blue);
  overflow: hidden;
  transition: background-color 180ms ease, color 180ms ease;
}

.texium-servicesmega__sub-arrow svg {
  width: 15px;
  height: 15px;
  transform: rotate(-45deg);
  transition: transform 320ms ease, opacity 320ms ease;
}

.texium-servicesmega__sub-card:hover .texium-servicesmega__sub-arrow,
.texium-servicesmega__sub-card:focus-visible .texium-servicesmega__sub-arrow {
  background: var(--texium-megacard-blue);
  color: var(--texium-text-inverse);
}

.texium-servicesmega__sub-card:hover .texium-servicesmega__sub-arrow svg,
.texium-servicesmega__sub-card:focus-visible .texium-servicesmega__sub-arrow svg {
  animation: texium-sub-arrow-swipe 420ms ease forwards;
}

@keyframes texium-sub-arrow-swipe {
  0% {
    transform: translate(0, 0) rotate(-45deg);
    opacity: 1;
  }
  49% {
    transform: translate(14px, -14px) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: translate(-14px, 14px) rotate(-45deg);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0) rotate(-45deg);
    opacity: 1;
  }
}

/* ---- Tablet ---- */

@media (max-width: 1199px) {
  .texium-servicesmega {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    padding: 10px;
  }

  .texium-servicesmega__nav {
    padding-right: 14px;
  }

  .texium-servicesmega__panels {
    padding-left: 18px;
  }

  .texium-servicesmega__nav-desc {
    display: none;
  }
}

/* Header actions */

.texium-header__actions {
  display: flex;
  align-items: center;
  gap: var(--texium-space-sm);
}

.texium-header__cta {
  display: none;
}

/* CTA arrow: sits tilted 45 degrees as a north-east "go" mark. On hover
   it swipes out to the right, disappears, and re-enters from the left —
   a loop rather than a one-way nudge, so the button keeps reading as
   active for as long as the pointer rests on it. The arrow's own box
   never changes size, so the label never shifts. */

.texium-header__cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  /* Clipped to its own box so the arrow vanishes at the edge rather than
     flying across the button; the box never resizes, so the label holds
     still. */
  overflow: hidden;
}

.texium-header__cta-arrow svg {
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
  transition: transform var(--texium-transition-fast);
}

.texium-header__cta:hover .texium-header__cta-arrow svg,
.texium-header__cta:focus-visible .texium-header__cta-arrow svg {
  animation: texium-cta-swipe 560ms cubic-bezier(0.5, 0, 0.35, 1) 1;
}

/* The arrow travels along the diagonal it points down — out past the
   top-right, then back in from the bottom-left — and stays fully opaque
   throughout. It is hidden only by its container's overflow clip while
   outside the box, so it reads as sliding behind the button edge rather
   than fading away. */

@keyframes texium-cta-swipe {
  0% {
    transform: translate(0, 0) rotate(-45deg);
  }

  50% {
    transform: translate(200%, -200%) rotate(-45deg);
  }

  50.01% {
    transform: translate(-200%, 200%) rotate(-45deg);
  }

  100% {
    transform: translate(0, 0) rotate(-45deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .texium-header__cta:hover .texium-header__cta-arrow svg,
  .texium-header__cta:focus-visible .texium-header__cta-arrow svg {
    animation: none;
  }
}

/* Header search — rounded pill.
   Collapsed it is a circular button; opening eases it out into a full
   field on a plain curve, with no overshoot and no shadow. The input
   contributes no border or background of its own, so the pill reads as
   one continuous shape. The form is a plain GET form, so search still
   works with no JS — only the expansion is presentational. */

.texium-search {
  position: relative;
  display: flex;
  align-items: center;
}

.texium-search__form {
  --texium-search-size: 2.5rem;
  --texium-search-open: 17rem;

  position: relative;
  display: flex;
  align-items: center;
  width: var(--texium-search-size);
  height: var(--texium-search-size);
  padding: 0;
  border-radius: var(--texium-radius-pill);
  background: transparent;
  border: 1px solid var(--texium-border-strong);
  overflow: hidden;
  /* The spring: overshoots slightly past the target width, then settles.
     Width and background are the two properties that carry the effect. */
  transition:
    width 320ms ease,
    background-color 220ms ease,
    border-color 220ms ease;
}

.texium-search__form:hover {
  border-color: var(--texium-primary);
}

/* Open state: the pill stretches and turns to frosted glass. */

.texium-search.is-open .texium-search__form {
  width: var(--texium-search-open);
  background: var(--texium-surface);
  border-color: var(--texium-border-strong);
}

/* Toggle button — stays a fixed circle at the left of the pill. */

.texium-search__toggle {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--texium-search-size);
  height: var(--texium-search-size);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--texium-heading);
  cursor: pointer;
  transition: color var(--texium-transition-fast);
}

.texium-search__form:hover .texium-search__toggle {
  color: var(--texium-primary);
}

.texium-search__toggle:focus-visible {
  outline: 2px solid var(--texium-accent);
  outline-offset: 2px;
}

/* Icons cross-fade and rotate between search and close. */

.texium-search__icon {
  position: absolute;
  width: 1.05rem;
  height: 1.05rem;
  transition:
    opacity 200ms ease,
    transform 240ms ease;
}

.texium-search__icon--close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

.texium-search.is-open .texium-search__icon--find {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

.texium-search.is-open .texium-search__icon--close {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* The field itself. Kept in the DOM (never display:none) so the pill can
   animate around it; it is made unfocusable while closed instead. */

.texium-search__field {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 0 var(--texium-space-xs) 0 0;
  border: 0;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  font-family: var(--texium-font-body);
  font-size: var(--texium-font-size-sm);
  color: var(--texium-text);
  opacity: 0;
  transition: opacity 260ms ease;
}

.texium-search__field::placeholder {
  color: var(--texium-text-muted);
}

/* type="search" draws its own clear button in WebKit, which would sit
   next to the pill's own close control and read as a duplicate. */

.texium-search__field::-webkit-search-cancel-button,
.texium-search__field::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* The global input focus style (theme.css) paints a 3px ring, which
   inside the pill reads as a vertical divider beside the field. The pill
   itself carries the focus affordance instead. */

.texium-search__field:focus,
.texium-site .texium-search__field:focus {
  outline: none;
  border: 0;
  box-shadow: none;
}

.texium-search__form:focus-within {
  border-color: var(--texium-primary);
}

.texium-search.is-open .texium-search__field {
  opacity: 1;
  /* Fades in just after the pill starts widening, so the text never
     looks squeezed out of the collapsed circle. */
  transition-delay: 90ms;
}

/* Submit arrow, revealed with the field. */

.texium-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin-right: 0.25rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--texium-primary);
  color: var(--texium-text-inverse);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.texium-search__submit svg {
  width: 0.9rem;
  height: 0.9rem;
}

.texium-search.is-open .texium-search__submit {
  opacity: 1;
  pointer-events: auto;
  transition-delay: 120ms;
}

.texium-search__submit:focus-visible {
  outline: 2px solid var(--texium-accent);
  outline-offset: 2px;
}

/* Narrower viewports: the open pill must not crowd the CTA. */

@media (max-width: 1200px) {
  .texium-search__form {
    --texium-search-open: 12rem;
  }
}

/* On small screens the open pill has to share the bar with the menu
   toggle, so cap it to whatever space is actually left. */

@media (max-width: 600px) {
  .texium-search__form {
    --texium-search-open: min(12rem, 45vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  .texium-search__form,
  .texium-search__icon,
  .texium-search__field,
  .texium-search__submit {
    transition-duration: 1ms;
    transition-delay: 0ms;
  }
}

/* Mobile toggle */

.texium-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--texium-border-strong);
  border-radius: var(--texium-radius-md);
  cursor: pointer;
  transition:
    border-color var(--texium-transition-fast),
    background-color var(--texium-transition-fast);
}

.texium-nav-toggle:focus-visible {
  outline: 2px solid var(--texium-accent);
  outline-offset: 2px;
}

.texium-nav-toggle__bar {
  position: relative;
  width: 1.1rem;
  height: 1px;
  background: var(--texium-heading);
  transition:
    transform var(--texium-transition-fast),
    opacity var(--texium-transition-fast);
}

.texium-nav-toggle__bar::before,
.texium-nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--texium-heading);
  transition:
    transform var(--texium-transition-fast),
    opacity var(--texium-transition-fast);
}

.texium-nav-toggle__bar::before {
  top: -6px;
}

.texium-nav-toggle__bar::after {
  top: 6px;
}

.texium-header.is-nav-open .texium-nav-toggle__bar {
  background: transparent;
}

.texium-header.is-nav-open .texium-nav-toggle__bar::before {
  transform: translateY(6px) rotate(45deg);
}

.texium-header.is-nav-open .texium-nav-toggle__bar::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile nav panel */

.texium-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--texium-z-overlay);
  display: flex;
  flex-direction: column;
  gap: var(--texium-space-lg);
  padding: var(--texium-space-xl) var(--texium-space-lg) var(--texium-space-lg);
  /* The drawer itself does not scroll: its nav does (below), so the CTA
     stays pinned at the bottom instead of being pushed off or overlapped
     by a long list. */
  overflow: hidden;
  overscroll-behavior: contain;
  background: var(--texium-glass-background-dark);
  backdrop-filter: blur(var(--texium-glass-blur));
  -webkit-backdrop-filter: blur(var(--texium-glass-blur));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--texium-transition-normal),
    transform var(--texium-transition-normal),
    visibility var(--texium-transition-normal);
}

.texium-header.is-nav-open + .texium-mobile-nav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* The primary menu's list class is normalised to .texium-nav__list for
   every location (see texium_nav_menu_args), and that class is a flex
   ROW for the desktop bar — so the drawer must restate a column layout
   for the list it renders, at every level. */

.texium-mobile-nav__list,
.texium-mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--texium-space-xs);
}

/* Top-level items get more air than nested ones so the two levels are
   distinguishable at a glance. */

.texium-mobile-nav > nav > ul {
  gap: 4px;
}

.texium-mobile-nav > nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* The CTA must keep its full height as the menu list grows (Resources
   adds ten rows), or a long list compresses it into the links above. */

.texium-mobile-nav > .texium-btn {
  flex-shrink: 0;
  margin-top: var(--texium-space-md);
}

/* On tablet the drawer would otherwise stretch the full width and leave
   labels marooned from their toggles; cap it to a readable measure. */

@media (min-width: 600px) {
  .texium-mobile-nav > nav > ul,
  .texium-mobile-nav > .texium-btn {
    max-width: 26rem;
  }
}

.texium-mobile-nav li:not(.texium-mobile-nav__parent) {
  display: block;
  width: 100%;
}

.texium-mobile-nav .texium-nav__link {
  color: var(--texium-text-inverse);
  font-size: var(--texium-font-size-h4);
  font-family: var(--texium-font-heading);
}

.texium-mobile-nav .sub-menu {
  position: static;
  transform: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-left: var(--texium-space-md);
  padding-right: 0;
  margin-top: var(--texium-space-xs);
  /* Undo the desktop dropdown's centering and fixed width, which would
     otherwise push nested lists off the left edge of the drawer. */
  left: auto;
  right: auto;
  width: auto;
  min-width: 0;
  max-width: none;
}

/* The desktop rules translate an open dropdown by -50% on hover and
   focus-within; both also match inside the drawer (a tap counts as
   hover on touch), so neutralise them at equal specificity. */

.texium-mobile-nav .texium-nav__item--has-children:hover > .sub-menu,
.texium-mobile-nav .texium-nav__item--has-children:focus-within > .sub-menu,
.texium-mobile-nav .menu-item-has-children:hover > .sub-menu,
.texium-mobile-nav .menu-item-has-children:focus-within > .sub-menu {
  transform: none;
  left: auto;
}

.texium-mobile-nav .sub-menu .texium-nav__link {
  font-size: var(--texium-font-size-md);
  font-family: var(--texium-font-body);
  color: var(--texium-text-inverse-muted);
}

/* Mobile accordion: any menu item with children (Services included)
   collapses its sub-list behind a +/− toggle added by theme.js, so long
   category lists don't force a wall of scrolling. */

/* Parent row: label on the left, +/- toggle pinned right. The label and
   the toggle are separate targets so the category link still navigates. */

.texium-mobile-nav__parent {
  display: grid;
  /* The label hugs its text (auto) so its hit area does not span the row;
     the flexible middle column then pushes every toggle to a shared
     right-hand edge, so toggles line up as a column within each level. */
  /* Fixed label column: toggles line up in one column across siblings
     while staying near the text, instead of tracking each label's width
     (ragged) or sitting at the drawer's far edge (marooned). */
  grid-template-columns: minmax(0, 15rem) auto;
  justify-content: start;
  column-gap: var(--texium-space-md);
  align-items: center;
  column-gap: var(--texium-space-sm);
}

.texium-mobile-nav__parent > .texium-nav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* The toggle is the third column; the flexible middle column is the
   breathing space between it and the label. */

.texium-mobile-nav__parent > .texium-mobile-nav__toggle {
  grid-column: 2;
}

/* The collapsed sub-list spans the whole row, under all three columns. */

.texium-mobile-nav__parent > .sub-menu {
  grid-column: 1 / -1;
}

.texium-mobile-nav__toggle {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--texium-border-inverse);
  border-radius: var(--texium-radius-sm);
  background: transparent;
  color: var(--texium-text-inverse);
  cursor: pointer;
}

/* Plus / minus drawn from two bars; the vertical one collapses when the
   section is expanded. */

.texium-mobile-nav__toggle::before,
.texium-mobile-nav__toggle::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--texium-transition-fast);
}

.texium-mobile-nav__toggle::before {
  width: 14px;
  height: 2px;
}

.texium-mobile-nav__toggle::after {
  width: 2px;
  height: 14px;
}

.texium-mobile-nav__parent.is-expanded > .texium-mobile-nav__toggle::after {
  transform: scaleY(0);
}

.texium-mobile-nav__parent > .sub-menu {
  display: none;
}

.texium-mobile-nav__parent.is-expanded > .sub-menu {
  /* flex, not block: `gap` below is what separates the rows. */
  display: flex;
}

.texium-mobile-nav .sub-menu .texium-nav__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.35;
  padding-block: 10px;
}

/* Nested lists sit closer together than top-level items, so the group
   reads as one block rather than as more top-level entries. */

.texium-mobile-nav .sub-menu {
  gap: 6px;
}

.texium-mobile-nav__parent.is-expanded > .sub-menu {
  margin-bottom: var(--texium-space-sm);
}

/* Indent guide: a hairline down the left of each nested group makes the
   hierarchy legible without relying on indentation alone. */

.texium-mobile-nav .sub-menu {
  border-left: 1px solid var(--texium-border-inverse);
}

/* Third level (the actual services under a category) sits in one step
   further so the hierarchy stays readable. */

.texium-mobile-nav .sub-menu .sub-menu {
  padding-left: var(--texium-space-md);
  margin-left: 2px;
}

/* The desktop mega panel never applies inside the mobile drawer — the
   Services item instead gets its own accordion treatment, see
   .texium-mobile-nav[data-texium-servicesmega-mobile] further down. */

.texium-mobile-nav .texium-servicesmega {
  display: none;
}

@media (min-width: 1024px) {
  .texium-nav {
    display: block;
  }

  .texium-header__cta {
    display: inline-flex;
    padding-right: 1.25rem;
  }

  .texium-nav-toggle {
    display: none;
  }

  .texium-mobile-nav {
    display: none;
  }
}