/**
 * auth-common.css — Your Ohana shared auth layer styles
 * Extracted from auth-common.js CSS injection blocks.
 */

/* ── Staff mode overrides ── */
body.staff-mode .brand-stripe-bar { background: linear-gradient(90deg, #ED1B67, #F472B6, #FECDD3, #F472B6, #ED1B67) !important; }
body.staff-mode .nav-wrap { border-bottom: 2px solid #ED1B67; }
body.staff-mode .nav-logo img { filter: hue-rotate(320deg) saturate(1.5); }
body.staff-mode .nav-links a:hover { color: #ED1B67; background: #fef2f2; }
body.staff-mode .nav-links a.active { color: #ED1B67; background: rgba(237,27,103,0.08); }
.staff-banner {
  background: #ED1B67;
  color: #fff;
  text-align: center;
  padding: 4px 0;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: Poppins, Arial, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body.staff-mode footer { background: #1a1a2e !important; }
body.staff-mode footer::before { background: linear-gradient(90deg, #ED1B67, #F472B6, #ED1B67) !important; }

/* ── Config-driven nav styles ── */
.nav-wrap {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
/* .main-nav is the inner container on 7 pages (training, staffing, agency,
   keep-learning, annual-reports, monthly-report, contract-evaluation) that had
   NO layout rule — the logo + nav-links + nav-actions stacked vertically and
   the logo sat flush-left. Share the .nav-inner centered flex row so those
   headers match every other page. */
.nav-inner, .main-nav {
  max-width: 1200px; margin: 0 auto;
  padding: 0 1.25rem;
  display: flex; align-items: center;
  justify-content: space-between;
  height: 60px;
}
.nav-logo img { height: 42px; }

.nav-links {
  display: flex !important; align-items: center;
  gap: 0.25rem; list-style: none;
  margin: 0; padding: 0;
}
.hamburger { display: none !important; }
.nav-links a {
  text-decoration: none;
  color: #000;
  font-size: 0.84rem;
  font-weight: 500;
  font-family: var(--font, "Poppins", Arial, sans-serif);
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
}
.nav-links a:hover {
  background: #f1f5f9;
  color: #1e293b;
}
.nav-links a.active {
  background: rgba(0,186,198,0.1);
  color: #006066;
  font-weight: 600;
}

/* Separator between nav groups */
.nav-sep {
  width: 1px; height: 24px;
  background: #e2e8f0;
  margin: 0 0.35rem;
  flex-shrink: 0;
}

/* User section */
.nav-user-section {
  display: flex; align-items: center;
  gap: 0.5rem;
  margin-left: 0.25rem;
}
.nav-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #00BAC6;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-username {
  font-size: 0.82rem;
  font-weight: 500;
  color: #334155;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.nav-username:hover { color: #006066; }
.nav-signout {
  font-size: 0.78rem;
  color: #000;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font, "Poppins", Arial, sans-serif);
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.nav-signout:hover {
  color: #ef4444;
  background: #fef2f2;
}

.nav-admin-btn {
  font-size: 0.78rem;
  font-weight: 600;
  color: #00BAC6;
  text-decoration: none;
  padding: 0.3rem 0.65rem;
  border: 1.5px solid #00BAC6;
  border-radius: 6px;
  transition: all 0.15s;
}
.nav-admin-btn:hover {
  background: #00BAC6;
  color: #fff;
}

.nav-login-link {
  font-size: 0.84rem;
  font-weight: 600;
  color: #00BAC6;
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.nav-login-link:hover {
  background: rgba(0,186,198,0.08);
  color: #006066;
}

/* Hamburger */
.hamburger {
  display: none; background: none; border: none;
  cursor: pointer; padding: 0.5rem;
  border-radius: 8px; transition: background 0.15s;
}
.hamburger:hover { background: #f1f5f9; }
.hamburger span {
  display: block; width: 20px; height: 2px;
  background: #334155; margin: 4px 0;
  border-radius: 2px; transition: 0.3s;
}

/* ── Language switcher (native-labeled control over hidden Google Translate) ── */
/* Keep Google's gadget present (it reads the googtrans cookie on load) but out
   of sight, and suppress all of Google's injected chrome. */
#google_translate_element {
  position: absolute !important; left: -9999px !important; top: -9999px !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}
.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate,
.goog-tooltip, .goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
body { top: 0 !important; }

.nav-lang-wrap { display: flex; align-items: center; }
.nav-lang-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font, inherit); font-size: 0.78rem; font-weight: 600;
  color: #334155; background: #f8fafe; line-height: 1.2;
  padding: 6px 15px; border: 1.5px solid #e2e8f0; border-radius: 50px;
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.nav-lang-trigger:hover {
  border-color: #00BAC6; background: #fff; box-shadow: 0 2px 8px rgba(0,186,198,0.15);
}
.nav-lang-trigger[aria-expanded="true"] {
  border-color: #00BAC6; box-shadow: 0 0 0 3px rgba(0,186,198,0.12);
}
.nav-lang-globe { font-size: 0.95rem; line-height: 1; }
.nav-lang-current { white-space: nowrap; }
.nav-lang-menu { max-height: 360px; overflow-y: auto; min-width: 196px; }
.nav-lang-item.is-current {
  font-weight: 700; color: #00837e;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-lang-item.is-current::after {
  content: "\2713"; margin-left: 12px; color: #00BAC6; font-weight: 700;
}
@media (max-width: 900px) {
  .nav-lang-wrap { width: 100%; }
  .nav-lang-trigger { width: 100%; justify-content: center; }
}

/* Mobile */
@media (max-width: 900px) {
  .hamburger { display: flex !important; flex-direction: column; align-items: center; justify-content: center; }
  .nav-links {
    display: none !important; position: absolute;
    top: 60px; left: 0; right: 0;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    flex-direction: column; padding: 0.75rem 1rem 1rem;
    gap: 0.15rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    border-top: 1px solid #f1f5f9;
  }
  .nav-links.open { display: flex !important; }
  .nav-links a {
    font-size: 0.92rem; padding: 0.6rem 0.75rem;
    border-radius: 10px; width: 100%;
  }
  .nav-links a:hover { background: #f8fafc; }
  .nav-links a.active { background: rgba(0,186,198,0.08); }
  /* User-section <a> children have their own row layout (avatar, engage-nav).
     Without this reset, the rule above stretches .nav-avatar from 28px to
     100% of the row, displacing the Sign Out button off the right edge of
     the viewport so it's unreachable. */
  .nav-user-section .nav-avatar { width: 28px; padding: 0; }
  .nav-user-section .engage-nav { width: auto; padding: 0.3rem 0.5rem; }
  .nav-sep { width: 100%; height: 1px; margin: 0.35rem 0; }
  .nav-user-section { width: 100%; padding: 0.5rem 0.75rem 0; }
}

/* ── Role-based nav bars ── */
.nav-bar-group {
  overflow: hidden;
  max-height: 200px;
  transition: max-height 0.3s ease;
  position: sticky;
  top: 64px;
  z-index: 99;
  background: white;
}
.nav-bar-group.collapsed {
  max-height: 0;
}
.role-bar {
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  height: 36px;
  font-size: 0.78rem;
  border-bottom: 1px solid #f0f0f0;
  max-width: 1200px;
  margin: 0 auto;
}
.role-bar-label {
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.role-bar-links {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
}
.role-bar-links a {
  color: inherit;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s;
}
.role-bar-links a:hover { color: #00BAC6; }

/* Resource Library Management — workgroup-gated button in the nav-bar-group */
.rl-mgmt-btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0.5rem 1.5rem;
  padding: 0.45rem 1rem;
  background: #00BAC6;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.8rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  transition: background 0.15s, transform 0.15s;
  width: max-content;
}
.rl-mgmt-btn:hover { background: #009BA6; transform: translateY(-1px); color: #fff; }
@media (max-width: 768px) {
  .rl-mgmt-btn { margin: 0.4rem 1rem; font-size: 0.75rem; padding: 0.35rem 0.8rem; }
}
.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: #fff;
  padding: 4px 8px;
  transition: transform 0.2s;
  margin-left: 8px;
}
.nav-toggle:hover { opacity: 1; }
@media (max-width: 768px) {
  .staff-banner-toggle { display: none; }
  .role-bar { font-size: 0.72rem; padding: 0 1rem; height: 32px; }
  .role-bar-links { gap: 0.6rem; }
}

/* ── Mobile role sections inside hamburger ── */
.mobile-role-section { display: none; }
@media (max-width: 900px) {
  .nav-bar-group { display: none !important; }
  .nav-links.open .mobile-role-section { display: block; }
}
@media (min-width: 901px) {
  .mobile-role-section { display: none !important; }
}
.mobile-role-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #000;
  padding: 0.75rem 0.75rem 0.25rem;
  border-top: 1px solid #f0f0f0;
  margin-top: 0.25rem;
  list-style: none;
}
.mobile-role-label span {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
}
.mobile-role-link {
  list-style: none;
}
.mobile-role-link a {
  display: block;
  padding: 0.55rem 0.75rem 0.55rem 1.5rem;
  font-size: 0.9rem;
  color: #000;
  text-decoration: none;
  border-radius: 10px;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background 0.15s, color 0.15s;
}
.mobile-role-link a:hover { background: #f8fafc; color: #1e293b; }
.mobile-role-link a.active { background: rgba(0,186,198,0.08); color: #006066; font-weight: 600; }
.mobile-role-agency {
  list-style: none;
  padding: 0.4rem 0.75rem 0.4rem 1.5rem;
}
.mobile-role-agency select {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #bbf7d0;
  font-size: 0.85rem;
  font-family: var(--font, "Poppins", Arial, sans-serif);
  background: #f0fdf4;
  cursor: pointer;
  min-height: 44px;
}

/* ── Accessibility styles ── */

/* Skip link */
.skip-to-content {
  position: fixed; top: -100px; left: 50%; transform: translateX(-50%);
  background: #1e293b; color: #fff; padding: 12px 24px;
  border-radius: 0 0 8px 8px; font-size: 0.9rem; font-weight: 600;
  font-family: Poppins, Arial, sans-serif; text-decoration: none;
  z-index: 10000; transition: top 0.2s;
}
.skip-to-content:focus {
  top: 0; outline: 3px solid #00BAC6; outline-offset: 2px;
}

/* Focus visible for all interactive elements */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #00BAC6; outline-offset: 2px;
}

/* ===== High Contrast Mode ===== */
body.high-contrast {
  --hc-bg: #fff;
  --hc-text: #000;
  --hc-link: #0000EE;
  --hc-border: #000;
}

body.high-contrast, body.high-contrast .section, body.high-contrast .story-section {
  background: var(--hc-bg) !important; color: var(--hc-text) !important;
}

body.high-contrast .hero, body.high-contrast .stats-section, body.high-contrast .cta-section,
body.high-contrast .timeline-section {
  background: #000 !important; color: #fff !important;
}

body.high-contrast .hero h1, body.high-contrast .hero p,
body.high-contrast .cta-section h2, body.high-contrast .stats-section h2,
body.high-contrast .stat-label, body.high-contrast .stat-number {
  color: #fff !important;
}

body.high-contrast .section-title, body.high-contrast h2, body.high-contrast h3 {
  color: #000 !important;
}

body.high-contrast .hero .section-title, body.high-contrast .hero h2 {
  color: #fff !important;
}

body.high-contrast a { color: var(--hc-link) !important; text-decoration: underline !important; }
body.high-contrast .hero a, body.high-contrast .cta-section a { color: #fff !important; }
/* The footer stays black in high-contrast mode (unlike the white page). Its
   children carry their own brand colours — dim-grey tagline (#CBD5E1) + legal
   (rgba white .62), and links inherit the white-bg --hc-link blue (#0000EE,
   ~2.2:1 on black). All of that is too faint for a mode whose whole purpose is
   max legibility. Force EVERY footer text element pure white → 21:1. */
body.high-contrast footer,
body.high-contrast footer * { color: #fff !important; }

body.high-contrast .benefit-card, body.high-contrast .feature-card,
body.high-contrast .impact-card, body.high-contrast .partner-card,
body.high-contrast .vm-card, body.high-contrast .program-card,
body.high-contrast .hv-card, body.high-contrast .timeline-content {
  background: #fff !important; border: 2px solid #000 !important;
  box-shadow: none !important;
}

body.high-contrast .benefit-card h3, body.high-contrast .feature-card h3,
body.high-contrast .impact-card .impact-stat, body.high-contrast .hv-card h3,
body.high-contrast .program-card h3, body.high-contrast .timeline-content h3 {
  color: #000 !important;
}

body.high-contrast .benefit-card p, body.high-contrast .feature-card p,
body.high-contrast .impact-card .impact-desc, body.high-contrast .hv-card p,
body.high-contrast .spotlight-detail, body.high-contrast .timeline-content p {
  color: #000 !important;
}

body.high-contrast .btn, body.high-contrast .btn-pink, body.high-contrast .btn-white,
body.high-contrast .btn-green, body.high-contrast .btn-outline-teal,
body.high-contrast .share-bar-btn {
  background: #000 !important; color: #fff !important;
  border: 2px solid #000 !important; box-shadow: none !important;
}

body.high-contrast .share-bar {
  background: #f0f0f0 !important; border-color: #000 !important;
}

body.high-contrast .nav-wrap {
  background: #fff !important; border-bottom: 2px solid #000 !important;
  box-shadow: none !important; backdrop-filter: none !important;
}

body.high-contrast .nav-links a {
  color: #000 !important; text-decoration: underline !important;
}

body.high-contrast footer {
  background: #000 !important; color: #fff !important;
}

body.high-contrast .rainbow-bar, body.high-contrast footer::before {
  background: #000 !important; height: 4px !important;
}

body.high-contrast .spotlight-backdrop.active {
  background: rgba(0,0,0,0.8) !important;
}

body.high-contrast img { filter: contrast(1.1); }

/* HC toggle button in footer */
.hc-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1.5px solid rgba(255,255,255,0.4);
  color: #fff; padding: 5px 14px;
  border-radius: 50px; font-size: 0.78rem; font-weight: 600;
  font-family: Poppins, Arial, sans-serif; cursor: pointer;
  transition: border-color 0.2s, color 0.2s; margin-top: 12px;
}
.hc-toggle:hover { border-color: #fff; color: #fff; }
body.high-contrast .hc-toggle {
  border-color: #fff; color: #fff; background: #333;
}

/* Info-hint: small ⓘ button + click-to-expand explainer body.
   Used for section-level rule explainers (e.g., partial-model behaviour
   on the family-facing Provider Card). */
.info-hint {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.info-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: transparent;
  color: #000;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.info-hint-icon:hover,
.info-hint-icon:focus {
  border-color: #00BAC6;
  color: #00BAC6;
  background: rgba(0,186,198,0.08);
  outline: none;
}
.info-hint-body {
  background: #f0fdfa;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.85rem;
  color: #000;
  line-height: 1.5;
  max-width: 520px;
  margin-top: 4px;
}
.info-hint-body[hidden] { display: none; }

/* === Avatar dropdown (top-right account menu) =============================
 * Trigger: .nav-avatar.ohana-dropdown-v1-trigger
 * Menu:    .nav-user-menu.ohana-dropdown-v1-menu
 */
.nav-user-dropdown { position: relative; display: inline-block; }
.nav-avatar.ohana-dropdown-v1-trigger {
  border: 0;
  cursor: pointer;
  padding: 0;
  /* nav-avatar already styles the circle (size, bg, color) — only reset
     button defaults here so it stays a circle, not a rectangle */
}
.nav-user-menu {
  min-width: 180px;
  background: #fff;
  border: 1px solid #e6e9ee;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  padding: 0.35rem 0;
  margin-top: 0.4rem;
}
.nav-user-menu .ohana-dropdown-v1-item {
  display: block;
  width: 100%;
  padding: 0.55rem 1rem;
  text-align: left;
  background: transparent;
  border: 0;
  color: #000;
  font-family: inherit;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
}
.nav-user-menu .ohana-dropdown-v1-item:hover,
.nav-user-menu .ohana-dropdown-v1-item:focus {
  background: #f5f7fa;
  color: #009BA6;
}

/* === First-login Welcome banner ============================================
 * Shown once per user (welcome_seen flag) on any non-welcome, non-login
 * signed-in page. Yellow-stripe styling — gentle, dismissible.
 */
.welcome-firstlogin-banner {
  background: linear-gradient(135deg, #fef9e7 0%, #fff8e3 100%);
  border-left: 4px solid #EBCF00;
  border-radius: 10px;
  padding: 0.9rem 1.25rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin: 1rem 1.25rem 1.25rem;
  box-shadow: 0 2px 8px rgba(235, 207, 0, 0.18);
  color: #000;
}
.welcome-firstlogin-banner .wfb-text { font-size: 0.95rem; flex: 1; color: #000; }
.welcome-firstlogin-banner .wfb-text strong { color: #8a7400; }
.welcome-firstlogin-banner .wfb-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.welcome-firstlogin-banner .wfb-actions button {
  border: 0; padding: 0.45rem 0.95rem; border-radius: 7px;
  font-family: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer;
}
.welcome-firstlogin-banner .wfb-primary { background: #00BAC6; color: #fff; }
.welcome-firstlogin-banner .wfb-primary:hover { background: #009BA6; }
.welcome-firstlogin-banner .wfb-dismiss { background: transparent; color: #000; }
.welcome-firstlogin-banner .wfb-dismiss:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .welcome-firstlogin-banner { flex-direction: column; align-items: flex-start; }
  .welcome-firstlogin-banner .wfb-actions { width: 100%; }
}