/* home 2026-10*/
@media (min-width: 1200px) {
	.context-front-new .p-page-top.parallax {
	  height: 100vh !important;
	}
	.context-front-new .fa-linkedin::before {
	  xxxcolor: #fff;
	}
	.context-front-new.scrolled .fa-linkedin::before {
	  color: unset;
	}
	.context-front-new .navbar.scrolling-navbar {
	  xxxbackground-color: transparent;
	}
	.context-front-new.scrolled .navbar.scrolling-navbar  {
	  background-color: #FFF;
	  font-size: 1.2rem;
	  letter-spacing: 1px;
	}
	.context-front-new .menu--hub-main-navigation a {
	  xxxcolor: white;
	  text-transform: uppercase;
	  font-size: 1.2em;
	}
	.context-front-new.scrolled .menu--hub-main-navigation a {
	  color: #0059ab;
	  font-size: 1.1em;
	}
	.context-front-new .menu--hub-main-navigation  a:hover, .menu--hub-main-navigation  .navbar a:focus {
	  color: #efefef;
	}
}



/* =====================================================================
   UNIDO Knowledge Hub · New front page (2026-10)

   1. Tokens
   2. Front page header / navbar   (.context-front-new)
   3. Hero                         (.hub-hero)
   4. Teaser cards                 (.hub-teasers)
   5. Videos                       (.hub-videos)
   6. Reduced motion
   ===================================================================== */


/* =====================================================================
   1. Tokens
   One place for every colour; each section reads from here.
   ===================================================================== */

:root {
  /* brand */
  --hub-navy:        #1f5286;   /* dark sections, headings */
  --hub-blue:        #0059AB;   /* UNIDO primary, links */
  --hub-accent:      #7FC0EE;   /* light blue from the logo; alt: #F4B63F amber, #6FD3C1 teal */

  /* on dark backgrounds (hero, videos) */
  --hub-dark-muted:  #B7C7D9;
  --hub-dark-line:   #3A5775;
  --hub-dark-btn-line: #5C7C9C;

  /* on light backgrounds (cards) */
  --hub-muted:       #4A5B70;
  --hub-line:        #E0E9F3;
  --hub-line-hover:  #BFD3EA;
  --hub-tint:        #F4F7FB;
  --hub-img-ph:      #D6E6F5;   /* image placeholder while loading */

  /* shape & type */
  --hub-radius-card:  1rem;
  --hub-radius-video: .875rem;
  --hub-h2-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem);
}


/* =====================================================================
   2. Front page header / navbar  (desktop only)
   ===================================================================== */

@media (min-width: 1200px) {
  .context-front-new .p-page-top.parallax {
    height: 100vh !important;
  }

  /* menu links */
  .context-front-new .menu--hub-main-navigation a {
    text-transform: uppercase;
    font-size: 1.2em;
  }
  .context-front-new .menu--hub-main-navigation a:hover,
  .context-front-new .menu--hub-main-navigation a:focus {
    color: #efefef;
  }

  /* after scrolling */
  .context-front-new.scrolled .navbar.scrolling-navbar {
    background-color: #fff;
    font-size: 1.2rem;
    letter-spacing: 1px;
  }
  .context-front-new.scrolled .menu--hub-main-navigation a {
    color: var(--hub-blue);
    font-size: 1.1em;
  }
  .context-front-new.scrolled .fa-linkedin::before {
    color: unset;
  }
}


/* =====================================================================
   3. Hero  (.hub-hero) — only what Bootstrap/MDB utilities can't express
   ===================================================================== */

.hub-hero {
  min-height: 760px;
  background: var(--hub-navy) url("../img/hero-b-bg.svg") right center / cover no-repeat;
}
.hub-hero a { text-decoration: none; }

/* header */
.hub-hero .navbar .nav-link       { color: #fff; font-weight: 500; }
.hub-hero .navbar .nav-link:hover { color: var(--hub-accent); }
.hub-hero .btn-outline-light {
  border-color: var(--hub-dark-btn-line);
  font-size: 1rem;
  padding: .5rem 1.25rem;
}

.hub-logo-word { font-size: 1.625rem; font-weight: 800; letter-spacing: .05em; color: #fff; }
.hub-logo-sub  { font-size: 1.25rem; font-weight: 600; line-height: 1; color: var(--hub-accent); }
.hub-logo-rule { width: 1px; height: 36px; background: var(--hub-dark-line); }

/* headline */
.hub-eyebrow {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--hub-accent);
}
.hub-title {
  max-width: 15em;
  font-size: clamp(2.5rem, 2rem + 2.6vw, 4.25rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.04;
}
.text-hub-muted { color: var(--hub-dark-muted) !important; }

/* focus pills */
.hub-pill       { border: 1px solid var(--hub-line); color: #fff; }
.hub-pill:hover { border-color: var(--hub-accent); color: var(--hub-accent); }

/* bottom entry links */
.hub-entry {
  border-top: 2px solid var(--hub-dark-line);
  color: #fff;
  transition: border-color .2s;
}
.hub-entry.is-active,
.hub-entry:hover            { border-top-color: var(--hub-accent); color: #fff; }
.hub-arrow                  { flex-shrink: 0; transition: transform .2s; }
.hub-entry:hover .hub-arrow { transform: translateX(4px); }


/* =====================================================================
   4. Teaser cards  (.hub-teasers) — "Discover our Tools!"
   Add "hub-teasers" (optionally "hub-teasers--tinted") to the wrapper
   around the .container. The hover lift uses `translate`, so it doesn't
   fight the Tor inview/hover animations that use `transform`.
   ===================================================================== */

.hub-teasers--tinted { background: var(--hub-tint); padding-block: 4rem; }

.hub-teasers h2 {
  margin: 0 0 .5rem;
  color: var(--hub-navy);
  font-size: var(--hub-h2-size);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* card */
.hub-teasers .card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--hub-line);
  border-radius: var(--hub-radius-card);
  transition: translate .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hub-teasers .card:hover,
.hub-teasers .card:focus-within {
  translate: 0 -4px;
  border-color: var(--hub-line-hover);
  box-shadow: 0 16px 32px -16px rgba(11, 37, 69, .28);
}
.hub-teasers .card .stretched-link:focus-visible { outline: none; }
.hub-teasers .card:has(.stretched-link:focus-visible) {
  outline: 3px solid var(--hub-accent);
  outline-offset: 3px;
}
.hub-teasers .card .inner { display: flex; flex-direction: column; }

/* image: same crop whatever the upload size */
.hub-teasers .card .overflow-hidden {
  aspect-ratio: 16 / 10;
  background: var(--hub-img-ph);
}
.hub-teasers .card .overflow-hidden img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* body */
.hub-teasers .card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: .625rem;
  padding: 1.25rem 1.5rem 1.5rem;
}
.hub-teasers .card-body > a { color: var(--hub-navy); text-decoration: none; }

.hub-teasers .card-title {
  margin: 0;
  color: var(--hub-navy);
  font-size: 1.125rem !important;  /* overrides .fs-5 */
  font-weight: 700;
  line-height: 1.3;
  text-transform: none !important; /* overrides .text-uppercase */
}
.hub-teasers .card-title p { display: inline; margin: 0; }

.hub-teasers .card-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
  color: var(--hub-muted);
  font-size: .9375rem;
  line-height: 1.55;
}
.hub-teasers .card-text p { margin: 0; }

/* "Open tool" CTA (span added in paragraph--teaser-item.html.twig) */
.hub-teasers .hub-teaser-cta {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: auto;
  padding-top: .5rem;
  color: var(--hub-blue);
  font-size: .9375rem;
  font-weight: 600;
}
.hub-teasers .hub-teaser-cta svg                 { transition: transform .2s ease; }
.hub-teasers .card:hover .hub-teaser-cta svg     { transform: translateX(3px); }
.hub-teasers .card:has(a.ext) .hub-teaser-cta svg { rotate: -45deg; }  /* external link */

/* extlink module icon: hidden, the CTA arrow shows it instead */
.hub-teasers .card-body > a.ext > svg,
.hub-teasers .card-body > a.ext > .extlink { display: none; }


/* =====================================================================
   5. Videos  (.hub-videos)
   Add "hub-videos" next to "fill-primary" on the section wrapper.
   ===================================================================== */

.hub-videos {
  background: var(--hub-navy) !important;   /* remove to keep the theme's primary blue */
  color: #fff;
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) !important;
}

/* optional heading */
.hub-videos .hub-videos-eyebrow {
  margin: 0 0 .75rem;
  color: var(--hub-accent);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hub-videos h2 {
  margin: 0 0 2rem;
  color: #fff;
  font-size: var(--hub-h2-size);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* video item */
.hub-videos .paragraph--type--video {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 16:9 frame, replaces the module's padding hack */
.hub-videos .video-embed-field-responsive-video {
  position: relative;
  aspect-ratio: 16 / 9;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden;
  background: #061a2e;
  border-radius: var(--hub-radius-video);
  box-shadow: 0 0 0 1px var(--hub-dark-line), 0 20px 40px -20px rgba(0, 0, 0, .6);
  transition: box-shadow .25s ease, translate .25s ease;
}
.hub-videos .video-embed-field-responsive-video::after { display: none !important; }
.hub-videos .video-embed-field-responsive-video iframe {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
.hub-videos .paragraph--type--video:hover .video-embed-field-responsive-video,
.hub-videos .paragraph--type--video:focus-within .video-embed-field-responsive-video {
  translate: 0 -3px;
  box-shadow: 0 0 0 2px var(--hub-accent), 0 24px 48px -20px rgba(0, 0, 0, .7);
}

/* caption with play badge */
.hub-videos .field--name-field-captions {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
}
.hub-videos .field--name-field-captions::before {
  content: "";
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: -.0625rem;
  border: 1px solid var(--hub-dark-line);
  border-radius: 50%;
  background: no-repeat 56% 50% / .625rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%237FC0EE'/%3E%3C/svg%3E");
}
.hub-videos .field--name-field-captions p {
  margin: 0;
  color: #fff;
  font-size: 1.0625rem;
  line-height: 1.4;
}
.hub-videos .field--name-field-captions strong { font-weight: 600; }


/* =====================================================================
   6. Reduced motion
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
  .hub-entry,
  .hub-arrow,
  .hub-teasers .card,
  .hub-teasers .hub-teaser-cta svg,
  .hub-videos .video-embed-field-responsive-video { transition: none; }

  .hub-teasers .card:hover,
  .hub-teasers .card:focus-within,
  .hub-videos .paragraph--type--video:hover .video-embed-field-responsive-video,
  .hub-videos .paragraph--type--video:focus-within .video-embed-field-responsive-video { translate: none; }

  .hub-entry:hover .hub-arrow,
  .hub-teasers .card:hover .hub-teaser-cta svg { transform: none; }
}


.view-news-ticker img {
    border-radius: var(--hub-radius-video);
}