/* ==========================================================================
   Marwil Safety — brand override (business-card scheme)
   Black + safety yellow #EAB308 + white, Inter.

   Rollout: load LAST on every page, after marwil.css, accessibility.css and
   any inline <style> block:
     <link rel="stylesheet" href="css/brand.css">
   Needs images/marwil-safety-services-white-transparent.png and
   images/marwil-monogram-white-transparent.png next to it.

   It remaps the Tailwind (CDN) blue utilities, marwil.css, accessibility.css
   and the per-page inline fallbacks with `html body` + !important. The only
   markup change a page needs is the header logo <img src> (white logo).

   Contrast rules (WCAG 2.x, computed — see report):
   - Yellow #EAB308 is ONLY a fill (buttons, stripes, badges) or text on
     black/dark (11.0:1 on #000). Never yellow text on white (1.9:1).
   - Text/links on light sections use near-black #111 or dark gold #955805
     (5.7:1 on white, 5.2:1 on gray-100).
   ========================================================================== */

:root {
  --brand-black: #000000;
  --brand-ink: #0a0a0a;          /* dark sections */
  --brand-panel: #171717;        /* panels inside dark sections */
  --brand-yellow: #EAB308;       /* fills + text on dark only */
  --brand-yellow-hover: #CA8A04; /* fill hover */
  --brand-gold: #955805;         /* link/accent text on light: 5.7 white, 5.2 gray-100
                                    (#A16207 was 4.47 on gray-100 -> failed) */
  --brand-gold-hover: #713F12;   /* link hover on white */
  --brand-heading: #111111;
  --brand-tint: #FAFAF9;         /* replaces blue-50 */
  --brand-tint-2: #FEF9C3;       /* replaces blue-100 + hover tints */
  --brand-border: #E7E5E4;       /* replaces blue-100/200 borders */
}

html body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* ---------- Header: black bar, white links, yellow hover/current ---------- */
html body .site-header {
  background: var(--brand-black) !important;
  border-bottom: 4px solid var(--brand-yellow) !important;
  box-shadow: none !important;
}
/* The header <img> itself points at the white transparent logo
   (images/marwil-safety-services-white-transparent.png, same 1993x690 canvas). */
html body .site-header .logo-img { border-radius: 0 !important; }
html body .site-header nav a { color: #ffffff !important; background: transparent !important; }
html body .site-header nav a:hover {
  color: var(--brand-yellow) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
html body .site-header nav a.current-page {
  color: var(--brand-yellow) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 -3px 0 var(--brand-yellow); /* non-colour cue too */
}
html body .site-header button#mobile-menu-button { color: #ffffff !important; }
html body .site-header button#mobile-menu-button:hover { color: var(--brand-yellow) !important; }

/* ---------- Mobile menu ---------- */
html body #mobile-menu {
  background: rgba(0, 0, 0, 0.97) !important;
  border-left: 8px solid var(--brand-yellow);
}
html body #mobile-menu a { color: #ffffff !important; }
html body #mobile-menu a:hover,
html body #mobile-menu a.current-page {
  color: var(--brand-yellow) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}
html body #mobile-menu button { color: #ffffff !important; }

/* ---------- Hero: black with yellow left stripe + faint monogram (card back) ---------- */
html body .hero-section {
  background: var(--brand-black) !important;
  border-left: 12px solid var(--brand-yellow);
  position: relative;
  overflow: hidden;
}
html body .hero-section::after {
  content: "";
  position: absolute;
  right: -90px;
  top: 50%;
  width: 460px;
  height: 460px;
  transform: translateY(-50%);
  background: url("../images/marwil-monogram-white-transparent.png") center / contain no-repeat;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
}
html body .hero-section h1 { color: #ffffff !important; font-weight: 800; letter-spacing: -0.02em; }
html body .hero-section h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  background: var(--brand-yellow);
  margin: 1.25rem 0 0;
}
html body .hero-section .text-center h1::after { margin-left: auto; margin-right: auto; }
html body .hero-section p { color: #E5E5E5 !important; }
html body .hero-section a { color: #ffffff !important; }
html body .hero-section a[href^="tel:"] { color: var(--brand-yellow) !important; }
html body .hero-section a:not(.btn-primary):hover { color: var(--brand-yellow) !important; }
/* Hero ghost button (bg-blue-500/30 + white border) */
html body .bg-blue-500\/30 { background: transparent !important; border-color: #ffffff !important; }
html body .hover\:bg-blue-500\/50:hover { background: rgba(255, 255, 255, 0.12) !important; }
@media (max-width: 767px) {
  html body .hero-section { border-left-width: 8px; }
  html body .hero-section::after { display: none; }
}

/* ---------- Footer ---------- */
html body .site-footer {
  background: var(--brand-black) !important;
  color: #ffffff !important;
  border-top: 4px solid var(--brand-yellow);
}
html body .site-footer p { color: #E5E5E5 !important; }
html body .site-footer a { color: var(--brand-yellow) !important; }
html body .site-footer a:hover { color: #ffffff !important; text-decoration: underline; }

/* ---------- Cookie banner (js/cookie-banner.js, bg-slate-800) ---------- */
html body #cookie-banner {
  background: var(--brand-black) !important;
  border-top: 4px solid var(--brand-yellow) !important;
  color: #ffffff !important;
}

/* ---------- Filled buttons + icon badges: yellow fill, black text ---------- */
html body .btn-primary,
html body .btn-secondary,
html body .hero-section a.btn-primary,
html body .bg-blue-600,
html body a.bg-blue-500, html body button.bg-blue-500,
html body a.bg-blue-700, html body button.bg-blue-700,
html body a.bg-blue-800, html body button.bg-blue-800,
html body form.bg-blue-600 button[type="submit"] {
  background: var(--brand-yellow) !important;
  color: #000000 !important;
}
html body .btn-primary:hover,
html body .btn-secondary:hover,
html body .hover\:bg-blue-500:hover,
html body .hover\:bg-blue-600:hover,
html body .hover\:bg-blue-700:hover,
html body .hover\:bg-blue-800:hover,
html body form.bg-blue-600 button[type="submit"]:hover {
  background: var(--brand-yellow-hover) !important;
  color: #000000 !important;
}

/* ---------- Dark containers (were blue blocks with white text) ---------- */
html body main.bg-blue-500, html body main.bg-blue-600, html body main.bg-blue-700,
html body section.bg-blue-500, html body section.bg-blue-600,
html body section.bg-blue-700, html body section.bg-blue-800,
html body div.bg-blue-700, html body div.bg-blue-800,
html body .bg-\[\#1e3a5f\],
html body .bg-slate-900 {
  background: var(--brand-ink) !important;
  color: #ffffff !important;
  border-left: 8px solid var(--brand-yellow) !important;
}
html body form.bg-blue-600, html body form.bg-blue-700 {
  background: var(--brand-panel) !important;
  color: #ffffff !important;
}
/* Dark gradient blocks (software CTA, thank-you pages) */
html body .from-blue-500, html body .from-blue-600 {
  --tw-gradient-from: #000000 !important;
  border-left: 8px solid var(--brand-yellow) !important;
}
html body .to-blue-700, html body .to-blue-800 { --tw-gradient-to: #262626 !important; }
/* Light gradient (about page) */
html body .from-blue-50 { --tw-gradient-from: var(--brand-tint) !important; }

/* ---------- Light tints ---------- */
html body .bg-blue-50 { background-color: var(--brand-tint) !important; }
html body .bg-blue-100 { background-color: var(--brand-tint-2) !important; }
html body .bg-blue-50.border { border-left: 6px solid var(--brand-yellow) !important; } /* callouts get the card stripe */
html body .hover\:bg-blue-50:hover,
html body .hover\:bg-blue-100:hover { background-color: var(--brand-tint-2) !important; color: #000000 !important; }

/* ---------- Text ---------- */
/* Headings / text that was dark blue -> near-black */
html body .text-blue-700, html body .text-blue-800, html body .text-blue-900 { color: var(--brand-heading) !important; }
/* Accent text + links on white -> dark gold (4.9:1) */
html body .text-blue-500, html body .text-blue-600,
html body a.text-blue-700, html body a.text-blue-800 { color: var(--brand-gold) !important; }
/* Light blues only ever sit on dark blocks -> yellow (links/icons) or light gray (paragraphs) */
html body .text-blue-100, html body .text-blue-200,
html body .text-blue-300, html body .text-blue-400 { color: var(--brand-yellow) !important; }
html body p.text-blue-100, html body p.text-blue-200 { color: #E5E5E5 !important; }
html body .text-blue-200.hover\:text-white:hover,
html body .text-blue-300.hover\:text-white:hover { color: #ffffff !important; }
/* Hover colours */
html body .hover\:text-blue-100:hover,
html body .hover\:text-blue-200:hover,
html body .hover\:text-blue-300:hover { color: var(--brand-yellow) !important; }
html body .hover\:text-blue-500:hover,
html body .hover\:text-blue-600:hover,
html body .hover\:text-blue-700:hover,
html body .hover\:text-blue-800:hover { color: var(--brand-gold-hover) !important; }
html body a:hover { text-decoration-color: var(--brand-yellow); }

/* ---------- Borders ---------- */
html body .border-blue-100, html body .border-blue-200 { border-color: var(--brand-border) !important; }
html body .border-blue-300, html body .border-blue-400, html body .border-blue-500 { border-color: var(--brand-yellow) !important; }
html body .border-blue-600, html body .border-blue-700, html body .border-blue-800 { border-color: #000000 !important; }
/* Outline buttons (border-blue-600 + text-blue-700): black on white, yellow tint on hover */
html body a.border-blue-600, html body button.border-blue-600 { color: var(--brand-heading) !important; }

/* ---------- Section titles + cards ---------- */
html body .pro-section-title { color: var(--brand-heading) !important; }
html body .pro-section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  background: var(--brand-yellow);
  margin: 0.9rem 0 0;
}
html body .text-center .pro-section-title::after,
html body .pro-section-title.text-center::after { margin-left: auto; margin-right: auto; }
html body .pro-card:hover {
  border-color: var(--brand-yellow) !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

/* ---------- Focus (WCAG 2.4.7 / 1.4.11) ----------
   Black 2px ring + yellow 3px outline: black is visible on white (21:1),
   yellow on black (11:1), so one style works on every section. */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body summary:focus-visible,
html body [tabindex]:focus-visible {
  outline: 3px solid var(--brand-yellow) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #000000 !important;
}
/* Tailwind ring utilities */
html body .focus\:ring-blue-500:focus,
html body .focus\:ring-blue-600:focus { --tw-ring-color: var(--brand-gold) !important; }   /* 5.7:1 on white, 3.7:1 on black (non-text >= 3) */
html body .focus\:ring-blue-200:focus,
html body .focus\:ring-blue-300:focus,
html body .focus\:ring-blue-400:focus { --tw-ring-color: var(--brand-yellow) !important; } /* used inside dark blocks */
html body .focus\:ring-offset-blue-700:focus { --tw-ring-offset-color: #000000 !important; }
html body .focus\:border-blue-500:focus { border-color: var(--brand-gold) !important; }

html body .skip-link:focus {
  background: var(--brand-yellow) !important;
  color: #000000 !important;
  box-shadow: 0 0 0 2px #000000 !important;
}

/* ---------- Scrollbar (inline styles used blue thumbs) ---------- */
::-webkit-scrollbar-thumb { background: #525252 !important; }
::-webkit-scrollbar-thumb:hover { background: #262626 !important; }