/* ==========================================================================
   Bryder Group, /staff/help/ in the Ribbon look.
   Loaded after helpdesk.css, which still lays the page out: the suite bar,
   the left rail, the cards, the accordion and the ticket form keep their
   shape, and this file moves them onto the Ribbon paper, ink and type by
   remapping helpdesk.css's own variables. It replaces theme-2026.css on this
   page only. site.js reads the ticket form's data attributes, which are
   untouched.
   ========================================================================== */

/* Archivo, self-hosted, the same face and file as ribbon.css. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ms-blue:        #0D6355;
  --ms-blue-hover:  #0B3F34;
  --ms-blue-press:  #0B3F34;
  --ms-blue-tint:   #EAF5F2;

  --ms-bg:          #F2F4F3;
  --ms-surface:     #FFFFFF;
  --ms-line:        rgba(11, 63, 52, 0.1);
  --ms-line-strong: rgba(11, 63, 52, 0.28);

  --ms-text:        #0B3F34;
  --ms-text-2:      #3E5C55;
  --ms-suite:       #0B3F34;

  --ms-red:         #B3261E;

  --ms-radius: 6px;
  --ms-shadow-4: 0 0 0 1px rgba(11, 63, 52, 0.06), 0 22px 44px -32px rgba(11, 63, 52, 0.32);
  --ms-shadow-8: 0 0 0 1px rgba(11, 63, 52, 0.1), 0 30px 56px -30px rgba(11, 63, 52, 0.45);

  --ms-font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

body { font-size: 15px; line-height: 1.6; font-variation-settings: "wdth" 100; }
b, strong { font-variation-settings: "wght" 640; font-weight: 640; }

:focus-visible { outline: 2px solid var(--ms-text); outline-offset: 3px; box-shadow: 0 0 0 6px rgba(32, 182, 157, 0.35); border-radius: 4px; }
.ms-suite :focus-visible { outline-color: #fff; }

/* the suite bar, in the deep green */
.ms-suite { height: 56px; }
.ms-suite__waffle, .ms-suite__brand { height: 56px; }
.ms-suite__brand { font-size: 15px; font-variation-settings: "wght" 640, "wdth" 104; }
.ms-suite__app { font-variation-settings: "wght" 420, "wdth" 100; }
.ms-suite__link { border-radius: 999px; padding: 0.5rem 0.9rem; }

/* headings in Archivo */
.ms-head { padding: 44px 0 28px; border-bottom-color: var(--ms-line-strong); }
.ms-head h1 { font-size: clamp(34px, 4.2vw, 60px); line-height: 0.95; letter-spacing: -0.035em; font-weight: 800; font-variation-settings: "wght" 800, "wdth" 100; }
.ms-head p { font-size: 17px; margin-top: 14px; }
.ms-crumb { font-size: 13px; }
.ms-section > h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; font-variation-settings: "wght" 720, "wdth" 100; margin-bottom: 6px; }
.ms-section > .ms-sub { font-size: 15px; }
.ms-rail__title { font-size: 12px; letter-spacing: 0.12em; font-variation-settings: "wght" 600, "wdth" 112; }
.ms-rail__list a { border-radius: 0 4px 4px 0; }
.ms-rail__list a[aria-current="true"] { font-variation-settings: "wght" 640; }

/* cards, accordion, note and form sit on white sheets */
.ms-card, .ms-acc, .ms-form, .ms-note { border: 0; }
.ms-note { box-shadow: var(--ms-shadow-4), inset 4px 0 0 var(--ms-blue); border-left: 0; border-radius: var(--ms-radius); padding: 14px 16px 14px 20px; font-size: 14px; }
.ms-card { padding: 16px; gap: 14px; }
.ms-card__icon { width: 36px; height: 36px; border-radius: 50%; }
.ms-card__title { font-size: 15px; font-variation-settings: "wght" 640, "wdth" 100; }
.ms-card__desc { font-size: 14px; }
.ms-acc__item summary { padding: 16px 18px; font-size: 15px; font-variation-settings: "wght" 640, "wdth" 100; }
.ms-acc__item summary:hover { background: #F6F8F7; }
.ms-acc__body { padding: 0 18px 18px 38px; font-size: 15px; }
.ms-warn { border-radius: 4px; background: #FCECEA; color: #8A1C14; border-left-color: var(--ms-red); }

/* the ticket form: the same fields and button as the home page contact form */
.ms-form { padding: clamp(20px, 3vw, 36px); gap: 20px; }
.ms-field label { font-size: 14px; font-variation-settings: "wght" 600, "wdth" 100; }
.ms-field input, .ms-field select, .ms-field textarea {
  min-height: 50px; padding: 12px 16px; border-radius: 4px; background: #FAFBFB; font-size: 16px;
  font-variation-settings: "wght" 420, "wdth" 100;
}
.ms-field textarea { min-height: 150px; }
.ms-field input:focus, .ms-field select:focus, .ms-field textarea:focus { border-color: var(--ms-text); background: #fff; box-shadow: none; }
.ms-field input::placeholder, .ms-field textarea::placeholder { color: #6B817C; }
.ms-btn {
  min-height: 48px; padding: 0 26px; border-radius: 999px;
  background: var(--ms-text); border-color: var(--ms-text);
  font-size: 15px; font-weight: 600; font-variation-settings: "wght" 600, "wdth" 104;
}
.ms-btn:hover { background: #0D6355; border-color: #0D6355; }
.ms-foot p { font-size: 13px; }
.ms-status { display: flex; gap: 12px; border: 0; border-radius: 4px; background: #E3F4EF; box-shadow: inset 4px 0 0 #20B69D; padding: 14px 16px; font-size: 15px; color: var(--ms-text); }
.ms-status[hidden] { display: none; }
.ms-pagefoot { font-size: 13px; border-top-color: var(--ms-line-strong); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ms-card, .ms-acc__chev { transition: none; }
}