/* ═══════════════════════════════════════════════════════════════════
   PURO DREAMS REALTY — GLOBAL DESIGN SYSTEM
   realty.purodreams.com

   Loaded on ALL pages. Covers:
   - CSS custom properties (design tokens)
   - Google Fonts import (Cormorant Garamond + Outfit)
   - Body font reset
   - Header/nav typography and colors (navy accent)
   - Mobile header styling
   - Footer refinements

   Does NOT override:
   - property-page.css (loaded only on estate_property singles)
   - search-override.css (loaded on non-property pages)
   ═══════════════════════════════════════════════════════════════════ */

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

/* ── Design Tokens ────────────────────────────────────────────── */

:root {
  --pd-black: #0a0a0a;
  --pd-charcoal: #1a1a1a;
  --pd-navy: #001a33;
  --pd-navy-deep: #000f1f;
  --pd-navy-mid: #0a2a47;
  --pd-smoke: #2a2a2a;
  --pd-stone: #8a8580;
  --pd-warm-grey: #b5b0aa;
  --pd-sand: #d4cfc8;
  --pd-cream: #f0ece6;
  --pd-ivory: #f8f6f2;
  --pd-white: #ffffff;
  --pd-gold: #c4a872;
  --pd-gold-muted: #b89d6a;

  --pd-serif: 'Cormorant Garamond', Georgia, serif;
  --pd-sans: 'Outfit', 'Helvetica Neue', Arial, sans-serif;
}

/* ── Body Font Reset ──────────────────────────────────────────── */

body {
  font-family: var(--pd-sans) !important;
  font-weight: 300;
  color: var(--pd-charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Desktop Header ───────────────────────────────────────────── */

.master_header {
  transition: box-shadow 0.5s ease;
}

/* Header bar background */
.header_wrapper {
  background: var(--pd-white) !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: none !important;
}

/* ── Logo ─────────────────────────────────────────────────────── */

.logo img,
.logo img.retina_ready {
  max-height: 40px;
  width: auto;
}

/* ── Desktop Navigation Links ─────────────────────────────────── */

nav#access ul.menu > li > a,
nav#access .menu > li > a,
.header_wrapper_inside .menu > li > a {
  font-family: var(--pd-sans) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--pd-stone) !important;
  transition: color 0.3s ease !important;
  position: relative;
}

nav#access ul.menu > li > a:hover,
nav#access .menu > li > a:hover,
.header_wrapper_inside .menu > li > a:hover,
nav#access ul.menu > li.current-menu-item > a,
nav#access .menu > li.current-menu-item > a,
.header_wrapper_inside .menu > li.current-menu-item > a {
  color: var(--pd-navy) !important;
}

/* Navy underline on hover */
nav#access ul.menu > li > a::after,
nav#access .menu > li > a::after,
.header_wrapper_inside .menu > li > a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--pd-navy);
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

nav#access ul.menu > li > a:hover::after,
nav#access .menu > li > a:hover::after,
.header_wrapper_inside .menu > li > a:hover::after,
nav#access ul.menu > li.current-menu-item > a::after,
nav#access .menu > li.current-menu-item > a::after,
.header_wrapper_inside .menu > li.current-menu-item > a::after {
  width: 100%;
}

/* Dropdown / sub-menu refinements */
nav#access ul.menu > li > ul,
nav#access .menu > li > ul,
.header_wrapper_inside .menu > li > ul {
  font-family: var(--pd-sans) !important;
}

nav#access ul.menu > li > ul a,
nav#access .menu > li > ul a,
.header_wrapper_inside .menu > li > ul a {
  font-family: var(--pd-sans) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
  color: var(--pd-charcoal) !important;
}

nav#access ul.menu > li > ul a:hover,
nav#access .menu > li > ul a:hover,
.header_wrapper_inside .menu > li > ul a:hover {
  color: var(--pd-navy) !important;
}

/* ── Mobile Header ────────────────────────────────────────────── */

.mobile_header {
  background: var(--pd-white) !important;
  border-bottom: 1px solid rgba(0,0,0,0.04) !important;
  box-shadow: none !important;
}

.mobile-logo img {
  max-height: 36px;
  width: auto;
}

/* Mobile menu trigger (hamburger) */
.mobile-trigger,
.mobile-trigger i {
  color: var(--pd-charcoal) !important;
}

/* Mobile slide-out menu */
.mobile_menu_container,
.mobile_menu_wrapper {
  font-family: var(--pd-sans) !important;
  background: var(--pd-ivory) !important;
}

.mobile_menu_container a,
.mobile_menu_wrapper a,
.mobile_menu_container .menu > li > a,
.mobile_menu_wrapper .menu > li > a {
  font-family: var(--pd-sans) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--pd-charcoal) !important;
}

.mobile_menu_container .menu > li > a:hover,
.mobile_menu_wrapper .menu > li > a:hover {
  color: var(--pd-navy) !important;
}

/* ── Top Bar (if shown) ───────────────────────────────────────── */

.top_bar_wrapper,
.top_bar_inside {
  font-family: var(--pd-sans) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.05em !important;
  background: var(--pd-navy) !important;
  color: var(--pd-warm-grey) !important;
}

.top_bar_wrapper a,
.top_bar_inside a {
  color: var(--pd-warm-grey) !important;
  transition: color 0.3s ease !important;
}

.top_bar_wrapper a:hover,
.top_bar_inside a:hover {
  color: var(--pd-white) !important;
}

/* ── Footer ───────────────────────────────────────────────────── */

.footer-widget-area,
.footer_wrapper,
#colophon {
  font-family: var(--pd-sans) !important;
  font-weight: 300;
}

.footer-widget-area h3,
.footer-widget-area h4,
.footer_wrapper h3,
.footer_wrapper h4 {
  font-family: var(--pd-sans) !important;
  font-weight: 400 !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* ── Global Typography Polish ─────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pd-serif);
  font-weight: 300;
}

/* Buttons — subtle refinement */
.wpestate_button,
.wpresidence_button,
input[type="submit"] {
  font-family: var(--pd-sans) !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
}