/*
Theme Name: TerreBonne Projects
Theme URI: https://www.terre-bonne.com
Author: TerreBonne Projects
Author URI: https://www.terre-bonne.com
Description: Custom WordPress theme for TerreBonne Projects, converted from the original Webflow site. Includes working contact/quote forms that email Office@terre-bonne.com and a native blog ready for REST API automation.
Version: 1.8.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: terrebonne
*/

/* -------------------------------------------------------------------------
   Theme-level overrides (loaded after the Webflow stylesheets).
   Keep this file small — the bulk of the design lives in the three
   Webflow CSS files under /assets/css/.
   ------------------------------------------------------------------------- */

/* Modal: Webflow's IX2 hid this on load via JS. We control it ourselves so
   the GET QUOTE / "Get a free quote" buttons work without Webflow interactions. */
.modal {
  display: none;
}
.modal.is-open {
  display: flex;
}

/* The hero / CTA anchor buttons used "#" hrefs that Webflow opened the modal
   with. Keep the cursor as a pointer. */
a.button-2[href="#"],
a.button-3[href="#"],
.navigation .button-3 {
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   Unify ALL text to the Arial / Helvetica system stack.
   The original site mixed Arial (body/headings) with Libre Franklin (nav) and
   a few Oswald / Tenor Sans / Source Serif headings. This makes them all match.
   Webflow icon glyphs keep their own 'webflow-icons' font (declared !important
   in webflow.css), and the icon classes are deliberately not targeted here.
   ------------------------------------------------------------------------- */
body, p, a, span, li, ul, ol, blockquote, label, figure, figcaption,
em, strong, b, i, small, td, th,
h1, h2, h3, h4, h5, h6,
input, textarea, select, button,
.navigation, .navigation-link, .navigation-link-text, .text-block-5,
.dropdown-3, .dropdown-toggle-3, .w-dropdown, .w-dropdown-link,
.w-button, .w-input, .w-textarea,
.h1, .h2, .h3, .rich-text, .w-richtext,
[class*="heading-"], [class*="paragraph"], [class*="text-block"], [class*="contact-info"] {
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* Hide the spam honeypot field (real users never see it; bots fill it in). */
.tb-hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hover action for every button across the site. Uses filter/translate so it
   works regardless of each button's base colour. */
.w-button,
.button-2,
.button-3,
.submit-button-2,
input[type="submit"] {
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background-color 0.18s ease, opacity 0.18s ease;
}
.w-button:hover,
.button-2:hover,
.button-3:hover,
.submit-button-2:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  filter: brightness(0.92);
}
.w-button:active,
.button-2:active,
.button-3:active,
.submit-button-2:active,
input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* About page: make the three contact boxes (Address / Inquiries / Phone) all
   the same height. The address wraps to two lines, so stretch the row instead
   of centering it. */
.contact-wrapper {
  align-items: stretch;
}
.contact-item {
  height: 100%;
}

/* About page: tighten the intro text so the lines sit closer together
   (was line-height:30px on an 18px paragraph). */
.about-blog .paragraph {
  line-height: 24px;
}
.about-blog {
  padding-top: 0;
}
.about-top {
  padding-bottom: 70px;
}
.about-top + .section-title-big {
  margin-bottom: 6px;
}

/* Los Angeles map strip in the footer. */
.footer-map {
  max-width: 1100px;
  margin: 34px auto 0;
  padding: 0 30px;
}
.footer-map iframe {
  width: 100%;
  height: 240px;
  border: 0;
  display: block;
  border-radius: 6px;
  filter: grayscale(0.35) contrast(1.05);
}
@media (max-width: 767px) {
  .footer-map iframe {
    height: 200px;
  }
}

/* Service-page hero form: keep the inputs and textarea inside the form card. */
.div-block-7 {
  padding: 18px;
  box-sizing: border-box;
}
.div-block-7 .w-input,
.div-block-7 .textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.div-block-7 .textarea {
  min-height: 90px;
  max-height: 160px;
  resize: vertical;
}

/* -------------------------------------------------------------------------
   Navigation hover + Services dropdown.
   These behaviours were driven by Webflow's IX2 interactions (tied to the
   data-w-id attributes), which were removed during the conversion. They are
   reimplemented here in plain CSS/JS so they don't depend on Webflow.
   ------------------------------------------------------------------------- */

/* Animated underline: hidden by default, slides in on hover / current page. */
.navigation-hover {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
  will-change: transform;
}
.navigation-link:hover .navigation-hover,
.dropdown-toggle-3:hover .navigation-hover,
.navigation-link.w--current .navigation-hover {
  transform: scaleX(1);
}
.navigation-link,
.dropdown-toggle-3 {
  transition: color 0.2s ease;
}
.navigation-link:hover .navigation-link-text,
.dropdown-toggle-3:hover .text-block-5 {
  opacity: 0.7;
}
.dropdown-toggle-3 {
  cursor: pointer;
}

/* DESKTOP ONLY: line "Services" up with the other nav links and place the caret
   beside it. Scoped to >=992px so it does NOT override Webflow's mobile menu
   styles (on mobile, Services should be 18px like the other links and the caret
   is hidden). The original Webflow desktop rule used padding-top:33 +
   line-height:0, which only lined up via the old interaction. */
@media (min-width: 992px) {
  /* Larger desktop nav text. */
  .navigation-link-text {
    font-size: 16px;
  }
  .dropdown-toggle-3 {
    height: 20px; /* match .navigation-link so the hover underline lines up */
    padding-top: 22px;
    padding-bottom: 34px;
    line-height: 24px;
  }
  .dropdown-toggle-3 .text-block-5 {
    line-height: 24px;
    font-size: 16px;
    display: inline-block;
    vertical-align: middle;
  }
  .dropdown-toggle-3 .icon-4 {
    position: static;
    inset: auto;
    margin: 0 0 0 6px;
    padding: 0;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.25s ease;
  }
  .w-dropdown-toggle.w--open .icon-4 {
    transform: rotate(180deg);
  }
}
@media (hover: hover) and (min-width: 992px) {
  .dropdown-3:hover .icon-4 {
    transform: rotate(180deg);
  }
}

/* Safety: stop any WordPress-generated <nav class="navigation …"> (pagination,
   post/comment navigation) from inheriting the fixed top nav-bar styling. */
.navigation.pagination,
.navigation.posts-navigation,
.navigation.post-navigation,
.navigation.comment-navigation {
  position: static;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  display: block;
}

/* Numbered blog pagination — sits in its own full-width block at the bottom of
   the page and clears the floated post cards above it. */
.posts-pagination {
  clear: both;
  width: 100%;
  margin: 12px auto 70px;
  padding: 0 20px;
  text-align: center;
}
.posts-pagination .page-numbers {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.posts-pagination .page-numbers li {
  display: inline-block;
}
.posts-pagination a.page-numbers,
.posts-pagination span.page-numbers {
  display: inline-block;
  min-width: 42px;
  padding: 9px 13px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.posts-pagination a.page-numbers:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}
.posts-pagination span.page-numbers.current {
  background: #000;
  color: #fff;
  border-color: #000;
}
.posts-pagination span.page-numbers.dots {
  border-color: transparent;
}

/* Desktop: a clean white dropdown panel for the Services menu. */
@media (min-width: 992px) {
  .dropdown-list-3 {
    min-width: 230px;
  }
  .dropdown-list-3.w--open {
    display: block;
    background: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding: 8px 0;
    margin-top: 0;
  }
  .dropdown-list-3 .w-dropdown-link {
    color: #000;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 12px 22px;
    white-space: nowrap;
    transition: background 0.15s ease;
  }
  .dropdown-list-3 .w-dropdown-link:hover {
    background: #f3f3f3;
  }
  /* Open on hover for mouse/trackpad users. */
  @media (hover: hover) {
    .dropdown-3:hover .dropdown-list-3 {
      display: block;
      background: #fff;
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
      border-radius: 4px;
      padding: 8px 0;
    }
  }
}

/* -------------------------------------------------------------------------
   Customer reviews section (home page) — clean cards on the site grey.
   ------------------------------------------------------------------------- */
.reviews-section {
  background-color: #d0cbcb;
  padding: 60px 4vw 72px;
}
.reviews-section .reviews-heading {
  text-align: center;
  color: #000;
  margin: 0 0 38px;
}
/* Carousel: shows 3 cards at a time; arrows / swipe reveal the rest. */
.reviews-carousel {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 6px;
}
.reviews-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 2px 12px;
}
.reviews-track::-webkit-scrollbar {
  display: none;
}
.review-card {
  flex: 0 0 calc((100% - 36px) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 6px;
  padding: 24px 24px 22px;
  margin: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.reviews-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.reviews-arrow:hover {
  background: #000;
  color: #fff;
}
.reviews-arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}
.reviews-prev {
  left: -10px;
}
.reviews-next {
  right: -10px;
}
.review-stars {
  color: #f5a623;
  font-size: 16px;
  letter-spacing: 3px;
  margin-bottom: 12px;
}
.review-text {
  flex: 1 1 auto;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  quotes: none;
  color: #222;
  font-size: 14px;
  line-height: 1.65;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 11px;
}
.review-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #4d4d4d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}
.review-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.review-name {
  color: #000;
  font-size: 14px;
  font-weight: 700;
}
.review-time {
  color: #777;
  font-size: 12px;
}
@media (max-width: 991px) {
  .review-card {
    flex-basis: calc((100% - 18px) / 2); /* 2 visible on tablet */
  }
}
@media (max-width: 600px) {
  .review-card {
    flex-basis: 100%; /* 1 visible on mobile */
  }
  .reviews-prev {
    left: 0;
  }
  .reviews-next {
    right: 0;
  }
}

/* -------------------------------------------------------------------------
   Portfolio "Our Work" grid on the home page.
   ------------------------------------------------------------------------- */
.portfolio-section {
  padding: 40px 4vw 60px;
}
.portfolio-section .portfolio-heading {
  text-align: center;
  margin-bottom: 8px;
}
.portfolio-section .portfolio-subheading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: #444;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
}
.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  background: #ececec;
}
.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.portfolio-item:hover img {
  transform: scale(1.06);
}
.portfolio-item .portfolio-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px 16px 12px;
  color: #fff;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.portfolio-item:hover .portfolio-caption {
  opacity: 1;
}
@media (max-width: 767px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
@media (max-width: 479px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

/* Blog post card image: keep a consistent crop in the grid. */
.posts-image img,
.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Featured image on single posts. */
.post-content .post-image {
  width: 100%;
  height: auto;
  display: block;
}

/* Make the rich-text content readable inside the post wrapper. */
.post-content-wrapper .w-richtext img {
  max-width: 100%;
  height: auto;
}