/* Location pages (Joshua Tree / Tucson) — measured from the live site. */
.jth-parity-location { --jl-h2: #767260; --jl-slate: #4E5D7A; --jl-quote-bg: #9D9488; letter-spacing: 1px; }
.jth-parity-location section { width: 100%; }
.jth-parity-location h2 { font-size: 36px; line-height: 1.3; font-weight: 400; color: var(--jl-h2); text-align: center; margin: 0 0 24px; }
.jth-parity-location p { font-size: 16px; line-height: 24px; }
.jth-parity-location a { color: var(--jl-slate); }

/* Hero */
.jl-hero { height: 525px; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.jl-hero h1 { font-size: 60px; color: #EDE6E0; text-transform: uppercase; letter-spacing: 1px; margin: 0; font-weight: 700; line-height: 1.2; }
.jl-hero p { font-size: 24px; line-height: 1.3; color: #EDE6E0; text-transform: uppercase; margin: 8px 0 0; }

/* Intro */
.jl-intro { text-align: center; padding: 40px 15px 60px; }
.jl-intro img { display: block; margin: 0 auto 14px; height: auto; }
.jl-intro h2 { max-width: 680px; margin: 0 auto 20px; }
.jl-intro p { font-size: 21px; line-height: 31.5px; max-width: 680px; margin: 0 auto; }

/* Quotes */
.jl-quotes { position: relative; background: var(--jl-quote-bg); min-height: 440px; display: flex; align-items: center; justify-content: center; padding: 60px 90px; }
.jl-quotes__track { display: grid; width: 100%; max-width: 900px; }
.jl-quote { grid-area: 1 / 1; margin: 0; text-align: center; opacity: 0; visibility: hidden; transition: opacity .4s; color: #fff; }
.jl-quote.is-active { opacity: 1; visibility: visible; }
.jl-quote p { font-size: 21px; line-height: 31.5px; color: #fff; margin: 0 0 20px; }
.jl-quote h3 { font-size: 16px; text-transform: uppercase; margin: 0; letter-spacing: 2px; }
.jl-quote h3, .jl-quote a { color: #fff !important; text-decoration: none; }
.jl-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 48px; line-height: 1; cursor: pointer; padding: 0 16px; }
.jl-arrow--prev { left: 20px; } .jl-arrow--next { right: 20px; }
.jl-dots { position: absolute; bottom: 20px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.jl-dots button { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; background: transparent; padding: 0; cursor: pointer; }
.jl-dots button.is-active { background: #fff; }

/* Rooms carousel */
.jl-rooms { padding: 60px 15px 40px; }
/* Live's rooms carousel sits in the Aesthetic/Brizy theme's
   ".fw-container-fluid" wrapper, which caps at 1600px (measured directly,
   holds at 1600 from 1600px viewport width and up) — wider than the
   1170px we had, which is why live fits a 5th room card at wide
   viewports and ours topped out at 4 regardless of how wide the window
   got. */
.jl-carousel { position: relative; max-width: 1600px; margin: 0 auto; padding: 0 30px; }
.jl-carousel__viewport { overflow: hidden; cursor: grab; }
.jl-carousel__track { display: flex; }
.jl-room { padding: 0 10px; box-sizing: border-box; }
.jl-room img { width: 100%; height: auto; display: block; user-select: none; }
/* Corrected against live's real rooms carousel directly (Rich caught
   that an earlier comparison here was against the wrong section of
   live's site — this carousel, the one right under the booking bar, is
   an Owl-Carousel-based "rental slider" with its own distinct type
   treatment: uppercase, 400-weight, letter-spaced, and the title/link
   both use the blue #4E5D7A, not our ink color). */
.jl-room__loc { font-size: 12px !important; text-transform: uppercase; letter-spacing: 1px; margin: 14px 0 4px; color: var(--jth-ink); }
.jl-room h3 { font-size: 18px; font-weight: 400; font-style: italic; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 1px; line-height: 27px; color: #4E5D7A; }
.jl-room__desc { font-size: 16px; line-height: 24px; margin: 0 0 8px; }
.jl-room__link { font-size: 14px; font-weight: 400; text-transform: uppercase; letter-spacing: 1px; text-decoration: underline; color: #4E5D7A; }
.jl-round { position: absolute; top: 34%; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(29,19,15,.7); color: #fff; font-size: 26px; line-height: 38px; padding: 0; cursor: pointer; }
/* Rooms carousel arrows specifically (not the shop teaser, which shares
   .jl-round but has much shorter cards a 60px circle would overwhelm) —
   live's measured directly at 60px, rgba(0,0,0,.3), vs. our smaller,
   more opaque ink-tinted default. */
.jh-rooms .jl-round, .jl-rooms .jl-round {
  width: 60px; height: 60px; background: rgba(0,0,0,.3); font-size: 34px; line-height: 58px;
}
.jl-round--prev { left: -6px; } .jl-round--next { right: -6px; }
.jl-carousel.is-static .jl-round { display: none; }
.jl-other { text-align: center; margin-top: 24px; }

/* Book the entire Inn */
.jl-inn { display: grid; grid-template-columns: 1fr 1fr; background: var(--jth-sand); }
.jl-inn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jl-inn__body { padding: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.jl-btn { display: inline-block; border: 1px solid var(--jth-ink); color: var(--jth-ink) !important; padding: 12px 28px; text-transform: uppercase; text-decoration: none; font-weight: 700; font-size: 14px; }
.jl-btn:hover { background: var(--jth-ink); color: var(--jth-sand-light) !important; }

/* FAQ */
.jl-faq { padding: 70px 15px 60px; }
/* Width history: started at 1140 (live's measured value) → widened to
   1170 for cross-section "consistency" (my own call, wrong — too wide)
   → back to 1140 (still too wide per Rich) → Rich's actual direction:
   narrow it right down to ~680px, matching the reading-width text column
   used elsewhere on this build (e.g. the description box), not live's
   full-width accordion. A deliberate departure from live here. */
.jl-faqlist, .jl-acc { max-width: 680px; margin: 0 auto; }
.jl-faqlist__item { margin-bottom: 24px; }
.jl-faqlist__item h3 { font-size: 20px; margin: 0 0 6px; }
.jl-faqlist__item p { margin: 0; }
/* Live has no box around each accordion item at all (confirmed via
   computed styles: border:0, box-shadow:none) — just a plain stacked
   list with the toggle row and its +/− indicator, separated by a thin
   divider line. */
.jl-acc__item { margin-bottom: 0; border: 0; border-bottom: 1px solid rgba(29,19,15,.12); }
.jl-acc__item:last-child { border-bottom: 0; }
.jl-acc__head,
.jl-acc__head:hover,
.jl-acc__head:focus {
  display: block; width: 100%; text-align: left; background: transparent; border: 0; box-shadow: none !important; padding: 18px 50px 18px 20px; font: inherit; font-size: 18px; font-weight: 700; color: var(--jth-ink) !important; cursor: pointer; position: relative; letter-spacing: 1px; outline: none;
}
/* Kadence's generic button:hover default tints text/background with its
   global accent color (the same olive used site-wide, e.g. the weather
   heading) — this is a plain toggle row, not a themed button, so it
   shouldn't change color on hover at all. */
.jl-acc__head:hover::after,
.jl-acc__head:focus::after { color: var(--jth-ink) !important; }
.jl-acc__head::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 22px; color: var(--jth-ink); }
.jl-acc__head[aria-expanded="true"]::after { content: "–"; }
.jl-acc__body { padding: 0 20px 20px; }
.jl-acc__body p { margin: 0; }

/* Weddings / Photoshoots — live runs this section full-bleed edge to
   edge (confirmed: section width == viewport width, no max-width/
   centering at all), unlike most other sections on this page. The text
   cells also carry real background colors sampled from live's own
   computed styles: olive on "Weddings" (rgb(118,114,96) = #767260,
   already this site's h2/weather-title color elsewhere), clay on
   "Photoshoots" (rgb(142,94,59) = #8E5E3B = var(--jth-clay) exactly).
   Previously had neither the full-bleed width nor any background. */
.jl-wp { display: grid; grid-template-columns: 1fr 1fr; }
.jl-wp__cell { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; }
.jl-wp__cell img { width: 100%; height: 100%; object-fit: cover; display: block; padding: 0; }
.jl-wp__cell:has(> img) { padding: 0; }
.jl-wp__cell:nth-child(1) { background: #767260; color: #fff; }
.jl-wp__cell:nth-child(4) { background: var(--jth-clay); color: #fff; }
.jl-wp__cell:nth-child(1) h2, .jl-wp__cell:nth-child(4) h2 { color: #fff; }
.jl-wp__cell:nth-child(1) .jl-btn, .jl-wp__cell:nth-child(4) .jl-btn { border-color: #fff; color: #fff !important; }
.jl-wp__cell:nth-child(1) .jl-btn:hover, .jl-wp__cell:nth-child(4) .jl-btn:hover { background: rgba(255,255,255,0.15); color: #fff !important; }

/* Weather + Airports */
.jl-info { display: grid; grid-template-columns: 1fr 1fr; max-width: 1170px; margin: 0 auto; padding: 60px 0; }
.jl-info__col { padding: 0 40px; text-align: center; }
/* text-align:center on the column does nothing for the icon <img> —
   Kadence's base img rule sets display:block, and block elements ignore
   an ancestor's text-align (same issue as the footer roadrunner logo
   fix). Center the image itself instead. */
/* Sizing by width alone (100px sun / 54px plane) got the two icons
   close but not exact — the sun's wide/short source (210×96) and the
   plane's square source (200×200) don't reduce to identical heights at
   any pair of widths that also look right. Fix the box each icon sits
   in to one shared height and let the image sit at the bottom of it, so
   both headings start at exactly the same y regardless of the source
   image's own aspect ratio. */
.jl-info__col .jl-icon {
  height: 54px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.jl-info__col img { display: block; margin: 0 auto; max-height: 100%; width: auto; }
/* Live's "TUCSON WEATHER AVERAGES" / "AIRPORTS NEAR ..." headings are
   actually an h4-scale treatment, not the page's usual 36px h2: Windsor
   400 (not bold — that's just Windsor's own display character), 21px,
   uppercase, 2px letter-spacing. Ours was inheriting the generic
   36px/normal-case h2 style shared by every other section on this page. */
.jl-info__col h2 {
  font-size: 21px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 12px 0 24px;
}
/* Month labels are bold — confirmed 700/16px on live; make it explicit
   rather than relying on the browser's default <strong> weight. */
.jl-weather__row strong { font-weight: 700; font-size: 16px; }
.jl-weather { border-right: 1px solid var(--jth-gold); }
.jl-weather__row { display: grid; grid-template-columns: 1fr 1fr 1fr; min-height: 32px; align-items: center; text-align: center; }
.jl-weather__row strong { text-align: left; }
.jl-airports p { text-align: left; }
.jl-airports ul { list-style: none; margin: 16px 0 0; padding: 0; text-align: left; }
.jl-airports li { margin-bottom: 6px; }

/* Description box */
.jl-desc { padding: 0 15px 80px; }
.jl-desc__box { display: grid; grid-template-columns: 2fr 1fr; max-width: 1170px; margin: 0 auto; border: 1px solid var(--jth-ink); }
.jl-desc__text { padding: 80px 80px 60px; }
.jl-desc__text h2 { text-align: left; }
.jl-desc__img { background-size: cover; background-position: center; min-height: 300px; }

@media (max-width: 800px) {
	.jl-hero { height: 360px; } .jl-hero h1 { font-size: 40px; }
	.jl-quotes { padding: 50px 50px 60px; } .jl-arrow { font-size: 36px; padding: 0 6px; } .jl-arrow--prev { left: 4px; } .jl-arrow--next { right: 4px; }
	.jl-inn, .jl-wp, .jl-info, .jl-desc__box { grid-template-columns: 1fr; }
	.jl-inn__body, .jl-desc__text { padding: 40px 24px; }
	.jl-weather { border-right: 0; margin-bottom: 40px; }
	.jl-wp__cell img { height: 260px; }
	.jl-wp__cell:nth-child(3) { order: 4; } .jl-wp__cell:nth-child(4) { order: 3; }
	.jl-intro h2, .jth-parity-location h2 { font-size: 28px; }
}

/* Kadence wrappers paint their own near-white; live sits on the sand body. */
.jth-parity-location, .jth-parity-location .site-main, body.jth-parity-page .content-bg { background: transparent !important; }
.jl-quote { border: 0 !important; padding: 0 !important; quotes: none; }
.jl-quote::before, .jl-quote::after { content: none !important; }
/* Live location pages sit on the sand body (rgb 211,194,181), unlike the light blog/shop pages. */
body.jth-parity-page { background: #D3C2B5 !important; }
.jl-inn { background: #C4B09F; }
body.jth-parity-page #wrapper, body.jth-parity-page #inner-wrap, body.jth-parity-page .site, body.jth-parity-page #primary, body.jth-parity-page #main, body.jth-parity-page .entry-content-wrap, body.jth-parity-page .content-container { background: transparent !important; }