/* 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); align-items: center; flex-wrap: wrap; gap: 8px 24px; }
/* both footer lines on one level (14 Oct 2026, requested): the theme's p + p top margin pushed the right one down */
.footer__bottom .container > p { margin: 0; padding: 0; }

/* ---- 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: #1a7f39; }
  .rs-roles__grid > .rs-role:nth-child(4n+2), .rs-roles__grid > .rs-role:nth-child(4n+3) { background: #173d26; }
}
@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: #1a7f39; }
  .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: #173d26; }
}

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

/* ==========================================================================
   SVS second brand colour — gold (13 Oct 2026, client: "add the second colour" from the logo).
   Green stays the action colour (buttons, links); gold is the accent: labels, highlighted heading words,
   icon chips, top bar, footer headings, secondary buttons. Gold text on white uses the deep shade
   (--gold-700 #8a6414, 5.2:1); the bright logo gold (#e0b858) is used only on dark backgrounds (9:1 on #0c1f14).
   ========================================================================== */
:root {
  --gold-50: #fbf6e8;
  --gold-100: #f6ebcc;
  --gold-300: #ecd193;
  --gold-500: #e0b858;
  --gold-600: #c9a046;
  --gold-700: #8a6414;
  --pink: var(--gold-700);      /* team / tagline title accents (components.css) */
  --pink-2: var(--gold-600);
}

/* section labels ("eyebrows") */
.eyebrow { color: var(--gold-700); }
.eyebrow::before { background: var(--gold-500); height: 3px; }
.section--dark .eyebrow, .hero-v2__eyebrow, .page-hero .eyebrow,
[class*="cta"] [class*="eyebrow"], .site-footer .eyebrow { color: var(--gold-500); }

/* highlighted words in headings: hero slider + page heroes on dark photos */
.hero-v2__title span, .hero-v2__title em, .hero__title em, .hero__title span,
.page-hero__title span, .page-hero__title em { color: var(--gold-500) !important; -webkit-text-fill-color: var(--gold-500); }

/* top bar: forest black with gold icons, green stays on the buttons */
.topbar { background: var(--navy-800); box-shadow: inset 0 -2px 0 var(--gold-600); }
.topbar .icon { color: var(--gold-500); }
.topbar a:hover { color: var(--gold-300); }

/* icon chips */
.feature__icon { background: var(--gold-50); color: var(--gold-700); }
.section--dark .feature__icon { background: rgba(224, 184, 88, 0.14); color: var(--gold-500); }

/* secondary buttons: gold with dark text (10:1) */
.btn--secondary { background: var(--gold-500); color: var(--navy-800); }
.btn--secondary:hover { background: var(--gold-600); color: var(--navy-900); }

/* footer: gold headings and icons */
.footer__title { color: var(--gold-500); }
.footer__contact .icon { color: var(--gold-500); }
.footer__list a:hover, .footer__bottom a:hover { color: var(--gold-300); }

/* scroll progress bar: green → gold */
.site-progress { background: linear-gradient(90deg, var(--crimson-500), var(--gold-500)); }

/* SVS logo sizes (13 Oct 2026, client: footer logo text not visible, bigger header logo) */
.site-footer .brand--plate { background: transparent; padding: 0; }              /* the light logo sits on the dark footer */
.site-footer .brand--plate .brand__logo { height: 4.5rem; max-height: none; }     /* 72px */
@media (min-width: 1024px) {
  .header-bar .brand__logo { height: 3.9rem; max-height: none; }                  /* 62px (was 48) */
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .header-bar .brand__logo { height: 3.1rem; }                                    /* 50px (was 36) */
}
@media (max-width: 1023px) {
  .header-bar .brand__logo { height: 3.4rem; max-height: none; }
}

/* SVS photo focus points (13 Oct 2026, client: "images are not fit"): every crop centres on the face, logo or main
   subject of that photo — banners are ~3:1, cards ~3:2, portraits 4:5. Replaces the earlier blanket top anchoring. */
img[src*="/svs/photos/svs-guard-hero"] { object-position: 72% 18% !important; }
img[src*="/svs/photos/svs-guard-crop"] { object-position: 50% 12% !important; }
img[src*="/svs/photos/svs-guard-full"] { object-position: 50% 14% !important; }
img[src*="/svs/photos/01-guard-entrance"] { object-position: 26% 22% !important; }
img[src*="/svs/photos/02-cctv-operator"] { object-position: 58% 58% !important; }
img[src*="/svs/photos/03-control-room-team"] { object-position: 62% 68% !important; }
img[src*="/svs/photos/04-event-security"] { object-position: 66% 42% !important; }
img[src*="/svs/photos/05-vip-suv"] { object-position: 68% 48% !important; }
img[src*="/svs/photos/06-vip-umbrella"] { object-position: 46% 58% !important; }
img[src*="/svs/photos/07-cameras-building"] { object-position: 52% 42% !important; }
img[src*="/svs/photos/08-cctv-camera"] { object-position: 60% 40% !important; }
img[src*="/svs/photos/09-dubai-night"] { object-position: 35% 62% !important; }
img[src*="/svs/photos/10-hotel-lobby"] { object-position: 50% 55% !important; }
img[src*="/svs/photos/11-mall"] { object-position: 50% 52% !important; }
img[src*="/svs/photos/12-warehouse-night"] { object-position: 42% 50% !important; }
img[src*="/svs/photos/13-security-back"] { object-position: 72% 64% !important; }
img[src*="/svs/photos/14-residential-towers"] { object-position: 50% 45% !important; }
img[src*="/svs/photos/15-hospital"] { object-position: 52% 45% !important; }
img[src*="/svs/photos/16-female-officer"] { object-position: 42% 26% !important; }
img[src*="/svs/photos/17-residential-gate"] { object-position: 48% 52% !important; }
img[src*="/svs/photos/01-guard-entrance-banner"] { object-position: 70% 20% !important; }
img[src*="/svs/photos/16-female-officer-banner"] { object-position: 92% 20% !important; }