/* Workefy brand — loaded AFTER webflow.css */

:root {
  /* Identity */
  --brand-primary: #3469b2;
  --brand-secondary: #252860;
  --brand-button: #5ba3e8; /* light blue CTAs */
  --brand-primary-rgb: 52, 105, 178;
  --brand-secondary-rgb: 37, 40, 96;
  --brand-button-rgb: 91, 163, 232;
  --brand-primary-soft: #8fafdb;
  --brand-primary-wash: #e8f0f8;

  /* Supporting accents */
  --brand-accent: #f2a93b;
  --brand-accent-hover: #d98f22;
  --brand-accent-ink: #b45309;
  --brand-accent-wash: rgba(242, 169, 59, 0.12);
  --brand-teal: #0d9488;
  --brand-teal-ink: #0f766e;
  --brand-teal-wash: rgba(13, 148, 136, 0.1);
  --brand-sky: #38bdf8;
  --brand-success: #10b981;
  --brand-success-ink: #047857;
  --brand-navy-deep: #1a1d45;
  --brand-navy-mid: #2a316e;
  --brand-blue-mid: #2d4f8c;

  /* Surfaces */
  --brand-surface: #f7f9fc;
  --brand-surface-warm: #f4f7fb;
  --brand-stroke: #e2e2e9;
  --brand-gray: #5f6368;
  --brand-ink: #1e293b;
  --brand-white: #ffffff;

  --blue: #5ba3e8 !important;
  --dark-black: #252860 !important;
  --blue-light: #8fafdb !important;
  --blue-light-2: #e8f0f8 !important;
  --green-light: #5ba3e8 !important; /* legacy CTA alias — keep blue */
  --stroke-color-2: #252860 !important;
  --feal-color: #f4f7fb !important;
}

/* Button colors/shape: see workefy-buttons.css (loads last). */
.secondary-btn-text,
.button-hover-color,
.primary-btn-text {
  color: inherit;
}

.footer-nav-link:hover,
.blog-button-text,
a.blog-item-title:hover {
  color: #5ba3e8;
}

/* Hero: navy with blue + amber atmosphere (not a flat single fill) */
.section.hero-v1 {
  background-color: var(--brand-secondary) !important;
  background-image:
    radial-gradient(ellipse 70% 60% at 12% 20%, rgba(91, 163, 232, 0.28), transparent 58%),
    radial-gradient(ellipse 50% 45% at 88% 78%, rgba(242, 169, 59, 0.14), transparent 55%),
    radial-gradient(ellipse 40% 35% at 55% 100%, rgba(13, 148, 136, 0.1), transparent 50%),
    linear-gradient(165deg, var(--brand-navy-deep) 0%, var(--brand-secondary) 52%, var(--brand-navy-mid) 100%) !important;
  padding-top: 108px !important;
}

.section.hero-v1 .hero-v1-title {
  margin-top: 0;
}

@media screen and (max-width: 991px) {
  .section.hero-v1 {
    padding-top: 96px !important;
  }
}

@media screen and (max-width: 767px) {
  .section.hero-v1 {
    padding-top: 84px !important;
  }
}

.section.branch {
  background-image:
    radial-gradient(ellipse 55% 50% at 90% 20%, rgba(242, 169, 59, 0.12), transparent 55%),
    radial-gradient(ellipse 45% 40% at 10% 80%, rgba(13, 148, 136, 0.12), transparent 50%),
    linear-gradient(
      165deg,
      var(--brand-navy-deep) 0%,
      var(--brand-secondary) 55%,
      var(--brand-blue-mid) 100%
    ) !important;
}

/* Process cards: cycle blue → teal → amber accents across a row */
.process-single-wrap:nth-child(3n + 1) {
  background: linear-gradient(155deg, #3469b2 0%, #2a5a9e 100%) !important;
}

.process-single-wrap:nth-child(3n + 2) {
  background: linear-gradient(155deg, #0d9488 0%, #0f766e 100%) !important;
}

.process-single-wrap:nth-child(3n) {
  background: linear-gradient(155deg, #3469b2 0%, #252860 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(242, 169, 59, 0.35);
}

/* Journey / goal icon tiles: staggered supporting colors */
.journey-single-wrap:nth-child(3n + 1) .journey-icon-wrap {
  background-color: var(--brand-primary-wash) !important;
}

.journey-single-wrap:nth-child(3n + 2) .journey-icon-wrap {
  background-color: var(--brand-teal-wash) !important;
}

.journey-single-wrap:nth-child(3n) .journey-icon-wrap {
  background-color: var(--brand-accent-wash) !important;
}

/* Soft section washes — light pages get a cool tint, not pure white flatness */
.section.our-journey,
.section.our-goals,
.section.faq-v1,
.section.features,
.section.pricing {
  background-color: var(--brand-surface-warm);
}

.section.blog,
.section.about {
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(52, 105, 178, 0.06), transparent 55%),
    var(--brand-surface);
}

[style*="c2f52f"],
[style*="C2F52F"] {
  color: #5ba3e8 !important;
}

/* Brand logo — white on dark nav, footer, and auth surfaces */
.navbar .brand-logo-wrap {
  max-width: none;
}

.navbar .brand-logo {
  display: block;
  height: 56px;
  width: auto;
  max-width: 280px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.footer .footer-logo {
  display: block;
  height: 64px;
  width: auto;
  max-width: 300px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.section.user .site-logo,
.section.signin .site-logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

@media screen and (max-width: 767px) {
  .navbar .brand-logo {
    height: 48px;
    max-width: 240px;
  }

  .footer .footer-logo {
    height: 52px;
    max-width: 260px;
  }
}