/*
 * CaribPubsPro visual overrides.
 * Loaded after Vexora and legacy presentation CSS.
 * Visual rules only: no generated content, no link destinations.
 */

/* Header CTA contrast: keep text readable on dark backgrounds. */
header .wp-block-button__link,
header a.wp-element-button,
header .wp-block-button a {}

/* Preserve gold primary CTA readability if Gutenberg supplies a light/gold button. */
header .has-background[style*="background-color:#eb5045"],
header .has-background[style*="background-color: #eb5045"] {
	color: #ffffff !important;
}

/* Gutenberg buttons remain clickable and visually above decorative layers. */
.wp-block-button,
.wp-block-button__link {
	position: relative;
	z-index: 2;
}

/* Avoid decorative pseudo-elements intercepting clicks. */
.cpp-editable-homepage *::before,
.cpp-editable-homepage *::after {
	pointer-events: none;
}

/* Current Home page is authoritative; do not visually hide normal Gutenberg content. */
.cpp-editable-homepage > .wp-block-post-content,
.cpp-editable-homepage .entry-content {
	visibility: visible !important;
	opacity: 1 !important;
}


/* Gutenberg visual authority — 2.0.3
 * The theme may shape and space buttons, but it does not own colors chosen
 * explicitly in Gutenberg.
 */
.cpp-editable-homepage .wp-block-button__link[style*="background"],
.cpp-editable-homepage .wp-block-button__link.has-background {
  background-image: none;
}


/* Final Gutenberg button authority.
 * Vexora/global styles may use shorthand backgrounds or !important.
 * Gutenberg's explicit background/text classes remain the source of truth.
 */
.cpp-editable-homepage .wp-block-button__link.has-background {
  background-image: none !important;
}


/* 2.0.7 — CaribPubsPro approved branding only. */
.wp-block-site-title .cpp-brand-base{color:#050505}
.wp-block-site-title .cpp-brand-pro{color:#d62828}
.vx-header .wp-block-site-title a{color:#050505!important}
.vx-footer .wp-block-site-title .cpp-brand-base{color:#fff}
.vx-footer .wp-block-site-title .cpp-brand-pro{color:#e3262e}
.vx-footer img[src*="cpp-logo-dark.webp"]{border-radius:50%;object-fit:cover}



/* Keep the actual Site Title text in the DOM for accessibility;
   only its visual rendering is replaced by the approved brand image. */
header .wp-block-site-title .cpp-brand-base,
header .wp-block-site-title .cpp-brand-pro,
.wp-site-blocks > header .wp-block-site-title .cpp-brand-base,
.wp-site-blocks > header .wp-block-site-title .cpp-brand-pro,
.wp-block-template-part[area="header"] .wp-block-site-title .cpp-brand-base,
.wp-block-template-part[area="header"] .wp-block-site-title .cpp-brand-pro {
    color: transparent !important;
}

/* Compact display on smaller screens without changing the source image. */
@media (max-width: 700px) {
    header .wp-block-site-title a,
    .wp-site-blocks > header .wp-block-site-title a,
    .wp-block-template-part[area="header"] .wp-block-site-title a {
        width: 150px !important;
        height: 87px !important;
    }
}


/* =========================================================
   2.0.9 — Global header brand image
   Visual-only: inserts the approved brand image into the
   existing shared navigation header. Menu mechanics unchanged.
   ========================================================= */

.vx-header nav.vx-nav {
    width: 100%;
}

.vx-header .cpp-global-header-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-right: auto;
    line-height: 0;
    text-decoration: none;
}

.vx-header .cpp-global-header-brand img {
    display: block;
    width: 190px;
    height: 110px;
    object-fit: contain;
}

@media (max-width: 700px) {
    .vx-header .cpp-global-header-brand img {
        width: 150px;
        height: 87px;
    }
}


/* 2.0.10 — Ensure the injected brand occupies the left side of the shared header. */
.vx-header nav.vx-nav {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}
.vx-header nav.vx-nav > .cpp-global-header-brand {
    order: -10 !important;
    margin-right: auto !important;
}
.vx-header nav.vx-nav > .wp-block-navigation__responsive-container-open,
.vx-header nav.vx-nav > .wp-block-navigation__responsive-container {
    flex: 0 0 auto;
}


/* =========================================================
   2.0.11 — Shared header cleanup
   Keep one approved brand, compact the header, hide legacy CTA.
   No navigation/Gateway mechanics changed.
   ========================================================= */

/* If an older/static brand already exists in the header, hide it;
   2.0.10's cpp-global-header-brand remains the single visible brand. */
.vx-header nav.vx-nav > a:not(.cpp-global-header-brand):has(img[src*="header-brand"]),
.vx-header nav.vx-nav > a:not(.cpp-global-header-brand):has(img[src*="CaribPubs"]),
.vx-header nav.vx-nav > a:not(.cpp-global-header-brand):has(img[src*="caribpubs"]) {
    display: none !important;
}

/* Hide the legacy Get in Touch CTA in the shared site header only. */
.vx-header .wp-block-button,
.vx-header .wp-block-buttons {
    display: none !important;
}

/* Compact the shared header. */
.vx-header {
    min-height: 0 !important;
}

.vx-header nav.vx-nav {
    min-height: 86px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    align-items: center !important;
}

/* Approved single brand size. */
.vx-header .cpp-global-header-brand img {
    width: 190px !important;
    height: 70px !important;
    object-fit: contain !important;
}

@media (max-width: 700px) {
    .vx-header nav.vx-nav {
        min-height: 72px !important;
    }

    .vx-header .cpp-global-header-brand img {
        width: 150px !important;
        height: 58px !important;
    }
}


/* =========================================================
   2.0.13 — Prominent global header brand
   Larger single brand treatment, matching approved mockup.
   Navigation remains on the right; no mechanics changed.
   ========================================================= */

.vx-header nav.vx-nav {
    min-height: 132px !important;
    padding: 18px 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 36px !important;
}

.vx-header .cpp-global-header-brand {
    margin-right: auto !important;
    flex: 0 0 auto !important;
}

.vx-header .cpp-global-header-brand img {
    width: 430px !important;
    height: 110px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.vx-header nav.vx-nav .wp-block-navigation__container {
    margin-left: auto !important;
    justify-content: flex-end !important;
    gap: 34px !important;
}

.vx-header nav.vx-nav .wp-block-navigation-item__content {
    font-size: 18px !important;
    font-weight: 500 !important;
}

@media (max-width: 1100px) {
    .vx-header .cpp-global-header-brand img {
        width: 330px !important;
        height: 92px !important;
    }

    .vx-header nav.vx-nav {
        padding: 14px 26px !important;
        gap: 24px !important;
    }

    .vx-header nav.vx-nav .wp-block-navigation__container {
        gap: 22px !important;
    }
}

@media (max-width: 700px) {
    .vx-header nav.vx-nav {
        min-height: 90px !important;
        padding: 10px 16px !important;
    }

    .vx-header .cpp-global-header-brand img {
        width: 230px !important;
        height: 70px !important;
    }
}


/* =========================================================
   2.0.14 — Header menu position
   Move desktop navigation inward from the far-right edge.
   Visual positioning only; links and menu mechanics unchanged.
   ========================================================= */

@media (min-width: 1101px) {
    .vx-header nav.vx-nav .wp-block-navigation__container {
        margin-left: auto !important;
        margin-right: clamp(90px, 10vw, 180px) !important;
        justify-content: flex-end !important;
    }
}

@media (min-width: 701px) and (max-width: 1100px) {
    .vx-header nav.vx-nav .wp-block-navigation__container {
        margin-left: auto !important;
        margin-right: 36px !important;
    }
}


/* =========================================================
   2.0.15 — Responsive header layout + Contact Us
   Visual/header-only update. Existing menu mechanics remain.
   ========================================================= */

/* Desktop: logo left, menu more central, contact button right */
@media (min-width: 1101px) {
    .vx-header nav.vx-nav {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        column-gap: 54px !important;
        padding-left: 44px !important;
        padding-right: 44px !important;
    }

    .vx-header .cpp-global-header-brand {
        grid-column: 1 !important;
        margin: 0 !important;
    }

    .vx-header nav.vx-nav .wp-block-navigation__container {
        grid-column: 2 !important;
        justify-self: center !important;
        margin: 0 !important;
        gap: 30px !important;
    }

    .vx-header .cpp-header-contact {
        grid-column: 3 !important;
        justify-self: end !important;
    }
}

/* Shared Contact Us button */
.vx-header .cpp-header-contact {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 10px 22px !important;
    border: 1.5px solid #c49a2c !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.vx-header .cpp-header-contact:hover,
.vx-header .cpp-header-contact:focus {
    background: #8b1e32 !important;
    border-color: #8b1e32 !important;
    color: #ffffff !important;
}

/* Tablet */
@media (min-width: 701px) and (max-width: 1100px) {
    .vx-header nav.vx-nav {
        display: grid !important;
        grid-template-columns: auto 1fr auto !important;
        align-items: center !important;
        column-gap: 22px !important;
        padding: 12px 20px !important;
    }

    .vx-header .cpp-global-header-brand img {
        width: 245px !important;
        height: 76px !important;
    }

    .vx-header nav.vx-nav .wp-block-navigation__container {
        margin: 0 !important;
        justify-self: center !important;
        gap: 16px !important;
    }

    .vx-header nav.vx-nav .wp-block-navigation-item__content {
        font-size: 15px !important;
    }

    .vx-header .cpp-header-contact {
        min-height: 42px !important;
        padding: 8px 14px !important;
        font-size: 14px !important;
    }
}

/* Phone: preserve mobile/hamburger menu mechanics, compact brand and contact */
@media (max-width: 700px) {
    .vx-header nav.vx-nav {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 12px !important;
    }

    .vx-header .cpp-global-header-brand {
        margin-right: auto !important;
    }

    .vx-header .cpp-global-header-brand img {
        width: 180px !important;
        height: 60px !important;
    }

    .vx-header .cpp-header-contact {
        min-height: 38px !important;
        padding: 7px 11px !important;
        font-size: 13px !important;
        border-radius: 9px !important;
    }
}

/* =========================================================
   2.0.16 — Restore visible desktop/tablet navigation
   The Vexora navigation block renders the menu list inside
   WordPress's responsive-container wrapper. 2.0.15 positioned
   the nested list as a grid item, which cannot affect the nav
   grid directly and could leave only the overlay-menu trigger
   visible at desktop widths.
   ========================================================= */
@media (min-width: 701px) {
    /* Desktop/tablet must show the normal menu, not the overlay trigger. */
    .vx-header nav.vx-nav > .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    /* Make the actual WordPress responsive wrapper the middle grid item. */
    .vx-header nav.vx-nav > .wp-block-navigation__responsive-container {
        display: flex !important;
        position: static !important;
        inset: auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        color: inherit !important;
        z-index: auto !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        justify-self: center !important;
        align-self: center !important;
    }

    .vx-header nav.vx-nav > .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close,
    .vx-header nav.vx-nav > .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog,
    .vx-header nav.vx-nav > .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
        display: flex !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .vx-header nav.vx-nav > .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    .vx-header nav.vx-nav .wp-block-navigation__container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .vx-header nav.vx-nav .wp-block-navigation-item {
        display: flex !important;
        width: auto !important;
    }
}

/* Keep the Contact Us link in the right grid column on desktop/tablet. */
@media (min-width: 701px) {
    .vx-header .cpp-header-contact {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }
}


/* =========================================================
   2.0.17 — Make the mobile menu trigger unmistakably visible
   The WordPress navigation trigger inherited a very dark color
   from the header, leaving only two nearly invisible lines.
   Mobile-only visual fix; menu mechanics remain WordPress-native.
   ========================================================= */
@media (max-width: 700px) {
    .vx-header nav.vx-nav > .wp-block-navigation__responsive-container-open {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        padding: 0 !important;
        margin: 0 2px !important;
        color: #f4c95d !important;
        background: #071b2c !important;
        border: 1px solid rgba(244,201,93,.65) !important;
        border-radius: 9px !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 5 !important;
    }

    .vx-header nav.vx-nav > .wp-block-navigation__responsive-container-open svg {
        display: block !important;
        width: 22px !important;
        height: 22px !important;
        fill: currentColor !important;
        stroke: currentColor !important;
        opacity: 1 !important;
    }

    .vx-header nav.vx-nav > .wp-block-navigation__responsive-container-open svg path,
    .vx-header nav.vx-nav > .wp-block-navigation__responsive-container-open svg line {
        fill: currentColor !important;
        stroke: currentColor !important;
        opacity: 1 !important;
    }
}


/* =========================================================
   2.0.18 — Robust mobile menu visibility
   Targets the actual WordPress/Vexora menu button wherever it
   sits inside vx-nav. JS also marks it with a visual-only class.
   No menu click/open behavior is replaced.
   ========================================================= */
@media (max-width: 700px) {
    .vx-header nav.vx-nav .wp-block-navigation__responsive-container-open,
    .vx-header nav.vx-nav .cpp-mobile-menu-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        padding: 0 !important;
        margin: 0 2px !important;
        border: 1px solid #d7ad35 !important;
        border-radius: 9px !important;
        background-color: #071b2c !important;
        color: #f4c95d !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 20 !important;
        box-sizing: border-box !important;
    }

    /* Draw our own clear 3-line icon, independent of inherited SVG colors. */
    .vx-header nav.vx-nav .wp-block-navigation__responsive-container-open::after,
    .vx-header nav.vx-nav .cpp-mobile-menu-trigger::after {
        content: "" !important;
        display: block !important;
        width: 20px !important;
        height: 14px !important;
        background:
            linear-gradient(#f4c95d,#f4c95d) 0 0 / 20px 2px no-repeat,
            linear-gradient(#f4c95d,#f4c95d) 0 6px / 20px 2px no-repeat,
            linear-gradient(#f4c95d,#f4c95d) 0 12px / 20px 2px no-repeat !important;
    }

    .vx-header nav.vx-nav .wp-block-navigation__responsive-container-open svg,
    .vx-header nav.vx-nav .cpp-mobile-menu-trigger svg {
        display: none !important;
    }
}