/* Focus Visible Styles */
:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 2px;
}

/* Skip link: the first focusable thing on every page, visually hidden until
   it takes focus. Without it a keyboard user tabs the brand, the menu toggle
   and every nav link before reaching content, on every page. It is clipped
   rather than display:none / visibility:hidden, both of which would take it
   out of the focus order and defeat the point. */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-md);
  inset-block-start: var(--space-md);
  z-index: 1000;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-link);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-md) - 1rem));
  transition: transform var(--transition-fast);
}

/* :focus, not :focus-visible. A skip link is only ever reached by keyboard,
   so there is no mouse-focus ring to suppress, and :focus-visible's heuristic
   does not match programmatic focus - which would leave the link hidden for
   anything that focuses it directly. */
.skip-link:focus {
  transform: translateY(0);
  /* Only while shown: parked above the viewport, the shadow's blur still
     reached down into the top of the page as a grey smudge by the brand. */
  box-shadow: var(--shadow-raised);
}

/* The skip target itself should never draw a focus ring: focus lands there
   programmatically via the link, not by tabbing. */
#main-content:focus {
  outline: none;
}

/* Hidden on screen but still read by screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================================
   Shared type and link styles

   The site's recurring looks, used across pages. A component's own class
   keeps only what is particular to it (its margins, width, any size
   variation); the look itself comes from these.
   ============================================ */

/* The big italic title at the top of a page */
.page-title {
  color: var(--color-headline);
  font-family: var(--font-display-editorial);
  font-size: var(--text-title);
  font-style: italic;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* A section heading within a page */
.section-title {
  color: var(--color-headline);
  font-family: var(--font-display-editorial);
  font-size: var(--text-section);
  font-style: italic;
  line-height: 1.1;
}

/* The serif paragraph introducing a page */
.page-intro {
  max-width: 52ch;
  color: var(--color-paragraph);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  line-height: 1.7;
}

/* Small grey details: dates, reading time, tags */
.meta {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

/* A quiet standalone link ("All posts ->", "RSS feed"): link colour,
   underlined on hover */
.text-link {
  color: var(--color-link);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

/* A link within running text: always underlined */
.inline-link {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--color-headline);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.inline-link:hover,
.inline-link:focus-visible {
  color: var(--color-headline);
}

/* Selection Styles */
::selection {
  background-color: color-mix(in oklch, var(--color-link) 22%, transparent);
  color: var(--color-headline);
}

/* Shared shape for the pill-style CTA links/buttons defined independently
   in home.css and recipe-print.css; each keeps its own
   padding, gap, colors, transitions, and hover treatment. */
.home-hero__action,
.recipe-print-toolbar__back,
.recipe-print-toolbar__button {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  font-weight: 600;
  text-decoration: none;
}

/* When they prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}