/* Page styles use the semantic colors in ward-field.css and theme-colors.css. */
.site-header { flex-wrap: wrap; padding-block: 12px; }
.site-nav { flex-wrap: wrap; }
.site-nav a { min-width: 44px; }
.language-menu { position: relative; }
.language-menu summary { display: flex; align-items: center; min-height: 44px; min-width: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.language-menu summary:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }
.language-menu ul { position: absolute; z-index: 3; inset-inline-end: 0; width: min(320px, 85vw); max-height: 60vh; overflow: auto; margin: 8px 0 0; padding: 8px; list-style: none; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.language-menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; text-decoration: none; }
.language-menu a[aria-current="page"] { font-weight: 700; text-decoration: underline; }
.site-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px); align-items: center; gap: clamp(32px, 7vw, 96px); padding-block: 64px; border-bottom: 1px solid var(--line); }
.site-hero h1 { max-width: 760px; margin: 0 0 24px; font-size: clamp(48px, 7vw, 80px); line-height: 1.05; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.site-hero p { max-width: 680px; }
.site-hero figure { margin: 0; }
.site-hero img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 24px; }
.site-hero figcaption { margin-top: 12px; color: var(--muted); font-size: 13px; }
.page-hero h1 { overflow-wrap: anywhere; hyphens: auto; }
.section > h2 { margin: 0 0 20px; font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; }
.section > p, .card p { max-width: 78ch; color: var(--muted); line-height: 1.7; }
.site-steps { display: grid; gap: 16px; padding-inline-start: 28px; }
.site-steps li { padding-inline-start: 8px; line-height: 1.7; }
.site-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-links a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.site-footer a { min-width: 44px; }
[dir="rtl"] .skip-link { left: auto; right: 12px; }
@media (max-width: 780px) {
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; }
  .language-menu { grid-column: 2; grid-row: 1; }
  .site-hero { grid-template-columns: 1fr; padding-block: 40px; }
  .site-hero figure { width: min(100%, 260px); justify-self: center; }
}
@media (max-width: 520px) {
  .site-nav { justify-content: start; }
  .site-hero h1 { font-size: clamp(42px, 12vw, 60px); }
}