/*
Theme Name:        Black Rose Guesthouse
Theme URI:         https://blackroseguestlodge.co.za
Author:            Black Rose Guesthouse
Author URI:        https://blackroseguestlodge.co.za
Description:       A bespoke dark-luxury WordPress theme for Black Rose Guesthouse.
Version:           1.0.0
Requires at least: 6.4
Tested up to:      6.7
Requires PHP:      7.1
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       black-rose
Tags:              custom-menu, featured-images, full-width-template, translation-ready, custom-colors, custom-logo, custom-header, custom-background, editor-style, responsive-layout, two-columns, three-columns, grid-layout, blog, hotel, hospitality, booking, dark, luxury, editorial
*/

:root{

    /* Light palette */
  --cream: #F4EFE8;
  --linen:       #EDE7DC;
  --parchment:   #E4DDD3;
  --warm-white:  #FAFAF8;
  --ink:         #1A1614;
  --ink-mid:     #2E2926;
  --muted: #6B6159;
  --dim:         #686058;
  --black:#080808;
  --near-black:#111010;
  --rose:#8B1A2E;
  --rose-mid:#a8233a;
  --rose-light:#c0394f;
  --gold:#C9A84C;
  --gold-dim:#a88730;
  --cream-alt:#F4EFE8;
  --white:#fff;
  --muted-alt:#7a7065;
  --border:rgba(26,22,20,0.10);
  --border-mid: rgba(26, 22, 20, 0.16);
}
html{scroll-behavior:smooth}
body{font-family:'Jost',sans-serif;background:var(--cream);color:var(--rose);overflow-x:hidden}

body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9999;opacity:0.35
}


/* ════ MASTER NAVIGATION ENGINE ════ */

/* 1. Base Nav & WP Admin Bar Fix */
#nav {
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  transition:background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
}
body.admin-bar #nav { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #nav { top: 46px; }
}

/* 2. LOGO SIZING (Fixed Centering Bug) */
#nav .nav-brand img,
#nav .nav-logo-wrap img {
  max-width: 120px;
  width: 120px; /* Locks the exact width */
  height: auto;
  display: block;
  /* Removed 'margin: 0 auto' so it stays left on the Main Site */
}

/* Ensure the logo explicitly centers ONLY on Property Pages */
#nav.nav-prop .nav-brand { 
  font-family: 'Cormorant Garamond', serif; 
  font-size: 16px; 
  font-weight: 400; 
  letter-spacing: 2px; 
  text-transform: uppercase; 
  position: absolute; 
  left: 50%; 
  transform: translateX(-50%); 
  margin: 0; 
  
  /* Flexbox automatically centers the image if one is uploaded */
  display: flex; 
  justify-content: center; 
  align-items: center;
  width: 100%;
  max-width: 250px;
}

#nav.nav-prop .nav-brand em { font-style: italic; color: #8B1A2E; }
/* 3. MAIN SITE NAV */
#nav.nav-main {
  padding:20px 48px;
  background: var(--cream);
}
#nav.nav-main.scrolled { background: var(--cream); border-bottom: 1px solid rgba(255,255,255,0.06); }
#nav.nav-main .nav-brand { font-family:'Cormorant Garamond',serif;font-size:18px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:var(--white); }
#nav.nav-main .nav-brand em { font-style:italic;color:var(--rose-light); }
#nav .nav-links { display:flex;gap:32px;list-style:none; margin:0; padding:0; }
#nav .nav-links li a { font-size:11px;font-weight:300;letter-spacing:2.5px;text-transform:uppercase;color:var(--black);text-decoration:none;transition:color 0.2s; }
#nav .nav-links li a:hover { color:var(--gold); }
#nav .nav-cta { background:var(--rose);color:var(--white);font-family:'Jost',sans-serif;font-size:10px;font-weight:400;letter-spacing:2.5px;text-transform:uppercase;padding:9px 22px;border-radius:1px;border:none;cursor:pointer;transition:background 0.2s; }
#nav .nav-cta:hover { background:var(--rose-mid); }

/* 4. PROPERTY NAVIGATIONS (Fixed Switch Slider Wrapping) */
#nav.nav-prop { padding: 0 48px; height: 132px; }
#nav .nav-back { font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; text-decoration: none; transition: color 0.2s; white-space: nowrap; }
#nav .nav-back::before { content: '←'; font-size: 13px; }
#nav .nav-right { display: flex; align-items: center; gap: 16px; }

/* Locked the Switch Property text to never wrap */
#nav .nav-switch { 
  font-family: 'Jost', sans-serif; 
  font-size: 10px; 
  letter-spacing: 2px; 
  text-transform: uppercase; 
  cursor: pointer; 
  transition: all 0.2s; 
  white-space: nowrap; /* Prevents text from breaking onto two lines */
  display: inline-flex;
  align-items: center;
}

#nav .nav-book { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; padding: 8px 20px; border-radius: 1px; border: none; cursor: pointer; transition: background 0.2s; white-space: nowrap;  }
/* Theme: Light / Classic */
#nav.nav-prop-light, #nav.nav-classic { background: rgba(244,239,232,0.92); backdrop-filter: blur(12px); border-bottom-color: rgba(14,12,11,0.1); }
#nav.nav-prop-light.scrolled, #nav.nav-classic.scrolled { background: rgba(244,239,232,0.98); }
#nav.nav-prop-light .nav-back, #nav.nav-classic .nav-back { color: rgba(14,12,11,0.48); }
#nav.nav-prop-light .nav-back:hover, #nav.nav-classic .nav-back:hover { color: #0e0c0b; }
#nav.nav-prop-light .nav-brand, #nav.nav-classic .nav-brand { color: #0e0c0b; }
#nav.nav-prop-light .nav-switch, #nav.nav-classic .nav-switch { color: rgba(14,12,11,0.4); }
#nav.nav-prop-light .nav-switch:hover, #nav.nav-classic .nav-switch:hover { color: #8B1A2E; }
#nav.nav-prop-light .nav-book, #nav.nav-classic .nav-book { background: var(--rose); color: #F4EFE8; }
#nav.nav-prop-light .nav-book:hover, #nav.nav-classic .nav-book:hover { background: var(--rose-mid); }
#nav.nav-prop-light .nav-burger span, #nav.nav-classic .nav-burger span { background: rgba(14,12,11,0.6); }

/* Theme: Dark / Ext 39 */
#nav.nav-prop-dark, #nav.nav-ext39 { background: rgba(244,239,232,0.92); backdrop-filter: blur(12px); }
#nav.nav-prop-dark.scrolled, #nav.nav-ext39.scrolled { background: rgba(244,239,232,0.98); border-bottom-color: rgba(255,255,255,0.06); }
#nav.nav-prop-dark .nav-back, #nav.nav-ext39 .nav-back { color: rgba(14,12,11,0.48); }
#nav.nav-prop-dark .nav-back:hover, #nav.nav-ext39 .nav-back:hover { color: #0e0c0b; }
#nav.nav-prop-dark .nav-brand, #nav.nav-ext39 .nav-brand { color: #fff; }
#nav.nav-prop-dark .nav-brand em, #nav.nav-ext39 .nav-brand em { color: #c0394f; }
#nav.nav-prop-dark .nav-switch, #nav.nav-ext39 .nav-switch { color: rgba(14,12,11,0.4); }
#nav.nav-prop-dark .nav-switch:hover, #nav.nav-ext39 .nav-switch:hover { color: #c0394f; }
#nav.nav-prop-dark .nav-book, #nav.nav-ext39 .nav-book { background: #8B1A2E; color: #fff; }
#nav.nav-prop-dark .nav-book:hover, #nav.nav-ext39 .nav-book:hover { background: #a8233a; }

/* Theme: Northam (Light + Sage) */
#nav.nav-northam { background: rgba(244,239,232,0.92); backdrop-filter: blur(12px); border-bottom-color: rgba(14,12,11,0.1); }
#nav.nav-northam.scrolled { background: rgba(244,239,232,0.98); border-bottom-color: rgba(14,12,11,0.1); }
#nav.nav-northam .nav-back { color: rgba(14,12,11,0.48); }
#nav.nav-northam .nav-back:hover { color: #0e0c0b; }
#nav.nav-northam .nav-brand { color: #0e0c0b; }
#nav.nav-northam .nav-brand em { color: #4a7c59; }
#nav.nav-northam .nav-switch { color: rgba(14,12,11,0.4); }
#nav.nav-northam .nav-switch:hover { color: #4a7c59; }
#nav.nav-northam .nav-book { background: #4a7c59; color: #fff; }
#nav.nav-northam .nav-book:hover { background: #3a6147; }
#nav.nav-northam .nav-burger span { background: rgba(14,12,11,0.6); }


/* ════ HAMBURGER & BACKDROP ════ */
#nav .nav-burger { display: none; flex-direction: column; gap: 5px; padding: 6px; background: none; border: none; cursor: pointer; flex-shrink: 0; }
#nav .nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--black); border-radius: 1px; transition: transform 0.28s ease, opacity 0.2s ease; transform-origin: center; }

.drawer-backdrop { display: none; position: fixed; inset: 0; background: rgba(26, 22, 20, 0.55); z-index: 400; cursor: pointer; }
body.drawer-open .drawer-backdrop { display: block; }
body.drawer-open #nav { opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }

/* ════ MOBILE DRAWER (BULLETPROOF) ════ */
.mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); z-index: 500; background:var(--warm-white); border-left: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; overflow-y: auto; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.22,1,0.36,1); padding-bottom: 32px; }
body.drawer-open .mobile-drawer { transform: translateX(0); }
.mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 18px; border-bottom: 1px solid rgba(255,255,255,0.07); flex-shrink: 0; }
.mobile-drawer__brand { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.mobile-drawer__brand img { width: 130px; height: auto; }
.mobile-drawer__close { background: none; border: none; font-size: 26px; line-height: 1; color: #6B6159; cursor: pointer; padding: 2px 6px; transition: color 0.2s; }
.mobile-drawer__close:hover { color: var(--ink); }

/* Top Links */
.mobile-drawer__nav { display: flex; flex-direction: column; border-bottom: 1px solid rgba(26,22,20,0.10); flex-shrink: 0; }
.mobile-drawer__nav a { font-family: 'Jost', sans-serif !important; font-size: 10px !important; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: var(--black) !important; text-decoration: none !important; padding: 15px 24px; border-bottom: 1px solid rgba(26,22,20,0.10); transition: color 0.2s, background 0.2s; display: block; }
.mobile-drawer__nav a:last-child { border-bottom: none; }
.mobile-drawer__nav a:hover { color: var(--black) !important; background: var(--cream); }

/* Properties Section */
.mobile-drawer__section-label { font-family: 'Jost', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 3px; text-transform: uppercase; color: var(--black); padding: 18px 24px 10px; flex-shrink: 0; margin: 0; }
.mobile-drawer__props { display: flex; flex-direction: column; gap: 2px; padding: 0 16px; flex-shrink: 0; }
.mobile-drawer__prop { display: flex !important; flex-direction: column; gap: 4px; padding: 14px 12px; border: 1px solid rgba(26,22,20,0.10); text-decoration: none !important; color: inherit !important; transition: border-color 0.2s, background 0.2s; background: transparent; }
.mobile-drawer__prop strong { font-family: 'Cormorant Garamond', serif !important; font-size: 18px !important; font-weight: 400 !important; color: var(--ink) !important; display: block; }
.mobile-drawer__prop span { font-family: 'Jost', sans-serif !important; font-size: 9px !important; font-weight: 300 !important; letter-spacing: 2px; text-transform: uppercase; color: #686058 !important; display: block; }

/* CTAs (Book & WhatsApp) */
.mobile-drawer__ctas { display: flex !important; flex-direction: column; gap: 10px; padding: 24px 16px 0; margin-top: auto; flex-shrink: 0; }
.mobile-drawer__book { display: block !important; text-align: center; background: #8B1A2E; color: #fff !important; font-family: 'Jost', sans-serif !important; font-size: 10px !important; font-weight: 400; letter-spacing: 2.5px; text-transform: uppercase; padding: 14px; text-decoration: none !important; transition: background 0.2s; border: none; }
.mobile-drawer__wa { display: flex !important; align-items: center; justify-content: center; gap: 8px; border: 1px solid rgba(26,22,20,0.10); color:#6B6159 !important; font-family: 'Jost', sans-serif !important; font-size: 10px !important; font-weight: 300; letter-spacing: 2.5px; text-transform: uppercase; padding: 13px; text-decoration: none !important; transition: border-color 0.2s, color 0.2s; }
.mobile-drawer__wa:hover { border-color: rgba(26,22,20,0.4); color: #6B6159 !important; }
.wa-dot { width: 7px; height: 7px; border-radius: 50%; background: #25d366; flex-shrink: 0; display: block; }

/* Drawer Themes */
.drawer-rose .mobile-drawer__brand em { color: #c0394f; }
.drawer-rose .mobile-drawer__prop:hover { border-color: rgba(139,26,46,0.35); background: rgba(139,26,46,0.06); }
.drawer-rose .mobile-drawer__book { background: #8B1A2E; }
.drawer-rose .mobile-drawer__book:hover { background: #a8233a; }

.drawer-sage .mobile-drawer__brand em { color: #6aaa7a; }
.drawer-sage .mobile-drawer__prop:hover { border-color: rgba(74,124,89,0.35); background: rgba(74,124,89,0.06); }
.drawer-sage .mobile-drawer__book { background: #4a7c59; }
.drawer-sage .mobile-drawer__book:hover { background: #3a6147; }

/* ════ RESPONSIVE NAV (MOBILE OVERRIDES) ════ */
@media (max-width: 900px) {
  
  /* 1. Resize the main nav bar for mobile screens */
  #nav, 
  #nav.nav-main, 
  #nav.nav-prop, 
  #nav.nav-classic, 
  #nav.nav-ext39, 
  #nav.nav-northam { 
      padding: 16px 24px !important; 
      height: auto !important; 
      min-height: 60px !important; 
  }

  /* 2. Hide Desktop Elements (Links, CTAs, and Switch Slider) */
  #nav .nav-links, 
  #nav .nav-cta, 
  #nav .nav-switch, 
  #nav .nav-book { 
      display: none !important; 
  }

  /* 3. Reveal the Hamburger Menu */
  #nav .nav-burger { 
      display: flex !important; 
  }

  /* 4. Condense the "All Properties" back button to just an arrow */
  #nav .nav-back { 
      font-size: 0 !important; 
      letter-spacing: 0 !important; 
      gap: 0 !important; 
  }
  #nav .nav-back::before {
      font-size: 18px !important;
  }
}

/* ════ PROPERTY MAP (interactive embed) ════ */
/* Fills the existing map container on each property page. */
.property-map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Button styles are also used on <a> elements (directions / WhatsApp links). */
a.btn-light, a.btn-ghost-dark, a.btn-sage-solid, a.btn-ghost-sage, a.btn-directions {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none;
}

/* ════ CONTACT PAGE ════ */
/* Top padding clears the fixed nav so the form's first fields aren't hidden. */
.contact-section { max-width: 720px; margin: 0 auto; padding: 180px 24px 100px; }
.contact-head { text-align: center; margin-bottom: 44px; }
.contact-head .eyebrow { font-size: 10px; font-weight: 400; letter-spacing: 5px; text-transform: uppercase; color: var(--rose); margin-bottom: 14px; display: block; }
.contact-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(40px, 5vw, 64px); font-weight: 300; line-height: 1.05; color: var(--ink); margin: 0 0 16px; }
.contact-body { font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.9; max-width: 520px; margin: 0 auto; }
.contact-section .content { margin-top: 8px; }
@media (max-width: 900px) {
  .contact-section { padding: 120px 20px 72px; }
}