/**
 * Class Intercom brand layer (2026 redesign).
 *
 * Type scale + eyebrow live in the SA Base parent (h1/h2 Azo, h3/h4 Montserrat,
 * body Lato, .mm-eyebrow Lato Bold caps 8%); this file carries the CI-specific
 * pieces: section-background color helpers with automatic text contrast, and a
 * few brand-accent touches. Loaded after sa-base.css (see functions.php).
 */

/* ---------------------------------------------------------------------------
 * Sticky sub-nav (.tab-bar on solution/persona canvas pages) must sit BELOW
 * the sticky site header, never over it. Both were position:sticky; top:0;
 * z-index:100 — so on scroll the white tab bar pinned to the same spot and,
 * being later in the DOM, painted over the header and hid the logo. Tuck it
 * under the 64px header and drop it beneath the header in the stack.
 * ------------------------------------------------------------------------- */
.tab-bar { top: 64px !important; z-index: 90 !important; }

/* ---------------------------------------------------------------------------
 * Footer sits flush against the last section — the redesign's full-bleed color
 * bands (CTA teal, careers mint, …) should butt straight into the footer with
 * no white gap. Overrides the parent's slimming-pass margin.
 * ------------------------------------------------------------------------- */
.mm-footer { margin-top: 0; }

/* ---------------------------------------------------------------------------
 * Section background colors.
 * Set any Group / Cover / Columns block's "Background" to a brand color in the
 * editor. On the DARK fills (Pine, CI Teal, Navy, Ink — and their CTA aliases)
 * text/headings flip to Mist 0 and eyebrows/links pick up Gold, so a section
 * stays legible without hand-editing text colors.
 * ------------------------------------------------------------------------- */
.has-pine-background-color,
.has-ci-teal-background-color,
.has-navy-background-color,
.has-ink-background-color,
.has-primary-background-color,
.has-dark-navy-background-color,
.has-midnight-background-color,
.has-rust-background-color,
.has-orange-deep-background-color {
  color: var(--wp--preset--color--mist-0, #FAFBFC);
}
.has-pine-background-color :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, cite),
.has-ci-teal-background-color :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, cite),
.has-navy-background-color :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, cite),
.has-ink-background-color :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, cite),
.has-primary-background-color :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, cite),
.has-dark-navy-background-color :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, cite),
.has-midnight-background-color :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, cite) {
  color: var(--wp--preset--color--mist-0, #FAFBFC);
}
/* Eyebrows / kicker labels go Gold on dark sections (accent-on-dark spec). */
.has-pine-background-color :is(.mm-eyebrow, .mm-section-eyebrow, .eyebrow, .label),
.has-ci-teal-background-color :is(.mm-eyebrow, .mm-section-eyebrow, .eyebrow, .label),
.has-navy-background-color :is(.mm-eyebrow, .mm-section-eyebrow, .eyebrow, .label),
.has-ink-background-color :is(.mm-eyebrow, .mm-section-eyebrow, .eyebrow, .label),
.has-primary-background-color :is(.mm-eyebrow, .mm-section-eyebrow, .eyebrow, .label),
.has-dark-navy-background-color :is(.mm-eyebrow, .mm-section-eyebrow, .eyebrow, .label),
.has-midnight-background-color :is(.mm-eyebrow, .mm-section-eyebrow, .eyebrow, .label) {
  color: var(--wp--preset--color--gold, #D9B86A);
}
/* In-content links on dark sections → Gold, underlined for affordance. */
.has-pine-background-color a:not(.wp-block-button__link):not(.mm-button),
.has-ci-teal-background-color a:not(.wp-block-button__link):not(.mm-button),
.has-navy-background-color a:not(.wp-block-button__link):not(.mm-button),
.has-ink-background-color a:not(.wp-block-button__link):not(.mm-button) {
  color: var(--wp--preset--color--gold, #D9B86A);
  text-decoration: underline;
}

/* Sage is a mid-tone: keep dark Ink text on it for AA contrast (its default). */
.has-sage-background-color,
.has-sage-background-color :is(h1, h2, h3, h4, h5, h6, p, li) {
  color: var(--wp--preset--color--ink, #1A1F24);
}

/* ---------------------------------------------------------------------------
 * Design tokens (bare aliases) so section CSS lifted from Sarah's layout HTML
 * — which references var(--pine), var(--teal), var(--font-heading), etc. —
 * resolves against the theme's palette + font presets without edits.
 * ------------------------------------------------------------------------- */
:root {
  --pine:   var(--wp--preset--color--pine, #074240);
  --teal:   var(--wp--preset--color--ci-teal, #0E6D6B);
  --sage:   var(--wp--preset--color--sage, #6FA3A2);
  --mint:   var(--wp--preset--color--mint, #E2F0EF);
  --navy:   var(--wp--preset--color--navy, #16243F);
  --gold:   var(--wp--preset--color--gold, #D9B86A);
  --mist-0: var(--wp--preset--color--mist-0, #FAFBFC);
  --mist-1: var(--wp--preset--color--mist-1, #F2F4F6);
  --mist-2: var(--wp--preset--color--mist-2, #E5E7EA);
  --mist-3: var(--wp--preset--color--mist-3, #CDD1D6);
  --mist-4: var(--wp--preset--color--mist-4, #A8AEB5);
  --mist-5: var(--wp--preset--color--mist-5, #6A7079);
  --mist-6: var(--wp--preset--color--mist-6, #44494F);
  --ink:    var(--wp--preset--color--ink, #1A1F24);
  --font-heading: var(--wp--preset--font-family--azo-sans, azo-sans-web, "Helvetica Neue", Helvetica, Arial, sans-serif);
  --font-sub:     var(--wp--preset--font-family--montserrat, Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif);
  --font-body:    var(--wp--preset--font-family--lato, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif);
  /* convenience aliases */
  --ci-gold: var(--gold);
  --ci-teal: var(--teal);
  --ci-pine: var(--pine);
}

/* ---------------------------------------------------------------------------
 * Shared layout utilities used across the redesign section blocks (lifted from
 * Sarah's Homepage layout). Kept here (always loaded) rather than per-block so
 * any block can rely on them.
 * ------------------------------------------------------------------------- */
.cih-section .inner,
.wp-block-sa-base-cih-hero + * .inner,
.sa-cih .inner,
.cta-section .inner,
.platform-statement .inner,
.platform-intro .inner,
.feat-social .inner,
.feat-surveys .inner,
.feat-archival .inner,
.built-section .inner,
.partners-section .inner,
.testimonials-section .inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

.eyebrow-heading {
  font-family: var(--font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 14px;
}
.eyebrow-light { color: var(--teal); }
.eyebrow-dark  { color: var(--gold); }

.btn {
  display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 14px;
  letter-spacing: 0.04em; text-decoration: none; border-radius: 4px; padding: 14px 28px;
  border: 2px solid transparent; cursor: pointer; transition: all 0.18s;
}
.btn-primary       { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-primary:hover { background: var(--pine); border-color: var(--pine); }
.btn-outline-pine  { background: transparent; color: var(--pine); border-color: var(--pine); }
.btn-outline-pine:hover { background: var(--pine); color: #fff; }
.btn-outline-white { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn-outline-white:hover { border-color: #fff; }
.btn-white         { background: #fff; color: var(--teal); border-color: #fff; }
.btn-white:hover   { background: var(--mint); border-color: var(--mint); }
.btn-group { display: flex; flex-wrap: wrap; gap: 12px; }