/*
 * Bricks / Core Framework compatibility shims for the ported legacy markup.
 * Goal: render the original accordiondoor.com design pixel-identically inside
 * the Bricks theme. Scoped to legacy regions ONLY — must never touch the
 * configurator plugin (.dcfg-*), which has its own type scale.
 *
 * landing.css was authored against a 16px root and sets body font-family /
 * line-height but NOT font-size, so it inherited the browser default 16px on
 * prod. Bricks/Core Framework injects a fluid ~17.55px, which reflowed every
 * block of inherited body copy. landing.css uses zero rem units, so restoring
 * a 16px base here is safe and does not disturb the theme's 10px rem root.
 */
#main-header,
#main-footer,
section.hero,
section.product-series,
section.confidence-section,
section#configurator {
    font-size: 16px;
}

/*
 * Prod leaves footer/header form controls at browser defaults
 * (13.3333px / line-height normal). Bricks was forcing 17.55px and a 40px
 * line-height, which made the footer form 129px taller than prod.
 */
#main-footer input,
#main-footer textarea,
#main-footer select,
#main-header input,
#main-header select {
    font-size: 13.3333px;
    line-height: normal;
    font-family: Arial, sans-serif;
}

/*
 * Carousel arrows: the converter kept position:absolute but dropped the inline
 * `top:50%` / `translateY(-50%)` centring and mis-computed the right offset,
 * leaving both arrows pinned to the top-left. Restore prod's placement.
 */
.series-carousel-container .carousel-nav {
    top: 50%;
    transform: translateY(-50%);
}
.series-carousel-container .carousel-prev { left: 0; right: auto; }
.series-carousel-container .carousel-next { right: 0; left: auto; }
.series-carousel-container .carousel-nav:hover {
    transform: translateY(-50%) scale(1.1);
}

/*
 * Bricks renders the form submit as .bricks-button (unstyled grey). Prod uses
 * the site's .cta-button. Match it here rather than restyling every form.
 */
#main-footer button[type="submit"].bricks-button {
    background: #FF6B35;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: opacity .2s;
}
#main-footer button[type="submit"].bricks-button:hover { opacity: .9; }

/* --- Bricks builder only -----------------------------------------------
   landing.css sets `section { opacity: 0 }` and reveals sections via a
   scroll-triggered `.visible` class. That JS never runs in the builder
   canvas, so every section rendered blank and could not be edited.
   `.brx-draggable` is added by Bricks ONLY inside the builder, so this
   reveal is scoped to the builder and never affects the frontend.       */
section.brx-draggable {
    opacity: 1 !important;
    transform: none !important;
}

/* Page contact form: Bricks renders the submit as an unstyled grey
   .bricks-button, but prod uses the site's orange .cta-button (measured on
   /contact/: 16px 40px, 8px radius, 18px, full width). The footer form above
   has its own smaller variant, so this is scoped to .contact-form. */
form.contact-form button[type="submit"].bricks-button {
    background: #FF6B35;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 16px 40px;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    display: block;
    margin-top: 20px;
    cursor: pointer;
    transition: opacity .2s;
}
form.contact-form button[type="submit"].bricks-button:hover { opacity: .9; }