/* Small site-wide adjustments on top of the Vite front build (resources/css/front.css), loaded right after it by
   front/layouts/partials/styles.blade.php. Plain file — this copy has no node_modules to rebuild the theme CSS. */

/* Header top bar: larger social icons (29 Sep 2026, requested) — were 1.75rem buttons / 0.95rem icons */
.topbar .social { gap: var(--space-1); }
.topbar .social a { width: 2.25rem; height: 2.25rem; }
.topbar .social .icon { width: 1.25rem; height: 1.25rem; }

/* Floating call / WhatsApp buttons removed site-wide (29 Sep 2026) — the footer bottom bar no longer needs room for them */
.footer__bottom .container { padding-right: var(--gutter); }

/* ---- Home: one equal gap between all sections, 30% smaller than --section-space (29 Sep 2026, requested) ----
   Every visible gap (content ↔ content, content ↔ a coloured band's edge, around the CTA boxes) = --home-gap.
   Two white sections in a row share one gap instead of adding their paddings; full-width colour bands (two-audience
   CTA, image band) still sit flush against coloured neighbours. Scoped to body.home-v2 (the Home page only). */
.home-v2 { --home-gap: calc(var(--section-space) * 0.7); }                     /* ≈ 39–67 px (was 56–96) */
.home-v2 main > .section,
.home-v2 main > .trust { padding-block: var(--home-gap); }
.home-v2 main > .section:not(.section--tint):not(.section--dark) + .section:not(.section--tint):not(.section--dark),
.home-v2 main > .rs-ctabox + .section:not(.section--tint):not(.section--dark) { padding-top: 0; }
.home-v2 main > .section:not(.section--tint):not(.section--dark):has(+ .rs-ctabox) { padding-bottom: 0; }
.home-v2 main > .rs-ctabox { margin-block: var(--home-gap); }
.home-v2 main > .rs-ctabox:last-child { margin-bottom: 0; }

/* ---- Service pages "Works we deliver" / role tiles (ServiceElement style 2): checkerboard colours (29 Sep 2026) ----
   The theme alternated crimson / navy by position, so every row repeated the same pattern and each column was one
   colour. Now each row starts with the other colour: no two tiles of the same colour side by side or one above the
   other — 2 columns below 900 px, 4 columns from 900 px (components.css .rs-roles__grid). */
@media (max-width: 899px) {
  .rs-roles__grid > .rs-role:nth-child(4n+1), .rs-roles__grid > .rs-role:nth-child(4n+4) { background: #96701f; }
  .rs-roles__grid > .rs-role:nth-child(4n+2), .rs-roles__grid > .rs-role:nth-child(4n+3) { background: #0d5c3d; }
}
@media (min-width: 900px) {
  .rs-roles__grid > .rs-role:nth-child(8n+1), .rs-roles__grid > .rs-role:nth-child(8n+3),
  .rs-roles__grid > .rs-role:nth-child(8n+6), .rs-roles__grid > .rs-role:nth-child(8n+8) { background: #96701f; }
  .rs-roles__grid > .rs-role:nth-child(8n+2), .rs-roles__grid > .rs-role:nth-child(8n+4),
  .rs-roles__grid > .rs-role:nth-child(8n+5), .rs-roles__grid > .rs-role:nth-child(8n+7) { background: #0d5c3d; }
}

/* ---- Home headings on one line from 900 px (30 Sep 2026, requested) -------------------------------------------
   "Manpower solutions you can depend on" (services slider): the intro was capped at 46rem and the heading missed by
   3 px — cap lifted. "From enquiry to people on site" (How it works, CoreValueSection style 1 = .cv1) sits in the
   narrow left column of a 5 : 7 split, so it keeps one line by scaling with the screen (≈ 23 px at 1024, 32 px from
   1440) instead of wrapping. Phones keep the normal size and wrap. */
@media (min-width: 900px) {
  .home-v2 .svc2__intro { max-width: none; }
  .home-v2 .svc2__intro h2 { white-space: nowrap; }
  .home-v2 .cv1 .section-head h2 { white-space: nowrap; font-size: min(2.2vw, 1.95rem); }
}

/* ---- Header with the new wide logo (1019 × 245, 30 Sep 2026) ----------------------------------------------------
   The old logo was almost square (82 × 63); the new one is 4× wider than tall. At the theme's fixed 63 px height it
   took ~260 px, the 8 menu items (FAQ now top level, "Why Us") no longer fitted: "Why Us" broke onto two lines (items
   at different heights), the account icon stacked above "Get a Quote" (header 101 px) and the logo was squashed on
   narrower screens. Desktop menu (from 1024 px): logo keeps its shape (48 px high, 36 px up to 1279 px), menu words
   stay on one line, the icon + button stay side by side; 1024–1279 px: slightly tighter menu spacing. */
@media (min-width: 1024px) {
  .header-bar > .brand { flex: none; }
  .header-bar .brand__logo { height: 3rem; width: auto; max-width: none; }
  .header-bar > .cluster { flex: none; flex-wrap: nowrap; }
  .header-bar .nav__list > .nav__item .nav__link { white-space: nowrap; }
}
@media (min-width: 1280px) and (max-width: 1439px) { /* 8 menu items (Careers added, 8 Oct 2026) fit with the two buttons */
  .header-bar .nav__list > .nav__item .nav__link { padding-inline: 0.55rem; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-bar .brand__logo { height: 2.25rem; }
  .header-bar .nav__list > .nav__item .nav__link { padding-inline: 0.45rem; letter-spacing: 0.02em; }
  .header-bar { gap: 0.75rem; }
}

/* ---- "Apply now" button (academy, 7 Oct 2026) --------------------------------------------------------------------
   Gold button next to "Get a Quote" in the header and the mobile menu; links to the Admission page.
   gold-500 with white text = 4.55:1. Lives here (plain CSS, no build) because this folder has no node_modules. */
.btn--gold { background: var(--gold-500); color: var(--n-0); }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--gold-600); color: var(--n-0); box-shadow: var(--shadow-md); }
.nav__footer .btn--gold { margin-top: var(--space-3); }
@media (min-width: 1024px) {
  .header-bar > .cluster .header-cta { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-bar > .cluster .header-cta { padding-inline: 0.9em; }
}
@media (min-width: 1024px) and (max-width: 1199px) { /* 8 menu items: "Enquire now" (also in the menu's footer and the CTA bands) makes room */
  .header-bar > .cluster .header-cta.btn--primary { display: none; }
}

/* ---- Plain page hero (academy, 7 Oct 2026) --------------------------------------------------------------------
   Pages without an uploaded hero image use the green brand hero (the old fallback photos showed manpower crews).
   A soft gold glow and a thin gold rule tie it to the logo; same look as the course hero. */
.page-hero--plain {
  background:
    radial-gradient(50rem 26rem at 88% 0%, rgba(201, 161, 69, 0.22), transparent 60%),
    linear-gradient(120deg, var(--green-900) 0%, var(--green-700) 55%, var(--green-500) 100%);
  border-bottom: 3px solid var(--gold-400);
}
.page-hero--plain::after { background: none; }