:root {
  --nnw-width: 76rem;
  --nnw-gutter: clamp(1rem, 4vw, 3rem);
  --nnw-border: color-mix(in srgb, var(--nnw-muted, #7e6870) 22%, transparent);
  /* One timing for every hover and focus change: short, with a strong ease-out. */
  --nnw-duration: 160ms;
  --nnw-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  font-family: var(--nnw-body-font, 'DM Sans'), 'Vazirmatn', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--nnw-text, #241a1d);
  background: var(--nnw-background, #fffaf9);
  text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

/* Links and buttons show their own hover, focus and pressed states; no grey flash on tap. */
a,
button {
  -webkit-tap-highlight-color: transparent;
}

/* Buttons give way slightly while pressed, on touch screens too. `html` makes this win over the
   components' hover lift, which loads later. */
@media (prefers-reduced-motion: no-preference) {
  html
    :is(
      .call-to-action__button,
      .hero-slider__button,
      .image-text__button,
      .menu__button,
      .newsletter-signup__button,
      .not-found__home,
      .resource-cards__button
    ):active {
    transform: scale(0.97);
  }
}

body {
  min-inline-size: 20rem;
  margin: 0;
  background: var(--nnw-background, #fffaf9);
}

h1,
h2,
h3,
h4 {
  font-family: var(--nnw-heading-font, var(--nnw-body-font, 'DM Sans')), 'Vazirmatn', sans-serif;
  line-height: 1.2;
  text-wrap: balance;
}

/* Large Latin headings read better slightly tighter. Never in Persian or Arabic: letter spacing
   breaks the joins between letters. */
:root:not(:lang(fa), :lang(ar)) :where(h1, h2) {
  letter-spacing: -0.02em;
}

/* No single word left alone on the last line of a paragraph. */
p {
  text-wrap: pretty;
}

a {
  color: var(--nnw-primary, #8e2035);
}

.site-header {
  position: relative;
  z-index: 5;
  inline-size: 100%;
  border-block-end: 1px solid var(--nnw-border);
  background: var(--nnw-surface, #fffaf9);
  color: var(--nnw-text, #241a1d);
}

.site-header__inner,
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-inline-size: var(--nnw-width);
  margin-inline: auto;
  padding-block: 0.85rem;
  padding-inline: var(--nnw-gutter);
}

.site-header:has(.menu__layout--sticky) {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
}

.site-header[data-theme-header='dark'] {
  border-color: transparent;
  background: var(--nnw-text, #241a1d);
  color: var(--nnw-surface, #fffaf9);
}

.site-header[data-theme-header='dark'] .menu__subtitle,
.site-header[data-theme-header='dark'] .menu__links a,
.site-header[data-theme-header='dark'] .site-tagline {
  color: color-mix(in srgb, currentColor 76%, transparent);
}

.site-header[data-theme-header='dark'] .menu__toggle {
  border-color: color-mix(in srgb, currentColor 50%, transparent);
}

.site-header__identity {
  display: grid;
  gap: 0.15rem;
}

.site-title {
  color: inherit;
  font-family: var(--nnw-heading-font, var(--nnw-body-font, 'DM Sans')), 'Vazirmatn', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

.site-tagline {
  margin: 0;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.875rem;
}

.site-languages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-inline-start: auto;
}

.site-languages a {
  border-radius: 999px;
  padding-block: 0.3rem;
  padding-inline: 0.7rem;
  color: inherit;
  font-size: 0.875rem;
  text-decoration: none;
}

.site-languages a[aria-current='page'] {
  background: color-mix(in srgb, var(--nnw-accent, #b5813a) 18%, transparent);
  font-weight: 700;
}

.site-main {
  inline-size: 100%;
  padding-block: clamp(2rem, 5vw, 4rem);
}

.site-main > :not(.hero-slider),
.site-main > div:not(:has(> .hero-slider)) {
  max-inline-size: var(--nnw-width);
  margin-inline: auto;
  padding-inline: var(--nnw-gutter);
}

.site-main > .hero-slider,
.site-main > div:has(> .hero-slider) {
  max-inline-size: none;
  margin-inline: 0;
  padding-inline: 0;
}

.site-main > .hero-slider {
  border-radius: 0;
}

/* A hero slider at the top starts right under the header, edge to edge, like a cover. */
.site-main:has(> .hero-slider:first-child),
.site-main:has(> div:first-child > .hero-slider) {
  padding-block-start: 0;
}
.site-main > .hero-slider .hero-slider__slide,
.site-main > div > .hero-slider .hero-slider__slide {
  border-radius: 0;
}

.site-main > * + * {
  margin-block-start: clamp(2rem, 5vw, 3.5rem);
}
.site-main > div:has(> .hero-slider) > .hero-slider {
  border-radius: 0;
}

.site-footer {
  border-block-start: 1px solid var(--nnw-border);
  background: var(--nnw-surface, #fffaf9);
  color: var(--nnw-muted, #7e6870);
}

.site-footer__inner {
  align-items: start;
}

.news-article {
  max-inline-size: 54rem;
  margin-inline: auto;
  padding-inline: var(--nnw-gutter);
}

.news-article h1 {
  color: var(--nnw-text, #241a1d);
}
.news-article time {
  color: var(--nnw-muted, #7e6870);
}
.news-article img {
  max-inline-size: 100%;
  border-radius: var(--nnw-radius, 0.75rem);
}

.news-index {
  max-inline-size: 54rem;
  margin-inline: auto;
  padding-inline: var(--nnw-gutter);
}

.news-index__items {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Picture, then title, date and summary side by side; flex follows dir="rtl" by itself. */
.news-index__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--nnw-border);
}

.news-index__image {
  flex: none;
}

.news-index__image img {
  display: block;
  inline-size: 7.5rem;
  block-size: 5rem;
  object-fit: cover;
  border-radius: var(--nnw-radius, 0.75rem);
}

.news-index__title {
  color: var(--nnw-primary, #8e2035);
  font-weight: 700;
}

.news-index__text time {
  display: block;
  color: var(--nnw-muted, #7e6870);
  font-size: 0.875rem;
}

.news-index__text p {
  margin-block: 0.25rem 0;
}

@media (max-width: 30rem) {
  .news-index__image img {
    inline-size: 5rem;
    block-size: 3.75rem;
  }
}

.not-found {
  display: grid;
  justify-items: center;
  gap: 1rem;
  max-inline-size: 48rem;
  min-block-size: 55vh;
  margin-inline: auto;
  padding-block: clamp(4rem, 12vh, 8rem);
  padding-inline: var(--nnw-gutter);
  text-align: center;
}

.not-found__code {
  margin: 0;
  color: var(--nnw-accent, #b5813a);
  font-size: 0.875rem;
  font-weight: 700;
}

.not-found h1 {
  margin: 0;
  color: var(--nnw-text, #241a1d);
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.not-found__message {
  max-inline-size: 38rem;
  margin: 0;
  color: var(--nnw-muted, #7e6870);
}

.not-found__home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-block-start: 0.5rem;
  border-radius: var(--nnw-radius, 0.5rem);
  padding-block: 0.75rem;
  padding-inline: 1.1rem;
  background: var(--nnw-primary, #8e2035);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 48rem) {
  .site-header__inner {
    align-items: start;
  }
  .site-languages {
    margin-inline-start: 0;
  }
}

/* A page without a visible h1 in its sections still has one for screen readers and crawlers. */
.site-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Hover and focus: only theme variables are used, so every website and both header styles work.
   Movement and transitions run only when the visitor allows motion. */
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--nnw-accent, #b5813a);
  outline-offset: 2px;
}

.site-title:focus-visible {
  color: var(--nnw-primary, #8e2035);
}

@media (hover: hover) and (pointer: fine) {
  .site-title:hover {
    color: var(--nnw-primary, #8e2035);
  }
}

.site-languages a:focus-visible {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 10%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .site-languages a:hover {
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 10%, transparent);
  }
}

.site-header[data-theme-header='dark'] .site-title:focus-visible {
  color: var(--nnw-accent, #b5813a);
}

@media (hover: hover) and (pointer: fine) {
  .site-header[data-theme-header='dark'] .site-title:hover {
    color: var(--nnw-accent, #b5813a);
  }
}

.site-header[data-theme-header='dark'] .site-languages a:focus-visible {
  background: color-mix(in srgb, var(--nnw-accent, #b5813a) 28%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .site-header[data-theme-header='dark'] .site-languages a:hover {
    background: color-mix(in srgb, var(--nnw-accent, #b5813a) 28%, transparent);
  }
}

.news-index__title:focus-visible {
  color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
  text-decoration: underline;
}

@media (hover: hover) and (pointer: fine) {
  .news-index__title:hover {
    color: color-mix(in srgb, var(--nnw-primary, #8e2035) 78%, black);
    text-decoration: underline;
  }
}

@media (hover: hover) and (pointer: fine) {
  .news-index__item:hover .news-index__image img {
    filter: brightness(0.94);
  }
}

.not-found__home:focus-visible {
  background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
}

@media (hover: hover) and (pointer: fine) {
  .not-found__home:hover {
    background: color-mix(in srgb, var(--nnw-primary, #8e2035) 85%, black);
  }
}

/* Slider arrows are filled on hover; with a dark header the fill is the accent colour. */
:root:has(.site-header[data-theme-header='dark']) .hero-slider__controls > button:focus-visible,
:root:has(.site-header[data-theme-header='dark']) .slider__controls > button:focus-visible {
  border-color: var(--nnw-accent, #b5813a);
  background: var(--nnw-accent, #b5813a);
  color: var(--nnw-text, #241a1d);
}
@media (hover: hover) and (pointer: fine) {
  :root:has(.site-header[data-theme-header='dark']) .hero-slider__controls > button:hover,
  :root:has(.site-header[data-theme-header='dark']) .slider__controls > button:hover {
    border-color: var(--nnw-accent, #b5813a);
    background: var(--nnw-accent, #b5813a);
    color: var(--nnw-text, #241a1d);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-title,
  .site-languages a,
  .news-index__title,
  .news-index__image img,
  .not-found__home {
    transition-property: background-color, border-color, box-shadow, color, transform, filter;
    transition-duration: var(--nnw-duration, 160ms);
    transition-timing-function: var(--nnw-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }

  .not-found__home:focus-visible {
    transform: translateY(-2px);
  }

  @media (hover: hover) and (pointer: fine) {
    .not-found__home:hover {
      transform: translateY(-2px);
    }
  }
}