/* =====================================================================
   New chrome components
   ---------------------------------------------------------------------
   Load order:  cmb.css  ->  cc-identity.css  ->  this file.

   cmb.css       the CM Beyer design system, verbatim (the base)
   cc-identity   this site's own hero / icons / cc-* components, extracted
                 verbatim from its own stylesheet (the flavour)
   this file     the handful of things that exist in NEITHER, because the
                 CM Beyer chrome markup introduced them.

   The earlier hand-written cc-sections.css is superseded by cc-identity.css
   and archived in scratchpad/superseded/ — it re-derived component values that
   are now lifted from source instead.
   ===================================================================== */

/* ─── Brand sub-label ────────────────────────────────────────────────
   These sites set a qualifier beside the mark ("Corporation directory",
   "Group"). CM Beyer's .site-logo is a flex row holding only the mark, so
   the label gets the same treatment as its h5 eyebrow: small, tracked,
   uppercase, muted, divided from the mark by a hairline. */
.site-logo__sub {
	margin-left: .7rem;
	padding-left: .7rem;
	border-left: 1px solid var(--g2);
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--g5);
	white-space: nowrap;
}
@media (max-width: 600px) { .site-logo__sub { display: none; } }

/* ─── Nav item that opens the disambiguation dialog ──────────────────
   It must be a <button> (it opens a dialog, it does not navigate), and a
   bare button renders with the UA's own border, background and font — which
   is what made it read as a stray input box sitting in the nav. These are
   CM Beyer's effective .site-nav a values (its later patch block narrows
   every nav link to 1.2rem/.9rem at .85rem), so the button measures
   identically to its sibling links. */
.site-nav__modal {
	display: block;
	padding: 1.2rem .9rem;
	font-family: var(--font);
	font-size: .85rem;
	font-weight: 600;
	color: var(--black);
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -3px;
	cursor: pointer;
	transition: all var(--tr);
}
.site-nav__modal:hover {
	color: var(--brand);
	border-bottom-color: var(--brand);
	background: var(--g0);
}
@media (max-width: 768px) {
	.site-nav__modal {
		width: 100%;
		text-align: left;
		padding: 1rem 1.25rem;
		border-bottom: 1px solid var(--g1);
		margin-bottom: 0;
	}
}

/* ─── Reveal safety net (print) ──────────────────────────────────────
   CM Beyer's scroll animation starts .section/.card at opacity:0 and relies
   on an IntersectionObserver. Printing never scrolls, so force everything
   visible. The JS-off case is covered by the <noscript> block in the head,
   and the runtime case by the sweep in cmb-behaviours.js. */
@media print {
	.section, .card, .dividend-box, .quick-link, .pricing-card, .dividend-card, .fade-in {
		opacity: 1 !important; transform: none !important;
	}
}

/* ─── Hero layout ────────────────────────────────────────────────────
   This site's hero is CENTRED (its own identity), whereas CM Beyer's
   .hero-banner is left-aligned. The identity graft carries the decoration
   (photo bed, dot grid, gold rule) but NOT type or layout — CM Beyer owns
   those — so the centring has to be stated once here, explicitly, on top of
   CM Beyer's type. No font-size/weight overrides: the heading stays Plus
   Jakarta Sans 700 at CM Beyer's scale; it is only re-centred and given a
   reading measure so it never spans the full width. */
.hero__inner { text-align: center; }
.hero__inner > * { margin-left: auto; margin-right: auto; }
.hero h1 { max-width: 20ch; }
.hero .lead, .hero__inner p { max-width: 52ch; }
/* Left-align hero actions with the left-aligned hero text + ask-Credi pill
   (CM Beyer's own .hero-banner__actions has no justify — it sits flush-left;
   an earlier center override pushed the buttons off the pill's left edge). */
.hero__cta, .hero-banner__actions { justify-content: flex-start; }

/* ─── Buttons with an inline SVG arrow ───────────────────────────────
   These sites put a real <svg viewBox="0 0 24 24"> (ccuk_arrow / cc arrow)
   INSIDE a .btn. CM Beyer's buttons use a text arrow via .btn-arrow::after,
   so CM Beyer's .btn has no rule to size a child <svg> — left unsized, the
   viewBox-only SVG expands to ~113px and blows the button open. Make the
   button a flex row and size the glyph to the text. Text-only CM Beyer
   buttons are unaffected (inline-flex + gap renders them identically). */
.btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* Arrow glyphs (→ ↗) as text, not emoji — iOS renders U+2197/U+2192 as
   colour emoji by default, which looks like a stray blue box in a button. */
.btn, .utility-bar a, .cc-pcard__go, .cc-signpost__action a, .footer-estate__nav a,
.feature__more, [class*="__cta"], .estate-chip { font-variant-emoji: text; }

/* ─── External-link arrow (replaces the ↗ emoji character) ───────────
   iOS renders U+2197 as colour emoji; the estate's rule is no emoji icons.
   The markup now emits an inline Lucide-style SVG (.cc-ext) instead. Size
   it to the surrounding text. */
.cc-ext { width: .72em; height: .72em; display: inline-block; vertical-align: -.04em;
          margin-left: .18em; flex: none; }

/* ─── Heading spacing baseline ───────────────────────────────────────
   CM Beyer's reset zeroes every margin and CM Beyer spaces headings via
   component-specific rules, not a global one. These sites' markup instead
   relied on a global h1..h4 { margin: 0 0 16px }, so bare section headings
   collapsed to 0 under the CM Beyer base. Restore that baseline, scoped to
   page content (#main) so it never touches header/footer chrome. Component
   rules (.cc-signpost h2, .cta-strip h2, .section-head) are more specific
   and still win. */
#main h1, #main h2, #main h3, #main h4 { margin: 0 0 16px; }

/* ─── Long route buttons must not strand the arrow on its own line ───── */
/* Buttons stay on a single line — the arrow must never strand on its own row.
   Long-label route buttons get a slightly smaller label + tighter tracking so
   the whole thing fits the button width instead of wrapping. */
.btn { flex-wrap: nowrap; white-space: nowrap; }
.cc-signpost__action .btn, .footer-estate__nav .btn, a.btn[href^="http"] { letter-spacing: .02em; }

/* ─── Footer fixes (dark footer) ─────────────────────────────────────
   1. Brand mark reversed to white so it reads on the dark footer. This is
      the exact treatment the site's original footer used on its own
      .site-footer__logo; the rebuild moved the mark into CM Beyer's
      .footer-brand__logo, so the reverse has to be re-pointed at that class.
      A monochrome reverse for a dark surface is a display treatment, not a
      redraw of the mark. */
.site-footer .footer-brand__logo,
.site-footer .footer-brand img { filter: brightness(0) invert(1); }

/* 2. Newsletter form — the intro copy and the email input were touching.
      Give the form its own space below the lead and space the row + consent. */
.footer-estate__intro .footer-sub__form { margin-top: 18px; }
.footer-sub__row { margin-top: 4px; }
.footer-sub__consent { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
                       color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.5; }
.footer-sub__consent input { margin-top: 2px; flex: none; }

/* ─── News carousel — keep pagination clear of the card button ────────
   The swiper's bottom pad wasn't enough, so the pagination bullets sat on
   the "Read the full story" button. Give the pagination its own band below
   the cards. */
.news-swiper { padding-bottom: 88px; }
.news-swiper .swiper-pagination { bottom: 30px; }
/* the card itself should not stretch into the pagination band */
.news-swiper .swiper-slide { padding-bottom: 4px; }

/* CMB page-header has no actions row of its own — give hero CTAs a tidy flex row */
.page-header__actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.35rem}
.page-header__actions .btn{margin:0}
/* ── Inner-page section heads → CM Beyer's left-aligned section rhythm ──
   cc-identity centered .section-head (max-width:720px;margin:0 auto) with a
   centered gradient bar. CM Beyer — and the approved homepage sections — put
   the eyebrow/title/lead flush-left in the container. Match that so inner
   pages read as CM Beyer, not a distilled centered splash. */
.section-head{text-align:left;max-width:none;margin:0 0 1.5rem}
.section-head .accent-line{margin-left:0;margin-right:0}
.section-head h2{font-size:clamp(1.5rem,3vw,1.95rem)}
.section-head p{margin-left:0;margin-right:0;max-width:65ch}

/* ── "Which Credit Corp?" disambiguation trigger, relocated to the utility bar ──
   Was a long .site-nav__modal button wedged into the primary nav — it crowded
   the bar (truncating the logo "Group" sub) and read as an erroneous nav item.
   Here it sits with Group & legal, styled as a plain utility-bar link, and
   drops off on phones where the bar is tight (the homepage already disambiguates). */
.utility-bar__disambig{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;font-weight:500;color:rgba(255,255,255,.7);cursor:pointer;transition:color var(--tr);white-space:nowrap;line-height:inherit}
.utility-bar__disambig:hover{color:#fff}
@media(max-width:768px){.utility-bar__disambig{font-size:.72rem}}
@media(max-width:600px){.utility-bar__disambig,.utility-bar__divider--disambig{display:none}}

/* ── feature-banner base layout ─────────────────────────────────────
   cmb.css ships CM Beyer's feature-banner content type + --dark/--brand
   colour variants but NOT the base 2-column skeleton (it lived in the theme
   template, like the hero-askbea pill). State the skeleton here so the band
   renders as CM Beyer's image+content feature. */
.feature-banner{display:grid;grid-template-columns:1.05fr 1fr;align-items:stretch;
  overflow:hidden;border-radius:14px;background:var(--white);border:1px solid var(--g1);
  box-shadow:0 1px 3px rgba(0,0,0,.05)}
.feature-banner__img{position:relative;min-height:360px;background:#0d3a3c}
.feature-banner__content{padding:2.9rem;display:flex;flex-direction:column;justify-content:center}
.feature-banner__eyebrow{font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--brand);margin-bottom:.55rem}
.feature-banner__content h2{font-size:clamp(1.4rem,2.4vw,1.85rem)}
.feature-banner__content .btn{margin-top:1.4rem;align-self:flex-start}
.feature-banner--rev .feature-banner__img{order:2}
.feature-banner--dark{background:#0d3a3c;border-color:transparent}
.feature-banner--brand{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);border-color:transparent}
.feature-banner--dark .feature-banner__eyebrow,.feature-banner--brand .feature-banner__eyebrow{color:rgba(255,255,255,.72)}
@media(max-width:768px){.feature-banner{grid-template-columns:1fr}
  .feature-banner__img{min-height:210px}.feature-banner--rev .feature-banner__img{order:0}
  .feature-banner__content{padding:2rem 1.5rem}}

/* ── Dark-surface <strong> contrast fix ──────────────────────────────
   cc-identity ships a global `strong{color:var(--gray-800)}` (from the site's
   own style.css) — correct on light content, but it rendered the footer's
   bold company names near-black on the dark footer (black-on-black), and the
   same on any dark band. Inherit the surface's light colour; give the footer
   company names a brighter heading weight. */
.site-footer strong,
.section--dark strong,
.section--brand strong,
.feature-banner--dark strong { color: inherit; }
.footer-brand__text strong { color: rgba(255,255,255,.92); }

/* ── Primary-nav labels never wrap ───────────────────────────────────
   .site-nav a has no white-space rule, so multi-word labels ("Borrowing
   options", "Who can borrow") wrapped to two lines — and the :hover
   background then painted a tall box. Keep every nav label on one line. */
.site-nav a { white-space: nowrap; }

/* cconline carries the widest labels — also drop the decorative "Group" sub-label so the mark + nav + CTA never collide (matches ccorporation). */
.site-logo__sub { display: none; }
/* ── Nav collapses to hamburger below 1100px ─────────────────────────
   With labels kept on one line (nowrap, above), the full row of primary
   links + CTA needs ~1100px; CM Beyer only collapses at 768px, so 769–1099px
   overflowed (labels wrapped, hover box ballooned). Extend the hamburger up
   to 1099px — the same dropdown panel CM Beyer uses on mobile, triggered
   earlier. The toggle JS (cmb-behaviours.js) is width-agnostic. */
@media (max-width: 1099px) {
  .menu-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--white); flex-direction: column; align-items: stretch;
    border-bottom: 3px solid var(--brand); box-shadow: 0 8px 20px rgba(0,0,0,.1);
    gap: 0; padding: 0; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 1rem 1.25rem; font-size: .95rem; white-space: normal;
    border-bottom: 1px solid var(--g1); margin-bottom: 0; border-radius: 0; }
  .site-nav a:hover, .site-nav a.active { background: var(--g0); color: var(--brand);
    border-bottom-color: var(--g1); border-left: 3px solid var(--brand);
    padding-left: calc(1.25rem - 3px); }
  .site-nav__cta { margin: .75rem 1rem !important; padding: .8rem 1.25rem !important;
    text-align: center; display: block; border-radius: 3px !important;
    border-bottom: none !important; border-left: none !important; }
}