/* Global font choices */
:root{
  --font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
	
/* Colours */
  --brand-blue: #3f69dc;         /* primary brand blue */
  --brand-blue-rgb: 63, 105, 220;/* handy for rgba() */

  --brand-grey: #f3f3f3;
  --brand-grey-rgb: 243,243,243;
	
  --brand-green-lime: #afcb07;	
}



/* Base text */
html { font-size: 100%; }         /* keep default 16px for now */
body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;     /* don’t fake bold/italic */
  font-synthesis-style: none;
}

html, body {
  background: #f3f3f3; /* fallback for full-bleed areas */
}

.content-wrap {
  background: #f3f3f3; /* main content area */
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}


/* Headings use Poppins */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 600;                /* adjust per level later */
  line-height: 1.2;
  margin: 0;
}

/* Navigation can also use Poppins if you like */
#upper-nav, .upper-nav a { font-family: var(--font-head); }

/* Italic support is loaded for IBM Plex Sans (400 italic) */
em, i { font-style: italic; }

a:hover { color: var(--brand-blue); }

.btn-primary {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

/* with transparency */
.badge {
  background: rgba(var(--brand-blue-rgb), 0.12);
  color: var(--brand-blue);
  border: 1px solid rgba(var(--brand-blue-rgb), 0.3);
}




/* ===== Header (80px, sticky) ===== */
.site-header { position: sticky; top: 0; z-index: 1000; height: 100px; background: #fff; }
.site-header .header-inner {
  height: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 0 50px; box-sizing: border-box;
}
.site-header .h-left, .site-header .h-right { display: flex; align-items: center; }
.site-header .brand a { display: inline-flex; align-items: center; text-decoration: none; }
.site-header .brand img { display: block; height: 70px; width: auto; }

/* ===== Upper nav (typography + base) ===== */
.upper-nav { display: block; position: relative; z-index: 200; }


.upper-nav > ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.upper-nav > ul > li { position: relative; }

.upper-nav, .upper-nav a {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600; font-style: normal; font-synthesis-weight: none;
  -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;
}

.upper-nav a {
  display: inline-block; line-height: 1; padding: 8px 12px;
  color: var(--brand-blue); text-decoration: none; border-radius: 4px;
  background-color: transparent; transition: background-color 1s ease;
}
.upper-nav a:visited { color: var(--brand-blue); }
.upper-nav a:hover, .upper-nav a:focus, .upper-nav a:active { background-color: var(--brand-grey); }
.upper-nav a:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

/* ===== Dropdown ===== */
.upper-nav .dropdown {
  position: absolute; left: 0; top: 100%; min-width: 220px; display: none; background: #fff;                 /* white backplate */
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  z-index: 300;                     /* sit above page content */
  padding: 8px;                   /* keep your existing spacing */
}

.upper-nav .dropdown li { display: block; }
.upper-nav .dropdown a { display: block; white-space: nowrap; }

/* Reveal on hover or keyboard focus */
.upper-nav li:hover > .dropdown,
.upper-nav li:focus-within > .dropdown { display: block; }

/* ===== Caret for items with children ===== */
.upper-nav > ul > li.has-children > a { position: relative; padding-right: 20px; }
.upper-nav > ul > li.has-children > a::after {
  content: ""; position: absolute; right: 6px; top: 50%; transform: translateY(-30%);
  width: 0; height: 0; pointer-events: none;
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid var(--brand-blue);
}

/* Default */
.upper-nav .dropdown { left: 0; right: auto; }
/* You can delete: .upper-nav .dropdown.align-right { left:auto; right:0; } */

/* =========================
   Footer (EMA)
   ========================= */
:root{

  --ema-bg:   #f3f3f3;
  --footer-max: 1000px;
}

/* Footer */
#site-footer {
  background: var(--ema-bg);
  border-top: 1px solid rgba(0,0,0,.06);
  padding: 16px 0;
}

.footer-wrap {
  max-width: var(--footer-max);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.footer-left { flex: 1 1 320px; }
.footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

/* Search */
.site-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cfcfcf;
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  max-width: 520px;
}
.site-search input[type="search"] {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 16px;
  line-height: 1.2;
  padding: 6px 4px;
  width: 100%;
  min-width: 0;
  color: #333;
}
/* Search icon as a masked SVG */
.search-btn{
  border: 0;
  background: transparent;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-search{
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: var(--brand-blue);
  -webkit-mask: url('../SVG/Ico_Search-currentColor.svg') no-repeat center / contain;
          mask: url('../SVG/Ico_Search-currentColor.svg') no-repeat center / contain;
}

.site-search:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-blue) 30%, transparent);
  border-color: var(--brand-blue);
}

/* Contact */
/* Contact link: match upper-nav link style */
.contact-link{
  /* same font treatment as .upper-nav/.upper-nav a */
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 600; 
  font-style: normal; 
  font-synthesis-weight: none;
  -webkit-font-smoothing: auto; 
  -moz-osx-font-smoothing: auto;

  /* same box + colors as .upper-nav a */
  display: inline-block; 
  line-height: 1; 
  padding: 8px 12px;
  color: var(--brand-blue); 
  text-decoration: none; 
  border-radius: 4px;
  background-color: transparent; 
  transition: background-color 1s ease; /* keep your long fade */
}
.contact-link:visited { color: var(--brand-blue); }
.contact-link:hover,
.contact-link:focus,
.contact-link:active { background-color: var(--brand-grey); }
.contact-link:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }



/* ===========================
   Social icons list (layout)
   =========================== */
.social-list{
  display:flex;                 /* lay items horizontally */
  flex-direction: row;
  align-items:center;
  gap:10px;                     /* space between icons */
  list-style:none;              /* remove bullets */
  margin:0;
  padding:0;
}
.social-list li{ display:flex; }
/* Belt & braces: if something re-adds bullets */
.social-list li::marker{ content: none; }


/* ============================================
   Icon tile + glyph (with scalable size vars)
   ============================================ */
.social-list .icon-link{
  /* ---- Sizing controls ----
     Adjust these two to scale everything:
       --tile = blue box size
       --icon = glyph size as a fraction of the box
  */
  --tile: 40px;                 /* ← blue box size */
  --icon: 0.80;                 /* ← 66% of box (≈26px in 40px) */

  display:inline-flex;
  align-items:center;
  justify-content:center;

  width: var(--tile);
  height: var(--tile);

  background: var(--brand-blue) !important; /* keep your brand blue */
  border-radius:20px;            /* your curved corners */
  text-decoration:none;

  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* White glyph drawn via mask on a pseudo-element */
.social-list .icon-link::before{
  content:"";

  /* Glyph scales with the tile using the vars above */
  width:  calc(var(--tile) * var(--icon));
  height: calc(var(--tile) * var(--icon));

  background:#fff;              /* icon colour */

  /* Mask is set per-icon below (keep your existing per-icon rules) */
  mask: none;
  -webkit-mask: none;
}

/* Hover/focus interaction */
.social-list .icon-link:hover,
.social-list .icon-link:focus-visible{
  background:#2d4ea5 !important; /* darker blue on hover */
  transform: scale(1.08);         /* gentle pop */
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}

/* ===========================
   Optional size modifiers
   (use on the anchor if needed)
   =========================== */
/* <a class="icon-link icon-facebook icon--lg">… */
.icon--sm{ --tile: 36px; --icon: 0.64; }
.icon--md{ --tile: 44px; --icon: 0.62; }
.icon--lg{ --tile: 52px; --icon: 0.60; }

/* ===========================
   Keep your per-icon mask rules
   (unchanged URLs; example selectors)
   =========================== */

/* Point masks to your actual SVG files (unchanged URLs) */
.icon-link.icon-linkedin::before{
  -webkit-mask: url('../SVG/ico_LinkedIn-currentColor.svg') no-repeat center / contain;
          mask: url('../SVG/ico_LinkedIn-currentColor.svg') no-repeat center / contain;
}
.icon-link.icon-x::before{
  -webkit-mask: url('../SVG/ico_X-currentColor.svg') no-repeat center / contain;
          mask: url('../SVG/ico_X-currentColor.svg') no-repeat center / contain;
}
.icon-link.icon-facebook::before{
  -webkit-mask: url('../SVG/ico_Facebook-currentColor.svg') no-repeat center / contain;
          mask: url('../SVG/ico_Facebook-currentColor.svg') no-repeat center / contain;
}
.icon-link.icon-youtube::before{
  -webkit-mask: url('../SVG/ico_YouTube-currentColor.svg') no-repeat center / contain;
          mask: url('../SVG/ico_YouTube-currentColor.svg') no-repeat center / contain;
}




/* A11y helper */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Small screens */
@media (max-width: 640px) {
  .footer-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  /* ✅ Stop the left block from growing tall on mobile */
  .footer-left {
    flex: 0 0 auto;
  }
}



/* Pills styled like CTA buttons */
.page-content .tag {
  display: inline-flex;
  align-items: center;

  padding: 10px 16px;              /* match cta-button */
  border-radius: 20px;             /* match cta-button */

  background: var(--brand-blue);
  color: #fff;

  font-size: .9em;                 /* slightly smaller than CTA */
  font-weight: 700;
  line-height: 1.2;

  text-decoration: none;
  white-space: nowrap;

  margin: 4px 6px 4px 0;
}

/* Hover / focus to match CTA */
.page-content .tag:hover,
.page-content .tag:focus-visible {
  background: #2d4ea5;
  color: #fff;
}


/* Variants */
.page-content .tag--blue    { background:#3f69dc; color:#fff; }
.page-content .tag--soft    { background:rgba(63,105,220,.12); color:#3f69dc; }
.page-content .tag--outline { background:transparent; color:#3f69dc; border:1px solid #3f69dc; }

/* Hover for clickable tags */
.page-content a.tag:hover,
.page-content a.tag:focus-visible { filter:brightness(.92); }

/* Nice spacing when multiple tags appear in a row */
.page-content .tag + .tag { margin-left:.35em; }

/* Call to Action */
.cta { margin-top: 24px; padding: 16px 20px; background:#fff; border-radius:10px; }

.cta-text { margin: 0; line-height: 1.5; color: var(--brand-blue); }
.cta-button { display:inline-block; padding:10px 16px; border-radius:20px; background:#3f69dc; color:#fff; text-decoration:none; font-weight:700; }
.cta-button:hover, .btn-cta:focus-visible { color:#fff; background:#2d4ea5; }

/* Video / Podcast embedding */
/* Simple responsive 16:9 wrapper */
.embed-youtube { position: relative; width: 100%; max-width: 980px; margin: 0 auto; }
.embed-youtube::before { content: ""; display: block; padding-top: 56.25%; }
.embed-youtube iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	border: 0; border-radius: 12px;}

/* Global HR */
.page-content hr{
  display:block;
  height:1px;           /* thin line */
  border:0;             /* remove default borders */
  background:#c4c6bd;   /* your grey (#c4c6bd) */
  margin:16px 0;        /* vertical spacing */
  opacity:.5;           /* tweak 0.3–0.8 as needed */
}

/* ===========================
   Search page / SERP
   =========================== */


    .grid{display:grid;gap:14px}

    .card{
		background:#FFF;
		border:1px solid var(--bd);
		border-radius:10px;
		padding:14px 16px
	}
    /* .card h3{margin:0 0 6px;font-size:18px}  */

    .card a{ color:var(--brand-blue); text-decoration:none }

    .card a:hover{text-decoration:underline} 

    .meta{color:var(--brand-blue);font-size:12px;margin-bottom:6px}
    .excerpt{font-size:14px}
    mark{background:var(--brand-green-lime);color:#fff;border-radius:3px;padding:0 2px}

    .empty{
		border:1px dashed var(--bd);
		border-radius:10px;
		padding:22px;
		color: red;
	}

    .pager{display:flex;gap:8px;justify-content:flex-end;align-items:center;margin-top:18px}
    .pager a,.pager .cur{display:inline-block;padding:6px 10px;border-radius:6px;border:1px solid var(--bd);text-decoration:none;color:#e6e6e6}
    .pager .cur{background:#f3f3f3;color:#111;border-color:transparent}

/* ===========================
   Layout container
   =========================== */
.content-wrap{
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px; /* breathing room at small widths */
}

/* ===========================
   Headings
   =========================== */
.page-title,
.section-title{
  margin: 0 0 8px;
  line-height: 1.1;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #575656; /* EMA text grey */
}

.page-subtitle,
.section-subtitle{
  margin: 0 0 24px;
  line-height: 1.1;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: #3f69dc; /* EMA brand blue */
  max-width: clamp(38ch, 70vw, 68ch);
  text-wrap: balance; /* nicer multi-line where supported */
}

/* ===========================
   Hero
   =========================== */
.page-hero,
.section-hero{
  width: 100%;
  margin: 16px 0;
}
.page-hero img,
.section-hero img{
  display: block;
  width: 100%;
  height: auto;
  /* border-radius: 8px;  // opt-in */
}

/* ===========================
   Body copy
   =========================== */
.page-content,
.section-content{
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.6;
}

/* Comfortable reading width (left-aligned) */
.page-content .copy,
.section-content .copy{
  max-width: 60ch;         /* try 68–72ch if you prefer wider */
  text-wrap: balance;
  margin-right: auto;
}

/* Generic spacing + media sizing inside content */
:where(.page-content, .section-content) :where(p, ul, ol, blockquote, pre, table, h2, h3, h4){
  max-width: 60ch;
  margin: 0 0 1em 0;
}
:where(.page-content, .section-content) :where(img, figure, video){
  max-width: 100%;
  height: auto;
}

/* Occasional full-bleed element inside .copy */
.copy .full-bleed{
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Optional hero caption */
.hero-caption{
  margin-top: 8px;
  font-size: 14px;
  color: #9a9a9a;
}

/* ===========================
   Float hero on larger screens
   =========================== */
@media (min-width: 900px){
  .page-hero,
  .section-hero{
    float: right;
    width: 50%;
    max-width: 50%;
    margin: 0 0 1rem 2rem; /* gap between image and text */
  }

  /* Clear floats after the main blocks */
  .page::after,
  .section-landing::after{
    content: "";
    display: block;
    clear: both;
  }
}

/* ===========================
   Mobile nav toggle (hamburger)
   =========================== */

.nav-toggle{
  display:none;                 /* shown in mobile query */
  background:transparent;
  border:0;
  padding:10px;
  cursor:pointer;
  border-radius:10px;
}

.nav-toggle:focus-visible{
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}

/* The 3 lines live inside .burger (middle line) + its ::before/::after */
.nav-toggle .burger{
  position: relative;
  width: 28px;
  height: 18px;               /* controls spacing between lines */
	display:block;
}

.nav-toggle .burger::before,
.nav-toggle .burger::after,
.nav-toggle .burger span{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:3px;
  background: var(--brand-blue);
  border-radius:2px;
  transition: transform .22s ease, opacity .18s ease;
}

/* middle line is a real element for perfect centering */
.nav-toggle .burger span{
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle .burger::before{ top: 0; }
.nav-toggle .burger::after { bottom: 0; }

/* Open state => straight X */
.nav-toggle[aria-expanded="true"] .burger span{
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .burger::before{
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .burger::after{
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}




	
@media (max-width: 900px){

  /* Show hamburger (far right) */
  .nav-toggle{
    display: block;
    margin-left: auto;
  }

  /* Make the header padding feel better on mobile */
  .site-header .header-inner{
    padding: 0 18px;
  }

  /* Nav wrapper doesn’t need to take space in the header row */
  .upper-nav{
    margin-left: 0;
  }

  /* ===========================
     Mobile menu panel (the UL)
     =========================== */
  .upper-nav > ul{
    position: fixed;
    top: 100px;                 /* header height */
    left: 0;
    right: 0;

    display: flex;
    flex-direction: column;
    gap: 0;

    background: #fff;
    border-top: 1px solid rgba(0,0,0,.08);

    padding: 12px 18px;

    max-height: calc(100vh - 100px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    /* Closed by default */
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
  }

  /* Open state */
  .upper-nav.is-open > ul{
    opacity: 1;
    pointer-events: auto;
  }

  /* ===========================
     Top-level items (spacing)
     =========================== */

  /* Give each row extra height so the hover pill doesn’t touch dividers */
  .upper-nav > ul > li{
    position: relative;
    padding: 6px 0; /* whitespace above/below the hover */
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  /* Stop the global hover background from filling the whole row */
  .upper-nav a:hover,
  .upper-nav a:focus,
  .upper-nav a:active{
    background-color: transparent;
  }

  /* Top-level links: big tap target + pill hover */
  .upper-nav > ul > li > a{
    position: relative;
    display: block;
    padding: 12px 14px;
    font-size: 18px;
    border-radius: 10px;
    background: transparent;
  }

  /* Hover/focus "pill" behind the text (creates the clean whitespace look) */
  .upper-nav > ul > li > a::before{
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;          /* pill height */
    border-radius: 10px;
    background: transparent;
    transition: background-color .2s ease;
    z-index: -1;
  }

  .upper-nav > ul > li > a:hover::before,
  .upper-nav > ul > li > a:focus-visible::before{
    background: var(--brand-grey);
  }

  /* ===========================
     Mobile nav – accordion
     =========================== */

  /* Kill hover/focus dropdown behaviour from desktop */
  .upper-nav li:hover > .dropdown,
  .upper-nav li:focus-within > .dropdown{
    display: none;
  }

  /* Sub-menus CLOSED by default */
  .upper-nav .dropdown{
    position: static;
    display: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    padding: 6px 0 12px 16px;
  }

  /* Open state (JS-controlled) */
  .upper-nav li.is-open > .dropdown{
    display: block;
  }

  /* Sub-menu links: slightly smaller + quieter */
  .upper-nav .dropdown li{
    padding: 3px 0;
  }

  .upper-nav .dropdown a{
    display: inline-block;
    font-weight: 500;
    font-size: 16px;
    color: #555;
    padding: 6px 10px;
    border-radius: 8px;
  }

  .upper-nav .dropdown a:hover,
  .upper-nav .dropdown a:focus-visible{
    background: var(--brand-grey);
  }

  /* Caret rotates when open */
  .upper-nav > ul > li.has-children > a::after{
    transition: transform .2s ease;
  }

  .upper-nav li.is-open > a::after{
    transform: translateY(-50%) rotate(180deg);
  }
	


  /* Give the caret some breathing room from the right edge */
  .upper-nav > ul > li.has-children > a{
    padding-right: 44px; /* makes space for the triangle */
  }

  .upper-nav > ul > li.has-children > a::after{
    right: 18px;         /* move triangle left */
  }

}