/* ==========================================================
   Destiny's Clean Services — brand overrides
   Loaded AFTER style.css so these rules win.

   Palette sampled from the logo:
     #00C8D8  bright cyan  (wave + "CLEAN SERVICES")
     #005060  deep teal    (shadows / dark accents)
     #E0E0E0  silver       (wordmark)
   ========================================================== */

:root {
  --theme-color:  #0A93A8;   /* primary — logo teal, readable under white text */
  --theme-color2: #005060;   /* deep teal from the logo */
  --theme-color3: #00C8D8;   /* the logo's signature cyan, for accents */
  --title-color:  #062733;   /* deep teal-navy headings */
  --body-color:   #5F7480;   /* body copy, warmed toward teal */
}

/* ---------- Logo sizing -----------------------------------
   The stock theme mark is a wide 155x40; the Destiny's logo is
   near-square, so constrain by height and let the width follow. */
.header-logo img,
.footer-logo img,
.sidemenu-wrapper .widget-about .about-logo img,
.th-menu-wrapper .mobile-logo img,
.logo-shape img {
  height: 92px;
  width: auto;
  max-width: none;
}

.sticky-wrapper.sticky .header-logo img { height: 68px; }

/* Two marks, picked per surface in the HTML:
     destiny-logo-dark.png  -> light backgrounds (header)
     destiny-logo.png       -> dark backgrounds (footer, side menu, mobile menu)
   so the wordmark never washes out. */
.footer-logo img,
.sidemenu-wrapper .widget-about .about-logo img { height: 104px; }

@media (max-width: 991px) {
  .header-logo img,
  .th-menu-wrapper .mobile-logo img { height: 64px; }
  .sticky-wrapper.sticky .header-logo img { height: 54px; }
  .footer-logo img { height: 84px; }
}
@media (max-width: 575px) {
  .header-logo img,
  .th-menu-wrapper .mobile-logo img { height: 52px; }
  .sticky-wrapper.sticky .header-logo img { height: 46px; }
  .footer-logo img { height: 72px; }
}

/* ---------- header-layout3 (36 inner pages) ---------------
   This layout draws a fixed 300x120 white notch behind the logo and
   positions it with left:-50% of the logo column. The stock mark is
   155x40, so a near-square logo shrinks that column, drags the notch
   right and lets it cover the first menu item. Pin the column back to
   the original width and keep the logo inside the notch's 120px. */
.header-layout3 .header-logo {
  min-width: 155px;
  padding-top: 18px;
}
.header-layout3 .header-logo img { height: 66px; }
.header-layout3 .sticky-wrapper.sticky .header-logo { padding-top: 12px; }
.header-layout3 .sticky-wrapper.sticky .header-logo img { height: 58px; }

@media (max-width: 991px) {
  .header-layout3 .header-logo { min-width: 0; padding-top: 0; }
  .header-layout3 .header-logo img,
  .header-layout3 .sticky-wrapper.sticky .header-logo img { height: 52px; }
}