/* Overlay chrome. Colour tokens and fonts come from branding/ via
   scripts/apply-branding.sh (SIL OFL 1.1: ../fonts/nasarek/OFL.txt). */

/* branding-fonts:start */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nasarek/source-sans-3-latin-400.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/nasarek/source-sans-3-latin-600.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/nasarek/source-sans-3-latin-700.woff2") format("woff2");
}
/* branding-fonts:end */

:root {
  /* branding-tokens:start */
  --nasarek-bg: #f8fafc;
  --nasarek-ink: #0f172b;
  --nasarek-muted: #45556c;
  --nasarek-line: #dce2e9;
  --nasarek-card: #ffffff;
  --nasarek-header: #1d293d;
  --nasarek-brand: #00bc7d;
  --nasarek-accent: #009966;
  --nasarek-button: #007a52;
  --nasarek-button-hover: #0a5c43;
  --nasarek-icon-bg: #e7f6ee;
  --nasarek-on-header: #cbd5e1;
  --nasarek-text-light: #64748b;
  --nasarek-nav-hover: #334155;
  --nasarek-font: "Source Sans 3", system-ui, sans-serif;
  --nasarek-brand-rgb: 0 188 125;
  /* branding-tokens:end */
}

html,
body,
.navbar,
.modal,
.dropdown-menu,
.form-control,
.btn {
  font-family: var(--nasarek-font);
}

/* Landing cover (index) — dark Nasarek chrome instead of Bootstrap gray */
body:has(.site-wrapper) {
  background-color: var(--nasarek-header);
  color: var(--nasarek-on-header);
  text-shadow: none;
}

body:has(.site-wrapper) .site-wrapper {
  box-shadow: none;
  background: var(--nasarek-header);
}

body:has(.site-wrapper) a,
body:has(.site-wrapper) a:focus,
body:has(.site-wrapper) a:hover {
  color: var(--nasarek-brand);
}

body:has(.site-wrapper) .masthead {
  background: var(--nasarek-header);
  border-bottom: 1px solid rgb(var(--nasarek-brand-rgb) / 0.18);
}

body:has(.site-wrapper) .masthead-nav > li > a {
  color: var(--nasarek-on-header);
  font-weight: 600;
}

body:has(.site-wrapper) .masthead-nav > li > a:hover,
body:has(.site-wrapper) .masthead-nav > li > a:focus {
  color: var(--nasarek-brand);
  border-bottom-color: var(--nasarek-brand);
}

body:has(.site-wrapper) .masthead-nav > .active > a,
body:has(.site-wrapper) .masthead-nav > .active > a:hover,
body:has(.site-wrapper) .masthead-nav > .active > a:focus {
  color: var(--nasarek-brand);
  border-bottom-color: var(--nasarek-brand);
}

body:has(.site-wrapper) .cover-heading img {
  width: min(22rem, 92vw);
  height: auto;
}

body:has(.site-wrapper) .inner.cover > .lead {
  color: var(--nasarek-on-header);
  font-weight: 600;
  letter-spacing: -0.02em;
}

img.screenshot,
img.screenshot.ui-signin {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body:has(.site-wrapper) .social-foot {
  display: none;
}

body:has(.site-wrapper) .mastfoot {
  color: var(--nasarek-muted);
}

body:has(.site-wrapper) .mastfoot a {
  color: var(--nasarek-brand);
}

body:has(.site-wrapper) .btn-link,
body:has(.site-wrapper) .btn-link:hover,
body:has(.site-wrapper) .btn-link:focus,
body:has(.site-wrapper) .btn-link:active {
  color: var(--nasarek-brand);
}

body:has(.site-wrapper) .list li .item {
  border: 1px solid var(--nasarek-line);
  border-radius: 0.55rem;
  box-shadow: 0 1px 2px rgb(15 23 43 / 0.04);
}

/* Primary actions */
.btn-primary,
.btn-primary:visited {
  background-color: var(--nasarek-button);
  border-color: var(--nasarek-button);
  color: #fff;
  font-weight: 600;
  border-radius: 0.55rem;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: var(--nasarek-button-hover);
  border-color: var(--nasarek-button-hover);
  color: #fff;
}

.btn-success,
.btn-success:visited,
.btn-social.btn-soundcloud {
  background-color: var(--nasarek-button);
  border-color: var(--nasarek-button);
  color: #fff;
  font-weight: 600;
  border-radius: 0.55rem;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.btn-social.btn-soundcloud:hover,
.btn-social.btn-soundcloud:focus {
  background-color: var(--nasarek-button-hover);
  border-color: var(--nasarek-button-hover);
  color: #fff;
}

.btn-lg {
  border-radius: 0.55rem;
}

/* Editor / error navbar */
.navbar-default {
  background-color: var(--nasarek-header);
  border-color: transparent;
  box-shadow: none;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-nav > li > a,
.navbar-default .btn-link,
.navbar-default .navbar-text {
  color: var(--nasarek-on-header);
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
  color: var(--nasarek-brand);
  background-color: var(--nasarek-icon-bg);
}

.navbar-brand.header-brand {
  height: 50px;
  padding: 8px 12px;
}

.navbar-brand.header-brand img {
  height: 34px;
  width: auto;
  max-width: none;
}

.navbar-default .btn-default {
  background-color: var(--nasarek-nav-hover);
  border-color: var(--nasarek-nav-hover);
  color: var(--nasarek-on-header);
}

.navbar-default .btn-default:hover,
.navbar-default .btn-default:focus,
.navbar-default .btn-default.active,
.navbar-default .btn-group .btn.active {
  background-color: var(--nasarek-button);
  border-color: var(--nasarek-button);
  color: #fff;
}

.navbar-default .ui-night {
  color: var(--nasarek-on-header);
}

/* Night theme (editor toggle) */
.night {
  /* branding-dark-tokens:start */
  --nasarek-bg: #152033;
  --nasarek-ink: #f8fafc;
  --nasarek-muted: #9aa4b2;
  --nasarek-line: #334155;
  --nasarek-card: #1d293d;
  --nasarek-header: #0f172b;
  --nasarek-brand: #00bc7d;
  --nasarek-accent: #009966;
  --nasarek-button: #007a52;
  --nasarek-button-hover: #0a5c43;
  --nasarek-icon-bg: rgb(0 188 125 / 0.12);
  --nasarek-on-header: #94a3b8;
  --nasarek-text-light: #9aa4b2;
  --nasarek-nav-hover: #1d293d;
  --nasarek-font: "Source Sans 3", system-ui, sans-serif;
  --nasarek-brand-rgb: 0 188 125;
  /* branding-dark-tokens:end */
}

.night .navbar-default {
  background-color: var(--nasarek-header);
}

/* Sign-in modal */
.signin-modal .modal-header,
.delete-user-modal .modal-header,
.delete-history-modal .modal-header {
  border-bottom-color: var(--nasarek-line);
}

.modal-content {
  border-radius: 0.55rem;
  border: 1px solid var(--nasarek-line);
}

.modal-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--nasarek-ink);
}

a.ui-edit,
.ui-toc-label {
  color: var(--nasarek-button);
}

a.ui-edit:hover,
.ui-toc-label:hover {
  color: var(--nasarek-button-hover);
}