@font-face {
  font-family: "Vazirmatn";
  src: url("/_v2/fonts/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn-Bold";
  src: url("/_v2/fonts/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html,
body,
input,
button,
select,
textarea {
  font-family: "Vazirmatn", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Vazirmatn-Bold", sans-serif;
}
#news-page-article h2 {
  font-size: 1.5rem;
}

#news-page-article h3 {
  font-size: 1.25rem;
}

#news-page-article h4 {
  font-size: 1.125rem;
}

#news-page-article h5 {
  font-size: 1.1rem;
}

#news-page-article h6 {
  font-size: 1rem;
}

/* ─── Theme ──────────────────────────────────────────────────────
  Class-based dark mode: the inline script in global-head.ctp adds `.dark` to
  <html> before first paint, and the header's theme toggle flips it. The base
  colours live here (not in a Tailwind layer) so they apply even on pages whose
  <body> carries no utility classes. */
:root {
  color-scheme: light;
}

:root.dark {
  color-scheme: dark;
}

body {
  background-color: #f9fafb; /* gray-50 */
  color: #111827; /* gray-900 */
}

:root.dark body {
  background-color: #15181e; /* --color-dark-bg in tailwind.css */
  color: #f3f4f6; /* gray-100 */
}

/* ─── Header motion ──────────────────────────────────────────────
  Kept out of Tailwind so hover/colour transitions are consistent site-wide
  without repeating a transition utility on every link and button. */
a,
button {
  transition:
    color 200ms ease,
    background-color 200ms ease,
    border-color 200ms ease,
    opacity 200ms ease;
}

@keyframes megaFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.mega-menu-panel:not(.hidden) {
  animation: megaFadeIn 200ms ease;
}

/* The search modal supplies its own close control, so suppress the browser's
   native clear affordance — otherwise the panel shows two ✕ glyphs. */
#search-input::-webkit-search-cancel-button,
#search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Screen-reader-only helper used by the header's skip link. */
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}