/*
 * 2026 rebrand: navy/blue palette to match the DaVinci Signs logo.
 *
 * Loaded after dist/styles/main.css (see app/setup.php). This is plain CSS on
 * purpose: the Sage 9 build (node-sass 4.9 + webpack 3) needs Node <= 10 and
 * dist/ is not reproducible from this checkout, so the palette is overridden
 * here instead of in _variables.scss.
 *
 * Logo colors: navy #324578, blue #4783c8, outline cyan #bef0fe.
 */

:root {
  --sw-navy-deep: #16203a;
  --sw-navy: #1f2b4d;
  --sw-navy-logo: #324578;
  --sw-blue: #4783c8;
  --sw-blue-btn: #3a6fae;
  --sw-blue-btn-hover: #2f5c93;
  --sw-cyan: #bef0fe;
  --sw-text: #f4f7fb;
  --sw-ink: #2a3142;
  --sw-soft: #f1f4f8;
  --sw-silver: #dde2e9;
  --sw-silver-edge: #c5ccd6;
}

/* ---- Page: dark wood texture -> light ----------------------------------- */
/* Ernie (2026-10-15, Accelo #1015912) wanted the logo's dark hand plane to
   stand out, and a plaque behind it read as a box. So the header and the
   page are light, with navy kept as the accent: the strapline, the phone
   hero strip and the copyright bar. Photo bands keep their white text. */

html,
body {
  background: #fff none !important;
}

html,
body,
p,
li,
a,
.table,
.contact-page .contact-form .gform_wrapper ul.gform_fields label,
.contact-page .contact-card .phone,
.contact-page .contact-card .phone:hover,
.search-content p a:first-of-type,
.archive-gallery .view-text span {
  color: var(--sw-ink);
}

h1, .h1,
h2, .h2,
h3, .h3,
h4,
h5 {
  color: var(--sw-navy);
}

main a:not(.btn) {
  color: var(--sw-blue-btn);
}

a:hover,
a:focus,
main a:not(.btn):hover,
.footer .footer-nav a:hover,
.footer .contact-info .phone:hover,
.archive-gallery .view-text:hover span,
.archive-gallery .view-text:hover h3 {
  color: var(--sw-blue-btn-hover);
}

/* The slide-out phone menu and dropdowns stay dark with white text. */
.dropdown-menu,
.sideNav a,
.sideNav span {
  color: var(--sw-text);
}

/* Text over photos and on navy stays white. */
.c-bg-image,
.c-bg-image h1, .c-bg-image h2, .c-bg-image h3,
.c-bg-image p, .c-bg-image li, .c-bg-image span,
.strapline, .strapline p, .strapline a,
.hero-content, .hero-content h1, .hero-content .hero-title,
.hero-content span, .hero-content p,
.prefooter-content, .prefooter-content h1, .prefooter-content h2,
.prefooter-content span, .prefooter-content p,
.services-panel .service-content, .services-panel .service-content h2,
.services-panel .service-content h3, .services-panel .service-content p,
.testimonials-panel, .testimonials-panel p, .testimonials-panel h2 {
  color: var(--sw-text);
}

/* The caption boxes over the photos (and, on phones, the strips under them)
   used a dark wood texture; navy matches the strapline and the logo. */
.hero-content,
.prefooter-content,
.services-panel .service-content,
.services-panel .even .service-content,
.testimonials-panel,
#modal .modal-content {
  background-image: none;
  background-color: var(--sw-navy);
}

.features-panel {
  background: var(--sw-soft) none !important;
}

.contact-page .contact-form,
.contact-page .contact-card {
  background: var(--sw-soft);
  border: 1px solid var(--sw-silver);
}

.gform_wrapper input:not([type="submit"]):not([type="button"]),
.gform_wrapper textarea,
.gform_wrapper select {
  background: #fff;
  color: var(--sw-ink);
  border: 1px solid var(--sw-silver-edge);
}

.footer {
  background: var(--sw-soft) none !important;
  border-top: 3px solid var(--sw-blue);
}

.footer,
.footer p,
.footer span,
.footer li,
.footer .footer-nav a,
.footer .contact-info .phone {
  color: var(--sw-navy);
}

.copyright {
  background: var(--sw-navy);
}

.copyright,
.copyright p,
.copyright a,
.copyright span {
  color: var(--sw-text);
}

.banner a,
.banner .fa,
.nav-top .phone,
.nav-top .phone:hover {
  color: var(--sw-navy);
}

.banner a:hover,
.banner [aria-current]:not([aria-current="false"]) {
  color: var(--sw-blue-btn);
}

#skip-navigation,
#modal .modal-title,
#modal .close,
.text-primary,
.btn-link,
.page-link,
.contact-page .contact-form .gform_wrapper ul.gform_fields .gfield_required {
  color: var(--sw-blue) !important;
}

/* ---- Header bars: wood grain -> light silver -------------------------- */

.nav-top {
  background-image: none;
  background-color: #f6f8fa;
}

.nav-primary {
  background-image: linear-gradient(180deg, #f1f4f7 0%, #dfe4ea 100%);
  border-top-color: var(--sw-blue);
  border-bottom-color: var(--sw-blue);
}

.strapline {
  background-image: none !important;
  background-color: var(--sw-navy);
  border-top-color: var(--sw-blue);
  border-bottom-color: var(--sw-blue);
}

/* The new logo is 800px wide; the theme let it render at natural size on
   desktop (width: auto), so pin the display widths. On the light header and
   footer the logo needs no glow or backing.

   Ernie (2026-10-16) wanted the blue line between the two header bars to
   clear the top of the hand plane rather than cut through it. So the logo
   sits wholly in the lower bar: the top bar is slimmer on desktop, the logo
   starts just under the line, and the lower bar is tall enough to hold it. */
.header-logo {
  top: 52px;
  width: 170px;
}

.nav-primary {
  min-height: 92px;
}

@media (min-width: 768px) {
  .header-logo {
    top: 52px;
    width: 200px;
  }

  .nav-primary {
    min-height: 106px;
  }
}

@media (min-width: 1200px) {
  .nav-top {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .header-logo {
    top: 48px;
    width: 270px;
  }

  .nav-primary {
    min-height: 136px;
  }
}

.footer .footer-logo {
  width: 326px;
  max-width: 100%;
  height: auto;
}

.hamburger span,
.hamburger span::before,
.hamburger span::after,
.hamburger.is-active span::before,
.hamburger.is-active span::after {
  background-color: var(--sw-navy);
}

/* ---- Buttons and accents: gold -> blue -------------------------------- */

.btn-primary,
.gform_wrapper .gform_footer input[type=submit],
.gform_wrapper .gform_footer button[type=submit],
.contact-page .contact-form .gform_wrapper .gform_footer input[type=submit],
.contact-page .contact-form .gform_wrapper .gform_footer button[type=submit],
.search-submit,
#modal .btn-secondary,
.comment-form input[type="submit"] {
  background-color: var(--sw-blue-btn);
  border-color: var(--sw-blue-btn);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.gform_wrapper .gform_footer input[type=submit]:hover,
.gform_wrapper .gform_footer button[type=submit]:hover,
.contact-page .contact-form .gform_wrapper .gform_footer input[type=submit]:hover,
.contact-page .contact-form .gform_wrapper .gform_footer button[type=submit]:hover,
.search-submit:hover,
#modal .btn-secondary:hover,
.comment-form input[type="submit"]:hover {
  background-color: var(--sw-blue-btn-hover);
  border-color: var(--sw-blue-btn-hover);
  color: #fff;
}

.btn-outline-primary {
  color: var(--sw-blue);
  border-color: var(--sw-blue);
}

.btn-outline-primary:hover {
  background-color: var(--sw-blue);
  border-color: var(--sw-blue);
}

a.scrollup {
  background-color: rgba(58, 111, 174, 0.8);
  border-color: var(--sw-blue);
}

a.scrollup:hover {
  background-color: var(--sw-blue-btn-hover);
}

.dropdown-item.active,
.dropdown-item:active,
.nav-pills .nav-link.active,
.page-item.active .page-link,
.badge-primary,
.progress-bar,
.list-group-item.active,
.bg-primary,
.project-gallery .gallery-image::after,
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--sw-blue) !important;
  border-color: var(--sw-blue) !important;
}

.border-primary {
  border-color: var(--sw-blue) !important;
}

.testimonials-panel .slider-nav .slick-dots li.slick-active button {
  border-color: var(--sw-blue);
}

.testimonials-panel .slider-nav .slick-dots li.slick-active button::before {
  background-color: var(--sw-blue);
}

.archive-gallery .archive-gallery-image {
  border-color: var(--sw-navy-logo);
}

/* ---- Feature icons: wood medallions -> navy medallions ---------------- */
/* The icons are wood-textured PNGs uploaded through ACF, with their detail in
   the texture rather than in transparency, so a flat white silhouette loses
   it. Tinting the wood blue keeps every icon without needing new artwork. */

.features-panel .icon,
.testimonials-panel .icon {
  background-color: var(--sw-navy);
  border-color: var(--sw-blue);
}

.features-panel .icon::before,
.testimonials-panel .icon::before {
  background-image: none;
  background-color: var(--sw-navy);
}

.features-panel .icon img,
.testimonials-panel .icon img {
  position: relative;
  filter: grayscale(1) sepia(1) hue-rotate(180deg) saturate(2.2) brightness(1.25);
}