/*
Theme Name: Singapore Yachting Festival
Author: Corsiva Lab Team (Bryan)
Description: Singapore Yachting Festival
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: Singapore Yachting Festival 
*/

@import url("https://fonts.googleapis.com/css2?family=Karla:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap");

/*
 * Lovable gold (safe lock) — DO NOT use escaped Tailwind selectors here
 * (e.g. .bg-gold/90). Backslash escapes break in WP Theme Editor and can
 * invalidate the rest of style.css (buttons disappear).
 *
 * Lovable token: oklch(0.74 0.08 80) = #c5ab71
 * Soft hover:    oklch(0.86 0.05 85) ≈ #d9c896
 * Navy on gold:  #243974
 *
 * Only override CSS variables + Zoho submit background-color (no display/size).
 */
html {
    --syf-gold: #c5ab71;
    --syf-gold-soft: #d9c896;
    --color-gold: #c5ab71;
    --color-gold-soft: #d9c896;
    --syf-navy-soft: color-mix(in srgb, var(--syf-navy, #243974) 78%, #fff);
    /* Display font — replace Cormorant Garamond site-wide (body stays Karla) */
    --font-display: "Crimson Text", Georgia, "Times New Roman", serif !important;
}

/* Force ALL display headings onto Crimson Text
   (beats Tailwind .font-display { font-family: Cormorant Garamond } in syf.css) */
h1,
h2,
h3,
h4,
h5,
h6,
.font-display,
.syf-footer-tagline,
.syf-hero-eyebrow,
.syf-hero-headline,
#countdown [data-unit] {
    font-family: "Crimson Text", Georgia, "Times New Roman", serif !important;
}

/* Zoho CTAs — color only; keep Zoho/theme layout rules intact */
body.syf-variant-mailing-list .zfbtnSubmit.btnElem,
body.syf-variant-popup .zfbtnSubmit.btnElem,
body.syf-variant-enquiry .zfbtnSubmit.btnElem,
body.syf-variant-footer .zfbtnSubmit.btnElem {
    background-color: #c5ab71 !important;
    color: #243974 !important;
}

body.syf-variant-mailing-list .zfbtnSubmit.btnElem:hover,
body.syf-variant-mailing-list .zfbtnSubmit.btnElem:focus,
body.syf-variant-popup .zfbtnSubmit.btnElem:hover,
body.syf-variant-popup .zfbtnSubmit.btnElem:focus,
body.syf-variant-enquiry .zfbtnSubmit.btnElem:hover,
body.syf-variant-enquiry .zfbtnSubmit.btnElem:focus,
body.syf-variant-footer .zfbtnSubmit.btnElem:hover,
body.syf-variant-footer .zfbtnSubmit.btnElem:focus {
    background-color: #d9c896 !important;
    color: #243974 !important;
}

body.syf-variant-mailing-list .zfbtnSubmit.btnElem em,
body.syf-variant-popup .zfbtnSubmit.btnElem em,
body.syf-variant-enquiry .zfbtnSubmit.btnElem em,
body.syf-variant-footer .zfbtnSubmit.btnElem em {
    color: inherit !important;
}

.syf-news-content h2 {
    font-family: var(--font-display, inherit);
    font-size: clamp(1.5rem, 2vw, 1.875rem);
    line-height: 1.2;
    color: var(--color-navy, #0b1f3a);
    padding-top: 1rem;
}

.syf-news-content ul {
    list-style: disc;
    padding-left: 1.5rem;
}

.syf-news-content ul li + li {
    margin-top: 0.5rem;
}

.syf-news-content blockquote {
    border-left: 2px solid var(--color-gold, #c5ab71);
    padding-left: 1.5rem;
    margin: 2rem 0;
}

.syf-news-content blockquote p {
    font-family: var(--font-display, inherit);
    font-size: 1.375rem;
    font-style: italic;
    line-height: 1.35;
    color: var(--color-navy, #0b1f3a);
}

.syf-news-content blockquote cite {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-style: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(0 0 0 / 0.6);
}

details[data-syf-news-year] summary .syf-news-year-chevron {
    transition: transform 0.25s ease;
}

details[data-syf-news-year][open] summary .syf-news-year-chevron {
    transform: rotate(180deg);
}

/* Media partners logo wall — square cells, 6 per row on desktop */
[data-syf-media-partners] .grid {
    gap: 0;
    row-gap: 0;
    column-gap: 0;
    margin-top: 0;
}

@media (min-width: 1024px) {
    [data-syf-media-partners] .grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

[data-syf-media-partners] .h-16 {
    aspect-ratio: 1 / 1;
    height: auto;
}

[data-syf-media-partners] .syf-logo-wall-image {
    max-height: 70%;
    max-width: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
}

[data-syf-media-partners] a {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

/* Hotfixes — Hero YouTube / video background cover (desktop + mobile) */
.syf-hero-youtube {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Keep shield/frame z-index inside this layer so navy/teal overlays stay on top */
    isolation: isolate;
    overflow: hidden;
    pointer-events: none;
    background: #0b1f3a;
}

.syf-hero-youtube__frame {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 177.78vh; /* 100 * 16/9 */
    height: 56.25vw; /* 100 * 9/16 */
    min-width: 100%;
    min-height: 100%;
    border: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Fully hide until JS confirms YouTube chrome is gone */
    opacity: 0;
    visibility: hidden;
}

.syf-hero-youtube.is-media-ready .syf-hero-youtube__frame,
.syf-hero-youtube.is-playing .syf-hero-youtube__frame {
    opacity: 1;
    visibility: visible;
}

.syf-hero-youtube__frame iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    pointer-events: none !important;
}

/* Portrait phones: scale cover past letterboxing / dynamic toolbar viewport */
@media (max-width: 1023px) {
    .syf-hero-youtube__frame {
        width: max(100vw, calc(100dvh * 16 / 9));
        height: max(100dvh, calc(100vw * 9 / 16));
        min-width: 100%;
        min-height: 100%;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@media (max-width: 767px) {
    .syf-hero-youtube__frame {
        transform: translate(-50%, -50%) scale(1.45);
    }
}

/* Opaque cover — CMS poster img or JS-picked YouTube thumb (never tiny hqdefault first) */
.syf-hero-youtube__shield {
    position: absolute;
    inset: 0;
    z-index: 2;
    background-color: #0b1f3a;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
    visibility: visible;
    transition: none;
    pointer-events: auto;
    overflow: hidden;
}

.syf-hero-youtube__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
}

/* Instant cut — never fade (fade shows YouTube pause mid-transition) */
.syf-hero-youtube.is-playing .syf-hero-youtube__shield {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}

/* Catch clicks so YouTube chrome cannot be focused / revealed */
.syf-hero-youtube::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: auto;
}

/* Navy / teal darkening overlays — always above media + YouTube shield */
.syf-hero-overlay {
    z-index: 1;
    pointer-events: none;
}

.syf-hero-video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.syf-hero-banner {
    object-fit: cover;
    object-position: center center;
}

/* Desktop vs mobile hero media swaps (≤1023px = mobile/tablet) */
.syf-hero-media--mobile {
    display: none !important;
}

@media (max-width: 1023px) {
    .syf-hero-media--desktop {
        display: none !important;
    }

    .syf-hero-media--mobile {
        display: block !important;
    }

    /*
     * No dedicated mobile asset: crop the desktop banner/video from the left
     * so the left side stays in frame on portrait screens.
     * Dedicated .syf-hero-media--mobile assets stay centered below.
     */
    .syf-hero-video:not(.syf-hero-media--mobile),
    .syf-hero-banner:not(.syf-hero-media--mobile),
    .syf-hero-youtube__poster:not(.syf-hero-media--mobile) {
        object-position: left center !important;
    }

    .syf-hero-video.syf-hero-media--mobile,
    .syf-hero-banner.syf-hero-media--mobile,
    .syf-hero-youtube__poster.syf-hero-media--mobile {
        object-position: center center !important;
    }
}

@media (max-width: 767px) {
    .syf-hero-video:not(.syf-hero-media--mobile) {
        min-width: 100%;
        min-height: 100%;
    }
}

/* Hotfixes — mailing popup centered on all viewports (incl. mobile) */
[data-mailinglist-popup] {
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
}

[data-mailinglist-popup] > div {
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ---------- Mobile nav: slide + stable header + burger morph ---------- */
[data-syf-header] > div {
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
}

@media (min-width: 1024px) {
    [data-syf-header] > div {
        padding-top: 1.25rem;
    }
}

html.syf-scroll-locked,
body.syf-scroll-locked {
    overflow: hidden !important;
    overscroll-behavior: none;
    /* Do NOT use position:fixed here — restoring it caused a top-flash + scroll jump on close. */
    touch-action: none;
}

/* Allow scrolling inside the open drawer while page scroll is locked */
body.syf-scroll-locked #syf-mobile-drawer,
body.syf-scroll-locked .syf-mobile-drawer {
    touch-action: pan-y;
}

#syf-mobile-drawer,
.syf-mobile-drawer {
    position: fixed !important;
    inset: 0 !important;
    z-index: 60 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Same solid navy-deep as open header (not #0b1f3a / translucent blur) */
    background: var(--syf-navy-deep, #081543) !important;
    background-color: var(--syf-navy-deep, #081543) !important;
    transform: translate3d(0, -100%, 0);
    visibility: hidden;
    pointer-events: none;
    transition:
        transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.4s;
    will-change: transform;
}

#syf-mobile-drawer[hidden] {
    display: none !important;
}

body.syf-mobile-nav-open #syf-mobile-drawer,
body.syf-mobile-nav-open .syf-mobile-drawer {
    display: block !important;
    transform: translate3d(0, 0, 0);
    visibility: visible;
    pointer-events: auto;
}

/* Closing: keep displayed until JS adds [hidden] after the slide finishes */
#syf-mobile-drawer:not([hidden]) {
    display: block !important;
}

.syf-mobile-drawer__nav {
    /* Clear fixed header + iOS safe area so first items are not covered */
    padding-top: calc(5.75rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px)) !important;
    background: transparent !important;
}

/* Keep header (burger ↔ X) above the open drawer; solid navy-deep = drawer (no blur seam) */
body.syf-mobile-nav-open [data-syf-header],
[data-syf-header].syf-header--nav-open {
    z-index: 70 !important;
    background-image: none !important;
    background-color: var(--syf-navy-deep, #081543) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom-color: transparent !important;
    transition: none !important;
}

body.syf-mobile-nav-open [data-syf-menu-toggle] {
    z-index: 71 !important;
}

/* Animated burger → X */
.syf-burger {
    position: relative;
    display: block;
    width: 22px;
    height: 16px;
}

.syf-burger__line {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.2s ease;
    transform-origin: center;
}

.syf-burger__line:nth-child(1) {
    top: 0;
}

.syf-burger__line:nth-child(2) {
    top: 7px;
}

.syf-burger__line:nth-child(3) {
    top: 14px;
}

body.syf-mobile-nav-open .syf-burger__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

body.syf-mobile-nav-open .syf-burger__line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

body.syf-mobile-nav-open .syf-burger__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Zoho forms — Zoho owns labels/placeholders; site CSS is brand chrome only.
   Popup: underline fields (border-bottom only), no field icons.
   ========================================================================== */

body.syf-variant-popup,
body.syf-variant-mailing-list,
body.syf-variant-enquiry,
body.syf-variant-footer {
    --syf-navy: #243974;
    --syf-gold: #c5ab71;
    --syf-gold-soft: #d9c896;
    --syf-ink: #1a2332;
    --syf-border: #d8d4ce;
}

/* Popup — hide Zoho field icons */
body.syf-variant-popup .ofIconCont svg,
body.syf-variant-popup .ofIconCont .icon,
body.syf-variant-popup .fieldtypeText svg.icon,
body.syf-variant-popup .zfNameContainer svg.icon,
body.syf-variant-popup .zfNameContainer svg.icon-Name,
body.syf-variant-popup em.inputClearDiv,
body.syf-variant-popup .fldDisabledIcn,
body.syf-variant-popup .focus-border,
body.syf-variant-popup [elname="inpCaret"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* Do not inject a fake Last Name icon */
body.syf-variant-popup .zfNameContainer .nameCompLabelWrapper.nameFieldSpaceing > span[elname="compEachElem"]::before {
    content: none !important;
    display: none !important;
}

/* Name First|Last — keep side-by-side in narrow popup iframe */
body.syf-variant-popup .zfNameContainer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.syf-variant-popup .zfNameContainer .nameCompLabelWrapper {
    flex: 1 1 0 !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

body.syf-variant-popup .zfNameContainer .nameCompLabelWrapper > span[elname="compEachElem"] {
    display: block !important;
    position: relative !important;
    width: 100% !important;
}

@media (max-width: 639px) {
    body.syf-variant-popup .zfNameContainer {
        display: flex !important;
        flex-direction: row !important;
        grid-template-columns: none !important;
    }

    body.syf-variant-popup .zfNameContainer .nameCompLabelWrapper {
        width: auto !important;
        margin: 0 !important;
    }
}

/* Field labels — style only if Zoho shows them */
body.syf-variant-popup .zfLabelDiv,
body.syf-variant-mailing-list .zfLabelDiv,
body.syf-variant-enquiry .zfLabelDiv {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

body.syf-variant-popup .formSubInfoText,
body.syf-variant-popup .nameCompLabelWrapper .formSubInfoText {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    font-family: "Karla", system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    color: rgb(255 255 255 / 0.55) !important;
}

/* ==========================================================================
   Zoho mailing POPUP — underline inputs (border-bottom only), no icons
   ========================================================================== */

body.syf-variant-popup #bgLiveDisabledDiv,
body.syf-variant-popup #liveErrPageDiv,
body.syf-variant-popup #dummyInputElement,
body.syf-variant-popup [elname="popup"],
body.syf-variant-popup .backgroundBg,
body.syf-variant-popup .bgWrapper,
body.syf-variant-popup .zfFormHeader,
body.syf-variant-popup .formHeaderInside,
body.syf-variant-popup .topContainer {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

body.syf-variant-popup .mainWrapper,
body.syf-variant-popup #mainWrapper,
body.syf-variant-popup #test {
    min-height: 0 !important;
    height: auto !important;
}

body.syf-variant-popup.standardForm,
body.syf-variant-popup .fieldtext,
body.syf-variant-popup .fieldlabel,
body.syf-variant-popup .fieldLabelTxt,
body.syf-variant-popup .formSubInfoText,
body.syf-variant-popup select,
body.syf-variant-popup button {
    font-family: "Karla", system-ui, sans-serif !important;
}

body.syf-variant-popup .zfLabelDiv,
body.syf-variant-popup .zfLabelDiv label,
body.syf-variant-popup .zfLabelDiv .fieldLabelTxt,
body.syf-variant-popup .zfLabelDiv span:not(.sr-only) {
    color: rgb(255 255 255 / 0.5) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

body.syf-variant-popup .zfLabelDiv .important,
body.syf-variant-popup .zfLabelDiv em.important,
body.syf-variant-popup .zfLabelDiv span.important {
    color: rgb(255 255 255 / 0.5) !important;
    font-style: normal !important;
}

/* Underline inputs — no full box border */
body.syf-variant-popup .fieldtext,
body.syf-variant-popup input.fieldtext,
body.syf-variant-popup input[type="text"],
body.syf-variant-popup input[type="email"],
body.syf-variant-popup .ofIconCont input.fieldtext,
body.syf-variant-popup .ofIconCont input[ui_type="textbox"],
body.syf-variant-popup .zfNameContainer input.fieldtext,
body.syf-variant-popup .zfNameContainer input[ui_type="textbox"] {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #fff !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid rgb(255 255 255 / 0.3) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

body.syf-variant-popup .fieldtypeText.customDropDown select,
body.syf-variant-popup .customDropDown select,
body.syf-variant-popup select {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 12px 22px 12px 0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #fff !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid rgb(255 255 255 / 0.3) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

body.syf-variant-popup .fieldtext::placeholder,
body.syf-variant-popup input::placeholder {
    color: rgb(255 255 255 / 0.5) !important;
    opacity: 1 !important;
}

body.syf-variant-popup .fieldtext:focus,
body.syf-variant-popup input:focus,
body.syf-variant-popup select:focus {
    outline: none !important;
    border: none !important;
    border-bottom: 1px solid var(--syf-gold) !important;
    box-shadow: none !important;
}

body.syf-variant-popup .fieldtypeText.customDropDown,
body.syf-variant-popup .customDropDown,
body.syf-variant-popup .customDropDown.customDropDownof,
body.syf-variant-popup .fieldtypeText.ofIconCont {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

/* Chevron via parent ::after — more reliable than select background-image */
body.syf-variant-popup .customDropDown::after,
body.syf-variant-popup .fieldtypeText.customDropDown::after {
    content: "" !important;
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    width: 7px !important;
    height: 7px !important;
    margin-top: -5px !important;
    border: none !important;
    border-right: 1.5px solid rgba(255, 255, 255, 0.75) !important;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.75) !important;
    transform: rotate(45deg) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

body.syf-variant-mailing-list .customDropDown,
body.syf-variant-mailing-list .fieldtypeText.customDropDown {
    position: relative !important;
}

body.syf-variant-mailing-list .customDropDown::after,
body.syf-variant-mailing-list .fieldtypeText.customDropDown::after {
    content: "" !important;
    position: absolute !important;
    right: 2px !important;
    top: 50% !important;
    width: 7px !important;
    height: 7px !important;
    margin-top: -5px !important;
    border: none !important;
    border-right: 1.5px solid rgba(36, 57, 116, 0.55) !important;
    border-bottom: 1.5px solid rgba(36, 57, 116, 0.55) !important;
    transform: rotate(45deg) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

body.syf-variant-popup .customDropDown select option {
    color: var(--syf-navy) !important;
    background: #fff !important;
}

/* Popup + mailing-list: native <select> (Select2 destroyed) — underline + chevron */
body.syf-variant-popup .select2-container,
body.syf-variant-popup .select2-dropdown,
body.syf-variant-mailing-list .select2-container,
body.syf-variant-mailing-list .select2-dropdown {
    display: none !important;
}

body.syf-variant-popup .customDropDown select,
body.syf-variant-popup select,
body.syf-variant-mailing-list .customDropDown select,
body.syf-variant-mailing-list select {
    display: block !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    background-color: transparent !important;
    background-image: none !important;
    padding-right: 22px !important;
    cursor: pointer !important;
    font-size: 16px !important;
}

body.syf-variant-popup .customDropDown select,
body.syf-variant-popup select {
    color: #fff !important;
}

body.syf-variant-mailing-list .customDropDown select,
body.syf-variant-mailing-list select {
    color: var(--syf-navy, #243974) !important;
}

body.syf-variant-popup select.syf-select-placeholder {
    color: rgb(255 255 255 / 0.5) !important;
}

body.syf-variant-mailing-list select.syf-select-placeholder {
    color: rgb(36 57 116 / 0.4) !important;
}

body.syf-variant-mailing-list .customDropDown select option,
body.syf-variant-mailing-list select option {
    color: var(--syf-navy, #243974) !important;
    background: #fff !important;
}

/* Legacy Select2 styles kept inert while native select is used */
body.syf-variant-popup .select2.select2-container {
    width: 100% !important;
    display: none !important;
}

body.syf-variant-popup .select2-container .select2-selection--single,
body.syf-variant-popup .select2-container--default .select2-selection--single,
body.syf-variant-popup .select2-selection.select2FormCont,
body.syf-variant-popup .select2-selection.oneFldDrpDwnSel2 {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-top: none !important;
    border-right: none !important;
    border-left: none !important;
    border-bottom: 1px solid rgb(255 255 255 / 0.3) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

body.syf-variant-popup .select2-container--default.select2-container--focus .select2-selection--single,
body.syf-variant-popup .select2-container--default.select2-container--open .select2-selection--single {
    border: none !important;
    border-bottom: 1px solid var(--syf-gold) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body.syf-variant-popup .select2-container .select2-selection--single .select2-selection__rendered,
body.syf-variant-popup .select2-selection.select2FormCont .select2-selection__rendered {
    display: block !important;
    padding: 0 18px 0 0 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-family: "Karla", system-ui, sans-serif !important;
}

body.syf-variant-popup .select2-selection__placeholder,
body.syf-variant-popup .select2-selection__placeholder .select2FormFont,
body.syf-variant-popup .select2FormFont {
    color: rgb(255 255 255 / 0.5) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

body.syf-variant-popup .select2-container .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 14px !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    transform: none !important;
    pointer-events: none !important;
}

body.syf-variant-popup .select2-dropdown {
    margin-top: 0 !important;
    border-radius: 0 !important;
    border: 1px solid rgb(255 255 255 / 0.15) !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.25) !important;
    overflow: hidden !important;
}

/* Only 6 options — hide Select2 search to save height */
body.syf-variant-popup .select2-search--dropdown {
    display: none !important;
}

body.syf-variant-popup .select2-results {
    max-height: none !important;
    overflow: visible !important;
}

body.syf-variant-popup .select2-results__options {
    max-height: 180px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
}

body.syf-variant-popup .select2-results__option {
    padding: 10px 12px !important;
    font-size: 16px !important;
    font-family: "Karla", system-ui, sans-serif !important;
    color: var(--syf-navy) !important;
}

body.syf-variant-popup .select2-results__option[aria-selected="true"],
body.syf-variant-popup .select2-results__option--highlighted {
    background: rgb(36 57 116 / 0.08) !important;
    color: var(--syf-navy) !important;
}

body.syf-variant-popup .zfErrorDiv:empty,
body.syf-variant-popup .zfErrorParentDiv:empty {
    display: none !important;
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.syf-variant-popup .navBtnWrapper,
body.syf-variant-popup .zfFooter,
body.syf-variant-popup .navFootBtnWrap,
body.syf-variant-popup .navFootBtnList {
    display: block !important;
    width: 100% !important;
    margin-top: 20px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

body.syf-variant-popup .zfbtnSubmit.btnElem {
    float: none !important;
    display: inline-flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 16px 28px !important;
    background: var(--syf-gold) !important;
    color: var(--syf-navy) !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    box-sizing: border-box !important;
}

body.syf-variant-popup .zfbtnSubmit.btnElem em {
    font-style: normal !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    color: inherit !important;
}

body.syf-variant-popup .zfbtnSubmit.btnElem:hover,
body.syf-variant-popup .zfbtnSubmit.btnElem:focus {
    background: var(--syf-gold-soft) !important;
}

/* ==========================================================================
   Zoho mailing LIST — light brand (keep separate from popup underline)
   ========================================================================== */

body.syf-variant-mailing-list .zfNameContainer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    width: 100% !important;
}

body.syf-variant-mailing-list .zfNameContainer .nameCompLabelWrapper {
    flex: 1 1 0 !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

body.syf-variant-mailing-list .zfNameContainer .nameCompLabelWrapper.nameFieldSpaceing > span[elname="compEachElem"]::before {
    content: none !important;
    display: none !important;
}

body.syf-variant-mailing-list .ofIconCont svg,
body.syf-variant-mailing-list .ofIconCont .icon,
body.syf-variant-mailing-list .fieldtypeText svg.icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

body.syf-variant-mailing-list .ofIconCont input.fieldtext,
body.syf-variant-mailing-list .ofIconCont input[ui_type="textbox"],
body.syf-variant-mailing-list .zfNameContainer input.fieldtext {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ==========================================================================
   Countdown — Lovable color lock (CountdownTimer.tsx)
   bg-navy-deep = oklch(0.22 0.09 267) → sRGB #081543
   (CMS palette previously used wrong hex #1c2540 — too light vs Lovable)
   gold #c5ab71 | teal #53bfb9 | heading white/85 | labels white/65
   ========================================================================== */

#countdown {
    --syf-countdown-navy: #081543;
    --syf-countdown-gold: #c5ab71;
    --syf-countdown-teal: #53bfb9;
    --syf-countdown-heading: rgb(255 255 255 / 0.85);
    --syf-countdown-label: rgb(255 255 255 / 0.65);
    --syf-countdown-border: rgb(255 255 255 / 0.15);
    --syf-countdown-tile: rgb(255 255 255 / 0.03);
}

/*
 * Lovable navy-deep. Prefer token when CMS has no custom bg.
 * Also override legacy saved #1c2540 (wrong palette mapping).
 */
#countdown.bg-navy-deep:not([style*="background-color"]),
#countdown[style="background-color: #1c2540"],
#countdown[style="background-color:#1c2540"] {
    background-color: oklch(0.22 0.09 267) !important;
    background-color: var(--syf-countdown-navy) !important;
}

/* Yachts on Display — same navy-deep lock as countdown */
[data-syf-yachts-on-display].bg-navy-deep:not([style*="background-color"]),
[data-syf-yachts-on-display][style="background-color: #1c2540"],
[data-syf-yachts-on-display][style="background-color:#1c2540"] {
    background-color: oklch(0.22 0.09 267) !important;
    background-color: #081543 !important;
}

/* Date line + countdown numbers */
#countdown .text-gold,
#countdown [data-unit] {
    color: var(--syf-countdown-gold) !important;
}

/* “The voyage sets sail in” */
#countdown p.font-display {
    color: var(--syf-countdown-heading) !important;
}

/* DAYS / HOURS / … — cool muted white (not warm gold/tan) */
#countdown [data-unit] + .eyebrow {
    color: var(--syf-countdown-label) !important;
}

/* Teal accent bar on each tile */
#countdown .grid > .relative > span:first-child {
    background-color: var(--syf-countdown-teal) !important;
}

/* Tile chrome */
#countdown .grid > .relative {
    border-color: var(--syf-countdown-border) !important;
    background-color: var(--syf-countdown-tile) !important;
}

/* -------------------------------------------------------------------------
   Instagram feed (Smash Balloon) — restyle plugin header to match site design
   ------------------------------------------------------------------------- */
.syf-instagram-feed #sb_instagram {
    padding-bottom: 0 !important;
    width: 100% !important;
}

.syf-instagram-feed .sb_instagram_header {
    float: none !important;
    width: 100% !important;
    margin: 0 0 2rem !important;
    padding: 0 0 2rem !important;
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--color-navy, #0b1f3a) 15%, transparent);
}

.syf-instagram-feed .sb_instagram_header .sbi_header_link {
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
}

.syf-instagram-feed .sb_instagram_header .sbi_header_text {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

@media (min-width: 768px) {
    .syf-instagram-feed .sb_instagram_header .sbi_header_text {
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
    }
}

.syf-instagram-feed #sb_instagram .sb_instagram_header .sbi_header_img {
    position: relative !important;
    float: none !important;
    flex-shrink: 0;
    width: 7rem !important;
    height: 7rem !important;
    margin: 0 !important;
    padding: 0.75rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    border: none !important;
    background: #fff !important;
    box-shadow: none !important;
}

@media (min-width: 768px) {
    .syf-instagram-feed #sb_instagram .sb_instagram_header .sbi_header_img {
        width: 8rem !important;
        height: 8rem !important;
    }
}

/* Gold ring drawn above the avatar so square logo corners cannot cover it */
.syf-instagram-feed #sb_instagram .sb_instagram_header .sbi_header_img::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-gold, #c5ab71) 40%, transparent);
    pointer-events: none;
}

.syf-instagram-feed #sb_instagram .sb_instagram_header .sbi_header_img img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    border-radius: 50% !important;
}

.syf-instagram-feed .sbi_header_img_hover,
.syf-instagram-feed .sbi_header_hashtag_icon {
    display: none !important;
}

.syf-instagram-feed .sbi_feedtheme_header_text {
    flex: 1 1 auto;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center;
}

@media (min-width: 768px) {
    .syf-instagram-feed .sbi_feedtheme_header_text {
        text-align: left;
    }
}

.syf-instagram-feed .sbi_feedtheme_header_text h3 {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--font-display, "Crimson Text", Georgia, "Times New Roman", serif) !important;
    font-size: 1.875rem !important;
    font-weight: 400 !important;
    line-height: 1.15 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--color-navy, #0b1f3a) !important;
    transition: color 0.2s ease;
}

@media (min-width: 768px) {
    .syf-instagram-feed .sbi_feedtheme_header_text h3 {
        font-size: 2.25rem !important;
    }
}

.syf-instagram-feed .sbi_header_link:hover .sbi_feedtheme_header_text h3 {
    color: var(--color-gold, #c5ab71) !important;
}

.syf-instagram-feed .syf-ig-posts {
    margin-top: 1.25rem;
    text-align: center;
}

@media (min-width: 768px) {
    .syf-instagram-feed .syf-ig-posts {
        text-align: left;
    }
}

.syf-instagram-feed .syf-ig-posts__num {
    font-family: var(--font-display, "Crimson Text", Georgia, "Times New Roman", serif);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-gold, #c5ab71);
}

.syf-instagram-feed .syf-ig-posts__label {
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-navy, #0b1f3a) 65%, transparent);
}

.syf-instagram-feed .sbi_bio {
    margin: 1.25rem 0 0 !important;
    max-width: 36rem;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: color-mix(in srgb, var(--color-ink, #1a1a1a) 70%, transparent) !important;
}

.syf-instagram-feed #sbi_images {
    margin-top: 0 !important;
}

/* Buttons — beat Smash Balloon #sb_instagram specificity; kill margin:auto on flex items */
.syf-instagram-feed #sb_instagram #sbi_load {
    display: flex !important;
    float: none !important;
    clear: both !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    width: 100% !important;
    margin: 2rem 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    background: transparent !important;
}

/* Lovable order: Follow first, Load More second — both sit as a centered pair */
.syf-instagram-feed #sb_instagram #sbi_load .sbi_follow_btn {
    order: 1 !important;
    display: inline-flex !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    position: static !important;
    vertical-align: middle !important;
}

.syf-instagram-feed #sb_instagram #sbi_load .sbi_load_btn {
    order: 2 !important;
    display: inline-flex !important;
    float: none !important;
    width: auto !important;
    /* Plugin uses margin:auto — that breaks flex centering into “left + centered” */
    margin: 0 !important;
    position: relative !important;
    vertical-align: middle !important;
}

.syf-instagram-feed #sb_instagram #sbi_load .sbi_load_btn,
.syf-instagram-feed #sb_instagram #sbi_load .sbi_follow_btn a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    box-sizing: border-box !important;
    min-height: 3.25rem !important;
    padding: 1rem 1.75rem !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-width: 1px !important;
    border-style: solid !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

/* Follow = solid gold (hero primary) */
.syf-instagram-feed #sb_instagram #sbi_load .sbi_follow_btn a {
    background: var(--syf-gold, #c5ab71) !important;
    border-color: transparent !important;
    color: var(--syf-navy, #243974) !important;
}

.syf-instagram-feed #sb_instagram #sbi_load .sbi_follow_btn a:hover,
.syf-instagram-feed #sb_instagram #sbi_load .sbi_follow_btn a:focus {
    background: var(--syf-gold-soft, #d9c896) !important;
    border-color: transparent !important;
    color: var(--syf-navy, #243974) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Load more = transparent outline */
.syf-instagram-feed #sb_instagram #sbi_load .sbi_load_btn {
    background: transparent !important;
    border-color: color-mix(in srgb, var(--syf-navy, #243974) 40%, transparent) !important;
    color: var(--syf-navy, #243974) !important;
}

.syf-instagram-feed #sb_instagram #sbi_load .sbi_load_btn:hover,
.syf-instagram-feed #sb_instagram #sbi_load .sbi_load_btn:focus {
    background: var(--syf-gold, #c5ab71) !important;
    border-color: var(--syf-gold, #c5ab71) !important;
    color: var(--syf-navy, #243974) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Outline (load more) hover → Follow becomes transparent (hero-style swap) */
.syf-instagram-feed #sb_instagram #sbi_load:has(.sbi_load_btn:hover) .sbi_follow_btn a,
.syf-instagram-feed #sb_instagram #sbi_load:has(.sbi_load_btn:focus) .sbi_follow_btn a {
    background: transparent !important;
    border-color: color-mix(in srgb, var(--syf-navy, #243974) 40%, transparent) !important;
    color: var(--syf-navy, #243974) !important;
}

.syf-instagram-feed #sb_instagram #sbi_load .sbi_follow_btn a svg,
.syf-instagram-feed #sb_instagram #sbi_load .sbi_follow_btn .fa {
    width: 1rem !important;
    height: 1rem !important;
    margin: 0 !important;
    flex-shrink: 0;
}

@media (max-width: 639px) {
    .syf-instagram-feed #sb_instagram #sbi_load {
        flex-direction: column !important;
    }

    .syf-instagram-feed #sb_instagram #sbi_load .sbi_follow_btn,
    .syf-instagram-feed #sb_instagram #sbi_load .sbi_load_btn,
    .syf-instagram-feed #sb_instagram #sbi_load .sbi_follow_btn a {
        width: 100% !important;
    }
}

/* -------------------------------------------------------------------------
   Single post / news content (Classic Editor: align*, captions, links)
   ------------------------------------------------------------------------- */
.syf-news-content img,
.entry-content img {
    max-width: 100%;
    height: auto;
}

.syf-news-content a,
.entry-content a {
    color: var(--color-gold, #c5ab71);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    transition: color 0.2s ease;
}

.syf-news-content a:hover,
.entry-content a:hover {
    color: var(--color-navy, #0b1f3a);
}

/* WordPress alignment classes */
.syf-news-content .alignleft,
.entry-content .alignleft {
    float: left;
    margin: 0.5em 1.5em 1em 0;
}

.syf-news-content .alignright,
.entry-content .alignright {
    float: right;
    margin: 0.5em 0 1em 1.5em;
}

.syf-news-content .aligncenter,
.entry-content .aligncenter {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.syf-news-content img.aligncenter,
.entry-content img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.syf-news-content .alignnone,
.entry-content .alignnone {
    margin: 0.5em 0;
}

/* Captions (figure.wp-caption or div.wp-caption) */
.syf-news-content .wp-caption,
.entry-content .wp-caption {
    max-width: 100%;
}

.syf-news-content .wp-caption.aligncenter,
.entry-content .wp-caption.aligncenter {
    display: block;
    float: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.syf-news-content .wp-caption img,
.entry-content .wp-caption img {
    display: inline-block;
    margin: 0;
}

.syf-news-content .wp-caption-text,
.entry-content .wp-caption-text,
.syf-news-content figcaption,
.entry-content figcaption {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.5;
    color: color-mix(in srgb, var(--color-ink, #1a1a1a) 65%, transparent);
}

.syf-news-content .wp-caption.aligncenter .wp-caption-text,
.entry-content .wp-caption.aligncenter .wp-caption-text,
.syf-news-content figure.aligncenter figcaption,
.entry-content figure.aligncenter figcaption {
    text-align: center;
}

/* Clear floats after floated images in the stream */
.syf-news-content::after,
.entry-content::after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 639px) {
    .syf-news-content .alignleft,
    .syf-news-content .alignright,
    .entry-content .alignleft,
    .entry-content .alignright {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* CMS wpEditor markup (lists, emphasis) — Tailwind preflight strips these */
.entry-content > *:first-child {
    margin-top: 0;
}

.entry-content > *:last-child {
    margin-bottom: 0;
}

.entry-content p {
    margin: 0 0 1.25rem;
}

.entry-content ul,
.entry-content ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.entry-content ul {
    list-style: disc;
}

.entry-content ol {
    list-style: decimal;
}

.entry-content li + li {
    margin-top: 0.5rem;
}

.entry-content li::marker {
    color: var(--color-gold, #c5ab71);
}

.entry-content strong,
.entry-content b {
    font-weight: 600;
    color: var(--color-navy, #0b1f3a);
}

.entry-content em,
.entry-content i {
    font-style: italic;
}

.entry-content blockquote {
    margin: 1.5rem 0;
    padding-left: 1.25rem;
    border-left: 2px solid var(--color-gold, #c5ab71);
}

/* ==========================================================================
   Exhibitors / Yachts / Partners archive toolbar selects
   Keep the original left inset (12px) and put the chevron the same distance
   from the right edge (was tighter with the native OS arrow).
   ========================================================================== */
[data-syf-exhibitors-toolbar] select,
[data-syf-yachts-toolbar] select,
[data-syf-partners-toolbar] select {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-left: 0.75rem !important; /* same as previous px-3 */
    padding-right: 2.5rem !important; /* room for chevron + 0.75rem inset */
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%231c2540' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important; /* match left text inset */
    background-size: 12px 12px !important;
    text-transform: none;
    letter-spacing: normal;
}

[data-syf-exhibitors-toolbar] select option,
[data-syf-yachts-toolbar] select option,
[data-syf-partners-toolbar] select option {
    text-transform: none;
}

/* ==========================================================================
   Zoho ENQUIRY forms (iframe body.syf-variant-enquiry)
   intl-tel-input phone: keep flag/+dial visible; restore padding overridden
   by zoho-enquiry.css generic input padding: 0 12px.
   ========================================================================== */
body.syf-variant-enquiry .tempContDiv[elname="phoneFormatElem"] {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.syf-variant-enquiry .fieldtypeText.zfCountryCode {
    display: block !important;
    width: 100% !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--syf-border, #e5e2dc) !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
    background: #fff !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.syf-variant-enquiry .fieldtypeText.zfCountryCode .zfFldVerifCont,
body.syf-variant-enquiry .fieldtypeText.zfCountryCode .inputVeriLeftPan {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.syf-variant-enquiry .fieldtypeText.zfCountryCode .intl-tel-input,
body.syf-variant-enquiry .intl-tel-input.phCodeWrapper {
    display: block !important;
    position: relative !important;
    width: 100% !important;
}

body.syf-variant-enquiry .intl-tel-input .flag-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

body.syf-variant-enquiry .intl-tel-input .selected-flag {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    height: 44px !important;
    padding: 0 8px 0 12px !important;
    box-sizing: border-box !important;
}

body.syf-variant-enquiry .intl-tel-input input.fieldtext,
body.syf-variant-enquiry .intl-tel-input input[elname="countrycode"] {
    display: block !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-right: 12px !important;
    padding-left: 84px !important;
}

body.syf-variant-enquiry .intl-tel-input.iti-sdc-2 input.fieldtext {
    padding-left: 66px !important;
}

body.syf-variant-enquiry .intl-tel-input.iti-sdc-3 input.fieldtext {
    padding-left: 84px !important;
}

body.syf-variant-enquiry .intl-tel-input.iti-sdc-4 input.fieldtext {
    padding-left: 98px !important;
}

body.syf-variant-enquiry .intl-tel-input.iti-sdc-5 input.fieldtext {
    padding-left: 110px !important;
}

body.syf-variant-enquiry .fieldtypeText.zfCountryCode:focus-within {
    border-color: var(--syf-gold, #c5ab71) !important;
    box-shadow: 0 0 0 1px var(--syf-gold, #c5ab71) !important;
}

body.syf-variant-enquiry .fieldtypeText.zfCountryCode .focus-border,
body.syf-variant-enquiry .fieldtypeText.zfCountryCode > svg.icon,
body.syf-variant-enquiry .fieldtypeText.zfCountryCode > [elname="inpCaret"] {
    display: none !important;
}

/* Select2 (Country / Salutation): match text inputs — 12px left pad + 16px type */
body.syf-variant-enquiry .select2-container .select2-selection--single .select2-selection__rendered,
body.syf-variant-enquiry .select2-selection.select2FormCont .select2-selection__rendered,
body.syf-variant-enquiry span.select2-selection--single .select2-selection__rendered {
    padding-left: 12px !important;
    padding-right: 28px !important;
    font-size: 16px !important;
    line-height: 42px !important;
    color: var(--syf-ink, #1a2332) !important;
    font-family: "Karla", system-ui, sans-serif !important;
}

body.syf-variant-enquiry .select2-selection__placeholder,
body.syf-variant-enquiry .select2-selection__placeholder .select2FormFont,
body.syf-variant-enquiry .select2FormFont {
    font-size: 16px !important;
    line-height: 42px !important;
    color: var(--syf-ink, #1a2332) !important;
    font-family: "Karla", system-ui, sans-serif !important;
}

body.syf-variant-enquiry .select2-results__option {
    font-size: 16px !important;
    line-height: 1.4 !important;
    padding: 10px 12px !important;
    font-family: "Karla", system-ui, sans-serif !important;
}

/* ==========================================================================
   Speakers modal — mobile: square photo; desktop: fixed side-by-side height
   ========================================================================== */
[data-syf-speaker-dialog] {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 90vh;
}

[data-syf-speaker-layout] {
    flex: 1 1 auto;
    min-height: 0;
}

[data-syf-speaker-photo] {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
}

[data-syf-speaker-photo] img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

[data-syf-speaker-bio] {
    flex: 1 1 auto;
    min-height: 0;
}

@media (min-width: 640px) {
    [data-syf-speaker-dialog] {
        height: 460px;
        max-height: 90vh;
    }

    [data-syf-speaker-layout] {
        height: 100%;
        overflow: hidden;
    }

    [data-syf-speaker-photo] {
        aspect-ratio: auto;
        height: 100%;
    }

    [data-syf-speaker-bio] {
        height: 100%;
        overflow-y: auto;
    }
}

/* ==========================================================================
   Anchor nav — sticky top tracks real header height via --syf-header-offset
   (set in syf.js). Fallback approximates mobile header until JS runs.
   ========================================================================== */
[data-syf-anchor-nav] {
    top: var(--syf-header-offset, 5.5rem);
}

/* Archive filter bars — flush under fixed header (offset from syf.js) */
.syf-archive-toolbar,
[data-syf-yachts-toolbar],
[data-syf-exhibitors-toolbar],
[data-syf-partners-toolbar] {
    top: var(--syf-header-offset, 5.5rem);
}

[data-syf-anchor-nav-list] {
    row-gap: 0.75rem; /* match py-3 */
}

@media (min-width: 1024px) {
    [data-syf-anchor-nav-list] {
        row-gap: 0.5rem;
    }
}

/* ==========================================================================
   Policy & Terms — long-form legal content (SyfPolicyTerms)
   ========================================================================== */

/* Extra top padding so fixed header does not cover content */
.syf-policy-terms__inner {
    padding-top: 10rem; /* 160px */
    padding-bottom: 4rem;
}

@media (min-width: 1024px) {
    .syf-policy-terms__inner {
        padding-top: 11rem; /* 176px */
        padding-bottom: 5rem;
    }
}

.syf-policy-terms__content {
    font-family: "Karla", system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.75;
    color: color-mix(in srgb, var(--color-ink, #1a2332) 80%, transparent);
}

.syf-policy-terms__content > *:first-child {
    margin-top: 0;
}

.syf-policy-terms__content > *:last-child {
    margin-bottom: 0;
}

.syf-policy-terms__content p {
    margin: 0 0 1.25rem;
}

.syf-policy-terms__content h2,
.syf-policy-terms__content h3,
.syf-policy-terms__content h4 {
    font-family: var(--font-display, Georgia, "Times New Roman", serif);
    color: var(--color-navy, #243974);
    font-weight: 400;
    line-height: 1.2;
    margin: 2.25rem 0 0.85rem;
}

.syf-policy-terms__content h2 {
    font-size: clamp(1.375rem, 2vw, 1.75rem);
}

.syf-policy-terms__content h3 {
    font-size: clamp(1.2rem, 1.6vw, 1.375rem);
}

.syf-policy-terms__content h4 {
    font-family: "Karla", system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.syf-policy-terms__content ul,
.syf-policy-terms__content ol {
    margin: 0 0 1.25rem;
    padding-left: 1.35rem;
}

.syf-policy-terms__content ul {
    list-style: disc;
}

.syf-policy-terms__content ol {
    list-style: decimal;
}

.syf-policy-terms__content li + li {
    margin-top: 0.45rem;
}

.syf-policy-terms__content li::marker {
    color: var(--color-gold, #c5ab71);
}

.syf-policy-terms__content strong,
.syf-policy-terms__content b {
    color: var(--color-navy, #243974);
    font-weight: 600;
}

.syf-policy-terms__content a {
    color: var(--color-gold, #c5ab71);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.syf-policy-terms__content a:hover,
.syf-policy-terms__content a:focus-visible {
    color: var(--color-navy, #243974);
    text-decoration-color: var(--color-navy, #243974);
}

.syf-policy-terms__content blockquote {
    margin: 1.75rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 2px solid var(--color-gold, #c5ab71);
    color: var(--color-navy, #243974);
    font-style: italic;
}

.syf-policy-terms__content hr {
    margin: 2.5rem 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-navy, #243974) 12%, transparent);
}

.syf-policy-terms__content table {
    width: 100%;
    margin: 0 0 1.5rem;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.syf-policy-terms__content th,
.syf-policy-terms__content td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-navy, #243974) 12%, transparent);
    text-align: left;
    vertical-align: top;
}

.syf-policy-terms__content th {
    color: var(--color-navy, #243974);
    font-weight: 600;
}
.post-detail .thumbnail{
	width:60%;
	margin-left: auto;
	margin-right:auto;
}
@media (max-width:991px){
	.post-detail .thumbnail{
		width:100%;
	}
}
#highlights .item:last-child{
	padding-bottom: 0;
}
/* ==========================================================================
   Speakers modal — mobile: square photo; desktop: fixed side-by-side height
   ========================================================================== */
[data-syf-speaker-dialog] {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
}

[data-syf-speaker-layout] {
    display: flex;
    flex-direction: column;
    width: 100%;
}

[data-syf-speaker-photo] {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    overflow: hidden;
}

[data-syf-speaker-photo] img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

[data-syf-speaker-bio] {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 640px) {
    [data-syf-speaker-dialog] {
        height: 500px;
        max-width: 840px !important;
        max-height: 90vh;
        overflow: hidden;
    }

    [data-syf-speaker-layout] {
        display: grid;
        grid-template-columns: 46% 54%;
        height: 100%;
    }

    [data-syf-speaker-photo] {
        grid-column: span 1;
        aspect-ratio: auto;
        height: 100%;
    }

    [data-syf-speaker-bio] {
        grid-column: span 1;
        height: 100%;
        overflow-y: auto;
    }
}
#wp-chat-floating > div,
div[data-theme][class*="wpchat"] {
    bottom: 75px !important;
}
/* Legacy hero btn-* classes (if present) — outline hover swaps solid to transparent */
.hero .btn-gold {
    border: 1px solid #bba05c;
}
.hero:has(.btn-white:hover) .btn-gold {
    background-color: transparent !important;
    border: 1px solid color-mix(in oklab, white 40%, transparent);
    color: #ffffff;
}
.exhibitor-card .thumbnail{
	aspect-ratio: 1 / 1;
}

/* Partners archive cards — square logo area (overrides Tailwind h-52) */
[data-syf-partner-card] > .h-52 {
    aspect-ratio: 1 / 1;
    height: auto;
}

[data-syf-partner-card] > .h-52 img {
    max-height: 55%;
    max-width: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ==========================================================================
   Sticky site shell — no cream/white gap below footer on short pages
   (e.g. yacht/exhibitor filters with 0 results).
   ========================================================================== */
body > div.min-h-screen {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

body > div.min-h-screen > #main.content-area,
body > div.min-h-screen > #main {
    flex: 1 0 auto;
    width: 100%;
}

body > div.min-h-screen > .syf-footer {
    flex-shrink: 0;
    margin-top: auto;
}


.syf-partner-logos__img {
    height: 7.5rem !important; /* 120px — was 96px */
    width: auto !important;
    max-width: 100%;
    object-fit: contain;
}

@media (min-width: 1024px) {
    .syf-partner-logos__img {
        height: 10rem !important; /* 160px — was 128px */
    }
}

/* Lounge carousel — hide arrows when they cannot scroll */
[data-syf-lounge-prev][hidden],
[data-syf-lounge-next][hidden],
[data-syf-lounge-prev]:disabled,
[data-syf-lounge-next]:disabled {
    display: none !important;
}

/* ==========================================================================
   The Show — keep component CTAs at desktop (content) width on mobile.
   flex-col parents default to align-items:stretch and stretch buttons full width.
   ========================================================================== */
body.page-the-show main a.inline-flex,
body.page-the-show main button.inline-flex,
body.page-id-128 main a.inline-flex,
body.page-id-128 main button.inline-flex {
    width: auto !important;
    max-width: 100%;
    align-self: flex-start;
    flex-grow: 0;
    flex-shrink: 0;
}

/* ==========================================================================
   SyfCtaBand (dual / centered) — equal-height CTAs (wrap still allowed)
   Outline button has 1px border; gold has none → force identical box model.
   ========================================================================== */
[data-syf-cta-actions] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: center;
    gap: 0.75rem;
}

[data-syf-cta-actions] > a.inline-flex,
[data-syf-cta-actions] > button.inline-flex {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100%;
    align-self: auto !important;
    flex: 0 0 auto !important;
    /* Fixed height — padding alone still differs once border/icon are included */
    height: 3.25rem !important;
    min-height: 3.25rem !important;
    max-height: 3.25rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    border-width: 1px !important;
    border-style: solid !important;
}

/* Gold / solid CTA: invisible border so height matches outline sibling */
[data-syf-cta-actions] > a.inline-flex.bg-gold,
[data-syf-cta-actions] > button.inline-flex.bg-gold {
    border-color: transparent !important;
}

/* Display font already set site-wide at top of this file (Crimson Text). */
/* ==========================================================================
   Button styling guide (CSS-only)
   --------------------------------------------------------------------------
   Dark blue / white sections → gold (+ transparent when dual)
   Light yellow (cream) / light blue (background) → navy (+ transparent)
   No teal CTAs — remap to navy on light sections
   Dual hover: solid → lighter; outline → primary + sibling becomes outline
   ========================================================================== */

/* -------------------------------------------------------------------------
   Dark sections — dual CTA: gold + outline (Hero, HeroChild, CTA bands)
   ------------------------------------------------------------------------- */

/* All gold CTAs on navy / navy-gradient → brighter gold on hover
   (beats Tailwind hover:bg-gold/90 which darkens via transparency) */
section.bg-navy a.inline-flex.bg-gold:hover,
section.bg-navy a.inline-flex.bg-gold:focus-visible,
section.bg-navy button.inline-flex.bg-gold:hover,
section.bg-navy button.inline-flex.bg-gold:focus-visible,
section.bg-navy-gradient a.inline-flex.bg-gold:hover,
section.bg-navy-gradient a.inline-flex.bg-gold:focus-visible,
section.bg-navy-gradient button.inline-flex.bg-gold:hover,
section.bg-navy-gradient button.inline-flex.bg-gold:focus-visible,
section.bg-navy-deep a.inline-flex.bg-gold:hover,
section.bg-navy-deep a.inline-flex.bg-gold:focus-visible,
section.bg-navy-deep button.inline-flex.bg-gold:hover,
section.bg-navy-deep button.inline-flex.bg-gold:focus-visible {
    background-color: var(--syf-gold-soft, #d9c896) !important;
    border-color: transparent !important;
    color: var(--syf-navy, #243974) !important;
}

/* Stable box model for solid gold in dual pairs */
div.mt-10.flex.flex-wrap.items-center.gap-6 > a.bg-gold,
div.mt-10.flex.flex-wrap.items-center.gap-6 > button.bg-gold,
div.mt-8.flex.flex-wrap.gap-3 > a.bg-gold,
div.mt-8.flex.flex-wrap.gap-3 > button.bg-gold,
[data-syf-cta-actions] > a.bg-gold,
[data-syf-cta-actions] > button.bg-gold,
section.bg-navy .flex:has(> .bg-gold):has(> .border) > .bg-gold,
section.bg-navy-gradient .flex:has(> .bg-gold):has(> .border) > .bg-gold {
    border: 1px solid transparent !important;
}

/* Solid gold hover → lighter gold (not outline) */
div.mt-10.flex.flex-wrap.items-center.gap-6 > a.bg-gold:hover,
div.mt-10.flex.flex-wrap.items-center.gap-6 > a.bg-gold:focus-visible,
div.mt-10.flex.flex-wrap.items-center.gap-6 > button.bg-gold:hover,
div.mt-10.flex.flex-wrap.items-center.gap-6 > button.bg-gold:focus-visible,
div.mt-8.flex.flex-wrap.gap-3 > a.bg-gold:hover,
div.mt-8.flex.flex-wrap.gap-3 > a.bg-gold:focus-visible,
div.mt-8.flex.flex-wrap.gap-3 > button.bg-gold:hover,
div.mt-8.flex.flex-wrap.gap-3 > button.bg-gold:focus-visible,
[data-syf-cta-actions] > a.bg-gold:hover,
[data-syf-cta-actions] > a.bg-gold:focus-visible,
[data-syf-cta-actions] > button.bg-gold:hover,
[data-syf-cta-actions] > button.bg-gold:focus-visible,
section.bg-navy .flex:has(> .bg-gold):has(> .border) > .bg-gold:hover,
section.bg-navy .flex:has(> .bg-gold):has(> .border) > .bg-gold:focus-visible,
section.bg-navy-gradient .flex:has(> .bg-gold):has(> .border) > .bg-gold:hover,
section.bg-navy-gradient .flex:has(> .bg-gold):has(> .border) > .bg-gold:focus-visible {
    background-color: var(--syf-gold-soft, #d9c896) !important;
    border-color: transparent !important;
    color: var(--syf-navy, #243974) !important;
}

/* Outline hover → gold fill */
div.mt-10.flex.flex-wrap.items-center.gap-6 > a:not(.bg-gold):hover,
div.mt-10.flex.flex-wrap.items-center.gap-6 > a:not(.bg-gold):focus-visible,
div.mt-8.flex.flex-wrap.gap-3 > a:not(.bg-gold):hover,
div.mt-8.flex.flex-wrap.gap-3 > a:not(.bg-gold):focus-visible,
div.mt-8.flex.flex-wrap.gap-3 > button:not(.bg-gold):hover,
div.mt-8.flex.flex-wrap.gap-3 > button:not(.bg-gold):focus-visible,
[data-syf-cta-actions] > a:not(.bg-gold):hover,
[data-syf-cta-actions] > a:not(.bg-gold):focus-visible,
[data-syf-cta-actions] > button:not(.bg-gold):hover,
[data-syf-cta-actions] > button:not(.bg-gold):focus-visible,
section.bg-navy .flex:has(> .bg-gold):has(> .border) > a.border:hover,
section.bg-navy .flex:has(> .bg-gold):has(> .border) > a.border:focus-visible,
section.bg-navy-gradient .flex:has(> .bg-gold):has(> .border) > a.border:hover,
section.bg-navy-gradient .flex:has(> .bg-gold):has(> .border) > a.border:focus-visible {
    background-color: var(--syf-gold, #c5ab71) !important;
    border-color: var(--syf-gold, #c5ab71) !important;
    color: var(--syf-navy, #243974) !important;
}

/* When outline is hovered, solid gold becomes transparent outline */
div.mt-10.flex.flex-wrap.items-center.gap-6:has(> a:not(.bg-gold):hover) > .bg-gold,
div.mt-10.flex.flex-wrap.items-center.gap-6:has(> a:not(.bg-gold):focus-visible) > .bg-gold,
div.mt-8.flex.flex-wrap.gap-3:has(> a:not(.bg-gold):hover) > .bg-gold,
div.mt-8.flex.flex-wrap.gap-3:has(> a:not(.bg-gold):focus-visible) > .bg-gold,
div.mt-8.flex.flex-wrap.gap-3:has(> button:not(.bg-gold):hover) > .bg-gold,
div.mt-8.flex.flex-wrap.gap-3:has(> button:not(.bg-gold):focus-visible) > .bg-gold,
[data-syf-cta-actions]:has(> a:not(.bg-gold):hover) > .bg-gold,
[data-syf-cta-actions]:has(> a:not(.bg-gold):focus-visible) > .bg-gold,
[data-syf-cta-actions]:has(> button:not(.bg-gold):hover) > .bg-gold,
[data-syf-cta-actions]:has(> button:not(.bg-gold):focus-visible) > .bg-gold,
section.bg-navy .flex:has(> .bg-gold):has(> a.border:hover) > .bg-gold,
section.bg-navy .flex:has(> .bg-gold):has(> a.border:focus-visible) > .bg-gold,
section.bg-navy-gradient .flex:has(> .bg-gold):has(> a.border:hover) > .bg-gold,
section.bg-navy-gradient .flex:has(> .bg-gold):has(> a.border:focus-visible) > .bg-gold {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

/* -------------------------------------------------------------------------
   Light sections (cream / background) — no teal; primary = navy
   ------------------------------------------------------------------------- */

/* Teal filled CTAs → navy (Experience bottom CTA, etc.) */
section.bg-cream a.inline-flex.bg-teal-accent,
section.bg-cream button.inline-flex.bg-teal-accent,
section.bg-background a.inline-flex.bg-teal-accent,
section.bg-background button.inline-flex.bg-teal-accent {
    background-color: var(--syf-navy, #243974) !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
}

section.bg-cream a.inline-flex.bg-teal-accent:hover,
section.bg-cream a.inline-flex.bg-teal-accent:focus-visible,
section.bg-cream button.inline-flex.bg-teal-accent:hover,
section.bg-cream button.inline-flex.bg-teal-accent:focus-visible,
section.bg-background a.inline-flex.bg-teal-accent:hover,
section.bg-background a.inline-flex.bg-teal-accent:focus-visible,
section.bg-background button.inline-flex.bg-teal-accent:hover,
section.bg-background button.inline-flex.bg-teal-accent:focus-visible {
    background-color: var(--syf-navy-soft) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* Gold filled CTAs on cream / light-blue background → navy */
section.bg-cream a.inline-flex.bg-gold,
section.bg-cream button.inline-flex.bg-gold,
section.bg-background a.inline-flex.bg-gold,
section.bg-background button.inline-flex.bg-gold,
.bg-cream a.inline-flex.bg-gold,
.bg-cream button.inline-flex.bg-gold {
    background-color: var(--syf-navy, #243974) !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
}

section.bg-cream a.inline-flex.bg-gold:hover,
section.bg-cream a.inline-flex.bg-gold:focus-visible,
section.bg-cream button.inline-flex.bg-gold:hover,
section.bg-cream button.inline-flex.bg-gold:focus-visible,
section.bg-background a.inline-flex.bg-gold:hover,
section.bg-background a.inline-flex.bg-gold:focus-visible,
section.bg-background button.inline-flex.bg-gold:hover,
section.bg-background button.inline-flex.bg-gold:focus-visible,
.bg-cream a.inline-flex.bg-gold:hover,
.bg-cream a.inline-flex.bg-gold:focus-visible,
.bg-cream button.inline-flex.bg-gold:hover,
.bg-cream button.inline-flex.bg-gold:focus-visible {
    background-color: var(--syf-navy-soft) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* Navy solid on light sections — hover lighter blue (not gold) */
section.bg-cream a.inline-flex.bg-navy:hover,
section.bg-cream a.inline-flex.bg-navy:focus-visible,
section.bg-cream button.inline-flex.bg-navy:hover,
section.bg-cream button.inline-flex.bg-navy:focus-visible,
section.bg-background a.inline-flex.bg-navy:hover,
section.bg-background a.inline-flex.bg-navy:focus-visible,
section.bg-background button.inline-flex.bg-navy:hover,
section.bg-background button.inline-flex.bg-navy:focus-visible,
.bg-cream a.inline-flex.bg-navy:hover,
.bg-cream a.inline-flex.bg-navy:focus-visible {
    background-color: var(--syf-navy-soft) !important;
    color: #ffffff !important;
}

/* Light dual pair — outline hover → navy fill; solid sibling → outline */
section.bg-cream .flex:has(> .bg-teal-accent):has(> .border) > a.border:hover,
section.bg-cream .flex:has(> .bg-teal-accent):has(> .border) > a.border:focus-visible,
section.bg-cream .flex:has(> .bg-gold):has(> .border) > a.border:hover,
section.bg-cream .flex:has(> .bg-gold):has(> .border) > a.border:focus-visible,
section.bg-cream .flex:has(> .bg-navy):has(> .border) > a.border:hover,
section.bg-cream .flex:has(> .bg-navy):has(> .border) > a.border:focus-visible,
section.bg-background .flex:has(> .bg-gold):has(> .border) > a.border:hover,
section.bg-background .flex:has(> .bg-gold):has(> .border) > a.border:focus-visible,
section.bg-background .flex:has(> .bg-navy):has(> .border) > a.border:hover,
section.bg-background .flex:has(> .bg-navy):has(> .border) > a.border:focus-visible {
    background-color: var(--syf-navy, #243974) !important;
    border-color: var(--syf-navy, #243974) !important;
    color: #ffffff !important;
}

section.bg-cream .flex:has(> a.border:hover) > .bg-teal-accent,
section.bg-cream .flex:has(> a.border:focus-visible) > .bg-teal-accent,
section.bg-cream .flex:has(> a.border:hover) > .bg-gold,
section.bg-cream .flex:has(> a.border:focus-visible) > .bg-gold,
section.bg-cream .flex:has(> a.border:hover) > a.bg-navy,
section.bg-cream .flex:has(> a.border:focus-visible) > a.bg-navy,
section.bg-cream .flex:has(> a.border:hover) > button.bg-navy,
section.bg-cream .flex:has(> a.border:focus-visible) > button.bg-navy,
section.bg-background .flex:has(> a.border:hover) > .bg-gold,
section.bg-background .flex:has(> a.border:focus-visible) > .bg-gold,
section.bg-background .flex:has(> a.border:hover) > a.bg-navy,
section.bg-background .flex:has(> a.border:focus-visible) > a.bg-navy {
    background-color: transparent !important;
    border: 1px solid color-mix(in srgb, var(--syf-navy, #243974) 40%, transparent) !important;
    color: var(--syf-navy, #243974) !important;
}

/* Light frosted / collage sections — navy CTA hover stays lighter navy (not gold) */
a.inline-flex.bg-navy:hover,
a.inline-flex.bg-navy:focus-visible,
button.inline-flex.bg-navy:hover,
button.inline-flex.bg-navy:focus-visible {
    background-color: var(--syf-navy-soft) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   Media Photo Gallery — Show more = navy; CTA = outline; hero-style swap
   ========================================================================== */
[data-syf-media-gallery] .mt-10.flex [data-syf-media-gallery-expand] {
    background-color: var(--syf-navy, #243974) !important;
    border: 1px solid transparent !important;
    color: #ffffff !important;
}

[data-syf-media-gallery] .mt-10.flex [data-syf-media-gallery-expand]:hover,
[data-syf-media-gallery] .mt-10.flex [data-syf-media-gallery-expand]:focus-visible {
    background-color: var(--syf-navy-soft) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

[data-syf-media-gallery] .mt-10.flex > a.inline-flex {
    background-color: transparent !important;
    border: 1px solid color-mix(in srgb, var(--syf-navy, #243974) 40%, transparent) !important;
    color: var(--syf-navy, #243974) !important;
}

[data-syf-media-gallery] .mt-10.flex > a.inline-flex:hover,
[data-syf-media-gallery] .mt-10.flex > a.inline-flex:focus-visible {
    background-color: var(--syf-navy, #243974) !important;
    border-color: var(--syf-navy, #243974) !important;
    color: #ffffff !important;
}

[data-syf-media-gallery] .mt-10.flex:has(> a.inline-flex:hover) [data-syf-media-gallery-expand],
[data-syf-media-gallery] .mt-10.flex:has(> a.inline-flex:focus-visible) [data-syf-media-gallery-expand] {
    background-color: transparent !important;
    border: 1px solid color-mix(in srgb, var(--syf-navy, #243974) 40%, transparent) !important;
    color: var(--syf-navy, #243974) !important;
}

/* ==========================================================================
   Yacht archive banner intro — respect CMS rich-text formatting
   ========================================================================== */
.syf-yacht-archive-banner__intro {
    font-size: 16px;
    line-height: 1.75;
    color: color-mix(in srgb, #fff 80%, transparent);
}

.syf-yacht-archive-banner__intro > *:first-child {
    margin-top: 0;
}

.syf-yacht-archive-banner__intro > *:last-child {
    margin-bottom: 0;
}

.syf-yacht-archive-banner__intro p {
    margin: 0 0 1em;
}

.syf-yacht-archive-banner__intro p:last-child {
    margin-bottom: 0;
}

.syf-yacht-archive-banner__intro a {
    color: var(--syf-gold, #c5ab71);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.syf-yacht-archive-banner__intro a:hover,
.syf-yacht-archive-banner__intro a:focus-visible {
    color: var(--syf-gold-soft, #d9c896);
}

.syf-yacht-archive-banner__intro strong,
.syf-yacht-archive-banner__intro b {
    font-weight: 700;
    color: #fff;
}

.syf-yacht-archive-banner__intro em,
.syf-yacht-archive-banner__intro i {
    font-style: italic;
}

.syf-yacht-archive-banner__intro ul,
.syf-yacht-archive-banner__intro ol {
    margin: 0 0 1em;
    padding-left: 1.25em;
}

.syf-yacht-archive-banner__intro li {
    margin: 0.25em 0;
}

.syf-yacht-archive-banner__intro ul {
    list-style: disc;
}

.syf-yacht-archive-banner__intro ol {
    list-style: decimal;
}

/* ==========================================================================
   FINAL: Cormorant Garamond → Crimson Text (must stay last in style.css)
   Beats Tailwind utility .font-display { font-family: Cormorant Garamond }
   ========================================================================== */
:root,
html {
    --font-display: "Crimson Text", Georgia, "Times New Roman", serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display,
p.font-display,
div.font-display,
span.font-display,
.syf-footer-tagline,
.syf-hero-eyebrow,
.syf-hero-headline,
#countdown [data-unit],
#countdown p.font-display {
    font-family: "Crimson Text", Georgia, "Times New Roman", serif !important;
}