/* =============================================================================
   ESG Assessment :: shared stylesheet (brand-neutral)
   Brand colours are semantic tokens (--brand-*). The values below are the
   neutral defaults (= esgapp/brands/_default). Each page overrides them with
   the deployment's brand theme via brand_head() (app/brand.php), which emits
   only validated #hex values. Never put a brand's colours or name here.
   ============================================================================= */
:root{
  /* Brand tokens (overridden per brand) */
  --brand-primary:        #374151;   /* primary chrome, headings */
  --brand-primary-dark:   #1F2937;   /* deepest backgrounds, footer */
  --brand-accent:         #2563EB;   /* focus, links, accents */
  --brand-highlight:      #D97706;   /* highlight / call-to-action */
  --brand-highlight-dark: #B45309;   /* highlight hover */
  --brand-tint:           #EEF0F3;   /* pale panel / note background */
  --brand-bg:             #F3F4F6;   /* page / panel background */
  --brand-text:           #3C3C3B;   /* body text */
  --brand-chart-1:        #B88874;   /* tertiary, charts only */
  --brand-chart-2:        #B9B8D3;
  --line:                 #D9DDE3;

  /* Product semantics — the same for every brand */
  --ok:          #2E7D32;
  --no:          #C62828;

  /* Pillar colours (Environmental / Social / Governance); a brand may
     override --pillar-gov to match its primary colour. */
  --pillar-env:  #2E8B57;   /* sea green */
  --pillar-soc:  #C9742B;   /* ochre */
  --pillar-gov:  #374151;

  /* Maturity-band scale — deliberately HIGH-CONTRAST and solid.
     The CI's paler secondary tints blend into each other on a scale, so the
     four bands use four distinct, saturated hues (red → amber → blue → green)
     that stay legible side-by-side and when printed. */
  --band-reactive:  #C0392B;   /* 0–25   red     */
  --band-minimal:   #E67E22;   /* 26–50  amber   */
  --band-compliant: #1565C0;   /* 51–75  blue    */
  --band-leader:    #2E7D32;   /* 76–100 green   */

  --radius: 10px;
  --shadow: 0 2px 16px rgba(0,0,0,.10);
  --font: Arial, Helvetica, "Segoe UI", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--brand-bg);color:var(--brand-text);min-height:100vh;line-height:1.5}

/* --- Header / brand bar (white, to carry the primary blue logo) ------------ */
.brandbar{background:#fff;color:var(--brand-primary);display:flex;align-items:center;gap:18px;
  padding:14px 28px;position:sticky;top:0;z-index:60;
  border-bottom:3px solid var(--brand-primary);box-shadow:0 1px 6px rgba(0,0,0,.10)}
.brandbar .logo{height:46px;width:auto;max-width:62vw;display:block;flex-shrink:0}
.brandbar h1{font-size:1.05rem;font-weight:bold;line-height:1.2;color:var(--brand-primary)}
.brandbar p{font-size:.78rem;color:#5a6b72;margin-top:2px}
.brandbar .spacer{margin-left:auto}
.brandbar .titleblock{padding-left:18px;border-left:1px solid var(--line)}

/* --- Buttons --------------------------------------------------------------- */
.btn{display:inline-block;padding:11px 26px;border:none;border-radius:7px;font-size:.92rem;
  font-weight:bold;cursor:pointer;transition:.15s;font-family:var(--font);text-decoration:none}
.btn-primary{background:var(--brand-highlight);color:var(--brand-primary-dark)}
.btn-primary:hover{background:var(--brand-highlight-dark)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--brand-primary);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand-primary)}
.btn-dark{background:var(--brand-primary);color:#fff}
.btn-dark:hover{background:var(--brand-primary-dark)}

/* --- Footer ---------------------------------------------------------------- */
.brandfoot{text-align:center;font-size:.75rem;color:#6b7c84;padding:28px 16px;line-height:1.6}
.brandfoot a{color:var(--brand-accent);text-decoration:none}

/* --- Cards ----------------------------------------------------------------- */
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}

/* --- Forms ----------------------------------------------------------------- */
label{display:block;font-size:.78rem;font-weight:bold;color:var(--brand-primary);margin-bottom:4px}
input,select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:7px;
  font-size:.9rem;color:var(--brand-text);background:#fff;font-family:var(--font)}
input:focus,select:focus{outline:none;border-color:var(--brand-accent)}

/* --- Turnstile: blend into the form --------------------------------------- */
.cf-turnstile{margin:8px 0 4px;min-height:65px;display:flex;justify-content:center}