/* bestfix overrides: mobile usability, heading structure, readability.
   Loaded after the template's site.css and custom.css. */

/* Mobile menu button: inline icon, independent of the template sprite */
.Mobile-bar-menu { display: inline-block; padding: 10px; line-height: 0; cursor: pointer; }
.Mobile-bar-menu .bf-menu-icon { display: block; }
.Mobile-bar-menu .Icon { display: none !important; }
.Mobile-overlay-nav-item { padding-top: 12px; padding-bottom: 12px; }

/* Body copy was 14px light grey (#a1a1a1); make it readable on phones */
.Index-page:not(.Index-page--has-image) .bhf-html-content p,
.Main-content .bhf-html-content p { color: #4a4a4a; font-size: 16px; line-height: 1.7; }
.Index-page:not(.Index-page--has-image) .bhf-html-content h3 { color: #333; }

/* Page titles over hero photos */
.Index-page--has-image .Index-page-content h1.bf-hero-title { color: #fff !important; text-shadow: 0 2px 8px rgba(0, 0, 0, .65); }

/* Homepage headline (H1) and the section titles that used to be H1s */
h1.bf-h1 { font-size: 34px; line-height: 1.25; font-weight: 900; }
.bf-welcome { font-size: 18px; margin-top: .4em; }
h2.bf-section-title { font-size: 50px; font-weight: 900; line-height: 1.3em; }

/* FAQ blocks */
.bf-faq h2 { margin-bottom: .8em; }
.bf-faq h3.bf-faq-q { font-size: 19px; font-weight: 700; color: #333; margin: 1.4em 0 .3em; line-height: 1.35; }
.bf-faq p.bf-faq-a { margin-top: 0; }
.bf-faq-section .Index-page-content { max-width: 960px; }
.bf-intro { margin-bottom: 1.5em; }

/* Contact and footer details */
.bf-nap { font-size: 16px; }
.bf-footer-name { font-size: 16px; }
.bf-footer-line a, .bf-footer-links a, .bf-nap a { color: inherit; text-decoration: underline; }
.bf-footer-links { font-size: 13px; }

/* Anchor targets land below the fixed mobile bar */
section[id] { scroll-margin-top: 90px; }

/* Buttons wrap instead of overflowing */
.bhf-block-button-element { white-space: normal; }

@media (max-width: 640px) {
  .Index-gallery-item-content-heading { font-size: 28px !important; line-height: 1.2em; }
  h2.bf-section-title { font-size: 32px; }
  h1.bf-h1 { font-size: 27px; }
  .Index-page--has-image .Index-page-content h1.bf-hero-title { font-size: 30px; }
  .Index-page-content { padding-top: 48px; padding-bottom: 48px; }
  .bhf-block-button-element--large { padding: 16px 22px; font-size: 17px; }
  /* Template form: first/last name side by side overflow a phone screen */
  .form-item.fields .field { width: 100% !important; float: none !important; margin: 0 0 10px !important; }
  .bf-faq h3.bf-faq-q { font-size: 17px; }
}

/* Quote request form (replaces the original form block on /contact-us) */
.bf-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.bf-quote .field-list .field .field-element { font-size: 16px; font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #272727; }
.bf-quote .field-list .title { font-size: 14px; font-weight: 700; color: #333; letter-spacing: .02em; }
.bf-quote .field-list .description { font-size: 13px; opacity: .75; }
.bf-quote .required { color: #ff981a; }
.bf-quote .field.error .field-element { border-color: #c0392b; background: #fff6f5; }
.bf-quote .field-error { display: block; background: none; padding: 0; color: #c0392b; font-size: 13px; margin-top: 2px; }
.bf-quote-errors { color: #c0392b; margin-bottom: 16px; }
.bf-quote-errors p { color: #c0392b !important; margin: 0; }
.bf-quote-thanks { padding: 24px; border: 1px solid #ddd; background: #fafafa; }
.bf-quote-thanks h3 { margin-top: 0; color: #333; }
.bf-quote .form-button-wrapper { margin-top: 8px; }
.bf-quote select.field-element { height: auto; }
.bf-quote button[type="submit"] { display: inline-block; padding: 13px 26px; border: 0; cursor: pointer; background-color: #ff981a; color: #fff; font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; line-height: normal; }
.bf-quote button[type="submit"]:hover { opacity: .85; }

/* Google Reviews / HomeStars buttons under the review cards. The selectors
   repeat the template's ".bhf-block-html p a" so its link styling (0.05em
   bottom padding, 1px bottom border) does not win and cut the button short. */
.bf-review-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 20px 0 0; }
.bhf-block-html p a.bf-google-reviews, a.bf-google-reviews { display: inline-block; box-sizing: border-box; width: 310px; max-width: 100%; margin: 0; padding: 14px 20px; border: 0; background-color: #ff981a; color: #fff !important; font-family: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; text-decoration: none; line-height: 1.3; text-align: center; }
.bhf-block-html p a.bf-google-reviews:hover, a.bf-google-reviews:hover { opacity: .85; }
.bhf-block-html p a.bf-homestars-reviews, a.bf-homestars-reviews { background-color: #4a4a4a; }

/* Review cards (quotes copied from Google, linked to the source) */
.bf-review-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 8px 0 4px; }
.bf-review { flex: 1 1 280px; max-width: 420px; margin: 0; padding: 22px 24px; background: #fff; border: 1px solid #e6e6e6; border-left: 4px solid #ff981a; text-align: left; }
.bf-review p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; }
.bf-review footer { font-size: 14px; color: #555; }
.bf-review footer a { color: #d97a00; text-decoration: underline; display: inline-block; padding: 4px 2px; }
.bf-review-stars { color: #f5a623; letter-spacing: 2px; margin-right: 6px; }

/* Larger tap targets on phones: phone number in the call bar, footer links */
.bhf-announcement-bar-text a { display: inline-block; padding: 8px 4px; }
.bf-footer-links a, .bf-footer-line a { display: inline-block; padding: 6px 2px; }
.Footer a, .bf-nap a, p a[href="/"] { display: inline-block; padding: 4px 2px; }

/* ------------------------------------------------------------------ */
/* Lite build: rules the original scripts used to set at runtime.     */
/* Images fill their boxes with CSS; the slideshow and menu need only  */
/* the classes bestfix.js toggles (active, loaded, is-mobile-overlay). */
/* ------------------------------------------------------------------ */

/* Home slideshow: slides stacked, template CSS animates .active */
.Index-gallery-wrapper { position: relative; }
.tweak-index-gallery-layout-slideshow .Index-gallery-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.tweak-index-gallery-layout-slideshow.tweak-index-gallery-fixed-height .Index-gallery-item { height: 100%; }
.Index-gallery-item-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.Index-gallery.loaded .Index-gallery-control { display: block; }
.Index-gallery.loaded .Index-gallery-indicators { display: block; }
@media (max-width: 640px) { .Index-gallery-control { display: none !important; } }

/* Page hero photos (Index-page--has-image sections) */
.Index-page-image { overflow: hidden; }
.Index-page-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Gallery grids (square thumbnails) */
.bhf-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor { position: relative; overflow: hidden; }
.bhf-gallery-block-grid .slide .margin-wrapper a.image-slide-anchor img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* Image blocks with a fixed aspect ratio (service bubbles, photos) */
.bhf-image-shape-container-element.has-aspect-ratio img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* Fixed mobile bar: content starts below it (bestfix.js measures the exact height) */
@media (max-width: 640px) { body.tweak-mobile-bar-top-fixed { margin-top: 91px; } }

/* "Call us" bar, rendered statically */
.bhf-announcement-bar-text { position: relative; }
.bhf-announcement-bar-close { position: absolute; top: 0; right: 0; width: 2.8em; height: 100%; cursor: pointer; }
.bhf-announcement-bar-close:after { content: '\00d7'; display: block; font-size: 1.1em; line-height: 2.6em; color: #fff; }

/* Accordion block (luxury vinyl page): markup kept, styling and toggling are ours */
.bhf-block-accordion .accordion-item { margin: 0; padding: 0; list-style: none; }
.bhf-block-accordion .accordion-divider { height: 1px; background: #222; }
.bhf-block-accordion .accordion-item__title-wrapper { margin: 0; padding: 0; }
.bhf-block-accordion .accordion-item__click-target { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 28px 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 21px; color: #4a4a4a; }
.bhf-block-accordion .accordion-icon-container { position: relative; width: 16px; height: 16px; flex: 0 0 16px; }
.bhf-block-accordion .plus__horizontal-line, .bhf-block-accordion .plus__vertical-line { position: absolute; background: #ff981a; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: transform .2s; }
.bhf-block-accordion .plus__horizontal-line { width: 16px; height: 2px; }
.bhf-block-accordion .plus__vertical-line { width: 2px; height: 16px; }
.bhf-block-accordion .accordion-item__click-target[aria-expanded="true"] .plus__vertical-line { transform: translate(-50%, -50%) rotate(90deg); }
.bhf-block-accordion .accordion-item__dropdown { display: none; padding: 0 0 24px; }
.bhf-block-accordion .accordion-item.is-open .accordion-item__dropdown { display: block; }
.bhf-block-accordion .accordion-item__description p { color: #4a4a4a; font-size: 16px; line-height: 1.7; }
.bhf-block-accordion .accordion-item__description ul { margin: 0; padding-left: 1.2em; }