@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");

/* Controls Logo Dimensions */
.navbar-brand.logo-control img.logo-img {
  max-height: 90px;
}

/* Cali Clean Bins — T4 header and navigation */
#t4-header,
#t4-mainnav {
  background: #dedede url("/images/menu_bg.jpg") center / cover no-repeat;
}

#t4-header > .t4-section-inner {
  padding-top: 0;
  padding-bottom: 0;
}

#t4-header .header-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.75rem 0;
}

#t4-header .navbar-brand {
  position: static;
  margin: 0;
  padding: 0;
}

#t4-header .logo-img,
#t4-header .logo-img-sm {
  width: 203px;
  max-width: 65vw;
  max-height: 90px;
  height: auto;
  object-fit: contain;
}

#t4-mainnav {
  border: 0 !important;
}

#t4-mainnav .navbar-nav.level0 > .nav-item > .nav-link,
#t4-mainnav .dropdown-menu .dropdown-item {
  color: #222;
  font-family: "Fredoka One", Arial, sans-serif;
  font-weight: 400;
}

#t4-mainnav .navbar-nav.level0 > .nav-item > .nav-link {
  display: block;
  padding: 0.65rem 0.5rem;
  border-radius: 4px;
}

#t4-mainnav .navbar-nav.level0 > .nav-item > .nav-link:hover,
#t4-mainnav .navbar-nav.level0 > .nav-item > .nav-link:focus-visible,
#t4-mainnav .navbar-nav.level0 > .active > .nav-link,
#t4-mainnav .navbar-nav.level0 > .show > .nav-link,
#t4-mainnav .dropdown-menu .dropdown-item:hover,
#t4-mainnav .dropdown-menu .dropdown-item:focus-visible {
  background-color: #3fffeb;
  color: #111;
}

#t4-mainnav .t4-offcanvas-toggle,
#t4-mainnav .navbar-toggler {
  color: #222;
}

/* Desktop — centered logo with equal-width menu slots */
@media (min-width: 992px) {
  .t4-content-inner:has(> #t4-header + #t4-mainnav) {
    position: relative;
  }

  #t4-header:has(+ #t4-mainnav) {
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 203px;
    height: 120px;
    background: transparent;
    transform: translateX(-50%);
  }

  #t4-header:has(+ #t4-mainnav) > .t4-section-inner,
  #t4-header:has(+ #t4-mainnav) .header-wrap {
    padding: 0;
  }

  #t4-mainnav .navbar {
    float: none;
    width: 100%;
    min-height: 120px;
  }

  #t4-mainnav .navbar-nav.level0 {
    display: grid;
    grid-template-columns:
      repeat(3, minmax(0, 1fr))
      225px
      repeat(3, minmax(0, 1fr));
    align-items: center;
    width: 100%;
  }

  #t4-mainnav .navbar-nav.level0 > .nav-item {
    justify-self: center;
  }

  #t4-mainnav .navbar-nav.level0 > .nav-item > .nav-link {
    white-space: nowrap;
  }

  /* Home — slot 1 stays empty to balance the centered logo */
  #t4-mainnav .navbar-nav.level0 > [data-id="101"] {
    grid-area: 1 / 2;
  }

  /* Services & Pricing */
  #t4-mainnav .navbar-nav.level0 > [data-id="676"] {
    grid-area: 1 / 3;
  }

  /* Our Process */
  #t4-mainnav .navbar-nav.level0 > [data-id="677"] {
    grid-area: 1 / 5;
  }

  /* My Account */
  #t4-mainnav .navbar-nav.level0 > [data-id="1166"] {
    grid-area: 1 / 6;
  }

  /* Contact */
  #t4-mainnav .navbar-nav.level0 > [data-id="679"] {
    grid-area: 1 / 7;
  }
}

/* Orange footer */
.ccb-footer {
  padding: clamp(1.75rem, 5vw, 3rem) 1rem 1.25rem;
  background: #ff7e00;
  color: #fff;
}

.ccb-footer__inner {
  max-width: 1140px;
  margin: 0 auto;
}

.ccb-footer__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1.5rem;
}

.ccb-footer .ccb-footer__phone {
  margin: 0 0 0.75rem;
  color: #fff;
  font-size: clamp(1.125rem, 2.3vw, 1.5rem);
  font-weight: 700;
  line-height: 1.35;
}

.ccb-footer .ccb-footer__phone a,
.ccb-footer .ccb-footer__credits a {
  color: #000;
  text-decoration: none;
  text-underline-offset: 0.15em;
}

.ccb-footer .ccb-footer__phone a {
  white-space: nowrap;
}

.ccb-footer .ccb-footer__phone a:hover,
.ccb-footer .ccb-footer__credits a:hover {
  text-decoration: underline;
}

.ccb-footer a:focus-visible {
  outline: 2px solid #000;
  outline-offset: 4px;
}

.ccb-footer__logo {
  display: block;
  width: 270px;
  max-width: 100%;
}

.ccb-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Follow Us toolbar */
.ccb-footer .ccb-social,
.ccb-footer .ccb-social__icons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ccb-footer .ccb-social {
  flex-wrap: wrap;
}

.ccb-footer .ccb-social__label {
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ccb-footer .ccb-social__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
}

.ccb-footer .ccb-social__icon i {
  color: inherit;
  font-size: 24px;
  line-height: 1;
}

.ccb-footer .ccb-social__icon.instagram {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}

.ccb-footer .ccb-social__icon.facebook {
  background: #1877f2;
}

.ccb-footer .ccb-social__icon.google {
  background: #fff;
  color: #4285f4;
}

.ccb-footer .ccb-social__icon:hover,
.ccb-footer .ccb-social__icon:focus-visible {
  background: #3fffeb;
  color: #171717;
}

/* Three stacked credit lines */
.ccb-footer .ccb-footer__credits {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.55;
  text-align: left;
}

.ccb-footer .ccb-footer__credits p {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

@media (max-width: 767px) {
  .ccb-footer__main {
    flex-direction: column;
    gap: 1.5rem;
    text-align: center;
  }

  .ccb-footer__logo {
    margin: 0 auto;
  }

  .ccb-footer .ccb-social {
    justify-content: center;
  }

  .ccb-footer .ccb-footer__credits {
    text-align: center;
  }
}

/* Get Started — orange phone callout on any T4 row using this palette */
.t4-section.t4-palette-get_started {
  background-color: #ff7e00;
  padding: 1rem;
}

.t4-section.t4-palette-get_started > .custom > h2 {
  margin: 0;
}

/* Contact — place the map and RSForm module above their backgrounds */
body.item-679 .t4-section > .bg-overlay-image {
  pointer-events: none;
}

body.item-679 .t4-section > .bg-overlay-image + .custom,
body.item-679 .t4-section > .bg-overlay-image + .rsform {
  position: relative;
  z-index: 1;
}

/* Contact — center the form and keep its fields aligned */
body.item-679 .t4-section > .rsform {
  box-sizing: border-box;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) 1rem;
}

body.item-679 .t4-section > .rsform .rsform-input-box,
body.item-679 .t4-section > .rsform .rsform-text-box,
body.item-679 .t4-section > .rsform .rsform-select-box,
body.item-679 .t4-section > .rsform .iti,
body.item-679 .t4-section > .rsform .intl-tel-input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.item-679 .t4-section > .rsform .rsform-block-submit .formBody {
  text-align: center;
}

body.item-679 .t4-section > .rsform .rsform-block-recaptcha [id^="g-recaptcha-"] {
  width: fit-content;
  margin-inline: auto;
}

/* Contact only — hide the empty Main Body row */
body.item-679 #t4-main-body:not(:has(#system-message-container > *)) {
  display: none;
}

/* RSForm — shared field spacing on T4 */
.formResponsive input.rsform-input-box,
.formResponsive textarea.rsform-text-box {
  box-sizing: border-box;
  height: auto;
  min-height: 49px;
  padding-block: 14px;
  font-size: 18px;
  line-height: 1.25;
}

.formResponsive input.rsform-input-box:not(.iti__tel-input),
.formResponsive textarea.rsform-text-box {
  padding-inline: 14px;
}

/* Keep the dropdown's original height and horizontal padding */
.formResponsive select.rsform-select-box {
  box-sizing: border-box;
  height: 46px;
  min-height: 46px;
  padding: 0 12px;
  font-size: 18px;
  line-height: normal;
}

/* RSForm — placeholder text size */
.formResponsive input.rsform-input-box::placeholder,
.formResponsive textarea.rsform-text-box::placeholder {
  font-size: 14px;
}

/* Our Process — remove T4's blue hero padding */
body.item-677 #t4-hero {
  padding-block: 0;
  background: none;
}

/* Our Process — place the full logo above its background */
body.item-677 .t4-section > .bg-overlay-image + .custom:has(img[src$="/Full-Logo.png"]) {
  position: relative;
  z-index: 1;
}