/*
 * NDS layer — DGA "Platforms Code" national design system
 * (https://design.dga.gov.sa), applied on top of the existing ientv theme.
 *
 * Loaded last from html.html.twig so it overrides css/sass/styles.css,
 * css/sass/new-css/style.css and css/custom.css without changing the theme's
 * templates, regions or class names. Tokens first, then components in page
 * order: stamp, header, page title + breadcrumb, sections + cards, forms,
 * buttons, footer.
 */

/* ---------- Tokens ---------- */
:root {
  --nds-font: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

  /* Primary (SA flag green) */
  --nds-primary-25: #f7fdf9;
  --nds-primary-50: #f3fcf6;
  --nds-primary-100: #dff6e7;
  --nds-primary-200: #b8eacb;
  --nds-primary-300: #88d8ad;
  --nds-primary-400: #54c08a;
  --nds-primary-500: #25935f;
  --nds-primary-600: #1b8354;
  --nds-primary-700: #166a45;
  --nds-primary-800: #14573a;
  --nds-primary-900: #104631;
  --nds-primary-950: #092a1e;
  --nds-footer: #074d31;

  /* Neutral */
  --nds-neutral-25: #fcfcfd;
  --nds-neutral-50: #f9fafb;
  --nds-neutral-100: #f3f4f6;
  --nds-neutral-200: #e5e7eb;
  --nds-neutral-300: #d2d6db;
  --nds-neutral-400: #9da4ae;
  --nds-neutral-500: #6c737f;
  --nds-neutral-600: #4d5761;
  --nds-neutral-700: #384250;
  --nds-neutral-800: #1f2a37;
  --nds-neutral-900: #111927;
  --nds-text: #161616;

  --nds-radius-sm: 4px;
  --nds-radius-md: 8px;
  --nds-radius-lg: 16px;
  --nds-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, .05);
  --nds-shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .1), 0 2px 4px -2px rgba(16, 24, 40, .06);
  --nds-container: 1280px;
}

/* ---------- Base typography ---------- */
html body,
body .header,
body footer,
body .menu-item-title,
body .menu-title,
body .banner-title,
body .news-title,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body a, body span, body li, body label, body div,
body button, body input, body select, body textarea {
  font-family: var(--nds-font);
}

/* Keep the icon fonts. */
body .fa, body .fas, body .far, body .fab, body .fa-solid, body .fa-brands,
body [class^="fa-"], body [class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}
body .fab, body .fa-brands {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important;
}

body {
  background: #fff;
  color: var(--nds-text);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--nds-neutral-900);
  font-weight: 700;
}

a {
  color: var(--nds-primary-600);
}

a:hover {
  color: var(--nds-primary-700);
}

:focus-visible {
  outline: 2px solid var(--nds-primary-600) !important;
  outline-offset: 2px;
}

.main-wrapper p,
.main-wrapper li,
.field--name-body {
  color: var(--nds-neutral-700);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
}

::selection {
  background: var(--nds-primary-100);
  color: var(--nds-primary-900);
}

/* Shared content width */
.header .header-contaner,
.digital-stamp-header,
.digital-stamp-body,
.banner-container,
.top-footer-container,
.bottom-footer-container,
.homeblocks > *,
footer .copyright .container {
  max-width: var(--nds-container);
  margin-inline: auto;
  padding-inline: 24px;
  width: 100%;
}

/* ---------- Digital stamp (official government website banner) ---------- */
.digital-stamp-card {
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--nds-neutral-100);
  color: var(--nds-text);
  font-size: .875rem;
}

.digital-stamp-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 40px;
  padding-block: .25rem;
}

.digital-stamp-header > img {
  width: 24px;
  height: auto;
}

.digital-stamp-card .digital-stamp-title {
  margin: 0;
  color: var(--nds-text);
  font-size: .875rem;
  font-weight: 400;
}

.btn-digital-stamp-card {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  border: 0 !important;
  border-radius: var(--nds-radius-sm);
  background: transparent !important;
  color: var(--nds-primary-700) !important;
  font-size: .875rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.btn-digital-stamp-card:hover {
  color: var(--nds-primary-800) !important;
}

.btn-digital-stamp-card img {
  width: 14px;
  transition: transform .2s;
}

.btn-digital-stamp-card[aria-expanded="true"] img {
  transform: rotate(180deg);
}

.digital-stamp-body {
  padding-block: 1.25rem 1.5rem;
  border-top: 1px solid var(--nds-neutral-200);
}

.digital-stamp-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
}

.digital-stamp-container .box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.digital-stamp-container .box > img {
  flex: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid var(--nds-primary-700);
  border-radius: 999px;
}

.digital-stamp-container .box h4 {
  margin: 0 0 .25rem;
  color: var(--nds-text);
  font-size: 1rem;
  font-weight: 600;
}

.digital-stamp-container .box p {
  margin: 0;
  color: var(--nds-neutral-700);
  font-size: .875rem;
}

.digital-stamp-card .green-text {
  color: var(--nds-primary-700);
}

.stamp-link-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--nds-neutral-200);
}

.stamp-link-box img {
  height: 28px;
  width: auto;
}

.stamp-link-box p {
  margin: 0;
}

.stamp-link-box a {
  color: var(--nds-primary-700);
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 767px) {
  .digital-stamp-container {
    grid-template-columns: 1fr;
  }
}

/* ---------- Header (white, 72px, underline on hover / active) ---------- */
.header,
.header.of-White-Header,
.header.fixed-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff !important;
  border-top: 0;
  border-bottom: 1px solid var(--nds-neutral-200);
  box-shadow: var(--nds-shadow-xs);
}

.header .top-header:empty,
.header .top-header .top-left-header:empty {
  display: none;
}

.header .bottom-header {
  min-height: 72px;
  align-items: stretch !important;
  gap: 1.5rem;
  padding: 0 !important;
}

.header .bottom-header-logo {
  display: flex;
  align-items: center;
}

.header .bottom-header-logo img {
  width: auto !important;
  height: 52px;
}

.header .bottom-header > nav,
.header .bottom-header nav {
  display: flex;
  align-items: stretch;
  margin-inline-end: auto;
}

.header .bottom-header-menu {
  align-items: stretch;
  gap: .25rem;
  margin: 0;
  padding: 0;
}

.header .bottom-header-menu > .menu-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.header .bottom-header-menu > .menu-item > a,
.header .bottom-header-menu > .menu-item > .dropdown-menu > a,
.header .menu-drop {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  gap: 6px;
  padding: 0 .9rem !important;
  border-radius: 0;
  color: var(--nds-text) !important;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.header .menu-item-title {
  font-size: 1rem !important;
  font-weight: 500;
}

.header .menu-drop i {
  font-size: .7rem;
  color: var(--nds-neutral-600);
}

.header .menu-drop::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4px;
  border-radius: 4px 4px 0 0;
  background: transparent;
  transition: background-color .15s;
}

.header .menu-drop:hover,
.header .bottom-header-menu > .menu-item:hover > a,
.header .bottom-header-menu > .menu-item:hover .menu-drop {
  background: var(--nds-neutral-100);
  color: var(--nds-text) !important;
}

.header .menu-item.is-active .menu-drop,
.header .menu-drop.is-active {
  color: var(--nds-primary-600) !important;
  font-weight: 600;
}

.header .menu-item.is-active .menu-drop::after,
.header .menu-drop.is-active::after,
.header .menu-drop:hover::after {
  background: var(--nds-primary-600);
}

.header .menu-item:not(.is-active) .menu-drop:hover::after {
  background: var(--nds-neutral-300);
}

.header .dropdown-menu {
  display: flex;
  align-items: stretch;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  position: relative;
}

.header .dropdown-menu .dropdown-content {
  top: 100%;
  min-width: 220px;
  padding: .5rem 0 !important;
  border: 1px solid var(--nds-neutral-200);
  border-radius: var(--nds-radius-md) !important;
  background: #fff;
  box-shadow: var(--nds-shadow-md);
}

.header .dropdown-menu .dropdown-content li {
  border: 0 !important;
  background: none !important;
}

.header .dropdown-menu .dropdown-content li::after {
  display: none !important;
}

.header .dropdown-menu .dropdown-content li a {
  display: block;
  padding: .55rem 1rem !important;
  color: var(--nds-text) !important;
  font-size: .9375rem;
  font-weight: 400;
}

.header .dropdown-menu .dropdown-content li a:hover {
  background: var(--nds-neutral-100);
  color: var(--nds-primary-700) !important;
}

/* Language switcher: NDS neutral/secondary button */
.header .language-switcher-language-url,
.header .block-language,
.header [id*="languageswitcher"] {
  display: flex;
  align-items: center;
}

.header .language-switcher-language-url ul,
.header .links {
  display: flex;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header .language-switcher-language-url .is-active,
.header li.is-active:has(> .language-link) {
  display: none;
}

.header a.language-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 1rem !important;
  border: 1px solid var(--nds-neutral-300) !important;
  border-radius: var(--nds-radius-sm) !important;
  background: #fff !important;
  color: var(--nds-text) !important;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
}

.header a.language-link::before {
  content: "\f0ac";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .85rem;
  color: var(--nds-neutral-600);
}

.header a.language-link:hover {
  background: var(--nds-neutral-100) !important;
  border-color: var(--nds-neutral-400) !important;
}

/* Mobile menu panel */
@media (max-width: 991px) {
  .header .bottom-header {
    align-items: center !important;
    min-height: 64px;
  }

  .header .bottom-header-logo img {
    height: 44px;
  }

  .header .bottom-header-menu.open {
    background: #fff;
    box-shadow: var(--nds-shadow-md);
  }

  .header .bottom-header-menu > .menu-item > a,
  .header .menu-drop {
    height: auto;
    padding: .75rem 1rem !important;
  }

  .header .menu-drop::after {
    inset-inline: auto 0;
    top: 0;
    width: 4px;
    height: auto;
    border-radius: 0 4px 4px 0;
  }

  .top-mobile-menu .menu-mobile-title {
    color: var(--nds-neutral-900);
    font-weight: 700;
  }
}

/* ---------- Page title band + breadcrumb ---------- */
.top-banner {
  position: relative;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 0 2rem;
  background: var(--nds-neutral-50) !important;
  border-bottom: 1px solid var(--nds-neutral-200);
}

.top-banner::before,
.top-banner::after {
  display: none !important;
}

.NDSbreadcrumb {
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.NDSbreadcrumb .bread-crombs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  padding-block: 1.25rem .5rem;
  font-size: .875rem;
}

.NDSbreadcrumb .bread-crombs a,
.NDSbreadcrumb .bread-crombs span {
  color: var(--nds-neutral-600) !important;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.NDSbreadcrumb .bread-crombs a:hover {
  color: var(--nds-primary-700) !important;
}

.NDSbreadcrumb .bread-crombs a + a::before,
.NDSbreadcrumb .bread-crombs a + span::before {
  content: "\f104";
  display: inline-block;
  margin-inline-end: .5rem;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .7rem;
  color: var(--nds-neutral-400);
  text-decoration: none;
}

html[dir="ltr"] .NDSbreadcrumb .bread-crombs a + a::before,
html[dir="ltr"] .NDSbreadcrumb .bread-crombs a + span::before {
  content: "\f105";
}

.NDSbreadcrumb .bread-crombs > :last-child {
  color: var(--nds-text) !important;
  font-weight: 500;
  text-decoration: none;
  pointer-events: none;
}

.top-banner .main-banner-bottom {
  padding: .5rem 0 0 !important;
  min-height: 0 !important;
}

.top-banner .banner-title,
.top-banner .banner-title h1,
.top-banner .banner-title h2,
.top-banner .banner-title span {
  margin: 0;
  color: var(--nds-neutral-900) !important;
  font-size: 2.25rem !important;
  font-weight: 700 !important;
  line-height: 1.3;
}

@media (max-width: 767px) {
  .top-banner .banner-title,
  .top-banner .banner-title h1,
  .top-banner .banner-title h2,
  .top-banner .banner-title span {
    font-size: 1.75rem !important;
  }
}

.main-wrapper {
  padding-block: 2.5rem 3rem;
}

/* ---------- Home hero ---------- */
.banner .video-layer {
  background: linear-gradient(0deg, rgba(9, 42, 30, .75) 0%, rgba(9, 42, 30, .2) 60%, rgba(9, 42, 30, .1) 100%) !important;
}

.banner .slide-item h1,
.banner .slide-item h2,
.banner .slide-item h3,
.banner .banner-title,
.banner .top-banner-text {
  color: #fff !important;
  font-weight: 700;
}

/* ---------- Home sections ---------- */
.homeblocks > div {
  padding-block: 3rem;
}

.homeblocks > div:nth-child(even) {
  max-width: none;
  background: var(--nds-neutral-50);
  padding-inline: max(24px, calc((100% - var(--nds-container)) / 2 + 24px));
}

.news-top {
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.news-title,
.news-title a,
.news-title a.btn-arrow,
.color-main-green {
  color: var(--nds-neutral-900) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.3;
  text-decoration: none;
}

.news-title a:hover {
  color: var(--nds-primary-700) !important;
}

.news-title a.btn-arrow::after {
  content: "\f104";
  margin-inline-start: .6rem;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 1rem;
  color: var(--nds-primary-600);
  vertical-align: middle;
}

html[dir="ltr"] .news-title a.btn-arrow::after {
  content: "\f105";
}

.news-title a.btn-arrow img,
.news-title a.btn-arrow::before {
  display: none;
}

/* ---------- Cards ---------- */
.progs-box,
.news-box,
.service-box,
.views-row .card,
.card {
  overflow: hidden;
  border: 1px solid var(--nds-neutral-200) !important;
  border-radius: var(--nds-radius-md) !important;
  background: #fff;
  box-shadow: var(--nds-shadow-xs) !important;
  transition: box-shadow .2s, border-color .2s;
}

.progs-box:hover,
.news-box:hover,
.service-box:hover,
.card:hover {
  border-color: var(--nds-neutral-300) !important;
  box-shadow: var(--nds-shadow-md) !important;
}

.progs-box a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.progs-box-image {
  background: var(--nds-neutral-100);
  border-radius: 0 !important;
}

.progs-box-image img {
  display: block;
  width: 100%;
  object-fit: cover;
}

.progs-box-brief,
.progs-box .title-padding {
  padding: 1rem !important;
  color: var(--nds-neutral-900) !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  line-height: 1.5;
}

.progs-box:hover .progs-box-brief {
  color: var(--nds-primary-700) !important;
}

/* Slider dots */
.slick-dots li button::before {
  color: var(--nds-neutral-300) !important;
  opacity: 1 !important;
  font-size: 10px !important;
}

.slick-dots li.slick-active button::before {
  color: var(--nds-primary-600) !important;
}

/* ---------- Forms (NDS input: 40px, 4px radius, neutral border) ---------- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
select,
textarea {
  min-height: 40px;
  border: 1px solid var(--nds-neutral-400) !important;
  border-radius: var(--nds-radius-sm) !important;
  background-color: #fff !important;
  box-shadow: none !important;
  color: var(--nds-text) !important;
  font-size: 1rem;
}

.form-control:hover,
select:hover,
textarea:hover {
  border-color: var(--nds-neutral-600) !important;
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--nds-primary-600) !important;
  box-shadow: 0 0 0 3px rgba(27, 131, 84, .15) !important;
  outline: none !important;
}

label,
.control-label,
.form-item label {
  margin-bottom: .375rem;
  color: var(--nds-text) !important;
  font-size: .9375rem !important;
  font-weight: 500 !important;
}

.form-required::after {
  color: #d92d20;
}

.webform-submission-form,
.main-wrapper form.webform-submission-form {
  border: 1px solid var(--nds-neutral-200);
  border-radius: var(--nds-radius-md) !important;
  box-shadow: var(--nds-shadow-xs) !important;
}

/* ---------- Buttons (NDS primary: 40px, 4px radius, 500 weight) ---------- */
.btn,
.button,
.form-submit,
button[type="submit"],
input[type="submit"],
.btn-primary,
.webform-button--submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 1rem;
  border-radius: var(--nds-radius-sm) !important;
  font-size: 1rem;
  font-weight: 500 !important;
  line-height: 1.2;
}

.btn-primary,
.button--primary,
.form-submit,
.webform-button--submit,
button[type="submit"],
input[type="submit"] {
  border: 1px solid var(--nds-primary-600) !important;
  background: var(--nds-primary-600) !important;
  color: #fff !important;
}

.btn-primary:hover,
.button--primary:hover,
.form-submit:hover,
.webform-button--submit:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  border-color: var(--nds-primary-700) !important;
  background: var(--nds-primary-700) !important;
}

.btn-primary:active,
.form-submit:active {
  background: var(--nds-primary-900) !important;
}

/* ---------- Pager ---------- */
.pager__items,
.pagination {
  gap: .25rem;
}

.pager__item a,
.page-link {
  min-width: 40px;
  min-height: 40px;
  border: 0 !important;
  border-radius: var(--nds-radius-sm) !important;
  color: var(--nds-text) !important;
}

.pager__item.is-active a,
.page-item.active .page-link {
  background: var(--nds-primary-600) !important;
  color: #fff !important;
}

/* ---------- Footer (NDS UI shell → Footer) ----------
   Markup: templates/includes/nds-footer.html.twig. Dark variant, as used on
   design.dga.gov.sa itself. Swap --nds-footer-* for the light component
   variant: bg #f3f4f6, text #161b26, links #0d121c. */
:root {
  --nds-footer-bg: var(--nds-footer);
  --nds-footer-text: #fff;
  --nds-footer-muted: rgba(255, 255, 255, .8);
  --nds-footer-border: rgba(255, 255, 255, .2);
  --nds-footer-btn-hover: rgba(255, 255, 255, .12);
}

footer.nds-footer {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--nds-footer-bg) !important;
  color: var(--nds-footer-text);
}

.nds-footer__content {
  display: flex;
  flex-direction: column;
  max-width: var(--nds-container);
  margin-inline: auto;
  padding: 40px 24px 24px;
}

/* nav-links: link-group columns, then the social + accessibility column */
.nds-footer__nav-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px;
  padding: 16px 0 32px;
}

.nds-footer__column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.nds-footer__column .block {
  margin: 0;
}

.nds-footer .menu-title,
.nds-footer__column-title {
  width: auto;
  margin: 0;
  padding: 0 0 8px;
  border: 0 !important;
  color: var(--nds-footer-text) !important;
  font-size: 1.125rem !important;   /* 18px */
  font-weight: 600 !important;
  line-height: 1.6;
}

.nds-footer .menu-title::after {
  display: none !important;
}

.nds-footer .list-unstyled {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* NDS link, size sm, neutral: 14px, 8px label-to-icon gap, 2px focus radius */
.nds-footer .nds-link,
.nds-footer .list-unstyled a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 2px;
  color: var(--nds-footer-text) !important;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.43;
  text-decoration: none;
}

.nds-footer .nds-link:hover .nds-link__label,
.nds-footer .list-unstyled a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nds-footer .nds-link:focus-visible {
  outline: 2px solid var(--nds-footer-text) !important;
  outline-offset: 2px;
}

/* Social media + accessibility tools: 32px outline icon buttons */
.nds-footer__column--tools .nds-footer__column-title:not(:first-child) {
  margin-top: 16px;
}

.nds-footer__icon-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nds-footer__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--nds-footer-border) !important;
  border-radius: var(--nds-radius-sm) !important;
  background: transparent !important;
  color: var(--nds-footer-text) !important;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}

.nds-footer__icon-btn span {
  font-size: .8125rem;
}

.nds-footer__icon-btn:hover {
  border-color: var(--nds-footer-text) !important;
  background: var(--nds-footer-btn-hover) !important;
}

.nds-footer__icon-btn:focus-visible {
  outline: 2px solid var(--nds-footer-text) !important;
  outline-offset: 2px;
}

.nds-footer__icon-btn[aria-pressed="true"] {
  border-color: var(--nds-footer-text) !important;
  background: var(--nds-footer-text) !important;
  color: var(--nds-footer-bg) !important;
}

.nds-footer__icon-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* basic: actions + copyright + extra actions, logos at the far end */
.nds-footer__basic {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--nds-footer-border);
}

.nds-footer__actions-copyright {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nds-footer__actions ul,
.nds-footer__extra-actions ul {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nds-footer__actions a {
  color: var(--nds-footer-text) !important;
  font-size: .875rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nds-footer__copyright {
  margin: 0;
  color: var(--nds-footer-text) !important;
  font-size: .875rem;   /* 14px semibold */
  font-weight: 600;
}

.nds-footer__extra-actions a {
  color: var(--nds-footer-muted) !important;
  font-size: .75rem;    /* 12px */
  text-decoration: none;
}

.nds-footer__extra-actions a:hover {
  color: var(--nds-footer-text) !important;
  text-decoration: underline;
}

.nds-footer__logos {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nds-footer__logo {
  display: inline-flex;
  border-radius: var(--nds-radius-sm);
}

.nds-footer__logo img {
  display: block;
  width: auto;
  height: 48px;
}

.nds-footer__logo:focus-visible {
  outline: 2px solid var(--nds-footer-text) !important;
  outline-offset: 2px;
}

/* Under 600px the NDS footer stacks every part vertically. */
@media (max-width: 599px) {
  .nds-footer__nav-links {
    grid-template-columns: 1fr;
  }

  .nds-footer__basic {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Accessibility tools (scripts/nds/nds-a11y.js) ---------- */
html.nds-zoom-1 body { zoom: 1.1; }
html.nds-zoom-2 body { zoom: 1.2; }
html.nds-zoom-3 body { zoom: 1.3; }

html.nds-grayscale {
  filter: grayscale(1);
}

/* ---------- Specificity fixes for the legacy home rules (style.css) ---------- */
body.nds .homeblocks .news-top .news-title a.btn-arrow.color-main-green,
body.nds .homeblocks .news-top .news-title a {
  color: var(--nds-neutral-900) !important;
}

body.nds .homeblocks .news-top .news-title a:hover {
  color: var(--nds-primary-700) !important;
}

body.nds .homeblocks .news-top {
  position: relative;
  top: auto;
  margin: 0 0 1.5rem;
  padding: 0;
  height: auto;
}

body.nds .homeblocks .progs-section {
  padding: 0 !important;
}

body.nds .homeblocks .progs-section .progs-boxies {
  margin-top: 0;
}

body.nds .homeblocks .services-section.news-section,
body.nds .homeblocks .programshome {
  padding-block: 3rem;
}

/* Language switcher list sits vertically centred in the 72px header row. */
.header .bottom-header ul.links,
.header .bottom-header ul.links > li {
  display: flex;
  align-items: center;
  height: auto;
  align-self: center;
}

/* Legacy cyan hamburger icon → NDS neutral-900. */
.header .mobile-menu-open img {
  filter: grayscale(1) brightness(.25);
}

/* ---------- NDS content card with Details button ----------
   Markup (views-view-fields--*): .progs-box > .nds-card >
   .progs-box-image + .progs-box-body (meta, title, text, footer). */
.progs-boxies:not(.slick-initialized) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

.progs-boxies:not(.slick-initialized) > .progs-box {
  width: auto !important;
  margin: 0 !important;
}

.progs-boxies.slick-initialized .slick-track {
  display: flex !important;
}

.progs-boxies.slick-initialized .slick-slide {
  height: auto;
  padding-inline: .75rem;
}

.progs-boxies.slick-initialized .slick-slide > div,
.progs-boxies.slick-initialized .progs-box {
  height: 100%;
}

.progs-box {
  display: flex !important;
  flex-direction: column;
}

.nds-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
}

.nds-card .progs-box-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.nds-card .progs-box-image a,
.nds-card .progs-box-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.progs-box:hover .nds-card .progs-box-image img {
  transform: scale(1.03);
}

.nds-card .progs-box-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: .5rem;
  padding: 1rem;
}

.nds-card .progs-box-meta {
  color: var(--nds-neutral-500) !important;
  font-size: .8125rem;
  font-weight: 400;
}

.nds-card h3.progs-box-brief {
  margin: 0;
  padding: 0 !important;
  font-size: 1.0625rem !important;
  font-weight: 600 !important;
  line-height: 1.5;
}

.nds-card h3.progs-box-brief a {
  color: var(--nds-neutral-900) !important;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nds-card h3.progs-box-brief a:hover {
  color: var(--nds-primary-700) !important;
  text-decoration: underline;
}

.nds-card .progs-box-text {
  margin: 0;
  color: var(--nds-neutral-600) !important;
  font-size: .9375rem !important;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nds-card .progs-box-footer {
  margin-top: auto;
  padding-top: .75rem;
}

/* NDS secondary (outline) button, sm/md: 40px, 4px radius. */
.nds-btn-details {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 40px;
  padding: 0 1rem;
  border: 1px solid var(--nds-primary-600);
  border-radius: var(--nds-radius-sm);
  background: #fff;
  color: var(--nds-primary-700) !important;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  transition: background-color .15s, color .15s, border-color .15s;
}

.nds-btn-details i {
  font-size: .8rem;
  transition: transform .15s;
}

.nds-btn-details:hover {
  border-color: var(--nds-primary-600);
  background: var(--nds-primary-600);
  color: #fff !important;
}

html[dir="rtl"] .nds-btn-details:hover i {
  transform: translateX(-3px);
}

html[dir="ltr"] .nds-btn-details:hover i {
  transform: translateX(3px);
}

.nds-btn-details:active {
  background: var(--nds-primary-800);
  border-color: var(--nds-primary-800);
  color: #fff !important;
}

/* Card without an image (programmes listing) */
.nds-card:not(:has(.progs-box-image)) .progs-box-body {
  padding: 1.25rem;
}

/* Legacy fixed card height / bottom padding (custom.css, style.css) no
   longer apply: the card grows with its content and the footer is pinned. */
body.nds .progs-section .progs-box,
body.nds.home .progs-section .progs-box {
  height: auto !important;
  min-height: 0;
  padding-bottom: 0 !important;
}

.progs-box .progs-box-footer a.nds-btn-details {
  display: inline-flex;
  width: auto;
  font-size: .9375rem;
}

body.nds .nds-card p.progs-box-text {
  padding: 0 !important;
  margin: 0 !important;
  text-align: start !important;
}

/* Legacy breadcrumb "/" separator — the NDS chevron replaces it. */
.NDSbreadcrumb .bread-crombs a::after,
.NDSbreadcrumb .bread-crombs span::after {
  content: none !important;
  display: none !important;
}

/* ---------- Home sections: full width, same side gutters (2026-11-07) ----------
   Each section spans the page with alternating bands; legacy margin/padding
   rules in style.css had pushed some sections to one side on wide screens. */
body.nds .homeblocks > div {
  max-width: none !important;
  width: 100%;
  margin: 0 !important;
  padding: 3rem clamp(16px, 3vw, 48px) !important;
  background: #fff;
}

body.nds .homeblocks > div:nth-child(even) {
  background: var(--nds-neutral-50);
}

body.nds .homeblocks > div .programshome,
body.nds .homeblocks > div .services-section,
body.nds .homeblocks > div .block-style {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Slides carry the gap between cards as symmetric padding. The legacy
   one-sided .slick-slide margin (styles.css) shifted rows and let the next
   slide peek in; clip the list as well. */
body.nds .progs-boxies.slick-initialized .slick-slide {
  margin: 0 !important;
}

body.nds .homeblocks .progs-boxies.slick-initialized .slick-list {
  overflow: hidden;
}

/* ---------- "Follow us on YouTube": centred title and video ---------- */
body.nds .homeblocks .news-top:has(.news-title.text-center) {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}

body.nds .homeblocks .news-top:has(.news-title.text-center) > div {
  width: 100%;
}

body.nds .homeblocks .news-title.text-center {
  width: 100%;
  margin-bottom: 1.5rem;
  text-align: center;
}

body.nds .homeblocks .video-body {
  width: 100%;
  max-width: 960px;
  margin-inline: auto;
}

body.nds .homeblocks .video-body p {
  margin: 0;
}

body.nds .homeblocks .video-body iframe {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border-radius: var(--nds-radius-md);
}

/* ---------- NDS link with external icon (menu.html.twig) ----------
   16px outline icon (NDS iconography, 1.5px stroke) after the label,
   8px gap; mirrored in RTL so the arrow points along the reading
   direction. */
.nds-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nds-link__icon {
  flex: none;
  width: 16px;
  height: 16px;
}

html[dir="rtl"] .nds-link__icon {
  transform: scaleX(-1);
}

/* ---------- Section header: title + "View all" (NDS home page template) ---------- */
body.nds .homeblocks .news-top {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* The title keeps its link; the View all button now carries the arrow. */
body.nds .homeblocks .news-top .news-title a.btn-arrow::after {
  content: none !important;
  display: none !important;
}

/* NDS button: secondary outline, neutral, md (40px), 4px radius, 20px icon */
.nds-btn-view-all {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--nds-neutral-300);
  border-radius: var(--nds-radius-sm);
  background: #fff;
  color: var(--nds-text) !important;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none !important;
  transition: background-color .15s, border-color .15s;
}

.nds-btn-view-all:hover {
  border-color: var(--nds-neutral-400);
  background: var(--nds-neutral-100);
}

.nds-btn-view-all:active {
  background: var(--nds-neutral-200);
}

.nds-btn-view-all:focus-visible {
  outline: 2px solid var(--nds-primary-600) !important;
  outline-offset: 2px;
}

.nds-btn-view-all__icon {
  flex: none;
  width: 20px;
  height: 20px;
  transition: transform .15s;
}

/* Arrow points along the reading direction. */
html[dir="rtl"] .nds-btn-view-all__icon {
  transform: scaleX(-1);
}

html[dir="ltr"] .nds-btn-view-all:hover .nds-btn-view-all__icon {
  transform: translateX(3px);
}

html[dir="rtl"] .nds-btn-view-all:hover .nds-btn-view-all__icon {
  transform: scaleX(-1) translateX(3px);
}

/* ---------- Carousel controls (NDS Components → Carousel) ----------
   Dots: 12px (md), 4px apart, neutral-200, active primary, 24px under the
   slides. Arrows: 40px (md) round buttons beside the slides. */
body.nds .progs-boxies .slick-dots {
  position: static;
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin: 24px 0 0;
  padding: 12px;
  list-style: none;
}

body.nds .progs-boxies .slick-dots li {
  width: auto;
  height: auto;
  margin: 0 4px;
  padding: 0;
}

body.nds .progs-boxies .slick-dots li button {
  display: block;
  width: 12px;
  height: 12px;
  min-height: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--nds-neutral-200) !important;
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transition: background-color .3s;
}

body.nds .progs-boxies .slick-dots li button::before {
  content: none !important;
  display: none !important;
}

body.nds .progs-boxies .slick-dots li button:hover {
  background: var(--nds-neutral-300) !important;
}

body.nds .progs-boxies .slick-dots li.slick-active button {
  background: var(--nds-primary-600) !important;
}

body.nds .progs-boxies .slick-dots li button:focus-visible {
  outline: 2px solid var(--nds-primary-600) !important;
  outline-offset: 2px;
}

/* Arrows sit outside the cards: reserve room only when slick shows them. */
body.nds .progs-boxies.slick-initialized:has(> .nds-carousel-arrow) {
  position: relative;
  padding-inline: 56px;
}

body.nds .progs-boxies .nds-carousel-arrow {
  position: absolute;
  top: calc(50% - 30px);   /* centre on the cards, above the dots row */
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--nds-neutral-200) !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: var(--nds-text) !important;
  box-shadow: var(--nds-shadow-xs);
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .3s;
}

body.nds .progs-boxies .nds-carousel-arrow::before {
  content: none !important;
  display: none !important;
}

body.nds .progs-boxies .nds-carousel-arrow svg {
  width: 24px;
  height: 24px;
}

html[dir="ltr"] body.nds .progs-boxies .nds-carousel-arrow--prev { left: 0; right: auto; }
html[dir="ltr"] body.nds .progs-boxies .nds-carousel-arrow--next { right: 0; left: auto; }
html[dir="rtl"] body.nds .progs-boxies .nds-carousel-arrow--prev { right: 0; left: auto; }
html[dir="rtl"] body.nds .progs-boxies .nds-carousel-arrow--next { left: 0; right: auto; }

/* The chevron points backwards ("<" in LTR); flip it for "next", and for
   "previous" in RTL where backwards is to the right. */
html[dir="ltr"] body.nds .progs-boxies .nds-carousel-arrow--next svg,
html[dir="rtl"] body.nds .progs-boxies .nds-carousel-arrow--prev svg {
  transform: scaleX(-1);
}

body.nds .progs-boxies .nds-carousel-arrow:hover {
  background: rgba(27, 131, 84, .2) !important;
}

body.nds .progs-boxies .nds-carousel-arrow:focus-visible {
  outline: 2px solid var(--nds-primary-600) !important;
  outline-offset: 2px;
}

body.nds .progs-boxies .nds-carousel-arrow.slick-disabled {
  opacity: .4;
  cursor: not-allowed;
}

@media (max-width: 575px) {
  body.nds .progs-boxies.slick-initialized:has(> .nds-carousel-arrow) {
    padding-inline: 44px;
  }

  body.nds .progs-boxies .nds-carousel-arrow {
    width: 32px;
    height: 32px;
  }
}

/* ---------- Equal card heights inside every slider row ---------- */
body.nds .progs-boxies.slick-initialized .slick-track {
  display: flex !important;
  align-items: stretch;
}

body.nds .progs-boxies.slick-initialized .slick-slide {
  display: flex !important;
  float: none;
  height: auto !important;
}

body.nds .progs-boxies.slick-initialized .slick-slide > div {
  display: flex;
  width: 100%;
}

body.nds .progs-boxies.slick-initialized .progs-box {
  flex: 1 1 auto !important;   /* legacy rule: flex 0 1 calc(25% - 50px) */
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
}

/* News: date, two-line title, three-line excerpt, button pinned to the
   bottom, so every news card lines up whatever the text length. */
body.nds .nds-card h3.progs-box-brief {
  min-height: calc(2 * 1.5em);
}

body.nds .nds-card .progs-box-text {
  min-height: calc(3 * 1.6em);
}

/* ---------- IEN TV in numbers: NDS metric cards ---------- */
.nds-numbers {
  padding: 3rem clamp(16px, 3vw, 48px);
  background: var(--nds-neutral-50);
}

/* Same inset as the card rows above (slides carry .75rem side padding). */
.nds-numbers__inner {
  padding-inline: .75rem;
}

.nds-numbers__title {
  margin: 0 0 1.5rem;
  color: var(--nds-neutral-900);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}

.nds-numbers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nds-metric {
  display: flex;
  flex-direction: column;
  border-radius: var(--nds-radius-lg);   /* 16px */
  background: #fff;
  box-shadow: var(--nds-shadow-md);
}

.nds-metric__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 0;
  margin-bottom: 24px;
}

.nds-metric__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--nds-radius-md);
  background: var(--nds-primary-50);
  color: var(--nds-primary-600);
}

.nds-metric__icon svg {
  width: 24px;
  height: 24px;
}

.nds-metric__label {
  margin: 0;
  color: var(--nds-neutral-700) !important;   /* #384250 */
  font-size: .875rem !important;
  font-weight: 500 !important;
  line-height: 1.43;
}

.nds-metric__value {
  margin: 0 0 24px;
  padding: 0 16px;
  color: var(--nds-neutral-800) !important;   /* #1F2A37 */
  font-size: 2.25rem !important;               /* 36px */
  font-weight: 700 !important;
  line-height: 1.22;                           /* 44px */
  font-variant-numeric: tabular-nums;
}

.nds-metric__divider {
  height: 1px;
  background: var(--nds-neutral-200);
}

.nds-metric__actions {
  display: flex;
  justify-content: flex-end;
  padding: 16px;
}