/* ==========================================================================
   Worksuite 2026 Brand — AWE Wiki Override
   Applied on top of MkDocs Material theme
   ========================================================================== */

/* --------------------------------------------------------------------------
   FONT FACES
   -------------------------------------------------------------------------- */

/* Terrane Sans — Headlines (Black/900) and Body (Regular/400) */
@font-face {
  font-family: 'Terrane Sans';
  src: url('../assets/fonts/TerraneSansWeb-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Terrane Sans';
  src: url('../assets/fonts/TerraneSansWeb-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Terrane Sans';
  src: url('../assets/fonts/TerraneSansWeb-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Terrane Sans';
  src: url('../assets/fonts/TerraneSansWeb-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Trust Serif — Body Large / pull quotes ONLY */
@font-face {
  font-family: 'Trust Serif';
  src: url('../assets/fonts/trust-3a-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   CSS CUSTOM PROPERTIES — Worksuite 2026 Color Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Primary palette */
  --ws-orange: #FF4821;
  --ws-maroon: #761900;
  --ws-black: #000000;
  --ws-white: #FFFFFF;
  --ws-gray-border: #DDE3EB;

  /* Extended palette */
  --ws-lavender: #EEEBFF;
  --ws-mint: #C8EDD5;
  --ws-purple: #5032A0;

  /* MkDocs Material overrides */
  --md-primary-fg-color: var(--ws-orange);
  --md-primary-fg-color--light: #FF6B4A;
  --md-primary-fg-color--dark: var(--ws-maroon);
  --md-primary-bg-color: var(--ws-white);
  --md-primary-bg-color--light: var(--ws-white);

  --md-accent-fg-color: var(--ws-maroon);
  --md-accent-fg-color--transparent: rgba(118, 25, 0, 0.1);
  --md-accent-bg-color: var(--ws-white);

  --md-default-fg-color: var(--ws-black);
  --md-default-fg-color--light: rgba(0, 0, 0, 0.7);
  --md-default-fg-color--lighter: rgba(0, 0, 0, 0.52);
  --md-default-fg-color--lightest: rgba(0, 0, 0, 0.32);
  --md-default-bg-color: var(--ws-white);
  --md-default-bg-color--light: #FAFAFA;
  --md-default-bg-color--lighter: #F5F5F5;
  --md-default-bg-color--lightest: #EEEEEE;

  /* Typography */
  --md-text-font: 'Terrane Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --md-code-font: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Code block colors */
  --md-code-fg-color: #1a1a1a;
  --md-code-bg-color: #F5F5F5;

  /* Footer */
  --md-footer-fg-color: var(--ws-white);
  --md-footer-fg-color--light: rgba(255, 255, 255, 0.7);
  --md-footer-fg-color--lighter: rgba(255, 255, 255, 0.5);
  --md-footer-bg-color: var(--ws-black);
  --md-footer-bg-color--dark: #1a1a1a;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */

/* Body text — Terrane Sans Regular 400, 18px/24px */
body,
.md-typeset {
  font-family: var(--md-text-font);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ws-black);
}

/* Headlines — Terrane Sans Black 900 */
.md-typeset h1 {
  font-family: 'Terrane Sans', sans-serif;
  font-weight: 900;
  color: var(--ws-black);
  letter-spacing: -0.01em;
}

.md-typeset h2 {
  font-family: 'Terrane Sans', sans-serif;
  font-weight: 900;
  color: var(--ws-black);
  letter-spacing: -0.01em;
}

.md-typeset h3 {
  font-family: 'Terrane Sans', sans-serif;
  font-weight: 900;
  color: var(--ws-black);
}

.md-typeset h4 {
  font-family: 'Terrane Sans', sans-serif;
  font-weight: 900;
  color: var(--ws-black);
}

.md-typeset h5,
.md-typeset h6 {
  font-family: 'Terrane Sans', sans-serif;
  font-weight: 700;
  color: var(--ws-black);
}

/* Pull quotes / blockquotes — Trust Serif Light 300 */
.md-typeset blockquote {
  font-family: 'Trust Serif', Georgia, 'Times New Roman', serif;
  font-weight: 300;
  font-size: 1.3rem;
  line-height: 1.5;
  border-left: 4px solid var(--ws-orange);
  color: rgba(0, 0, 0, 0.8);
  padding: 0.5rem 1rem;
  margin: 1.5rem 0;
  background: transparent;
}

/* --------------------------------------------------------------------------
   HEADER / NAV BAR
   -------------------------------------------------------------------------- */

/* Header bar */
.md-header {
  background-color: var(--ws-white);
  color: var(--ws-black);
  box-shadow: 0 1px 0 var(--ws-gray-border);
}

/* Header title text */
.md-header__title {
  color: var(--ws-black);
}

.md-header__topic {
  color: var(--ws-black);
  font-family: 'Terrane Sans', sans-serif;
  font-weight: 700;
}

/* Header icons (search, repo) */
.md-header .md-icon {
  color: var(--ws-black);
}

.md-header [data-md-component="header-topic"] {
  color: var(--ws-black);
}

/* Search bar styling */
.md-search__input {
  background-color: #F5F5F5;
  color: var(--ws-black);
}

.md-search__input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* --------------------------------------------------------------------------
   NAVIGATION TABS
   -------------------------------------------------------------------------- */

/* Top-level tabs bar */
.md-tabs {
  background-color: var(--ws-white);
  border-bottom: 1px solid var(--ws-gray-border);
}

.md-tabs__link {
  color: rgba(0, 0, 0, 0.6);
  font-family: 'Terrane Sans', sans-serif;
  font-weight: 500;
}

.md-tabs__link:hover,
.md-tabs__link:focus {
  color: var(--ws-orange);
}

.md-tabs__link--active {
  color: var(--ws-orange);
}

/* --------------------------------------------------------------------------
   SIDEBAR
   -------------------------------------------------------------------------- */

.md-sidebar__scrollwrap {
  border-right: 1px solid var(--ws-gray-border);
}

.md-nav__link {
  color: var(--ws-black);
  font-family: 'Terrane Sans', sans-serif;
  font-weight: 400;
}

.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--ws-orange);
}

.md-nav__link--active {
  color: var(--ws-orange);
  font-weight: 700;
}

.md-nav__item--active > .md-nav__link {
  color: var(--ws-orange);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   BUTTONS — Pill shaped
   -------------------------------------------------------------------------- */

.md-typeset .md-button {
  border-radius: 9999px;
  font-family: 'Terrane Sans', sans-serif;
  font-weight: 700;
  padding: 0.6em 1.8em;
  transition: all 0.2s ease;
}

.md-typeset .md-button--primary {
  background-color: var(--ws-orange);
  border-color: var(--ws-orange);
  color: var(--ws-white);
}

.md-typeset .md-button--primary:hover {
  background-color: var(--ws-maroon);
  border-color: var(--ws-maroon);
  color: var(--ws-white);
}

/* --------------------------------------------------------------------------
   ADMONITIONS
   -------------------------------------------------------------------------- */

/* Default admonition border and title color → orange */
.md-typeset .admonition,
.md-typeset details {
  border-color: var(--ws-orange);
  border-radius: 4px;
  box-shadow: none;
  border-width: 1px;
  border-left-width: 4px;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background-color: rgba(255, 72, 33, 0.08);
  border-color: var(--ws-orange);
  font-family: 'Terrane Sans', sans-serif;
  font-weight: 700;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  color: var(--ws-orange);
}

/* Note type → purple */
.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--ws-purple);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background-color: rgba(80, 50, 160, 0.08);
  border-color: var(--ws-purple);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  color: var(--ws-purple);
}

/* Tip/success type → mint */
.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.success,
.md-typeset details.success {
  border-color: #2E8B57;
}

.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary,
.md-typeset .success > .admonition-title,
.md-typeset .success > summary {
  background-color: rgba(200, 237, 213, 0.4);
  border-color: #2E8B57;
}

.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before,
.md-typeset .success > .admonition-title::before,
.md-typeset .success > summary::before {
  color: #2E8B57;
}

/* Warning type → orange */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--ws-orange);
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background-color: rgba(255, 72, 33, 0.08);
  border-color: var(--ws-orange);
}

/* Danger type → maroon */
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-color: var(--ws-maroon);
}

.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  background-color: rgba(118, 25, 0, 0.08);
  border-color: var(--ws-maroon);
}

.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before {
  color: var(--ws-maroon);
}

/* Info type → lavender/purple */
.md-typeset .admonition.info,
.md-typeset details.info {
  border-color: var(--ws-purple);
}

.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  background-color: var(--ws-lavender);
  border-color: var(--ws-purple);
}

.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
  color: var(--ws-purple);
}

/* --------------------------------------------------------------------------
   TABLES
   -------------------------------------------------------------------------- */

.md-typeset table:not([class]) {
  border: 1px solid var(--ws-gray-border);
  border-radius: 4px;
  overflow: hidden;
}

.md-typeset table:not([class]) th {
  background-color: #F5F5F5;
  font-family: 'Terrane Sans', sans-serif;
  font-weight: 700;
  color: var(--ws-black);
  border-bottom: 2px solid var(--ws-gray-border);
}

.md-typeset table:not([class]) td {
  border-bottom: 1px solid var(--ws-gray-border);
}

/* --------------------------------------------------------------------------
   CODE BLOCKS
   -------------------------------------------------------------------------- */

.md-typeset code {
  font-family: var(--md-code-font);
  border-radius: 3px;
}

.md-typeset pre > code {
  border-radius: 4px;
}

/* Inline code */
.md-typeset :not(pre) > code {
  background-color: #F5F5F5;
  color: var(--ws-maroon);
  padding: 0.1em 0.4em;
  border: 1px solid var(--ws-gray-border);
}

/* --------------------------------------------------------------------------
   LINKS
   -------------------------------------------------------------------------- */

.md-typeset a {
  color: var(--ws-orange);
}

.md-typeset a:hover,
.md-typeset a:focus {
  color: var(--ws-maroon);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.md-footer {
  background-color: var(--ws-black);
}

.md-footer-meta {
  background-color: var(--ws-black);
}

/* --------------------------------------------------------------------------
   SCROLLBAR / SELECTION
   -------------------------------------------------------------------------- */

::selection {
  background-color: rgba(255, 72, 33, 0.2);
  color: var(--ws-black);
}

/* --------------------------------------------------------------------------
   LOGO IN HEADER
   -------------------------------------------------------------------------- */

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 28px;
  width: auto;
  min-width: 120px;
}

/* --------------------------------------------------------------------------
   BACK TO TOP BUTTON
   -------------------------------------------------------------------------- */

.md-top {
  background-color: var(--ws-orange);
  color: var(--ws-white);
  border-radius: 9999px;
}

.md-top:hover {
  background-color: var(--ws-maroon);
}

/* --------------------------------------------------------------------------
   SEARCH HIGHLIGHT
   -------------------------------------------------------------------------- */

.md-search-result__meta {
  color: var(--ws-black);
}

.md-search-result mark {
  background-color: rgba(255, 72, 33, 0.2);
  color: var(--ws-black);
}

/* --------------------------------------------------------------------------
   DISABLE DARK MODE (safety net)
   -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] {
  /* Force light mode colors even if slate scheme somehow loads */
  --md-default-bg-color: var(--ws-white);
  --md-default-fg-color: var(--ws-black);
}