/* Eagle Resorts RV Park — off-platform robustness overrides.
 * NOT part of the original Webflow export. Loaded AFTER the Webflow stylesheets so
 * the original design stays pristine; this only hardens behavior that Webflow drove
 * via runtime JS (IX2) and that can be timing-fragile when self-hosted.
 */

/* Mobile nav hamburger <-> close-X swap.
 * In the export both icons are `display:flex` and the swap is driven entirely by
 * Webflow IX2; if IX2 is slow/absent both (or the wrong) icon can show. Key the
 * swap on `.w--open` (toggled by the core Webflow nav, independent of IX2) so it is
 * always correct. Scoped to the breakpoint where the menu collapses (<=991px). */
@media screen and (max-width: 991px) {
  .navbar__menu-button .navbar__hamburguer-icon { display: flex !important; }
  .navbar__menu-button .navbar__close-icon-wrap { display: none !important; }
  .navbar__menu-button.w--open .navbar__hamburguer-icon { display: none !important; }
  .navbar__menu-button.w--open .navbar__close-icon-wrap { display: flex !important; }
}

/* Gallery pagination (vanilla replacement for Finsweet CMS-load) */
.w-pagination-wrapper .is-disabled { opacity: .4; pointer-events: none; cursor: default; }
.pagination__count { align-self: center; font-weight: 600; opacity: .85; padding: 0 4px; }

/* Vertically center the desktop navbar links (and align logo/buttons on the cross axis) */
@media screen and (min-width: 992px) {
  .navbar__wrap { align-items: center; }
  .navbar__nav, .nav__wrap, .nav__links, .nav__buttons { align-items: center; }
}

/* ALTCHA widget — make its verification text clearly legible on the light form card */
altcha-widget {
  --altcha-color-base: #ffffff;
  --altcha-color-text: #1a1000;
  --altcha-color-border: rgba(0, 0, 0, .28);
  --altcha-color-border-focus: #cf6a00;
  --altcha-max-width: 100%;
  display: block;
  margin: 0 0 14px;
  font-size: 14px;
}

/* Brand eyebrow contrast: deepen the amber just enough to pass WCAG large-text (3:1)
   on the light sections while staying strong on the dark sections. Leaves the
   white-on-dark eyebrow variant untouched. */
.text-highlighted:not(.text-white) { color: #cf6a00; }

/* ============================================================
   SELF-HOSTED REVIEWS (er-*) — replaces the Elfsight embed.
   Cards are built at generate time from _data/reviews.json.

   Copied from the site's REAL card components, not invented:
     · .faqs__item — the site's text-only card: #1a1000 fill,
       white text, 10px radius, 2px rgba(0,0,0,.14) border,
       16px/24px padding, NO shadow.
     · .service-boxes__item — content card: 10px radius, Castoro
       20px/600 title, Montserrat 18px/500 text, 30px/20px grid gap.
   So: dark cards, white type, tight 10px radius, flat — the site
   uses no drop shadows and no pale bordered cards anywhere.

   Two backgrounds: the reviews page sits on the cream body
   (#ffe7cf) and takes the dark card; the teaser sits inside
   .carousel-reviews, which is itself #1a1000, so cards there flip
   to the site's --light-red cream or they vanish into the panel.
   Avatars are EAGER — a lazy 44px avatar never trips the loader.
   ============================================================ */
.er-reviews { max-width: 1100px; margin: 0 auto; text-align: left; }

.er-reviews-agg {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 14px; margin-bottom: 32px;
}
.er-stars { color: var(--color--secondary); font-size: 18px; letter-spacing: 2px; line-height: 1; }
.er-reviews-agg .er-stars { font-size: 26px; }
.er-reviews-agg-text {
  font-family: Castoro, sans-serif;
  color: var(--color--primary); font-size: 20px; font-weight: 600;
}
.er-reviews-agg-text strong { color: var(--color--primary); font-weight: 600; }

.er-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 20px; }

/* the site's text card, .faqs__item */
.er-review-card {
  display: flex; flex-direction: column; gap: 14px;
  padding: 24px;
  background-color: var(--color--primary);
  color: var(--white);
  border: 2px solid rgba(0, 0, 0, .14);
  border-radius: 10px;
  box-shadow: none;
}
.er-review-card[hidden] { display: none; }
.er-review-head { display: flex; align-items: center; gap: 12px; }
.er-review-avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: Castoro, sans-serif;
  background-color: var(--color--secondary);
  color: var(--color--primary); font-weight: 700; font-size: 16px;
}
.er-review-avatar--img { object-fit: cover; }
.er-review-who { display: flex; flex-direction: column; min-width: 0; }
/* author = .service-boxes__title */
.er-review-author {
  font-family: Castoro, sans-serif;
  color: var(--white); font-size: 20px; font-weight: 600; line-height: 1.219;
}
.er-review-date { color: var(--light-red); font-size: 14px; opacity: .8; }
/* body copy = .service-boxes__text scale */
.er-review-text {
  margin: 0; font-family: Montserrat, sans-serif;
  color: var(--light-red); font-size: 18px; font-weight: 500; line-height: 27px;
  display: -webkit-box; -webkit-line-clamp: 8; line-clamp: 8;
  -webkit-box-orient: vertical; overflow: hidden;
}
.er-review-source {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto;
  font-family: Montserrat, sans-serif;
  color: var(--color--secondary); font-size: 14px; font-weight: 500; text-decoration: none;
}
a.er-review-source:hover { color: var(--white); text-decoration: underline; }
.er-gicon, .er-fbicon { width: 18px; height: 18px; flex: none; display: inline-block; }
.er-gicon { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45.12 24.5c0-1.56-.14-3.06-.4-4.5H24v8.51h11.84c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.11c4.16-3.83 6.56-9.47 6.56-16.17z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.94 0 10.92-1.97 14.56-5.33l-7.11-5.52c-1.97 1.32-4.49 2.1-7.45 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.69 28.18C11.25 26.86 11 25.45 11 24s.25-2.86.69-4.18v-5.7H4.34C2.85 17.09 2 20.45 2 24s.85 6.91 2.34 9.88l7.35-5.7z'/%3E%3Cpath fill='%23EA4335' d='M24 10.75c3.23 0 6.13 1.11 8.41 3.29l6.31-6.31C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.12l7.35 5.7c1.73-5.2 6.58-9.07 12.31-9.07z'/%3E%3C/svg%3E") center/contain no-repeat; }
.er-fbicon { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231877F2' d='M24 12a12 12 0 1 0-13.88 11.85v-8.38H7.08V12h3.04V9.36c0-3 1.79-4.67 4.53-4.67 1.31 0 2.68.24 2.68.24v2.95h-1.51c-1.49 0-1.95.92-1.95 1.87V12h3.32l-.53 3.47h-2.79v8.38A12 12 0 0 0 24 12z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* pagination = .button, exactly */
.er-pg { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 34px; }
.er-pg[hidden] { display: none; }
.er-pg-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 46px; padding: 0 14px;
  border: 3px solid var(--color--secondary);
  background-color: var(--color--primary);
  color: var(--white);
  border-radius: 10px;
  font-family: Castoro, sans-serif; font-size: 16px; font-weight: 700; line-height: 1;
  cursor: pointer; transition: all .5s;
}
button.er-pg-link:not(.er-pg-current):hover {
  background-color: var(--color--secondary); color: var(--color--primary);
}
.er-pg-current { background-color: var(--color--secondary); color: var(--color--primary); cursor: default; }
.er-pg-gap { color: var(--color--primary); font-weight: 700; padding: 0 2px; }
.er-reviews-more { text-align: center; margin: 26px 0 0; font-family: Montserrat, sans-serif; color: var(--color--primary); font-size: 16px; }
.er-reviews-more a { font-family: Castoro, sans-serif; color: #8f4700; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.er-reviews-more a:hover { color: var(--color--primary); }

.er-reviews--teaser .er-review-text { -webkit-line-clamp: 5; line-clamp: 5; }

/* Inside .carousel-reviews the panel is already #1a1000, so a dark card would vanish
   into it. Flip to the site's cream surface with dark type. */
.carousel-reviews .er-review-card {
  background-color: var(--light-red);
  color: var(--color--primary);
  border-color: rgba(0, 0, 0, .14);
}
.carousel-reviews .er-review-author { color: var(--color--primary); }
.carousel-reviews .er-review-text { color: #2a2118; }
.carousel-reviews .er-review-date { color: #6b5a45; opacity: 1; }
.carousel-reviews .er-review-source { color: var(--light-brown); }
.carousel-reviews a.er-review-source:hover { color: var(--color--primary); }
.carousel-reviews .er-review-avatar { background-color: var(--color--primary); color: var(--color--secondary); }
.carousel-reviews .er-reviews-agg-text,
.carousel-reviews .er-reviews-agg-text strong { color: var(--white); }
.carousel-reviews .er-reviews-more { color: var(--light-red); }
.carousel-reviews .er-reviews-more a { color: var(--color--secondary); }
.carousel-reviews .er-reviews-more a:hover { color: var(--white); }

@media (max-width: 991px) {
  .er-reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .er-reviews--teaser .er-review-card:nth-child(3) { display: none; }
}
@media (max-width: 640px) {
  .er-reviews-grid { grid-template-columns: 1fr; }
  .er-reviews--teaser .er-review-card:nth-child(3) { display: flex; }
  .er-reviews-agg-text { font-size: 18px; }
  .er-review-text { font-size: 17px; line-height: 25px; }
}
