/* ---------------------------------------------------------------------------
   Corrections layered over the original Porto theme. Nothing here changes the
   brand: it tightens the spacing the old build left gaping, gives the
   alternating image rows a shared grid, and stops oversized photos.
   ------------------------------------------------------------------------- */

/* 1. Section rhythm. The original mixed py-5 / pt-5 / mt-5 arbitrarily, which
      produced 200px+ voids between blocks. */
section, .section { padding-top: 4rem; padding-bottom: 4rem; }
section.pt-0, .section.pt-0 { padding-top: 0 !important; }
section.pb-0, .section.pb-0 { padding-bottom: 0 !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.my-5 { margin-top: 2.5rem !important; margin-bottom: 2.5rem !important; }
.mt-5 { margin-top: 2.5rem !important; }
.mb-5 { margin-bottom: 2.5rem !important; }
main .container > .row + .row { margin-top: 2.5rem; }

/* 2. Alternating feature rows share one grid and align to centre, so a row
      with no image no longer leaves a hole. */
.feature-row, .row.align-items-center { align-items: center !important; }
.row > [class*="col-"] > img,
.row > [class*="col-"] > a > img { width: 100%; height: auto; }

/* 3. Photographs: consistent aspect and never overflowing. */
img { max-width: 100%; height: auto; }
.project-thumb img, .portfolio-item img, .thumb-info img {
  aspect-ratio: 3 / 2; object-fit: cover; width: 100%;
}
.gallery-item img, .project-details img { aspect-ratio: 4 / 3; object-fit: cover; }
.hero-img, .page-header img { object-fit: cover; }

/* 4. Header logo. Two anchors ship in the markup — .home-logo and
      .home-sticky-logo — and Porto only hides the second once the sticky
      header activates. On a page that never scrolls, both render, stacked.
      Show exactly one at a time. */
.header-logo img, .logo img { max-height: 58px; width: auto; }
.header-logo { display: flex; align-items: center; }
.header-logo .home-sticky-logo { display: none; }
html.sticky-header-active .header-logo .home-logo { display: none; }
html.sticky-header-active .header-logo .home-sticky-logo { display: block; }

/* 5. Main menu. The menu carries two more items than the original (Gallery,
      Service Areas), which pushed "Request a Quote" onto a second row and
      broke the header's height. Tighten the horizontal rhythm rather than
      dropping a link. */
@media (min-width: 992px) {
  #mainNav > li > a.nav-link,
  #mainNav > li > a { padding-left: .7rem !important; padding-right: .7rem !important;
                      white-space: nowrap; }
  #mainNav { flex-wrap: nowrap; }
  .header-nav-main nav > ul > li > a { font-size: .92rem; }
}
@media (min-width: 992px) and (max-width: 1350px) {
  #mainNav > li > a.nav-link,
  #mainNav > li > a { padding-left: .5rem !important; padding-right: .5rem !important; }
  .header-nav-main nav > ul > li > a { font-size: .85rem; }
}

/* 6. Quote form. */
.ace-form .form-control { padding: .85rem 1rem; border-radius: 3px; }
.ace-form label { font-weight: 600; font-size: .82rem; letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: .35rem; display: block; }
.ace-form .field { margin-bottom: 1.1rem; }
.ace-form .err { display: none; color: #C0392B; font-size: .84rem; margin-top: .3rem; }
.ace-form .field.bad .err { display: block; }
.ace-form .field.bad .form-control { border-color: #C0392B; }
.ace-status { display: none; margin-top: 1rem; padding: 1rem 1.1rem; border-radius: 3px;
  line-height: 1.55; }
.ace-status.show { display: block; }
.ace-status.ok { background: #E8F5E9; border: 1px solid #4CAF50; color: #1B5E20; }
.ace-status.bad { background: #FFF3E0; border: 1px solid #FF9800; color: #7A3E00; }

/* 7. Placeholder contact tokens are meant to be seen. */
.tbc { background: #FFE9A8; color: #7A5B00; padding: 0 .25rem; border-radius: 2px;
  font-weight: 700; white-space: nowrap; }

/* 8. Headings that were never headings. The top bar's "Get a Free Quote" and
      "Follow Us", and the footer's "Company" / "Our Services" / "Opening
      Hours", shipped as <h4> on 50 pages -- two of them BEFORE the page's own
      <h1>. That is what produced the h1->h4 and h2->h4 jumps on every page:
      furniture labels competing with the document outline. They are now
      <div class="... h4 ace-widget-heading">.

      Bootstrap's own .h1-.h6 utilities carry the exact font-size of the
      matching element, so re-tagging costs nothing visually. What they do NOT
      carry is the shared h1-h6 rule (margins, weight, line-height), which is
      what this restores. :where() so it has ZERO specificity -- every existing
      class on the element (font-weight-bold, mb-3, text-4) still wins, which
      matters because ace-fixes.css is the last stylesheet in the bundle and a
      normal selector here would silently unbold the footer headings. */
:where(.ace-widget-heading) { margin-top: 0; margin-bottom: .5rem;
  font-weight: 500; line-height: 1.2; }

/* 9. Reveal animations: keep them, but never leave content stranded at
      opacity 0 if the script fails. */
@media (prefers-reduced-motion: reduce) {
  .appear-animation { opacity: 1 !important; transform: none !important; }
}
.no-js .appear-animation { opacity: 1 !important; transform: none !important; }