/* Central Asia Procurement: what every page shares (home page and the pages of the site).
   The header, its menu, the language switch, the footer, the phone survey bar and the reveal safety of the
   approved home page (27 October 2026, review/redesign/approved/home/). Loaded after tokens.css and before the
   page's own stylesheet (home.css, pages/*.css). Colours only from tokens.css. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --header-h: 72px;
  --bar-h: 64px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--cap-white); }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
.nowrap { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 50; background: var(--cap-ink); color: var(--cap-white); padding: 12px 16px; font: 600 15px/20px var(--cap-font-sans); }
.skip:focus-visible { top: 12px; outline-color: var(--cap-turquoise-deep); }

/* ---------- Header (white only) ---------- */
.site-header { background: var(--cap-white); border-bottom: 1px solid var(--cap-ink-20); position: relative; z-index: 30; }
.site-header > .cap-container { height: var(--header-h); display: flex; align-items: center; gap: var(--cap-space-6); }
.logo { display: block; flex: none; padding: 4px 0; }
.logo img { height: 40px; width: auto; }
@media (max-width: 359px) { .logo img { height: 32px; } }
.cap-nav { margin-left: auto; }
.cap-nav ul { display: flex; gap: var(--cap-space-1); list-style: none; margin: 0; padding: 0; }
.cap-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; }
/* The page you are on: ink text with the turquoise underline of the language switch */
.cap-nav a[aria-current="page"] { color: var(--cap-ink); text-decoration-line: underline; text-decoration-color: var(--cap-turquoise); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.cap-nav a[aria-current="page"]:hover { color: var(--cap-turquoise-deep); }
.header-cta { flex: none; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.cap-button { transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out); }
.cap-button:active { transform: scale(0.97); }
.cap-lang { flex: none; gap: 0; }
.cap-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; }
.cap-lang a span { padding-bottom: 4px; border-bottom: 2px solid transparent; }
.cap-lang a[aria-current="true"] { border-bottom: 0; }
/* EN RU KZ stay in Manrope on Kazakh pages too (tokens.css sets every element with lang="kk" to the serif) */
.cap-lang a, .cap-lang a span { font-family: Manrope, Arial, sans-serif; }
.cap-lang a[aria-current="true"] span { border-bottom-color: var(--cap-turquoise); }
.cap-lang a:hover span { border-bottom-color: var(--cap-ink-20); }
.menu-btn { display: none; flex: none; width: 44px; height: 44px; border: 0; background: transparent; padding: 0; cursor: pointer; align-items: center; justify-content: center; position: relative; }
.menu-btn i, .menu-btn i::before, .menu-btn i::after { display: block; width: 22px; height: 2px; background: var(--cap-ink); }
.menu-btn i { position: relative; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; }
.menu-btn i::before { top: -7px; }
.menu-btn i::after { top: 7px; }
.menu-btn[aria-expanded="true"] i { background: transparent; }
.menu-btn[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] i::after { top: 0; transform: rotate(-45deg); }

/* Menu panel (390 to 1199 px) */
.menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--cap-white); border-bottom: 1px solid var(--cap-ink-20); }
.menu-panel[hidden] { display: none; }
.menu-panel .cap-container { padding-top: var(--cap-space-2); padding-bottom: var(--cap-space-5); }
.menu-panel .cap-nav { margin-left: 0; }
.menu-panel .cap-nav ul { display: block; list-style: none; margin: 0; padding: 0; }
.menu-panel li + li { border-top: 1px solid var(--cap-ink-20); }
.menu-panel .cap-nav a { display: flex; min-height: 52px; padding: 0; font-size: 17px; }
.menu-panel .cap-nav a[aria-current="page"] { text-underline-offset: 6px; }
.menu-cta { display: flex; justify-content: center; margin-top: var(--cap-space-4); min-height: 48px; text-decoration: none; }

.cap-dark a.cap-button { color: var(--cap-ink); text-decoration: none; }
.cap-dark .cap-button:focus-visible { outline: 2px solid var(--cap-gold); outline-offset: 2px; }

/* ---------- Phone sticky bar ---------- */
.sticky-bar { display: none; }

/* ---------- Tablet: menu button ---------- */
@media (max-width: 1199px) {
  .site-header > .cap-container > .cap-nav { display: none; }
  .header-cta { margin-left: auto; }
  .menu-btn { display: inline-flex; }
}
@media (min-width: 1200px) { .menu-panel { display: none; } }
/* 1200 to 1359 px: tighter header so the language switch stays inside the page */
@media (min-width: 1200px) and (max-width: 1359px) {
  .site-header > .cap-container { gap: var(--cap-space-4); }
  .cap-nav a { padding: 0 var(--cap-space-2); }
}

/* ---------- Russian and Kazakh headers: the logo and the menu words are longer than in English ----------
   The menu folds behind the menu button until the row fits (Russian below 1440 px, Kazakh below 1280 px), and the
   tighter spacing of 1200 to 1359 px is kept above that. --menu-off tells site.js where the folded menu closes. */
:root:lang(ru) { --menu-off: (min-width: 1440px); }
:root:lang(kk) { --menu-off: (min-width: 1280px); }
@media (min-width: 1200px) and (max-width: 1439px) {
  :lang(ru) .site-header > .cap-container > .cap-nav { display: none; }
  :lang(ru) .header-cta { margin-left: auto; }
  :lang(ru) .menu-btn { display: inline-flex; }
  :lang(ru) .menu-panel:not([hidden]) { display: block; }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  :lang(kk) .site-header > .cap-container > .cap-nav { display: none; }
  :lang(kk) .header-cta { margin-left: auto; }
  :lang(kk) .menu-btn { display: inline-flex; }
  :lang(kk) .menu-panel:not([hidden]) { display: block; }
}
@media (min-width: 1360px) {
  :lang(ru) .site-header > .cap-container, :lang(kk) .site-header > .cap-container { gap: var(--cap-space-4); }
  :lang(ru) .cap-nav a, :lang(kk) .cap-nav a { padding: 0 var(--cap-space-2); }
}
/* 768 to 899 px: the Russian logo is set a little smaller, so the survey button and the language switch stay in the page */
@media (min-width: 768px) and (max-width: 899px) {
  :lang(ru) .site-header > .cap-container { gap: var(--cap-space-4); }
  :lang(ru) .logo img { height: 32px; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  :root { --header-h: 60px; }
  html { scroll-padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  .site-header > .cap-container { gap: 0; }
  .logo { padding: 8px 0; }
  .logo img { height: 28px; }
  .header-cta { display: none; }
  .site-header > .cap-container > .cap-lang { margin-left: auto; }
  .menu-btn { margin-right: -11px; }
  /* Shown only while no survey button and not the footer is in view (site.js), so one survey button is visible at a time.
     The bar is hidden at the footer, so the page ends on the ink footer with no padding under it. */
  .sticky-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
    transform: translateY(100%); visibility: hidden; transition: transform 240ms var(--ease-out), visibility 0s linear 240ms; }
  .sticky-bar.is-visible { transform: none; visibility: visible; transition: transform 240ms var(--ease-out), visibility 0s; }
  .sticky-bar a { display: flex; align-items: center; justify-content: center; min-height: 48px; width: 100%; text-decoration: none; }
  .sticky-bar.at-foot:not(.is-visible) { transition: none; }
}

/* ---------- Footer: brand, the site map, then the language switch ---------- */
.site-footer { padding: 48px 0 40px; }
.site-footer a { font: 600 15px/20px var(--cap-font-sans); }
.f-logo { display: block; flex: none; padding: 10px 0; text-decoration: none; }
.f-logo img { height: 40px; width: auto; }
.f-line { font: var(--cap-text-small); color: var(--cap-ink-10); max-width: 34em; }
.site-footer .cap-lang a { text-decoration: none; color: var(--cap-ink-20); }
.site-footer .cap-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; }
.site-footer .cap-lang a span { padding-bottom: 4px; border-bottom: 2px solid transparent; }
.site-footer .cap-lang a[aria-current="true"] { color: var(--cap-white); border-bottom: 0; }
.site-footer .cap-lang a[aria-current="true"] span { border-bottom-color: var(--cap-gold); }
.site-footer .cap-lang a:hover span { border-bottom-color: var(--cap-ink-60); }
.site-footer .cap-lang a[aria-current="true"]:hover span { border-bottom-color: var(--cap-gold); }
.f-lang { margin-right: -12px; }
.f-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-top: 24px; }
.site-footer--full .f-lang { margin: 0 0 0 -12px; }
.site-footer--full .f-bottom { align-items: center; }
.f-map { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2.6fr)); gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--cap-ink-80); }
/* Without the contact column (no contact address set in config.js), the site map has three columns, not an empty fourth.
   Desktop only: under 1024 px the map is two columns already, and this rule would outrank those. */
@media (min-width: 1024px) {
  .f-map:not(:has(.f-col--contact)) { grid-template-columns: minmax(0, 4fr) repeat(2, minmax(0, 2.6fr)); }
}
.f-brand .f-line { margin-top: var(--cap-space-4); max-width: 22em; }
.f-head { font: var(--cap-text-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cap-ink-20); padding-top: 14px; }
.f-col ul { list-style: none; margin: 10px 0 0; padding: 0; }
.f-col li a { display: inline-flex; align-items: center; min-height: 44px; }
/* The page you are on, in the site map: a thicker gold underline */
.f-col a[aria-current="page"] { text-decoration-thickness: 2px; }
.f-mail { margin-top: 14px; }
.site-footer--full .f-bottom { padding-top: 16px; }
@media (max-width: 1023px) {
  .f-map { grid-template-columns: 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .site-footer { padding: 40px 0 calc(32px + env(safe-area-inset-bottom)); }
  .f-logo img { height: 32px; }
  .f-bottom { flex-direction: column; align-items: flex-start; }
  .f-bottom { align-items: stretch; }
  .f-map { grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .f-brand { padding-bottom: 8px; }
  .f-col--contact { grid-column: 1 / -1; }
  .f-head { padding-top: 16px; }
  .site-footer--full .f-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- Reveal safety ----------
   Each block of a page sits in <div class="blk-src" data-b="N">. site.js reveals a block at once (focus inside it,
   an anchor jump, a scroll restore): its entry plays in 1 ms and ends shown. */
.blk-src { display: block; }
.blk-src.is-instant *, .blk-src.is-instant *::before, .blk-src.is-instant *::after {
  animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; transition-delay: 0s !important;
}
/* Reduced motion: no link or button arrow moves on hover or focus, in any block */
@media (prefers-reduced-motion: reduce) {
  a:hover svg, a:focus-visible svg, button:hover svg { transform: none !important; }
}
/* Print: every block shows, whatever its entry motion state */
@media print {
  .blk-src *, .blk-src *::before, .blk-src *::after { opacity: 1 !important; animation: none !important; transition: none !important; }
  .sticky-bar { display: none !important; }
}

/* Headings wrap in balanced lines in all three languages */
h1, h2, h3 { text-wrap: balance; }

/* Portraits of the founders are round (convenor, 30 October 2026): the one exception to the square corners of brand kit v2.0.
   Applies wherever a founder photo appears: home strip, Founders page and the founding group lists. */
img[src*="/assets/people/"], .fp-photo { border-radius: 50%; }
.fp-photo { overflow: hidden; }