/* Mëso Gjuhët: the legal and help pages in the apps' brand. Loaded after each
   page's own <style>, so these rules win at the same specificity. */

:root {
  --primary: #F5515F;       /* AppColors.primary */
  --primary-dark: #CC242A;  /* AppColors.lipstick: the red for text on white */
  --text-dark: #393939;     /* AppColors.blackTwo */
  --bg-light: #FFFFFF;
  --tint: #FFF8F4;          /* SemanticColors.pageTint */
  --dark: #403633;          /* AppColors.greyishBrown */
}

body { font-family: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text-dark); }

.navbar { background: rgba(255, 248, 244, 0.92); box-shadow: none; border-bottom: 1px solid #E6E1DE; }
.navbar.scrolled { background: rgba(255, 248, 244, 0.97); }
.nav-brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text-dark); }
.brand-fan { display: inline-flex; min-width: 34px; }
.brand-fan img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 0 0 2px var(--tint), 0 4px 10px -6px rgba(64, 54, 51, 0.6);
}
.brand-fan img + img { margin-left: -12px; }
.brand-name { font-weight: 900; font-size: 1.2rem; letter-spacing: -0.02em; white-space: nowrap; }
.nav-links a:hover { color: var(--primary-dark); }
.nav-cta, .nav-cta:hover { background: var(--primary-dark); }

.header { background: var(--tint); color: var(--text-dark); border-bottom: 1px solid #F1E9E5; }
.header::before { display: none; }
.header h1 { color: var(--text-dark); font-weight: 900; letter-spacing: -0.02em; }
.last-updated { color: #616161; opacity: 1; }
.header .lang-switch a { color: var(--primary-dark); border-color: var(--primary-dark); }
.header .lang-switch a:hover { background: var(--primary-dark); color: #fff; }
.header :focus-visible { outline-color: var(--primary-dark); }

h2 { color: var(--primary-dark); font-weight: 900; }
h3 { font-weight: 800; }
a { color: var(--primary-dark); }
a:hover { color: #B31E24; }
.highlight-box { background: var(--tint); border-left-color: var(--primary); }
.highlight-box strong { color: var(--primary-dark); }
th { background: var(--primary-dark); }

footer { background: var(--dark); color: #E3DAD6; }
footer a { color: #fff; }
footer a:hover { color: #FFE08A; }