/* ------------------------------------------------------------------
   Resort Scenery — the only additions to the base stylesheet.
   Everything the site needs is already in the framework sheet; this
   file adds the four things it has no component for (age gate, cookie
   banner, the 20+ strip, the compliance disclaimer) plus a handful of
   small fixes. Namespaced .rs-* so nothing collides.
   Palette is the framework's own: #05462e, #021a11, #9cba5e, #f18700.
   ------------------------------------------------------------------ */

:root {
  --rs-green: #05462e;
  --rs-ink: #021a11;
  --rs-leaf: #9cba5e;
  --rs-amber: #f18700;
  --rs-line: #e2e2df;
}

/* --- the plaque logo ------------------------------------------------ */
a.logo {
  background-image: url("../images/rs-logo.svg") !important;
  background-size: 152px !important;
}
.fixed a.logo {
  background-image: url("../images/rs-logo.svg") !important;
  background-size: 96px !important;
}

/* --- contact strip and the 20+ badge, above the menu ---------------- */
.rs-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1101;
  height: 38px;
  box-sizing: border-box;
  background: var(--rs-green);
  color: #fff;
  font-size: 13px;
  line-height: 22px;
  padding: 8px 0;
}
nav.main { top: 38px !important; }
.rs-topbar .row { overflow: hidden; }
.rs-topbar a { color: #fff; text-decoration: none; }
.rs-topbar a:hover { color: var(--rs-leaf); }
.rs-topbar ul { list-style: none; margin: 0; padding: 0; float: left; }
.rs-topbar li { display: inline-block; margin: 0 26px 0 0; }
.rs-topbar li i { margin: 0 7px 0 0; color: var(--rs-leaf); }
.rs-r20 {
  float: right;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid rgba(156, 186, 94, .8);
  border-radius: 2px;
  padding: 1px 10px 2px;
  line-height: 18px;
}
@media (max-width: 1100px) { .rs-r20 { display: none; } }
@media (max-width: 767px) {
  .rs-topbar { display: none; }
  nav.main { top: 0 !important; }
}

/* Pages with no header slider start under the fixed bar. The framework
   handles this with .noslider; ours sits 38px lower because of the strip. */
.noslider .mainContent.first > .row:first-child { margin-top: 138px; }
@media (max-width: 767px) {
  .noslider .mainContent.first > .row:first-child { margin-top: 100px; }
}

/* --- header slides, before the slider script measures them ---------- */
.slider .slides > li { display: none; }
.slider .slides > li:first-child { display: block; }

/* The framework centres the slide caption with a fixed -92px margin, which
   assumes a two-line title; a longer one grows downward into the booking
   panel. Centre it on its own height instead, and lift it clear of the
   panel, so the caption cannot collide however long it runs. */
@media only screen and (min-width: 1025px) {
  .index .sliderContent {
    top: 42%;
    margin-top: 0;
    transform: translateY(-50%);
  }
}

/* --- card rows -------------------------------------------------------
   The framework floats .columns, so a row of cards with unequal text
   snags on the tallest one. It already switches these to inline-block at
   narrow widths; we do the same at every width on the two rows that
   carry cards of our own, and crop the card images to one height. */
.index .promotions .row,
section.events .row { font-size: 0; }
.index .promotions .row > .columns,
section.events .row > .columns { font-size: 16px; }
.index .promotions .row > .columns.column4,
section.events .row > .columns.column3,
section.events .row > .columns.column4 {
  float: none;
  display: inline-block;
  vertical-align: top;
}
.eventBlock .eventImage img,
.promo-block picture img,
.promotions .columns.column4 > a picture img {
  width: 100%;
  height: 224px;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .eventBlock .eventImage img,
  .promotions .columns.column4 > a picture img { height: auto; }
}

/* --- statistics, on the framework's own grid ------------------------ */
.rs-stats { background: var(--rs-green); }
.rs-stats h2 { color: #fff; }
.rs-stats .rs-stat { text-align: center; padding: 18px 10px; }
.rs-stats .rs-stat strong {
  display: block;
  font-family: fira-sans, sans-serif;
  font-size: 42px;
  line-height: 48px;
  font-weight: 700;
  color: var(--rs-leaf);
}
.rs-stats .rs-stat span {
  display: block;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #fff;
  margin: 6px 0 0;
}

/* --- the enquiry form, inside the framework's imageBlockContent ----- */
.contactform select {
  padding: 20px;
  border: 1px solid #cccccc4a;
  background: #fff;
  width: 100%;
  margin: 10px 0;
  appearance: none;
  background-image: url("../images/icon-form-dropdown.png");
  background-repeat: no-repeat;
  background-position: right 18px center;
}
.contactform input:not([type=checkbox]):not([type=submit]),
.contactform textarea { margin: 10px 0; border: 1px solid #cccccc4a; }
.contactform .checkbox-container { width: 100%; float: left; margin: 6px 0; }
.contactform .checkbox-container input[type=checkbox] {
  width: auto;
  float: left;
  padding: 0;
  border: none;
  margin: 4px 8px 5px 0;
}
.contactform .checkbox-container label { float: left; width: calc(100% - 24px); font-size: 14px; line-height: 21px; }
.contactform input[type=submit] { clear: both; margin: 16px 0 0; width: auto; }
.rs-hp { position: absolute; left: -9999px; }
.rs-note {
  clear: both;
  padding: 14px 18px;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 23px;
  border-left: 5px solid var(--rs-leaf);
  background: #f7f7f7;
}
.rs-note--bad { border-left-color: #c0392b; }
.rs-form__small { font-size: 13px; color: #6f7d72; }

/* --- age gate -------------------------------------------------------- */
.rs-gate {
  position: fixed;
  inset: 0;
  z-index: 200000;
  background: rgba(2, 26, 17, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.rs-gate[hidden] { display: none; }
.rs-gate__box {
  background: #fff;
  max-width: 560px;
  width: 100%;
  padding: 44px 44px 40px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}
.rs-gate__box img { width: 132px; height: auto; margin: 0 0 18px; }
.rs-gate__box h2 { font-size: 26px; line-height: 34px; }
.rs-gate__box p { font-size: 15px; line-height: 25px; }
.rs-gate__buttons { margin: 26px 0 0; }
.rs-gate__buttons .button { margin: 0 6px 10px; }
.rs-gate__buttons .button.rs-no {
  background: #fff;
  color: var(--rs-green);
  border: 1px solid var(--rs-green);
}

/* --- cookie banner --------------------------------------------------- */
.rs-cookie {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 190000;
  background: #fff;
  box-shadow: 0 -6px 30px rgba(0, 0, 0, .18);
  padding: 24px 0;
}
.rs-cookie[hidden] { display: none; }
.rs-cookie__inner {
  width: 98%;
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}
.rs-cookie__text { flex: 1 1 460px; }
.rs-cookie__text h3 { font-size: 19px; line-height: 26px; margin: 0 0 8px; }
.rs-cookie__text p { font-size: 14px; line-height: 22px; margin: 0; }
.rs-cookie__buttons { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rs-cookie__buttons .button { padding: 16px 22px; }
.rs-cookie__buttons .rs-ghost {
  background: #fff;
  color: var(--rs-green);
  border: 1px solid var(--rs-green);
}
.rs-cookie__buttons .rs-linkbtn {
  background: none;
  color: var(--rs-green);
  text-decoration: underline;
  padding: 16px 4px;
  border: none;
  font-family: inherit;
  font-size: 14px;
}
.rs-cookie__settings { margin: 16px 0 0; }
.rs-cookie__settings label {
  display: block;
  font-size: 14px;
  line-height: 22px;
  margin: 0 0 8px;
  padding: 0 0 0 26px;
  position: relative;
}
.rs-cookie__settings input { position: absolute; left: 0; top: 4px; width: auto; padding: 0; }

/* --- footer disclaimer ----------------------------------------------- */
.rs-disclaimer {
  float: left;
  width: 100%;
  background: var(--rs-ink);
  color: #b9c7bd;
  padding: 40px 0;
  font-size: 13px;
  line-height: 22px;
}
.rs-disclaimer .rs-wrap { width: 98%; max-width: 1280px; margin: 0 auto; }
.rs-disclaimer p { margin: 0 0 14px; }
.rs-disclaimer a { color: var(--rs-leaf); }
.rs-disclaimer__help strong { color: #fff; }
.rs-disclaimer__legal { color: #7e8f84; margin: 0; }

/* --- footer tweaks ---------------------------------------------------- */
.mainFooter .footer-logo { max-width: 190px; height: auto; }
.mainFooter h4 { font-family: fira-sans, sans-serif; color: var(--rs-green); margin: 0 0 14px; font-size: 16px; }
.mainFooter a { color: var(--rs-ink); }
.mainFooter a:hover { color: var(--rs-amber); }
.rs-foot-hours p { margin: 0 0 8px; }
.rs-coords { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #6f7d72; }

/* --- long legal copy sits better a little narrower -------------------- */
.noslider .mainContent.first .alignLeft > p,
.noslider .mainContent.first .alignLeft > ul { max-width: 900px; }

/* --- promo cards: a paragraph after a list must not read as its last item --- */
.promoBlockContent ul + p,
.promoBlockContent p + ul { margin-top: 16px; }

/* --- the distances list on Getting here ------------------------------- */
.rs-distances { list-style: none; padding: 0; margin: 0; max-width: 900px; }
.rs-distances li { padding: 12px 0; border-bottom: 1px solid #e2e6e1; line-height: 24px; }
.rs-distances li:last-child { border-bottom: 0; }
.rs-distances strong { color: var(--rs-green); }