/* ============================================================================
   Art de Vivre: TROPICAL DECO brand layer (Charlie, 2026-11-11)
   Reference: the Copacabana Palace. Old school, chic, sober.
   Loaded AFTER main.css. Fonts: Julius Sans One (headings, labels, captions)
   + Josefin Sans (body). Both OFL, self-hosted in /assets/fonts (licences there).
   Neither has Cyrillic, so Russian letters fall through to "ADV Cyrillic"
   (a Jost subset, unicode-range limited). The wallpaper
   (/assets/images/brand/rio-wallpaper.webp) is original ADV artwork.
   Remove this file + its <link> in partials/head.html to go back to the old look.
   ============================================================================ */

@font-face {
  font-family: "Julius Sans One";
  src: url("/assets/fonts/julius-sans-one.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Josefin Sans";
  src: url("/assets/fonts/josefin-sans-var.woff2") format("woff2");
  font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "ADV Cyrillic";
  src: url("/assets/fonts/jost-cyrillic-var.woff2") format("woff2");
  font-weight: 300 500; font-style: normal; font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  /* Palette measured from Charlie's mood board. No pink. */
  --deco-jungle: #102c2f;   /* deep green: text, header, footer, buttons */
  --deco-palm:   #365a51;   /* accents on cream */
  --deco-sage:   #57796d;
  --deco-flash:  #168a6c;   /* the bright green, used sparingly */
  --deco-gold:   #d9a441;   /* rules, frames, accents on green. Not for text on cream. */
  --deco-amber:  #a3530c;   /* prices on cream (AA contrast) */
  /* Call-to-action buttons ONLY (BOOK NOW, BOOK A VISIT...). Charlie wants one flashy tropical
     colour here (toucan orange / pineapple family); shade not picked yet, so these still hold
     the jungle green and cream. Change these two lines and every CTA follows. No pink anywhere. */
  /* DECIDED 2026-11-11: "Rio sunset" gradient (pineapple yellow > toucan orange > flamingo pink).
     Only on call-to-action buttons and the 4 px line under the frozen bar. Nowhere else. */
  --deco-cta:     linear-gradient(90deg, #fbb21c 0%, #f7861a 45%, #ff7f9c 100%);
  --deco-cta-ink: #102c2f;   /* label on a CTA button: jungle green */
  /* Floating WhatsApp button. Charlie wants it in "our green"; the shade is not picked yet, so these
     still hold WhatsApp's own green, white icon and no ring. Change these three lines when he picks
     (for example: #102c2f / #f6f0d8 / #d9a441). */
  /* DECIDED 2026-11-11: deep jungle green, pastel pink icon, gold ring. */
  --deco-wa:      #102c2f;
  --deco-wa-ink:  #f7a8a4;   /* pastel pink icon (Charlie: "you can use a pink pastel with that") */
  --deco-wa-ring: #d9a441;
  --deco-cream:  #f6f0d8;   /* the page */
  --deco-sand:   #ece3c4;

  --c-ink:       var(--deco-jungle);
  --c-ink-2:     #17383a;
  --c-night:     #143335;
  --c-forest:    #0d2427;
  --c-bg-dark:   var(--deco-jungle);
  --c-claret:    #0d2427;
  --c-burg:      var(--deco-jungle);
  --c-burg-soft: var(--deco-flash);
  --c-verde:     var(--deco-jungle);
  --c-verde-rgb: 16, 44, 47;
  --c-gold:      var(--deco-palm);
  --c-rust:      var(--deco-palm);
  --c-accent-rgb: 54, 90, 81;
  --c-gold-bright: var(--deco-gold);
  --c-gold-soft:  #e7c987;
  --c-sand:      var(--deco-sand);
  --c-bone:      var(--deco-cream);
  --c-cream:     #d9c9a0;
  --c-line-dark: rgba(16,44,47,0.16);

  --rio-stone:   var(--deco-sand);
  --rio-paper:   var(--deco-cream);
  --rio-terra:   var(--deco-amber);

  --f-head:    "Julius Sans One", "ADV Cyrillic", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Josefin Sans", "ADV Cyrillic", "Helvetica Neue", Arial, sans-serif;
  --f-display: var(--f-head);
  --f-serif:   var(--f-head);
  --f-italic:  var(--f-head);
  --f-sans:    var(--f-body);

  /* Julius is wide: tame the giant hero sizes */
  --s-h1: clamp(2.4rem, 1.2rem + 4.6vw, 6rem);
  --s-h2: clamp(1.7rem, 1.2rem + 1.6vw, 2.9rem);
  --s-h3: clamp(1.3rem, 1.05rem + 0.9vw, 1.9rem);
}

/* Header chrome: deep jungle green with a fine gold line */
.header-utility { background: rgba(13,36,39,0.97); border-bottom-color: rgba(217,164,65,0.35); }
@media (min-width: 801px) {
  .header-tabs { background: linear-gradient(180deg, rgba(16,44,47,0.66) 0%, rgba(16,44,47,0.36) 100%); }
  .site-header.is-solid .header-tabs,
  .page-pd .header-tabs,
  .page-light-top .header-tabs { background: rgba(16,44,47,0.97); border-bottom: 1px solid rgba(217,164,65,0.45); }
}
@media (max-width: 800px) {
  .site-header { background: linear-gradient(180deg, rgba(16,44,47,0.88) 0%, rgba(16,44,47,0.76) 100%); }
}

/* Charlie 2026-11-11 (design review): the logo stands alone on the left.
   Socials, then currency and language, all sit on the RIGHT of the top strip. */
.header-utility { justify-content: flex-end; }   /* holds even where the socials are hidden (narrow screens) */
.header-utility .header-socials { order: 1; margin-left: 0; }
.header-utility .cur-switch { order: 2; margin-left: 0.5rem; }
.header-utility .cur-switch .cur-menu { left: auto; right: 0; }
.header-utility .lang-dd { padding-right: 0.7rem; }

/* "The logo is the menu button" (Charlie 2026-11-11). The old button stays in the page, hidden,
   because main.js opens the menu through it; the logo clicks it (script in partials/header.html). */
.menu-trigger { display: none !important; }
.logo-menu { position: relative; cursor: pointer; }
/* No hint mark beside the logo (Charlie: the gold lines were confusing). The logo itself reacts:
   it turns gold on hover and on keyboard focus. */
.logo-menu .tri { transition: fill 0.25s var(--ease), color 0.25s var(--ease); }
.logo-menu:hover .tri, .logo-menu:focus-visible .tri { fill: var(--deco-gold); color: var(--deco-gold); }
/* With the menu button gone, keep "List with us" on the right edge of the bar */
.header-tabs .nav-cta { margin-left: auto; }
.logo-menu:focus-visible { outline: 2px solid var(--deco-gold); outline-offset: 6px; }

/* ---- PHONE HEADER "A" (Charlie 2026-11-11): the three words RENTALS / SALES / SERVICES sit in a slim
   row under the logo row, always visible. No drop-downs on phones: the full lists are in the logo menu.
   The header grows from 56 to 96 px; everything that offsets by --header-h follows. ---- */
@media (max-width: 800px) {
  :root { --header-h: 96px; }
  .site-header, .header-stack { height: var(--header-h); }
  .header-tabs { height: var(--header-h); flex-wrap: wrap; align-content: flex-start; align-items: center; overflow: hidden; }
  .header-tabs > .logo-tab { height: 56px; flex: 0 0 auto; }   /* row 1 stays 56 px; the words take the other 40 */
  .header-tabs > .nav-tabs {
    display: flex !important; order: 10; flex: 0 0 100%;
    height: 40px; margin: 0; padding: 0 6px; list-style: none;
    align-items: stretch; justify-content: space-around; gap: 0;
    background: var(--deco-jungle);
    border-top: 1px solid rgba(246, 240, 216, 0.14);
    border-bottom: 1px solid var(--deco-gold);
  }
  .header-tabs > .nav-tabs > li { display: flex; flex: 1 1 0; min-width: 0; position: static; height: 38px; }
  .header-tabs > .nav-tabs > li > a {
    display: flex; align-items: center; justify-content: center; width: 100%;
    height: 38px; min-height: 0; line-height: 1;   /* the desktop rule makes these 100 px tall */
    font-family: var(--f-head); font-size: clamp(0.62rem, 2.9vw, 0.74rem);
    letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
    color: var(--deco-cream); padding: 0 4px;
  }
  .header-tabs > .nav-tabs > li > a:active { color: var(--deco-gold); }
  .header-tabs > .nav-tabs .nav-chev,
  .header-tabs > .nav-tabs .mega-menu { display: none !important; }
}

html { font-synthesis-weight: none; }   /* Julius has one weight: never fake-bold it */

html, body,
button, input, select, textarea, optgroup,
.leaflet-container, .leaflet-control, .leaflet-control-zoom a {
  font-family: var(--f-body);
}
html, body, .bg-bone { background: var(--rio-paper); }
.bg-sand { background: var(--rio-stone); }
body { font-size: 1.1rem; }   /* Josefin's small x-height reads a little smaller than Helvetica */

/* Headings: wide airy capitals, like 1950s Ipanema facade lettering */
h1, h2, h3, .display, .hero h1, .listing h3 {
  font-family: var(--f-head);
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.15;
}
h4, h5, h6 { font-family: var(--f-body); font-weight: 400; }

/* Small labels, tags, buttons: Julius tracked caps */
.eyebrow, .kicker, .label, .tag, .btn, .button,
.listing .neighborhood, .listing .more, .listing .specs {
  font-family: var(--f-head) !important;
  font-weight: 400 !important;
}

/* ---- Property cards: cream card, gold hairline, square corners, framed photo ---- */
.listing {
  background: #fbf7e6;
  color: var(--c-ink);
  border: 1px solid rgba(217,164,65,0.55);
  border-radius: 0;
}
.listing:hover { box-shadow: 0 18px 40px rgba(16,44,47,0.18); border-color: var(--deco-gold); }
.listing .img { margin: 10px 10px 0; }
.listing .img .tag {
  background: var(--deco-jungle);
  color: var(--deco-gold);
  border: 0;
  border-radius: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  letter-spacing: 0.3em;
}
.listing .body { padding: 1.4rem 1.5rem 1.7rem; }
.listing .neighborhood,
.bg-bone .listing .neighborhood, .bg-sand .listing .neighborhood { color: var(--deco-flash); letter-spacing: 0.32em; font-size: 0.7rem; }
.listing h3 { color: var(--c-ink); font-size: clamp(1.02rem, 0.92rem + 0.3vw, 1.22rem); letter-spacing: 0.07em; line-height: 1.35; }
/* three stepped gold lines: the Deco signature, same as the film captions */
.listing h3::after {
  content: ""; display: block; width: 60px; height: 11px; margin-top: 0.85rem;
  background:
    linear-gradient(var(--deco-gold), var(--deco-gold)) 0 0 / 60px 2px no-repeat,
    linear-gradient(var(--deco-gold), var(--deco-gold)) 0 5px / 44px 2px no-repeat,
    linear-gradient(var(--deco-gold), var(--deco-gold)) 0 10px / 28px 1px no-repeat;
}
.listing .specs { color: rgba(16,44,47,0.74); opacity: 1; letter-spacing: 0.18em; font-size: 0.68rem; }
.listing .price,
.bg-bone .listing .price, .bg-sand .listing .price {
  font-family: var(--f-head); color: var(--deco-amber);
  font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.listing .more,
.bg-bone .listing .more, .bg-sand .listing .more,
.listing:hover .more {
  color: var(--deco-cream) !important; background: var(--deco-jungle); border: 0;
  padding: 0.75rem 1.3rem; letter-spacing: 0.3em;
}

/* ---- Photo tone: "Palace, full on" (P2). Warm, golden, soft. Matches the films. ---- */
.listing .img img,
.pd-gallery img,
.pg-cell img, .pd-carousel__slide img, .pg-lb__img, img.pg-lb__img,
.portfolio-card-art img,
.hero img, .hero video {
  /* "P2, full on": Charlie chose it twice on 2026-11-11 (brand session, then a side-by-side
     in the design review). For bright, unfiltered photos instead, set this to: filter: none; */
  filter: sepia(0.36) saturate(0.9) contrast(0.94) brightness(1.04);
}

/* ---- The wallpaper: a band of the Rio mural above the footer on every page ---- */
.site-footer::before {
  content: ""; display: block;
  height: clamp(130px, 17vw, 260px);
  background: var(--deco-sand) url("/assets/images/brand/rio-wallpaper.webp") center 30% / cover no-repeat;
  border-top: 2px solid var(--deco-gold);
  border-bottom: 2px solid var(--deco-gold);
}

/* ---- Call to action: the Rio-sunset gradient. The buttons themselves are wired to the tokens in
   main.css (search "pdx-cta", owned by the property-layout work); this only finishes the look. ---- */
.pdx-cta, .pdx-modal .btn.gold.pdx-form__submit {
  border: 0 !important;
  color: var(--deco-cta-ink) !important;
  background: var(--deco-cta) !important;
  background-size: 140% 100% !important; background-position: 0% 50% !important;
  transition: background-position 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.2s var(--ease);
}
.pdx-cta:hover, .pdx-modal .btn.gold.pdx-form__submit:hover {
  background-position: 100% 50% !important;            /* the sunset slides towards pink */
  box-shadow: 0 8px 22px rgba(247, 134, 26, 0.35);
}
.pdx-cta:focus-visible, .pdx-modal .btn.gold.pdx-form__submit:focus-visible {
  outline: 3px solid var(--deco-jungle); outline-offset: 3px;
}
/* The bar's button is the one call to action on the page: keep it big and its label easy to read.
   Julius has a single thin weight, so a hairline stroke thickens the letters a touch. */
.pdx-bar .pdx-bar__cta {
  min-height: 46px; padding: 0 1.7rem !important;
  font-size: 0.84rem !important; letter-spacing: 0.24em !important; line-height: 1 !important;
  -webkit-text-stroke: 0.4px currentColor;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
}
@media (max-width: 560px) {
  .pdx-bar .pdx-bar__cta {
    min-height: 44px; padding: 0 0.8rem !important;
    font-size: 0.78rem !important; letter-spacing: 0.12em !important;
  }
}
/* One thin matching line under the frozen bar, in place of the gold hairline */
.pdx-bar {
  border-style: solid; border-width: 0 0 4px 0;
  border-image: var(--deco-cta) 1;
}

/* "List with us" stays in the header on laptop and phone (Charlie: "very important"):
   a cream pill with jungle text and a fine gold border. */
.header-tabs .nav-cta {
  background: var(--deco-cream); color: var(--deco-jungle);
  border: 1px solid var(--deco-gold);
}
.header-tabs .nav-cta:hover, .header-tabs .nav-cta:focus-visible { background: #fffaf0; color: var(--deco-jungle); }

/* Floating WhatsApp button, driven by the --deco-wa tokens. Position and 58 px size are unchanged. */
.wa-float {
  background: var(--deco-wa); border: 3px solid var(--deco-wa-ring); box-sizing: border-box;
  /* a cream hairline outside the gold keeps the button visible on dark photos */
  box-shadow: 0 0 0 1px rgba(246, 240, 216, 0.55), 0 8px 24px rgba(11, 12, 14, 0.34);
}
.wa-float svg path { fill: var(--deco-wa-ink); }
.wa-float:hover { background: #17383a; }
/* The pulsing halo, recoloured from WhatsApp green to a soft gold. Same gentle pulse.
   To remove it altogether: .wa-float::after { display: none; } */
.wa-float::after { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0.5); animation: wa-pulse-deco 2.6s ease-out infinite; }
@keyframes wa-pulse-deco {
  0%   { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(217, 164, 65, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 164, 65, 0); }
}
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; } }

/* Cookie banner: Accept button was hard-coded burgundy. Colour only; the consent logic is untouched. */
.cav-consent__btn--solid {
  background: var(--deco-gold) !important; border-color: var(--deco-gold) !important; color: var(--deco-jungle) !important;
}

/* ---- Footer: deep jungle green in four steps (was hard-coded burgundy) ---- */
.site-footer, .footer-main { background: #102c2f; }
.footer-explore { background: #0e282b; }
.footer-row { background: #0c2326; }
.footer-legal-strip { background: #0a1e21; }
.footer-newsletter { background: var(--deco-cream); }
.footer-newsletter button, .footer-newsletter .btn { color: var(--deco-cream) !important; background: var(--deco-jungle); }