/* --------- Page skeleton --------- */

/* Sticky footer lives on .site, never on body: theme.json styles body too, and
   a flex context there silently flips the axes for anyone laying it out later. */
.site {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.wrapper,
.has-global-padding {
  padding-left: var(--wp--style--root--padding-left);
  padding-right: var(--wp--style--root--padding-right);
}

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--wp--style--global--content-size);
}

.container-secondary {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--wp--style--global--wide-size);
}

.container-article {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--wp--custom--layout--article-size);
}

.site-main {
  flex-grow: 1;
}

.common-section {
  padding-top: var(--wp--preset--spacing--60);
  padding-bottom: var(--wp--preset--spacing--50);
}

.entry-content {
  padding-top: var(--wp--preset--spacing--40);
}

/* --------- Header --------- */

.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  height: var(--header-height);
  --header-ink: var(--wp--preset--color--primary);
  --header-logo: var(--wp--preset--color--primary);
  --header-accent: var(--wp--preset--color--primary);
}

.header--on-dark {
  --header-ink: var(--wp--preset--color--base);
  --header-logo: var(--wp--preset--color--secondary);
  --header-accent: var(--wp--preset--color--secondary);
}

.header > .wrapper {
  flex-grow: 1;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-logo {
  display: block;
  flex-shrink: 0;
  width: clamp(120px, 8.929vw + 91.43px, 220px);
  margin-right: 24px;
  color: var(--header-logo);
}

.header-logo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --------- Header menu --------- */

.header-menu {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 0 var(--wp--preset--spacing--40);
  flex-wrap: wrap;
}

.header-menu a {
  display: inline-flex;
  flex-direction: column;
  color: var(--header-ink);
  font-size: var(--wp--preset--font-size--normal);
  font-weight: 400;
  transition: color 0.2s ease;
}

/* data-label comes from inc/header.php. The weight must match the hover and
   current weight below, or the menu shifts again. */
.header-menu a::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
}

.header-menu a:hover {
  color: var(--header-accent);
  font-weight: 600;
}

.header-menu .current-menu-item > a,
.header-menu .current-section-item > a {
  color: var(--header-accent);
  font-weight: 600;
}

/* --------- Menu toggle (hamburger) --------- */

.menu-toggle {
  display: none;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: var(--z-toggle);
  position: relative;
}

.hamburger {
  display: inline-block;
  width: 30px;
  height: 22px;
  position: relative;
}

.hamburger span {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--header-ink);
  transition:
    transform 0.35s ease,
    opacity 0.25s ease,
    top 0.35s ease;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 10px;
}

.hamburger span:nth-child(3) {
  top: 20px;
}

.menu-toggle.is-open .hamburger span {
  background: var(--wp--preset--color--primary);
}

.menu-toggle.is-open .hamburger span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.menu-toggle.is-open .hamburger span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open .hamburger span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

@media screen and (max-width: 640px) {
  .menu-toggle {
    width: 22px;
    height: 22px;
  }

  .hamburger {
    width: 22px;
    height: 16px;
  }

  .hamburger span {
    height: 2px;
  }

  .hamburger span:nth-child(2) {
    top: 7px;
  }

  .hamburger span:nth-child(3) {
    top: 14px;
  }

  .menu-toggle.is-open .hamburger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle.is-open .hamburger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* --------- Scroll lock while the drawer is open --------- */

.is-menu-open {
  overflow: hidden;
}

/* --------- Desktop: dropdown submenus --------- */

@media screen and (min-width: 1025px) {
  .header-menu .menu-item {
    position: relative;
    padding-block: 16px;
  }

  .header-menu .sub-menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    padding: 12px 0;
    background-color: var(--wp--preset--color--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.2s ease,
      visibility 0.2s ease;
    z-index: var(--z-dropdown);
  }

  .header-menu .sub-menu::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--wp--preset--color--surface);
  }

  .header-menu .menu-item:hover > .sub-menu,
  .header-menu .menu-item:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .header-menu .sub-menu .menu-item {
    padding: 0;
  }

  .header-menu .sub-menu a {
    display: block;
    padding: 8px 24px;
    color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 400;
    letter-spacing: 0.5px;
  }

  .header-menu .sub-menu a:hover,
  .header-menu .sub-menu .current-menu-item a {
    color: var(--wp--preset--color--primary);
    font-weight: 600;
  }
}

/* --------- Mobile: slide-in drawer --------- */

@media screen and (max-width: 1024px) {
  .menu-toggle {
    display: inline-flex;
  }

  /* visibility too: a transform-only drawer stays focusable off-screen. */
  .header-nav {
    --header-ink: var(--wp--preset--color--primary);
    --header-accent: var(--wp--preset--color--primary);
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(380px, 90vw);
    background: var(--wp--preset--color--base);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
    transform: translateX(110%);
    visibility: hidden;
    transition:
      transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1),
      visibility 0s linear 0.35s;
    z-index: var(--z-drawer);
    padding: 100px 24px 24px;
    overflow-y: auto;
  }

  .header-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .header-menu {
    flex-direction: column;
    align-items: start;
  }

  .header-menu .menu-item {
    padding: 12px 6px;
  }

  .header-menu .sub-menu {
    margin-top: 10px;
    padding-left: 10px;
  }

  .menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.25s ease,
      visibility 0s linear 0.25s;
    z-index: var(--z-backdrop);
  }

  .menu-backdrop.is-open {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
}

/* --------- Footer --------- */

/* The footer's line runs up through the CTA above it; this is where it stops. */
.site-end {
  overflow: clip;
}

.footer {
  --footer-padding: var(--wp--preset--spacing--70);
  --footer-line-scale: 1;
  --footer-line-gap: 15px;
  --footer-line-slope: 0.2371;
  --footer-line-lift: calc(
    var(--footer-line-scale) * 453px + var(--footer-line-gap)
  );
  position: relative;
  background-color: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--primary);
}

.footer-main {
  padding-top: var(--footer-padding);
  padding-bottom: var(--footer-padding);
}

.footer-container {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--wp--preset--spacing--50);
}

.footer-logo {
  position: relative;
  z-index: 1;
  display: block;
  flex-shrink: 0;
  width: clamp(120px, 8.929vw + 91.43px, 220px);
}

.footer-logo svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The right margin keeps the menus clear of the line. */
.footer-nav {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--wp--preset--spacing--80);
  margin-right: calc(
    var(--footer-line-scale) * 330px - var(--wp--style--root--padding-right)
  );
}

.footer-menu {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--20);
}

.footer-menu a,
.footer-linkedin {
  font-size: var(--wp--preset--font-size--normal);
}

.footer-menu a:hover,
.footer-linkedin:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The line ends --footer-line-gap above the bottom of the footer, whatever the
   footer's height. Its box starts a gutter past the container's right edge (the
   screen's edge up to 1440, beside the content above it) and is
   --footer-line-slope times as wide as the footer is tall — the slope of the
   line's leg. The shape hangs from the box's bottom right corner, so a taller
   footer moves it along its own leg: the curve follows the bottom, the leg
   stays where LinkedIn sits. 453px is the curve's lowest point, below the top
   of the shape at full scale. */
.footer-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(
    100% -
      max(
        0px,
        (100% - var(--wp--style--global--wide-size)) / 2 -
          var(--wp--style--root--padding-right)
      )
  );
  aspect-ratio: var(--footer-line-slope);
  pointer-events: none;
}

.footer-line::before,
.footer-line > svg {
  top: 100%;
  transform: translate(
      calc(var(--footer-line-lift) * var(--footer-line-slope) * -1),
      calc(var(--footer-line-lift) * -1)
    )
    scale(var(--footer-line-scale)) translate(-1259.4px, -33.8px)
    rotate(-154.98deg) scaleX(-1) scale(1.032);
}

.footer-line::before {
  background-color: var(--wp--preset--color--secondary);
}

.site-end[data-reveal] .footer-line::before {
  content: none;
}

.footer-line > svg path {
  stroke: var(--wp--preset--color--secondary);
}

/* Drawn from the top of the CTA down, round the curve and away — once, as the
   band scrolls into view (assets/js/reveal.js); the keyframes are in
   blocks.css. A fifth of the line is above the CTA, so it starts drawn. */
@media (prefers-reduced-motion: no-preference) {
  .has-reveal .site-end[data-reveal]:not(.is-revealed) .footer-line path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }

  .site-end.is-revealed .footer-line path {
    --line-draw-from: 0.8;
    stroke-dasharray: 1;
    animation: line-draw 2.4s cubic-bezier(0.3, 0, 0.6, 1) both;
  }
}

/* Centred on the line at the height of the first menu row: 238px is the middle
   of its band, so it follows .footer-line::before. */
.footer-linkedin {
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(
    100% + var(--wp--style--root--padding-right) +
      (var(--footer-padding) + 0.75em) * var(--footer-line-slope) - var(--footer-line-scale) * 238px
  );
  transform: translateX(-50%);
  white-space: nowrap;
}

.footer-bar {
  padding-top: var(--wp--preset--spacing--30);
  padding-bottom: var(--wp--preset--spacing--30);
  background-color: var(--wp--preset--color--primary-dark);
  color: var(--wp--preset--color--base);
  text-align: center;
}

.footer-copyright {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 300;
}

@media (max-width: 1280px) {
  .footer {
    --footer-line-scale: 0.89;
  }
}

@media (max-width: 1024px) {
  .footer {
    --footer-line-scale: 0.71;
  }

  .footer-nav {
    gap: var(--wp--preset--spacing--70);
  }
}

/* Too narrow for the line beside the menus: it rises through the footer behind
   them, and the footer cuts it off at its top edge, so not into the CTA. LinkedIn joins the flow, so
   the line no longer has to keep its leg under it: it only moves up and down. */
@media (max-width: 767px) {
  .footer {
    --footer-line-scale: 0.5;
    --footer-line-gap: 28px;
    --footer-line-slope: 0;
    overflow: clip;
  }

  .footer-line {
    aspect-ratio: auto;
    width: 0;
  }

  .footer-container {
    flex-direction: column;
  }

  .footer-nav {
    margin-right: 0;
  }

  .footer-linkedin {
    left: auto;
    position: relative;
    transform: none;
  }
}