/* ==========================================================================
   CIMI — Mental Health study
   theme.css — design tokens + base layout (page chrome: header, tabs, footer)
   One shared brand palette (no per-chart "random colours"), Lato type,
   light theme only (dark mode removed). Fully fluid — no fixed widths that
   could clip on a phone.
   ========================================================================== */

:root {
  /* ---- CIMI brand palette (single source of truth) -------------------- */
  --cimi-red:        #EE2D4E;   /* accent / "worse" / active underline      */
  --cimi-blue:       #2A60A3;   /* primary — immigrants / headings          */
  --cimi-bluedark:   #1f4574;   /* darker blue — top of sequential scale    */
  --cimi-teal:       #63CADB;   /* secondary — non-immigrant / "better"     */
  --cimi-purple:     #6C60A0;   /* tertiary — type / "same"                 */
  --cimi-darkpurple: #4a3f7a;

  /* sequential blue scale endpoints (choropleth + demographic bar-tables) */
  --scale-lo: #e9f0f8;
  --scale-hi: #1f4574;

  /* ---- neutrals ------------------------------------------------------- */
  --bg:           #ffffff;
  --surface:      #ffffff;
  --surface-alt:  #f5f8fc;   /* very light blue-grey card background        */
  --border:       #e4e9f1;
  --border-soft:  #eef2f7;
  --text:         #1f2937;
  --text-muted:   #56616f;
  --text-soft:    #8a94a3;
  --no-data:      #e8ecf2;   /* map region with no value                    */

  /* ---- scale ---------------------------------------------------------- */
  --maxw:    1160px;
  --radius:  12px;
  --radius-sm: 8px;
  --shadow:  0 1px 3px rgba(16,42,75,.07), 0 1px 2px rgba(16,42,75,.04);
  --shadow-md: 0 4px 14px rgba(16,42,75,.08);
  --gap:     24px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  font-size: 16px;
  /* never allow a stray wide child to create a horizontal scrollbar/clip   */
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; color: var(--cimi-blue); font-weight: 700; line-height: 1.25; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

/* ============================ HEADER ================================== */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { height: 40px; width: auto; display: block; }
.lang-toggle { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.lang-toggle button {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 700; padding: 4px 8px; color: var(--text-soft);
  border-bottom: 2px solid transparent; border-radius: 0;
}
.lang-toggle button.active { color: var(--cimi-blue); border-bottom-color: var(--cimi-red); }
.lang-toggle .sep { color: var(--border); }

/* page title */
.page-title {
  text-align: center; padding: 22px 20px 6px;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  font-weight: 800; color: var(--cimi-blue); letter-spacing: .2px;
}

/* ============================ TABS =================================== */
/* horizontally scrollable on narrow screens — guarantees no clipping     */
.tabs-outer { border-bottom: 1px solid var(--border); background: var(--bg); position: relative; }
.tabs {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; padding: 10px 16px;
}
.tabs::-webkit-scrollbar { height: 6px; }
.tabs::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.tab {
  appearance: none; border: 0; cursor: pointer; font: inherit;
  white-space: nowrap;
  padding: 8px 13px; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--surface-alt); color: var(--text-muted);
  font-weight: 700; font-size: .78rem; letter-spacing: .02em; text-transform: uppercase;
  border-bottom: 3px solid transparent; transition: background .15s, color .15s;
}
.tab:hover { background: #e9eef6; color: var(--cimi-blue); }
.tab.active { background: var(--cimi-blue); color: #fff; border-bottom-color: var(--cimi-red); }

/* ============================ MAIN =================================== */
main { padding: 28px 0 56px; }
.panel { display: none; }
.panel.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* a content card (one per panel) */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 32px);
}
.card + .card { margin-top: var(--gap); }

.card-title {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 800; text-align: center;
  color: var(--cimi-blue);
}
.card-desc {
  text-align: center; color: var(--text-muted);
  max-width: 760px; margin: 8px auto 0; font-size: .95rem;
}

.section-title {
  text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; font-weight: 800;
  color: var(--cimi-bluedark); text-align: center;
  margin: 36px 0 18px; padding-bottom: 8px; border-bottom: 2px solid var(--border-soft);
}

/* ============================ FOOTER ================================= */
.site-footer { border-top: 1px solid var(--border); margin-top: 40px; }
.site-footer .wrap { padding: 26px 20px 34px; }
.powered { text-align: center; font-size: .7rem; letter-spacing: .18em; color: var(--text-soft); text-transform: uppercase; margin-bottom: 16px; }
.logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 32px; }
.logos img { height: 46px; width: auto; opacity: .9; }
.source-line { text-align: center; font-size: .78rem; color: var(--text-soft); margin-top: 20px; }

/* ============================ UTIL =================================== */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }