/* ==========================================================================
   HydroClean Solutions V2 — global design tokens
   Single source of truth for color/type. Everything else (section <style>
   blocks, legacy Bootstrap-theme classes) should read from these variables
   instead of hardcoding hex.
   ========================================================================== */

:root {
  /* Brand anchor — kept from the logo (navy → olive gradient droplet) */
  --color-navy:         #0A1554;
  --color-navy-dark:    #060B33;
  --color-olive:        #7E9718;
  --color-olive-light:  #9FBD1F;

  /* New accent — the reference site's corporate-blue, water-associated */
  --color-blue:         #0EA5E9;
  --color-blue-dark:    #0284C7;
  --color-blue-tint:    rgba(14, 165, 233, 0.10);

  /* Neutrals */
  --color-text:         #1E293B;
  --color-text-muted:   #64748B;
  --color-bg:           #FFFFFF;
  --color-bg-alt:       #F8FAFC;
  --color-border:       #E2E8F0;

  /* Typography — Plus Jakarta Sans is already @import'd in plugins.css but
     was never actually used anywhere; this makes it the real global font. */
  --font-base: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-card: 0 4px 24px rgba(10, 21, 84, 0.08);
  --shadow-card-hover: 0 12px 32px rgba(10, 21, 84, 0.14);
}

body {
  font-family: var(--font-base);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base);
}

/* ---- Legacy Bootstrap-theme utility overrides -----------------------------
   The header/footer/banner/team/address/extra files lean on these classes
   (from the original purchased theme) rather than their own <style> blocks.
   Repointing them here recolors that whole legacy layer in one place. */

.bg-primary   { background-color: var(--color-blue) !important; }
.bg-secondary { background-color: var(--color-navy) !important; }
.text-primary { color: var(--color-blue) !important; }
.text-secondary { color: var(--color-navy) !important; }

.butn-style4 {
  background-color: var(--color-blue) !important;
  border-color: var(--color-blue) !important;
  color: #FFFFFF !important;
}
.butn-style4:hover {
  background-color: var(--color-blue-dark) !important;
  border-color: var(--color-blue-dark) !important;
}

.footer-style01 { background-color: var(--color-navy) !important; }

/* The legacy theme pulls hero/page-title sections up underneath the header
   via a negative margin, assuming a permanently transparent nav overlaying
   the image. This site's header is a normal solid bar instead, so sections
   should start in their own row right below it, not tucked underneath. */
.top-position1,
.top-position {
  margin-top: 0 !important;
}

/* Hero banner: shorter than the legacy theme's full-viewport-height slides,
   and a smaller title so the shorter slides don't feel cramped. */
.hero-banner-height {
  min-height: 60vh;
}
@media (max-width: 767px) {
  .hero-banner-height {
    min-height: 460px;
  }
}

.hero-title {
  font-size: calc(1.3rem + 1.5vw);
  font-weight: 800;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .hero-title {
    font-size: 2.75rem;
  }
}