/* brand.css — Grantibly overrides on top of the scaffold's global.css.
   Loaded on every generated (directory) page after global.css, never on the
   mirrored marketing pages, which carry the WordPress theme sheet instead.
   Goal: the Insight Library reads as part of grantibly.com, matching the live
   site's black masthead, uppercase Montserrat labels, pill buttons and teal
   accents (client-brand-spec.md, verified against the live CSS 2026-09-02). */

/* Masthead: black bar, white logo, small uppercase Montserrat links, teal on hover/active */
.site-nav { background: #000; border-bottom: 0; }
.site-nav__inner { min-height: 80px; }
.site-nav__logo img { height: 44px; width: auto; display: block; }
.site-nav__links a { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; }
.site-nav__links a:hover { color: #6DBEA2; }
.site-nav__links a.btn.btn--primary { background: transparent; border: 2px solid #6DBEA2; color: #6DBEA2; border-radius: 9999px; padding: 0.55em 1.4em; }
.site-nav__links a.btn.btn--primary:hover { background: #6DBEA2; color: #000; }
.nav-toggle span { background: #fff; }

/* Buttons: pill, uppercase Montserrat, like the site's "Schedule a consult" */
.btn { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 9999px; }
.btn--primary { background: #6DBEA2; color: #000; border: 2px solid #6DBEA2; }
.btn--primary:hover { background: #4F9C81; border-color: #4F9C81; color: #000; }
.btn--ghost, .btn--secondary { border: 2px solid #6DBEA2; color: #6DBEA2; background: transparent; }
.btn--ghost:hover, .btn--secondary:hover { background: #6DBEA2; color: #000; }

/* Sidebar CTA sits on a light surface: the scaffold styled its heading for a dark one */
.sidebar-cta__heading { color: #272727; }

/* Eyebrow labels in the site's Montserrat register */
.section-label, .card__label, .hero__label, .node-tldr__label, .inshort__label, .node-sources__label, .perspective-block__label, .sidebar-cta__eyebrow { font-family: 'Montserrat', sans-serif; font-weight: 600; letter-spacing: 0.12em; }

/* Footer: black, white logo mark, teal links on hover, like the site's colophon */
.site-footer { background: #000; }
.site-footer__logo img { height: 56px; width: auto; }
.site-footer a:hover { color: #6DBEA2; }

/* Breadcrumb on phones: wrap as running text instead of three squeezed columns */
@media (max-width: 767px) {
  .breadcrumb__list { display: block; line-height: 1.6; }
  .breadcrumb__item { display: inline; }
}

/* ── Contrast pass (Cindy, 2026-09-02: "cards need to pop and be more visible") ──
   The scaffold's light tokens map to near-white for this brand (surfaceLight
   #FFFFFF, surfaceLightDark #E6E6E6), so sections and cards were all white on
   white. Give the library a second surface (soft mint from the brand's callout
   tone) and make every card a real object: border, teal top bar, real shadow. */
:root { --g-mint: #EEF6F2; --g-mint-deep: #E2F0EA; --g-line: #C9DDD4; --g-teal: #6DBEA2; }

.section--warm { background: var(--g-mint); }
.breadcrumb { background: var(--g-mint); border-bottom: 1px solid var(--g-line); }

.card, .section--white .card, .section--warm .card {
  background: #fff;
  border: 1px solid var(--g-line);
  border-top: 4px solid var(--g-teal);
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(39, 39, 39, 0.10);
}
.card:hover { box-shadow: 0 14px 36px rgba(39, 39, 39, 0.16); border-color: var(--g-teal); transform: translateY(-3px); }
.card__title { font-weight: 600; }
.card__title a:hover { color: #4F9C81; }
.card__text { color: #444; }
.card a:not(.card__title a) { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #4F9C81; text-decoration: none; }
.card a:not(.card__title a):hover { color: #000; }
.structural-number { color: rgba(109, 190, 162, 0.16); }

/* Hub and pillar grids sit on the mint surface so the white cards read as cards */
.section--white:has(.card-grid) { background: var(--g-mint); }

/* Node components */
.node-tldr { background: var(--g-mint-deep); border-left: 6px solid var(--g-teal); border-radius: 0 6px 6px 0; }
.node-tldr p { font-size: 19px; }
.author-block { border-color: var(--g-line); }
.inshort { border: 1px solid var(--g-line); border-top: 4px solid var(--g-teal); box-shadow: 0 10px 34px rgba(39, 39, 39, 0.12); }
.inshort__label { border-bottom-color: var(--g-line); }
.takeaways, .takeaways li { border-color: var(--g-line); }
.takeaways li::before { color: #000; }
.pull-quote { background: #fff; border: 1px solid var(--g-line); border-radius: 6px; padding: 40px 48px; box-shadow: 0 6px 22px rgba(39, 39, 39, 0.08); }
.pull-quote p { font-weight: 600; }
.perspective-block { background: #000 !important; color: #fff; border-radius: 6px; padding: 40px; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.25); }
.perspective-block h2, .perspective-block h3, .perspective-block p, .perspective-block strong, .perspective-block li { color: #fff; }
.perspective-block__label { color: var(--g-teal); }
.perspective-block strong { color: var(--g-teal); }
.sidebar-cta { background: #fff; border: 1px solid var(--g-line); border-top: 4px solid var(--g-teal); border-radius: 6px; box-shadow: 0 6px 22px rgba(39, 39, 39, 0.10); }
.sidebar-cta__heading { color: #272727; }
.sidebar-cta__divider { border-color: var(--g-line); }
.faq-item { border: 1px solid var(--g-line); border-radius: 6px; background: #fff; margin-bottom: 10px; padding: 0 18px; }
.node-sources { background: var(--g-mint-deep); border-radius: 6px; padding: 24px 28px; }
.related-nodes .card, .card--pillar-tinted { border-top-color: var(--g-teal); }

/* The hub's guides section follows the mint pillar grid, so it sits on white
   to read as its own section (2026-11-03). */
.section--white.section--guides:has(.card-grid) { background: #fff; }
.section--guides .card { background: var(--g-mint); }