/* =====================================================================
   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; }

/* ─── Sub-label suppressed on this site ──────────────────────────────
   creditcorporation.co.uk carries the widest primary nav in the family
   (7 links + the disambiguation button + the CTA). The "Corporation
   directory" logo sub-label pushed that over the container and got
   clipped by the nav. It is purely decorative here and is already stated
   by the hero eyebrow ("CORPORATION DIRECTORY"), so it is hidden — the
   mark plus the nav carry the header. (ccgroup/cconline keep their short
   "Group" sub-label, which fits.) */
.site-logo__sub { display: 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}

/* ── 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; }
/* ── 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; }
}