/* =================================================================
   Universal chrome header — works for both Pardo and Grand Soleil.

   Layout copied from the current pardoyachts.com new-header:
     * Bow-shaped white background SVG (3 responsive variants:
       mobile @<768, tablet @768-1023, desktop @>=1024) with a
       tapering right "nose" — `fill="#fff" stroke="#BEBEBE"`.
     * Navbar overlaid on top: Menu (toggle), Find a Dealer left,
       centered brand logo, close (X) right when menu is open.
     * The Menu trigger gets an underline while the overlay is open.
   Per-model logo + per-link URLs are wired up at runtime by
   js/header.js (loaded by the bootstrap in index.html).
   ================================================================= */

/* Reserve viewport space below the floating header. */
.site-wrapper {
    padding-top: 120px;
}
@media (max-width: 1023px) {
    .site-wrapper {
        padding-top: 112px;
    }
}
@media (max-width: 767px) {
    .site-wrapper {
        padding-top: 96px;
    }
}

body.chrome-menu-open {
    overflow: hidden;
}

/* ===================== Bow background ===================== */
.chrome-bow-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 150;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    padding: 24px 16px 0;
}
@media (min-width: 768px) {
    .chrome-bow-wrapper {
        padding: 20px 40px 0;
    }
}
@media (min-width: 1024px) {
    .chrome-bow-wrapper {
        padding: 20px 48px 0;
    }
}

.chrome-bow {
    width: 100%;
    height: 72px;
    display: none;
}
.chrome-bow--mobile {
    display: block;
}
@media (min-width: 768px) {
    .chrome-bow--mobile {
        display: none;
    }
    .chrome-bow--tablet {
        display: block;
    }
}
@media (min-width: 1024px) {
    .chrome-bow--tablet {
        display: none;
    }
    .chrome-bow--desktop {
        display: block;
    }
}

/* ===================== Navbar (foreground) ===================== */
.chrome-navbar {
    position: fixed;
    top: 24px;
    left: 0;
    right: 0;
    height: 72px;
    z-index: 151;
    display: flex;
    align-items: stretch;
    font-family: "TT-Norms-Pro-Regular", "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 768px) {
    .chrome-navbar {
        top: 20px;
    }
}

.chrome-navbar__container {
    width: 100%;
    height: 100%;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
@media (min-width: 768px) {
    .chrome-navbar__container {
        padding: 0 60px;
    }
}
@media (min-width: 1024px) {
    .chrome-navbar__container {
        padding: 0 65px;
    }
}

.chrome-navbar__left {
    display: flex;
    align-items: center;
    gap: 36px;
}
@media (max-width: 767px) {
    .chrome-navbar__left {
        gap: 20px;
    }
}

.chrome-navbar__btn {
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    line-height: 1;
    color: #000;
    padding: 4px 0;
    text-decoration: none;
    letter-spacing: 0.02em;
    margin-bottom: 4px;
}
.chrome-navbar__btn:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}
/* Hide "Find a Dealer" link on mobile (matches Pardo behaviour). */
@media (max-width: 767px) {
    .chrome-navbar__link[data-link="find_dealer"] {
        display: none;
    }
}
/* Underline the Menu button while overlay is open. */
body.chrome-menu-open .chrome-menu-btn {
    text-decoration: underline;
    text-underline-offset: 5px;
    margin-bottom: 4px;
}
.chrome-back-btn {
    display: flex;
    gap: 10px;
    align-items: center;
}

@media (max-width: 500px) {
    .chrome-back-btn {
        display: none;
    }
}

.chrome-navbar__brand {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    color: #000;
    line-height: 0;
}
.chrome-navbar__brand svg {
    display: block;
    height: 26px;
    width: auto;
}
.chrome-navbar__brand[data-model="gs60"] svg {
    height: 26px;
}

/* Grand Soleil's theme CSS adds an outline / focus ring to anchors and
   buttons on hover/focus. Pardo's CSS doesn't. Kill it everywhere inside
   our chrome so the look is identical between the two models. */
.chrome-navbar a,
.chrome-navbar button,
.chrome-menu-overlay a,
.chrome-menu-overlay button {
    outline: none;
    box-shadow: none;
}
.chrome-navbar a:hover,
.chrome-navbar button:hover,
.chrome-navbar a:focus,
.chrome-navbar a:focus-visible,
.chrome-navbar button:focus,
.chrome-navbar button:focus-visible,
.chrome-menu-overlay a:hover,
.chrome-menu-overlay button:hover,
.chrome-menu-overlay a:focus,
.chrome-menu-overlay a:focus-visible,
.chrome-menu-overlay button:focus,
.chrome-menu-overlay button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
/* SVG paths inherit Pardo's logo `fill: currentColor`; the GS logo paths
   carry `fill="#000"`. Some themes add a stroke on :hover on inline SVG
   children — kill that too. */
.chrome-navbar__brand:hover svg,
.chrome-navbar__brand:focus svg {
    outline: none !important;
}
.chrome-navbar__brand svg * {
    transition: none !important;
}

/* Close (X) button — only shown while overlay is open. */
.chrome-navbar__close {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    margin-left: auto;
}
.chrome-navbar__close svg {
    width: 24px;
    height: 24px;
    display: block;
}
body.chrome-menu-open .chrome-navbar__close {
    display: inline-flex;
}

/* ===================== Overlay menu ===================== */
.chrome-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    display: none;
    flex-direction: column;
    overflow: hidden;
    /* Force one font everywhere inside the overlay so the bottom-bar
       text (Find a Dealer / Ask to Pardo / Ask to Grand Soleil) renders
       identically across both models. Without this it inherits from the
       brand CSS — Pardo Shopify vs GS WordPress — and looks different. */
    font-family: "TT-Norms-Pro-Regular", "Helvetica Neue", Arial, sans-serif;
}
.chrome-menu-overlay *,
.chrome-menu-bottom *,
.chrome-menu-bottom__cell a {
    font-family: inherit;
}
body.chrome-menu-open .chrome-menu-overlay {
    display: flex;
}

.chrome-menu-scroll {
    flex: 1;
    overflow-y: auto;
    padding-top: 176px;
}
@media (min-width: 1024px) {
    .chrome-menu-scroll {
        padding-top: 152px;
    }
}
.chrome-menu-scroll::-webkit-scrollbar {
    display: none;
}
.chrome-menu-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.chrome-menu-items {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 0 24px;
}
@media (min-width: 768px) {
    .chrome-menu-items {
        gap: 48px;
        padding: 0 40px;
    }
}
@media (min-width: 1024px) {
    .chrome-menu-items {
        padding: 0 80px;
    }
}

.chrome-menu-items li {
    list-style: none;
    position: relative;
    width: 100%;
    max-width: 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) {
    .chrome-menu-items li {
        max-width: 400px;
    }
}

.chrome-menu-items a {
    color: #fff;
    text-decoration: none;
    font-family: "TT-Norms-Pro-Light", "TT-Norms-Pro-Regular", Helvetica, Arial, sans-serif;
    font-size: 28px;
    line-height: 1.1;
    padding-bottom: 32px;
    display: block;
}
@media (min-width: 768px) {
    .chrome-menu-items a {
        font-size: 40px;
        padding-bottom: 48px;
    }
}
.chrome-menu-items a:hover {
    opacity: 0.8;
}

/* Soft ellipse divider under each menu item (last has none). */
.chrome-menu-items li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 1px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='1' viewBox='0 0 400 1' fill='none'%3E%3Cellipse cx='200' cy='0.5' rx='200' ry='0.5' fill='white' fill-opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.chrome-menu-items li:last-child::after {
    display: none;
}

/* ===================== Bottom mini-footer ===================== */
.chrome-menu-bottom {
    width: 100%;
    display: flex;
    align-items: stretch;
    background: #fff;
    z-index: 170;
    transform: translateY(100%);
    opacity: 0;
    transition:
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.6s ease;
}
body.chrome-menu-open .chrome-menu-bottom {
    transform: translateY(0);
    opacity: 1;
}

.chrome-menu-bottom__cell {
    flex: 1;
    padding: 16px;
    display: flex;
    align-items: center;
}
@media (min-width: 768px) {
    .chrome-menu-bottom__cell {
        padding: 24px;
    }
}
.chrome-menu-bottom__cell--alt {
    background: #efeeed;
}
.chrome-menu-bottom__cell + .chrome-menu-bottom__cell {
    border-left: 1px solid #e5e7eb;
}

.chrome-menu-bottom__cell a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000;
    text-decoration: none;
    gap: 16px;
}
/* Brand CSS (Pardo Shopify, GS WordPress) wins via higher specificity
   selectors — Pardo shrinks <p> in footers to 12px, GS bumps it to 18px.
   We pin font + size explicitly with !important so both models render
   identically. The font name matches the one Pardo's CDN actually loads. */
.chrome-menu-bottom__cell p,
.chrome-menu-bottom__cell a,
.chrome-menu-bottom__cell span {
    font-family: "TT-Norms-Pro-Regular", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    font-weight: 500 !important;
    margin: 0;
}

.chrome-menu-bottom__svg {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}
.arrow-menu {
    display: inline-block;
    transition: transform 0.4s ease;
    width: 24px !important;
    height: 24px !important;
}
.chrome-menu-bottom__cell:hover .arrow-menu {
    transform: rotate(90deg);
}