/* PSIR Forum visual design (royal blue and gold), shared by all pages.
   Applies to light mode only, so the Dark and System themes keep working. */
:root {
  --psir-royal: #2855A6;
  --psir-royal-dark: #1E3F82;
  --psir-royal-light: #5B8DEF;
  --psir-gold: #E6B75A;
  --psir-blue-bg: #EAF0FC;
  --psir-page: #F7F9FC;
  --psir-card: #FFFFFF;
  --psir-text: #263238;
  --psir-muted: #64748B;
  --psir-border: #DCE3EE;
  --psir-success: #237A57;
  --psir-danger: #B42318;
}

/* Page and text */
html:not([data-theme="dark"]) body { background: var(--psir-page) !important; color: var(--psir-text) !important; }
html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3,
html:not([data-theme="dark"]) h4 { color: var(--psir-royal-dark) !important; }
html:not([data-theme="dark"]) p,
html:not([data-theme="dark"]) li { color: var(--psir-text); }
html:not([data-theme="dark"]) .meta,
html:not([data-theme="dark"]) .help,
html:not([data-theme="dark"]) .lead,
html:not([data-theme="dark"]) .muted,
html:not([data-theme="dark"]) small { color: var(--psir-muted) !important; }

/* Links */
html:not([data-theme="dark"]) a { color: var(--psir-royal); }
html:not([data-theme="dark"]) a:hover { color: var(--psir-royal-dark); }

/* Header and navigation: white with royal blue branding */
html:not([data-theme="dark"]) header,
html:not([data-theme="dark"]) .top,
html:not([data-theme="dark"]) header.top { background: #FFFFFF !important; border-bottom: 1px solid var(--psir-border) !important; }
html:not([data-theme="dark"]) .brand { color: var(--psir-royal-dark) !important; }
html:not([data-theme="dark"]) .top a,
html:not([data-theme="dark"]) .nav a,
html:not([data-theme="dark"]) .nav-links a { color: var(--psir-text) !important; }
html:not([data-theme="dark"]) .top a[aria-current="page"],
html:not([data-theme="dark"]) .nav a[aria-current="page"],
html:not([data-theme="dark"]) .nav-links a[aria-current="page"] { color: var(--psir-royal) !important; }

/* Cards and panels: white, 10px corners */
html:not([data-theme="dark"]) .card,
html:not([data-theme="dark"]) .pub,
html:not([data-theme="dark"]) .item,
html:not([data-theme="dark"]) .panel,
html:not([data-theme="dark"]) .feature,
html:not([data-theme="dark"]) .comment,
html:not([data-theme="dark"]) .thread,
html:not([data-theme="dark"]) .def,
html:not([data-theme="dark"]) .label,
html:not([data-theme="dark"]) .category-card-plain {
  background: var(--psir-card) !important; border: 1px solid var(--psir-border) !important; border-radius: 10px !important;
}

/* Form fields: 6px corners, royal blue focus ring */
html:not([data-theme="dark"]) input:not([type="checkbox"]):not([type="radio"]),
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea {
  background: #FFFFFF !important; color: var(--psir-text) !important;
  border: 1px solid #CBD5E1 !important; border-radius: 6px !important;
}
html:not([data-theme="dark"]) input:focus-visible,
html:not([data-theme="dark"]) select:focus-visible,
html:not([data-theme="dark"]) textarea:focus-visible { outline: 2px solid var(--psir-royal) !important; outline-offset: 1px; border-color: var(--psir-royal) !important; }
html:not([data-theme="dark"]) label { color: var(--psir-text); }

/* Alerts and messages: one style for information, success, and errors */
html:not([data-theme="dark"]) .notice,
html:not([data-theme="dark"]) .note {
  background: var(--psir-blue-bg) !important; color: var(--psir-royal-dark) !important;
  border: 1px solid #C7D6F2 !important; border-radius: 6px !important;
}
html:not([data-theme="dark"]) .notice.ok,
html:not([data-theme="dark"]) .ok {
  background: #E6F2EC !important; color: var(--psir-success) !important; border-color: #B9DDCB !important;
}
html:not([data-theme="dark"]) .error,
html:not([data-theme="dark"]) .error-box,
html:not([data-theme="dark"]) .notice.error {
  background: #FCEBEA !important; color: var(--psir-danger) !important; border-color: #F1C0BB !important;
}
html:not([data-theme="dark"]) .empty {
  background: #FFFFFF !important; color: var(--psir-muted) !important; border: 1px dashed #C7D2E0 !important; border-radius: 10px !important;
}

/* Footer: royal blue band with light text */
html:not([data-theme="dark"]) footer { background: var(--psir-royal-dark) !important; color: #DCE7FA !important; }
html:not([data-theme="dark"]) footer a { color: #FFFFFF !important; }
html:not([data-theme="dark"]) footer a:hover { color: var(--psir-gold) !important; }

/* Keyboard focus everywhere */
:focus-visible { outline: 3px solid var(--psir-royal) !important; outline-offset: 2px; }

/* Phones: keep text comfortable */
@media (max-width: 640px) {
  html:not([data-theme="dark"]) body { font-size: 16px; }
}

/* Text on dark backgrounds (hero banners and footer) must be light.
   Buttons keep their own colours because the button rules are more specific. */
html:not([data-theme="dark"]) .hero,
html:not([data-theme="dark"]) .hero h1,
html:not([data-theme="dark"]) .hero h2,
html:not([data-theme="dark"]) .hero h3,
html:not([data-theme="dark"]) .hero p,
html:not([data-theme="dark"]) .hero li,
html:not([data-theme="dark"]) .hero span,
html:not([data-theme="dark"]) .hero .meta,
html:not([data-theme="dark"]) .hero .lead,
html:not([data-theme="dark"]) .hero small { color: #FFFFFF !important; }
html:not([data-theme="dark"]) .hero p,
html:not([data-theme="dark"]) .hero .lead,
html:not([data-theme="dark"]) .hero .meta,
html:not([data-theme="dark"]) .hero small { color: #E2E8F0 !important; }
html:not([data-theme="dark"]) .hero .eyebrow,
html:not([data-theme="dark"]) .eyebrow { color: #E6B75A !important; }
html:not([data-theme="dark"]) .hero a { color: #FFFFFF !important; text-decoration: underline; }
html:not([data-theme="dark"]) footer,
html:not([data-theme="dark"]) footer h1,
html:not([data-theme="dark"]) footer h2,
html:not([data-theme="dark"]) footer h3,
html:not([data-theme="dark"]) footer h4,
html:not([data-theme="dark"]) footer p,
html:not([data-theme="dark"]) footer li,
html:not([data-theme="dark"]) footer span,
html:not([data-theme="dark"]) footer div { color: #E2E8F0 !important; }
html:not([data-theme="dark"]) footer h1,
html:not([data-theme="dark"]) footer h2,
html:not([data-theme="dark"]) footer h3,
html:not([data-theme="dark"]) footer h4 { color: #FFFFFF !important; }

/* Responsive safety: content must fit the screen width, on phones and in desktop-site mode */
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
iframe { border: 0; }
table { max-width: 100%; display: block; overflow-x: auto; }
pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; }
.card, .pub, .item, .panel, .feature, .comment, .thread, .notice, .note, .error, .empty,
p, li, h1, h2, h3, h4, a, .meta { overflow-wrap: anywhere; word-break: normal; }
.card, .pub, .item, .panel, .feature, .comment, .thread { min-width: 0; max-width: 100%; box-sizing: border-box; }
html, body { max-width: 100%; }
/* Keep touch targets at least 44px tall on phones */
@media (max-width: 640px) {
  button, .btn, .btn-line, .btn-outline, .btn-primary, .btn-gold, .text-action, .psir-btn, .btn-danger, .del, a.more { min-height: 44px; }
}

/* Hamburger menu: the header links collapse behind the menu button on phones and in desktop-site mode */
header .psir-menu-btn { display: none; }
@media (max-width: 1024px) {
  header .top-inner, header .container { flex-wrap: wrap; }
  header .psir-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; order: 2;
    min-width: 44px; min-height: 44px; border: 1px solid #CBD5E1; border-radius: 6px;
    background: #FFFFFF; color: #2855A6; font-size: 20px; cursor: pointer; margin-left: auto;
  }
  header .psir-menu-btn:focus-visible { outline: 3px solid #2855A6; outline-offset: 2px; }
  header nav.psir-nav { display: none; }
  header nav.psir-nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0; order: 10; width: 100%;
    background: #FFFFFF; border-top: 1px solid #DCE3EE; padding: 4px 0;
  }
  header nav.psir-nav.open a { padding: 12px 4px; border-bottom: 1px solid #EEF2F7; min-height: 44px; display: flex; align-items: center; }
}

/* Shared header on every page: same height, brand, links and controls alignment */
header.top { background: #FFFFFF !important; border-bottom: 1px solid #DCE3EE !important; }
header .top-inner { min-height: 68px; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 10px 16px; padding: 8px 0; }
header .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1rem; letter-spacing: 0.6px; color: #1E3F82 !important; text-decoration: none; white-space: nowrap; }
header .psir-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; background: #1E3F82; color: #E6B75A; font-size: 0.8rem; font-weight: 800; flex: 0 0 auto; }
header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
header nav a { font-size: 0.92rem; font-weight: 600; color: #263238 !important; text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; }
header nav a:hover { color: #2855A6 !important; }
header nav a[aria-current="page"] { color: #2855A6 !important; border-bottom-color: #E6B75A; }
header #psirAppearance { margin-left: auto; }
header #psirAppearance button { min-height: 34px; padding: 4px 10px; font-size: 0.82rem; }
header #psirBell { min-height: 38px; }
@media (max-width: 1024px) {
  header .top-inner { justify-content: space-between; }
  header #psirAppearance { margin-left: 0; }
}

/* Menu button sits at the right edge of the header, after the login and language controls */
header .mobile-menu, header .psir-menu-btn, header .psir-menu-right { order: 99 !important; margin-left: 8px !important; }
header #navActions, header .nav-actions, header #psirAppearance { margin-left: auto; }

/* Language selector (one on every page); the older Amharic-only button is hidden */
#psirLangButton { display: none !important; }
#psirLang { min-height: 36px; border-radius: 6px; border: 1px solid #CBD5E1; padding: 4px 8px; font: inherit; font-size: 0.85rem; background: #FFFFFF; color: #263238; margin-left: 6px; }

/* Role badges and profile photos */
.psir-badge { display: inline-block; font-size: 0.7rem; font-weight: 800; line-height: 1; padding: 3px 7px; border-radius: 4px; margin-left: 6px; vertical-align: middle; }
.psir-badge-admin { background: #E6B75A; color: #263238; }
.psir-badge-mod { background: #EAF0FC; color: #2855A6; border: 1px solid #5B8DEF; }
.psir-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; margin-right: 6px; vertical-align: middle; }
.psir-avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; vertical-align: middle; border: 1px solid #DCE3EE; }

/* Home page header on phones: one tidy row (brand, then controls grouped on the right, then menu) */
@media (max-width: 640px) {
  html body .navbar .nav-inner {
    display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
    gap: 8px !important; padding: 8px 0 !important; min-height: 60px;
  }
  html body .navbar .brand { gap: 8px; min-width: 0; flex: 1 1 auto; }
  html body .navbar .brand-mark { width: 38px; height: 38px; font-size: 0.85rem; flex: 0 0 auto; }
  html body .navbar .brand-name { font-size: 0.95rem; white-space: nowrap; }
  html body .navbar .brand-tagline { display: none !important; }
  html body .navbar .nav-actions {
    display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 6px;
    margin-left: auto !important; flex: 0 0 auto;
  }
  html body .navbar .nav-actions > span { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }
  html body .navbar .nav-actions .btn { min-height: 36px; padding: 0 10px; font-size: 0.8rem; }
  html body .navbar #psirLang { max-width: 104px; min-height: 36px; font-size: 0.78rem; margin-left: 0; }
  html body .navbar #psirBell { width: 38px; height: 38px; min-height: 38px; padding: 0; flex: 0 0 auto; }
  html body .navbar .mobile-menu { order: 99; width: 40px; height: 40px; min-height: 40px; flex: 0 0 auto; margin-left: 0 !important; }
}

/* Home header on phones: fit the screen width (less text, narrower controls) */
@media (max-width: 640px) {
  html body .navbar .nav-inner { gap: 6px !important; padding: 8px 0 !important; }
  html body .navbar .brand { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  html body .navbar .brand-name { font-size: 0.85rem; letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; }
  html body .navbar .nav-actions > span { display: none !important; }
  html body .navbar .nav-actions .btn { padding: 0 8px; font-size: 0.75rem; min-height: 34px; }
  html body .navbar #psirLang { max-width: 88px; min-height: 34px; font-size: 0.74rem; padding: 2px 4px; }
  html body .navbar #psirBell { width: 34px; height: 34px; min-height: 34px; }
  html body .navbar .mobile-menu { width: 38px; height: 38px; min-height: 38px; font-size: 1.1rem; }
}
@media (max-width: 400px) {
  html body .navbar .brand-name { display: none !important; }
}

/* Home menu when open: a full-width panel under the header, with whole page names on one line */
html body .navbar { position: relative; }
html body .navbar .nav-links.open {
  display: flex !important; position: absolute; top: 100%; left: 0; right: 0; width: auto;
  flex-direction: column; align-items: stretch; gap: 0; order: 0;
  background: #FFFFFF; padding: 4px 16px 12px; border-top: 1px solid #DCE3EE;
  box-shadow: 0 14px 26px rgba(16, 43, 70, 0.14); z-index: 200;
}
html body .navbar .nav-links.open a {
  white-space: nowrap; font-size: 1rem; font-weight: 600; padding: 13px 4px;
  border-bottom: 1px solid #EEF2F7; color: #263238; text-decoration: none; display: flex; align-items: center; min-height: 46px;
}

/* Bright background (light mode only): white to light blue, with a faint warm tint at the bottom */
html:not([data-theme="dark"]) body {
  background: linear-gradient(170deg, #FFFFFF 0%, #EEF5FF 38%, #E3EEFD 70%, #FFF8E8 100%) fixed !important;
  min-height: 100vh;
}
html:not([data-theme="dark"]) body section:not(.hero):not(footer),
html:not([data-theme="dark"]) body main,
html:not([data-theme="dark"]) body .section,
html:not([data-theme="dark"]) body .section-white,
html:not([data-theme="dark"]) body .section-cream {
  background: transparent !important;
}

/* Dark mode header: menu text, brand and the open menu panel stay readable */
html[data-theme="dark"] header.top { background: #0F1A2A !important; border-bottom-color: #2A3B52 !important; }
html[data-theme="dark"] header .brand { color: #E8EDF5 !important; }
html[data-theme="dark"] header nav a { color: #E8EDF5 !important; }
html[data-theme="dark"] header nav a:hover { color: #E6B75A !important; }
html[data-theme="dark"] header nav a[aria-current="page"] { color: #E6B75A !important; border-bottom-color: #E6B75A !important; }
html[data-theme="dark"] header .psir-menu-btn { background: #16243A !important; color: #E8EDF5 !important; border-color: #3A4D66 !important; }
@media (max-width: 1024px) {
  html[data-theme="dark"] header nav.psir-nav.open { background: #0F1A2A !important; border-top-color: #2A3B52 !important; }
}

/* Dark mode readability: home page menu panel, headings and links */
html[data-theme="dark"] .navbar .nav-links.open { background: #0F1A2A !important; border-top-color: #2A3B52 !important; }
html[data-theme="dark"] .navbar .nav-links.open a { color: #E8EDF5 !important; border-bottom-color: #2A3B52 !important; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: #E8EDF5 !important; }
html[data-theme="dark"] a { color: #9CC6F0; }
html[data-theme="dark"] a:hover { color: #E6B75A; }