/* Header Menu Block */
.header-menu {
  background-color: var(--color-primary-white);
  display: none;
}

/* Author mode - visible with basic styling */
.header-menu.is-author {
  display: block;
  padding: var(--spacing-base-space-300);
  border: 2px dashed #ccc;
  border-radius: 4px;
}

.header-menu.is-author h2,
.header-menu.is-author h3,
.header-menu.is-author h4 {
  margin-top: 0;
}

/* Show header-menu when inside nav-menu-content - publish mode */
.nav-menu-content .header-menu {
  display: flex;
  gap: var(--spacing-base-space-700);
  flex-direction: column;
}

/* Main grid layout - 3 columns - publish mode only */
.header-menu-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--spacing-base-space-1000);
}

/* Column base styles */
.header-menu-col {
  display: flex;
  flex-direction: column;
}

/* Banner styles - placed first to avoid specificity issues */
.header-banner {
  padding: var(--spacing-base-space-300);
  background-color: var(--palette-default-bg-secondary);
  border: var(--bar-m) solid var(--palette-default-stroke-base);
  border-radius: var(--radius-radius-12);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-base-space-300);
}

.header-banner picture {
  width: 7rem;
  height: 7rem;
  flex-shrink: 0;
}

.header-banner img {
  width: 7rem;
  height: 7rem;
  object-fit: contain;
}

.header-banner > div {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base-space-150);
  flex: 1;
}

.header-banner p {
  margin: 0;
  font-size: var(--typography-font-size-body-18);
  font-weight: var(--typography-weight-regular);
  line-height: 1.5;
  color: var(--palette-default-fg-base);
}

.block .header-banner > div > p + p {
  margin-block-start: var(--spacing-base-space-100);
}

.header-banner h5 {
  margin: 0;
  font-family: var(--typography-family-title-sans);
  font-size: var(--typography-font-size-headlines-24);
  font-weight: var(--typography-weight-regular);
  line-height: var(--typography-line-height-lh-29);
  letter-spacing: var(--typography-letter-spacing-0);
  color: var(--palette-default-fg-interactive);
}

.header-banner a {
  font-family: var(--typography-family-body-sans);
  font-size: var(--typography-font-size-body-18);
  font-weight: var(--typography-weight-medium);
  line-height: 1.5;
  color: var(--buttons-tertiary-default-fg);
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  text-decoration-color: var(--buttons-tertiary-default-underline);
  text-underline-offset: 0.375em;
  cursor: pointer;
  transition: color 0.2s ease-out;
  padding: 0 0 var(--spacing-base-space-100);
  display: inline-block;
}

.header-banner .button-container {
  padding: 0;
  margin: 0;
}

/* Column 1: Title, Description, CTA */
.header-menu-col-1 {
  gap: 0;
  padding-inline-end: var(--spacing-base-space-1000);
  border-inline-end: var(--bar-s) solid var(--palette-default-stroke-base);
}

.header-menu-col-1 a {
  white-space: nowrap;
}

.header-menu-col-1 > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base-space-150);
  margin-bottom: var(--spacing-base-space-300);
}

.header-menu-title {
  margin: 0;
  font-family: var(--typography-family-title-slab);
  font-size: var(--typography-font-size-headlines-48);
  font-weight: var(--typography-weight-regular);
  line-height: var(--typography-line-height-lh-53);
  letter-spacing: var(--typography-letter-spacing-0-5);
  color: var(--palette-default-fg-strong);
}

.header-menu-description {
  margin: 0;
  font-family: var(--typography-family-body-sans);
  font-size: var(--typography-font-size-body-18);
  font-weight: var(--typography-weight-regular);
  line-height: 1.5;
  color: var(--palette-default-fg-base);
}

.header-menu-cta-wrapper {
  margin-top: 0;
}

.header-menu-cta-wrapper a,
.header-menu-cta-wrapper .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-base-space-150) var(--spacing-base-space-300);
  background-color: var(--palette-default-bg-interactive);
  color: var(--palette-default-fg-inverted);
  text-decoration: none;
  font-size: var(--typography-font-size-body-16);
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--radius-radius-4);
  transition: background-color 0.2s ease-out;
  border: none;
  cursor: pointer;
}

.header-menu-cta-wrapper a:hover,
.header-menu-cta-wrapper .button:hover {
  background-color: var(--palette-default-bg-interactive-hover);
}

/* Column 2: Featured Items */
.header-menu-col-2 {
  padding-block-start: 0.4em;
  gap: var(--spacing-base-space-300);
  width: 20.625rem;
}

.header-menu-col-3 {
  padding-block-start: 0.6em;
}

.header-menu-col-2 .header-menu-items-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base-space-300);
}

.header-menu-col-2 .grid-item-inline {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-base-space-200);
  width: 100%;
}

.header-menu-col-2 .grid-item-inline picture {
  width: 3.125rem;
  height: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-base-space-075) 0;
}

.header-menu-col-2 .grid-item-inline img {
  width: 2.125rem;
  height: 2.125rem;
  object-fit: contain;
  display: block;
}

.header-menu-col-2 .grid-item-text {
  font-family: var(--typography-family-body-sans);
  font-size: var(--typography-font-size-headlines-22);
  font-weight: var(--typography-weight-regular);
  line-height: var(--typography-line-height-lh-29);
  letter-spacing: var(--typography-letter-spacing-0);
  color: var(--palette-default-fg-interactive);
  transition: color 0.2s ease-out;
}

.header-menu-col-2 .grid-item-text a {
  color: inherit;
  text-decoration: none;
}

/* Banner link svg - placed before grid-item-text svg */
.header-banner a svg {
  display: inline;
  vertical-align: middle;
  margin-inline-start: var(--spacing-base-space-050);
}

.header-menu-col-2 .grid-item-text svg {
  display: none;
}

.header-menu-col-3 > .header-menu-link-title {
  margin: 0;
  padding: 0;
  font-family: var(--typography-family-body-sans);
  font-size: var(--typography-font-size-headlines-22);
  font-weight: var(--typography-weight-semi-bold);
  line-height: var(--typography-line-height-lh-29);
  letter-spacing: var(--typography-letter-spacing-0);
  color: var(--palette-default-fg-strong);
  height: auto;
  margin-block-end: var(--spacing-base-space-250);
}

.header-menu-link-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-base-space-300);
}

.header-menu-link.tertiary-link {
  color: var(--buttons-tertiary-default-fg);
  font-family: var(--typography-family-body-sans);
  font-size: var(--typography-font-size-body-18);
  font-style: normal;
  font-weight: var(--typography-weight-medium);
  line-height: var(--typography-line-height-lh-27);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.375em;
}

.header-menu-link.tertiary-link:hover {
  transition:
    background-color 0.2s,
    color 0.2s,
    text-decoration 0.2s,
    text-underline 0.2s;
  text-decoration-color: transparent;
}

.header-menu-link.tertiary-link:hover,
.header-menu-link.tertiary-link:active {
  border: none;
  outline: none;
}

.header-menu-link-item {
  margin: 0;
  padding: 0;
}

.header-menu-link {
  display: inline-block;
  font-family: var(--typography-family-body-sans);
  font-size: var(--typography-font-size-headlines-22);
  font-weight: var(--typography-weight-regular);
  line-height: var(--typography-line-height-lh-29);
  letter-spacing: var(--typography-letter-spacing-0);
  color: var(--palette-default-fg-interactive);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease-out;
}

.header-menu-link:hover {
  color: var(--palette-default-fg-interactive);
}

/* Banner link hover styles - placed after column selectors */
.header-banner a:hover {
  color: var(--buttons-tertiary-hover-fg);
  text-decoration-color: transparent;
}

/* Fix for grid breaking between mobile and dektop */
@media (width <= 1248px) {
  .header-menu-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-base-space-500) var(--spacing-base-space-700);
  }

  .header-menu-col-1 {
    grid-column: 1 / -1;
    border: none;
  }
}

@media (width <= 900px) {
  .header-menu {
    padding: 0;
  }

  .nav-menu-content .header-menu {
    gap: 0;
  }

  .header-menu-grid {
    grid-template-columns: 1fr;
    margin-block-end: 0;
    gap: 0;
  }

  .header-menu-title {
    font-family: var(--typography-family-title-slab);
    font-size: 2.25rem;
    font-weight: var(--typography-weight-regular);
    line-height: 2.5rem;
    letter-spacing: -0.025rem;
  }

  .header-menu-description {
    display: none;
  }

  .header-menu-col-1 {
    grid-column: auto;
    padding: var(--spacing-base-space-300);
    border-inline-end: none;
    border-bottom: none;
    background-color: white;
  }

  .header-menu-col-1 > div:first-child {
    gap: var(--spacing-base-space-100);
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .header-menu-cta-wrapper {
    display: none;
  }

  .header-menu-col-2 {
    width: 100%;
    padding:
      0
      var(--spacing-base-space-300)
      var(--spacing-base-space-300);
    background-color: white;
    gap: var(--spacing-base-space-300);
    border-bottom: none;
  }

  .header-menu-col-2 .header-menu-items-wrapper {
    gap: var(--spacing-base-space-300);
  }

  .header-menu-col-2 .grid-item {
    height: auto;
    min-height: 1.75rem;
  }

  .header-menu-col-2 .grid-item-text {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .header-banner picture {
    display: none;
  }

  .header-menu-col-2 .grid-item-inline picture {
    display: none;
  }

  .header-menu-col-3 {
    padding:
      var(--spacing-base-space-300)
      var(--spacing-base-space-300)
      var(--spacing-base-space-500);
    background-color: var(--color-secondary-neutral);
    display: flex;
    flex-direction: column;
  }

  .header-menu-col-3 > .header-menu-link-title {
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-block-end: var(--spacing-base-space-300);
  }

  .header-menu-link-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-base-space-300);
  }

  .header-menu-link-item {
    position: relative;
  }

  .header-menu-link {
    font-size: 1.25rem;
    line-height: 1.75rem;
    display: block;
  }

  .header-menu .header-menu-col-3 .header-menu-cta-wrapper {
    display: block;
    order: 999;
    text-align: start;
    margin-block-start: var(--spacing-base-space-300);
  }

  .header-menu-col-3 .header-menu-cta-wrapper .button-container {
    width: auto;
  }

  .header-menu-col-3 .header-menu-cta-wrapper a {
    width: auto;
    background-color: var(--buttons-primary-default-bg);
    color: var(--buttons-primary-default-fg);
    border:
      0.063rem solid
      var(--buttons-primary-default-stroke);
    border-radius: 3.125rem;
    padding:
      var(--spacing-base-space-150)
      var(--spacing-base-space-300);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    justify-content: start;
  }

  .header-banner {
    margin:
      0
      var(--spacing-base-space-300)
      var(--spacing-base-space-500);
    border-radius: var(--radius-radius-12);
    background-color: white;
    box-shadow:
      0 0 0
      var(--spacing-base-space-500)
      var(--color-secondary-neutral);
  }
}