/*
 * =============================================================================
 *  ADAPTED BATH — global.css
 *
 *  HOW TO USE:
 *  1. Place this file in your theme root folder
 *  2. Add to functions.php:
 *     wp_enqueue_style('at-global', get_template_directory_uri() . '/global.css');
 * =============================================================================
 */

/* ─────────────────────────────────────────────────────────────────────────────
   1. ROOT FIX
   DevTools shows body { max-width: 700px; margin: 2em auto }
   set by the theme at (index):2470. This overrides it.
───────────────────────────────────────────────────────────────────────────── */
html {
    overflow-x: hidden;
}

body {
    max-width:  100% !important;
    width:      100% !important;
    margin:     0    !important;
    padding:    0    !important;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. THEME WRAPPER OVERRIDE
   Strips the narrow max-width / padding from every common WP container class
   so your sections are never boxed in.
───────────────────────────────────────────────────────────────────────────── */
.site,
#page,
.site-content,
#content,
#primary,
.site-main,
#main,
.main-content,
.content-area,
.entry-content,
.page-content,
.wp-site-blocks,
.is-layout-constrained {
    max-width:     100% !important;
    width:         100% !important;
    padding-left:  0    !important;
    padding-right: 0    !important;
    margin-left:   0    !important;
    margin-right:  0    !important;
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. FULL-WIDTH SECTIONS BY ID
   Add any new section IDs here as you build them.
───────────────────────────────────────────────────────────────────────────── */
#at-hero-wrap,
#at-premium-contact-wrap,
#products-page,
#qt-before-after,
#qt-counter-section,
#at-gallery-wrap,
#at-financial-wrap,
#at-why-choose-wrap,
#at-testimonials-wrap,
#at-faq-wrap,
#at-cta-banner-wrap {
    width:         100vw !important;
    max-width:     100vw !important;
    position:      relative;
    left:          50%;
    margin-left:  -50vw  !important;
    margin-right: -50vw  !important;
    box-sizing:    border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. UTILITY CLASS
   Add class="at-fullwidth" to any future section to get the same treatment.
───────────────────────────────────────────────────────────────────────────── */
.at-fullwidth {
    width:         100vw !important;
    max-width:     100vw !important;
    position:      relative;
    left:          50%;
    margin-left:  -50vw  !important;
    margin-right: -50vw  !important;
    box-sizing:    border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. INNER CONTAINERS — keep content centred inside full-width sections
───────────────────────────────────────────────────────────────────────────── */
#at-hero-wrap .container,
#at-premium-contact-wrap .container,
#products-page .container {
    max-width:     1200px;
    width:         100%;
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  24px;
    padding-right: 24px;
    box-sizing:    border-box;
}

/* ─────────────────────────────────────────────────────────────────────────────
   6. FIXED HEADER + SCROLL OFFSET
───────────────────────────────────────────────────────────────────────────── */
:root {
    --header-height: 80px;
}

/* Anchor links land below the fixed header */
[id] {
    scroll-margin-top: calc(var(--header-height) + 20px);
}

/* Push page body down so fixed header doesn't overlap content */
body {
    padding-top: var(--header-height) !important;
}

/* Hero sits flush under the header — undo the body padding-top for it */
#at-hero-wrap {
    margin-top: calc(-1 * var(--header-height)) !important;
}