/* ═══════════════════════════════════════════════════════════
   OdishaJobs4Dibyang — Complete Design System
   All colours via CSS variables — theme-aware throughout
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

/* ══════════════════════════════════════════════════════════
   THEME TOKENS — every colour on the site lives here
   ══════════════════════════════════════════════════════════ */

/* ── Ocean (default) — calm deep blue, saffron accent ── */
:root,
[data-theme="ocean"] {
  /* Primary palette */
  --blue: #1a4f7a;
  /* primary interactive, nav, headings */
  --blue-d: #0d3155;
  /* darkest — hero bg, footer */
  --blue-l: #2e7eb8;
  /* hover state */
  --saff: #d4500a;
  /* accent / CTA buttons */
  --saff-l: #e8701a;
  /* accent hover */
  --saff-text: #ffffff;
  /* text ON saff buttons — white on orange */
  --blue-text: #ffffff;
  /* text ON --blue backgrounds */

  /* Surfaces */
  --white: #ffffff;
  --card-bg: #ffffff;
  --off: #f3f7fb;
  --page-bg: #e8eff7;

  /* Text */
  --text: #0b1f33;
  --muted: #4a6478;

  /* Borders */
  --border: #c0d3e8;
  --border-l: #dde8f4;

  /* Semantic */
  --green: #0b5e3a;
  --green-bg: #edfaf3;
  --green-bd: #9ee8c5;
  --red: #8b1a1a;
  --red-bg: #fef2f2;
  --red-bd: #fca5a5;
  --amber-bg: #fffbeb;
  --amber-bd: #fde68a;
  --amber-txt: #7a4500;
  --info-bg: #eff6ff;
  --info-bd: #bfdbfe;
  --info-txt: #1e4a9a;

  /* A11y bar stays dark always */
  --bar-bg: #0d2247;
  --bar-text: #ffffff;

  /* Cross-page semantic vars */
  --gold: #fbbf24;
  /* amber/gold accent on dark sections */
  --green-d: #0a5c36;
  /* legacy — kept for compatibility */
  --on-dark: #ffffff;
  /* primary text on dark/hero backgrounds */
  --on-dark-muted: rgba(255, 255, 255, .65);
  /* secondary text on dark */
  --on-dark-tint: rgba(255, 255, 255, .10);
  /* subtle fill on dark (badge, pill) */
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  /* hover tint on dark */
  --on-dark-bd: rgba(255, 255, 255, .20);
  /* border on dark backgrounds */

  /* Hero / dark section backgrounds — ALWAYS dark regardless of theme */
  /* Use these on .ms-hero, .ms-stats-strip, .ms-dark-block etc */
  --hero-bg: #0d3155;
  /* main hero gradient start */
  --hero-bg-end: #1a4f7a;
  /* hero gradient end */
  --section-dark: #071e3d;
  /* darkest section bg */

  /* Misc */
  --r: 10px;
  --r-sm: 8px;
  --r-lg: 16px;
  --shadow: 0 2px 12px rgba(26, 79, 122, .10);
  --shadow-md: 0 4px 20px rgba(26, 79, 122, .14);
  --shadow-lg: 0 8px 32px rgba(26, 79, 122, .18);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ── Forest — earthy green, warm amber accent ── */
[data-theme="forest"] {
  --blue: #1b5e35;
  --blue-d: #0d3d20;
  --blue-l: #2e8a52;
  --saff: #b86010;
  --saff-l: #d4781e;
  --white: #ffffff;
  --card-bg: #ffffff;
  --off: #f2f8f4;
  --page-bg: #e5f0e9;
  --text: #0c2216;
  --muted: #3d6048;
  --border: #b0d4bc;
  --border-l: #d4eada;
  --green: #0d5c30;
  --green-bg: #edfaf3;
  --green-bd: #9ee8c5;
  --red: #8b1a1a;
  --red-bg: #fef2f2;
  --red-bd: #fca5a5;
  --amber-bg: #fef9ee;
  --amber-bd: #f5d98a;
  --amber-txt: #7a4500;
  --info-bg: #f0f8f4;
  --info-bd: #b0d4bc;
  --info-txt: #1b5e35;
  --bar-bg: #0d3d20;
  --bar-text: #ffffff;
  --gold: #e8a020;
  --green-d: #0d4d28;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #0d3d20;
  --hero-bg-end: #1b5e35;
  --section-dark: #071e0e;
  --saff-text: #ffffff;
  --blue-text: #ffffff;
}

/* ── Amber — warm golden, low-glare, excellent for low vision ── */
[data-theme="amber"] {
  --blue: #8b5200;
  --blue-d: #5c3600;
  --blue-l: #b87020;
  --saff: #c04800;
  --saff-l: #da6010;
  --white: #fffef5;
  --card-bg: #fffef5;
  --off: #fdf5e0;
  --page-bg: #f5e8c0;
  --text: #2d1800;
  --muted: #6b4820;
  --border: #e0c080;
  --border-l: #eedda0;
  --green: #2d5c1a;
  --green-bg: #f5fbee;
  --green-bd: #b8e0a0;
  --red: #8b1a1a;
  --red-bg: #fef2f2;
  --red-bd: #fca5a5;
  --amber-bg: #fff8e0;
  --amber-bd: #f0d060;
  --amber-txt: #5c3600;
  --info-bg: #fff8e0;
  --info-bd: #e0c080;
  --info-txt: #8b5200;
  --bar-bg: #5c3600;
  --bar-text: #ffffff;
  --gold: #f59e0b;
  --green-d: #2d5c1a;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .72);
  --on-dark-tint: rgba(255, 255, 255, .12);
  --on-dark-tint-h: rgba(255, 255, 255, .20);
  --on-dark-bd: rgba(255, 255, 255, .25);
  --hero-bg: #5c3600;
  --hero-bg-end: #8b5200;
  --section-dark: #2d1800;
  --saff-text: #ffffff;
  --blue-text: #ffffff;
}

/* ── Slate — neutral cool grey, professional ── */
[data-theme="slate"] {
  --blue: #2c4a6e;
  --blue-d: #1a3050;
  --blue-l: #3d6090;
  --saff: #b84000;
  --saff-l: #d05818;
  --white: #ffffff;
  --card-bg: #ffffff;
  --off: #f0f2f6;
  --page-bg: #e4e8f0;
  --text: #111827;
  --muted: #4b5c70;
  --border: #c0cad8;
  --border-l: #d8e0ea;
  --green: #14532d;
  --green-bg: #f0fdf4;
  --green-bd: #bbf7d0;
  --red: #7f1d1d;
  --red-bg: #fef2f2;
  --red-bd: #fca5a5;
  --amber-bg: #fffbeb;
  --amber-bd: #fde68a;
  --amber-txt: #78350f;
  --info-bg: #eff6ff;
  --info-bd: #bfdbfe;
  --info-txt: #1e4a9a;
  --bar-bg: #1a3050;
  --bar-text: #ffffff;
  --gold: #fbbf24;
  --green-d: #1a4a5c;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #1a3050;
  --hero-bg-end: #2c4a6e;
  --section-dark: #0e1e38;
  --saff-text: #ffffff;
  --blue-text: #ffffff;
}

/* ── HC Dark — WCAG AAA 21:1 ── */
[data-theme="hcb"],
body.hc {
  --blue: #ffd700;
  --blue-d: #000000;
  --blue-l: #ffe84d;
  --saff: #ffd700;
  --saff-l: #ffe84d;
  --white: #111111;
  --card-bg: #111111;
  --off: #1a1a1a;
  --page-bg: #000000;
  --text: #ffffff;
  --muted: #dddddd;
  --border: rgba(255, 255, 255, .5);
  --border-l: rgba(255, 255, 255, .25);
  --green: #00e88a;
  --green-bg: #001a0d;
  --green-bd: #00e88a;
  --red: #ff7777;
  --red-bg: #1a0000;
  --red-bd: #ff7777;
  --amber-bg: #1a1000;
  --amber-bd: #ffd700;
  --amber-txt: #ffd700;
  --info-bg: #001020;
  --info-bd: #4da6ff;
  --info-txt: #7dd3fc;
  --bar-bg: #000000;
  --bar-text: #ffffff;
  --gold: #ffff00;
  --green-d: #000000;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .8);
  --on-dark-tint: rgba(255, 255, 255, .12);
  --on-dark-tint-h: rgba(255, 255, 255, .22);
  --on-dark-bd: rgba(255, 255, 255, .35);
  --hero-bg: #000000;
  --hero-bg-end: #111111;
  --section-dark: #000000;
  --saff-text: #000000;
  --blue-text: #000000;
}

[data-theme="hcw"] {
  --blue: #00008b;
  --blue-d: #000060;
  --blue-l: #0000cc;
  --saff: #8b0000;
  --saff-l: #cc0000;
  --white: #ffffff;
  --card-bg: #ffffff;
  --off: #f8f8f8;
  --page-bg: #ffffff;
  --text: #000000;
  --muted: #1a1a1a;
  --border: #000000;
  --border-l: #333333;
  --green: #006400;
  --green-bg: #f0fff0;
  --green-bd: #006400;
  --red: #8b0000;
  --red-bg: #fff0f0;
  --red-bd: #8b0000;
  --amber-bg: #fffff0;
  --amber-bd: #8b6914;
  --amber-txt: #5c4000;
  --info-bg: #f0f0ff;
  --info-bd: #00008b;
  --info-txt: #00008b;
  --bar-bg: #000060;
  --bar-text: #ffffff;
  --gold: #b8860b;
  --green-d: #004400;
  --on-dark: #000000;
  --on-dark: #000;
  --on-dark-muted: #333;
  --on-dark-tint: rgba(0, 0, 0, .08);
  --on-dark-tint-h: rgba(0, 0, 0, .14);
  --on-dark-bd: rgba(0, 0, 0, .35);
  --hero-bg: #000060;
  --hero-bg-end: #00008b;
  --section-dark: #000040;
  --saff-text: #ffffff;
  --blue-text: #ffffff;
}

/* ══════════════════════════════════════════════════════════
   GRADIENT THEMES — CSS variables for all page elements
   Bars use direct JS injection; page elements use these vars
   ══════════════════════════════════════════════════════════ */

[data-theme="sunset"] {
  --blue: #7b2d8b;
  --blue-d: #4a1155;
  --blue-l: #a044bb;
  --saff: #e05c00;
  --saff-l: #f07820;
  --white: #fff;
  --card-bg: #fff;
  --off: #fdf4ff;
  --page-bg: #f0e0f8;
  --text: #2a0a3a;
  --muted: #6b3a7a;
  --border: #dbb8e8;
  --border-l: #ecd8f5;
  --green: #0b5e3a;
  --green-bg: #edfaf3;
  --green-bd: #9ee8c5;
  --red: #8b1a1a;
  --red-bg: #fef2f2;
  --red-bd: #fca5a5;
  --amber-bg: #fff8e0;
  --amber-bd: #fde68a;
  --amber-txt: #7a4500;
  --info-bg: #fdf4ff;
  --info-bd: #dbb8e8;
  --info-txt: #7b2d8b;
  --bar-bg: #4a1155;
  --bar-text: #fff;
  --gold: #fbbf24;
  --green-d: #7c3aed;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #4a1155;
  --hero-bg-end: #7b2d8b;
  --section-dark: #2a0a3a;
  --saff-text: #ffffff;
  --blue-text: #ffffff;
}

[data-theme="aurora"] {
  --blue: #0e6b7a;
  --blue-d: #063d48;
  --blue-l: #1a90a4;
  --saff: #5c3d9e;
  --saff-l: #7856bb;
  --white: #fff;
  --card-bg: #fff;
  --off: #f0fbfd;
  --page-bg: #ddf0f5;
  --text: #062028;
  --muted: #2d6070;
  --border: #a8dce8;
  --border-l: #d0eff5;
  --green: #0b5e3a;
  --green-bg: #edfaf3;
  --green-bd: #9ee8c5;
  --red: #8b1a1a;
  --red-bg: #fef2f2;
  --red-bd: #fca5a5;
  --amber-bg: #fffbeb;
  --amber-bd: #fde68a;
  --amber-txt: #7a4500;
  --info-bg: #f0fbfd;
  --info-bd: #a8dce8;
  --info-txt: #0e6b7a;
  --bar-bg: #063d48;
  --bar-text: #fff;
  --gold: #fbbf24;
  --green-d: #065f46;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #063d48;
  --hero-bg-end: #0e6b7a;
  --section-dark: #032028;
  --saff-text: #ffffff;
  --blue-text: #ffffff;
}

[data-theme="rose"] {
  --blue: #8b3a5a;
  --blue-d: #5c1e38;
  --blue-l: #b05070;
  --saff: #b87820;
  --saff-l: #d49030;
  --white: #fff;
  --card-bg: #fffbfc;
  --off: #fdf0f4;
  --page-bg: #f5e0ea;
  --text: #2a0a18;
  --muted: #6b3048;
  --border: #e8b8c8;
  --border-l: #f5d8e0;
  --green: #0b5e3a;
  --green-bg: #edfaf3;
  --green-bd: #9ee8c5;
  --red: #8b1a1a;
  --red-bg: #fef2f2;
  --red-bd: #fca5a5;
  --amber-bg: #fff8e0;
  --amber-bd: #fde68a;
  --amber-txt: #7a4500;
  --info-bg: #fdf0f4;
  --info-bd: #e8b8c8;
  --info-txt: #8b3a5a;
  --bar-bg: #5c1e38;
  --bar-text: #fff;
  --gold: #fbbf24;
  --green-d: #831843;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #5c1e38;
  --hero-bg-end: #8b3a5a;
  --section-dark: #2a0a18;
  --saff-text: #ffffff;
  --blue-text: #ffffff;
}

[data-theme="midnight"] {
  --blue: #2060c0;
  --blue-d: #0a1840;
  --blue-l: #3880e0;
  --saff: #00b8d4;
  --saff-l: #00d8f8;
  --white: #f0f4ff;
  --card-bg: #f0f4ff;
  --off: #e0e8ff;
  --page-bg: #d0d8f0;
  --text: #080e28;
  --muted: #3040a0;
  --border: #a0b0e0;
  --border-l: #c0cef8;
  --green: #00a878;
  --green-bg: #e0fff5;
  --green-bd: #80e8c0;
  --red: #c02040;
  --red-bg: #ffe0e8;
  --red-bd: #f09090;
  --amber-bg: #fff8e0;
  --amber-bd: #fde68a;
  --amber-txt: #7a4500;
  --info-bg: #e0e8ff;
  --info-bd: #a0b0e0;
  --info-txt: #2060c0;
  --bar-bg: #0a1840;
  --bar-text: #fff;
  --gold: #fbbf24;
  --green-d: #312e81;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #0a1840;
  --hero-bg-end: #2060c0;
  --section-dark: #060e28;
  --saff-text: #000000;
  --blue-text: #ffffff;
}

[data-theme="meadow"] {
  --blue: #1e7a3a;
  --blue-d: #0e4820;
  --blue-l: #2ea050;
  --saff: #f0a000;
  --saff-l: #f8b820;
  --white: #fff;
  --card-bg: #f8fff8;
  --off: #eefff0;
  --page-bg: #daf0dc;
  --text: #082010;
  --muted: #2d5838;
  --border: #90d8a0;
  --border-l: #c0ecc8;
  --green: #0b5e3a;
  --green-bg: #edfaf3;
  --green-bd: #9ee8c5;
  --red: #8b1a1a;
  --red-bg: #fef2f2;
  --red-bd: #fca5a5;
  --amber-bg: #fffbe0;
  --amber-bd: #f8e080;
  --amber-txt: #6a4000;
  --info-bg: #eefff0;
  --info-bd: #90d8a0;
  --info-txt: #1e7a3a;
  --bar-bg: #0e4820;
  --bar-text: #fff;
  --gold: #fbbf24;
  --green-d: #14532d;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #0e4820;
  --hero-bg-end: #1e7a3a;
  --section-dark: #082010;
  --saff-text: #000000;
  --blue-text: #ffffff;
}

[data-theme="ocean-deep"] {
  --blue: #006090;
  --blue-d: #001a3a;
  --blue-l: #0090c0;
  --saff: #00c8f0;
  --saff-l: #00e8ff;
  --white: #f0f8ff;
  --card-bg: #f0f8ff;
  --off: #e0f0f8;
  --page-bg: #cce4f0;
  --text: #001020;
  --muted: #004868;
  --border: #80c0d8;
  --border-l: #b0d8ec;
  --green: #00a878;
  --green-bg: #e0fff5;
  --green-bd: #80e8c0;
  --red: #8b1a1a;
  --red-bg: #fef2f2;
  --red-bd: #fca5a5;
  --amber-bg: #fffbeb;
  --amber-bd: #fde68a;
  --amber-txt: #7a4500;
  --info-bg: #e0f0f8;
  --info-bd: #80c0d8;
  --info-txt: #006090;
  --bar-bg: #001a3a;
  --bar-text: #fff;
  --gold: #fbbf24;
  --green-d: #0c4a6e;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #001a3a;
  --hero-bg-end: #006090;
  --section-dark: #000d20;
  --saff-text: #000000;
  --blue-text: #ffffff;
}

[data-theme="fire"] {
  --blue: #a02000;
  --blue-d: #3a0800;
  --blue-l: #c84000;
  --saff: #ffa020;
  --saff-l: #ffb840;
  --white: #fff;
  --card-bg: #fff;
  --off: #fff5ee;
  --page-bg: #ffe8d0;
  --text: #200800;
  --muted: #703020;
  --border: #f0b090;
  --border-l: #f8d0b8;
  --green: #0b5e3a;
  --green-bg: #edfaf3;
  --green-bd: #9ee8c5;
  --red: #8b1a1a;
  --red-bg: #fef2f2;
  --red-bd: #fca5a5;
  --amber-bg: #fff8e0;
  --amber-bd: #fde68a;
  --amber-txt: #7a4500;
  --info-bg: #fff5ee;
  --info-bd: #f0b090;
  --info-txt: #a02000;
  --bar-bg: #3a0800;
  --bar-text: #fff;
  --gold: #fbbf24;
  --green-d: #7c2d12;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #3a0800;
  --hero-bg-end: #a02000;
  --section-dark: #200800;
  --saff-text: #000000;
  --blue-text: #ffffff;
}

[data-theme="galaxy"] {
  --blue: #600090;
  --blue-d: #0a0020;
  --blue-l: #9020c0;
  --saff: #e040fb;
  --saff-l: #f060ff;
  --white: #f8f0ff;
  --card-bg: #f8f0ff;
  --off: #efe0ff;
  --page-bg: #e0d0f8;
  --text: #0e0028;
  --muted: #500080;
  --border: #c080e0;
  --border-l: #ddb8f0;
  --green: #00a878;
  --green-bg: #e0fff5;
  --green-bd: #80e8c0;
  --red: #c02040;
  --red-bg: #ffe0e8;
  --red-bd: #f09090;
  --amber-bg: #fff8e0;
  --amber-bd: #fde68a;
  --amber-txt: #7a4500;
  --info-bg: #efe0ff;
  --info-bd: #c080e0;
  --info-txt: #600090;
  --bar-bg: #0a0020;
  --bar-text: #fff;
  --gold: #fbbf24;
  --green-d: #4c1d95;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #0a0020;
  --hero-bg-end: #600090;
  --section-dark: #060010;
  --saff-text: #ffffff;
  --blue-text: #ffffff;
}

[data-theme="earth"] {
  --blue: #4a2800;
  --blue-d: #1a0e00;
  --blue-l: #806000;
  --saff: #c8a000;
  --saff-l: #e0b800;
  --white: #fffdf5;
  --card-bg: #fffdf5;
  --off: #f8f0e0;
  --page-bg: #f0e4c8;
  --text: #180a00;
  --muted: #604020;
  --border: #d8b880;
  --border-l: #edd8a8;
  --green: #2d5c1a;
  --green-bg: #f5fbee;
  --green-bd: #b8e0a0;
  --red: #8b1a1a;
  --red-bg: #fef2f2;
  --red-bd: #fca5a5;
  --amber-bg: #fff8e0;
  --amber-bd: #f0d060;
  --amber-txt: #5c3600;
  --info-bg: #f8f0e0;
  --info-bd: #d8b880;
  --info-txt: #4a2800;
  --bar-bg: #1a0e00;
  --bar-text: #fff;
  --gold: #d97706;
  --green-d: #3d2b1a;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #1a0e00;
  --hero-bg-end: #4a2800;
  --section-dark: #100800;
  --saff-text: #000000;
  --blue-text: #ffffff;
}

[data-theme="mint"] {
  --blue: #006850;
  --blue-d: #003828;
  --blue-l: #00a090;
  --saff: #00d4b8;
  --saff-l: #00ecd0;
  --white: #f0fffc;
  --card-bg: #f0fffc;
  --off: #e0fff8;
  --page-bg: #ccf5ee;
  --text: #002018;
  --muted: #005040;
  --border: #80d8c8;
  --border-l: #b0ecd8;
  --green: #0b5e3a;
  --green-bg: #edfaf3;
  --green-bd: #9ee8c5;
  --red: #8b1a1a;
  --red-bg: #fef2f2;
  --red-bd: #fca5a5;
  --amber-bg: #fffbeb;
  --amber-bd: #fde68a;
  --amber-txt: #7a4500;
  --info-bg: #e0fff8;
  --info-bd: #80d8c8;
  --info-txt: #006850;
  --bar-bg: #003828;
  --bar-text: #fff;
  --gold: #fbbf24;
  --green-d: #064e3b;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #003828;
  --hero-bg-end: #006850;
  --section-dark: #002018;
  --saff-text: #000000;
  --blue-text: #ffffff;
}


/* ── Europa Wood — warm walnut & ivory · European architecture ── */
[data-theme="europa"] {
  --blue: #6b3a16;
  --blue-d: #3d1e08;
  --blue-l: #8c4e22;
  --saff: #c8922a;
  --saff-l: #e0aa40;
  --white: #fef7ec;
  --card-bg: #fef7ec;
  --off: #f5e6cc;
  --page-bg: #e8d4b0;
  --text: #1c0e04;
  --muted: #7a4e28;
  --border: #d8b88c;
  --border-l: #e8d0b0;
  --green: #2d6b1a;
  --green-bg: #f0f5e8;
  --green-bd: #b0d898;
  --red: #8b1a1a;
  --red-bg: #fef2f0;
  --red-bd: #f4a8a8;
  --amber-bg: #fdf5e0;
  --amber-bd: #e8c870;
  --amber-txt: #5c3800;
  --info-bg: #faf0e0;
  --info-bd: #d8b88c;
  --info-txt: #6b3a16;
  --bar-bg: #3d1e08;
  --bar-text: #ffffff;
  --gold: #c8922a;
  --green-d: #3d6b1a;
  --on-dark: #ffffff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #3d1e08;
  --hero-bg-end: #6b3a16;
  --section-dark: #1c0e04;
  --saff-text: #1c0e04;
  --blue-text: #ffffff;
}

/* ══════════════════════════════════════════════════════════
   BASE RESET
   ══════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

/* GLOBAL WIDTH GUARD — use max-width + clip instead of overflow:hidden
   overflow-x:hidden on html/body kills position:sticky on child elements */
html,
body {
  max-width: 100%
}

html {
  overflow-x: clip
}

/* clip does not create a scroll container — sticky works */
html {
  font-size: 18px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%
}

body {
  font-family: 'Atkinson Hyperlegible', Arial, sans-serif;
  color: var(--text);
  background: var(--page-bg);
  line-height: 1.75;
  min-height: 100vh;
  transition: background .2s, color .2s;
}

img,
video,
iframe,
embed,
object {
  max-width: 100%;
  display: block
}

table {
  width: 100%;
  border-collapse: collapse
}

pre,
code {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-width: 100%
}

a {
  color: var(--blue)
}

*:focus-visible {
  outline: 3px solid var(--gold, #fbbf24);
  outline-offset: 3px;
  border-radius: var(--r-sm)
}

*:focus:not(:focus-visible) {
  outline: none
}

/* ══════════════════════════════════════════════════════════
   ROWS 1, 2, 3 — each is position:sticky;top:N in topbar.js.
   They stack naturally in document flow. No body padding needed.
   Content below flows immediately after Row 3.
   ══════════════════════════════════════════════════════════ */

/* ── Skip link ── */
.skip {
  position: fixed;
  top: -9em;
  left: 1rem;
  z-index: 9999;
  background: var(--saff);
  color: #fff;
  font-weight: 700;
  padding: .75rem 1.5rem;
  border-radius: var(--r);
  text-decoration: none;
  border: 3px solid #fff;
  transition: top .1s;
  white-space: nowrap
}

.skip:focus {
  top: .75rem
}

/* ══════════════════════════════════════════════════════════
   A11Y BAR — always dark, theme-aware accent
   ══════════════════════════════════════════════════════════ */
/* #a11y-bar sticky/position owned by topbar.js */

/* ══════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════ */
/* position:sticky + top value owned by topbar.js CSS */
#nav {
  background: var(--card-bg);
  border-bottom: 3px solid var(--saff);
  box-shadow: var(--shadow);
  transition: background .2s, border-color .2s;
}

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: .5rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .6rem
}

.nav-brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0
}

.nav-brand-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--r-sm);
  background: var(--blue);
  color: var(--blue-text);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s
}

.nav-brand-name {
  font-size: .92rem;
  font-weight: 700;
  color: var(--blue);
  line-height: 1.2;
  transition: color .2s
}

.nav-brand-sub {
  font-size: .62rem;
  color: var(--saff);
  font-weight: 700;
  display: block;
  transition: color .2s
}

.nav-links {
  display: flex;
  align-items: center;
  gap: .1rem;
  margin-left: auto;
  list-style: none
}

.nav-links a,
.nav-link {
  color: var(--muted);
  font-weight: 700;
  font-size: .88rem;
  padding: .52rem .8rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: .3rem;
  min-height: 46px;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap
}

.nav-links a:hover,
.nav-link:hover,
.nav-links a.active,
.nav-link.active {
  color: var(--blue);
  border-bottom-color: var(--blue)
}

.nav-cta {
  background: var(--saff) !important;
  color: var(--saff-text) !important;
  border-radius: var(--r-sm) !important;
  border-bottom: none !important;
  padding: .45rem .95rem !important;
  transition: background .15s !important
}

.nav-cta:hover {
  background: var(--saff-l) !important
}

.nav-burger {
  display: none;
  background: none;
  border: 2px solid var(--border);
  color: var(--text);
  width: 46px;
  height: 46px;
  border-radius: var(--r-sm);
  font-size: 1.1rem;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition: border-color .15s
}

/* ══════════════════════════════════════════════════════════
   BUTTONS — all use CSS vars
   ══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  padding: .65rem 1.25rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 2px solid transparent;
  text-decoration: none;
  min-height: 52px;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap
}

.btn-primary {
  background: var(--saff);
  color: var(--saff-text);
  border-color: var(--saff)
}

.btn-primary:hover {
  background: var(--saff-l);
  border-color: var(--saff-l)
}

.btn-blue {
  background: var(--blue);
  color: var(--blue-text);
  border-color: var(--blue)
}

.btn-blue:hover {
  background: var(--blue-l);
  border-color: var(--blue-l)
}

.btn-outline {
  background: var(--card-bg);
  color: var(--blue);
  border-color: var(--blue)
}

.btn-outline:hover {
  background: var(--off)
}

.btn-ghost {
  background: var(--off);
  color: var(--muted);
  border: 2px solid var(--border)
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--blue)
}

.btn-sm {
  padding: .35rem .75rem;
  font-size: .8rem;
  min-height: 36px
}

.btn-full {
  width: 100%;
  justify-content: center
}

.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: var(--r-sm);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  padding: .6rem 1.1rem;
  cursor: pointer;
  min-height: 48px;
  white-space: nowrap;
  transition: .15s
}

.btn-outline-white:hover {
  background: rgba(255, 255, 255, .12);
  border-color: #fff
}

/* ══════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 20px;
  border: 1.5px solid transparent
}

.badge-green {
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green-bd)
}

.badge-amber {
  background: var(--amber-bg);
  color: var(--amber-txt);
  border-color: var(--amber-bd)
}

.badge-red {
  background: var(--red-bg);
  color: var(--red);
  border-color: var(--red-bd)
}

.badge-blue {
  background: var(--info-bg);
  color: var(--info-txt);
  border-color: var(--info-bd)
}

/* ── Semantic message banners — theme-aware, no hardcoded hex ── */
.msg-ok,
.msg-err,
.msg-warn {
  border-radius: var(--r-sm);
  padding: .55rem .8rem;
  font-size: .88rem;
  line-height: 1.45;
  border-width: 2px;
  border-style: solid;
}
.msg-ok   { background: var(--green-bg); color: var(--green); border-color: var(--green-bd); }
.msg-err  { background: var(--red-bg);   color: var(--red);   border-color: var(--red-bd);   }
.msg-warn { background: var(--amber-bg); color: var(--amber-txt); border-color: var(--amber-bd); }

.badge-gray {
  background: var(--off);
  color: var(--muted);
  border-color: var(--border)
}

/* ══════════════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════════════ */
.form-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: .85rem
}

.form-field label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em
}

.finput {
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  padding: .6rem .85rem;
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
  background: var(--card-bg);
  width: 100%;
  min-height: 52px;
  transition: border-color .15s, background .2s, color .2s
}

.finput:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(26, 79, 122, .12)
}

textarea.finput {
  min-height: 100px;
  resize: vertical
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem
}

.form-hint {
  font-size: .75rem;
  color: var(--muted);
  margin-top: .15rem
}

.pw-wrap {
  position: relative
}

.pw-wrap .finput {
  padding-right: 2.8rem
}

.pw-toggle {
  position: absolute;
  right: .6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  padding: .3rem;
  font-size: .95rem
}

.req {
  color: var(--red)
}

@media(max-width:580px) {
  .form-row {
    grid-template-columns: 1fr
  }
}

/* ══════════════════════════════════════════════════════════
   AUTH
   ══════════════════════════════════════════════════════════ */
.auth-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  margin: 0 -1.4rem;
  padding: 0 1.4rem
}

.auth-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  color: var(--muted);
  padding: .8rem .5rem;
  cursor: pointer;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s
}

.auth-tab:hover {
  color: var(--blue)
}

.auth-tab.on {
  color: var(--blue);
  border-bottom-color: var(--saff)
}

.auth-err {
  background: var(--red-bg);
  border: 2px solid var(--red-bd);
  border-radius: var(--r-sm);
  padding: .55rem .8rem;
  font-size: .88rem;
  color: var(--red);
  margin-bottom: .8rem;
  display: none
}

.auth-link {
  background: none;
  border: none;
  color: var(--blue);
  font-weight: 700;
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
  font-family: inherit
}

/* ══════════════════════════════════════════════════════════
   MODALS
   ══════════════════════════════════════════════════════════ */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(0, 0, 0, .55);
  align-items: center;
  justify-content: center;
  padding: 1rem
}

.overlay.open {
  display: flex
}

.modal {
  background: var(--card-bg);
  border-radius: var(--r);
  width: 100%;
  max-width: 500px;
  max-height: 94vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  transition: background .2s
}

.modal-wide {
  max-width: 680px
}

.modal-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem;
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 2
}

.modal-hd h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue)
}

.modal-x {
  background: none;
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem
}

.modal-x:hover {
  background: var(--off)
}

.modal-bd {
  padding: 1.25rem 1.4rem
}

.modal-ft {
  padding: .9rem 1.4rem;
  border-top: 2px solid var(--border);
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
  position: sticky;
  bottom: 0;
  background: var(--card-bg)
}

/* ══════════════════════════════════════════════════════════
   SECTION BOX
   ══════════════════════════════════════════════════════════ */
.fsect {
  background: var(--off);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  padding: .9rem;
  margin-bottom: .8rem;
  transition: background .2s, border-color .2s
}

.fsect-title {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .65rem;
  display: flex;
  align-items: center;
  gap: .4rem
}

.fsect-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border)
}

/* ══════════════════════════════════════════════════════════
   HERO STRIP
   ══════════════════════════════════════════════════════════ */
#hero-strip {
  background: linear-gradient(135deg, var(--blue-d) 0%, var(--blue) 100%);
  padding: .85rem 1.25rem;
  transition: background .2s;
}

.hs-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem
}

.hs-text h1 {
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: .25rem
}

.hs-text h1 em {
  color: #fbbf24;
  font-style: normal
}

.hs-text p {
  color: rgba(255, 255, 255, .72);
  font-size: .84rem;
  margin: 0
}

.hs-actions {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  align-items: center
}

.hs-actions .btn {
  min-height: 46px;
  font-size: .88rem
}

/* ══════════════════════════════════════════════════════════
   TOAST
   ══════════════════════════════════════════════════════════ */
#toasts {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: .4rem
}

.toast {
  background: var(--blue-d);
  color: #fff;
  border-radius: var(--r);
  padding: .75rem 1rem;
  font-size: .88rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .5rem;
  max-width: 320px;
  box-shadow: var(--shadow-md);
  animation: toastIn .22s ease
}

.toast.ok {
  background: var(--green)
}

.toast.err {
  background: var(--red)
}

@keyframes toastIn {
  from {
    transform: translateX(110%);
    opacity: 0
  }

  to {
    transform: translateX(0);
    opacity: 1
  }
}

.spin {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255, 255, 255, .3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sp .7s linear infinite;
  display: inline-block
}

@keyframes sp {
  to {
    transform: rotate(360deg)
  }
}

/* ══════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════ */
#footer {
  background: var(--blue-d);
  color: var(--on-dark-muted);
  padding: 2.5rem 1.5rem 1.5rem;
  transition: background .2s
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.75rem
}

.footer-brand-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--on-dark)
}

.footer-brand-sub {
  font-size: .67rem;
  color: var(--on-dark-muted)
}

.footer-desc {
  font-size: .82rem;
  line-height: 1.7;
  margin: .6rem 0 .9rem
}

.footer-col h4 {
  color: var(--on-dark);
  font-size: .82rem;
  font-weight: 700;
  margin-bottom: .6rem;
  text-transform: uppercase;
  letter-spacing: .05em
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .35rem
}

.footer-col a {
  color: var(--on-dark-muted);
  text-decoration: none;
  font-size: .82rem;
  transition: .15s
}

.footer-col a:hover {
  color: var(--gold)
}

.footer-bottom {
  border-top: 1px solid var(--on-dark-bd);
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .76rem;
  color: var(--on-dark-muted)
}

/* ══════════════════════════════════════════════════════════
   HELP-APPLY BUTTON — theme-aware
   ══════════════════════════════════════════════════════════ */
#help-apply-btn {
  position: fixed;
  bottom: 0;
  left: 1.25rem;
  z-index: 350;
}

#help-apply-btn>button {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--saff);
  color: #fff;
  border: none;
  border-radius: 12px 12px 0 0;
  padding: .55rem 1rem;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .2);
  transition: background .2s;
}

#help-apply-btn>button:hover {
  background: var(--saff-l)
}

#help-apply-panel {
  display: none;
  background: var(--card-bg);
  border: 2px solid var(--saff);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
  padding: 1rem 1.1rem;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .25);
  width: 280px;
  max-width: calc(100vw - 1.5rem);
  transition: background .2s;
  /* Force opaque — never transparent on mobile */
  isolation: isolate;
}

#help-apply-panel.open {
  display: block
}

#help-apply-panel p {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.75;
  margin: 0 0 .85rem
}

.hap-link {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
  font-size: .84rem;
  padding: .6rem .9rem;
  border-radius: 8px;
  text-decoration: none;
  margin-bottom: .5rem;
  min-height: 44px;
  transition: opacity .15s
}

.hap-link:hover {
  opacity: .88
}

.hap-email {
  background: var(--blue);
  color: var(--blue-text)
}

.hap-wa {
  background: #25d366;
  color: #fff
}

.hap-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  font-size: .72rem;
  cursor: pointer;
  font-family: inherit;
  margin-top: .65rem;
  padding: 0;
  width: 100%;
  text-align: right
}

/* ══════════════════════════════════════════════════════════
   DYSLEXIA / SPACING / MOTION
   ══════════════════════════════════════════════════════════ */
body.dyslexia * {
  font-family: "OpenDyslexic", "Comic Sans MS", cursive !important
}

body.wide-spacing {
  letter-spacing: .06em !important;
  word-spacing: .16em !important
}

body.wide-spacing p,
body.wide-spacing li {
  line-height: 2 !important
}

.reading-highlight {
  background: rgba(255, 215, 0, .38) !important;
  outline: 2px solid var(--saff) !important;
  border-radius: 3px
}

/* ── Google Translate suppress ── */
.goog-te-banner-frame,
.goog-te-ftab-float,
#goog-gt-tt {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  pointer-events: none !important
}

.skiptranslate,
.goog-te-gadget {
  display: none !important
}

#google_translate_element {
  display: none !important
}

font[size] {
  font-size: inherit !important
}

body {
  top: 0 !important;
  margin-top: 0 !important
}

/* ── Reduce motion ── */
@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important
  }
}

/* ══════════════════════════════════════════════════════════
   HIGH CONTRAST OVERRIDE LAYER
   Covers every element where inline rgba/hex bypasses vars.
   Uses !important only where necessary to beat specificity.
   Applied to both body.hc (JS toggle) and [data-theme="hcb"].
   ══════════════════════════════════════════════════════════ */

/* ── Shared selector for both HC modes ── */
body.hc,
[data-theme="hcb"],
[data-theme="hcw"] {

  /* All text always readable */
  color: var(--text);

  /* Nav */
  .nav-brand-name {
    color: var(--blue) !important;
    background: none !important;
  }

  .nav-brand-icon {
    background: var(--blue) !important;
    color: var(--blue-text) !important;
  }

  .nav-link,
  .nav-links a {
    color: var(--muted) !important;
    background: none !important;
  }

  .nav-link:hover,
  .nav-links a:hover {
    color: var(--blue) !important;
    background: var(--off) !important;
  }

  .nav-link.active {
    color: var(--blue) !important;
  }

  .nav-cta {
    background: var(--saff) !important;
    color: var(--saff-text) !important;
    border-color: var(--saff) !important;
  }

  .nav-burger {
    border-color: var(--border) !important;
    color: var(--text) !important;
    background: none !important;
  }

  #nav {
    background: var(--card-bg) !important;
    border-color: var(--saff) !important;
  }

  .btn-primary {
    background: var(--saff) !important;
    color: var(--saff-text) !important;
    border-color: var(--saff) !important;
  }

  .btn-blue {
    background: var(--blue) !important;
    color: var(--blue-text) !important;
    border-color: var(--blue) !important;
  }

  .btn-outline {
    background: var(--card-bg) !important;
    color: var(--blue) !important;
    border-color: var(--blue) !important;
  }

  .btn-ghost {
    background: var(--off) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }

  /* Cards & surfaces */
  .jcard,
  .modal,
  .tbl-wrap,
  .afc,
  .ms-pillar,
  .fsect {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
  }

  /* All inputs */
  .finput,
  input,
  select,
  textarea {
    background: var(--card-bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }

  .finput::placeholder {
    color: var(--muted) !important;
    opacity: 1 !important;
  }

  /* Labels, hints, muted text */
  .form-field label,
  .form-hint,
  .afc-num,
  .afc-desc,
  .td-sub,
  .jcard-co,
  .jcard-meta span,
  .ms-stat-label,
  .ms-stat-sub,
  [class*="muted"] {
    color: var(--muted) !important;
  }

  /* Badges & tags */
  .badge,
  .dc,
  .btag,
  .stag,
  .afc-tag,
  .badge-blue,
  .badge-green,
  .badge-amber,
  .badge-red {
    border-width: 2px !important;
  }

  /* Filter chips */
  .fchip,
  .gl-filter-btn,
  .af-fb,
  .jc {
    background: var(--card-bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }

  .fchip.on,
  .gl-filter-btn.on,
  .af-fb.on,
  .jc.on {
    background: var(--blue) !important;
    color: var(--page-bg) !important;
    border-color: var(--blue) !important;
  }

  /* Accessibility feature cards */
  .afc {
    border-color: var(--border) !important;
  }

  .afc:hover {
    border-color: var(--blue) !important;
  }

  .afc-toggle {
    background: var(--off) !important;
    color: var(--blue) !important;
    border-color: var(--border) !important;
  }

  .afc-panel {
    background: var(--card-bg) !important;
    color: var(--text) !important;
  }

  .afc-tag {
    background: var(--info-bg) !important;
    color: var(--info-txt) !important;
    border-color: var(--info-bd) !important;
  }

  .afc-title {
    color: var(--text) !important;
  }

  /* Job search filters */
  .jf {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
  }

  .jf-search-input,
  .jf-drop-sel {
    background: var(--card-bg) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }

  /* Job cards */
  .jcard-title {
    color: var(--text) !important;
  }

  .jsal {
    color: var(--green) !important;
  }

  .jsal.neg {
    color: var(--muted) !important;
  }

  .jdet-title {
    color: var(--text) !important;
  }

  .jsect {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
  }

  .jsect-ttl {
    color: var(--muted) !important;
  }

  .jsect-ttl::after {
    background: var(--border) !important;
  }

  /* Modals */
  .modal-hd {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
  }

  .modal-hd h2 {
    color: var(--blue) !important;
  }

  .modal-x {
    border-color: var(--border) !important;
    color: var(--muted) !important;
  }

  .modal-bd {
    background: var(--card-bg) !important;
  }

  /* Auth tabs */
  .auth-tab {
    color: var(--muted) !important;
    border-color: transparent !important;
  }

  .auth-tab.on {
    color: var(--blue) !important;
    border-color: var(--saff) !important;
  }

  .auth-err {
    background: var(--red-bg) !important;
    color: var(--red) !important;
    border-color: var(--red-bd) !important;
  }

  /* Section headers */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--text) !important;
  }

  p,
  li,
  span:not(.badge):not(.dc):not(.stag):not(.btag):not(.afc-tag) {
    color: inherit;
  }

  a {
    color: var(--blue) !important;
  }

  /* Footer always readable */
  #footer {
    background: var(--blue-d) !important;
  }

  .footer-brand-name,
  .footer-col h4 {
    color: var(--on-dark) !important;
  }

  .footer-col a {
    color: var(--on-dark-muted) !important;
  }

  .footer-col a:hover {
    color: var(--gold) !important;
  }

  .footer-bottom {
    color: var(--on-dark-muted) !important;
    border-color: var(--on-dark-bd) !important;
  }

  /* Dashboard / company portal */
  .dash-card {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
  }

  .dash-title {
    color: var(--text) !important;
  }

  .dash-co {
    color: var(--muted) !important;
  }

  /* Toasts */
  .toast {
    background: var(--blue-d) !important;
    color: var(--on-dark) !important;
  }

  .toast.ok {
    background: var(--green) !important;
    color: var(--page-bg) !important;
  }

  .toast.err {
    background: var(--red) !important;
    color: var(--page-bg) !important;
  }

  /* Mobile bottom bar */
  #mob-bottom-bar {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
  }

  .mbb-btn {
    color: var(--muted) !important;
    background: none !important;
  }

  .mbb-btn.active {
    color: var(--blue) !important;
  }

  /* Sidebar (admin) */
  .sb-btn {
    color: var(--on-dark) !important;
  }

  .sb-btn.on {
    background: rgba(255, 255, 255, .14) !important;
    color: var(--on-dark) !important;
  }

  .sb-badge {
    background: var(--saff) !important;
    color: var(--page-bg) !important;
  }

  /* Selects — native dropdown arrow visible */
  select {
    accent-color: var(--blue) !important;
  }

  /* Scrollbars */
  * {
    scrollbar-color: var(--border) var(--off);
  }
}

/* ── HC Dark specific (yellow on black) ── */
body.hc,
[data-theme="hcb"] {
  --hero-bg: #000000;
  --hero-bg-end: #111111;
  --section-dark: #000000;
  --saff-text: #000000;
  --blue-text: #000000;

  /* afc-icon: inline style="background:X" overridden by !important */
  .afc-icon {
    background: var(--off) !important;
  }

  .afc-icon i {
    color: var(--blue) !important;
  }

  .afc-icon i[style] {
    color: var(--blue) !important;
  }

  .afc-accent {
    background: var(--saff) !important;
  }

  .afc-title {
    color: var(--text) !important;
  }

  .afc-desc {
    color: var(--muted) !important;
  }

  /* UDID info card */
  .af-info-udid {
    background: var(--hero-bg) !important;
    border-color: var(--saff) !important;
  }

  .af-info-udid h2 {
    color: var(--gold) !important;
  }

  .af-info-udid p {
    color: var(--on-dark-muted) !important;
  }

  .af-info-udid a {
    color: var(--gold) !important;
    border-color: var(--gold) !important;
  }

  /* Rights card */
  .af-info-rights {
    background: var(--card-bg) !important;
    border-color: var(--border) !important;
  }

  .af-right-check {
    background: var(--saff) !important;
    color: var(--saff-text) !important;
  }

  .af-right-item {
    border-color: var(--border) !important;
    color: var(--text) !important;
  }

  /* Tip banner & stat strip */
  .af-tip {
    background: var(--hero-bg) !important;
    border-color: var(--saff) !important;
  }

  .af-tip-inner i {
    color: var(--gold) !important;
  }

  .af-tip-inner strong {
    color: var(--on-dark) !important;
  }

  .af-stats {
    background: var(--section-dark) !important;
  }

  .af-stat-n {
    color: var(--gold) !important;
  }

  .af-stat-l {
    color: var(--on-dark-muted) !important;
  }

  .af-hstat {
    background: var(--on-dark-tint) !important;
    border-color: var(--on-dark-bd) !important;
  }

  .af-hstat-n {
    color: var(--gold) !important;
  }

  .af-hstat-l {
    color: var(--on-dark-muted) !important;
  }

  /* Contact CTA */
  .af-contact-inner {
    background: var(--hero-bg) !important;
    border-color: var(--border) !important;
  }

  .af-contact-inner h2 {
    color: var(--on-dark) !important;
  }

  .af-contact-inner p {
    color: var(--on-dark-muted) !important;
  }

  .af-contact-btn {
    background: var(--saff) !important;
    color: var(--saff-text) !important;
  }

  .af-contact-icon {
    color: var(--gold) !important;
  }

  .af-contact-helpline {
    color: var(--on-dark-muted) !important;
  }

  /* Mission page */
  .ms-stats-strip {
    border-color: var(--gold) !important;
  }

  .ms-step-num {
    background: var(--saff) !important;
    color: var(--saff-text) !important;
  }

  .ms-partner-box {
    background: var(--off) !important;
    border-color: var(--border) !important;
  }

  .ms-cta-btn {
    color: var(--saff-text) !important;
  }

  .ms-award-icon {
    color: var(--saff-text) !important;
  }
}

/* ── HC Light specific (black on white) ── */
[data-theme="hcw"] {

  /* All borders 2px solid black for max visibility */
  .jcard,
  .afc,
  .btn,
  .finput,
  .modal,
  .badge {
    border-width: 2px !important;
  }

  /* Dark sections in mission stay readable */
  .ms-hero,
  .ms-stats-strip,
  .ms-dark-block,
  .ms-cta-block {
    background: var(--blue-d) !important;
  }

  .on-dark,
  .on-dark-gold {
    color: #fff !important;
  }

  .on-dark-muted {
    color: rgba(255, 255, 255, .8) !important;
  }
}

/* ══════════════════════════════════════════════════════════
   KEYBOARD NAV
   ══════════════════════════════════════════════════════════ */
body.keyboard-nav *:focus {
  outline: 3px solid var(--gold, #fbbf24) !important;
  outline-offset: 3px !important
}

body.keyboard-nav button:focus,
body.keyboard-nav a:focus {
  box-shadow: 0 0 0 4px rgba(251, 191, 36, .3) !important
}

/* ══════════════════════════════════════════════════════════
   MOBILE NAV
   ══════════════════════════════════════════════════════════ */
@media(max-width:820px) {
  .nav-burger {
    display: flex
  }

  .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--card-bg);
    border-bottom: 3px solid var(--saff);
    padding: .4rem .75rem .65rem;
    gap: .02rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
    z-index: 100
  }

  .nav-links.open {
    display: flex
  }

  .nav-link {
    border-bottom: none;
    border-radius: var(--r-sm);
    padding: .6rem .85rem;
    font-size: .9rem;
    min-height: 50px
  }

  .nav-link:hover {
    background: var(--off)
  }

  .nav-cta {
    justify-content: center;
    margin-top: .3rem;
    padding: .6rem !important;
    font-size: .9rem !important
  }

  /* sticky top values adjusted for mobile in topbar.js @media block */
}

@media(max-width:600px) {
  .nav-inner {
    padding: .35rem .85rem
  }

  .nav-brand-icon {
    width: 36px;
    height: 36px;
    font-size: .9rem
  }

  .nav-brand-name {
    font-size: .82rem
  }

  .nav-brand-sub {
    font-size: .56rem
  }

  .nav-burger {
    width: 40px;
    height: 40px;
    font-size: 1rem
  }

  #hero-strip {
    padding: .75rem .9rem
  }

  .hs-inner {
    flex-direction: column;
    align-items: stretch;
    gap: .55rem
  }

  .hs-text h1 {
    font-size: 1rem
  }

  .hs-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem
  }

  .hs-actions .btn,
  .hs-actions .btn-outline-white {
    min-height: 44px;
    font-size: .84rem;
    justify-content: center;
    border-radius: 10px
  }
}

/* A11y bar mobile — handled by nav.js CSS */

/* ── MODAL MOBILE ── */
@media(max-width:600px) {
  .overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .modal {
    max-width: 100vw !important;
    width: 100vw !important;
    border-radius: 18px 18px 0 0 !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    /* Prevent any child from overflowing screen */
    overflow-x: hidden !important;
  }

  .modal-bd {
    padding: .9rem 1rem !important;
    overflow-x: hidden !important
  }

  .modal-hd {
    padding: .85rem 1rem .65rem !important
  }

  .form-row {
    grid-template-columns: 1fr !important
  }

  .fsect {
    padding: .8rem .9rem
  }

  .auth-tab {
    font-size: .8rem;
    padding: .55rem .65rem
  }

  select.finput,
  input.finput,
  textarea.finput {
    font-size: 16px !important
  }

  /* All inputs/selects max their container */
  .finput,
  .modal-bd input,
  .modal-bd select,
  .modal-bd textarea {
    max-width: 100% !important;
    box-sizing: border-box !important
  }
}

/* ── FOOTER MOBILE ── */
@media(max-width:780px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:480px) {
  .footer-grid {
    grid-template-columns: 1fr
  }
}

/* ── TOAST MOBILE ── */
@media(max-width:600px) {
  #toasts {
    left: 1rem;
    right: 1rem;
    bottom: 1rem
  }

  .toast {
    max-width: 100%
  }
}

/* ── TOUCH ── */
@media(pointer:coarse) {

  .btn,
  .btn-primary,
  .btn-blue,
  .btn-outline,
  .btn-ghost {
    min-height: 50px
  }

  .nav-link {
    min-height: 50px
  }

  .auth-tab {
    min-height: 46px
  }

  select.finput,
  input.finput,
  textarea.finput {
    font-size: 16px !important
  }
}

/* ── BOTTOM NAV BAR ── */
#mob-bottom-bar {
  display: none
}

/* Help Apply solid bg on mobile */
@media(max-width:680px) {
  #help-apply-btn>button {
    background: var(--saff) !important;
    opacity: 1 !important;
  }

  #help-apply-panel {
    background: var(--card-bg) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

@media(max-width:680px) {
  #mob-bottom-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 400;
    background: var(--card-bg);
    border-top: 1.5px solid var(--border);
    padding: .3rem 0 calc(.3rem + var(--safe-b));
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .1);
    transition: background .2s, border-color .2s;
  }

  .mbb-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .18rem;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: .6rem;
    font-weight: 700;
    color: var(--muted);
    padding: .3rem .2rem;
    transition: color .14s;
    min-height: 52px
  }

  .mbb-btn i {
    font-size: 1.2rem;
    display: block
  }

  #help-apply-btn {
    display: none !important
  }
}

/* ── TABLET ── */
@media(min-width:581px) and (max-width:860px) {
  .modal {
    max-width: min(95vw, 520px) !important;
    width: calc(100vw - 2rem) !important
  }

  .jgrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* ══════════════════════════════════════════════════════════
   ACCOUNT-TYPE VISIBILITY RULES
   Body gets class: user-guest | user-jobseeker | user-company
   ══════════════════════════════════════════════════════════ */

/* Company logged in: hide Employer nav button + Apply buttons on cards */
body.user-company .nav-employer-btn,
body.user-company #mbb-employer,
body.user-company .btn-apply-job {
  display: none !important;
}

/* Job seeker logged in: hide Employer nav button + mobile Employer tab */
body.user-jobseeker .nav-employer-btn,
body.user-jobseeker #mbb-employer {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   THEME-AWARE UTILITY CLASSES
   Used by dynamically generated HTML — all pick up theme vars.
   No hardcoded colors anywhere in JS — use these classes.
   ══════════════════════════════════════════════════════════ */

/* Success / green */
.ui-success {
  background: var(--green-bg);
  border: 2px solid var(--green-bd);
  border-radius: var(--r-sm);
  padding: .55rem .8rem;
  font-size: .88rem;
  color: var(--green);
}

/* Error / red */
.ui-error {
  background: var(--red-bg);
  border: 2px solid var(--red-bd);
  border-radius: var(--r-sm);
  padding: .55rem .8rem;
  font-size: .88rem;
  color: var(--red);
  display: none;
}

/* Warning / amber */
.ui-warn {
  background: var(--amber-bg);
  border: 2px solid var(--amber-bd);
  border-radius: var(--r-sm);
  padding: .55rem .8rem;
  font-size: .88rem;
  color: var(--amber-txt);
}

/* Info / blue */
.ui-info {
  background: var(--info-bg);
  border: 2px solid var(--info-bd);
  border-radius: var(--r-sm);
  padding: .55rem .8rem;
  font-size: .88rem;
  color: var(--info-txt);
}

/* Action buttons — theme-aware semantic colors */
.btn-action-green {
  background: var(--green-bg) !important;
  border: 2px solid var(--green-bd) !important;
  color: var(--green) !important;
}

.btn-action-amber {
  background: var(--amber-bg) !important;
  border: 2px solid var(--amber-bd) !important;
  color: var(--amber-txt) !important;
}

.btn-action-red {
  background: var(--red-bg) !important;
  border: 2px solid var(--red-bd) !important;
  color: var(--red) !important;
}

.btn-action-neutral {
  background: var(--off) !important;
  border: 2px solid var(--border) !important;
  color: var(--muted) !important;
}

/* Tag variants */
.tag-green {
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green-bd);
}

.tag-amber {
  background: var(--amber-bg);
  color: var(--amber-txt);
  border-color: var(--amber-bd);
}

.tag-red {
  background: var(--red-bg);
  color: var(--red);
  border-color: var(--red-bd);
}

.tag-info {
  background: var(--info-bg);
  color: var(--info-txt);
  border-color: var(--info-bd);
}

/* Inline field error */
.field-err {
  display: none;
  color: var(--red);
  font-size: .75rem;
  margin-top: .2rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════
   SMOOTH THEME TRANSITIONS — every element changes together
   ══════════════════════════════════════════════════════════ */
body,
body *:not([class*="spin"]):not([class*="skel"]):not(.toast):not(.toast *) {
  transition-property: background-color, color, border-color, fill, stroke;
  transition-duration: .18s;
  transition-timing-function: ease;
}

/* ══════════════════════════════════════════════════════════
   MOBILE BOTTOM BAR — in style.css so theme cascade applies
   ══════════════════════════════════════════════════════════ */
#mob-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 480;
  background: var(--card-bg);
  border-top: 1.5px solid var(--border);
  padding: 0 0 env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
  align-items: stretch;
  justify-content: space-around;
}

@media(max-width:680px) {
  #mob-bottom-bar {
    display: flex
  }
}

.mbb-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  padding: .45rem .3rem;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .6rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .01em;
  text-transform: uppercase;
  transition: color .15s, background .15s, color .15s;
  min-height: 52px;
}

.mbb-btn i {
  font-size: 1.15rem;
  display: block;
  line-height: 1.2
}

.mbb-btn span {
  display: block;
  line-height: 1
}

.mbb-btn:hover {
  color: var(--blue);
  background: var(--off)
}

.mbb-btn.active {
  color: var(--blue)
}

/* ═══════════════════════════════════════════════════════════
   EUROPEAN INTERIOR THEMES — Furniture & architecture palettes
   ═══════════════════════════════════════════════════════════ */

/* ── Mahogany — antique European timber, warm copper accent ── */
[data-theme="mahogany"] {
  --blue: #7a2010;
  --blue-d: #3c0c06;
  --blue-l: #a83018;
  --saff: #c86030;
  --saff-l: #e07848;
  --white: #fdf4ec;
  --card-bg: #fdf4ec;
  --off: #f5e4d4;
  --page-bg: #ead4c0;
  --text: #1c0806;
  --muted: #7a3820;
  --border: #d8a888;
  --border-l: #e8c8b0;
  --green: #2d5c1a;
  --green-bg: #f0f5e8;
  --green-bd: #b0d898;
  --red: #8b1a1a;
  --red-bg: #fef2f0;
  --red-bd: #f4a8a8;
  --amber-bg: #fdf4e0;
  --amber-bd: #e8b870;
  --amber-txt: #5c2c00;
  --info-bg: #faf0e8;
  --info-bd: #d8a888;
  --info-txt: #7a2010;
  --bar-bg: #3c0c06;
  --bar-text: #fff;
  --gold: #c86030;
  --green-d: #3d5c1a;
  --on-dark: #fff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #3c0c06;
  --hero-bg-end: #7a2010;
  --section-dark: #1c0806;
  --saff-text: #ffffff;
  --blue-text: #ffffff;
}

/* ── Velvet Rouge — European velvet upholstery, deep burgundy ── */
[data-theme="velvet"] {
  --blue: #7a1848;
  --blue-d: #3c0820;
  --blue-l: #a82860;
  --saff: #d84070;
  --saff-l: #f06088;
  --white: #fdf5fb;
  --card-bg: #fdf5fb;
  --off: #f5e4f0;
  --page-bg: #e8d0e4;
  --text: #1c0416;
  --muted: #7a3060;
  --border: #d8a0c8;
  --border-l: #e8c8e0;
  --green: #2d6b2a;
  --green-bg: #edf5ed;
  --green-bd: #a8d8a8;
  --red: #8b1a1a;
  --red-bg: #fef2f0;
  --red-bd: #f4a8a8;
  --amber-bg: #fdf5e0;
  --amber-bd: #e8c870;
  --amber-txt: #5c2c00;
  --info-bg: #faf0f8;
  --info-bd: #d8a0c8;
  --info-txt: #7a1848;
  --bar-bg: #3c0820;
  --bar-text: #fff;
  --gold: #d84070;
  --green-d: #3d5c1a;
  --on-dark: #fff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #3c0820;
  --hero-bg-end: #7a1848;
  --section-dark: #1c0416;
  --saff-text: #ffffff;
  --blue-text: #ffffff;
}

/* ── Cognac — European cognac leather, aged brass hardware ── */
[data-theme="cognac"] {
  --blue: #7a4010;
  --blue-d: #3c1c06;
  --blue-l: #a05820;
  --saff: #c87830;
  --saff-l: #e09048;
  --white: #fdf6ec;
  --card-bg: #fdf6ec;
  --off: #f5e8d4;
  --page-bg: #e8d8b8;
  --text: #1c0e04;
  --muted: #7a4c20;
  --border: #d8b880;
  --border-l: #e8d0a8;
  --green: #2d5c1a;
  --green-bg: #f0f5e8;
  --green-bd: #b0d898;
  --red: #8b1a1a;
  --red-bg: #fef2f0;
  --red-bd: #f4a8a8;
  --amber-bg: #fdf5e0;
  --amber-bd: #e8c870;
  --amber-txt: #5c3200;
  --info-bg: #faf2e0;
  --info-bd: #d8b880;
  --info-txt: #7a4010;
  --bar-bg: #3c1c06;
  --bar-text: #fff;
  --gold: #c87830;
  --green-d: #3d5c1a;
  --on-dark: #fff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #3c1c06;
  --hero-bg-end: #7a4010;
  --section-dark: #1c0e04;
  --saff-text: #1c0e04;
  --blue-text: #ffffff;
}

/* ── Sage Linen — European linen & olive sage, natural studio ── */
[data-theme="sage-linen"] {
  --blue: #3a5820;
  --blue-d: #1c3010;
  --blue-l: #507030;
  --saff: #8aa040;
  --saff-l: #a8c050;
  --white: #f8faf0;
  --card-bg: #f8faf0;
  --off: #ecf0e0;
  --page-bg: #dfe5cc;
  --text: #141e0a;
  --muted: #506030;
  --border: #c0cc98;
  --border-l: #d8e0b8;
  --green: #2d6b1a;
  --green-bg: #f0f5e8;
  --green-bd: #b0d898;
  --red: #8b1a1a;
  --red-bg: #fef2f0;
  --red-bd: #f4a8a8;
  --amber-bg: #fdf8e0;
  --amber-bd: #e8d080;
  --amber-txt: #484000;
  --info-bg: #f0f4e4;
  --info-bd: #c0cc98;
  --info-txt: #3a5820;
  --bar-bg: #1c3010;
  --bar-text: #fff;
  --gold: #90a840;
  --green-d: #3d6b1a;
  --on-dark: #fff;
  --on-dark: #fff;
  --on-dark-muted: rgba(255, 255, 255, .65);
  --on-dark-tint: rgba(255, 255, 255, .10);
  --on-dark-tint-h: rgba(255, 255, 255, .18);
  --on-dark-bd: rgba(255, 255, 255, .20);
  --hero-bg: #1c3010;
  --hero-bg-end: #3a5820;
  --section-dark: #141e0a;
  --saff-text: #141e0a;
  --blue-text: #ffffff;
}

/* ═══════════════════════════════════════════════════════════
   WOW VISUAL EFFECTS — Texture, depth & warmth
   Active only on the 5 European interior themes.
   ═══════════════════════════════════════════════════════════ */


/* ── Lotus Sunrise — warm cream · terracotta · golden saffron ── */
[data-theme="lotus"] {
  --blue:      #883018;
  --blue-d:    #501808;
  --blue-l:    #a84828;
  --saff:      #e08818;
  --saff-l:    #f0a030;
  --white:     #fffbf4;
  --card-bg:   #fffbf4;
  --off:       #faf0e0;
  --page-bg:   #f5e4c8;
  --text:      #2a1206;
  --muted:     #7a4c28;
  --border:    #e8c898;
  --border-l:  #f0ddb8;
  --saff-text: #2a1206;
  --blue-text: #ffffff;
  --info-bg:   #fff8ee;
  --info-bd:   #f0c878;
  --info-txt:  #6a3008;
  --green:     #3a7a28;
  --green-bg:  #f2fbee;
  --green-bd:  #a8d898;
  --red:       #c83020;
  --red-bg:    #fff0ee;
  --red-bd:    #f0a898;
  --bar-bg:    #501808;
  --bar-text:  #ffffff;
  --amber-bg:  #fff8ee;
  --amber-bd:  #e8b870;
  --amber-txt: #6a3008;
  --gold:      #e08818;
  --green-d:   #2a6018;
  --on-dark:        #ffffff;
  --on-dark-muted:  rgba(255,255,255,.72);
  --on-dark-tint:   rgba(255,255,255,.10);
  --on-dark-tint-h: rgba(255,255,255,.18);
  --on-dark-bd:     rgba(255,255,255,.22);
  --hero-bg:     #501808;
  --hero-bg-end: #883018;
  --section-dark:#381004;
}

/* ── Odisha Sunrise — deep teal-navy · saffron gold · warm cream · recommended ── */
[data-theme="odisha-sunrise"] {
  --blue:      #0F5A72;
  --blue-d:    #0C3547;
  --blue-l:    #1A7A96;
  --saff:      #D97706;
  --saff-l:    #F59E0B;
  --saff-text: #1C1917;
  --blue-text: #ffffff;

  --white:     #ffffff;
  --card-bg:   #ffffff;
  --off:       #F1F5F4;
  --page-bg:   #FAFAF7;

  --text:      #1C1917;
  --muted:     #64748B;
  --border:    #CBD5E1;
  --border-l:  #E2E8F0;

  --green:     #15803D;
  --green-bg:  #DCFCE7;
  --green-bd:  #86EFAC;
  --red:       #DC2626;
  --red-bg:    #FEE2E2;
  --red-bd:    #FCA5A5;
  --amber-bg:  #FEF3C7;
  --amber-bd:  #FDE68A;
  --amber-txt: #92400E;
  --info-bg:   #EFF6FF;
  --info-bd:   #BFDBFE;
  --info-txt:  #1E40AF;

  --bar-bg:    #0C3547;
  --bar-text:  #ffffff;

  --gold:      #D97706;
  --green-d:   #166534;
  --on-dark:        #ffffff;
  --on-dark-muted:  rgba(255,255,255,.65);
  --on-dark-tint:   rgba(255,255,255,.10);
  --on-dark-tint-h: rgba(255,255,255,.18);
  --on-dark-bd:     rgba(255,255,255,.20);

  --hero-bg:     #0C3547;
  --hero-bg-end: #0F5A72;
  --section-dark:#071E2B;

  --shadow:    0 2px 12px rgba(12,53,71,.10);
  --shadow-md: 0 4px 20px rgba(12,53,71,.14);
  --shadow-lg: 0 8px 32px rgba(12,53,71,.18);
}

/* ── Linen / grain texture on page background ──
   SVG fractal noise tiled at 200px gives a subtle fabric feel.
   body.hc overrides this with !important so HC is unaffected. */
[data-theme="europa"] body,
[data-theme="mahogany"] body,
[data-theme="cognac"] body,
[data-theme="velvet"] body,
[data-theme="sage-linen"] body {
  background-color: var(--page-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── Card depth — warm shadow + 3px lift on hover ── */
[data-theme="europa"] .jcard,
[data-theme="mahogany"] .jcard,
[data-theme="cognac"] .jcard,
[data-theme="velvet"] .jcard,
[data-theme="sage-linen"] .jcard {
  box-shadow: 0 2px 12px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .06);
  transition: box-shadow .22s ease, transform .18s ease;
  border-color: var(--border) !important;
}

[data-theme="europa"] .jcard:hover,
[data-theme="mahogany"] .jcard:hover,
[data-theme="cognac"] .jcard:hover,
[data-theme="velvet"] .jcard:hover,
[data-theme="sage-linen"] .jcard:hover {
  box-shadow: 0 10px 36px rgba(0, 0, 0, .16), 0 3px 10px rgba(0, 0, 0, .09);
  transform: translateY(-3px);
}

/* ── Button shimmer sweep on hover ── */
[data-theme="europa"] .btn-primary,
[data-theme="mahogany"] .btn-primary,
[data-theme="cognac"] .btn-primary,
[data-theme="velvet"] .btn-primary,
[data-theme="sage-linen"] .btn-primary {
  position: relative;
  overflow: hidden;
}

[data-theme="europa"] .btn-primary::after,
[data-theme="mahogany"] .btn-primary::after,
[data-theme="cognac"] .btn-primary::after,
[data-theme="velvet"] .btn-primary::after,
[data-theme="sage-linen"] .btn-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), transparent);
  transform: skewX(-15deg);
  transition: left .5s ease;
  pointer-events: none;
}

[data-theme="europa"] .btn-primary:hover::after,
[data-theme="mahogany"] .btn-primary:hover::after,
[data-theme="cognac"] .btn-primary:hover::after,
[data-theme="velvet"] .btn-primary:hover::after,
[data-theme="sage-linen"] .btn-primary:hover::after {
  left: 130%;
}

/* ── Warm ambient glow on nav border ── */
[data-theme="europa"] #nav,
[data-theme="mahogany"] #nav,
[data-theme="cognac"] #nav,
[data-theme="velvet"] #nav,
[data-theme="sage-linen"] #nav {
  box-shadow: 0 3px 18px rgba(0, 0, 0, .22);
}

/* ── Section blocks — soft warm card bg ── */
[data-theme="europa"] .jsect,
[data-theme="mahogany"] .jsect,
[data-theme="cognac"] .jsect,
[data-theme="velvet"] .jsect,
[data-theme="sage-linen"] .jsect {
  background: var(--card-bg);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .07);
  border-color: var(--border) !important;
}

/* ══════════════════════════════════════════════════════════
   HC DARK MODE — GLOBAL CONTRAST OVERRIDES
   In hcb: --blue=#ffd700 (gold), --saff=#ffd700 (gold).
   Any section using these as bg colours becomes yellow →
   white text is invisible. Force all dark sections to #000/#111
   and all text-on-gold to #000.
   ══════════════════════════════════════════════════════════ */

/* ── Section backgrounds: force pitch-dark (--blue=#ffd700 in hcb) ── */
body.hc .lp-hero          { background: linear-gradient(150deg,#000 0%,#111 100%) !important; }
body.hc .lp-hero::before  { opacity: .04 !important; }
body.hc .lp-cta           { background: linear-gradient(135deg,#000 0%,#111 100%) !important; }
body.hc .lp-a11y          { background: #000 !important; }
body.hc .ms-hero          { background: linear-gradient(135deg,#000 0%,#111 100%) !important; }
body.hc .hiw-intro        { background: linear-gradient(160deg,#000 0%,#111 100%) !important; }
body.hc .af-hero          { background: linear-gradient(135deg,#000 0%,#111 100%) !important; }
body.hc .af-stats         { background: #000 !important; }
body.hc .af-tip           { background: #000 !important; }
body.hc .af-info-udid     { background: linear-gradient(135deg,#000 0%,#111 100%) !important; }
body.hc .af-contact-inner { background: linear-gradient(135deg,#000 0%,#111 100%) !important; }
body.hc .gl-hero          { background: linear-gradient(135deg,#000 0%,#111 100%) !important; }

/* ── Buttons: white text on gold → swap to black ── */
body.hc .btn-primary,
body.hc .btn-blue,
body.hc .lp-btn-primary,
body.hc .fh-btn-p,
body.hc .af-contact-btn,
body.hc .lp-a11y-link { color: #000 !important; }

/* ── Section CTA with var(--saff) background ── */
body.hc .ft-cta { background: #000 !important; }

/* ── Active filter/chip buttons on gold bg ── */
body.hc .af-fb.on { color: #000 !important; }
body.hc .gl-filter-btn.on { color: #000 !important; }

/* ── Small icon circles on gold bg ── */
body.hc .af-right-check { color: #000 !important; }

/* ══════════════════════════════════════════════════════════
   BOTPRESS CHATBOT LAYOUT ADJUSTMENTS
   ══════════════════════════════════════════════════════════ */
@media(max-width:680px) {

  #bp-webchat-container,
  .bp-widget-widget,
  div[dir="ltr"]>iframe[src*="botpress"] {
    bottom: 80px !important;
  }
}