/*
 * 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. */
.header-logo {
  top: 38px;
  width: 180px;
}

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

@media (min-width: 1200px) {
  .header-logo {
    width: 290px;
  }
}

.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);
}