/*
 Theme Name:   HMR
 Theme URI:    https://sprocketdesignco.co.za/
 Description:  Henning Marine Racing — Child theme for Total by WPExplorer
 Author:       Sprocket Design Co.
 Author URI:   https://sprocketdesignco.co.za/
 Template:     Total
 Version:      1.1.1
 Text Domain:  hmr-child
*/

/* ═══════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   1.  CSS Custom Properties
   2.  Global Reset & Base
   3.  Header
   4.  WP Admin Bar Offset
   5.  Primary Navigation
   6.  Dropdown
   7.  Get a Quote CTA Button
   8.  Hamburger
   9.  Mobile Menu Overlay
   10. Footer
   11. Footer Bottom Bar
   12. Configurator Page — Mobile Image Fix
   13. Responsive — Theme Chrome
   14. Homepage Mobile Fixes
   15. Configurator — Header Offset
   16. WP Page Title — Hide on Configurator
   17. Global Headline Hyphenation Guard
   18. Global Image & Section Brightness
═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
───────────────────────────────────────────────── */
:root {
    --hmr-black:    #0c0f12;
    --hmr-dark:     #111518;
    --hmr-mid:      #161c24;
    --hmr-panel:    #1a2030;
    --hmr-slate:    #3A4250;
    --hmr-cyan:     #29B5E8;
    --hmr-orange:   #E85D20;
    --hmr-red:      #CC1F1F;
    --hmr-text:     #c8d8e4;
    --hmr-muted:    #5a7080;
    --hmr-border:   rgba(41, 181, 232, 0.14);

    --f-display:    'Barlow Condensed', sans-serif;
    --f-mono:       'Share Tech Mono', monospace;

    --hmr-header-h: 64px;
}


/* ─────────────────────────────────────────────────
   2. GLOBAL RESET & BASE
───────────────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--hmr-black);
    color: var(--hmr-text);
    font-family: var(--f-display);
    font-weight: 300;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}


/* ─────────────────────────────────────────────────
   3. HEADER
───────────────────────────────────────────────── */
#hmr-header::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--hmr-orange), var(--hmr-cyan) 55%, transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

#hmr-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    height: var(--hmr-header-h);
    display: flex;
    align-items: center;
    padding: 0 40px;
    gap: 8px;
    background: transparent;
    transition: background 0.35s ease, box-shadow 0.35s ease, top 0.1s ease;
}

#hmr-header.scrolled {
    background: rgba(12, 15, 18, 0.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
}

#hmr-header.scrolled::after {
    opacity: 1;
}

.hmr-logo {
    flex-shrink: 0;
    margin-right: auto;
    line-height: 0;
}

.hmr-logo img {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
    transition: opacity 0.2s;
}

.hmr-logo:hover img {
    opacity: 1;
}


/* ─────────────────────────────────────────────────
   4. WP ADMIN BAR OFFSET
───────────────────────────────────────────────── */
.admin-bar #hmr-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar #hmr-header {
        top: 46px;
    }
}

.admin-bar .cfg-header {
    top: calc(var(--hmr-header-h) + 32px) !important;
}

.admin-bar .cfg-viewer {
    top: calc(var(--hmr-header-h) + 32px) !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .cfg-header {
        top: calc(var(--hmr-header-h) + 46px) !important;
    }
    .admin-bar .cfg-viewer {
        top: calc(var(--hmr-header-h) + 46px) !important;
    }
}


/* ─────────────────────────────────────────────────
   5. PRIMARY NAVIGATION
───────────────────────────────────────────────── */
.hmr-nav-wrap {
    display: flex;
    align-items: center;
}

.hmr-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hmr-nav > li {
    position: relative;
}

.hmr-nav > li > a,
.hmr-nav > li > button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(200, 216, 228, 0.7);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}

.hmr-nav > li > a:hover,
.hmr-nav > li > button:hover,
.hmr-nav > li > a.current-menu-item,
.hmr-nav > li.current-menu-ancestor > button {
    color: #fff;
    background: rgba(41, 181, 232, 0.07);
}

.hmr-nav-arrow {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform 0.2s;
    flex-shrink: 0;
}

.hmr-nav > li.is-open > button .hmr-nav-arrow,
.has-hmr-dropdown:hover > button .hmr-nav-arrow {
    transform: rotate(-135deg) translateY(-2px);
}


/* ─────────────────────────────────────────────────
   6. DROPDOWN
───────────────────────────────────────────────── */
.hmr-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    min-width: 280px;
    padding-top: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    transition-delay: 0.18s;
    z-index: 100;
}

.hmr-dropdown-inner {
    background: rgba(12, 15, 18, 0.97);
    border: 1px solid var(--hmr-border);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.hmr-dropdown-inner::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--hmr-cyan), transparent);
}

.has-hmr-dropdown:hover .hmr-dropdown,
.has-hmr-dropdown.is-open .hmr-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}

.hmr-dropdown a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: background 0.15s;
}

.hmr-dropdown a:last-child {
    border-bottom: none;
}

.hmr-dropdown a:hover {
    background: rgba(41, 181, 232, 0.06);
}

.hmr-dd-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: 1px solid var(--hmr-border);
    background: rgba(41, 181, 232, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hmr-dd-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.hmr-dd-model {
    display: block;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 3px;
    transition: color 0.15s;
}

.hmr-dropdown a:hover .hmr-dd-model {
    color: var(--hmr-cyan);
}

.hmr-dd-class {
    display: block;
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: 0.12em;
    color: var(--hmr-muted);
    text-transform: uppercase;
}


/* ─────────────────────────────────────────────────
   7. GET A QUOTE CTA BUTTON
───────────────────────────────────────────────── */
.hmr-nav-cta {
    margin-left: 20px;
}

.hmr-nav-cta a {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hmr-orange);
    border: 1px solid rgba(232, 93, 32, 0.4);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.hmr-nav-cta a:hover {
    background: var(--hmr-orange);
    border-color: var(--hmr-orange);
    color: #fff;
}


/* ─────────────────────────────────────────────────
   8. HAMBURGER
───────────────────────────────────────────────── */
.hmr-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 300;
}

.hmr-burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--hmr-text);
    transition: transform 0.3s, opacity 0.3s;
}

.hmr-burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hmr-burger.is-open span:nth-child(2) {
    opacity: 0;
}

.hmr-burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ─────────────────────────────────────────────────
   9. MOBILE MENU OVERLAY
   Target by ID (#hmr-mobile-menu) AND class
   (.hmr-mob-overlay) — belt and suspenders.
   display:none on desktop; flex on mobile only.
───────────────────────────────────────────────── */
#hmr-mobile-menu,
.hmr-mob-overlay {
    display: none !important;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 250;
    background: rgba(12, 15, 18, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    flex-direction: column;
    justify-content: center;
    padding: 80px 32px 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

@media (max-width: 700px) {
    #hmr-mobile-menu,
    .hmr-mob-overlay {
        display: flex !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #hmr-mobile-menu.is-open,
    .hmr-mob-overlay.is-open {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

.hmr-mob-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hmr-mob-nav > li > a,
.hmr-mob-nav > li > button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 0;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(200, 216, 228, 0.7);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.hmr-mob-nav > li > a:hover,
.hmr-mob-nav > li > button:hover {
    color: var(--hmr-cyan);
}

.hmr-mob-sub {
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px;
    display: none;
}

.hmr-mob-sub.is-open {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hmr-mob-sub a {
    display: block;
    padding: 8px 0;
    font-family: var(--f-display);
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(200, 216, 228, 0.5);
    transition: color 0.2s;
}

.hmr-mob-sub a:hover {
    color: var(--hmr-cyan);
}

.hmr-mob-bar {
    margin-top: auto;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--hmr-muted);
    text-transform: uppercase;
}


/* ─────────────────────────────────────────────────
   10. FOOTER
───────────────────────────────────────────────── */
#hmr-footer {
    background: var(--hmr-black);
    border-top: 1px solid var(--hmr-border);
}

#hmr-footer::before {
    content: '';
    display: block;
    height: 2px;
    background: linear-gradient(90deg, var(--hmr-orange), var(--hmr-cyan) 50%, transparent);
}

.hmr-footer-main {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 48px;
    padding: 64px 80px 56px;
    max-width: 1280px;
    margin: 0 auto;
}

.hmr-footer-logo {
    display: block;
    margin-bottom: 16px;
    line-height: 0;
}

.hmr-footer-logo img {
    display: block;
    height: 60px;
    width: auto;
}

.hmr-footer-tagline {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hmr-muted);
    margin-bottom: 24px;
}

.hmr-footer-locs {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hmr-footer-city {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--hmr-cyan);
    display: block;
    margin-bottom: 3px;
}

.hmr-footer-loc-detail {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: var(--hmr-muted);
    line-height: 1.8;
}

.hmr-footer-col-head {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(200, 216, 228, 0.3);
    display: block;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hmr-border);
}

.hmr-footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hmr-footer-nav a {
    display: block;
    font-family: var(--f-display);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hmr-muted);
    padding: 5px 0;
    transition: color 0.2s, padding-left 0.2s;
}

.hmr-footer-nav a:hover {
    color: var(--hmr-text);
    padding-left: 6px;
}

.hmr-footer-model-tag {
    font-family: var(--f-mono);
    font-size: 8px;
    letter-spacing: 0.1em;
    color: var(--hmr-cyan);
    opacity: 0.6;
    margin-left: 6px;
}

.hmr-footer-contact-label {
    font-family: var(--f-mono);
    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(41, 181, 232, 0.3);
    display: block;
    margin-bottom: 4px;
}

.hmr-footer-contact-value {
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--hmr-muted);
    display: block;
    margin-bottom: 16px;
    transition: color 0.2s;
}

.hmr-footer-contact-value a {
    color: inherit;
}

.hmr-footer-contact-value:hover,
.hmr-footer-contact-value a:hover {
    color: var(--hmr-text);
}

.hmr-phase2-box {
    margin-top: 24px;
    padding: 14px 16px;
    border: 1px solid rgba(232, 93, 32, 0.2);
    background: rgba(232, 93, 32, 0.04);
}

.hmr-phase2-label {
    font-family: var(--f-mono);
    font-size: 8px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(232, 93, 32, 0.5);
    margin-bottom: 5px;
    display: block;
}

.hmr-phase2-text {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(232, 93, 32, 0.7);
}


/* ─────────────────────────────────────────────────
   11. FOOTER BOTTOM BAR
───────────────────────────────────────────────── */
.hmr-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 18px 80px;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: rgba(106, 127, 142, 0.4);
}

.hmr-footer-ticker {
    display: flex;
    gap: 24px;
}

.hmr-footer-ticker span::before {
    content: '· ';
    color: rgba(41, 181, 232, 0.25);
}

.hmr-footer-ticker span:first-child::before {
    content: '';
}


/* ─────────────────────────────────────────────────
   12. CONFIGURATOR PAGE — MOBILE IMAGE FIX
───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cfg-viewer {
        height: 45vh !important;
        min-height: 220px !important;
    }

    .cfg-viewer .cfg-img-wrap {
        height: 100% !important;
    }

    .cfg-viewer .cfg-img-wrap img {
        object-fit: contain !important;
        width: 100% !important;
        height: 100% !important;
    }
}


/* ─────────────────────────────────────────────────
   13. RESPONSIVE — THEME CHROME
───────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 1060px) {
    #hmr-header {
        padding: 0 28px;
    }
    .hmr-nav > li > a,
    .hmr-nav > li > button {
        padding: 8px 10px;
        font-size: 11px;
    }
    .hmr-footer-main {
        grid-template-columns: 1fr 1fr;
        padding: 48px 40px 40px;
        gap: 36px;
    }
    .hmr-footer-brand {
        grid-column: 1 / -1;
    }
    .hmr-footer-bottom {
        padding: 18px 40px;
    }
}

/* Mobile — nav collapses to hamburger */
@media (max-width: 700px) {
    #hmr-header {
        padding: 0 20px;
        height: 56px;
        --hmr-header-h: 56px;
    }
    .hmr-nav-wrap,
    .hmr-nav-cta {
        display: none;
    }
    .hmr-burger {
        display: flex;
    }
    .hmr-footer-main {
        grid-template-columns: 1fr;
        padding: 40px 24px 32px;
        gap: 32px;
    }
    .hmr-footer-brand {
        grid-column: auto;
    }
    .hmr-footer-bottom {
        padding: 16px 24px;
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }
    .hmr-footer-ticker {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
}

/* Small mobile */
@media (max-width: 400px) {
    .hmr-mob-nav > li > a,
    .hmr-mob-nav > li > button {
        font-size: 22px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   14. HOMEPAGE MOBILE FIXES
═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    .colours-cta-section {
        min-height: auto !important;
        flex-direction: column !important;
    }
    .colours-cta-bg {
        display: none !important;
    }
    .colours-cta-overlay {
        display: none !important;
    }
    .colours-cta-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 48px 24px !important;
        text-align: left !important;
        position: relative !important;
    }
    .colours-cta-headline {
        white-space: normal !important;
        word-break: normal !important;
        font-size: clamp(28px, 8vw, 42px) !important;
        line-height: 0.95 !important;
    }
    .colours-cta-body {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
    .colours-cta-btns {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .colours-cta-btns .btn {
        text-align: center !important;
        justify-content: center !important;
    }

    .config-top {
        padding: 48px 24px 60px !important;
    }
    .config-headline {
        font-size: clamp(24px, 7vw, 36px) !important;
    }
    .config-white {
        grid-template-columns: 1fr !important;
        padding: 32px 24px 24px !important;
        margin-top: -40px !important;
        gap: 24px !important;
        text-align: center !important;
    }
    .config-logo-block {
        align-items: center !important;
    }
    img.cfg-logo,
    .config-logo-block img.cfg-logo {
        max-width: 100px !important;
        width: 100px !important;
    }
    .config-built {
        text-align: center !important;
        border-left: none !important;
        border-bottom: 3px solid var(--cyan, #29B5E8) !important;
        padding-left: 0 !important;
        padding-bottom: 12px !important;
    }
    .config-boat-right {
        display: flex !important;
        justify-content: center !important;
    }
    .config-boat-right img {
        max-width: 300px !important;
        width: 85vw !important;
        margin: 0 auto !important;
    }

    .config-orders {
        padding: 20px 0 32px !important;
    }
    .config-orders-title {
        padding: 0 24px !important;
        font-size: 14px !important;
    }
    .config-boats-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory !important;
        gap: 8px !important;
        padding: 8px 24px !important;
        scrollbar-width: none !important;
    }
    .config-boats-row::-webkit-scrollbar {
        display: none !important;
    }
    .cbt {
        flex: 0 0 calc((100vw - 64px) / 3) !important;
        min-width: calc((100vw - 64px) / 3) !important;
        max-width: calc((100vw - 64px) / 3) !important;
        scroll-snap-align: start !important;
        aspect-ratio: 4 / 3 !important;
    }

    .built-section {
        min-height: auto !important;
    }
    .built-content {
        padding: 48px 24px !important;
        max-width: 100% !important;
    }
    .built-headline {
        font-size: clamp(32px, 8vw, 48px) !important;
    }

    .gallery-strip {
        padding: 24px !important;
    }
    .gallery-strip-inner {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .mc-image {
        height: 220px !important;
    }

    .why-features {
        grid-template-columns: 1fr !important;
    }

    .cta-section {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .cta-right {
        align-items: stretch !important;
    }
    .cta-right .btn {
        text-align: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 400px) {
    .colours-cta-headline {
        font-size: 26px !important;
    }
    .config-headline {
        font-size: 22px !important;
    }
    img.cfg-logo,
    .config-logo-block img.cfg-logo {
        max-width: 80px !important;
        width: 80px !important;
    }
    .config-boat-right img {
        max-width: 260px !important;
    }
}


/* ─────────────────────────────────────────────────
   15. CONFIGURATOR — HEADER OFFSET
   Pushes the configurator module below the fixed
   site header. Uses --hmr-header-h (64px desktop,
   56px mobile via the override in section 13).
───────────────────────────────────────────────── */

/* Configurator's own header bar — push below site nav */
.cfg-header {
    top: var(--hmr-header-h) !important;
}

/* Subheader angle tabs — push below site nav */
.cfg-subheader {
    top: var(--hmr-header-h) !important;
}

/* Desktop: layout fills viewport below site header */
@media (min-width: 901px) {
    .cfg-layout {
        height: calc(100vh - var(--hmr-header-h)) !important;
        margin-top: var(--hmr-header-h) !important;
    }
}

/* Mobile: ensure cfg-header stays visible, layout pushed down */
@media (max-width: 900px) {
    .cfg-header {
        display: flex !important;
    }
    .cfg-layout {
        margin-top: var(--hmr-header-h) !important;
    }
    .cfg-viewer {
        top: calc(var(--hmr-header-h) + 36px) !important;
    }
}

/* ─────────────────────────────────────────────────
   16. WP PAGE TITLE — HIDE ON CONFIGURATOR
   Total renders a page title heading above the
   page content. Kill it on the configurator page
   so it sits flush below the site header.
   body class comes from hmr_body_classes() in
   functions.php which adds page-{slug}.
───────────────────────────────────────────────── */
body.page-configurator-v2 .page-header,
body.page-configurator-v2 .wpex-page-header,
body.page-configurator-v2 .entry-title,
body.page-get-a-quote .page-header,
body.page-get-a-quote .wpex-page-header,
body.page-get-a-quote .entry-title {
    display: none !important;
}


/* ─────────────────────────────────────────────────
   17. GLOBAL HEADLINE HYPHENATION GUARD
   Prevents browsers from auto-breaking display
   headings mid-word at any viewport width.
   Applies sitewide — homepage, model pages,
   about, contact, all WPBakery-built pages.
───────────────────────────────────────────────── */
h1, h2, h3, h4,
.entry-title,
.wpex-heading,
.vc_custom_heading,
.wpb_content_element h2,
.wpb_content_element h3 {
    -webkit-hyphens: none !important;
    -ms-hyphens:     none !important;
    hyphens:         none !important;
    word-break:      normal !important;
    overflow-wrap:   normal !important;
}

/* Tighten clamp on known-narrow headline contexts at tablet */
@media (max-width: 1200px) {
    .why-headline,
    .lw-headline {
        font-size: clamp(26px, 3.2vw, 44px) !important;
    }
}

/* Mobile headline scale — prevent overflow on all pages */
@media (max-width: 600px) {
    h1 { font-size: clamp(28px, 9vw, 44px) !important; line-height: .92 !important; }
    h2 { font-size: clamp(24px, 7.5vw, 38px) !important; line-height: .94 !important; }
    h3 { font-size: clamp(18px, 5.5vw, 26px) !important; }
}


/* ─────────────────────────────────────────────────
   18. GLOBAL IMAGE & SECTION BRIGHTNESS
   Site-wide rule: images and video should read
   clearly. Overlays pull back to let background
   media breathe across all pages.

   Targets both the homepage custom HTML classes
   and common WPBakery / Total theme patterns.
───────────────────────────────────────────────── */

/* ── Hero / full-bleed video sections ── */
.hero-media video,
.hero-media img,
.wpex-bg-video video {
    filter: brightness(.75) saturate(.9) !important;
}

/* ── Section background images (WPBakery row bg) ── */
.vc_row[style*="background-image"] > .vc_column-inner > .wpb_wrapper img,
.wpex-row-bg {
    filter: brightness(.72) saturate(.88) !important;
}

/* ── In-content editorial / action images ── */
.lw-image img,
.gs-cell img,
.mc-image img {
    filter: saturate(.92) brightness(1.05) !important;
}

/* ── Full-bleed overlay sections — ease off the dark ── */
.built-bg img,
.colours-cta-bg img {
    filter: brightness(.70) saturate(.88) !important;
}

/* ── WPBakery single image elements ── */
.wpb_single_image img {
    filter: brightness(1.0) saturate(.95);
}

/* ── Gallery images ── */
.gallery img,
.wpex-gallery-entry img {
    filter: saturate(.9) brightness(1.0);
    transition: filter .4s ease;
}
.gallery img:hover,
.wpex-gallery-entry img:hover {
    filter: saturate(1.05) brightness(1.06);
}

/* Kills WP page title above the hero block */
body.page-racing-boats .page-header,
body.page-racing-boats .wpex-page-header,
body.page-racing-boats .entry-title { display: none !important; }

/* Scroll offset using child theme's --hmr-header-h variable */
body.page-racing-boats section[id],
body.page-racing-boats .hero { scroll-margin-top: calc(var(--hmr-header-h) + 12px) !important; }

/* ═══════════════════════════════════════════════════════════════
   HMR MOBILE MENU — Logo + Close button
   Append this to your child theme's style.css
═══════════════════════════════════════════════════════════════ */

#hmr-mobile-menu .hmr-mob-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 22px;
    border-bottom:1px solid rgba(255,255,255,0.1);
    margin-bottom:18px;
}

#hmr-mobile-menu .hmr-mob-logo{
    display:block;
    line-height:0;
}
#hmr-mobile-menu .hmr-mob-logo img{
    height:44px;
    width:auto;
    display:block;
}

#hmr-mobile-menu .hmr-mob-close{
    background:transparent;
    border:1px solid rgba(255,255,255,0.25);
    width:44px;
    height:44px;
    border-radius:3px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    cursor:pointer;
    padding:0;
    transition:all 0.2s;
    -webkit-tap-highlight-color:transparent;
}

#hmr-mobile-menu .hmr-mob-close:hover,
#hmr-mobile-menu .hmr-mob-close:active,
#hmr-mobile-menu .hmr-mob-close:focus{
    border-color:#E85D20;
    color:#E85D20;
    background:rgba(232, 93, 32, 0.08);
    outline:none;
}

#hmr-mobile-menu .hmr-mob-close svg{
    display:block;
    stroke:currentColor;
}
 
/* ═══════════════════════════════════════════════════════════════
   HMR THEME — v1.1.8 PATCH  (clean up artefact + alignment)
   REPLACES v1.1.7 entirely. Delete previous block first.

   WHAT'S FIXED FROM v1.1.7:
   - Kill leftover border-bottom on .config-built (from original
     style.css section 14 @media rule) that was drawing a cyan
     L-shape artefact under the text
   - Tighten text alignment: remove any inherited padding/margin
     on .config-built-small and .config-built-big so the text
     sits snug against the cyan left rule

   Everything else from v1.1.7 stays identical.
═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────
   19. LOGO SCALE-UP — HEADER
───────────────────────────────────────────────── */
.hmr-logo img {
    height: 48px !important;
}

@media (max-width: 700px) {
    .hmr-logo img {
        height: 42px !important;
    }
    #hmr-header {
        height: 64px !important;
        --hmr-header-h: 64px !important;
    }
}


/* ─────────────────────────────────────────────────
   20. MOBILE OVERLAY MENU LOGO
───────────────────────────────────────────────── */
#hmr-mobile-menu .hmr-mob-logo img {
    height: 64px !important;
}


/* ─────────────────────────────────────────────────
   21. WHITE BANDS — FULL-BLEED VIA NEGATIVE MARGIN
───────────────────────────────────────────────── */
@media (max-width: 900px) {
    body .config-section .config-white,
    body .config-section .config-orders {
        margin-left: -40px !important;
        margin-right: -40px !important;
    }
}

@media (max-width: 600px) {
    body .config-section .config-white,
    body .config-section .config-orders {
        margin-left: -24px !important;
        margin-right: -24px !important;
    }
}


/* ─────────────────────────────────────────────────
   22. VIDEO HERO — RESTORE PROPER SIZE
───────────────────────────────────────────────── */
@media (max-width: 900px) {
    body .config-section .config-video-hero {
        padding: 28px 20px 0 !important;
    }
    body .config-section .config-video-hero-inner {
        aspect-ratio: 16 / 9 !important;
    }
}

@media (max-width: 600px) {
    body .config-section .config-video-hero {
        padding: 24px 16px 0 !important;
    }
    body .config-section .config-video-hero-inner {
        aspect-ratio: 16 / 9 !important;
    }
}


/* ─────────────────────────────────────────────────
   23. .CONFIG-UNDER — INLINE CREST + RACE
   With the cleanup for the border artefact and
   text alignment.
───────────────────────────────────────────────── */
@media (max-width: 900px) {
    body .config-section .config-under {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto !important;
        column-gap: 16px !important;
        row-gap: 20px !important;
        align-items: center !important;
        padding: 28px 24px 24px !important;
        text-align: left !important;
        justify-items: start !important;
    }

    /* Logo — col 1, row 1 */
    body .config-section .config-under .config-logo-block {
        grid-column: 1 !important;
        grid-row: 1 !important;
        padding-left: 0 !important;
        margin: 0 !important;
        align-items: center !important;
    }

    body .config-section .config-under img.cfg-logo {
        width: 140px !important;
        max-width: 140px !important;
        height: auto !important;
        margin: 0 !important;
    }

    /* Text block — col 2, row 1 */
    /* CRITICAL: border-bottom:none kills the cyan L-shape artefact */
    body .config-section .config-under .config-built {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: auto !important;
        margin: 0 !important;
        padding: 6px 0 6px 14px !important;
        border-left: 3px solid var(--cyan, #29B5E8) !important;
        border-top: none !important;
        border-right: none !important;
        border-bottom: none !important;
        text-align: left !important;
    }

    /* Text elements sit flush left against the cyan rule */
    body .config-section .config-under .config-built-small,
    body .config-section .config-under .config-built-big {
        margin-left: 0 !important;
        padding-left: 0 !important;
        text-align: left !important;
    }

    body .config-section .config-under .config-built-small {
        font-size: 12px !important;
        letter-spacing: 0.22em !important;
        margin-bottom: 2px !important;
        margin-top: 0 !important;
        display: block !important;
    }

    body .config-section .config-under .config-built-big {
        font-size: clamp(32px, 9vw, 48px) !important;
        line-height: 0.9 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: block !important;
    }

    /* CTA — spans both cols, row 2 */
    body .config-section .config-under .config-cta-wrap {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        padding-left: 0 !important;
        border-left: none !important;
        align-items: stretch !important;
    }

    body .config-section .config-under .config-launch-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 20px !important;
    }

    body .config-section .config-under .config-launch-sub {
        margin-top: 8px !important;
        text-align: left !important;
    }


    /* ─────────────────────────────────────────────
       24. .CONFIG-ORDERS — carousel edge-to-edge
    ───────────────────────────────────────────── */
    body .config-section .config-orders {
        padding: 20px 24px 40px !important;
    }

    body .config-section .config-orders .config-boats-row {
        margin-left: -24px !important;
        margin-right: -24px !important;
    }
}


/* ─────────────────────────────────────────────────
   SMALL MOBILE (≤400px)
───────────────────────────────────────────────── */
@media (max-width: 400px) {
    .hmr-logo img {
        height: 38px !important;
    }
    #hmr-mobile-menu .hmr-mob-logo img {
        height: 56px !important;
    }
    body .config-section .config-under {
        padding: 24px 18px 22px !important;
        column-gap: 12px !important;
    }
    body .config-section .config-under img.cfg-logo {
        width: 110px !important;
        max-width: 110px !important;
    }
    body .config-section .config-under .config-built {
        padding-left: 10px !important;
    }
    body .config-section .config-under .config-built-big {
        font-size: clamp(28px, 10vw, 44px) !important;
    }
    body .config-section .config-orders {
        padding: 16px 18px 36px !important;
    }
    body .config-section .config-orders .config-boats-row {
        margin-left: -18px !important;
        margin-right: -18px !important;
    }
}