/* ============================================================================
 * vt-brand.css — brand blue alignment with /work
 * ----------------------------------------------------------------------------
 * WHAT THIS DOES
 * The customer site and the /work app were carrying two different brand blues:
 *
 *     customer   #499ACA   hsl(202, 55%, 54%)   <- a sky/cyan-leaning blue
 *     work       #346cb0   hsl(213, 54%, 45%)   <- the real brand blue
 *
 * Same saturation, but 11 degrees of hue and 9 points of lightness apart — far
 * enough that a user crossing from vertask.com into the app sees the chrome
 * change colour. This file retires #499ACA and everything derived from it, and
 * adopts the /work palette (custom.min.css --vt-blue / --vt-blue-dk /
 * --vt-blue-lt) as the single brand blue across both properties.
 *
 *     #499ACA          -> #346cb0   brand blue          (work --vt-blue)
 *     #3a7da6          -> #2a568d   dark / hover        (work --vt-blue-dk)
 *     #5bb8e8          -> #3287e2   gradient light stop (derived, see below)
 *     #2980B9          -> #2a568d   link hover
 *     #1a4ae2          -> #2a568d   btn-primary hover   (was off-brand already)
 *     #f2f9fd          -> #eaf1f8   pale table tint     (work --vt-blue-lt)
 *     rgba(73,154,202) -> rgba(52,108,176)  brand-blue glows and washes
 *
 * #3287e2 is the only value not lifted straight from /work. /work has no
 * gradients at all — it is flat #346cb0 everywhere — so the light stop of
 * --v-gradient has no counterpart to copy. It is the old stop reproduced as an
 * HSL offset from the new base: #499ACA -> #5bb8e8 is H-2 S+21 L+9, and the
 * same offset applied to #346cb0 lands on hsl(211, 75%, 54%) = #3287e2. The
 * gradient therefore keeps exactly the contrast and direction it was designed
 * with, in the new hue.
 *
 * WHY THIS IS ITS OWN FILE rather than part of vt-overhaul.css
 * Two reasons, both structural.
 *
 * 1. Most of the old blue is hardcoded in css/styles.css (24 literals) and
 *    css/main.css (1), and NEITHER FILE IS IN THIS WORKING COPY — the same
 *    problem vt-overhaul.css was created to work around. So the recolour has
 *    to be an override layer regardless. Loaded last, it wins on source order.
 * 2. vt-overhaul.css bans !important in its own header, and one rule below
 *    needs it: styles.css sets the checked-checkbox fill with !important, and
 *    nothing but !important beats !important. Putting that here keeps the
 *    overhaul file's invariant intact.
 *
 * Everything below is a colour declaration. No layout, no spacing, no new
 * selectors — deleting this file and its <link> restores the old blue exactly
 * and changes nothing else.
 *
 * The literals inside this working copy (vt-overhaul.css, _header.php,
 * page-compare.php, page-vs.php, page-register.php, index-pricing-section.php)
 * were edited in place instead, so they are not repeated here.
 *
 * WHAT IS DELIBERATELY NOT RECOLOURED
 *   .google-button           #286efa / #0f5df9 / #0551ea — Google's own brand
 *                            blue on a Google sign-in button. Must not move.
 *   #33475c                  navy-slate body and nav text, not a brand blue.
 *   rgba(47, 91, 231, ~0.1)  the stock template indigo, but only ever as a
 *                            drop-shadow or a hairline at <=0.2 alpha, where it
 *                            reads as grey. Section 3 takes the handful of
 *                            places that same indigo is used as a colour you
 *                            can actually see; the shadows are left alone.
 *
 * Sections:
 *   1. Tokens
 *   2. Brand blue in css/styles.css and css/main.css
 *   3. Template indigo used as a visible colour
 *   4. Bootstrap's own #007bff, where it reaches the page
 * ========================================================================== */
/* -- 1. Tokens --------------------------------------------------------------
   styles.css:2332 declares these on :root. Redeclaring them here — same
   selector, same specificity, later file — replaces them for every
   var(--v-primary) / var(--v-gradient) reference in the PHP templates without
   touching any of those call sites. This block alone covers the marketing
   pages built on the --v-* design system (insight, integrations, pricing,
   templates, vertical, lp). Section 2 covers the older styles.css chrome that
   predates the tokens and hardcodes the hex. */
:root{
  --v-primary:          #346cb0;
  --v-primary-dark:     #2a568d;
  --v-accent:           #346cb0;
  --v-gradient:         linear-gradient(135deg, #2a568d 0%, #3287e2 100%);
  --v-gradient-reverse: linear-gradient(135deg, #3287e2 0%, #2a568d 100%);
}
/* -- 2. Brand blue in css/styles.css and css/main.css ------------------------
   One override per hardcoded #499ACA, in source order of the file it comes
   from, so this section can be diffed against styles.css directly. */
/* styles.css:69 — every unstyled link on the site. */
a{ color: #346cb0; }
/* styles.css:73 — was #2980B9, a fourth blue. Now the work hover. */
a:hover{ color: #2a568d; }
/* styles.css:243 — magnific-popup close button. */
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close{ color: #346cb0; }
/* styles.css:288 / :316 — utility fills. */
.u-bg--dark{ background: #346cb0; }
.u-bg--primary{ background: #346cb0; }
/* styles.css:311 — #153bb5 is the template's stock indigo top stop and is left
   as it was; only the brand-blue bottom stop moves. Both the prefixed and
   unprefixed declarations are restated because the original ships both. */
.u-bg-gradient--primary{
  background-image: -webkit-linear-gradient(270deg, #153bb5 -10%, #346cb0 100%);
  background-image: linear-gradient(180deg, #153bb5 -10%, #346cb0 100%);
}
/* styles.css:460 — the checked state of a custom checkbox. The only !important
   in this file, and only because the source declaration carries one. */
.custom-checkbox .custom-checkbox--input[type="checkbox"]:checked ~ .custom-checkbox--label .custom-checkbox--faux,
.custom-checkbox--label + .custom-checkbox--faux{
  border-color: #346cb0 !important;
  background:   #346cb0 !important;
}
/* styles.css:487 — the tick glyph in a check list. */
.list-check--item:before{ color: #346cb0; }
/* styles.css:607 — circular feature icons. */
.u-icon--primary{ color: #346cb0; }
/* styles.css:1257 — preloader ripple. */
#loading .ripple4{ background-color: #346cb0; }
/* styles.css:1309 — the primary button, the most-seen blue on the site.
   Its hover was #1a4ae2, a vivid indigo that did not belong to either palette;
   it now takes --vt-blue-dk, which is what /work uses for the same state. */
.btn-primary{
  background:   #346cb0;
  border-color: #346cb0;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
  background:   #2a568d;
  border-color: #2a568d;
}
/* styles.css:1322 / :1338 — outline buttons. */
.btn-outline{
  color:  #346cb0;
  border: 2px solid #346cb0;
}
.btn-outline--dark{ border-color: #346cb0; }
/* main.css:17 and styles.css:1347 — .btn-link. main.css loads after styles.css
   and already won the base colour, so both files' values are restated here to
   keep the pair consistent whichever one is edited later. */
.btn-link{ color: #346cb0; }
.btn-link:hover{ color: #2a568d; }
/* styles.css:1591 — hamburger bars in the mobile nav. */
.menu-icon__bar{ background: #346cb0; }
/* styles.css:1632 — hero band. */
.intro{ background: #346cb0; }
/* styles.css:1694 / :1736 — pricing switch and the highlighted tier. */
.price-plan-switch .nav-pills .nav-link.active{ background: #346cb0; }
.pricing-tier.active{ background: #346cb0; }
/* styles.css:2021 — integration card hover border. */
.integration-card:hover{ border-color: #346cb0; }
/* styles.css:2368, :2373, :2505, :2561 — the four places the brand blue is
   written as an rgba triple rather than a hex, so they do not turn up in a
   search for "499ACA". 73 154 202 IS #499ACA; it becomes 52 108 176.
   .hero-section::before is the wash behind every hero on the site and
   .btn-cta is the primary call to action, so both are worth getting right
   even at these alphas. Geometry is restated verbatim; only the colour moves. */
.btn-cta{ box-shadow: 0 4px 15px rgba(52, 108, 176, 0.3); }
.btn-cta:hover{ box-shadow: 0 6px 25px rgba(52, 108, 176, 0.4); }
.hero-section::before{
  background: radial-gradient(circle, rgba(52, 108, 176, 0.08) 0%, transparent 60%);
}
.feature-media-wrapper .play-overlay{ box-shadow: 0 4px 20px rgba(52, 108, 176, 0.4); }
/* -- 3. Template indigo used as a visible colour -----------------------------
   rgba(47, 91, 231, a) — #2F5BE7 — is left over from the purchased template.
   Nearly all of its uses are drop-shadows at 0.1–0.2 alpha, which read as grey
   and are not touched. These are the exceptions: places the same indigo is a
   fill, a focus ring or type, where it sat visibly warm of the brand blue. The
   alphas are unchanged; only the RGB triple moves to the new base, 52 108 176. */
/* Focus ring on every form field, and the resting checkbox border. */
.form-control:focus,
.form-control:active{ border-color: rgba(52, 108, 176, 0.5); }
.custom-checkbox .custom-checkbox--faux{ border: 1px solid rgba(52, 108, 176, 0.5); }
/* Tinted disc behind a feature icon, and dropdown row hover. */
.u-icon--primary{ background: rgba(52, 108, 176, 0.1); }
.dropdown-menu .dropdown-item:hover{ background: rgba(52, 108, 176, 0.1); }
/* Type set in the indigo at readable alpha. */
.media-footer--tagline{ color: rgba(52, 108, 176, 0.6); }
.plan-item:before{ color: rgba(52, 108, 176, 0.7); }
/* Preloader ripple that pairs with .ripple4 above. */
#loading .ripple3{ background-color: rgba(52, 108, 176, 0.6); }
/* -- 4. Bootstrap's own #007bff, where it reaches the page -------------------
   css/bootstrap.min.css is stock Bootstrap 4 with $primary left at its default
   #007bff, and styles.css only ever restyled .btn-primary — so any OTHER
   -primary utility renders in Bootstrap blue, a fifth blue and the furthest
   from brand of the lot. Two are in the markup today and both are visible:
     .btn-outline-primary   the "Get Started Free" CTA on the Free plan card
                            (includes/index-pricing-section.php:48), sitting
                            directly beside the brand-blue Pro CTA
     .custom-control-input  the newsletter opt-in checkbox
                            (page-register.php:174)
   Only those two families are overridden. The rest of Bootstrap's -primary set
   (.text-primary, .bg-primary, .badge-primary, .alert-primary, .table-primary,
   .page-link …) is unused in this tree; if one is introduced later it will show
   up as #007bff and wants adding here rather than working around.
   Each declaration below mirrors a specific Bootstrap rule, at equal or higher
   specificity, and changes nothing but the colour. */
.btn-outline-primary{
  color:        #346cb0;
  border-color: #346cb0;
}
.btn-outline-primary:hover{
  color:            #fff;
  background-color: #346cb0;
  border-color:     #346cb0;
}
.btn-outline-primary.focus,
.btn-outline-primary:focus{ box-shadow: 0 0 0 0.2rem rgba(52, 108, 176, 0.5); }
.btn-outline-primary.disabled,
.btn-outline-primary:disabled{ color: #346cb0; }
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.show > .btn-outline-primary.dropdown-toggle{
  color:            #fff;
  background-color: #346cb0;
  border-color:     #346cb0;
}
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus{
  box-shadow: 0 0 0 0.2rem rgba(52, 108, 176, 0.5);
}
.custom-control-input:checked ~ .custom-control-label::before{
  border-color:     #346cb0;
  background-color: #346cb0;
}
.custom-control-input:focus ~ .custom-control-label::before{
  box-shadow: 0 0 0 0.2rem rgba(52, 108, 176, 0.25);
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before{
  border-color:     #346cb0;
  background-color: #346cb0;
}
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before,
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before{
  background-color: rgba(52, 108, 176, 0.5);
}