/* Supplemental theme rules for blocks that exist in the newer theme build but not in the
   stylesheets the live site currently ships: the expert-profile badge and the stacked social
   list. Extracted verbatim from the design build's main.css
   (development.eximius-solutions.com/rcb-corporate-website/html/v1/assets/css/build/main.css).
   Loaded by the pages that need one of its rules, and every rule is scoped to its block. When the
   live theme is next rebuilt these rules should arrive in main.css and this file can go. */
.socials-wrapper-stacked .social__inner { width: 20px; }
.socials-wrapper-stacked .social:not(:last-child) { margin-bottom: 12px; }
.socials-wrapper-stacked .social a { display: flex; align-items: center; text-decoration: none; gap: 15px; -webkit-text-fill-color: #939BB8; }
.socials-wrapper-stacked .social a.text-color-blue, .socials-wrapper-stacked .social a span.text-color-blue { -webkit-text-fill-color: #005AEE; }
.socials-wrapper-stacked .social a img { max-width: 16px; }
.socials-wrapper-stacked .social a:hover { text-decoration: underline; }
.page-header .page-header__inner .text-box .heading .verified-expert-badge { display: block; width: 100px; height: 100px; margin-top: 30px; border-radius: 50%; display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column; }
@media (min-width: 992px){ .page-header .page-header__inner .text-box .heading .verified-expert-badge { position: absolute; right: 0; top: 0; margin-top: 0; }}

/* The rest of the expert-profile layout, from the same design build.
   The earlier extraction took the badge and the stacked socials but stopped there, so the layout
   those two sit inside was never vendored — and the live theme does not ship it, because the live
   site has no expert-profile template. The result was a profile page whose CSS half-existed:
   the badge was `position: absolute` with nothing positioned to anchor to, so it flew to the
   corner of the viewport, and `.hero-image.small` fell back to the full-size 515px rule with
   `img { width: 100% }`, which stretched a 300x400 portrait into a 515x687 slab.
   Copied verbatim from the design build's main.css — same source as the two rules above. */
.page-header .page-header__inner .text-box .heading { max-width: unset; position: relative; }
.page-header.with-hero-image .hero-image.small { width: 400px; min-width: 400px; }
.page-header.with-hero-image .hero-image.small img { width: auto; }
.page-header.with-hero-image .hero-image .social .social__inner img { width: auto; }
@media (min-width: 992px){
  /* Reserves the badge's corner so it never lands on top of the name. Only when there IS a badge:
     unscoped, this also held 150px back from every page header's copy on every page that loads
     this sheet (the marketing pages among them). */
  .page-header.has-badge .heading.main { padding-right: 150px; }
}
@media (max-width: 1199px){
  .page-header .heading.main .title > * { font-size: 4.8rem; }
}
@media (max-width: 575px){
  /* main.css drops `.hero-image` to full width here but predates `.small`, which would otherwise
     stay pinned at 400px on a phone. */
  .page-header.with-hero-image .hero-image.small { width: 100%; min-width: 100%; }
}

/* Hero headline.
   The theme sets `.hero-section .content .title h1 { color: #fff0 }` — fully transparent — because
   its own JavaScript paints the headline as an animated rotating-words effect (note the
   `.words-to-rotate` input the block renders). This site does not run that script, so the headline
   would simply not appear. The theme already solves the same problem for its slim hero variant
   with `color: inherit`, which picks up the white set by `.bg-grey-darker`; applying it to the
   marketing hero is the theme's own answer, not a new opinion. */
.hero-section .content .title h1,
.hero-section .content .title h2,
.hero-section .content .title h3 { color: inherit; }

/* Same defect, same block editor, different section: `rcb-text-and-image` also sets its heading
   `color: #fff0` — fully transparent — for the same rotating-words script we do not run. Without
   this, the "Ready to Amplify Your Expertise?" headline on /marketing-studio/ is present in the
   DOM, selectable, and invisible. These are the only two blocks in the theme that do it, verified
   by grepping every `color:#fff0` rule targeting a heading across all vendored stylesheets.

   Written as two explicit arms rather than `color: inherit`. Both resolve identically today, but
   the intent is worth stating: #000D27 is the theme's body/heading colour, and the two
   text-and-image sections on /get-interviewed/ sit on `bg-grey-darker`, where a flat black would
   put navy text on a navy panel — the same invisible-heading bug in reverse. */
.text-and-image .heading .title h1,
.text-and-image .heading .title h2,
.text-and-image .heading .title h3,
.text-and-image .container > .heading .title h1,
.text-and-image .container > .heading .title h2,
.text-and-image .container > .heading .title h3 { color: #000D27; }

.text-and-image.bg-grey-darker .heading .title h1,
.text-and-image.bg-grey-darker .heading .title h2,
.text-and-image.bg-grey-darker .heading .title h3,
.text-and-image.bg-blue .heading .title h1,
.text-and-image.bg-blue .heading .title h2,
.text-and-image.bg-blue .heading .title h3,
.bg-grey-darker .text-and-image .heading .title h1,
.bg-grey-darker .text-and-image .heading .title h2,
.bg-grey-darker .text-and-image .heading .title h3 { color: #FFF; }

/* "As Seen In" marquee. The theme hides `.content-holder` and delegates the moving track to a
   `supermarquee` component loaded from unpkg; we don't load third-party scripts, so the track is
   built in markup instead (two identical logo groups) and moved here. Translating by exactly -50%
   lands the second group where the first began, so the loop has no seam. */
.marquee .marquee__inner { overflow: hidden; }
.marquee .kc-marquee-track {
  display: flex;
  width: max-content;
  animation: kc-marquee var(--kc-marquee-duration, 40s) linear infinite;
}
.marquee .kc-marquee-group { display: flex; align-items: center; gap: 60px; padding-right: 60px; }
.marquee .marquee__inner:hover .kc-marquee-track { animation-play-state: paused; }
@keyframes kc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee .kc-marquee-track { animation: none; }
}

/* ---------------------------------------------------------------------------------------------
   Deliberate departures from the live theme, at Steve's direction (2026-08-28). Everything above
   this line reproduces keycrew.co; everything below changes it on purpose, so the two are not
   confused later when someone diffs against the live site and finds these.
   --------------------------------------------------------------------------------------------- */

/* NOTE: no width override here on purpose. The narrow running text Steve flagged is what the live
   site does too — measured at 1440px, the hero subtitle is 920px wide on both. Widening it made us
   wider than keycrew.co, which is a parity regression, not a fix. If the copy should genuinely run
   wider, that is a design decision to take against the live site as well. */

/* (Removed 2026-09-27: the white-with-blue-frame element cards. The design review asked for the
   theme's own pastel fills and drop shadow back, so the cards render from block-elements-list.css
   unmodified again.) */

/* The cards sat a long way above the copy that follows them, because the card grid's bottom margin
   and the next section's top padding stacked. */
.rcb-elements-list .elements-list__inner { margin-bottom: 0; }

/* "Presented By" can stack up to three profile cards; the theme only ever drew one. */
.info-cards-section .info-cards-section__inner + .info-cards-section__inner { margin-top: 30px; }

/* (Removed 2026-09-27: the `cta-outline` and `cta-compact` CTA utilities. The design review
   asked for the theme's own solid `bg-blue` CTA back wherever they were used.) */

/* ── Profiles, and the sources index ──────────────────────────────────────────────────────────
   Most sources have no photo, so "no photo" is the common case, not the fallback. Every profile
   keeps the theme's side-by-side header, as the old site drew it: a left column holding the photo
   when there is one and the contact list either way, and the name, role and bio beside it,
   left-aligned. `.hero-image.no-photo` is that column without a picture. */

/* The theme sets `font-size: 0; line-height: 0` on `.hero-image` to close the gap under an inline
   <img>. The contact list sits in the same column and inherited it, so its text had no size. */
.page-header.with-hero-image .hero-image .socials-wrapper-stacked { font-size: 1.6rem; line-height: 2.4rem; }
.page-header.with-hero-image .hero-image.no-photo { border-radius: 0; }

/* Name, role, market and bio are siblings with no spacing of their own — with a portrait setting
   the band's height the theme never needed any, and without one they ran together. */
.page-header.profile-header .text-box__inner > * + * { margin-top: 24px; }

@media (max-width: 991px) {
  /* Stacked on a phone, the contact list belongs after the bio, not above the name. */
  .page-header.profile-header .page-header__inner { display: flex; flex-direction: column; }
  .page-header.profile-header .hero-image.no-photo { order: 2; }
}

/* The featured band on /sources/ uses the city pages' expert card, minus the photo column. */
.incontent-text-and-image.no-photo { display: block; }
.incontent-text-and-image.no-photo .text { width: 100%; max-width: 100%; }

/* Cards in a row match heights, so the bordered boxes line up instead of stepping wherever a
   company name wraps to a third line. The `.additional-info` strip is pushed to the bottom for the
   same reason: the market/story line should sit on one baseline across the row. */
.elements-list.grid .inner-grid__item.element .element-list--card.slim.source-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.element-list--card.slim.source-card .element-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.element-list--card.slim.source-card .additional-info { margin-top: auto; }

/* The card is an <a>, and the theme sets `line-height: 1` on anchor cards — right for a one-line
   label, but a role line like "Broker Associate & Team Leader, Darryl & JJ Jones Team (ERA North
   Orange County Real Estate)" wrapped into three lines set solid, with the divider under it flush
   against the last one. Give the name and role a reading line-height and the divider its air. */
.element-list--card.slim.source-card .title { line-height: 1.15; }
.element-list--card.slim.source-card .subtitle {
  font-size: 1.5rem;
  line-height: 2.2rem;
  margin-top: 8px;
  margin-bottom: 16px;
}

/* Optional 40px avatar on a directory card. The card stays text-first — this sits inline with the
   name rather than heading the card, so a row of photoless cards beside a photographed one still
   reads as one grid. */
.element-list--card.slim.source-card .title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.element-list--card.slim.source-card .source-avatar {
  flex: 0 0 40px;
  line-height: 0;
}
.element-list--card.slim.source-card .source-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

/* Brand cards (logo over name and blurb) keep their stacked layout down to tablet. The theme turns
   every 4-up card into a flex row below 1400px and every 3-up card below 1200px, which suits an
   icon beside a line of copy but squeezed these logos to ~120px and wrapped the copy a word per
   line between 992px and 1399px. Logo-only cards are unaffected: `.no-text` is already a centred
   column with `!important`. */
@media (min-width: 768px) {
  .rcb-elements-list.elements-list.grid-with-image .inner-grid .inner-grid__item .element-list--card {
    display: block;
  }
}

/* ── The author hero's bio ─────────────────────────────────────────────────────────────────────
   White and in the primary face on the dark hero, as the old site set it (the theme's
   `.page-header.bg-grey-darker .text` is a muted #939BB8 in the secondary face), clamped to about eight lines behind a fade with a Read More / Read Less
   toggle. ThemeBehaviours adds `is-short` to a bio that already fits, which drops both the fade and
   the button, and `is-expanded` on click. */
.page-header.bg-grey-darker .text-box .text.kc-collapsible {
  color: #FFF;
  font-family: "unicode-fix", "primary-regular", Arial, Helvetica, sans-serif;
}
.kc-collapsible:not(.is-expanded):not(.is-short) .kc-collapsible__body {
  max-height: 22rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.kc-collapsible.is-short .kc-read-more { display: none; }
/* The old site's toggle: the label centred on a thin rule that runs the width of the column. */
.kc-read-more {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 24px 0 0;
  padding: 0;
  background: none;
  border: 0;
  color: #669CF5;
  -webkit-text-fill-color: #669CF5;
  font-family: "unicode-fix", "primary-regular", Arial, Helvetica, sans-serif;
  font-size: 1.6rem;
  line-height: 2.4rem;
  white-space: nowrap;
  cursor: pointer;
}
.kc-read-more::before,
.kc-read-more::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: #669CF5;
}
.kc-read-more:hover { text-decoration: underline; }
.page-header.with-hero-image .text-box .socials-wrapper { padding-top: 30px; }

/* ── Legal and editorial-policy pages ──────────────────────────────────────────────────────────
   Terms of Use, Privacy, Cookies, Content Terms, Editorial Guidelines and the sponsorship notice
   (`legal-text` on their copy section). Their section headings are real <h2>s now, and the theme's
   bare h2 is a 5.2rem display size meant for page sections, not for "4. Intellectual Property"
   twenty times down a page. This is the scale the old site set them at. */
.legal-text h2,
.text-block.legal-text .text-block__inner .content h2 {
  font-size: 3.2rem;
  line-height: 4rem;
  margin-top: 50px;
  margin-bottom: 20px;
}
.legal-text .wp-block-group__inner-container > h2:first-child,
.text-block.legal-text .text-block__inner .content > h2:first-child { margin-top: 0; }
@media (max-width: 767px) {
  .legal-text h2,
  .text-block.legal-text .text-block__inner .content h2 { font-size: 2.6rem; line-height: 3.4rem; margin-top: 40px; }
}

/* The newsletter's "Success!" notice (BeehiivForm.tsx): a small pill over the header, top centre,
   as the old site showed it after a sign-up. Above the header (z-index 10) and the preheader. */
.kc-toast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background-color: #FFF;
  color: #000D27;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgb(0 0 0 / .18);
  font-size: 1.4rem;
  line-height: 2rem;
  white-space: nowrap;
}