/*
 Theme Name:   Halo Clean (Moppers Child)
 Description:  Child theme for Moppers — optimised for Halo Clean
 Author:       Halo Clean
 Template:     moppers
 Version:      1.0.0
 Text Domain:  moppers-child
*/

/* ==========================================================================
   GLOBAL SAFETY — prevent horizontal overflow from any wide element
   ========================================================================== */

html, body {
    overflow-x: hidden;
}

img, video, iframe, embed, object {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   HEADER — reduce height
   ========================================================================== */

.header__primary {
    min-height: 50px !important;
    line-height: 50px !important;
}

/* ==========================================================================
   HERO — make links visible on dark background
   ========================================================================== */

.elementor-section-wrap > .e-con:first-child a,
.e-con[data-settings*="background"] .elementor-widget-text-editor a {
    color: #FFFFFF;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.4);
}

.elementor-section-wrap > .e-con:first-child a:hover,
.e-con[data-settings*="background"] .elementor-widget-text-editor a:hover {
    text-decoration-color: #FFFFFF;
}

/* ==========================================================================
   LOGO — hide Moppers fallback SVG if Redux/ACF logo is not set
   ========================================================================== */

.header__nav .nav__logo img[src*="slcr-logo"] {
    visibility: hidden;
    width: 0;
    height: 0;
    position: absolute;
}

/* LOGO TAGLINE — displayed inline next to the logo */

.nav__logo {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav__logo-tagline {
    font-size: 10px;
    font-weight: 400;
    color: #313030;
    white-space: nowrap;
    letter-spacing: 0.3px;
    align-self: flex-end;
    line-height: 1;
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .nav__logo-tagline {
        display: none;
    }
}

/* ==========================================================================
   FOOTER — navy brand background
   ========================================================================== */

/* Hide "Our Services" column (2nd widget area) and split remaining 2 columns */
.footer__cont[data-footer-layout="first"] .widget__area:nth-child(2) {
    display: none;
}

.footer__cont[data-footer-layout="first"] .widget__area {
    width: 50% !important;
}

/* App store buttons in footer */
.haloclean-footer-app-buttons {
    margin-top: 20px;
    max-width: 350px;
    opacity: 1 !important;
}

.haloclean-footer-app-buttons * {
    opacity: 1 !important;
}

.haloclean-footer-app-buttons .haloclean-app-buttons {
    justify-content: flex-start;
}

/* ==========================================================================
   PAGE HEADER — background image with dark overlay
   ========================================================================== */

.page__header {
    background: #001837 url('/wp-content/uploads/2026/03/blog-header.jpg') center / cover no-repeat;
    position: relative;
}

.page__header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 24, 55, 0.7);
    pointer-events: none;
}

.page__header .content {
    position: relative;
    z-index: 1;
}

/* Force white text on all page headers (dark background) */
.page__header h1 {
    color: #fff !important;
}

.page__header p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.page__header .breadcrumbs li a {
    color: rgba(255, 255, 255, 0.7) !important;
}

.page__header .breadcrumbs li:before {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* --------------------------------------------------------------------------
   VIDEO BACKGROUND HEADER (reusable, field-driven — see custom-header.php)
   A full-bleed <video> sits behind the dark overlay and header content.
   `isolation: isolate` contains the stacking so video (0) < overlay (1) <
   content (2). Overlay darkness comes from the --ph-overlay CSS variable set
   per page. Non-video headers are untouched.
   -------------------------------------------------------------------------- */
.page__header--video {
    overflow: hidden;
    isolation: isolate;
}

.page__header--video.page__header--fullheight {
    min-height: 100vh;
    min-height: 100svh;
}

.page__header-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    border: 0;
}

.page__header--video::before {
    background: rgba(0, 24, 55, var(--ph-overlay, 0.6));
    z-index: 1;
}

.page__header--video .content {
    position: relative;
    z-index: 2;
}

/* --------------------------------------------------------------------------
   FINAL CALL-TO-ACTION BAND (#awxqqwv on service pages)
   The CTA sits directly above the navy footer. Without separation it reads as
   part of the footer, and its default body text renders grey. Make it a clean
   navy band, framed top and bottom with the brand teal accent, with white text
   so it clearly reads as an active call to action. Scoped to the shared CTA
   container id, so every cloned service page inherits the fix.
   -------------------------------------------------------------------------- */
.elementor-element-awxqqwv {
    background-color: #001837 !important;
    background-image: none !important;
    border-top: 3px solid #0C808E;
    border-bottom: 3px solid #0C808E;
}

.elementor-element-awxqqwv h1,
.elementor-element-awxqqwv h2,
.elementor-element-awxqqwv h3,
.elementor-element-awxqqwv p,
.elementor-element-awxqqwv li,
.elementor-element-awxqqwv a:not(.elementor-button) {
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   BRAND RHYTHM BANDS — inventive navy + teal + orange
   Long white service-page content is broken up by full-bleed navy bands with a
   subtle navy depth gradient, framed top and bottom by a teal->orange brand
   accent bar (border-image gradient), white text and teal icons. The orange
   "Book now" button is left untouched so it pops. The section ids are shared
   across all carpet-cloned service pages, so the rhythm applies consistently.
   -------------------------------------------------------------------------- */
.elementor-element-h2m0dyr,
.elementor-element-habbhkv,
.elementor-element-jkhhrz3 {
    background-color: #001837 !important;
    background-image: linear-gradient(160deg, #001837 0%, #06203e 55%, #091729 100%) !important;
    border-width: 4px 0;
    border-style: solid;
    border-image: linear-gradient(90deg, #0C808E 0%, #0C808E 55%, #fba311 100%) 1;
    color: #ffffff !important;
    padding-top: clamp(48px, 6vw, 88px) !important;
    padding-bottom: clamp(48px, 6vw, 88px) !important;
}

.elementor-element-h2m0dyr .elementor-heading-title,
.elementor-element-h2m0dyr .elementor-widget-text-editor,
.elementor-element-h2m0dyr .elementor-widget-text-editor p,
.elementor-element-h2m0dyr .elementor-icon-list-text,
.elementor-element-habbhkv .elementor-heading-title,
.elementor-element-habbhkv .elementor-icon-box-title,
.elementor-element-habbhkv .elementor-icon-box-description,
.elementor-element-habbhkv .elementor-widget-text-editor,
.elementor-element-habbhkv .elementor-widget-text-editor p,
.elementor-element-jkhhrz3 .elementor-heading-title,
.elementor-element-jkhhrz3 .elementor-widget-text-editor,
.elementor-element-jkhhrz3 .elementor-widget-text-editor p {
    color: #ffffff !important;
}

/* Icons (checklist ticks + trust-box icons) -> brand teal on navy */
.elementor-element-h2m0dyr .elementor-icon-list-icon i,
.elementor-element-h2m0dyr .elementor-icon-list-icon svg,
.elementor-element-habbhkv .elementor-icon,
.elementor-element-habbhkv .elementor-icon i,
.elementor-element-habbhkv .elementor-icon svg {
    color: #0C808E !important;
    fill: #0C808E !important;
    background: transparent !important;
}

/* --------------------------------------------------------------------------
   .hc-band — reusable navy rhythm band (one source of truth, site-wide)
   Added as an Elementor css-class to selected white sections (and to blog-post
   H2 sections via a the_content filter) so long white stretches are broken up
   consistently. Same look as the service-page bands: navy depth gradient,
   teal->orange brand accent bar, white text, teal icons. Orange buttons pop.
   -------------------------------------------------------------------------- */
.hc-band,
.elementor-element.hc-band {
    background-color: #001837 !important;
    background-image: linear-gradient(160deg, #001837 0%, #06203e 55%, #091729 100%) !important;
    border-width: 4px 0 !important;
    border-style: solid !important;
    border-image: linear-gradient(90deg, #0C808E 0%, #0C808E 55%, #fba311 100%) 1 !important;
    color: #ffffff !important;
    padding-top: clamp(48px, 6vw, 88px) !important;
    padding-bottom: clamp(48px, 6vw, 88px) !important;
}

.hc-band .elementor-heading-title,
.hc-band .elementor-widget-text-editor,
.hc-band .elementor-widget-text-editor p,
.hc-band .elementor-icon-list-text,
.hc-band .elementor-icon-box-title,
.hc-band .elementor-icon-box-title a,
.hc-band .elementor-icon-box-description,
.hc-band p,
.hc-band li,
.hc-band a:not(.elementor-button) {
    color: #ffffff !important;
}

.hc-band .elementor-icon,
.hc-band .elementor-icon i,
.hc-band .elementor-icon svg,
.hc-band .elementor-icon-list-icon i,
.hc-band .elementor-icon-list-icon svg {
    color: #0C808E !important;
    fill: #0C808E !important;
    background: transparent !important;
}

/* Service icon grids (.hc-service-grid): make linked cards clearly clickable
   with a teal-underlined title, an orange arrow, and a hover lift. */
.hc-service-grid .elementor-widget-icon-box {
    transition: transform .15s ease;
}
.hc-service-grid .elementor-widget-icon-box:hover {
    transform: translateY(-4px);
}
.hc-service-grid .elementor-icon-box-title::after {
    content: " \2192";
    color: #fba311;
    font-weight: 700;
    display: inline-block;
}
.hc-service-grid .elementor-icon-box-wrapper,
.hc-service-grid .elementor-widget-icon-box a {
    cursor: pointer;
}

/* Menu chevrons: signal which items open a submenu.
   Top-level dropdown parents get a down caret; submenu items that open a side
   flyout (e.g. Services > Steam Cleaning Services) get a right chevron. */
.nav__main .nav__list > li.menu-item-has-children > a::after,
.nav__second .nav__list > li.menu-item-has-children > a::after {
    content: "\25BE";
    display: inline-block;
    margin-left: 6px;
    font-size: 0.7em;
    vertical-align: middle;
    opacity: 0.6;
}

.submenu__dropdown li.menu-item-has-children > a {
    position: relative;
}
.submenu__dropdown li.menu-item-has-children > a::after {
    content: "\203A";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    opacity: 0.85;
}

/* Blog-post rhythm band (contained navy panel within the article column). */
.hc-post-band {
    background-color: #001837;
    background-image: linear-gradient(160deg, #001837 0%, #06203e 55%, #091729 100%);
    border-width: 4px 0;
    border-style: solid;
    border-image: linear-gradient(90deg, #0C808E 0%, #0C808E 55%, #fba311 100%) 1;
    color: #ffffff;
    padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 40px);
    margin: 36px 0;
}

.hc-post-band h2,
.hc-post-band h3,
.hc-post-band h4,
.hc-post-band p,
.hc-post-band li,
.hc-post-band strong {
    color: #ffffff !important;
}

.hc-post-band a {
    color: #7fd4dd !important;
    text-decoration: underline;
}

/* ==========================================================================
   BLOG CARDS — cleaner spacing and branded accents
   ========================================================================== */

.blog__card-01 .meta__container,
.blog__card-02 .meta__container {
    border: 1px solid #edf0f5;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.blog__card-01 .post__category,
.blog__card-02 .post__category {
    color: #0C808E;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   ACCESSIBILITY — contrast fixes for brand orange (#fba311) + post meta
   --------------------------------------------------------------------------
   Brand orange #fba311 on white is ~2.3:1 and fails WCAG AA.
   Rule of thumb for HaloClean:
     - Orange on white text  → switch to #8d5a00 (~6.2:1, passes AA normal).
     - White on orange bg    → switch text to navy #001837 (~9.5:1, passes AAA).
     - Post meta light greys → darken to meet 4.5:1 on white.
   ========================================================================== */


/* Inline colour spans using the raw brand orange on white — darken to
   meet AA. Covers the "and more" span in hero / headings. */
[style*="#fba311"],
[style*="#FBA311"],
[style*="rgb(251, 163, 17)"] {
    color: #8d5a00 !important;
}

/* Blog card meta — darken category / time / date text to pass AA. */
.blog__card-01 .post__category,
.blog__card-02 .post__category {
    color: #0369a1 !important;   /* sky-700, ~6.4:1 on white */
}

.blog__card-01 .time__count,
.blog__card-02 .time__count,
.blog__card-01 .post__meta,
.blog__card-02 .post__meta,
.meta__container .time__count,
.meta__container .post__meta {
    color: #3f4752 !important;   /* slate-700, ~8.5:1 on white */
}

/* ==========================================================================
   TYPOGRAPHY — heading overrides
   ========================================================================== */

h4, .h4 {
    font-size: 16px;
}

/* ==========================================================================
   SINGLE POST — clean readable typography
   ========================================================================== */

.blog-post-content {
    max-width: 720px;
    margin: 0 auto;
    line-height: 1.8;
}

.blog-post-content p {
    margin-bottom: 1.5em;
}

/* ==========================================================================
   TABLET — max-width: 768px
   ========================================================================== */

@media (max-width: 768px) {
    .container-lg {
        padding-left: 5vw;
        padding-right: 5vw;
    }
}

/* ==========================================================================
   MOBILE — max-width: 767px
   ========================================================================== */

@media (max-width: 767px) {

    /* ── Reduce stacking container padding on mobile ──
       page.php wraps: section.col-xs-12 (15px) → .row (-15px) → .container (15px)
       sidebar-left.php doubles this with a second col/row/container layer.
       Strip all Bootstrap padding/margins inside .main__content so only
       .e-con (15px) provides the final breathing room. */

    .main__content .col-xs-12,
    .main__content .col-sm-12,
    .main__content .col-md-12,
    .main__content .col-md-8 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .main__content .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .main__content .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Elementor containers: override all padding (inline styles set 100px via CSS vars) */
    .e-con {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-inline-start: 15px !important;
        padding-inline-end: 15px !important;
    }
    .e-con .e-con {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-inline-start: 0 !important;
        padding-inline-end: 0 !important;
    }
    .e-con-inner,
    .e-con > .e-con-inner,
    .e-con-full,
    .e-con-full.e-flex,
    .e-con.e-flex > .e-con-inner {
        padding-block-start: 20px !important;
        padding-block-end: 20px !important;
    }

    /* Elementor: force boxed sections to full width, reduce column gap */
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
    }

    .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
    .elementor-column-gap-narrow > .elementor-column > .elementor-element-populated {
        padding: 5px !important;
    }

    .elementor-widget-wrap {
        overflow: hidden;
    }

    /* Elementor section padding — remove side padding on full-width sections */
    .elementor-section > .elementor-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Page header: allow title/content to span full width */
    .page__header .content .inner {
        max-width: 100% !important;
    }

    .page__header .content {
        padding: 30px 15px;
    }

    /* Section titles: remove 300px cap on paragraph text */
    .section_title {
        margin-bottom: 30px;
    }

    .section_title p {
        max-width: 100% !important;
    }

    /* Footer second layout: stack logo/copyright on phones (was only 480px) */
    [data-footer-layout="second"] .footer__logo,
    [data-footer-layout="second"] .copyright__text {
        width: 100% !important;
        float: none;
        text-align: left;
    }

    [data-footer-layout="second"] .footer__logo {
        margin-bottom: 15px;
    }

    [data-footer-layout="second"].center .footer__logo,
    [data-footer-layout="second"].center .copyright__text {
        text-align: center;
    }

    /* Blog cards: full width, tighter spacing on mobile */
    .blog__card-01 .featured__image {
        height: 180px;
    }

    .blog__card-01 .meta__container {
        width: 100%;
        left: 0;
        transform: none;
        border-radius: 0 0 8px 8px;
    }

    .blog__card-01 .meta__container,
    .blog__card-02 .meta__container {
        padding: 15px;
    }

    .blog__card-02 .post__info h3 {
        font-size: 20px !important;
        line-height: 1.4;
    }

    .blog-post-content {
        padding: 0 5px;
    }

    /* Reduce footer vertical padding */
    .footer__main {
        padding: 40px 0;
    }
}

/* ==========================================================================
   SMALL PHONES — max-width: 480px
   ========================================================================== */

@media (max-width: 480px) {
    .container-lg {
        padding-left: 4vw;
        padding-right: 4vw;
    }
}

/* ==========================================================================
   App-store badges — constrain group to max 500px + keep mobile friendly.
   Plugin default lets each badge (flex:1 1 0, img width:100%) stretch to fill
   any container width, so on wide sections the badges render huge.
   ========================================================================== */
.haloclean-app-buttons {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
}
.haloclean-app-buttons--left  { margin-left: 0;  margin-right: auto; }
.haloclean-app-buttons--right { margin-right: 0; margin-left: auto; }

.haloclean-app-badge {
    flex: 1 1 160px;
    max-width: 240px;
}

/* On small phones let each badge take a full row so they stay legible. */
@media (max-width: 420px) {
    .haloclean-app-badge { flex-basis: 100%; max-width: 260px; }
}

/* ── Annual Maintenance Contract (AMC) price table + enquiry block ──
   Used by the [haloclean_amc_pricing] shortcode. Brand navy/teal; the enquiry
   state shows while a service has no published per-size prices yet. */
.hc-amc-table-wrap { margin: 24px 0; }
.hc-amc-table__caption { font-weight: 700; color: #001837; margin: 0 0 10px; }
.hc-amc-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid rgba(12, 128, 142, 0.25);
    border-radius: 8px;
    overflow: hidden;
}
.hc-amc-table thead th {
    background: #001837;
    color: #ffffff;
    text-align: left;
    padding: 12px 16px;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}
.hc-amc-table tbody td {
    padding: 12px 16px;
    border-top: 1px solid rgba(12, 128, 142, 0.18);
    color: #091729;
}
.hc-amc-table tbody tr:nth-child(even) td { background: rgba(12, 128, 142, 0.05); }
.hc-amc-table tbody td:last-child { font-weight: 700; color: #0C808E; white-space: nowrap; }
.hc-amc-table__note { font-size: 0.85rem; color: #5a6675; margin: 10px 2px 0; }

.hc-amc-enquiry {
    margin: 24px 0;
    padding: 22px 24px;
    background: linear-gradient(135deg, #001837 0%, #091729 100%);
    border-radius: 10px;
    border-left: 4px solid #fba311;
}
.hc-amc-enquiry__lead { color: #e9eef5; margin: 0 0 16px; }
.hc-amc-enquiry__cta { margin: 0; }
.hc-amc-enquiry__btn {
    display: inline-block;
    padding: 12px 26px;
    background: #fba311;
    color: #001837;
    font-weight: 700;
    border-radius: 6px;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hc-amc-enquiry__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); color: #001837; }