/* Zona Property — self-hosted premium typography
   Playfair Display (display serif, headings) + Plus Jakarta Sans (body/UI) */

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/playfair-display.woff2') format('woff2');
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/plus-jakarta-sans.woff2') format('woff2');
}

:root {
    --zp-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --zp-font-heading: 'Playfair Display', 'Plus Jakarta Sans', Georgia, serif;
    --zp-gold: #B08D3F;
    --zp-gold-light: #D6BC7C;
    --zp-gold-dark: #8F6F27;
    --zp-navy-900: #080D18;
    --zp-navy-800: #0B1220;
    --zp-navy-700: #122038;
    --zp-navy-600: #1B2C49;
}

body,
button,
input,
select,
textarea,
.opt-form,
.tf-btn,
.navbar-nav .nav-link,
.property-item .property-item-inner .property-item-title,
.listing-layout .property-listing,
.widget,
.pagination .page-numbers,
.breadcrumb,
.footer-menu li a {
    font-family: var(--zp-font-body) !important;
    letter-spacing: -0.005em;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading-primary,
.heading-secondary,
.section-heading,
.property-item-title,
.listing-layout h1,
.listing-layout h2,
.listing-layout h3,
.widget-title,
.testimonial-title,
.footer-menu .title,
.pt-title {
    font-family: var(--zp-font-heading) !important;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.14;
}

/* Uppercase eyebrow labels get the body sans with wide tracking — serif caps read as fake luxury */
.pt-eyebrow,
.section-heading .text,
.heading-top .section-title-top,
.widget .widget-title span,
.opt-title,
.text-uppercase.label-top {
    font-family: var(--zp-font-body) !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
}

/* Section rhythm: premium = more air, thinner dividers */
.section {
    padding-top: 92px;
    padding-bottom: 92px;
}

.section-sm {
    padding-top: 62px;
    padding-bottom: 62px;
}

h1,
h2 {
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.16;
}

h3 {
    font-size: clamp(22px, 2.1vw, 28px);
    line-height: 1.22;
}

/* Buttons: gold fill, navy text — inverted from the old violet/white */
.tf-btn.primary,
.flat-btn,
button[type='submit']:not(.btn-outline),
a.tf-btn.primary {
    background: var(--zp-gold) !important;
    border-color: var(--zp-gold) !important;
    color: #0B1220 !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 6px;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.tf-btn.primary:hover,
.flat-btn:hover,
button[type='submit']:not(.btn-outline):hover,
a.tf-btn.primary:hover {
    background: var(--zp-navy-800) !important;
    border-color: var(--zp-navy-800) !important;
    color: #FFF !important;
}

.tf-btn.primary:hover {
    transform: translateY(-1px);
}

/* Cards: softer, airier, photo-first */
.property-item,
.listing-layout,
.blog-item,
.service-block,
.team-block,
.testimonial-block {
    border-radius: 10px;
    border: 1px solid #EAE6DC;
    box-shadow: 0 1px 2px rgba(11, 18, 32, 0.04);
    transition: box-shadow 0.28s ease, transform 0.28s ease, border-color 0.28s ease;
}

.property-item:hover,
.listing-layout:hover,
.blog-item:hover {
    box-shadow: 0 14px 34px -14px rgba(11, 18, 32, 0.28);
    border-color: #DED5C0;
    transform: translateY(-3px);
}

/* Hero: deeper navy, gold rule, tighter display scale */
/* Hero photography shows through: the gradient that used to live here (with
   !important) was painted over the slider's inline background-image. The dark
   scrim in style.css ::before provides legibility instead. */
.flat-slider.home-1 {
    background-image: none;
    background-color: #0B1220;
}

.flat-slider.home-1 .heading {
    font-family: var(--zp-font-heading) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.flat-slider.home-1 .heading .typed {
    color: var(--zp-gold-light);
}

.flat-slider.home-1 .overlay {
    opacity: 0.28;
}

/* Footer: deep navy with gold hairlines */
.footer-area {
    background-color: var(--zp-navy-800) !important;
}

.footer-area .footer-menu .title,
.footer-area .widget-title,
.footer-area h3,
.footer-area h4 {
    color: #FFF;
    font-family: var(--zp-font-heading) !important;
}

.footer-menu li a {
    color: #A9B2C0;
}

.footer-menu li a:hover {
    color: var(--zp-gold-light);
}

.footer-copyright,
.footer-area .copyright {
    color: #7C8798;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Gold hairline under section eyebrows */
.pt-eyebrow,
.heading-top .section-title-top {
    color: var(--zp-gold-dark);
}

.footer-area .pt-eyebrow,
.footer-area .heading-top .section-title-top {
    color: var(--zp-gold-light);
}

/* Breadcrumb: warm paper tone */
.breadcrumb-area,
.breadcrumb {
    background: #F7F4EC;
}

/* Cookie / site-notice panel: match the new system instead of default bootstrap white */
.site-notice {
    border-radius: 10px !important;
    border-top: 3px solid var(--zp-gold) !important;
    box-shadow: 0 18px 44px -18px rgba(11, 18, 32, 0.4) !important;
}

.site-notice .btn,
.site-notice button {
    border-radius: 5px;
    font-weight: 600;
}

.site-notice .btn-primary {
    background: var(--zp-gold) !important;
    border-color: var(--zp-gold) !important;
    color: #0B1220 !important;
}

/* ------------------------------------------------------------------
   Hero rotating city name — vertical slide, gold accent
   The theme's `.slide` variant swaps words with no transition (reads
   as a glitch/flicker). `.zp-wordslide` animates height + opacity so
   the word rolls instead of blinking.
   ------------------------------------------------------------------ */
.flat-slider.home-1 .zp-wordslide .cd-words-wrapper {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    text-align: center;
    padding: 0 0.06em;
}

.flat-slider.home-1 .zp-wordslide .cd-words-wrapper::after {
    content: '';
    position: absolute;
    top: 12%;
    right: -0.02em;
    width: 3px;
    height: 76%;
    background: var(--zp-gold);
    opacity: 0.55;
    border-radius: 2px;
}

.flat-slider.home-1 .zp-wordslide .item-text {
    display: block;
    opacity: 0;
    transform: translateY(0.5em);
    transition: opacity 0.42s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    color: var(--zp-gold-light);
}

.flat-slider.home-1 .zp-wordslide .item-text.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.flat-slider.home-1 .zp-wordslide .item-text.is-hidden {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateY(-0.5em);
    pointer-events: none;
}

.flat-slider.home-1 .zp-wordslide .cd-words-wrapper {
    position: relative;
}

/* reserve room for the rotating word so the heading never reflows */
.flat-slider.home-1 .zp-wordslide {
    line-height: 1.16;
}

/* carousel caption legibility over photography */
.flat-slider.home-1 .subtitle {
    color: rgba(255, 255, 255, 0.86) !important;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 12px rgba(8, 13, 24, 0.55);
}

.flat-slider.home-1 .heading h1 {
    text-shadow: 0 2px 18px rgba(8, 13, 24, 0.5);
}

/* search panel floats above the hero photo */
.flat-slider.home-1 .widget-filter-search,
.flat-slider.home-1 .wd-search-form {
    border-radius: 12px;
    border: 1px solid #EAE6DC;
    box-shadow: 0 18px 40px -18px rgba(8, 13, 24, 0.45);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(6px);
}

.flat-slider.home-1 .widget-filter-search .tf-btn.primary {
    background: var(--zp-gold) !important;
    color: #0B1220 !important;
}