/* =============================================================================
 * ppr-restyle.css — the Sotheby's-style restyling
 *
 * COLOUR, TYPE AND SURFACE ONLY. Anything that changes where an element sits —
 * width, position, margin, flex, z-index — belongs in child-custom.css, which is
 * shared with the theme-upgrade branch. This file exists only on
 * feature/look-and-feel, so the two branches no longer diverge inside one
 * 190KB stylesheet.
 *
 * Generated by splitting child-custom.css against the upgrade branch with
 * postcss; the split was verified lossless (655 of 655 styling-only
 * declarations accounted for). Hand-edit freely from here — it is a normal
 * stylesheet now, not a generated one.
 *
 * Loaded after child-custom.css, so it wins on cascade order without needing
 * raised specificity.
 * ========================================================================== */

/* VC Buttons */
a.vc_general.vc_btn3.vc_btn3-style-modern.vc_btn3-color-primary {
    background: var(--ppr-gold)
}
.contact-details address {
    border-left: 2px solid var(--ppr-gold)
}
#intro a[href="#first"] {
    background: var(--ppr-navy)
}
#overview .property-item .features h4 {
    background-color: var(--ppr-navy-deep)
}

.tax-desc a {
    color: var(--ppr-gold)
}
.menu-and-contact-wrap > .contact-number,.menu-and-contact-wrap > .contact-number .outer-strip {
    background-color: var(--ppr-gold)
}
.menu-and-contact-wrap > .contact-number .fa-phone {
    background-color: var(--ppr-gold)
}
#shiftnav-toggle-main {
    background-color: var(--ppr-gold)
}
.shiftnav.shiftnav-nojs.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item > .shiftnav-target:hover, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item.shiftnav-active > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item.shiftnav-in-transition > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item.current-menu-item > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu > li.shiftnav-sub-accordion.current-menu-ancestor > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu > li.shiftnav-sub-shift.current-menu-ancestor > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu.shiftnav-active-highlight li.menu-item > .shiftnav-target:active, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu.shiftnav-active-on-hover li.menu-item > .shiftnav-target:hover {
    background-color: var(--ppr-gold)
}
.area2:hover .area-name, .area3:hover .area-name , .area4:hover .area-name {
    background: var(--ppr-gold)
}
/* End of CSS from the Theme Options - Luis Garcia - 21 Oct 2025 */
/* Child Theme - Custom CSS File for Buyers to Modify */
.main-menu ul li.current-menu-item > a, .main-menu ul li.current_page_item > a {
    color: var(--ppr-gold)
}
.main-menu ul li:hover, .main-menu ul li:hover > a {
    color: var(--ppr-gold)
}
.main-menu ul li.current-menu-item > a, .main-menu ul li.current_page_item > a, .main-menu ul li:hover > a {
    color: var(--ppr-gold) !important
}
.main-menu ul li:hover > a {
    color: var(--ppr-gold) !important
}
.stb-content form tr:first-child td {
    background: var(--ppr-gold)
}
.stb-content form input[type="submit"], .stb-content form input[type="reset"] {
    background: var(--ppr-gold)
}
li.bawmrp_manual span {
    color: var(--ppr-gold)
}
.sh-link a {
    background-color: var(--ppr-gold)
}
.real-btn:hover, input.real-btn.btn:hover {
    background-color: var(--ppr-gold)
}
.more-details, .mc4wp-form button, .mc4wp-form input[type=button], .mc4wp-form input[type=submit] {
    background-color: var(--ppr-gold)
}
#shiftnav-toggle-main {
    background-color: var(--ppr-gold)
}
.shiftnav.shiftnav-nojs.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item > .shiftnav-target:hover, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item.shiftnav-active > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item.shiftnav-in-transition > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu li.menu-item.current-menu-item > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu > li.shiftnav-sub-accordion.current-menu-ancestor > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu > li.shiftnav-sub-shift.current-menu-ancestor > .shiftnav-target, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu.shiftnav-active-highlight li.menu-item > .shiftnav-target:active, .shiftnav.shiftnav-skin-standard-dark ul.shiftnav-menu.shiftnav-active-on-hover li.menu-item > .shiftnav-target:hover {
    background-color: var(--ppr-gold)
}
.popup-subtitle {
    background: var(--ppr-navy)
}
.activepage {
    border-bottom: 2px solid var(--ppr-navy)
}
.donepage {
    border-bottom: 2px solid var(--ppr-navy)
}
.activepage > span {
    border: 2px solid var(--ppr-navy);
    color: var(--ppr-navy)
}
.donepage > span {
    border: 2px solid var(--ppr-navy);
    background: var(--ppr-navy)
}
.caldera-grid input[type=submit], .caldera-grid .btn-default {
    background: var(--ppr-navy) !important
}
.caldera-grid {
    border: 1px solid var(--ppr-navy)
}
a.subscribe-popup {
    background-color: var(--ppr-gold)
}
a.subscribe-popup:hover {
    background-color: var(--ppr-gold)
}
/* Was `color: #fff` — correct while this title sat on the navy plate, invisible
 * once that plate was removed (2026-09-17), which is what made the homepage
 * featured titles disappear. */
body.home h4.price a {
    color: var(--ppr-navy)
}
.area-name {
    background: var(--ppr-gold)
}
.area2:hover .area-name, .area3:hover .area-name {
    background: var(--ppr-gold)
}
/* The mark is the blue horizontal logo, so the mobile band has to be light —
 * on navy it disappeared completely. Matches the desktop logo band. */
#logo-mobile {
    background-color: #fff
}
#hero {
    border-bottom: 5px solid var(--ppr-gold)
}
#steps h3 {
    color: var(--ppr-gold)
}
#bottom {
    border-bottom: 5px solid var(--ppr-gold)
}
.property-item .price, .es-carousel-wrapper ul li .price {
    background-color: var(--ppr-navy-deep) !important
}
/* Was `color: #fff !important` for all three. Correct while the card title sat
 * on the navy price bar; once that bar was removed (2026-09-17) it painted the
 * homepage featured titles white on white — and the !important beat every later
 * rule, which is why changing the colour elsewhere had no effect.
 *
 * The carousel keeps white: its titles still sit on a dark overlay. */
.property-item h4, .property-item h4 a {
    color: var(--ppr-navy) !important
}
.es-carousel-wrapper ul li h4 a {
    color: #fff !important
}
.list-container .property-item h4, .list-container .property-item h4 a {
    color: var(--ppr-navy-deep) !important
}
body.page-id-2082 #easy {
    border-bottom: 5px solid var(--ppr-gold)
}
#overview .property-item .wrap {
    background-color: var(--ppr-navy-deep)
}
.related-properties .property-item h4 a {
    color: var(--ppr-navy-deep) !important
}
#anaMenu a.btn {
    background: var(--ppr-gold)
}
/* May 5th, 2023 - Luis Garcia: styling for returning visitor widget */
/* #caldera_forms_widget-2 {
          display: none;
        } */
#caldera_forms_widget-3 {
    background: var(--ppr-navy)
}
#caldera_forms_widget-3 .visitorName {
    background: var(--ppr-navy-deep)
}
#caldera_forms_widget-3 .visitorName + h5, #caldera_forms_widget-3 .caldera-grid .form-group {
    background: var(--ppr-navy)
}
#caldera_forms_widget-3 [data-formpage="1"] .radio {
    background: var(--ppr-navy)
}
#caldera_forms_widget-3 label[for="fld_2776047_1"] + div .radio:last-of-type {
    background: var(--ppr-gold)
}
#caldera_forms_widget-3 [data-formpage="1"] .radio + .radio {
    background: var(--ppr-gold)
}
label.control-label[for="fld_9188425_1"], label[for="fld_3707070_1"] {
    background: var(--ppr-navy-deep)
}
input#fld_6096417_1, input#fld_3805562_1, input#fld_6834705_1, input#fld_8091105_1,
input#fld_8751170_1,
input#fld_9356015_1 {
    background: var(--ppr-navy) !important
}
input#fld_3805562_1, input#fld_8091105_1,
input#fld_9356015_1 {
    background: var(--ppr-navy) !important
}
#caldera_forms_widget-3 .checkbox label {
    background: var(--ppr-navy)
}
#caldera_forms_widget-3 input[type="checkbox"] {
    background: var(--ppr-navy-deep)
}
#caldera_forms_widget-3 input[type="checkbox"]:checked:after {
    background: var(--ppr-gold)
}
#caldera_forms_widget-3 input[type="text"], #caldera_forms_widget-3 input[type="email"] {
    background: var(--ppr-navy-deep)
}
#caldera_forms_widget-3 [data-formpage="3"] .checkbox {
    border: 1px solid var(--ppr-navy-deep)
}
.slide-description p {
    color: var(--ppr-navy-deep)
}
@media (max-width: 990px) {
    .advance-search  h3 {
        background: url('https://pprealtystg.wpengine.com/wp-content/uploads/2016/04/down.png') right center no-repeat var(--ppr-navy-deep)
    }
}
@media (max-width: 979px) {
    .advance-search  h3 {
        background: url('https://puntapacificarealty.com/wp-content/uploads/2016/02/down.png') right center no-repeat var(--ppr-navy-deep)
    }
}
@media screen and (max-width: 1024px) {
    #anaMenu li, #anaMenu ul li:first-child {
        border: 1px solid var(--ppr-navy) !important
    }
}
@media screen and (max-width: 640px) {
    #property-slider-two-wrapper {
        border-top: 5px solid var(--ppr-gold)
    }
}
/* End of the CSS from the Customizer - Luis Garcia - 21 Oct 2025 */
/* =============================================================================
 * Rules ported from old style.css (below the @import line)
 * The @import url("../realhomes/style.css") is NOT needed — the new child
 * theme's inspiry_enqueue_child_styles() handles the parent stylesheet.
 * ============================================================================= */
button.btn, input[type="submit"].btn, button.btn:hover, input[type="submit"].btn:hover {
    border: solid 1px var(--ppr-gold);
    background: var(--ppr-gold)
}
#top-header-widget input[type=submit] {
    background-color: var(--ppr-gold)
}
#eu-cookie .popup-wrapper a {
    color: var(--ppr-gold)
}
#eu-cookie .popup-wrapper a:hover {
    color: var(--ppr-gold)
}
#eu-cookie .popup-wrapper a.close-icon .fas:hover {
    color: var(--ppr-gold)
}
/* =============================================================================
   2026-08-24 — blog post + navigation parity with prod.
   ========================================================================== */
/* Submenu background: the parent defaults to its orange accent; PPR's is the
   dark navy from the old theme (sampled from prod: rgb(26,38,47)). */
.rh_menu__main_menu .sub-menu,
.rh_menu__responsive .sub-menu,
#navigation ul.sub-menu {
    background-color: var(--ppr-navy-deep)
}
/* Blog post meta + share bar. These rules lived in the OLD PARENT's
   css/main.css (scoped under #overview) and were never ported, so the share
   bar rendered as plain inline text. Restored; FA4 [class^="fa-"] selectors
   still match FA6 markup. */
.single-post-main .post-header .post-meta,
.single-post-main .post-meta {
    color: var(--ppr-navy-deep)
}
#overview .share-networks a {
    color: var(--ppr-navy-deep)
}
#overview .share-networks a:hover {
    color: var(--ppr-gold)
}
/* "Read More" renders as a full-width blue block in the parent's footer strip.
   Production's is an inline orange button — the same PPR orange every other
   call-to-action uses (see .more-details above). */
.archives-main .real-btn,
.post-footer .real-btn {
    background-color: var(--ppr-gold)
}
/* Submit: Caldera's inline button colour (.caldera-grid input[type=submit]). */
.fluentform .ff-btn-submit,
.fluentform .ff_submit_btn_wrapper button {
    background: var(--ppr-navy) !important
}
/* =============================================================================
 * PPR TYPOGRAPHY — Sotheby's-style pairing
 *
 * Mapping requested by Luis, reading across from the reference site
 * (sothebysrealty.com/turksandcaicossir/eng):
 *
 *     Freight (display serif)  ->  EB Garamond
 *     Benton  (UI sans)        ->  Source Sans 3
 *
 * "Source Pro" on Google Fonts is now published as Source Sans 3 (it was Source
 * Sans Pro); that is the Benton Sans counterpart. Source Serif and Source Code
 * are different families and are not what is wanted here.
 *
 * Loaded from functions.php, NOT from the Customizer. The Customizer stores font
 * choices in the database, and this project never pushes dev/staging databases to
 * production — a Customizer font would have to be re-entered by hand on every
 * environment, and would be silently lost on any environment refresh. In code it
 * ships with the theme.
 *
 * Reference-site observations this encodes:
 *   - display serif is LIGHT, never bold; bolding it is the single fastest way
 *     to lose the look
 *   - small labels and buttons are uppercase with wide letter-spacing
 *   - gold is an accent for rules and active states only — never a fill
 * ========================================================================== */
:root {
    --ppr-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
    --ppr-sans: 'Source Sans 3', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif
}
body,
button,
input,
select,
textarea,
.rh_form input,
.rh_form select {
    font-family: var(--ppr-sans)
}
/* Display serif. Weight 400 deliberately: the reference sets its headings light,
   and the theme's own h1-h6 come in at 600-700, which reads as a different
   typeface entirely at display sizes. */
h1, h2, h3, h4, h5, h6,
.page-title,
.entry-title,
.rh_page__title,
.property-title,
.rh_prop_card__title,
.section-title,
.widget-title {
    font-family: var(--ppr-serif);
    font-weight: 400;
    letter-spacing: 0
}
/* Small uppercase labels: nav, meta, breadcrumbs, card eyebrows. */
.main-menu > ul > li > a,
.nav-menu > li > a,
.breadcrumb,
.post-meta,
.property-meta,
.rh_prop_card__meta,
.rh_label,
.property-status {
    font-family: var(--ppr-sans);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600
}
/* Buttons read as lettering, not labels. */
.btn,
button.btn,
input[type="submit"],
input[type="submit"].btn,
.rh_btn,
a.btn {
    font-family: var(--ppr-sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600
}
/* Gold is an accent, not a fill: hairline rules and active states only. */
.main-menu > ul > li.current-menu-item > a,
.main-menu > ul > li > a:hover {
    box-shadow: inset 0 -1px 0 0 var(--ppr-gold)
}
/* =============================================================================
 * PPR brand adjustments — 2026-09-15 round 2
 * ========================================================================== */
/* --- property names stay SANS ------------------------------------------------
 * The display serif is for editorial headings. Property titles are data, not
 * prose: they run long, carry pipes, digits, superscripts and prices
 * ("… | Pacific Village 180m² | $3,500"), and a light Garamond at that length
 * reads as decoration rather than as a listing. Requested by Luis.
 *
 * These selectors sit AFTER the typography block on purpose — same specificity,
 * later wins — rather than being carved out of it, so the rule that sets the
 * display face stays one readable list. */
h3.title,
h3.title a,
.property-title,
.rh_prop_card__title,
.property-item .title,
.single-property h1.page-title,
body.single-property .page-title {
    font-family: var(--ppr-sans);
    font-weight: 600;
    letter-spacing: 0
}
#footer-wrapper {
    background-image: none;
    background-color: var(--ppr-navy-deep)
}
/* --- header lettering ------------------------------------------------------
 * 13px, uppercase, lightly tracked across the header: main nav, the top bar
 * (email, WPML switcher, phone) and their sub-menus. Requested 2026-09-15.
 *
 * Selectors deliberately mirror the parent's own specificity rather than adding
 * !important — `.main-menu ul li a` is the parent's rule (it sets 14px Lato) and
 * this file loads after it, so a like-for-like selector wins on order alone. An
 * !important here would be inherited by every later tweak and make the header
 * progressively harder to adjust.
 *
 * #top-header-widget is excluded on purpose: it holds the Mailchimp signup, and
 * uppercasing a form's placeholder and its "Sign up" field reads as shouting
 * rather than as navigation. */
#header-top a,
#header-top .wpml-ls a,
#header-top .wpml-ls-item-toggle,
.main-menu ul li a,
.main-menu ul li ul li a,
.menu-and-contact-wrap a,
.rh_make_a_call,
.rh_make_a_call a,
.user-nav a,
.top-nav a {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em
}
#header-top {
    background-color: var(--ppr-navy-deep)
}
/* 2. Property titles — the listing card title is h4.price, NOT h3.title.
 * The theme reuses its price class for the card heading, which is why the
 * earlier sans rule missed every card in the grid. */
h4.price,
h4.price a,
.property-item h4.price,
.property-item h4.price a {
    font-family: var(--ppr-sans);
    font-weight: 600;
    letter-spacing: 0
}
.property-item figure figcaption,
.property-item figure .property-label {
    position: absolute;
    left: 0;
    right: auto;
    bottom: 0;
    margin: 0;
    z-index: 2;
    background-color: var(--ppr-navy-deep);
    color: #fff;
    font-family: var(--ppr-sans);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 14px
}
/* 4 + 5. Search controls read as one set.
 * bootstrap-select renders each select as a <button>, which inherits the
 * theme's button styling — bold, and gold once the palette was remapped — while
 * the plain text inputs next to them stayed light grey. Same visual weight for
 * both, and no gold on hover/focus/open: gold is an accent here, not a fill. */
.advance-search .bootstrap-select > .btn,
.advance-search .selectwrap .btn,
.advance-search .bootstrap-select > .btn:hover,
.advance-search .bootstrap-select > .btn:focus,
.advance-search .bootstrap-select > .btn:active,
.advance-search .bootstrap-select.open > .btn,
.advance-search .selectwrap .btn:hover,
.advance-search .selectwrap .btn:focus {
    background-color: #fff;
    background-image: none;
    color: #777;
    font-family: var(--ppr-sans);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none
}
/* The open dropdown's own rows: highlight without gold. */
.advance-search .bootstrap-select .dropdown-menu > li > a:hover,
.advance-search .bootstrap-select .dropdown-menu > li.selected > a,
.advance-search .bootstrap-select .dropdown-menu > .active > a {
    background-color: #f2f4f6;
    background-image: none;
    color: var(--ppr-navy)
}
.advance-search input[type="submit"].real-btn,
.advance-search input[type="submit"].btn,
.advance-search .real-btn.btn {
    background-color: var(--ppr-navy);
    border-color: var(--ppr-navy);
    color: #fff
}
.advance-search input[type="submit"].real-btn:hover,
.advance-search input[type="submit"].btn:hover,
.advance-search .real-btn.btn:hover {
    background-color: var(--ppr-navy-deep);
    border-color: var(--ppr-navy-deep);
    color: #fff
}
/* Status badge: white plate, navy lettering, sitting on the photo. */
.property-item figure figcaption,
.property-item figure .property-label {
    background-color: #fff;
    color: var(--ppr-navy);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.12em;
    padding: 12px 22px
}
.more-details,
a.more-details {
    background-color: transparent;
    border: 1px solid var(--ppr-gold);
    color: var(--ppr-navy) !important;
    font-family: var(--ppr-sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: background-color 0.18s ease, color 0.18s ease
}
.more-details::after {
    font-size: 15px
}
.more-details:hover,
a.more-details:hover {
    background-color: var(--ppr-navy);
    border-color: var(--ppr-navy);
    color: #fff !important;
    opacity: 1
}
#footer,
#footer p,
#footer li,
#footer span,
#footer td,
#footer .textwidget,
#footer .widget,
#footer .widget .title,
#footer .widget .wp-block-group__inner-container > h2,
#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
    color: #fff
}
#footer a,
#footer .widget ul li a,
#footer .textwidget a {
    color: #fff
}
#footer a:hover,
#footer .widget ul li a:hover,
#footer .textwidget a:hover {
    color: var(--ppr-gold)
}
/* The Mailchimp signup button carries its colour as an INLINE style
 * (style="background-color: #4DC7EC") saved in the widget's HTML in the
 * database, so the palette remap could not reach it and normal specificity
 * cannot either. !important is the only way to override an inline style from a
 * stylesheet — the alternative is editing widget content in the database, which
 * would not travel with the theme. */
#footer .mc4wp-form input[type="submit"],
.mc4wp-form input[type="submit"] {
    background-color: var(--ppr-gold) !important;
    color: #fff !important;
    border: none;
    font-family: var(--ppr-sans);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600
}
/* =============================================================================
 * PPR brand adjustments — 2026-09-15 round 5
 * ========================================================================== */
/* White header. #header-top keeps its navy band (it is full-bleed and set
 * earlier in this file); everything below it — logo, nav, phone — sits on white. */
.header-wrapper,
.header-wrapper.stick {
    background-color: #fff
}
/* Navigation on a white header reads navy. The parent's #afb4b5 was chosen for
 * a near-black bar and is invisible here; it is remapped in the generated sheet
 * (its only use is .main-menu ul li a), and this is the hover/active pair. */
.main-menu ul li a:hover,
.main-menu ul li.current-menu-item > a,
.main-menu ul li.current_page_item > a {
    color: var(--ppr-gold)
}
/* Phone number: UI sans, not the display serif. It is a number, and Garamond
 * figures at heading weight read as decorative here. */
h2.contact-number,
h2.contact-number a,
.rh_make_a_call,
a.rh_make_a_call {
    font-family: var(--ppr-sans)
}
#footer .mc4wp-form input[type="submit"],
.mc4wp-form input[type="submit"] {
    background-color: transparent !important;
    border: 1px solid var(--ppr-gold);
    color: #fff !important;
    font-family: var(--ppr-sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    transition: background-color 0.18s ease, color 0.18s ease
}
#footer .mc4wp-form input[type="submit"]:hover,
.mc4wp-form input[type="submit"]:hover {
    background-color: var(--ppr-gold) !important;
    border-color: var(--ppr-gold);
    color: #fff !important
}
/* One continuous surface on the homepage.
 * The parent draws the content column as a box: .main has 1px #dedede left and
 * right borders, and .page-template-home .main adds a bottom border and its own
 * white fill, so the page reads as a card floating on the body rather than as a
 * single sheet. Dropped so sections run together as they do on the reference. */
body.home,
body.page-template-home {
    background-color: #fff
}
body.home .main,
body.page-template-home .main,
body.home .main.top-border,
body.page-template-home .main.top-border {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom: 0;
    background-color: transparent
}
body.home .main-wrap,
body.page-template-home .main-wrap {
    background-color: transparent
}
/* Status badge alignment.
 * An absolutely positioned child resolves `left` against its containing block's
 * PADDING box, not its content box. `body.home .property-item figure` carries
 * padding-left:15px, so `left:0` planted the badge 15px to the LEFT of the image
 * it is supposed to sit on — the overhang in the screenshot. Matching the inset
 * to the padding puts it back on the photo.
 *
 * If that padding is ever changed, this needs to change with it; the pair is
 * noted in both places rather than left to be rediscovered. */
.property-item figure figcaption,
.property-item figure .property-label {
    left: 0;
    right: auto;
    bottom: 0
}
.ppr-header-phone {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em
}
.ppr-header-phone a,
#header-top .ppr-header-phone a {
    color: #fff;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0.02em
}
.ppr-header-phone a:hover {
    color: var(--ppr-gold)
}
/* Remove the parent's gradient strip behind the property grid.
 * .property-items{background:url(../../images/container-gradient.png) #fff repeat-x}
 * — a decorative fade that reads as a seam now the page is one flat surface. */
.property-items,
body.home .property-items {
    background-image: none;
    background-color: transparent
}
/* Newsletter signup button: it lives in BOTH the navy footer and the now-white
 * header widget. The earlier rule forced white text, which is correct on navy
 * and invisible on white — the button only appeared on hover. Scoped by
 * context instead of colouring both the same. */
#top-header-widget .mc4wp-form input[type="submit"],
.header-wrapper .mc4wp-form input[type="submit"] {
    color: var(--ppr-navy) !important;
    border-color: var(--ppr-gold)
}
#top-header-widget .mc4wp-form input[type="submit"]:hover,
.header-wrapper .mc4wp-form input[type="submit"]:hover {
    background-color: var(--ppr-gold) !important;
    color: #fff !important
}
#header-top .ppr-header-phone {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #fff
}
/* Footer ghost buttons need light lettering.
 * .more-details sets navy text, which is correct on white and invisible on the
 * navy footer — the testimonial "Read More" was navy-on-navy. Same shape of bug
 * as the signup button, so it is scoped the same way: by context, not colour. */
#footer .more-details,
#footer a.more-details,
#footer-wrapper .more-details {
    color: #fff !important;
    border-color: var(--ppr-gold)
}
#footer .more-details:hover,
#footer a.more-details:hover,
#footer-wrapper .more-details:hover {
    background-color: var(--ppr-gold);
    border-color: var(--ppr-gold);
    color: #fff !important
}
body.home .widget_youtube-channel,
body.home .widget.widget_youtube-channel,
body.home .widget_youtube-channel .youtube_channel {
    background: none;
    background-color: transparent;
    border: 0;
    box-shadow: none
}
body.home .widget_youtube-channel > .title,
body.home .widget_youtube-channel .title {
    background: none;
    background-color: transparent;
    border: 0;
    font-family: var(--ppr-serif);
    font-weight: 400;
    text-transform: none
}
.ytc_title,
.ytc_title a,
h3.ytc_title,
h3.ytc_title a,
.ytc_video_container .ytc_title {
    font-family: var(--ppr-sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none
}
body.home .flexslider::before,
body.home #home-flexslider::before {
    background: linear-gradient(to bottom, rgba(0, 23, 49, 0.78) 0%, rgba(0, 23, 49, 0.35) 45%, rgba(0, 23, 49, 0) 100%);
    pointer-events: none
}
body.home .flexslider .desc-wrap,
body.home .flexslider .slide-description,
body.home #home-flexslider .desc-wrap,
body.home #home-flexslider .slide-description {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none
}
body.home .flexslider .slide-description,
body.home .flexslider .slide-description a,
body.home .flexslider .slide-description h2,
body.home .flexslider .slide-description h3 {
    color: #fff;
    text-shadow: 0 1px 24px rgba(0, 23, 49, 0.45)
}
/* Select dropdown rows.
 * bootstrap-select can render its menu appended to <body>, OUTSIDE
 * .advance-search — which is why the earlier .advance-search-scoped rule never
 * touched the blue highlight. Targeted globally instead. */
.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li.selected > a,
.bootstrap-select .dropdown-menu > .active > a,
.bootstrap-select .dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > li > a:hover {
    background-color: #f2f4f6 !important;
    background-image: none !important;
    color: var(--ppr-navy) !important;
    text-shadow: none
}
body.home #home-flexslider .slides > li > a::after {
    background: linear-gradient(to bottom, rgba(0, 23, 49, 0.9) 0%, rgba(0, 23, 49, 0.35) 45%, rgba(0, 23, 49, 0) 100%);
    pointer-events: none
}
/* The caption copy was navy — unreadable on a photo. */
body.home .slide-description p,
body.home #home-flexslider .slide-description p {
    color: #fff;
    font-size: 16px
}
body.home .slide-description > a,
body.home #home-flexslider .slide-description > a {
    background-color: #fff !important;
    border: 1px solid #fff;
    color: var(--ppr-navy) !important;
    font-family: var(--ppr-sans);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em
}
body.home .slide-description > a:hover,
body.home #home-flexslider .slide-description > a:hover {
    background-color: var(--ppr-navy) !important;
    border-color: var(--ppr-navy);
    color: #fff !important
}
/* Header signup button: the base rule sets border:none, and the header override
 * only set border-color, so no border was drawn. Full border here. */
#top-header-widget .mc4wp-form input[type="submit"],
.header-wrapper .mc4wp-form input[type="submit"] {
    border: 1px solid var(--ppr-gold) !important
}
.property-item figure figcaption,
.property-item figure .property-label,
body.home .property-item figure figcaption,
body.home .property-item figure .property-label {
    left: 0;
    right: auto
}
body.home .main-wrapper > .container + .container {
    border-top: 1px solid #dedede
}
/* =============================================================================
 * PPR brand adjustments — 2026-09-15 round 14
 * ========================================================================== */
/* Status badge — exact specification from Luis. */
.property-item figure figcaption,
.property-item figure .property-label,
body.home .property-item figure figcaption,
body.home .property-item figure .property-label {
    left: 10px;
    right: auto;
    bottom: 10px;
    font-size: 11px;
    letter-spacing: inherit;
    padding: 5px 7px;
    border: 1px solid
}
body.home #home-flexslider .desc-wrap {
    pointer-events: none
}
body.home #home-flexslider .slide-description {
    pointer-events: auto
}
nav.main-menu,
.main-menu {
    border-top: 1px solid #e7e7e7
}
.main-menu ul li a {
    letter-spacing: 0.04em
}
/* =============================================================================
 * PPR brand adjustments — 2026-09-15 round 17
 * ========================================================================== */
/* White page, everywhere. */
html,
body,
body.home,
body.page-template-home {
    background-color: #ffffff
}
/* Listings pages lose the container chrome, as the homepage already has.
 * `.main { border-left:1px solid #dedede; border-right:1px solid #dedede }` is
 * what drew the box around the listing column. */
.main,
.main-wrap .main,
.listing-layout {
    border-left: 0;
    border-right: 0
}
.main {
    border-top: 0;
    border-bottom: 0
}
.rh_sort_controls .bootstrap-select > .btn,
.rh_sort_controls .bootstrap-select > .btn:hover,
.rh_sort_controls .bootstrap-select > .btn:focus,
.rh_sort_controls .bootstrap-select > .btn:active,
.rh_sort_controls .bootstrap-select.open > .btn,
.sort-controls .bootstrap-select > .btn {
    background-color: #fff;
    background-image: none;
    color: #777;
    font-family: var(--ppr-sans);
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: none
}
.rh_sort_controls label,
.sort-controls label {
    font-family: var(--ppr-sans);
    font-weight: 600;
    color: var(--ppr-navy)
}
/* List / grid view icons.
 * The parent's partial calls inspiry_safe_include_svg('/images/list-view.svg'),
 * but nothing is emitted — the anchors render empty and `class="boxes"` (which
 * the theme's own fill rules target) appears zero times on the page, so the
 * buttons were invisible rather than mis-coloured. The icons are drawn here as
 * background images so they do not depend on that helper resolving. */
/* IMPORTANT: `:not(:has(svg))`.
 * inspiry_safe_include_svg() emits the icon on SOME templates and nothing on
 * others — a taxonomy archive (/property-city/punta-pacifica/) renders 2 inline
 * <svg> elements while a properties page (/real-estate-for-rent/) renders 0.
 * Round 17 added these background images because the anchors were empty there;
 * on the templates where the SVG does render, that produced TWO icons stacked in
 * one button.
 *
 * Scoping to anchors that contain no <svg> gives each template exactly one icon
 * without having to enumerate which templates behave which way. */
.view-type a.list:not(:has(svg)),
.view-type a.grid:not(:has(svg)) {
    opacity: 1
}
.view-type a.list.active:not(:has(svg)),
.view-type a.list:hover:not(:has(svg)) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='3' width='6' height='6' fill='%23c29b40'/%3E%3Crect x='9' y='4.5' width='14' height='3' fill='%23c29b40'/%3E%3Crect x='1' y='15' width='6' height='6' fill='%23c29b40'/%3E%3Crect x='9' y='16.5' width='14' height='3' fill='%23c29b40'/%3E%3C/svg%3E")
}
.view-type a.grid.active:not(:has(svg)),
.view-type a.grid:hover:not(:has(svg)) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='9' height='9' fill='%23c29b40'/%3E%3Crect x='14' y='1' width='9' height='9' fill='%23c29b40'/%3E%3Crect x='1' y='14' width='9' height='9' fill='%23c29b40'/%3E%3Crect x='14' y='14' width='9' height='9' fill='%23c29b40'/%3E%3C/svg%3E")
}
/* =============================================================================
 * PPR brand adjustments — 2026-09-15 round 18
 * ========================================================================== */
/* Listings: drop the remaining container chrome.
 * `.listing-layout{border-top:1px solid #dedede;border-bottom:1px solid #dedede}`
 * is both the rule above the results and the one under the pagination. */
.listing-layout {
    border: 0;
    background: none
}
/* =============================================================================
 * PPR brand adjustments — 2026-09-16
 * ========================================================================== */
/* Active-trail menu items must stay legible on the white header.
 * The parent styles FIVE states together as an orange pill with white lettering:
 *
 *   .main-menu ul li.current-menu-ancestor>a, .current-menu-parent>a,
 *   .current-menu-item>a, .current_page_item>a, .main-menu ul li:hover>a
 *   { color:#fff; background-color:#ec894d }
 *
 * Our earlier override only covered current-menu-item and current_page_item, so
 * a page reached through a drop-down left its TOP-LEVEL parent carrying
 * `current-menu-ancestor current-menu-parent` — and therefore white text, which
 * was invisible once the header turned white. Confirmed on /gran-central/, where
 * "Properties We Love" holds both classes.
 *
 * All five are covered here, plus WordPress's underscore variants
 * (current_page_ancestor / current_page_parent), which the parent's rule misses
 * entirely and which WordPress applies to page-based menu items. Gold reads on
 * both the white header and the navy drop-down, so one colour serves both
 * levels. */
.main-menu ul li.current-menu-item > a,
.main-menu ul li.current_page_item > a,
.main-menu ul li.current-menu-ancestor > a,
.main-menu ul li.current-menu-parent > a,
.main-menu ul li.current_page_ancestor > a,
.main-menu ul li.current_page_parent > a,
.main-menu ul li.current-page-ancestor > a {
    background-color: transparent;
    color: var(--ppr-gold)
}
.slide-description h3 {
    font-size: 40px
}
.property-item .price,
.property-item h4.price,
.listing-layout .property-item .price,
body.home .property-item .price {
    background-color: transparent !important;
    background: none
}
h4.price,
h4.price a,
.property-item h4.price,
.property-item h4.price a,
body.home h4.price a {
    font-family: var(--ppr-serif);
    font-weight: 400;
    color: var(--ppr-navy);
    letter-spacing: 0
}
.property-item .price a:hover,
.property-item h4.price a:hover {
    color: var(--ppr-gold)
}
/* The title's status suffix ("| For Rent, For Sale") stays lighter than the
 * name itself, as the reference sets it. */
.property-item .price span.propType {
    color: var(--ppr-navy);
    font-weight: 400
}
/* The card's own heading is a BARE <h4> with no class — `.price` is the <h5>
 * carrying the building name underneath it. Both take the display face. */
.listing-layout .property-item > h4,
.listing-layout .property-item > h4 a,
.property-item > h4,
.property-item > h4 a {
    font-family: var(--ppr-serif);
    font-weight: 400;
    color: var(--ppr-navy);
    letter-spacing: 0
}
.property-item > h4 a:hover {
    color: var(--ppr-gold)
}
/* Listing card: the building name is a small uppercase label with a gold rule
 * under it, not a heading. `.price` is the theme's class for it — it reuses the
 * price class here, which is why these selectors read oddly.
 *
 * SCOPED TO LISTINGS ONLY (.listing-layout / .property-items). On a single
 * property page `.price` really is the price and must keep its own styling, so
 * a bare `.property-item .price` rule would break that page. */
/* h5 ONLY. The homepage uses h4.price as the card TITLE while listings use
 * h5.price for the building name — keying on the class alone turned the
 * homepage titles into tiny gold-ruled labels and lost them. */
.listing-layout .property-item h5.price,
.property-items .property-item h5.price {
    border-bottom: 1px solid var(--ppr-gold);
    display: inline-block;
    background: none;
    background-color: transparent !important;
    padding: 0 !important;
    margin-bottom: 14px
}
.listing-layout .property-item h5.price,
.listing-layout .property-item h5.price a,
.listing-layout .property-item h5.price small,
.listing-layout .property-item h5.price span.propType,
.property-items .property-item h5.price,
.property-items .property-item h5.price a,
.property-items .property-item h5.price small,
.property-items .property-item h5.price span.propType {
    color: var(--ppr-navy);
    font-family: var(--ppr-sans);
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.5px;
    padding: 0 !important
}
.listing-layout .property-item h5.price a:hover,
.property-items .property-item h5.price a:hover {
    color: var(--ppr-gold)
}
@media (max-width: 991px) {
    .rmp-container,
	.rmp-menu-wrapper {
        background-color: #fff
    }
    .rmp-menu > li > a,
	.rmp-menu li a {
        color: var(--ppr-navy);
        font-family: var(--ppr-sans);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-size: 14px;
        font-weight: 600;
        border-bottom: 1px solid #dcdcdc;
        background: none
    }
    .rmp-menu li a:hover,
	.rmp-menu li.current-menu-item > a {
        color: var(--ppr-gold);
        background: none
    }
    /* Sub-menu items sit lighter than their parent. */
    .rmp-menu .sub-menu a,
	.rmp-menu ul.sub-menu li a {
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        color: var(--ppr-navy)
    }
    .rmp-menu-trigger-boring .rmp-trigger-label,
	.rmp-container .rmp-menu-item-link {
        color: var(--ppr-navy)
    }
}
.listing-layout.property-grid .property-item {
    border: 1px solid #dedede
}
.advance-search {
    border-bottom: 0
}
/* The theme's default blue still showed through on the select dropdown's
 * highlighted row — bootstrap-select renders that menu appended to <body>, so
 * an .advance-search-scoped rule never reached it. */
.bootstrap-select .dropdown-menu > li > a:hover,
.bootstrap-select .dropdown-menu > li.selected > a,
.bootstrap-select .dropdown-menu > li.active > a,
.bootstrap-select .dropdown-menu > .active > a,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover {
    background-color: #f2f4f6 !important;
    background-image: none !important;
    color: var(--ppr-navy) !important;
    text-shadow: none
}
/* Footer widget titles all use the display serif. The RSS widget renders its
 * title inside an <a> next to the feed icon, which kept the UI sans. */
#footer .widget .title,
#footer .widget .title a,
#footer .widget h4,
#footer .widget h4 a,
#footer .widget_rss .title,
#footer .widget_rss .title a,
#footer .widget_rss h4 a {
    font-family: var(--ppr-serif);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em
}
.listing-layout.property-grid .property-item > h4,
.listing-layout.property-grid .property-item > h4 a {
    font-size: 18px
}
/* The status label is positioned against the FIGURE. In grid view the figure
 * spans the card, so the badge's 10px inset sat against the card edge and a
 * two-status label ("Not Available, Rented") ran past the image. Inset from the
 * image instead, and allow it to wrap rather than overflow. */
.listing-layout.property-grid .property-item figure figcaption,
.listing-layout.property-grid .property-item figure .property-label {
    left: 10px;
    bottom: 20px;
    max-width: calc(100% - 20px);
    box-sizing: border-box;
    white-space: normal;
    line-height: 1.3
}
/* Nav hover gets the reference's gold underline, matching the active item.
 * Applied to the <a> with a border rather than the earlier box-shadow so the
 * rule sits directly under the lettering at the item's own width. */
/* HOVER ONLY. An earlier version also applied the rule to the current/ancestor
 * states; those are already marked by gold lettering, and doubling the cue made
 * the underline read as permanent rather than as feedback.
 *
 * Drawn with box-shadow, not border-bottom: a border adds 3px to the anchor's
 * box and pushed the drop-down 3px away from its parent, leaving a visible gap
 * the menu had to be crossed. A shadow paints in the same place and occupies no
 * space, so the submenu still meets the item. */
.main-menu ul.rh_menu__main_menu > li > a {
    box-shadow: inset 0 -3px 0 0 transparent;
    transition: box-shadow 0.15s ease, color 0.15s ease
}
.main-menu ul.rh_menu__main_menu > li > a:hover {
    box-shadow: inset 0 -3px 0 0 var(--ppr-gold)
}
/* Sub-menu items keep no underline — the rule is a top-level cue. */
.main-menu ul.sub-menu > li > a,
.main-menu ul.sub-menu > li > a:hover {
    box-shadow: none
}
#footer-wrapper {
    background-color: var(--ppr-navy)
}
#footer-bottom {
    background-color: var(--ppr-navy-deep)
}
#footer-bottom,
#footer-bottom p,
#footer-bottom a,
#footer-bottom span {
    color: #fff
}
#footer-bottom a:hover {
    color: var(--ppr-gold)
}
/* =============================================================================
 * Property listing pages get the taxonomy banner treatment
 *
 * The two banners differ only by a class: a taxonomy renders
 * <div class="page-head tax"> + <h2 class="page-title tax">, a listing page
 * renders <div class="page-head"> + <h1 class="page-title">. Same structure,
 * same <span> inside the heading — so the taxonomy's centred plate applies
 * verbatim once the selectors reach it.
 *
 * The colour is copied from the taxonomy rule rather than swapped for a palette
 * token on purpose: the brief is to make these pages look like the city pages,
 * and changing the hue here would leave the two inconsistent again.
 *
 * The banner image is untouched — listing pages already fall back to the
 * parent's own banner.jpg, which is the image in the reference.
 *
 * Attribute selector so all three templates are covered without listing them:
 * template-property-pages, -sale and -rent.
 * ========================================================================== */
body[class*="page-template-template-property-pages"] .page-head {
	padding-top: 90px;
	padding-bottom: 70px;
	margin-bottom: 0;
}

body[class*="page-template-template-property-pages"] .page-head .wrap {
	float: none;
}

body[class*="page-template-template-property-pages"] h1.page-title {
	text-align: center;
	width: 100%;
	display: inline-block;
	margin-top: 0;
	background: none;
	padding: 0;
}

body[class*="page-template-template-property-pages"] h1.page-title span {
	background-color: rgba(8, 84, 156, 0.78);
	color: #fff;
	padding: 45px 20%;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: normal;
	position: relative;
	font-size: 40px;
}

body[class*="page-template-template-property-pages"] h1.page-title span:before {
	width: calc(100% + 40px);
	height: calc(100% + 40px);
	content: " ";
	background: transparent;
	border: 5px solid rgba(8, 84, 156, 0.78);
	position: absolute;
	top: -22px;
	left: -23px;
}

/* -----------------------------------------------------------------------------
 * Homepage featured properties — 4 across
 * The cards are Bootstrap-2 `.span6` floats (40% + 5% margin, two per row), and
 * home.php injects a `<div class="clearfix">` after every second card to clear
 * the float. In grid both that spacer and `.clearfix`'s own ::before/::after
 * become real grid items and each eat a cell, so all three are taken out.
 * -------------------------------------------------------------------------- */
.property-items .property-items-container {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
	/* stretch (the default) so every card in a row is the same height */
	align-items: stretch;
}

.property-items .property-items-container::before,
.property-items .property-items-container::after,
.property-items .property-items-container > .clearfix {
	display: none;
}

.property-items .property-items-container > .span6 {
	float: none;
	width: auto;
	margin: 0;
}

@media (max-width: 1199px) {
	.property-items .property-items-container {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 979px) {
	.property-items .property-items-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.property-items .property-items-container {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -----------------------------------------------------------------------------
 * Homepage featured cards — read as grid cards, not the home card's split row
 * The home card is built title / floated thumbnail beside the excerpt / button,
 * which is fine in a half-width row but collapses to a ~90px image with text
 * wrapping round it in a quarter-width cell. Column flex restacks it in the
 * same order the listing grid card uses: image, title, excerpt, button, strip.
 * -------------------------------------------------------------------------- */
.property-items .property-items-container > .span6 {
	display: flex;
}

.property-items .property-items-container > .span6 > .property-item {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.property-items .property-items-container .property-item > figure {
	order: 1;
	float: none;
	width: 100%;
	margin: 0 0 14px;
}

.property-items .property-items-container .property-item > figure img {
	float: none;
	width: 100%;
	height: auto;
	max-width: 100%;
	margin: 0;
}

.property-items .property-items-container .property-item > h4 {
	order: 2;
}

.property-items .property-items-container .property-item > .detail {
	order: 3;
	float: none;
	width: auto;
	margin-left: 0;
	padding: 0 15px;
}

.property-items .property-items-container .property-item > .property-meta {
	order: 4;
	/* pinned to the bottom so the strips line up across a row */
	margin-top: auto;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: 0;
	text-align: center;
}

/* Feature strip reads navy, not the parent's gold accent — four gold lines per
 * card shouted louder than the title. */
.listing-layout .list-container .property-item .property-meta > span,
.listing-layout .list-container .property-item .property-meta > span a,
.property-items .property-items-container .property-item > .property-meta > span {
	color: var(--ppr-navy-deep);
}

/* -----------------------------------------------------------------------------
 * Mobile menu (Responsive Menu plugin, instance 40510)
 * The plugin stores its palette in its own settings, so the theme's variables
 * have to be reasserted here or the menu keeps the old brand blue.
 * -------------------------------------------------------------------------- */
#rmp-container-40510,
#rmp-menu-wrap-40510 .rmp-menu-item-link,
#rmp-menu-title-40510 {
	background: var(--ppr-navy-deep);
}

#rmp-menu-wrap-40510 .rmp-menu-current-item .rmp-menu-item-link,
#rmp_menu_trigger-40510,
#rmp_menu_trigger-40510.is-active,
#rmp_menu_trigger-40510:hover,
#rmp_menu_trigger-40510:focus,
#rmp-menu-wrap-40510 .rmp-menu-subarrow {
	background: var(--ppr-navy);
}

@media (max-width: 767px) {
	/* The desktop treatment is `padding: 45px 20%` with a 40px face — on a phone
	 * that leaves 60% of an already narrow box for the text, so a long title
	 * runs past both edges. The span is inline-block, so it sizes to its
	 * content rather than wrapping inside the box. */
	body[class*="page-template-template-property-pages"] h1.page-title span {
		display: block;
		padding: 24px 14px;
		font-size: 20px;
		overflow-wrap: break-word;
	}

	/* On desktop the frame sits outside the blue box; at this width that
	 * overhang is what is left running past the edge, so it goes inside. */
	body[class*="page-template-template-property-pages"] h1.page-title span:before {
		width: calc(100% - 16px);
		height: calc(100% - 16px);
		top: 8px;
		left: 8px;
		border-width: 3px;
	}
}

/* -----------------------------------------------------------------------------
 * Footer legal notice — quiet type on the navy, no panel
 * The parent paints footer widgets as a light panel (#f2f2f2 + 1px border),
 * which turns the notice into a bright slab in the middle of the dark footer.
 * The rule sits on the service-mark text instead: muted, small, separated from
 * the columns above by a single hairline.
 * -------------------------------------------------------------------------- */
#footer-legal-notice .widget {
	background: none;
	background-color: transparent;
	border: 0;
	box-shadow: none;
}

#footer-legal-notice .span12 {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

#footer-legal-notice,
#footer-legal-notice .widget,
#footer-legal-notice p {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	line-height: 1.75;
}

#footer-legal-notice a {
	color: rgba(255, 255, 255, 0.75);
}

#footer-legal-notice a:hover {
	color: var(--ppr-gold);
}