/* styles (same as canvas build; trimmed to essentials) */ 
:root {
  --color-bg: #ECF2F4;
  --color-surface: #FFFFFF;
  --color-primary: #1A5276;
  --color-secondary: #27AE60;
  --color-accent: #F39C12;
  --color-heading: #0E2235;
  --color-text: #1F2A33;
  --color-muted: #6B7C8A;
  --color-border: #D7E0E5;
  --color-hero-text: #FFFFFF;
  --brand-main: #16A8AD;
  --brand-dark: #002C4E;
  --brand-light: #F6F7F6;
  --radius: 1rem;
  --shadow: 0 10px 24px rgba(0, 0, 0, .08);
  --focus: 0 0 0 3px rgba(39, 174, 96, .45);
  --admin-height: 40px;
  --nav-height: 64px;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--admin-height) + var(--nav-height) + 16px);
}
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  line-height: 1.6;
}
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: 'Open Sans', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--color-heading);
  letter-spacing: .2px;
}
img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--color-primary);
}
a:hover {
  color: #154862;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  background: #fff;
  padding: .5rem 1rem;
  border-radius: .5rem;
  box-shadow: var(--focus);
  z-index: 2000;
}
#admin-bar {
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
  color: var(--color-hero-text);
  font-size: .95rem;
	z-index: 1050;
}
#admin-bar a {
  color: #fff;
  text-decoration: none;
}
#admin-bar a:hover, #admin-bar a:focus {
  text-decoration: underline;
}
#admin-bar .dropdown-menu {
  position: absolute;  /* keep it out of normal flow under the admin bar */
  z-index: 1060;       /* higher than #admin-bar just to be safe */
}
#navbar-main {
  background: var(--color-surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
  top: var(--admin-height);
  z-index: 1030;
}
/* Fix Bootstrap navbar collapse conflict with Tailwind */
#navbar-main .navbar-collapse {
  visibility: visible !important;
}
#navbar-main .navbar-collapse.collapse:not(.show) {
  display: none;
}
@media (min-width: 992px) {
  #navbar-main .navbar-collapse.collapse {
    display: flex !important;
  }
}
#navbar-main .navbar-brand img {
  height: 50px;
  width: 50px;
}
#navbar-main .nav-link {
  font-weight: 600;
}
.logo-container .sitename{font-weight:800;font-size:1.1rem;line-height:1;}
.logo-container .sitename .sitename-accent{color:#16A8AD;}
.logo-container .tagline{color:#6E6C6C;font-weight:400;font-size:12px;margin-top:2px;}
header#hero-header {
  background: linear-gradient(135deg, var(--color-primary) 10%, var(--color-secondary) 60%, var(--brand-main) 100%);
  color: var(--color-hero-text);
  padding: 3.5rem 0 3rem 0;
  position: relative;
  overflow: hidden;
}
section {
  padding: 4rem 0;
}
section.alt {
  background: linear-gradient(180deg, #F6F7F6 0%, #EEF5F7 100%);
}
.card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.img-placeholder {
  background: #e3e7ea;
  border: 2px dashed var(--color-border);
  color: #5c6c78;
  display: flex;
  align-items: center;
  justify-content: center;  
  min-height: 240px;
  border-radius: var(--radius);
  font-weight: 600;
}
.feedback {
  border-left: 6px solid var(--color-secondary);
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.feedback .avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #dfe7ec;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--color-primary);
}
footer#site-footer {
  background: var(--brand-dark);
  color: #e9f2f8;
  position: relative;
}
footer a {
  color: #e9f2f8;
}
footer a:hover {
  color: #fff;
}
.back-to-top {
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 1.5rem;
}
/* ============== HIGH-CONTRAST DARK MODE (AA/AAA) ============== */ 
body.high-contrast-dark {
--color-bg: #121212;
--color-surface: #1A1A1A;
--color-primary: #FFFFFF; /* pure white text for primary */
--color-secondary: #97F0AA; /* bright accent for CTAs */
--color-accent: #FFD166; /* warm accent */
--color-heading: #FFFFFF; /* headings pure white */
--color-text: #EAEAEA; /* high-contrast text */
--color-muted: #BDBDBD; /* dimmed text */
--color-border: #2F2F2F; /* subtle borders */
--color-hero-text: #FFFFFF; /* hero */
--brand-dark: #000000; /* footer */
background: var(--color-bg);
color: var(--color-text);
}
body.high-contrast-dark #navbar-main {background: var(--color-surface);}
body.high-contrast-dark .card {background: var(--color-surface); color: var(--color-text); border-color: var(--color-border);}
body.high-contrast-dark .img-placeholder {background:#222; border-color:#3a3a3a; color:#fff;}
body.high-contrast-dark footer#site-footer {background:#000; color:#fff;}
body.high-contrast-dark a {color:#97F0AA;}
 /* High-contrast dark overrides: remove gradients and ensure strong contrast */
body.high-contrast-dark #admin-bar{background:#000000;}
body.high-contrast-dark header#hero-header,
body.high-contrast-dark section.alt {
background:#000000 !important;
}
body.high-contrast-dark main,
body.high-contrast-dark section {
background:#000000;
}
body.high-contrast-dark .card,
body.high-contrast-dark .feedback {
background:#000000;
color:#FFFFFF;
border-color:#FFFFFF;
}
body.high-contrast-dark .feedback {
border-left:4px solid #FFFF00;
}
body.high-contrast-dark .img-placeholder {
background:#000000;
border-color:#FFFFFF;
color:#FFFFFF;
}
body.high-contrast-dark .text-muted,
body.high-contrast-dark .small,
body.high-contrast-dark .feedback .small {
color:#FFFFFF;
}
/* ============== HIGH-CONTRAST LIGHT MODE (AAA) ============== */
body.high-contrast-light{
  --color-bg:#FFFFFF;
  --color-surface:#FFFFFF;
  --color-primary:#0033CC; /* accessible link blue */
  --color-secondary:#000000;
  --color-accent:#CC0000;  /* strong accent for alerts/buttons */
  --color-heading:#000000;
  --color-text:#000000;
  --color-muted:#333333;
  --color-border:#000000;
  --color-hero-text:#000000;
  --brand-dark:#000000;
  background:var(--color-bg);
  color:var(--color-text);
}
body.high-contrast-light header#hero-header{background:linear-gradient(135deg,#FFFFFF,#EDEDED);}
body.high-contrast-light #admin-bar{background:#000000;}
body.high-contrast-light .card, body.high-contrast-light .feedback{border-color:#000000;background:#FFFFFF;color:#000000;}
body.high-contrast-light .img-placeholder{background:#FFFFFF;border-color:#000000;color:#000000;}
body.high-contrast-light a{color:#0033CC;} body.high-contrast-light a:hover, body.high-contrast-light a:focus{color:#0000FF;}