/* ============================================================
   Design scale (approved 2026-10-28 via design-sample/bell-design-sample.html)
   Loaded LAST so it unifies type, forms, cards, tables and FAQ across all
   page stylesheets. Colours are NOT set here - they stay per-site.
   To roll back, remove the <link> to this file in _Layout.cshtml.
   ============================================================ */

:root {
  --ds-section-gap: 48px;
  --ds-hero-gap: 64px;
  --ds-gutter: 40px;
  --ds-h1: 32px;
  --ds-h2: 32px;
  --ds-h3: 20px;
  --ds-h4: 16px;
  --ds-body: 16px;
  --ds-body-lh: 1.6;
  --ds-radius: 0;
  --ds-card-shadow: 0 2px 12px rgba(0,0,0,.12);
  --ds-field-h: 44px;
}

@media (max-width: 767px) {
  :root {
    --ds-section-gap: 32px;
    --ds-hero-gap: 32px;
    --ds-gutter: 20px;
    --ds-h1: 26px;
    --ds-h2: 26px;
    --ds-h3: 18px;
  }
}

/* ---- Typography (content area only; header, footer and heroes untouched) ---- */
main#main-content h2 { font-size: var(--ds-h2); line-height: 1.2; }
main#main-content h3 { font-size: var(--ds-h3); line-height: 1.3; }
main#main-content h4 { font-size: var(--ds-h4); line-height: 1.3; }
main#main-content p,
main#main-content .bell-prose li { font-size: var(--ds-body); line-height: var(--ds-body-lh); }
/* Card overlay titles are labels, not section headings: keep their own small size */
main#main-content .uk-cat-card__overlay h2 { font-size: 0.75rem; line-height: 1.2; }
/* Related Products cards on product detail pages: title matches the Parts & Services card title */
main#main-content .pd-section .product-grid .card__title { font-size: 1rem; font-weight: 400; line-height: 1.3; }
/* Sub-headings that sit under a page title are H3-level, not H2 */
main#main-content h2[class*="subheading"] { font-size: var(--ds-h3); line-height: 1.3; }

/* ---- Cards: square, one shadow ---- */
.card, .site-card, .region-card, .news-card, .news-featured, .uk-ncard,
.sd-feature-card, .outlet-card, .dealerships-filters,
.bell-innovation-card, .bulletin-acard {
  border-radius: var(--ds-radius);
}
.card, .sd-feature-card, .news-card, .outlet-card, .bell-innovation-card {
  box-shadow: var(--ds-card-shadow);
}
.sd-feature-card__img, .bell-innovation-card__img-frame,
.uk-ncard__img, .news-article-content img, .na-hero-img__frame,
.na-body__gallery img, .sd-intro__side-img img, .sd-intro__video iframe,
#dealerships-map {
  border-radius: var(--ds-radius);
}

/* ---- Forms: 44px, square ---- */
.bell-form-control, .form-control, .bcf-field textarea.form-control,
.bcf-product-requested, .bell-form-notice, .bell-form-success, .bell-form-error {
  border-radius: var(--ds-radius);
}
.bell-form-control, .form-control { min-height: var(--ds-field-h); }

/* ---- FAQ / accordions: square ---- */
.sd-faq__item, .bell-accordion { border-radius: var(--ds-radius); }

/* ---- Vertical rhythm: plain sections 24px each side (= 48px between), tinted bands 48px ---- */
.sd-intro, .sd-faq, .bell-about-intro, .ps-intro, .gp-intro,
.bell-about-ceo-video, .bell-about-nav-wrapper {
  padding-top: calc(var(--ds-section-gap) / 2);
  padding-bottom: calc(var(--ds-section-gap) / 2);
}
.sd-features, .pd-section, .ps-cards-section, .uk-welcome, .uk-category-grid,
.bell-contact-body, .bell-careers-section-body {
  padding-top: var(--ds-section-gap);
  padding-bottom: var(--ds-section-gap);
}
/* Text blocks inside a plain section must not add their own margin on top of the section padding */
.gp-intro > .container > :first-child, .bell-about-intro .container > :first-child,
.ps-intro .container > :first-child, .bell-careers-intro .container > :first-child,
.bell-careers-intro-text > :first-child { margin-top: 0; }
.gp-intro > .container > :last-child, .bell-about-intro__text p:last-child,
.ps-intro .container > :last-child, .bell-careers-intro .container > :last-child,
.bell-careers-intro-text > :last-child { margin-bottom: 0; }
/* First block after the breadcrumb, and any block that ends against a full-width image or band, gets the full 48px */
.bell-breadcrumbs + .gp-intro, .bell-breadcrumbs + .bell-about-intro, .bell-breadcrumbs + .ps-intro,
.bell-breadcrumbs + .bell-careers-intro, .bell-breadcrumbs + .sd-intro,
.bell-breadcrumbs + .bell-about-nav-wrapper { padding-top: var(--ds-section-gap); }
.sd-intro .container > :first-child, .sd-intro__text > :first-child { margin-top: 0; }
.sd-intro .container > :last-child, .sd-intro__text > :last-child { margin-bottom: 0; }
.bell-about-nav-wrapper, .bell-careers-nav-wrapper { padding-bottom: var(--ds-section-gap); }
/* Pages without a breadcrumb strip (e.g. the regional About / Innovation pages): the title bar is followed
   directly by the first block, which gets the same 48px as when a breadcrumb sits in between */
.bell-about-heading-row + :is(.bell-about-nav-wrapper, .bell-about-intro, .gp-intro),
.bell-careers-heading-row + :is(.bell-careers-intro, .bell-careers-nav-wrapper) { padding-top: var(--ds-section-gap); }
/* News listing: 48px under the breadcrumb, subscribe button, pagination and cards each 48px apart */
.na-subscribe-row { padding: var(--ds-section-gap) 0 calc(var(--ds-section-gap) / 2); }
main#main-content nav.pagination { margin-top: calc(var(--ds-section-gap) / 2) !important; margin-bottom: calc(var(--ds-section-gap) / 2); }
/* About: content next to a grey heading band is 48px away on both sides (was 20px) */
.bell-about-section-body__inner { padding-top: var(--ds-section-gap); padding-bottom: var(--ds-section-gap); }
/* Heading bands (grey strip with title) */
.bell-about-heading-row, .pd-section-header, .uk-category-heading,
.bell-careers-section-header {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

/* ---- Tables: grey header band, 12px 16px cells ---- */
main#main-content table th, main#main-content table td { padding: 12px 16px; }
main#main-content table th { background: #f0f0f0; font-weight: 600; text-align: left; }

/* ---- Product detail: heading bands sit 48px below the previous block, 64px after the hero ---- */
.pd-section-header { margin-top: var(--ds-section-gap); }
.pd-hero + .pd-section-header { margin-top: var(--ds-hero-gap); }

/* ---- CTA band: 48px 40px ---- */
.hs-cta {
  padding: var(--ds-section-gap) var(--ds-gutter);
}

/* Tinted band holding cards: cards carry their own 20px padding, so 32px here keeps the visual gap near 48px */
.sd-features { padding-top: var(--space-7); padding-bottom: var(--space-7); }

/* ---- Buttons: one height (15px + 20px line + 15px = 50px), 14px/600, square ---- */
main#main-content .na-subscribe-btn, main#main-content .bell-careers-nav-btn, main#main-content .bell-careers-cta-btn, main#main-content .gp-btn-dropdown__trigger,
main#main-content .bell-about-nav-btn, main#main-content .pd-nav__btn, main#main-content .bell-btn, main#main-content .bell-btn-submit, main#main-content .bell-contact-submit, main#main-content .pd-btn {
  font-size: 14px !important; /* group.css forces button font-size with !important */
  font-weight: 600;
  line-height: 20px;
  padding: 15px 20px;
  border-radius: 0;
}
.gp-btn-dropdown__trigger { padding-top: 15px; padding-bottom: 15px; }

/* ---- Spacing pass 2 ---- */
/* Home: carousel wrapper already carries 48px at the bottom; don't double it */
.uk-optimise { padding-bottom: 0; }
/* Product detail: sections own their 48px padding, so a band that follows a section needs no extra margin */
.pd-section + .pd-section-header { margin-top: 0; }
.pd-cta { padding-top: 0; padding-bottom: 0; }
.pd-cta__headline { margin-top: 0; }
/* Careers intro blocks match the About page rhythm */
.bell-careers-intro, .bell-careers-nav-wrapper {
  padding-top: calc(var(--ds-section-gap) / 2);
  padding-bottom: calc(var(--ds-section-gap) / 2);
}

/* ---- Parts & Service child pages (service-detail + landing): 48px between every section/asset ----
   Plain sections carry 24px top and bottom (= 48 between), grey bands sit 24px off their neighbours
   (margin) and hold their content 48px from the band edge, title bars sit 48px from what is above
   and below. Text blocks inside one section stay 24px apart. */
.bell-about-heading-row + .sd-intro, .bell-about-heading-row + .ps-intro { padding-top: var(--ds-section-gap); }
.sd-intro__video { margin-top: var(--ds-section-gap); }
.sd-intro__contact { margin-top: calc(var(--ds-section-gap) / 2); }
.sd-intro-logo { padding-top: calc(var(--ds-section-gap) / 2); padding-bottom: calc(var(--ds-section-gap) / 2); }
.sd-features {
  margin: calc(var(--ds-section-gap) / 2) 0;
  padding-top: var(--ds-section-gap);
  padding-bottom: var(--ds-section-gap);
}
.sd-features__heading { margin-bottom: calc(var(--ds-section-gap) / 2); }
.sd-features-grid, .sd-features-grid--horizontal { gap: calc(var(--ds-section-gap) / 2); }
.sd-faq { padding-top: 0; padding-bottom: calc(var(--ds-section-gap) / 2); }
/* about.css pulls any first-child title bar up 30px/90px (hero bleed) with !important; these bars are not under a hero, so beat it with the id */
main#main-content .sd-faq > .bell-about-heading-row:first-child { margin-top: calc(var(--ds-section-gap) / 2) !important; margin-bottom: var(--ds-section-gap); }
main#main-content .sd-features + .sd-faq > .bell-about-heading-row:first-child { margin-top: var(--ds-section-gap) !important; }
.sd-related { padding-bottom: calc(var(--ds-section-gap) / 2); }
main#main-content .sd-related > .bell-about-heading-row:first-child { margin-top: calc(var(--ds-section-gap) / 2) !important; }
main#main-content .sd-features + .sd-related > .bell-about-heading-row:first-child { margin-top: var(--ds-section-gap) !important; }
.sd-related__grid-wrap { padding-top: var(--ds-section-gap); }
.ps-cards-section { padding-top: calc(var(--ds-section-gap) / 2); padding-bottom: calc(var(--ds-section-gap) / 2); }
.ps-cards-grid { gap: calc(var(--ds-section-gap) / 2); }

/* ---- Second sweep: same 48px rhythm on Market Data/SENS, Bulletin, legal + Dealerships, Careers, News article ---- */
.bell-breadcrumbs + .section, .bell-about-heading-row + .section { padding-top: var(--ds-section-gap); }
/* market-data.css loads after this file, so these carry the id */
main#main-content .bell-md-section-body { padding-top: var(--ds-section-gap); padding-bottom: var(--ds-section-gap); }
main#main-content .bell-breadcrumbs + .bell-md-section-header { margin-top: var(--ds-section-gap); }
main#main-content .bell-md-stats-wrap { margin-top: calc(var(--ds-section-gap) / 2); }
main#main-content .bell-md-stats-table { margin-bottom: 0; }
main#main-content .bell-md-sens-iframe { padding-top: 0; padding-bottom: 0; }
main#main-content .dealerships-list { gap: calc(var(--ds-section-gap) / 2); } /* dealerships.css loads after this file */
main#main-content .bell-about-heading-row + .section { padding-top: var(--ds-section-gap); }
main#main-content #dealerships-map { margin-bottom: var(--ds-section-gap); }
.dealerships-filters .form-group { margin-bottom: calc(var(--ds-section-gap) / 2); }
.na-title { padding-bottom: 12px; }
.na-excerpt { padding-top: 12px; }
.bulletin-top { padding-top: var(--ds-section-gap); }
.bulletin-archive { padding-top: calc(var(--ds-section-gap) / 2); padding-bottom: calc(var(--ds-section-gap) / 2); }
.bell-careers-section-actions { padding-top: calc(var(--ds-section-gap) / 2); padding-bottom: 0; }
.bell-breadcrumbs + .na-title { padding-top: var(--ds-section-gap); }
.na-excerpt { padding-bottom: calc(var(--ds-section-gap) / 2); }
.na-hero-img { padding-top: calc(var(--ds-section-gap) / 2); padding-bottom: calc(var(--ds-section-gap) / 2); }
.na-body { padding-top: calc(var(--ds-section-gap) / 2); padding-bottom: calc(var(--ds-section-gap) / 2); }
.bell-about-back-top-row { padding-top: calc(var(--ds-section-gap) / 2); padding-bottom: calc(var(--ds-section-gap) / 2); }

/* ---- Mobile hamburger: the icon contrasts with the button, whatever the site's primary colour ----
   The button background is the site primary (black on UK / South Africa, green on F&A, yellow on the
   rest) but the icon colour came from an Elementor leftover (--e-global-color-1c1e247, near-black),
   so it vanished on black and green. oklch lightness picks white on dark and black on light;
   browsers without relative colours keep the old colour. The hover colour rule is not touched. */
@supports (color: oklch(from red l c h)) {
  html .bell-header .bell-element div.bell-menu-toggle svg.bell-icon-svg {
    fill: oklch(from var(--color-primary, #FFC200) clamp(0, calc((0.68 - l) * 1000), 1) 0 0);
  }
}