/* ===========================================================================
   Kitchen Notes site chrome (M6-S3)

   Scope: the site shell shared by every page — header, wordmark, primary
   navigation, footer. Nothing page-specific belongs here.

   This file adds no color values of its own and no personality. It uses the
   global neutral tokens only, so the shell reads the same on the homepage and
   on a recipe page; a recipe's accent personality begins inside its article.

   Width: the shell centres on --site-max-width, which each page sets to match
   its own content column. The 72rem fallback is the shared page shell width.
   =========================================================================== */

.site-header-inner,
.site-footer-inner {
  max-width: var(--site-max-width, 72rem);
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   Site header
   --------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--color-border);
}

.site-header-inner {
  display: flex;
  /* At large text scales the wordmark and nav stop fitting on one line; let
     the nav drop below rather than push the header past the viewport. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-sm);
}

.site-wordmark,
.site-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-lg);
  border-bottom: 0;
  color: var(--color-text);
  text-decoration: none;
  /* A shell link is a flex item in a wrapping row: it must be allowed to
     narrow below its longest word rather than widen the header. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.site-wordmark {
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

.site-nav-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-inline-start: var(--space-md);
}

.site-wordmark:hover,
.site-nav-link:hover {
  color: var(--color-accent-strong);
  text-decoration: none;
}

.site-wordmark:focus,
.site-nav-link:focus {
  outline: none;
}

.site-wordmark:focus-visible,
.site-nav-link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   Site footer
   --------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--color-border);
}

.site-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
}

.site-footer-identity {
  min-width: 0;
}

.site-footer-name {
  margin: 0;
  font-weight: var(--font-weight-bold);
}

.site-footer-tagline {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.site-footer-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height-lg);
  border-bottom: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-decoration: none;
  /* A short word like "Home" still gets a 44 px wide target. */
  min-width: var(--control-height-lg);
  overflow-wrap: anywhere;
}

.site-footer-link:hover {
  color: var(--color-accent-strong);
  text-decoration: none;
}

.site-footer-link:focus {
  outline: none;
}

.site-footer-link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   Narrow viewports — the nav sits closer to the wordmark.
   --------------------------------------------------------------------------- */

@media (max-width: 374px) {
  .site-nav-link {
    padding-inline-start: var(--space-sm);
  }
}