/* ARJO — Site Frame: global resets + sticky header + navigation.
   Every value comes from theme.json (--wp--preset--* / --wp--custom--*). */

/* ---- 1. Resets WordPress does not ship ---------------------------------- */
[class*="arjo-"],
[class*="arjo-"]::before,
[class*="arjo-"]::after,
[class*="arjo-"] * { box-sizing: border-box; }

/* Anchor targets clear the sticky header. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--wp--custom--header-height) + var(--wp--preset--spacing--40));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: var(--wp--custom--border-medium) solid var(--wp--preset--color--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

:root {
  /* WhatsApp glyph, painted with currentColor via mask so it inherits button colour. */
  --arjo-icon-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2Zm0 18.15h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.19 8.19 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.78.97-.15.16-.29.18-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.44.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.4-.42-.56-.43h-.47c-.17 0-.43.06-.66.31-.23.25-.86.85-.86 2.06s.89 2.39 1.01 2.56c.12.16 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.08.14-1.18-.06-.11-.22-.17-.47-.29Z'/%3E%3C/svg%3E");
}

/* ---- 2. The header band ------------------------------------------------- */
/* Solid cream at every scroll position, never transparent over the hero, so the
   logo keeps its own colours. Sticky (not fixed) so it occupies its own space. */
.arjo-header.wp-block-group {
  z-index: var(--wp--custom--z-header);
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  border-bottom: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line);
}

.arjo-header__inner.wp-block-group {
  width: var(--wp--custom--layout-shell);
  margin-inline: auto;
  gap: var(--wp--preset--spacing--50);
  min-height: var(--wp--custom--header-height);
  align-items: center;
}

/* ---- 3. Logo lockup ----------------------------------------------------- */
.arjo-header .arjo-logo.wp-block-group {
  gap: var(--wp--preset--spacing--30);
  flex: none;
}
.arjo-header .arjo-logo .wp-block-site-logo {
  width: auto;
  line-height: 0;
}
.arjo-header .arjo-logo .wp-block-site-logo img {
  display: block;
  /* The lockup carries its own small "ARJO", so it is set as large as the band allows. */
  height: clamp(2.75rem, 2.3rem + 1.6vw, 3.5rem);
  width: auto;
  max-width: none;
}
.arjo-header .arjo-logo__sub {
  margin: 0;
  font-size: var(--wp--preset--font-size--xxs);
  letter-spacing: var(--wp--custom--tracking-wide);
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1;
  white-space: nowrap;
}

/* ---- 4. Desktop navigation --------------------------------------------- */
.arjo-header .arjo-nav .wp-block-navigation__container {
  gap: var(--wp--preset--spacing--50);
}
.arjo-header .arjo-nav .wp-block-navigation-item__content {
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--contrast);
  white-space: nowrap;
  padding-block: var(--wp--preset--spacing--20);
  /* Hairline that draws itself in on hover. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--wp--custom--border-hairline);
  transition: background-size var(--wp--custom--duration-base) var(--wp--custom--ease-standard);
}
.arjo-header .arjo-nav .wp-block-navigation-item__content:hover {
  background-size: 100% var(--wp--custom--border-hairline);
}

/* ---- 5. Bar CTA (WhatsApp) --------------------------------------------- */
/* Parent class beats .wp-block-buttons-is-layout-flex, which prints later. */
.arjo-header .arjo-header__actions {
  display: none;
  flex: none;
  gap: var(--wp--preset--spacing--30);
}
.arjo-header .arjo-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--30);
  min-height: 2.5rem;
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--50);
  border: var(--wp--custom--border-hairline) solid var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--xs);
  letter-spacing: var(--wp--custom--tracking-snug);
  line-height: 1;
  white-space: nowrap;
}
.arjo-btn--wa .wp-block-button__link::before,
.arjo-nav__cta--primary > .wp-block-navigation-item__content::before {
  content: "";
  flex: none;
  width: 1.125em;
  height: 1.125em;
  background-color: currentColor;
  -webkit-mask: var(--arjo-icon-whatsapp) center / contain no-repeat;
  mask: var(--arjo-icon-whatsapp) center / contain no-repeat;
}

/* ---- 6. Hamburger ------------------------------------------------------ */
/* Three hairlines rather than core's 1.5px bars — the design is deliberately fine. */
/* No `display` here: core hides this button above 600px and the band in section 9
   brings it back to 62rem. Setting display in this rule would out-specify that hide
   and leak the hamburger onto desktop. */
.arjo-header .wp-block-navigation__responsive-container-open {
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  color: var(--wp--preset--color--contrast);
}
.arjo-header .wp-block-navigation__responsive-container-open svg { display: none; }
.arjo-header .wp-block-navigation__responsive-container-open::before {
  content: "";
  width: 1.75rem;
  height: 13px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 100% var(--wp--custom--border-hairline);
  background-repeat: no-repeat;
  background-position: 0 0, 0 6px, 0 12px;
}
/* The X takes over the hamburger's slot; the bar itself stays visible above the panel. */
.arjo-nav:has(.wp-block-navigation__responsive-container.is-menu-open)
  .wp-block-navigation__responsive-container-open { visibility: hidden; }

/* ---- 7. Mobile overlay ------------------------------------------------- */
.arjo-header .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  inset: var(--wp--custom--header-height) 0 0 0;
  z-index: calc(var(--wp--custom--z-header) - 1);
  padding: var(--wp--preset--spacing--80) var(--wp--custom--layout-gutter) var(--wp--preset--spacing--90);
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  overflow-y: auto;
  /* Core fades the panel in with a translateY keyframe. A transform on this element
     makes it the containing block for its own position:fixed close button, so the X
     and the panel both drift by the animation offset. Geometry beats a 100ms fade. */
  animation: none;
  transform: none;
}
/* Core's positioned wrappers would otherwise re-anchor and clamp the panel. */
.arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
  max-width: none;
  height: auto;
  padding: 0;
}
.arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  position: static;
  margin-top: 0;
}
.arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  width: 100%;
  padding-top: 0;
  overflow: visible;
}
/* The close X sits in the hamburger's own slot, inside the header band. */
.arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: fixed;
  top: 0;
  right: var(--wp--custom--layout-gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: var(--wp--custom--header-height);
  padding: 0;
  z-index: calc(var(--wp--custom--z-header) + 1);
  color: var(--wp--preset--color--contrast);
}
.arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Logged in, the mobile admin bar sits over the top of the viewport and would
   cover the fixed close button. Visitors never see this; the owner does, every
   time they open the menu while editing. */
.admin-bar .arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  top: 46px;
}
@media (min-width: 783px) {
  .admin-bar .arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    top: 32px;
  }
}

.arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  /* Stay on core's flex model. As a grid, core's justify-content var stops the auto
     track from stretching and the list collapses to max-content. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--wp--preset--spacing--20);
  width: 100%;
  counter-reset: arjo-nav;
}
.arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; }
.arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.arjo-nav__cta) {
  counter-increment: arjo-nav;
}
.arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.arjo-nav__cta)
  > .wp-block-navigation-item__content {
  display: flex;
  align-items: baseline;
  gap: var(--wp--preset--spacing--40);
  width: 100%;
  padding-block: var(--wp--preset--spacing--40);
  border-bottom: var(--wp--custom--border-hairline) solid var(--wp--preset--color--line);
  background-image: none;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: var(--wp--custom--weight-medium);
  letter-spacing: var(--wp--custom--tracking-snug);
  line-height: var(--wp--custom--leading-snug);
}
.arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.arjo-nav__cta)
  > .wp-block-navigation-item__content::before {
  content: counter(arjo-nav, decimal-leading-zero);
  flex: none;
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--preset--font-size--xxs);
  font-weight: var(--wp--custom--weight-medium);
  letter-spacing: var(--wp--custom--tracking-wide);
  color: var(--wp--preset--color--accent);
}

/* ---- 8. CTA menu items (overlay only) ---------------------------------- */
.arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .arjo-nav__cta--primary { margin-top: var(--wp--preset--spacing--50); }
.arjo-header .arjo-nav .wp-block-navigation__responsive-container.is-menu-open .arjo-nav__cta--outline { margin-top: var(--wp--preset--spacing--10); }
.arjo-header .arjo-nav__cta > .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wp--preset--spacing--30);
  width: 100%;
  min-height: 3rem;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
  border: var(--wp--custom--border-hairline) solid var(--wp--preset--color--contrast);
  border-radius: var(--wp--custom--radius-sm);
  background-image: none;
  font-size: var(--wp--preset--font-size--small);
  font-weight: var(--wp--custom--weight-medium);
  letter-spacing: var(--wp--custom--tracking-snug);
  line-height: 1;
  text-align: center;
  transition:
    background-color var(--wp--custom--duration-base) var(--wp--custom--ease-standard),
    color var(--wp--custom--duration-base) var(--wp--custom--ease-standard),
    border-color var(--wp--custom--duration-base) var(--wp--custom--ease-standard);
}
.arjo-header .arjo-nav__cta--primary > .wp-block-navigation-item__content {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}
.arjo-header .arjo-nav__cta--primary > .wp-block-navigation-item__content:hover {
  background-color: var(--wp--custom--color-cta-hover);
  border-color: var(--wp--custom--color-cta-hover);
}
.arjo-header .arjo-nav__cta--outline > .wp-block-navigation-item__content:hover {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}

/* ---- 9. Breakpoints ---------------------------------------------------- */
/* The wordmark is wide, so the design collapses the nav at 62rem, not at core's
   600px. Force core's overlay to stay in charge across the whole 600px–62rem band. */
@media (min-width: 600px) and (max-width: 61.999rem) {
  .arjo-header .arjo-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: inline-flex;
  }
  .arjo-header .arjo-nav
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  .arjo-header .arjo-nav .wp-block-navigation__responsive-container-close { display: flex; }
}

@media (min-width: 62rem) {
  .arjo-header .arjo-header__actions { display: flex; }
  .arjo-header .arjo-nav__cta { display: none; }
}

@media (min-width: 75rem) {
  .arjo-header .arjo-nav .wp-block-navigation__container {
    gap: var(--wp--preset--spacing--60);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arjo-header .arjo-nav .wp-block-navigation-item__content,
  .arjo-header .arjo-nav__cta > .wp-block-navigation-item__content { transition: none; }
}