/*
 * Shared design-system layer for the Cirrus.OData.Documentation site.
 * Loaded AFTER the external odata-api-public-resources.s3 stylesheets
 * (style.css, stylesheet.css, scrollmenu.css) on every page, so plain
 * selectors here win the cascade without needing !important.
 *
 * Scope: typography, color, spacing, and component polish only.
 * Intentionally does NOT touch layout-critical properties already set
 * by the external sheets (position/top/width/margin-left on
 * .content-menu / .content-document / .container-menu-content) because
 * docs/ and documentation/ use two different sidebar positioning
 * strategies (fixed+flex via scrollmenu.css vs. sticky+float without
 * it) and this file is shared byte-for-byte between both trees.
 *
 * Keep this file identical in docs/assets/css/ and
 * documentation/assets/css/ — no branding lives here.
 */

:root {
  --ink: #15233f;
  --body: #333d4d; /* primary reading text — darker/more neutral than --ink-2, which is now reserved for secondary/meta copy (captions, table headers, nav labels) */
  --ink-2: #4a5870;
  --ink-3: #7a8699;
  --line: #d7dee8;
  --surface: #eaeef4;
  --accent: #1f56e0;
  --accent-soft: #eef3fc;
  --card-shadow: 0 1px 3px rgba(21, 35, 63, 0.06);
  --radius: 10px;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Base typography ---------- */

body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  letter-spacing: -0.01em;
}

.content-document h1 {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.content-document h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: 2.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

/*
 * NOTE: this page structure wraps every h2 in its own <section>, so
 * `h2:first-of-type` (which scopes to siblings under the SAME parent)
 * matches every single one of them — not just the true first heading
 * on the page — silently zeroing the divider/margin on every section
 * everywhere. Apply the divider uniformly instead; a divider above the
 * very first section heading too is a fine, standard look and avoids
 * depending on fragile structural assumptions to detect "the first one".
 */

.content-document h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}

.content-document h4 {
  font-size: 0.95rem;
  font-weight: 700;
}

.content-document p,
.content-document li {
  color: var(--body);
  line-height: 1.6;
}

.content-document a {
  color: var(--accent);
}

/* ---------- Header ---------- */

header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(21, 35, 63, 0.03);
}

/* ---------- Sidebar nav ---------- */

.content-menu-links,
.content-menu {
  font-family: var(--sans);
}

.content-menu ul.menu-list li a {
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: 6px;
  padding: 6px 10px;
  margin-left: -10px;
  display: block;
  transition: background 0.12s, color 0.12s;
}

.content-menu ul.menu-list li a:hover,
.content-menu ul.menu-list li a:focus {
  background: var(--accent-soft);
  color: var(--accent);
}

.content-menu ul.menu-list li a.active,
.content-menu ul.menu-list li a:active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.content-menu ul.menu-list hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 12px 0;
}

.content-menu ul.menu-list li a.external-link {
  color: var(--ink-3);
  font-weight: 500;
}

.content-menu ul.menu-list li a.external-link:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Mobile hamburger */

.menu-toggle {
  border-radius: 6px;
  padding: 8px;
  transition: background 0.12s;
}

.menu-toggle:hover {
  background: var(--surface);
}

.menu-toggle .icon-bar {
  background: var(--ink);
  border-radius: 2px;
}

@media (max-width: 767px) {
  .content-menu-links {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(21, 35, 63, 0.08);
    padding: 14px 18px !important;
    margin-top: 6px;
  }
}

/* ---------- Content elements ---------- */

.content-document table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.92rem;
}

.content-document table th {
  background: var(--surface);
  color: var(--ink-3);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}

.content-document table td {
  border-bottom: 1px solid var(--line);
  color: var(--body);
}

.content-document pre,
.content-document code {
  font-family: var(--mono);
}

.content-document pre {
  background: #1a1e25;
  color: #e4e7ec;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.82rem;
  line-height: 1.55;
}

.content-document pre code {
  background: none;
  color: inherit;
  padding: 0;
  display: inline;
  overflow: visible;
}

/*
 * style.css defines a bare `code { display: block; padding: 20px;
 * overflow-y: scroll; }` meant for real <pre><code> blocks. Any inline
 * <code> NOT inside a <pre> (e.g. a URL or header name inline in a
 * sentence) inherits that block/scroll behavior too, which turns it
 * into its own full-width scrollable box and breaks the sentence flow.
 * Force it back to a normal inline chip.
 */
.content-document :not(pre) > code {
  display: inline;
  overflow: visible;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.85em;
  color: var(--ink);
  white-space: normal;
}

.content-document blockquote {
  margin: 1rem 0;
  padding: 12px 14px;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}

.content-document blockquote p {
  margin: 0;
  color: var(--body);
}

/*
 * Several pages hardcode example/placeholder values (client IDs, tokens,
 * encoded strings) as inline `style="color: #0366d6"` (or "dodgerblue")
 * spans, predating this stylesheet. That blue reads as a link even
 * though it isn't one, and stacks with real prose links to make the
 * page feel blue-saturated. Neutralize it to a plain monospaced
 * emphasis instead — inline styles need !important to be overridden.
 */
.content-document [style*="0366d6" i],
.content-document [style*="dodgerblue" i] {
  color: var(--ink) !important;
  font-family: var(--mono);
  font-weight: 500;
}

/*
 * style.css defines a bare `article { margin: 20px 20px 20px 240px;
 * max-width: 1200px; }` tag selector intended for the single top-level
 * <article class="content-document">. Any *nested* <article> used as a
 * content card (e.g. use-case cards) inherits that same margin/width
 * unless explicitly reset, which silently shoves it 240px to the right.
 * Neutralize it here once for every page instead of re-fixing it per card.
 */
.content-document article {
  margin: 0;
  max-width: none;
}

.warning {
  border-radius: var(--radius);
}

/* ---------- Footer ---------- */

footer {
  border-top: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 0.85rem;
}

/*
 * style.css sets `footer { margin-left: 220px }` to clear the sidebar,
 * but the inner Bootstrap `.container` (used only here, site-wide —
 * nowhere else on the site) re-centers itself with its own max-width +
 * auto margins. On a wide viewport that reads as the footer text
 * floating in the middle of a lot of empty space instead of lining up
 * under the content column. Let it use the full remaining width instead.
 */
footer .container {
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* ---------- Small screens ---------- */

/*
 * scrollmenu.css (loaded on most docs/ pages, after stylesheet.css) sets
 * .content-menu/.content-document unconditionally (fixed sidebar,
 * margin-left: 240px) with no mobile media query of its own, which
 * silently defeats stylesheet.css's intended mobile collapse at
 * max-width:767px. Since this file loads after scrollmenu.css on every
 * page, restore the intended mobile layout here instead of patching
 * every page's markup.
 */
@media (max-width: 767px) {
  /* scrollmenu.css makes .container-menu-content an unconditional flex
     row; at mobile widths that keeps .content-menu and .content-document
     competing as row siblings (and, worse, stops the text content from
     shrink-wrapping below its max-content width). Drop back to normal
     block stacking so each takes the full width on its own line. */
  .container-menu-content {
    display: block;
  }

  .content-menu {
    position: static;
    width: 100%;
    height: auto;
    margin: 0;
  }

  .content-document {
    margin-left: 0;
    font-size: 0.96rem;
  }

  .content-document pre {
    font-size: 0.78rem;
  }
}