/* =========================================================
   PRESIDENCE PROPERTY — MODULAR CSS
   File: pp-standard.css
   Scope: design tokens, global base, header/navigation, footer
   Baseline source: 00_PRESIDENCE_PROPERTY_ADDITIONAL_CSS_BASELINE_2026-08-05.css
========================================================= */


/* =========================================================
   01 ROOT / TOKENS
========================================================= */

:root {
    --pp-navy: #0B1F3A;
    --pp-gold: #B08D57;
    --pp-gold-hover: #C6A66A;
    --pp-ivory: #F8F6F1;
    --pp-cta-bg: #F1EEE7;
    --pp-white: #FFFFFF;
    --pp-body: #1E252B;
    --pp-muted: #6C757D;
    --pp-border: #E6E0D6;

    --pp-wide-width: 1280px;
    --pp-inner-width: 1200px;
    --pp-narrow-width: 1200px;
    --pp-edge-padding: 24px;

    --pp-transition-fast: 0.24s ease;
}


/* =========================================================
   02 GLOBAL BASE
========================================================= */

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
    html {
        overflow-y: scroll;
    }
}

body {
    color: var(--pp-body);
    background-color: var(--pp-ivory);
}

a {
    transition: color var(--pp-transition-fast);
}


/* =========================================================
   03 HEADER / NAVIGATION
   Protected navigation behaviour
   Do not modify without separate design decision
========================================================= */

.main-navigation .primary-menu-container > ul > li.menu-item > a {
    position: relative;
    color: #0B1F3A;
    transition: color 0.24s ease;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover {
    color: #C6A66A;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 12px;
    width: calc(100% - 12px);
    height: 2px;
    background-color: #B08D57;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    transition: transform 0.24s ease;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover::after {
    transform: translateX(-50%) scaleX(1);
}

.main-navigation .primary-menu-container > ul > li.current-menu-item > a,
.main-navigation .primary-menu-container > ul > li.current_page_item > a,
.main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.current_page_item > a:hover,
.main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a:hover {
    color: #0B1F3A;
}

.main-navigation .primary-menu-container > ul > li.current-menu-item > a::after,
.main-navigation .primary-menu-container > ul > li.current_page_item > a::after,
.main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a::after {
    transform: translateX(-50%) scaleX(1);
} 

/* 03.00 Header Site Branding */

.site-branding a.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.site-branding a.brand img {
    display: block;
    width: auto;
    max-height: 54px;
}

.site-branding .site-title {
    margin: 0;
    color: var(--pp-gold);
    font-family: "Cormorant Garamond", serif;
    font-size: 36px;
    line-height: 42px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.site-branding a.brand:hover .site-title {
    color: var(--pp-gold);
}

/* 03.01 Sticky Header / Scroll State */
#masthead {
    z-index: 1200;
}

#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) {
    position: fixed;
    background-color: var(--pp-white);
    box-shadow: 0 2px 6px rgba(176, 141, 87, 0.14);
}

#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(176, 141, 87, 0),
        rgba(176, 141, 87, 0.42),
        rgba(176, 141, 87, 0)
    );
}

/* =========================================================
   04 FOOTER
========================================================= */

.site-footer {
    --pp-footer-col-width: 320px;
    --pp-footer-col-gap: 120px;
    --pp-footer-title-zone: 42px;
    --pp-footer-title-height: 30px;
    --pp-footer-row-height: 24px;
    --pp-footer-icon-size: 18px;

    margin: 0;
    padding: 0;
    background-color: var(--pp-navy);
    color: var(--pp-ivory);
    box-sizing: border-box;
}


/* =========================================================
   04.01 Footer Reset
========================================================= */

.site-footer .site-middle-footer-wrap,
.site-footer .site-bottom-footer-wrap {
    margin: 0;
    padding: 0;
    background-color: var(--pp-navy);
    box-sizing: border-box;
}

.site-footer .site-footer-section,
.site-footer .footer-widget-area,
.site-footer .footer-widget-area-inner,
.site-footer .widget,
.site-footer .widget_text,
.site-footer .textwidget,
.site-footer .footer-html,
.site-footer .footer-html-inner {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.site-footer h3,
.site-footer div,
.site-footer a,
.site-footer p {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   04.02 Footer Main Grid
========================================================= */

.site-footer .site-middle-footer-wrap .site-footer-row-container-inner {
    width: 100%;
    max-width: var(--pp-inner-width);
    margin: 0 auto;
    padding: 36px 0 30px;
    box-sizing: border-box;
}

.site-footer .site-middle-footer-inner-wrap {
    display: grid;
    grid-template-columns:
        var(--pp-footer-col-width)
        var(--pp-footer-col-width)
        var(--pp-footer-col-width);
    column-gap: var(--pp-footer-col-gap);
    row-gap: 0;
    align-items: start;
    justify-content: start;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.site-footer .site-footer-middle-section-1,
.site-footer .site-footer-middle-section-2,
.site-footer .site-footer-middle-section-3 {
    width: var(--pp-footer-col-width);
    max-width: var(--pp-footer-col-width);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   04.03 Footer Columns
========================================================= */

.site-footer .pp-footer-col {
    display: grid;
    grid-template-rows: var(--pp-footer-title-zone) auto;
    width: var(--pp-footer-col-width);
    max-width: var(--pp-footer-col-width);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   04.04 Footer Titles
========================================================= */

.site-footer .pp-footer-title {
    grid-row: 1;
    display: block;
    width: 100%;
    height: var(--pp-footer-title-height);
    min-height: var(--pp-footer-title-height);
    margin: 0;
    padding: 0;
    color: var(--pp-gold);
    font-family: "Cormorant Garamond", serif;
    font-size: 24px;
    line-height: var(--pp-footer-title-height);
    font-weight: 500;
    letter-spacing: 0.01em;
    box-sizing: border-box;
}


/* =========================================================
   04.05 Footer Body
========================================================= */

.site-footer .pp-footer-body {
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   04.06 Identical Footer Lines
========================================================= */

.site-footer .pp-footer-line {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--pp-footer-row-height);
    min-height: var(--pp-footer-row-height);
    margin: 0;
    padding: 0;
    color: rgba(248, 246, 241, 0.90);
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: var(--pp-footer-row-height);
    font-weight: 400;
    text-decoration: none;
    box-sizing: border-box;
}

.site-footer a.pp-footer-line:hover,
.site-footer a.pp-footer-line:focus {
    color: var(--pp-gold);
    text-decoration: none;
}


/* =========================================================
   04.07 Footer Social - Desktop
========================================================= */

.site-footer .pp-footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 0;
    padding: 0;
}

.site-footer .pp-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--pp-gold) !important;
    background-color: transparent;
    border: 1px solid rgba(176, 141, 87, 0.60);
    font-family: Inter, sans-serif;
    font-size: 0;
    line-height: 0;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    box-sizing: border-box;
    transition:
        color var(--pp-transition-fast),
        background-color var(--pp-transition-fast),
        border-color var(--pp-transition-fast);
}

.site-footer .pp-footer-social a svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor !important;
}

.site-footer .pp-footer-social a svg path {
    fill: currentColor !important;
}

.site-footer .pp-footer-social a:hover,
.site-footer .pp-footer-social a:focus {
    color: var(--pp-navy) !important;
    background-color: var(--pp-gold);
    border-color: var(--pp-gold);
    text-decoration: none;
}

.site-footer .pp-footer-social a:hover svg,
.site-footer .pp-footer-social a:focus svg,
.site-footer .pp-footer-social a:hover svg path,
.site-footer .pp-footer-social a:focus svg path {
    fill: currentColor !important;
}


/* =========================================================
   04.08 Footer Contact Icons
========================================================= */

.site-footer .pp-footer-contact-line {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    height: var(--pp-footer-row-height);
    min-height: var(--pp-footer-row-height);
}

.site-footer .pp-footer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: var(--pp-footer-row-height);
    color: var(--pp-gold);
}

.site-footer .pp-footer-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
}


/* =========================================================
   04.09 Footer Bottom
========================================================= */

.site-footer .site-bottom-footer-wrap {
    margin: 0;
    padding: 0;
    background-color: var(--pp-navy);
    border-top: 1px solid rgba(176, 141, 87, 0.72);
    box-sizing: border-box;
}

.site-footer .site-bottom-footer-wrap .site-footer-row-container-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: var(--pp-inner-width);
    min-height: 60px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.site-footer .site-bottom-footer-inner-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 60px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   04.10 Footer Copyright and Privacy Link
========================================================= */

.site-footer
.site-bottom-footer-inner-wrap
.pp-footer-copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    column-gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--pp-white);
    font-family: Inter, sans-serif !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    text-align: center;
    text-transform: none !important;
    box-sizing: border-box;
}

.site-footer
.site-bottom-footer-inner-wrap
.pp-footer-copyright-text,

.site-footer
.site-bottom-footer-inner-wrap
.pp-footer-copyright-separator,

.site-footer
.site-bottom-footer-inner-wrap
a.pp-footer-copyright-link {
    display: inline-block;
    margin: 0;
    padding: 0;
    color: var(--pp-white) !important;
    font-family: Inter, sans-serif !important;
    font-size: 12px !important;
    line-height: 18px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
    text-align: center;
    text-transform: none !important;
    white-space: nowrap;
    box-sizing: border-box;
}

.site-footer
.site-bottom-footer-inner-wrap
a.pp-footer-copyright-link {
    text-decoration: none !important;
    transition: color var(--pp-transition-fast);
}

.site-footer
.site-bottom-footer-inner-wrap
a.pp-footer-copyright-link:hover,

.site-footer
.site-bottom-footer-inner-wrap
a.pp-footer-copyright-link:focus {
    color: var(--pp-gold) !important;
    text-decoration: none !important;
}

.site-footer
.site-bottom-footer-inner-wrap
a.pp-footer-copyright-link:focus-visible {
    outline: 2px solid rgba(176, 141, 87, 0.55);
    outline-offset: 4px;
}


/* =========================================================
   04.11 Footer Copyright - Mobile
========================================================= */

@media screen and (max-width: 767px) {

    .site-footer
    .site-bottom-footer-inner-wrap
    .pp-footer-copyright {
        flex-wrap: wrap;
        column-gap: 0;
        row-gap: 0;
        width: 100%;
        padding: 0 6px;
    }

    .site-footer
    .site-bottom-footer-inner-wrap
    .pp-footer-copyright-text {
        flex: 0 0 100%;
        display: block;
        width: 100%;
        text-align: center;
        white-space: nowrap;
    }

    .site-footer
    .site-bottom-footer-inner-wrap
    .pp-footer-copyright-separator {
        display: none;
    }

    .site-footer
    .site-bottom-footer-inner-wrap
    a.pp-footer-copyright-link {
        flex: 0 0 100%;
        display: block;
        width: 100%;
        text-align: center;
        white-space: nowrap;
    }

}

/* =========================================================
   RESPONSIVE — MOBILE GLOBAL / HEADER / FOOTER
========================================================= */

@media screen and (max-width: 767px) {

    body {
        overflow-x: hidden;
    }

    .site-branding a.brand {
        gap: 12px;
        max-width: 100%;
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .site-branding a.brand img {
        max-height: 36px;
        width: auto;
    }

    .site-branding .site-title {
        font-size: 24px;
        line-height: 30px;
        letter-spacing: 0.01em;
        white-space: nowrap;
    }

    /* =====================================================
       11.09 Mobile - Footer
    ===================================================== */

    .site-footer .site-middle-footer-wrap .site-footer-row-container-inner {
        max-width: none;
        padding: 36px 24px 36px;
        box-sizing: border-box;
    }

    .site-footer .site-middle-footer-inner-wrap {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 30px;
        column-gap: 0;
        width: 100%;
    }

    .site-footer .site-footer-middle-section-1,
    .site-footer .site-footer-middle-section-2,
    .site-footer .site-footer-middle-section-3 {
        width: 100%;
        max-width: none;
    }

    .site-footer .pp-footer-col {
        width: 100%;
        max-width: none;
    }

    .site-footer .pp-footer-title {
        font-size: 24px;
        line-height: 30px;
    }

    .site-footer .pp-footer-line {
        width: 100%;
        max-width: none;
    }

    .site-footer .pp-footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.site-footer .pp-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--pp-gold) !important;
    background-color: transparent;
    border: 1px solid rgba(176, 141, 87, 0.60);
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    box-sizing: border-box;
}

.site-footer .pp-footer-social a svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: currentColor !important;
}

.site-footer .pp-footer-social a svg path {
    fill: currentColor !important;
}

.site-footer .pp-footer-social a:hover,
.site-footer .pp-footer-social a:focus {
    color: var(--pp-navy) !important;
    background-color: var(--pp-gold);
    border-color: var(--pp-gold);
    text-decoration: none;
}

.site-footer .pp-footer-social a:hover svg,
.site-footer .pp-footer-social a:focus svg,
.site-footer .pp-footer-social a:hover svg path,
.site-footer .pp-footer-social a:focus svg path {
    fill: currentColor !important;
}

    .site-footer .site-bottom-footer-wrap .site-footer-row-container-inner {
        min-height: 60px;
        padding: 0 24px;
    }

    .site-footer .site-bottom-footer-inner-wrap {
        min-height: 60px;
    }

    .site-footer .pp-footer-copyright {
        font-size: 12px;
        line-height: 18px;
    }

}

/* =========================================================
   RESPONSIVE — TABLET PORTRAIT GLOBAL / HEADER / FOOTER
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {

    body {
        overflow-x: hidden;
    }

    /* =====================================================
       11.10.01 Tablet Portrait - Header / Branding
    ===================================================== */

    .site-branding {
        max-width: calc(100vw - 108px);
    }

    .site-branding a.brand {
        display: flex;
        align-items: center;
        gap: 12px;
        max-width: 100%;
        min-width: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .site-branding a.brand img {
        flex: 0 0 auto;
        max-height: 42px;
        width: auto;
    }

    .site-branding .site-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        color: var(--pp-gold);
        font-size: 36px;
        line-height: 30px;
        letter-spacing: 0.01em;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    /* =====================================================
       11.10.07 Tablet Portrait - Footer
    ===================================================== */

    .site-footer .site-middle-footer-wrap .site-footer-row-container-inner {
        max-width: none;
        padding: 42px 36px 36px;
        box-sizing: border-box;
    }

    .site-footer .site-middle-footer-inner-wrap {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 30px;
        column-gap: 0;
        width: 100%;
    }

    .site-footer .site-footer-middle-section-1,
    .site-footer .site-footer-middle-section-2,
    .site-footer .site-footer-middle-section-3 {
        width: 100%;
        max-width: none;
    }

    .site-footer .pp-footer-col {
        width: 100%;
        max-width: none;
    }

    .site-footer .pp-footer-title {
        font-size: 24px;
        line-height: 30px;
    }

    .site-footer .pp-footer-line {
        width: 100%;
        max-width: none;
    }

    .site-footer .pp-footer-social {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 18px;
    }

    .site-footer .pp-footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        color: var(--pp-gold) !important;
        background-color: transparent;
        border: 1px solid rgba(176, 141, 87, 0.60);
        font-size: 0;
        line-height: 0;
        text-decoration: none;
        box-sizing: border-box;
    }

    .site-footer .pp-footer-social a svg {
        display: block;
        width: 16px;
        height: 16px;
        fill: currentColor !important;
    }

    .site-footer .pp-footer-social a svg path {
        fill: currentColor !important;
    }

    .site-footer .pp-footer-social a:hover,
    .site-footer .pp-footer-social a:focus {
        color: var(--pp-navy) !important;
        background-color: var(--pp-gold);
        border-color: var(--pp-gold);
        text-decoration: none;
    }

    .site-footer .site-bottom-footer-wrap .site-footer-row-container-inner {
        min-height: 60px;
        padding: 0 36px;
    }

    .site-footer .site-bottom-footer-inner-wrap {
        min-height: 60px;
    }

    .site-footer .pp-footer-copyright {
        font-size: 12px;
        line-height: 18px;
    }

} 

/* =========================================================
   RESPONSIVE — TABLET LANDSCAPE FOOTER
   Validated target: 1024 × 768 px
   Range: 768–1199 px landscape
========================================================= */

@media screen and (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {

    /* Remove the Kadence tablet container constraints. */

    .site-footer
    .site-middle-footer-wrap
    > .site-footer-row-container-inner {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto !important;
        padding: 42px 36px 36px !important;
        box-sizing: border-box;
    }

    .site-footer
    .site-middle-footer-wrap
    > .site-footer-row-container-inner
    > .site-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* Force the three-column desktop-style footer at 1024 × 768. */

    .site-footer
    .site-middle-footer-wrap
    > .site-footer-row-container-inner
    > .site-container
    > .site-middle-footer-inner-wrap.site-footer-row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-template-rows: auto !important;
        grid-auto-flow: row !important;
        column-gap: 36px !important;
        row-gap: 0 !important;
        align-items: start !important;
        justify-content: stretch !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .site-footer
    .site-middle-footer-wrap
    > .site-footer-row-container-inner
    > .site-container
    > .site-middle-footer-inner-wrap.site-footer-row
    > .site-footer-section {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .site-footer .site-footer-middle-section-1,
    .site-footer .site-footer-middle-section-2,
    .site-footer .site-footer-middle-section-3,
    .site-footer .footer-widget-area,
    .site-footer .footer-widget-area-inner,
    .site-footer .pp-footer-col {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .site-footer .pp-footer-title,
    .site-footer .pp-footer-body,
    .site-footer .pp-footer-line,
    .site-footer .pp-footer-contact-line {
        min-width: 0;
    }

    /* Keep the bottom footer aligned with the middle footer. */

    .site-footer
    .site-bottom-footer-wrap
    > .site-footer-row-container-inner {
        width: 100% !important;
        max-width: none !important;
        min-height: 60px;
        margin: 0 auto !important;
        padding: 0 36px !important;
        box-sizing: border-box;
    }

    .site-footer
    .site-bottom-footer-wrap
    > .site-footer-row-container-inner
    > .site-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    .site-footer .site-bottom-footer-inner-wrap {
        width: 100% !important;
        max-width: none !important;
        min-height: 60px;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
}