/*
Theme Name: CRCI
Theme URI: https://crci.co.zw
Author: CRCI
Description: Chief Risk and Compliance Institute website theme, built from the approved design.
Version: 2.0.0
Text Domain: crci
*/
/* Layout concept: a multi-page institutional site. Every page is a view in one file,
     switched by the URL hash, so the design can be reviewed end to end. Tokens are in
     tailwind.config (navy, crimson, paper, ink, muted). Gutters use safe-area insets. */
  :root { color-scheme: light; }
  body { background: #ffffff; color: #1d2433; font-family: "Source Sans 3", system-ui, sans-serif; }
  h1, h2, h3 { text-wrap: balance; }
  .gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .eyebrow { letter-spacing: .14em; text-transform: uppercase; font-weight: 700; font-size: .8rem; }
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #c8102e; outline-offset: 3px; }
  .nav-link[aria-current="page"] { background: #14284b; color: #ffffff; }
  #mobile-nav .nav-link[aria-current="page"] { background: transparent; color: #c8102e; }
  /* Bottom bar: explicit colours so every label is readable. Current page uses the brand red. */
  #bottom-nav a, #bottom-nav button { color: #e2e8f0; }
  #bottom-nav a:hover, #bottom-nav button:hover { color: #ffffff; }
  #bottom-nav .nav-link[aria-current="page"] { background: #c8102e; color: #ffffff; box-shadow: 0 4px 14px rgba(200,16,46,.45); }
  @media (max-width: 1279px) { body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }
  .social { display: inline-flex; height: 2rem; width: 2rem; align-items: center; justify-content: center; border-radius: 9999px; color: #e2e8f0; border: 1px solid rgba(255,255,255,.22); transition: background-color .2s, color .2s; }
  .social:hover { background: #ffffff; color: #14284b; }
  #header-logo { transition: height .25s ease; }
  #header-inner { transition: padding .25s ease; }
  .is-compact #header-logo { height: 2.5rem; }
  .is-compact #header-inner { padding-top: .5rem; padding-bottom: .5rem; }
  #menu-toggle[aria-expanded="true"] [data-bar="1"] { transform: translateY(7px) rotate(45deg); }
  #menu-toggle[aria-expanded="true"] [data-bar="2"] { opacity: 0; }
  #menu-toggle[aria-expanded="true"] [data-bar="3"] { transform: translateY(-7px) rotate(-45deg); }
  .chip[aria-pressed="true"] { background: #14284b; color: #fff; border-color: #14284b; }
  .step-done { background: #14284b; color: #fff; }
  @media (prefers-reduced-motion: no-preference) {
    .rise { animation: rise .5s ease-out both; }
    @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .bar { transition: width .6s ease-out; }
  }