/* =========================================================
   PULSE GRANDE – Luxury Header  (pg-header.css)
   Aman/Six-Senses inspired dual-row fixed header.
   All rules are scoped under #pg-header so they naturally
   win specificity over any framework class-based styles.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Jost:wght@300;400;500;600&display=swap');

/* ── Hide old framework header elements ── */
#header,
#mainMenu,
.header-extras { display: none !important; }

/* ── Hard box-reset inside header only ── */
#pg-header,
#pg-header * {
    box-sizing: border-box;
}

/* ─────────────────────────────────────────────
   WRAPPER
───────────────────────────────────────────── */
#pg-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    font-family: 'Jost', sans-serif;
    background: rgba(252, 249, 244, 0.98);
    border-bottom: 1px solid rgba(180, 155, 115, 0.2);
    transition: background 0.5s ease, box-shadow 0.5s ease;
}

#pg-header.scrolled {
    background: #fcf9f4;
    box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}

/* Transparent (homepage hero overlay) */
#pg-header.transparent-header {
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.05) 100%);
    border-bottom-color: rgba(255,255,255,0.1);
}
#pg-header.transparent-header.scrolled {
    background: #fcf9f4;
    border-bottom-color: rgba(180,155,115,0.2);
    box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}

/* ─────────────────────────────────────────────
   ROW 1 – TOP BAR
───────────────────────────────────────────── */
#pg-header .pg-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 48px;
    height: 70px;
    border-bottom: 1px solid rgba(180,155,115,0.15);
}
#pg-header.transparent-header .pg-top-bar {
    border-bottom-color: rgba(255,255,255,0.1);
}
#pg-header.transparent-header.scrolled .pg-top-bar {
    border-bottom-color: rgba(180,155,115,0.15);
}

/* Left */
#pg-header .pg-top-left {
    flex: 1;
    display: flex;
    align-items: center;
}

#pg-header .pg-top-menu-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    color: #3a3228;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    transition: color 0.3s;
}
#pg-header .pg-top-menu-btn:hover { color: #cba87c; }

#pg-header.transparent-header .pg-top-menu-btn { color: rgba(255,255,255,0.9); }
#pg-header.transparent-header .pg-top-menu-btn:hover { color: #fff; }
#pg-header.transparent-header.scrolled .pg-top-menu-btn { color: #3a3228; }

#pg-header .pg-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5.5px;
    width: 24px;
    height: 20px;
}
#pg-header .pg-hamburger span {
    display: block;
    height: 1.5px;
    width: 100%;
    background: currentColor;
    border-radius: 1px;
    transition: transform 0.35s ease, opacity 0.35s ease, width 0.35s ease;
    transform-origin: left center;
}
#pg-header .pg-hamburger.is-active span:nth-child(1) { transform: rotate(42deg) translateY(-1px); }
#pg-header .pg-hamburger.is-active span:nth-child(2) { opacity: 0; width: 0; }
#pg-header .pg-hamburger.is-active span:nth-child(3) { transform: rotate(-42deg) translateY(1px); }

#pg-header .pg-menu-label {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Center – Logo */
#pg-header .pg-top-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

#pg-header .pg-logo-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    line-height: 1;
}

#pg-header .pg-logo-text {
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 26px;
    font-weight: 300;
    letter-spacing: 10px;
    text-transform: uppercase;
    color: #1e1a14;
    line-height: 1;
    padding-right: 8px; /* optical centering of spaced text */
    transition: color 0.4s;
}

#pg-header .pg-logo-sub {
    font-family: 'Jost', sans-serif;
    font-size: 7.5px;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-weight: 500;
    color: #cba87c;
    padding-right: 6px;
    transition: color 0.4s;
}

/* Transparent logo states */
#pg-header.transparent-header .pg-logo-text { color: #fff; }
#pg-header.transparent-header .pg-logo-sub  { color: rgba(255,255,255,0.6); }
#pg-header.transparent-header.scrolled .pg-logo-text { color: #1e1a14; }
#pg-header.transparent-header.scrolled .pg-logo-sub  { color: #cba87c; }

/* Right */
#pg-header .pg-top-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
}

/* Language */
#pg-header .pg-lang-wrap {
    position: relative;
}

#pg-header .pg-lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #3a3228;
    transition: color 0.3s;
}
#pg-header .pg-lang-btn:hover { color: #cba87c; }

#pg-header.transparent-header .pg-lang-btn { color: rgba(255,255,255,0.9); }
#pg-header.transparent-header.scrolled .pg-lang-btn { color: #3a3228; }

#pg-header .pg-lang-label {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#pg-header .pg-lang-arrow {
    font-size: 8px;
    opacity: 0.6;
    transition: transform 0.25s ease;
    display: inline-block;
}
#pg-header .pg-lang-wrap:hover .pg-lang-arrow { transform: rotate(180deg); }

#pg-header .pg-lang-dropdown {
    position: absolute;
    top: calc(100% + 18px);
    right: 0;
    min-width: 148px;
    background: #faf8f4;
    border: 1px solid rgba(180,155,115,0.22);
    border-top: 2px solid #cba87c;
    box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 300;
}
#pg-header .pg-lang-wrap:hover .pg-lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#pg-header .pg-lang-dropdown a {
    display: block;
    padding: 11px 20px;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #555;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(180,155,115,0.1);
    transition: background 0.2s, color 0.2s;
    margin: 0;
}
#pg-header .pg-lang-dropdown a:last-child { border-bottom: none; }
#pg-header .pg-lang-dropdown a:hover { background: #f0ede6; color: #cba87c; }

/* Book button */
#pg-header .pg-book-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 26px;
    background: #1e1a14;
    color: #f5f0e8;
    font-family: 'Jost', sans-serif;
    font-size: 9.5px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    border-radius: 2px;
    border: 1px solid #1e1a14;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
#pg-header .pg-book-btn:hover {
    background: #cba87c;
    border-color: #cba87c;
    color: #fff;
}

/* Transparent: outline style on hero */
#pg-header.transparent-header .pg-book-btn {
    background: transparent;
    border-color: rgba(255,255,255,0.7);
    color: #fff;
}
#pg-header.transparent-header .pg-book-btn:hover {
    background: #cba87c;
    border-color: #cba87c;
    color: #fff;
}
#pg-header.transparent-header.scrolled .pg-book-btn {
    background: #1e1a14;
    border-color: #1e1a14;
    color: #f5f0e8;
}

/* ─────────────────────────────────────────────
   ROW 2 – NAV BAR
───────────────────────────────────────────── */
#pg-header .pg-nav-bar {
    display: flex;
    align-items: stretch;
    padding: 0 48px;
    height: 46px;
}

/* Property breadcrumb */
#pg-header .pg-property-crumb {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 24px;
    margin-right: 0;
    border-right: 1px solid rgba(180,155,115,0.25);
    flex-shrink: 0;
}
#pg-header.transparent-header .pg-property-crumb {
    border-right-color: rgba(255,255,255,0.18);
}
#pg-header.transparent-header.scrolled .pg-property-crumb {
    border-right-color: rgba(180,155,115,0.25);
}

#pg-header .pg-property-name {
    font-family: 'Jost', sans-serif;
    font-size: 9px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #999;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.25s;
}
#pg-header .pg-property-name:hover { color: #cba87c; }

#pg-header.transparent-header .pg-property-name { color: rgba(255,255,255,0.5); }
#pg-header.transparent-header.scrolled .pg-property-name { color: #999; }

#pg-header .pg-crumb-chevron {
    font-size: 12px;
    color: rgba(180,155,115,0.5);
    line-height: 1;
    font-style: normal;
}
#pg-header.transparent-header .pg-crumb-chevron { color: rgba(255,255,255,0.3); }
#pg-header.transparent-header.scrolled .pg-crumb-chevron { color: rgba(180,155,115,0.5); }

/* ── Main nav list ── */
#pg-header .pg-nav {
    display: flex;
    align-items: stretch;
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
#pg-header .pg-nav::-webkit-scrollbar { display: none; }

#pg-header .pg-nav > li {
    position: relative;
    display: flex;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* THE KEY FIX: nav link with proper padding, scoped under ID */
#pg-header .pg-nav > li > a {
    display: flex;
    align-items: center;
    padding: 0 16px;          /* ← this is what creates the gap */
    margin: 0;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #666;
    text-decoration: none;
    white-space: nowrap;
    line-height: 46px;
    background: none;
    border: none;
    transition: color 0.25s;
    position: relative;
}

/* Gold bottom underline */
#pg-header .pg-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 1.5px;
    background: #cba87c;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
}

#pg-header .pg-nav > li:hover > a,
#pg-header .pg-nav > li.pg-current > a {
    color: #1e1a14;
}
#pg-header .pg-nav > li:hover > a::after,
#pg-header .pg-nav > li.pg-current > a::after {
    transform: scaleX(1);
}

/* Transparent state */
#pg-header.transparent-header .pg-nav > li > a { color: rgba(255,255,255,0.78); }
#pg-header.transparent-header .pg-nav > li:hover > a,
#pg-header.transparent-header .pg-nav > li.pg-current > a { color: #fff; }
#pg-header.transparent-header.scrolled .pg-nav > li > a { color: #666; }
#pg-header.transparent-header.scrolled .pg-nav > li:hover > a,
#pg-header.transparent-header.scrolled .pg-nav > li.pg-current > a { color: #1e1a14; }

/* ── Dropdown panels ── */
#pg-header .pg-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #faf8f4;
    border: 1px solid rgba(180,155,115,0.18);
    border-top: 2px solid #cba87c;
    box-shadow: 0 16px 48px rgba(0,0,0,0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
    z-index: 300;
    list-style: none;
    padding: 0;
    margin: 0;
}
#pg-header .pg-nav > li:hover > .pg-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#pg-header .pg-dropdown li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#pg-header .pg-dropdown li a {
    display: block;
    padding: 12px 22px;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #666;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(180,155,115,0.1);
    border-top: none;
    border-left: none;
    border-right: none;
    background: none;
    margin: 0;
    transition: background 0.2s, color 0.2s, padding-left 0.2s;
}
#pg-header .pg-dropdown li:last-child a { border-bottom: none; }
#pg-header .pg-dropdown li a:hover {
    background: #f0ede6;
    color: #cba87c;
    padding-left: 28px;
}

/* ─────────────────────────────────────────────
   FULLSCREEN MEGA MENU OVERLAY
───────────────────────────────────────────── */
.pg-mega-overlay {
    position: fixed;
    inset: 0;
    background: rgba(14, 11, 6, 0.97);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0.45s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}
.pg-mega-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.pg-mega-logo {
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cormorant Garamond', serif;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 9px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    text-decoration: none;
    white-space: nowrap;
    padding-right: 9px;
}

.pg-mega-close {
    position: absolute;
    top: 32px;
    right: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255,255,255,0.3);
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 32px;
    line-height: 1;
    transition: color 0.25s, transform 0.3s;
    padding: 0;
}
.pg-mega-close:hover {
    color: #cba87c;
    transform: rotate(90deg);
}

.pg-mega-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 80px;
    padding: 100px 120px;
    width: 100%;
    max-width: 1140px;
}

.pg-mega-col + .pg-mega-col {
    border-left: 1px solid rgba(203,168,124,0.15);
    padding-left: 80px;
}

.pg-mega-col h4 {
    font-family: 'Jost', sans-serif;
    font-size: 8.5px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #cba87c;
    font-weight: 600;
    margin-bottom: 24px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.pg-mega-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pg-mega-col ul li {
    margin-bottom: 2px;
    list-style: none;
}
.pg-mega-col ul li a {
    font-family: 'Cormorant Garamond', serif;
    font-size: 26px;
    font-weight: 300;
    font-style: italic;
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: color 0.25s, padding-left 0.25s;
    display: block;
    padding: 5px 0;
    line-height: 1.3;
}
.pg-mega-col ul li a:hover {
    color: #cba87c;
    padding-left: 6px;
}

/* ─────────────────────────────────────────────
   BODY PADDING
───────────────────────────────────────────── */
body.pg-header-ready {
    padding-top: 116px; /* 70 top-bar + 46 nav-bar */
}
body.pg-header-hero {
    padding-top: 0; /* hero pages: transparent header sits over the image */
}

/* ─────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 1200px) {
    #pg-header .pg-top-bar  { padding: 0 32px; }
    #pg-header .pg-nav-bar  { padding: 0 32px; }
    #pg-header .pg-nav > li > a { padding: 0 12px; }
    #pg-header .pg-nav > li > a::after { left: 12px; right: 12px; }
}

@media (max-width: 1024px) {
    #pg-header .pg-top-bar  { padding: 0 24px; }
    #pg-header .pg-nav-bar  { padding: 0 24px; }
    #pg-header .pg-property-crumb { display: none; }
    #pg-header .pg-nav > li > a { padding: 0 10px; font-size: 9.5px; letter-spacing: 1.5px; }
    #pg-header .pg-nav > li > a::after { left: 10px; right: 10px; }
}

@media (max-width: 768px) {
    #pg-header .pg-top-bar  { height: 58px; padding: 0 20px; }
    #pg-header .pg-nav-bar  { display: none; }
    body.pg-header-ready { padding-top: 58px; }

    #pg-header .pg-menu-label { display: none; }
    #pg-header .pg-logo-text { font-size: 20px; letter-spacing: 7px; }

    .pg-mega-inner {
        grid-template-columns: 1fr;
        padding: 70px 28px 40px;
        gap: 0;
    }
    .pg-mega-col + .pg-mega-col {
        border-left: none;
        border-top: 1px solid rgba(203,168,124,0.12);
        padding-left: 0;
        margin-top: 32px;
        padding-top: 32px;
    }
    .pg-mega-col ul li a { font-size: 22px; }
}
