/* Hand-written fixes on top of the ported WordPress CSS (site.css / page CSS are rebuilt by tools/build-css.py; this file isn't). */

/* Contact: after sending, the form is removed and the thank-you box spans the form area instead of sitting in its left half. */
.kc-contact-form:not(:has(form)) .et-pb-contact-message { flex: 1 1 100%; }

/* Footer credit (10/15): "Website Design by Scalable Websites" after the copyright, in the copyright's own colour. */
.kc-copyright a { color: inherit; text-decoration: none; white-space: nowrap; }
.kc-copyright a:hover, .kc-copyright a:focus-visible { text-decoration: underline; }
/* Below desktop the credit gets its own line (no "Website / Design by" break); phones centre both lines, as live centres the copyright. */
@media (max-width: 980px) { .kc-copyright .kc-credit { display: block; } }
@media (max-width: 767px) { .kc-copyright p { text-align: center; } }

/* Page hero descriptions (10/15, client request): darker text, #101010 instead of Divi's #3D3D3D, for readability over the
   photo. Every inner page's hero (.kc-page-hero: Cabins, Experience, Guided Rides, Trails & Riding, Our Story, Gallery,
   Contact). Not the blue "GUIDED RIDES" eyebrow or the headings. */
body #page-container .kc-page-hero .et_pb_text:not(.kc-eyebrow) .et_pb_text_inner,
body #page-container .kc-page-hero .et_pb_text:not(.kc-eyebrow) .et_pb_text_inner * { color: #101010 !important; }

/* Book Your Stay (/book/): Lodgify's portable search bar in the site's colours (Lodgify's default is yellow) and
   square corners like the site's buttons. :root because Lodgify opens its date/guest pickers outside the bar. */
:root {
  --ldg-psb-background: #ffffff;
  --ldg-psb-border-radius: 0;
  --ldg-psb-box-shadow: 0px 24px 54px 0px rgba(0, 0, 0, 0.1);
  --ldg-psb-padding: 14px;
  --ldg-psb-input-background: #ffffff;
  --ldg-psb-button-border-radius: 0;
  --ldg-psb-color-primary: #1541B5;
  --ldg-psb-color-primary-lighter: #8AA0DA;
  --ldg-psb-color-primary-darker: #0D2D7B;
  --ldg-psb-color-primary-contrast: #ffffff;
  --ldg-semantic-color-primary: #1541B5;
  --ldg-semantic-color-primary-lighter: #8AA0DA;
  --ldg-semantic-color-primary-darker: #0D2D7B;
  --ldg-semantic-color-primary-contrast: #ffffff;
  --ldg-component-modal-z-index: 999;
}
#lodgify-search-bar { width: 100%; min-height: 72px; }
.kc-book-inner { width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.kc-book-note { margin: 0; padding: 0; text-align: center; font-family: 'Open Sans', sans-serif; font-size: 18px; line-height: 28px; color: #3D3D3D; }
.kc-book-note a { color: #1541B5; text-decoration: underline; }
.kc-book-note a:hover { color: #0D2D7B; }
@media (max-width: 767px) { .kc-book-note { font-size: 16px; line-height: 24px; } }

/* Our Story (10/16, client request): no location map on phones. The "Our Location" section goes straight from the
   Google Maps button to "Nearby Parks"; tablet and desktop keep the map. */
@media (max-width: 767px) { body.page-id-39 #page-container .et_pb_section_3 .et_pb_image_1 { display: none !important; } }

/* Contact page details (10/22, client request): Address / Email / Phone cards between the hero and the inquiry form,
   lined up with the form (1000px). Cream cards, blue icon, Newsreader values; each card is a link (Maps, mailto, tel).
   Three across on desktop, one column below 981px. */
.kc-contact-info { padding: 8px 20px 64px; }
.kc-contact-info .kc-ci-inner { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; font-style: normal; }
#page-container .kc-contact-info a.kc-ci-card {
  display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 20px 32px;
  background: #F6F3EC; border-radius: 16px; text-align: center; text-decoration: none; color: #101010;
  transition: transform .2s ease, box-shadow .2s ease;
}
#page-container .kc-contact-info a.kc-ci-card:hover,
#page-container .kc-contact-info a.kc-ci-card:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(13, 45, 123, .12); }
.kc-contact-info .kc-ci-icon { width: 52px; height: 52px; border-radius: 50%; background: #1541B5; color: #fff; display: grid; place-items: center; margin-bottom: 4px; }
.kc-contact-info .kc-ci-icon svg { width: 22px; height: 22px; display: block; }
.kc-contact-info .kc-ci-text { display: flex; flex-direction: column; align-items: inherit; gap: 10px; }
.kc-contact-info .kc-ci-label { font-family: 'Open Sans', Arial, sans-serif; font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #1541B5; }
.kc-contact-info .kc-ci-value { font-family: 'Newsreader', Georgia, serif; font-size: 21px; line-height: 1.35; color: #101010; overflow-wrap: anywhere; }
@media (max-width: 980px) {
  .kc-contact-info { padding: 8px 40px 48px; }
  .kc-contact-info .kc-ci-inner { grid-template-columns: 1fr; max-width: 560px; gap: 16px; }
  #page-container .kc-contact-info a.kc-ci-card { flex-direction: row; text-align: left; gap: 18px; padding: 20px 24px; }
  .kc-contact-info .kc-ci-icon { flex: none; margin: 0; width: 48px; height: 48px; }
  .kc-contact-info .kc-ci-text { align-items: flex-start; gap: 6px; }
}
@media (max-width: 767px) {
  .kc-contact-info { padding: 0 20px 40px; }
  .kc-contact-info .kc-ci-value { font-size: 19px; }
}

/* Footer CONTACT column (10/22, client request): address / email / phone after INFO, styled like INFO's links
   (heading reuses INFO's text-module classes). Layout of the footer's top grid:
   ≥1280px  logo | EXPLORE | INFO | CONTACT
   981–1279 logo | EXPLORE | INFO, CONTACT on its own row below (details side by side). The logo gets its own
            auto-width column here; Divi had squeezed it to 0–124px so it lay over the EXPLORE links.
   ≤980     Divi's tablet/phone grid; CONTACT spans the row (side by side on tablet, stacked on phones). */
.kc-footer-contact { display: flex; flex-direction: column; gap: 24px; }
.kc-footer-contact .kc-fc-list { display: flex; flex-direction: column; gap: 16px; margin: 0; font-style: normal; }
#page-container .kc-footer-contact .kc-fc-list a {
  display: flex; align-items: flex-start; gap: 10px; color: #fff; text-decoration: none;
  font-family: 'Open Sans', Arial, sans-serif; font-size: 18px; font-weight: 500; line-height: 24px;
}
#page-container .kc-footer-contact .kc-fc-list a:hover span,
#page-container .kc-footer-contact .kc-fc-list a:focus-visible span { text-decoration: underline; text-underline-offset: 4px; }
.kc-footer-contact .kc-fc-list svg { flex: none; width: 18px; height: 18px; margin-top: 3px; opacity: .85; }
/* ≥1280px (10/22, client request "compress"): each column only as wide as its content, the spare width shared evenly
   between them (no wide gap after EXPLORE), and CONTACT's right edge lined up with the copyright line below (the top row
   had 30px right padding, the bottom row 80px). */
@media (min-width: 1280px) {
  body #page-container .et_pb_row_0_tb_footer.et_pb_row { grid-template-columns: repeat(4, max-content) !important; justify-content: space-between !important; column-gap: 64px !important; padding-right: 80px !important; }
}
@media (min-width: 981px) and (max-width: 1279px) {
  body #page-container .et_pb_row_0_tb_footer.et_pb_row { grid-template-columns: auto minmax(0, 1.6fr) minmax(0, 1fr) !important; column-gap: 48px !important; row-gap: 48px !important; }
  .kc-footer-contact { grid-column: 2 / -1; }
  .kc-footer-contact .kc-fc-list { flex-direction: row; flex-wrap: wrap; gap: 16px 40px; }
}
@media (max-width: 980px) {
  .kc-footer-contact { grid-column: 1 / -1; gap: 30px; }
}
@media (min-width: 768px) and (max-width: 980px) {
  .kc-footer-contact .kc-fc-list { flex-direction: row; flex-wrap: wrap; gap: 16px 40px; }
}
@media (max-width: 767px) {
  .kc-footer-contact .kc-fc-list { gap: 14px; }
  #page-container .kc-footer-contact .kc-fc-list a { font-size: 16px; }
}

/* Home hero video (client request; 11/02: the first 10 s of the YouTube "Cabin Tour", was the 10/29 "walkthrough"), muted and looping behind the
   heading (public/assets/video/: 1280px MP4 ~1.9 MB, 854px for phones ~0.7 MB). The video's first frame is the hero's
   background (and its poster), so nothing jumps when it starts. A 35% navy shade keeps the white text readable (the
   tint Divi used on phones). Visitors who ask for reduced motion get the still frame only. */
body #page-container .et_pb_section_0.kc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background-image: url('/assets/video/kc-hero-cabin-tour-poster.webp') !important;
}
.kc-hero .kc-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; }
.kc-hero .kc-hero-shade { position: absolute; inset: 0; z-index: -1; background: rgba(4, 20, 43, .35); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .kc-hero .kc-hero-video { display: none; } }
/* Hero video logo (10/29, client request: the logo in the video's opening was cut off). The video and its still are
   anchored to the top, so the film's "Karla's Creek Retreat / LaFollette, TN" title is whole, and the heading, text and
   button sit in the lower part of the banner, clear of it. The banner grows with the width, as the logo does
   (~665px at 1440, 746px at 1920); phones 620px.
   11/02 (client request): the cabin tour video has no logo, so the content is centred vertically again (same banner
   height, equal top and bottom padding). */
.kc-hero .kc-hero-video { object-position: center top; }
body #page-container .et_pb_section_0.kc-hero {
  justify-content: center !important; min-height: calc(17vw + 420px) !important; padding-top: 64px !important; padding-bottom: 64px !important;
  background-position: center top !important;
}
@media (max-width: 767px) { body #page-container .et_pb_section_0.kc-hero { min-height: 620px !important; padding-top: 48px !important; padding-bottom: 48px !important; } }

/* The Timber Cabin photos (10/30, client request): new interior photos for the hero thumbnails 2-6 (each thumb's
   data-hero is the photo site.js shows in the hero) and the Features bedroom (client king bedroom photo, 11/02) and kitchen photos. The first thumb and the
   exterior photos are unchanged. Page CSS still names the old files; these win by specificity. */
body.page-id-37 #page-container .et_pb_group_1.kc-thumb { background-image: url('/assets/img/opt/timber-cabin-great-room-loft-thumb240.webp') !important; }
body.page-id-37 #page-container .et_pb_group_2.kc-thumb { background-image: url('/assets/img/opt/timber-cabin-living-room-kitchen-thumb240.webp') !important; }
body.page-id-37 #page-container .et_pb_group_3.kc-thumb { background-image: url('/assets/img/opt/timber-cabin-staircase-coffee-bar-thumb240.webp') !important; }
body.page-id-37 #page-container .et_pb_group_4.kc-thumb { background-image: url('/assets/img/opt/timber-cabin-loft-bunk-beds-thumb240.webp') !important; }
body.page-id-37 #page-container .et_pb_group_5.kc-thumb { background-image: url('/assets/img/opt/timber-cabin-bathroom-barrel-sink-thumb240.webp') !important; }
body.page-id-37 #page-container .et_pb_group_6 { background-image: url('/assets/img/opt/timber-cabin-king-bedroom-bg1300.webp') !important; background-position: center !important; }
body.page-id-37 #page-container .et_pb_group_8 { background-image: url('/assets/img/opt/timber-cabin-kitchen-bg1300.webp') !important; }
@media (max-width: 480px) {
  body.page-id-37 #page-container .et_pb_group_6 { background-image: url('/assets/img/opt/timber-cabin-king-bedroom-bgm960.webp') !important; }
  body.page-id-37 #page-container .et_pb_group_8 { background-image: url('/assets/img/opt/timber-cabin-kitchen-bgm960.webp') !important; }
}

/* Timber Cabin "Karla's Retreat Moments" slider (11/02, client request): 8 photos in one row that slides; 6 in view on
   desktop, 3 on tablets, 2 on phones (same sizes and gaps as the grid it replaces). Swipe/scroll or the arrows (site.js);
   an arrow fades out at that end. Clicking a photo still opens the lightbox (all 8). */
.kc-moments-slider { position: relative; }
.kc-moments-slider .et_pb_gallery_items { --kc-n: 6; --kc-gap: 24px; display: flex !important; gap: var(--kc-gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.kc-moments-slider .et_pb_gallery_items::-webkit-scrollbar { display: none; }
.kc-moments-slider .et_pb_gallery_item { flex: 0 0 calc((100% - (var(--kc-n) - 1) * var(--kc-gap)) / var(--kc-n)); scroll-snap-align: start; }
.kc-slide-btn { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(4, 20, 43, .25); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.kc-slide-btn svg { width: 22px; height: 22px; fill: none; stroke: #1541B5; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.kc-slide-btn:hover { background: #F6F3EC; }
.kc-slide-btn:focus-visible { outline: 2px solid #1541B5; outline-offset: 2px; }
.kc-slide-prev { left: -22px; }
.kc-slide-next { right: -22px; }
.kc-slide-btn[disabled] { opacity: 0; pointer-events: none; }
@media (max-width: 980px) { .kc-moments-slider .et_pb_gallery_items { --kc-n: 3; --kc-gap: 16px; } }
@media (max-width: 767px) {
  .kc-moments-slider .et_pb_gallery_items { --kc-n: 2; --kc-gap: 10px; }
  .kc-slide-btn { width: 36px; height: 36px; margin-top: -18px; }
  .kc-slide-prev { left: 6px; }
  .kc-slide-next { right: 6px; }
}