/* Annex 3 – Approved Design Guidelines */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700&display=swap");

:root {
  --brand-white: #FFFFFF;
  --brand-grey: #CBCBCB;
  --brand-black: #000000;
  --brand-orange: #C15A1D;
  --brand-orange-dark: #A04A17;   /* hover */
}

body,
body *:not(i):not(.navbar-toggler-icon) {
  font-family: "Montserrat", sans-serif !important;
}

/* Character styles */
.txt-body        { font-size: 18px; font-weight: 500; color: #000; }   /* Medium 18 black */
.txt-label       { font-size: 18px; line-height: 22px; font-weight: 700; color: #000; }   /* Bold 18/22 black (XD field title) */
.txt-heading     { font-size: 36px; font-weight: 700; color: #000; }   /* Bold 36 black   */
.txt-title-light { font-size: 28px; font-weight: 700; color: #fff; }   /* Bold 28 white   */
.txt-strong      { font-size: 18px; font-weight: 700; color: #000; }   /* Bold 18 black   */
.txt-strong-light{ font-size: 18px; font-weight: 700; color: #fff; }   /* Bold 18 white   */

/* Type scale — one size per role on every page, so a page's title never
   looks like one of its own section headings or form labels.
     .page-title     page title, one per page          Bold 36/44, left (XD title)
     .card-title-sm  title on the small login/verify cards  Bold 28 (Annex: title)
     .section-title  a block, list or pop-up inside a page   Bold 24
     .txt-label      form field label                  Bold 18/22 (XD field title)
     .txt-body       body text                         Medium 18 (Annex: body)
   Colour is inherited, so the same classes work on the dark admin pages. */
.page-title     { font-size: 36px; line-height: 44px; letter-spacing: 0; font-weight: 700 !important; margin-bottom: 0.5rem; }
.card-title-sm  { font-size: 28px; font-weight: 700 !important; line-height: 1.25; }
.section-title  { font-size: 24px; font-weight: 700 !important; line-height: 1.3; }

@media (max-width: 576px) {
  .page-title    { font-size: 28px; line-height: 34px; }
  .card-title-sm { font-size: 24px; }
  .section-title { font-size: 20px; }
}

/* Primary button */
.btn-brand {
  background-color: var(--brand-orange) !important;
  border: none;
  color: #fff !important;
  font-size: 18px;
  font-weight: 700;
}
.btn-brand:hover,
.btn-brand:focus { background-color: var(--brand-orange-dark) !important; }

/* Site header: black bar, logo left, orange LOGOUT right */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 64px;
  background: var(--brand-black);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1030;
}
.site-header .header-logo {
  height: 34px;
  margin-left: 32px;
}
.site-header .header-logout {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 44px;
  background: var(--brand-orange);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.5px;
}
.site-header .header-logout:hover { background: var(--brand-orange-dark); color: #fff; }

@media (max-width: 576px) {
  .site-header .header-logo { margin-left: 16px; height: 28px; }
  .site-header .header-logout { padding: 0 20px; font-size: 16px; }
}