/* ==========================================
   Oakdale Ranch — Design System
   custom.css — injected into static archive
   ========================================== */

/* ─── Google Fonts ───────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600&display=swap');

/* ─── Design tokens ──────────────────────── */
:root {
  --odr-brown:        #8b4513;
  --odr-brown-hover:  #6b3410;
  --odr-cream:        #f9f5ef;
  --odr-cream-warm:   #f5e6c8;
  --odr-dark:         #2c1810;
  --odr-olive:        #67725a;
  --odr-gold:         #fbdc5f;
  --odr-white:        #ffffff;
  --odr-border:       #e0d4c3;
  --odr-text-muted:   #4a3a30;

  --odr-radius-card:  10px;
  --odr-radius-btn:   4px;

  --odr-shadow-card:  0 2px 16px rgba(44,24,16,0.07);
  --odr-shadow-hover: 0 6px 24px rgba(44,24,16,0.13);

  --odr-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --odr-font-body:    'Inter', system-ui, -apple-system, sans-serif;
}

/* ─── 1. Kill all spacing bugs ──────────── */

/* entry-content-wrap padding creates nav-hero gap; article shadow creates white outline */
.entry-content-wrap { padding: 0 !important; }
article.entry      { box-shadow: none !important; }
#primary.content-area { margin-bottom: 0 !important; margin-top: 0 !important; }

/* Hero cover block has margin-bottom: 32px → white gap before beige section */
.wp-block-cover.alignfull { margin-bottom: 0 !important; }

/* Beige section has margin-bottom: 32px → white gap before wildflower parallax */
.wp-block-group.alignwide { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ─── 2. Hero: restore original height ───── */
/* The parallax section is the RTB wildflower block, not the hero cover */
.wp-block-cover.alignfull {
  min-height: 700px !important;
}

/* ─── 3. Parallax (RTB wildflower): full bleed + 1.75× taller ── */
.wp-block-kadence-column.kadence-column4_e48242-cd {
  width:        100vw !important;
  max-width:    100vw !important;
  position:     relative !important;
  left:         50% !important;
  right:        50% !important;
  margin-left:  -50vw !important;
  margin-right: -50vw !important;
  box-sizing:   border-box !important;
}
/* 1.75× taller: was ~261px, now ~460px */
.kadence-column4_e48242-cd > .kt-inside-inner-col {
  min-height: 460px !important;
  display:    flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ─── 4. Remove all image borders / shadows ─ */
.wp-block-image img,
figure.wp-block-image,
figure.has-custom-border,
figure.has-custom-border img,
.wp-block-image.has-custom-border,
.wp-block-image.has-custom-border img {
  border:     none !important;
  box-shadow: none !important;
  outline:    none !important;
}

/* ─── 5. Card widgets: bigger images, edge-to-edge ── */

/* Clip children to card's border-radius */
.wp-block-group.has-border-color.has-base-background-color.is-vertical {
  overflow:   hidden !important;
  border:     none !important;
  box-shadow: var(--odr-shadow-card) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.wp-block-group.has-border-color.has-base-background-color.is-vertical:hover {
  box-shadow: var(--odr-shadow-hover) !important;
  transform:  translateY(-2px);
}

/* Figure: flush, full-width */
.wp-block-group.has-base-background-color.is-vertical > figure.wp-block-image {
  margin:    0 !important;
  padding:   0 !important;
  width:     100% !important;
  max-width: 100% !important;
  display:   block !important;
}

/* Image: full width, taller, border-radius matches card top corners */
.wp-block-group.has-base-background-color.is-vertical > figure.wp-block-image img {
  width:         100% !important;
  max-width:     100% !important;
  height:        260px !important;
  border-radius: 10px 10px 0 0 !important;
  object-fit:    cover !important;
  display:       block !important;
}

/* Card text area: restore padding */
.wp-block-group.has-base-background-color.is-vertical > .wp-block-group {
  padding-top:    20px !important;
  padding-bottom: 24px !important;
  padding-left:   24px !important;
  padding-right:  24px !important;
}

/* ─── 6. "Your Private" section: full-bleed cream ───── */
/* alignwide is constrained by site-container; force 100vw + cream bg */
.wp-block-group.alignwide {
  background-color: var(--odr-cream) !important;
  width:        100vw !important;
  max-width:    100vw !important;
  position:     relative !important;
  left:         50% !important;
  right:        50% !important;
  margin-left:  -50vw !important;
  margin-right: -50vw !important;
  box-sizing:   border-box !important;
}

/* ─── 7. Button consistency ──────────────── */
.wp-element-button {
  transition: background-color 0.2s ease, opacity 0.2s ease !important;
}
.wp-element-button:hover {
  opacity: 0.88 !important;
}

/* ─── 8. Card columns: equal height ──────── */
.wp-block-group.alignfull > .wp-block-group__inner-container > .wp-block-columns {
  align-items: stretch !important;
}
.wp-block-group.alignfull > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column {
  flex: 1 1 0 !important;
}

/* ─── 9. Footer: brand colors + visible social icons ── */
.site-footer {
  background-color: var(--odr-dark) !important;
  color:            var(--odr-cream-warm) !important;
}
.site-footer a {
  color: var(--odr-cream-warm) !important;
}
.site-footer a:hover {
  color: var(--odr-gold) !important;
}

/* Kadence social buttons — background is rgb(237,242,247) by default */
.site-footer .social-button {
  background-color: rgba(245, 230, 200, 0.12) !important;
  border:           1px solid rgba(245, 230, 200, 0.35) !important;
  color:            var(--odr-cream-warm) !important;
}
.site-footer .social-button:hover {
  background-color: rgba(245, 230, 200, 0.25) !important;
  border-color:     var(--odr-cream-warm) !important;
}

/* Social SVG icons: force cream fill */
.site-footer .social-button svg,
.site-footer .social-button .kadence-svg-iconset svg {
  fill:  var(--odr-cream-warm) !important;
}

/* Explore section: remove bottom padding so dark footer starts immediately */
.wp-block-group.alignfull.has-background {
  padding-bottom: 0 !important;
}

/* ─── 10. More brown above footer nav ────── */
/* footer-wrap padding-top was 0; add generous dark space before nav links */
.site-footer-wrap {
  padding-top: 72px !important;
}

/* ─── 11. Inner page layout consistency ─── */
/* Ensure all pages share the same entry spacing, heading, and body rhythm */
.entry-content {
  padding: 0 !important;
}
/* Inner pages: content container padding kept reasonable */
.content-container.site-container {
  padding-left: 24px !important;
  padding-right: 24px !important;
}
/* Heading scale consistency */
.entry-content h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; color: var(--odr-dark); }
.entry-content h2 { font-size: clamp(24px, 3.5vw, 36px); font-weight: 700; color: var(--odr-dark); }
.entry-content h3 { font-size: clamp(18px, 2.5vw, 24px); font-weight: 700; color: var(--odr-dark); }
/* Link color consistency */
.entry-content a { color: var(--odr-brown); }
.entry-content a:hover { color: var(--odr-brown-hover); }

/* ─── 12. Prevent horizontal scroll from 100vw full-bleed technique ── */
html { overflow-x: hidden; }

/* Kadence default body bg is #f7fafc (grey-blue) — it peeks out at layout
   edges and through diagonal clip cutouts. Base canvas is white. */
body { background-color: #ffffff !important; }

/* ─── 13. Mobile responsive ─────────────────────────────────────────── */

/* ── Tablet (≤ 900px) ── */
@media (max-width: 900px) {

  /* Card columns: allow wrapping at tablet, 2-up */
  .wp-block-group.alignfull > .wp-block-group__inner-container > .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .wp-block-group.alignfull > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column {
    flex: 1 1 260px !important;
    min-width: 260px !important;
  }

  /* Beige section: reduce horizontal padding */
  .wp-block-group.alignwide {
    padding-left:  32px !important;
    padding-right: 32px !important;
  }
}

/* ── Mobile (≤ 600px) ── */
@media (max-width: 600px) {

  /* Hero: scale down 92px heading + shorter cover */
  .wp-block-cover.alignfull {
    min-height: 520px !important;
  }
  .wp-block-cover__inner-container .wp-block-group {
    padding-top:    40px !important;
    padding-bottom: 40px !important;
  }
  /* Override the inline font-size:92px on the hero h1 */
  .wp-block-cover .wp-block-heading[style*="font-size:92px"],
  .wp-block-cover .wp-block-heading[style*="font-size: 92px"] {
    font-size: clamp(40px, 12vw, 64px) !important;
    letter-spacing: -1px !important;
  }

  /* Beige section: minimal padding, keep columns stacking naturally */
  .wp-block-group.alignwide {
    padding-top:    40px !important;
    padding-bottom: 40px !important;
    padding-left:   20px !important;
    padding-right:  20px !important;
  }
  /* "Your Private" two-column: stack on mobile */
  .wp-block-group.alignwide .wp-block-columns {
    flex-direction: column !important;
  }
  .wp-block-group.alignwide .wp-block-column {
    flex-basis: 100% !important;
    width:      100% !important;
  }
  /* Car image in beige section: full-width when stacked */
  .wp-block-group.alignwide .wp-block-image img {
    width:     100% !important;
    max-width: 100% !important;
    height:    240px !important;
    object-fit: cover !important;
  }

  /* RTB parallax: shorter on mobile */
  .kadence-column4_e48242-cd > .kt-inside-inner-col {
    min-height: 280px !important;
  }

  /* Card columns: single column */
  .wp-block-group.alignfull > .wp-block-group__inner-container > .wp-block-columns {
    flex-direction: column !important;
    flex-wrap:      nowrap !important;
  }
  .wp-block-group.alignfull > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column {
    flex:      1 1 100% !important;
    width:     100% !important;
    min-width: unset !important;
  }

  /* Card images: maintain good height at full width */
  .wp-block-group.has-base-background-color.is-vertical > figure.wp-block-image img {
    height: 220px !important;
  }

  /* Explore section: less top padding on mobile */
  .wp-block-group.alignfull.has-background {
    padding-top:   40px !important;
    padding-left:  20px !important;
    padding-right: 20px !important;
  }

  /* Footer: tighten pre-nav padding, center align */
  .site-footer-wrap { padding-top: 40px !important; }
  .site-footer .site-container { text-align: center; }
  .site-top-footer-inner-wrap { justify-content: center !important; }
  /* Footer nav: wrap on mobile */
  .site-footer .menu {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 16px !important;
  }
  /* Social buttons: center */
  .site-footer .wp-block-buttons {
    justify-content: center !important;
  }
}

/* ══════════════════════════════════════════════
   ─── 14. Typography system ──────────────────
   ══════════════════════════════════════════════ */

/* Base body font */
body {
  font-family: var(--odr-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* All headings → Playfair Display */
h1, h2, h3, h4,
.wp-block-heading,
.entry-content h1,
.entry-content h2,
.entry-content h3 {
  font-family: var(--odr-font-display) !important;
}

/* Refine heading weights for Playfair (800 looks heavy; 700 is more refined) */
.entry-content h1 { font-weight: 700 !important; }
.entry-content h2 { font-weight: 700 !important; }
.entry-content h3 { font-weight: 600 !important; }

/* ─── 15. Navigation header ──────────────── */

/* Warm cream nav bar */
.site-header {
  background-color: var(--odr-cream) !important;
  border-bottom: 1px solid var(--odr-border) !important;
}

/* Wordmark: Playfair Display, richer brown */
.site-title,
.site-title a,
.site-title-wrap a {
  font-family: var(--odr-font-display) !important;
  font-size:   1.35rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: var(--odr-dark) !important;
}
.site-title a:hover,
.site-title-wrap a:hover {
  color: var(--odr-brown) !important;
  text-decoration: none !important;
}

/* Nav links: Inter, tighter size */
.main-navigation a,
.primary-menu a {
  font-family: var(--odr-font-body) !important;
  font-size:   0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* ─── 16. Hero typography ────────────────── */

/* Hero h1: Playfair Display (size + tracking from inline styles preserved) */
.wp-block-cover .wp-block-heading {
  font-family: var(--odr-font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
}

/* Hero subtitle "PASO ROBLES WINE COUNTRY": fix low contrast */
.wp-block-cover .wp-block-paragraph[style*="letter-spacing:2px"],
.wp-block-cover .wp-block-paragraph[style*="letter-spacing: 2px"] {
  color: rgba(249, 245, 239, 0.88) !important;
  font-family: var(--odr-font-body) !important;
  font-size:   12px !important;
  font-weight: 600 !important;
  letter-spacing: 3.5px !important;
}

/* Hero body paragraph: Inter */
.wp-block-cover .wp-block-paragraph {
  font-family: var(--odr-font-body) !important;
}

/* Hero outline button: cream border, legible on any hero bg */
.wp-block-cover .wp-block-button__link:not([style*="background-color:#8b"]):not([style*="background-color: #8b"]) {
  border:     2px solid rgba(249, 245, 239, 0.75) !important;
  color:      var(--odr-cream) !important;
  background: transparent !important;
}
.wp-block-cover .wp-block-button__link:not([style*="background-color:#8b"]):not([style*="background-color: #8b"]):hover {
  background: rgba(249, 245, 239, 0.12) !important;
  border-color: var(--odr-cream) !important;
}

/* Inner page hero supertitle (OAKDALE RANCH · PASO ROBLES) */
.wp-block-cover .wp-block-paragraph[style*="font-size:14px"],
.wp-block-cover .wp-block-paragraph[style*="font-size: 14px"] {
  font-family: var(--odr-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  font-size:   12px !important;
  opacity:     0.82 !important;
}

/* ─── 17. "Your Private" section ─────────── */

/* Section h2 */
.wp-block-group.alignwide h2 {
  font-family: var(--odr-font-display) !important;
  font-size:   clamp(32px, 4vw, 52px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color:       var(--odr-dark) !important;
}

/* Section body paragraphs */
.wp-block-group.alignwide p,
.wp-block-group.alignwide li {
  font-family: var(--odr-font-body) !important;
  font-size:   17px !important;
  line-height: 1.75 !important;
  color:       #3a2a20 !important;
}

/* Section padding — more generous breathing room */
.wp-block-group.alignwide {
  padding-top:    80px !important;
  padding-bottom: 80px !important;
  padding-left:   80px !important;
  padding-right:  80px !important;
}

/* ─── 18. Wildflower CTA section ─────────── */

/* "Ready to Book Your Stay?" → Playfair italic */
.kadence-column4_e48242-cd .wp-block-heading {
  font-family: var(--odr-font-display) !important;
  font-style:  italic !important;
  font-weight: 600 !important;
  font-size:   clamp(28px, 4vw, 44px) !important;
}

/* "Contact Us" gold button → ghost cream (matches "Explore the Ranch" hero style) */
a.wp-element-button[style*="background-color:#fbdc5f"],
a.wp-element-button[style*="background-color: #fbdc5f"] {
  background-color: transparent !important;
  border:           2px solid rgba(249, 245, 239, 0.82) !important;
  color:            var(--odr-cream) !important;
}
a.wp-element-button[style*="background-color:#fbdc5f"]:hover,
a.wp-element-button[style*="background-color: #fbdc5f"]:hover {
  background-color: rgba(249, 245, 239, 0.12) !important;
  border-color:     var(--odr-cream) !important;
}

/* ─── 19. "Explore the Property" section ─── */

/* Section heading + subheading */
.wp-block-group.alignfull h2 {
  font-family: var(--odr-font-display) !important;
  font-weight: 700 !important;
}
.wp-block-group.alignfull > .wp-block-group__inner-container > .wp-block-paragraph {
  font-family: var(--odr-font-body) !important;
  font-size:   17px !important;
  color:       var(--odr-text-muted) !important;
}

/* ─── 20. Card type ──────────────────────── */

/* Card heading */
.wp-block-group.has-base-background-color.is-vertical .wp-block-heading {
  font-family: var(--odr-font-display) !important;
  font-size:   1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color:       var(--odr-dark) !important;
  margin-bottom: 12px !important;
}

/* Card body text */
.wp-block-group.has-base-background-color.is-vertical p {
  font-family: var(--odr-font-body) !important;
  font-size:   15px !important;
  line-height: 1.7 !important;
  color:       var(--odr-text-muted) !important;
}

/* ─── 21. Footer type ────────────────────── */

.site-footer,
.site-footer p,
.site-footer a {
  font-family: var(--odr-font-body) !important;
}
.site-footer .menu a {
  font-size:   0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* ─── 22. Mobile type fixes ──────────────── */

@media (max-width: 900px) {
  .wp-block-group.alignwide {
    padding-left:  40px !important;
    padding-right: 40px !important;
  }
}

@media (max-width: 600px) {
  .wp-block-group.alignwide {
    padding-top:    48px !important;
    padding-bottom: 48px !important;
    padding-left:   24px !important;
    padding-right:  24px !important;
  }
  .wp-block-group.alignwide h2 {
    font-size: clamp(28px, 8vw, 40px) !important;
  }
  .kadence-column4_e48242-cd .wp-block-heading {
    font-size: clamp(24px, 7vw, 36px) !important;
  }
}

/* ─── 23. wp-block-cover full base CSS ────────────────────────────────────
   WP only inlines wp-block-cover-inline-css on pages that had a cover block
   at export time. 86 Saloon + Things to Do got their heroes injected post-
   export, so they need the complete base rules here. Mirrors core
   wp-includes/blocks/cover/style.min.css. */
.wp-block-cover {
  align-items:         center;
  background-position: 50%;
  box-sizing:          border-box;
  display:             flex;
  justify-content:     center;
  min-height:          430px;
  overflow:            hidden;
  padding:             1em;
  position:            relative;
}
.wp-block-cover .has-background-dim:not([class*="-background-color"]) {
  background-color: #000;
}
.wp-block-cover__background {
  bottom:   0;
  left:     0;
  opacity:  0.5;
  position: absolute;
  right:    0;
  top:      0;
  z-index:  1;
}
.wp-block-cover__background.has-background-dim-30 { opacity: 0.3; }
.wp-block-cover__background.has-background-dim-40 { opacity: 0.4; }
.wp-block-cover__background.has-background-dim-45 { opacity: 0.45; }
.wp-block-cover__background.has-background-dim-50 { opacity: 0.5; }
.wp-block-cover__image-background {
  bottom:     0;
  left:       0;
  position:   absolute;
  right:      0;
  top:        0;
  width:      100%;
  height:     100%;
  max-width:  none;
  object-fit: cover;
  z-index:    0;
}
.wp-block-cover__inner-container {
  color:    #fff;
  position: relative;
  width:    100%;
  z-index:  2;
}
/* Hero text sits directly on the image — groups inside a cover never get
   the dark section background from the Diagonal Range layout rules */
.wp-block-cover .wp-block-group.alignfull:not(.has-background),
.wp-block-cover .wp-block-group.alignfull.has-background {
  background-color: transparent !important;
}

/* ─── 24. Layout: Diagonal Range ─────────── */

/* Hero: diagonal bottom cut; pulls down into beige section */
.wp-block-cover.alignfull {
  clip-path:    polygon(0 0, 100% 0, 100% 88%, 0 100%) !important;
  margin-bottom: -80px !important;
  min-height:   780px !important;
  position:     relative !important;
  z-index:      2 !important;
}

/* Beige "Your Private" section: diagonal TOP cut only — bottoms are straight
   so sections meet the next block flush (the footer owns its own slant) */
.wp-block-group.alignwide {
  clip-path:    polygon(0 48px, 100% 0, 100% 100%, 0 100%) !important;
  padding-top:  110px !important;
  padding-bottom: 110px !important;
  margin-bottom: 0 !important;
  background-color: #f9f5ef !important;
  position:     relative !important;
  z-index:      1 !important;
}

/* "Explore the Property" card section: dark background */
.wp-block-group.alignfull:not(.has-background) {
  background-color: #1e1208 !important;
  padding-top:    80px !important;
  padding-bottom: 80px !important;
}
.wp-block-group.alignfull:not(.has-background) h2 {
  color: #f5e6c8 !important;
}
.wp-block-group.alignfull:not(.has-background) > .wp-block-group__inner-container > p {
  color: #9a7a58 !important;
}

/* Cards: dark western style */
.wp-block-group.has-border-color.has-base-background-color.is-vertical {
  background-color: #2c1c10 !important;
  border:           none !important;
  border-top:       2px solid #9b4c14 !important;
  border-radius:    4px !important;
  box-shadow:       0 4px 20px rgba(0,0,0,0.4) !important;
}
.wp-block-group.has-base-background-color.is-vertical .wp-block-heading {
  color: #f5e6c8 !important;
}
.wp-block-group.has-base-background-color.is-vertical p {
  color: #a08060 !important;
}
.wp-block-group.has-base-background-color.is-vertical > figure.wp-block-image img {
  border-radius: 0 !important;
  filter:        brightness(0.9) contrast(1.05) !important;
}

/* ─── 25. Footer: one slanted top edge, identical on every page ────────── */
/* The slant previously came from whatever content section happened to be
   last on each page (inconsistent). The footer now owns it: clip its top
   at an angle and pull up over the preceding section, whose color fills
   the wedge. */
.site-footer {
  clip-path:  polygon(0 64px, 100% 0, 100% 100%, 0 100%) !important;
  margin-top: -64px !important;
  position:   relative !important;
  z-index:    2 !important;
}
.site-footer-wrap {
  padding-top: 140px !important;
}
@media (max-width: 600px) {
  .site-footer {
    clip-path:  polygon(0 32px, 100% 0, 100% 100%, 0 100%) !important;
    margin-top: -32px !important;
  }
  .site-footer-wrap {
    padding-top: 80px !important;
  }
}