/*
 * Phase 2 — global layout palette
 *
 * The layout markup is shared by every page. Keep this layer limited to
 * semantic color, border, and state treatments so the existing dimensions,
 * spacing, and responsive behavior remain unchanged.
 */

/* Header, brand, and navigation */
.site-header {
  /* The page/hero should remain visible around the shell on every route. */
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  color: var(--ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header .header-container {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-color: var(--line);
}

@media (min-width: 901px) {
  .site-header .header-container {
    width: fit-content;
    max-width: calc(100% - 38px);
  }

  .site-header .header-inner {
    width: max-content;
    max-width: 100%;
    grid-template-columns: auto auto auto;
    justify-content: center;
    gap: clamp(22px, 2.4vw, 36px);
  }

  .site-header .desktop-nav {
    margin-inline: 0;
  }
}

.site-header .brand strong,
.site-footer .brand strong {
  color: var(--ink);
}

.site-header .brand em,
.site-footer .brand em {
  color: var(--copper);
}

/* Keep the brand and theme control as stable header-side groups. The Home
 * Hero can keep the navigation capsule visually separate without detaching
 * either control from the fixed header row. */
.header-side {
  align-items: center;
  display: flex;
  min-width: 0;
}

.header-side-brand {
  justify-content: flex-start;
}

.header-side-tools {
  justify-content: flex-end;
}

.site-header .brand {
  gap: 0;
  flex: 0 0 auto;
}

.site-header .brand img {
  width: 92px;
  height: 46px;
}

html[data-theme="light"] .site-header .brand strong,
html[data-theme="light"] .site-footer .brand strong {
  color: var(--forest-ink);
}

.desktop-nav .nav-link,
.mobile-nav .nav-link {
  color: var(--muted);
}

.desktop-nav .nav-link:hover,
.desktop-nav .nav-link:focus-visible,
.desktop-nav .nav-link.is-active,
.mobile-nav .nav-link:hover,
.mobile-nav .nav-link:focus-visible,
.mobile-nav .nav-link.is-active {
  color: var(--ink);
}

.desktop-nav .nav-link::after,
.mobile-nav .nav-link::after {
  background: var(--copper);
}

.icon-button,
.menu-button {
  color: var(--ink);
}

.icon-button:hover,
.icon-button:focus-visible,
.menu-button:hover,
.menu-button:focus-visible {
  color: var(--copper);
}

.mobile-panel {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--ink);
}

/* Floating language switcher */
.floating-language-toggle {
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink);
}

.floating-language-toggle:hover,
.floating-language-toggle:focus-visible {
  border-color: var(--copper);
  color: var(--copper);
}

.floating-language-menu {
  background: var(--paper-2);
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  color: var(--ink);
}

.floating-language-option {
  color: var(--muted);
}

.floating-language-option:hover,
.floating-language-option:focus-visible,
.floating-language-option.is-current {
  color: var(--copper);
}

@media (max-width: 900px) {
  .site-header .brand img {
    width: 78px;
    height: 39px;
  }
}

@media (max-width: 560px) {
  .site-header .brand img {
    width: 68px;
    height: 34px;
  }
}

/* Footer and newsletter */
.site-footer {
  background: var(--footer-bg);
  color: var(--ink);
}

.site-footer .footer-label {
  color: var(--copper);
  text-transform: uppercase;
}

.site-footer .footer-note,
.site-footer .footer-address,
.site-footer .footer-newsletter-copy {
  color: var(--muted);
}

.site-footer .footer-grid a {
  color: var(--muted);
}

.site-footer .footer-grid a:hover,
.site-footer .footer-grid a:focus-visible {
  color: var(--ink);
}

.footer-newsletter-form {
  background: color-mix(in srgb, var(--paper) 40%, transparent);
  border: 1px solid var(--line);
  color: var(--ink);
}

.footer-newsletter-form input {
  background: transparent;
  border: 0;
  color: var(--ink);
}

.footer-newsletter-form input::placeholder {
  color: var(--placeholder);
}

.footer-newsletter-form:focus-within {
  border-color: var(--copper);
}

.footer-newsletter-form button {
  background: var(--copper);
  color: #ffffff;
}

.footer-newsletter-form button:hover,
.footer-newsletter-form button:focus-visible {
  background: var(--copper-dark);
  color: #ffffff;
}

/* Legal row */
.site-footer .footer-bottom {
  border-top: 1px solid var(--line);
  color: var(--placeholder);
}

.site-footer .footer-bottom a {
  color: var(--placeholder);
}

.site-footer .footer-bottom a:hover,
.site-footer .footer-bottom a:focus-visible {
  color: var(--copper);
}

/*
 * Responsive header widths
 * ------------------------
 * Keep the header capsule comfortably inset on ordinary desktop screens,
 * then let it use the same near-edge footprint as the mobile dock at the
 * two dense navigation ranges. These rules come last so they intentionally
 * override the compact fit-content rule above without changing the normal
 * large-desktop header.
 */
@media (min-width: 901px) and (max-width: 1000px) {
  .site-header .header-container {
    width: calc(100% - 20px);
    max-width: none;
  }
}

@media (min-width: 1001px) and (max-width: 1100px) {
  .site-header .header-container {
    width: calc(100% - 28px);
    max-width: none;
  }
}