/* ==========================================================================
   CXM Academy: country and language UI (switcher, mobile list, suggestion bar)
   Uses the tokens and icons of theme.css (--cxm-navy, --cxm-i-globe, ...), the header's
   nav item type (Montserrat 600 14px) and the chip style for the mobile list.
   Logical properties only, so it mirrors on Arabic sites.
   Generated into the theme by _build/build_theme.py from _build/src/assets/css/locale.css.
   ========================================================================== */

:root{
  --cxm-i-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- header switcher (desktop) ---------- */
.cxm-locale{position:relative;flex:none;margin-inline-start:-16px}
.cxm-locale > summary{list-style:none;display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--cxm-display);color:var(--cxm-navy);padding-block:10px;padding-inline:12px 10px;border-radius:6px;cursor:pointer;user-select:none;white-space:nowrap}
.cxm-locale > summary::-webkit-details-marker{display:none}
.cxm-locale > summary::before,.cxm-locale > summary::after{content:"";flex:none;background:currentColor}
.cxm-locale > summary::before{width:16px;height:16px;-webkit-mask:var(--cxm-i-globe) center/contain no-repeat;mask:var(--cxm-i-globe) center/contain no-repeat}
.cxm-locale > summary::after{width:12px;height:12px;-webkit-mask:var(--cxm-i-chev) center/contain no-repeat;mask:var(--cxm-i-chev) center/contain no-repeat;transition:transform .15s}
.cxm-locale > summary:hover,.cxm-locale[open] > summary{color:var(--cxm-blue);background:var(--cxm-soft)}
.cxm-locale[open] > summary::after{transform:rotate(180deg)}
.cxm-locale-cur{unicode-bidi:isolate}
.cxm-locale-pop{position:absolute;inset-block-start:calc(100% + 10px);inset-inline-end:0;z-index:120;width:300px;max-width:calc(100vw - 32px);background:var(--cxm-white);border:1px solid var(--cxm-line);border-radius:var(--cxm-radius);box-shadow:0 12px 24px rgba(0,30,50,.08);padding:16px 12px 12px}
.cxm-locale-title{font:700 12px/1.3 var(--cxm-display);letter-spacing:.14em;text-transform:uppercase;color:var(--cxm-muted);margin:0 0 8px;padding-inline:8px}
ul.cxm-locale-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
ul.cxm-locale-list li{margin:0}
.cxm-locale-opt{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:6px;text-decoration:none;color:var(--cxm-navy)}
/* The country grows, so the language sits at the far end in both directions, also for Arabic names on a Latin page. */
.cxm-locale-opt .cxm-locale-c{flex:1;font:600 14px/1.3 var(--cxm-display);text-align:left}
html[dir="rtl"] .cxm-locale-opt .cxm-locale-c{text-align:right}
.cxm-locale-opt .cxm-locale-l{font-size:13px;line-height:1.3;color:var(--cxm-muted)}
.cxm-locale-opt:hover{background:var(--cxm-soft);color:var(--cxm-blue)}
.cxm-locale-opt[aria-current="true"]{color:var(--cxm-blue)}
.cxm-locale-opt[aria-current="true"]::after{content:"";flex:none;width:14px;height:14px;background:var(--cxm-blue);-webkit-mask:var(--cxm-i-check) center/contain no-repeat;mask:var(--cxm-i-check) center/contain no-repeat}
.cxm-locale-pop .cxm-locale-opt[aria-current="true"]{background:var(--cxm-soft)}

/* ---------- list inside the mobile menu ---------- */
.cxm-locale-menu{display:none}

@media (max-width:1080px){
  .cxm-locale > summary{padding-inline:8px 6px;font-size:13.5px}
  .cxm-locale{margin-inline-start:-20px}
}

@media (max-width:960px){
  .cxm-header-bar > .cxm-locale{display:none}
  nav.wp-block-navigation.cxm-site-nav .cxm-locale-menu{display:block;margin-block-start:16px}
  .cxm-locale-menu .cxm-locale-title{padding-inline:0;margin-block-end:10px}
  .cxm-locale-menu ul.cxm-locale-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .cxm-locale-menu .cxm-locale-opt{flex-direction:column;align-items:flex-start;gap:3px;padding:10px 12px;border:1px solid var(--cxm-line);border-radius:6px;background:var(--cxm-white)}
  .cxm-locale-menu .cxm-locale-opt .cxm-locale-c{flex:none}
  .cxm-locale-menu .cxm-locale-opt:hover{border-color:var(--cxm-blue)}
  .cxm-locale-menu .cxm-locale-opt[aria-current="true"]{background:var(--cxm-navy);border-color:var(--cxm-navy);color:var(--cxm-white)}
  .cxm-locale-menu .cxm-locale-opt[aria-current="true"] .cxm-locale-l{color:#CADBE8}
  .cxm-locale-menu .cxm-locale-opt[aria-current="true"]::after{display:none}
}

/* ---------- suggestion bar (inserted by locale.js above the header) ---------- */
.cxm-locale-bar{background:var(--cxm-sky);border-block-end:1px solid var(--cxm-line);color:var(--cxm-navy);padding-inline:var(--cxm-gutter)}
.cxm-locale-bar-in{max-width:var(--wp--style--global--wide-size,1136px);margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;padding-block:12px}
.cxm-locale-bar-msg{flex:1 1 320px;margin:0;font:600 14px/1.45 var(--cxm-display);color:var(--cxm-navy)}
.cxm-locale-bar-msg::before{content:"";display:inline-block;vertical-align:-3px;width:16px;height:16px;margin-inline-end:8px;background:var(--cxm-blue);-webkit-mask:var(--cxm-i-globe) center/contain no-repeat;mask:var(--cxm-i-globe) center/contain no-repeat}
.cxm-locale-bar-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cxm-locale-bar .wp-element-button{display:inline-flex;align-items:center;text-decoration:none}
.cxm-locale-bar .wp-element-button.cxm-btn-outline{background:var(--cxm-white);color:var(--cxm-blue);border-color:var(--cxm-blue)}
.cxm-locale-bar .wp-element-button.cxm-btn-outline:hover{background:var(--cxm-soft);color:var(--cxm-navy);border-color:var(--cxm-navy)}
.cxm-locale-stay{background:none;border:0;padding:10px 8px;font:700 14px/1.2 var(--cxm-display);color:var(--cxm-navy);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cxm-locale-stay:hover{color:var(--cxm-blue)}

/* Translated labels run longer than the English and wrap on phones (nl: "CX-teams die we hebben getraind en
   begeleid"); theme.css sets line-height 1 for the one-line English label, so wrapped lines touched. */
.cxm-clients-label{line-height:1.5}

@media (max-width:640px){
  .cxm-locale-bar-in{padding-block:14px}
  .cxm-locale-bar-msg{flex-basis:100%}
}