/* Even five-point header rhythm on compact screens:
   logo | story | product | contact | language. */
@media (max-width: 950px) {
  .mikawa-journal .site-header,
  .inner-page .site-header {
    width: calc(100% - 24px) !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
    align-items: start !important;
  }

  .mikawa-journal .site-header > .brand-mark,
  .inner-page .site-header > .brand-mark {
    grid-column: 1 !important;
    justify-self: center !important;
    width: min(88%, 160px) !important;
    max-width: none !important;
  }

  .mikawa-journal .site-header > .brand-mark img,
  .inner-page .site-header > .brand-mark img {
    width: 100% !important;
    max-width: none !important;
  }

  .mikawa-journal .site-header > nav,
  .inner-page .site-header > nav {
    position: static !important;
    grid-column: 2 / span 3 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    transform: none !important;
  }

  .mikawa-journal .site-header > nav > a,
  .inner-page .site-header > nav > a,
  .site-header .nav-product-group {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .mikawa-journal .site-header > .header-actions,
  .inner-page .site-header > .header-actions {
    position: static !important;
    grid-column: 5 !important;
    justify-self: center !important;
    margin-inline: auto !important;
    width: min(78%, var(--language-dropdown-width)) !important;
    max-width: none !important;
  }
}

@media (max-width: 560px) {
  .mikawa-journal .site-header > .brand-mark,
  .inner-page .site-header > .brand-mark {
    width: min(88%, 70px) !important;
  }

  .mikawa-journal .site-header > nav > a,
  .inner-page .site-header > nav > a,
  .site-header .nav-product-group > a {
    padding-inline: 2px !important;
  }
}

/* One shared horizontal axis for the logo, navigation, and language control
   on portrait and landscape phones/tablets. */
@media (max-width: 1100px) {
  .mikawa-journal .site-header,
  .inner-page .site-header {
    align-items: center !important;
  }

  .mikawa-journal .site-header > .brand-mark,
  .inner-page .site-header > .brand-mark,
  .mikawa-journal .site-header > nav,
  .inner-page .site-header > nav,
  .mikawa-journal .site-header > .header-actions,
  .inner-page .site-header > .header-actions {
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .mikawa-journal .site-header > .header-actions,
  .inner-page .site-header > .header-actions {
    height: var(--language-dropdown-button-height) !important;
  }

  .site-header .language-dropdown-toggle {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}
/* Contact navigation: bold title and navy subtitle on full layouts. */
.site-header .nav-contact-group .product-heading-row > a {
  font-weight: 700 !important;
}

.site-header .nav-contact-group > .contact-menu-subtitle {
  color: var(--navy, #0b2365) !important;
}

/* Compact header: emphasize Contact and omit its secondary description. */
@media (max-width: 1100px) {
  .site-header .nav-contact-group .product-heading-row > a {
    font-weight: 700 !important;
  }

  .site-header .nav-contact-group > .contact-menu-subtitle {
    display: none !important;
  }
}

/* Extra-narrow phones: keep all five header controls inside the viewport. */
@media (max-width: 360px) {
  .mikawa-journal .site-header,
  .inner-page .site-header {
    --language-dropdown-width: 42px;
    --language-dropdown-button-height: 32px;
    width: calc(100% - 8px) !important;
    grid-template-columns: 38px repeat(3, minmax(0, 1fr)) 42px !important;
    column-gap: 0 !important;
  }

  .mikawa-journal .site-header > .brand-mark,
  .inner-page .site-header > .brand-mark {
    width: 36px !important;
    max-width: 36px !important;
  }

  .mikawa-journal .site-header > nav a,
  .inner-page .site-header > nav a,
  .site-header .product-menu-title {
    padding-inline: 0 !important;
    font-size: clamp(9px, 3.1vw, 11px) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }

  .site-header .product-heading-row {
    gap: 0 !important;
  }

  .site-header .product-submenu-toggle {
    width: 14px !important;
    height: 16px !important;
  }

  .site-header .product-submenu-toggle i {
    top: 4px !important;
    left: 4px !important;
    width: 6px !important;
    height: 6px !important;
  }

  .site-header .nav-product-group.submenu-open .product-submenu-toggle i {
    top: 7px !important;
  }

  .mikawa-journal .site-header > .header-actions,
  .inner-page .site-header > .header-actions,
  .site-header .language-dropdown-toggle {
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
  }

  .site-header .language-dropdown-toggle {
    height: 32px !important;
    padding-inline: 0 !important;
    font-size: 10px !important;
  }
}

@media (max-width: 280px) {
  .mikawa-journal .site-header,
  .inner-page .site-header {
    --language-dropdown-width: 36px;
    width: calc(100% - 4px) !important;
    grid-template-columns: 32px repeat(3, minmax(0, 1fr)) 36px !important;
  }

  .mikawa-journal .site-header > .brand-mark,
  .inner-page .site-header > .brand-mark {
    width: 30px !important;
    max-width: 30px !important;
  }

  .mikawa-journal .site-header > nav a,
  .inner-page .site-header > nav a,
  .site-header .product-menu-title {
    font-size: 9px !important;
  }

  .site-header .product-submenu-toggle {
    width: 12px !important;
  }

  .mikawa-journal .site-header > .header-actions,
  .inner-page .site-header > .header-actions,
  .site-header .language-dropdown-toggle {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
  }

  .site-header .language-dropdown-toggle {
    font-size: 9px !important;
  }
}