/* PABNet — Clean, Professional Stylesheet
   Primary palette: Dark Green + White + one accent (Gold only when needed)
   Logo colours are in the logo itself — we do NOT repeat them in the UI
*/

:root {
  --primary: #1E5C2E;        /* main green — navbar, buttons, headings */
  --primary-dark: #0F3318;   /* darker green — hover states, footer */
  --primary-light: #EAF3E6;  /* very light green — backgrounds, tags */
  --accent: #D4860A;         /* warm gold — used sparingly for highlights only */
  --dark: #1A1A1A;           /* body text */
  --mid: #555555;            /* secondary text */
  --muted: #888888;          /* placeholder, labels */
  --border: #E0E0E0;         /* borders, dividers */
  --bg: #F7F8F6;             /* page background */
  --white: #FFFFFF;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --radius: 8px;
  --radius-lg: 12px;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--dark);
  background:var(--white);
  line-height:1.7;
  font-size:15px;
}

.container { max-width:1180px; margin:0 auto; padding:0 28px; }
#container { min-height:60vh; }
.debug-bar { background:#fffbcc; border-bottom:1px solid #e0d800; padding:6px 12px; font-size:11px; font-family:monospace; color:#555; }

/* ============================
   LANGUAGE BAR
============================ */
.lang-bar {
  background:var(--primary-dark);
  padding:5px 0;
  font-size:12px;
  letter-spacing:0.3px;
}
.lang-bar-inner { display:flex; align-items:center; gap:20px; }
.lang-link {
  color:rgba(255,255,255,0.65);
  text-decoration:none;
  font-weight:500;
  transition:color .15s;
  font-size:12px;
}
.lang-link:hover { color:rgba(255,255,255,0.95); }
.lang-link.active { color:var(--white); font-weight:600; }
.lang-admin { color:var(--accent) !important; }
.lang-bar-right { margin-left:auto; display:flex; gap:20px; }

/* ============================
   NAVBAR — logo properly embedded
============================ */
.navbar {
  background:var(--white);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:1000;
  padding:0;
}
.nav-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:68px;
}

/* Logo — integrated, not pasted */
.nav-logo {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  padding:8px 0;
}
.logo-wrap {
  width:52px;
  height:52px;
  border-radius:50%;
  overflow:hidden;
  flex-shrink:0;
  border:2px solid var(--primary-light);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--white);
}
.logo-img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.logo-text-wrap {
  display:flex;
  flex-direction:column;
  line-height:1.2;
}
.logo-name {
  font-size:18px;
  font-weight:700;
  color:var(--primary);
  letter-spacing:0.5px;
}
.logo-sub {
  font-size:10px;
  color:var(--muted);
  font-weight:400;
  letter-spacing:0.2px;
  text-transform:uppercase;
}

.nav-menu { display:flex; list-style:none; gap:2px; align-items:center; }
.nav-link {
  text-decoration:none;
  color:var(--mid);
  font-size:13.5px;
  font-weight:500;
  padding:7px 11px;
  border-radius:6px;
  transition:all .15s;
  white-space:nowrap;
}
.nav-link:hover { color:var(--primary); background:var(--primary-light); }
.nav-link.active { color:var(--primary); font-weight:600; }
.nav-cta {
  background:var(--primary) !important;
  color:var(--white) !important;
  padding:7px 16px !important;
  border-radius:6px;
  font-weight:600;
}
.nav-cta:hover { background:var(--primary-dark) !important; }
.nav-toggle { display:none; background:none; border:none; font-size:22px; cursor:pointer; color:var(--mid); }
.nav-dropdown { position:relative; }
.dropdown-menu {
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  min-width:180px;
  list-style:none;
  padding:6px 0;
  z-index:100;
  box-shadow:var(--shadow);
}
.nav-dropdown:hover .dropdown-menu { display:block; }
.dropdown-menu li a {
  display:block;
  padding:9px 16px;
  text-decoration:none;
  color:var(--mid);
  font-size:13px;
}
.dropdown-menu li a:hover { background:var(--primary-light); color:var(--primary); }

/* ============================
   HERO — one colour direction
============================ */
.hero {
  background:linear-gradient(160deg, var(--primary-dark) 0%, var(--primary) 100%);
  color:var(--white);
  padding:88px 0 80px;
  position:relative;
  overflow:hidden;
}
.hero::after {
  content:'';
  position:absolute;
  bottom:-60px;
  right:-60px;
  width:380px;
  height:380px;
  border-radius:50%;
  background:rgba(255,255,255,0.04);
  pointer-events:none;
}
.hero-content { position:relative; max-width:660px; }
.hero-tag {
  display:inline-block;
  background:rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.9);
  padding:4px 14px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  margin-bottom:18px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.2);
}
.hero h1 {
  font-size:44px;
  font-weight:700;
  line-height:1.2;
  margin-bottom:18px;
  letter-spacing:-0.5px;
}
.hero-highlight { color:rgba(255,255,255,0.75); font-weight:300; }
.hero p { font-size:16px; opacity:.85; margin-bottom:32px; max-width:540px; line-height:1.7; }
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; }
.btn-primary {
  background:var(--white);
  color:var(--primary);
  padding:12px 26px;
  border-radius:var(--radius);
  font-weight:600;
  text-decoration:none;
  font-size:14px;
  transition:all .15s;
  display:inline-block;
  border:2px solid var(--white);
}
.btn-primary:hover { background:var(--primary-light); border-color:var(--primary-light); }
.btn-secondary {
  background:transparent;
  color:var(--white);
  border:2px solid rgba(255,255,255,0.5);
  padding:12px 26px;
  border-radius:var(--radius);
  font-weight:500;
  text-decoration:none;
  font-size:14px;
  transition:all .15s;
  display:inline-block;
}
.btn-secondary:hover { border-color:var(--white); background:rgba(255,255,255,0.08); }

/* ============================
   STATS BAR
============================ */
.stats-bar { background:var(--primary-dark); padding:32px 0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat-item { color:var(--white); }
.stat-number { font-size:36px; font-weight:700; color:var(--white); display:block; opacity:.95; }
.stat-label { font-size:11px; opacity:.55; text-transform:uppercase; letter-spacing:1.5px; margin-top:4px; }

/* ============================
   SECTIONS
============================ */
.section { padding:72px 0; }
.section-grey { background:var(--bg); }
.section-dark { background:var(--primary-dark); color:var(--white); }
.section-title {
  font-size:30px;
  font-weight:700;
  color:var(--primary);
  margin-bottom:10px;
  letter-spacing:-0.3px;
  line-height:1.3;
}
.section-dark .section-title { color:var(--white); }
.section-subtitle { font-size:15px; color:var(--muted); margin-bottom:40px; max-width:560px; line-height:1.6; }
.section-dark .section-subtitle { color:rgba(255,255,255,0.65); }
.section-header { text-align:center; margin-bottom:44px; }
.section-header .section-subtitle { margin:0 auto; }
.section-header-row { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; }
.section-cta { text-align:center; margin-top:36px; }

/* ============================
   MISSION QUOTE
============================ */
.mission-quote {
  font-size:20px;
  font-style:italic;
  color:var(--primary);
  border-left:4px solid var(--accent);
  padding-left:20px;
  margin:24px 0;
  line-height:1.6;
  font-weight:400;
}
.body-text { font-size:15px; color:var(--mid); line-height:1.75; }

/* ============================
   TWO COLUMN LAYOUT
============================ */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.mini-card {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 16px;
  text-align:center;
}
.mini-num { font-size:22px; font-weight:700; color:var(--primary); }
.mini-label { font-size:11px; color:var(--muted); margin-top:4px; line-height:1.4; }

/* ============================
   GRIDS
============================ */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }

/* ============================
   FEATURE CARDS
============================ */
.feature-card {
  background:var(--white);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  border:1px solid var(--border);
  border-top:3px solid var(--primary);
}
.feature-icon { font-size:28px; margin-bottom:12px; }
.feature-card h3 { color:var(--primary); margin-bottom:8px; font-size:16px; font-weight:600; }
.feature-card p { font-size:13px; color:var(--mid); line-height:1.6; }

/* ============================
   BADGE CARDS
============================ */
.badge-card {
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  padding:28px 22px;
  text-align:center;
}
.badge-icon { font-size:40px; margin-bottom:12px; }
.badge-name { font-size:15px; font-weight:700; color:var(--primary); margin-bottom:8px; }
.badge-desc { font-size:13px; color:var(--muted); margin-bottom:18px; min-height:48px; line-height:1.5; }
.badge-levels { display:flex; justify-content:center; gap:6px; }
.badge-level { padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.badge-bronze { background:#f0e0c8; color:#7a4a10; }
.badge-silver { background:#ebebeb; color:#555; }
.badge-gold { background:#fdf0d5; color:#8a5c00; }

/* ============================
   NEWS / CONTENT CARDS
============================ */
.card {
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  overflow:hidden;
  transition:box-shadow .2s, transform .2s;
}
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.card-body { padding:22px; }
.card-tag {
  display:inline-block;
  background:var(--primary-light);
  color:var(--primary);
  padding:3px 10px;
  border-radius:20px;
  font-size:11px;
  font-weight:600;
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.card-title { font-size:16px; font-weight:600; margin-bottom:8px; color:var(--dark); line-height:1.4; }
.card-text { font-size:13px; color:var(--muted); line-height:1.6; }
.card-link { color:var(--primary); font-size:13px; font-weight:600; text-decoration:none; margin-top:12px; display:inline-block; }

/* ============================
   PAGE HEADER
============================ */
.page-header {
  background:linear-gradient(160deg, var(--primary-dark), var(--primary));
  color:var(--white);
  padding:52px 0 44px;
}
.page-header h1 { font-size:34px; font-weight:700; margin-bottom:10px; letter-spacing:-0.3px; }
.page-header p { font-size:15px; opacity:.8; max-width:560px; }

/* ============================
   BUTTONS
============================ */
.btn {
  padding:10px 24px;
  border-radius:var(--radius);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  border:none;
  transition:all .15s;
  text-decoration:none;
  display:inline-block;
  font-family:inherit;
}
.btn-green { background:var(--primary); color:var(--white); }
.btn-green:hover { background:var(--primary-dark); }
.btn-outline {
  background:var(--white);
  color:var(--primary);
  border:1.5px solid var(--primary);
}
.btn-outline:hover { background:var(--primary-light); }
.btn-sm { padding:7px 16px; font-size:12px; }

/* ============================
   FORMS
============================ */
.form-group { margin-bottom:16px; }
.form-label { display:block; font-size:13px; font-weight:600; color:var(--dark); margin-bottom:5px; }
.form-control {
  width:100%;
  padding:10px 13px;
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  font-size:14px;
  font-family:inherit;
  color:var(--dark);
  transition:border-color .15s;
  background:var(--white);
}
.form-control:focus { outline:none; border-color:var(--primary); }
.form-control:disabled { background:var(--bg); color:var(--muted); }
textarea.form-control { min-height:110px; resize:vertical; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-full { grid-column:1/-1; }

/* ============================
   ALERTS
============================ */
.alert { padding:12px 16px; border-radius:var(--radius); margin-bottom:16px; font-size:13px; line-height:1.5; }
.alert-success { background:#ecf7ed; color:#1a5c1e; border-left:4px solid var(--primary); }
.alert-error { background:#fdf0f0; color:#8b1a1a; border-left:4px solid #c0392b; }
.alert-info { background:#fdf8ec; color:#7a5000; border-left:4px solid var(--accent); }

/* ============================
   PROGRESS BAR
============================ */
.progress-bar-wrap { background:var(--border); border-radius:20px; height:10px; overflow:hidden; margin:6px 0; }
.progress-bar-fill {
  height:100%;
  border-radius:20px;
  background:linear-gradient(90deg, var(--primary), #3a9e5f);
  transition:width .6s ease;
}

/* ============================
   TABLES
============================ */
.table-wrap { background:var(--white); border-radius:var(--radius-lg); border:1px solid var(--border); overflow:hidden; }
table { width:100%; border-collapse:collapse; }
th {
  background:var(--primary);
  color:var(--white);
  padding:12px 15px;
  text-align:left;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.8px;
}
td { padding:12px 15px; border-bottom:1px solid var(--border); font-size:13px; color:var(--dark); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--primary-light); }
.pill { display:inline-block; padding:2px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.pill-green { background:#dcf0e0; color:#1a5c1e; }
.pill-gold { background:#fdf0d5; color:#7a5000; }
.pill-grey { background:var(--bg); color:var(--muted); }
.pill-red { background:#fdf0f0; color:#8b1a1a; }

/* ============================
   PORTAL (BIOBANK DASHBOARD)
============================ */
.portal-layout { display:grid; grid-template-columns:220px 1fr; gap:24px; min-height:70vh; }
.portal-sidebar {
  background:var(--primary-dark);
  border-radius:var(--radius-lg);
  padding:20px;
  color:var(--white);
  align-self:start;
  position:sticky;
  top:80px;
}
.portal-sidebar h3 {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:rgba(255,255,255,0.45);
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.sidebar-menu { list-style:none; }
.sidebar-menu li { margin-bottom:2px; }
.sidebar-menu a {
  display:block;
  padding:9px 12px;
  color:rgba(255,255,255,0.75);
  text-decoration:none;
  border-radius:6px;
  font-size:13px;
  transition:all .15s;
}
.sidebar-menu a:hover, .sidebar-menu a.active {
  background:rgba(255,255,255,0.12);
  color:var(--white);
}

/* ============================
   QUESTIONNAIRE
============================ */
.question-card {
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1px solid var(--border);
  padding:24px;
  margin-bottom:16px;
}
.question-number { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.question-section-tag { font-size:11px; color:var(--primary); font-weight:600; margin-bottom:10px; background:var(--primary-light); display:inline-block; padding:2px 8px; border-radius:4px; }
.question-text { font-size:15px; font-weight:500; color:var(--dark); margin-bottom:18px; line-height:1.5; }
.answer-options { display:flex; gap:8px; flex-wrap:wrap; }
.answer-btn {
  padding:8px 20px;
  border-radius:6px;
  border:1.5px solid var(--border);
  background:var(--white);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:all .15s;
  font-family:inherit;
  color:var(--mid);
}
.answer-btn:hover { border-color:var(--primary); color:var(--primary); }
.selected-yes { background:var(--primary); color:var(--white); border-color:var(--primary); }
.selected-no { background:#c0392b; color:var(--white); border-color:#c0392b; }
.selected-not-sure { background:var(--accent); color:var(--white); border-color:var(--accent); }

/* ============================
   ADMIN
============================ */
.admin-layout { display:grid; grid-template-columns:200px 1fr; min-height:100vh; }
.admin-sidebar { background:var(--primary-dark); color:var(--white); }
.admin-sidebar-header { padding:20px; border-bottom:1px solid rgba(255,255,255,0.1); }
.admin-sidebar-header img { height:36px; border-radius:50%; }
.admin-menu { list-style:none; padding:8px 0; }
.admin-menu li a {
  display:block;
  padding:10px 16px;
  color:rgba(255,255,255,0.65);
  text-decoration:none;
  font-size:13px;
  transition:all .15s;
  border-left:2px solid transparent;
}
.admin-menu li a:hover, .admin-menu li a.active {
  color:var(--white);
  background:rgba(255,255,255,0.07);
  border-left-color:rgba(255,255,255,0.6);
}
.admin-main { background:var(--bg); padding:28px; }
.admin-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }
.admin-title { font-size:20px; font-weight:700; color:var(--dark); }
.stat-card { background:var(--white); border-radius:var(--radius-lg); padding:20px; border:1px solid var(--border); }
.stat-card-num { font-size:32px; font-weight:700; color:var(--primary); }
.stat-card-label { font-size:12px; color:var(--muted); margin-top:4px; }

/* ============================
   FOOTER
============================ */
.footer { background:var(--primary-dark); color:var(--white); padding:56px 0 0; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:40px; }
.footer-logo { height:48px; border-radius:50%; margin-bottom:14px; }
.footer-tagline { font-size:13px; color:rgba(255,255,255,0.6); margin-bottom:6px; line-height:1.5; }
.footer-sub { font-size:12px; color:rgba(255,255,255,0.35); font-style:italic; }
.footer-links h4 {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:rgba(255,255,255,0.45);
  margin-bottom:14px;
  font-weight:600;
}
.footer-links ul { list-style:none; }
.footer-links ul li { margin-bottom:8px; }
.footer-links ul li a { color:rgba(255,255,255,0.6); text-decoration:none; font-size:13px; transition:color .15s; }
.footer-links ul li a:hover { color:var(--white); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.08);
  padding:18px 0;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,0.3);
}

/* ============================
   RESPONSIVE
============================ */
@media(max-width:1024px) {
  .grid-4 { grid-template-columns:1fr 1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px; }
  .portal-layout { grid-template-columns:1fr; }
  .portal-sidebar { position:static; }
  .admin-layout { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .hero h1 { font-size:30px; }
  .grid-3,.grid-2,.two-col,.form-grid { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .nav-menu { display:none; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:var(--white); border-bottom:1px solid var(--border); padding:12px; z-index:999; }
  .nav-menu.open { display:flex; }
  .nav-toggle { display:block; }
  .logo-sub { display:none; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .section-header-row { flex-direction:column; gap:12px; align-items:flex-start; }
}