/* Emmonlang Resort: overrides on top of the Diamant theme (style.css / plugins.css) */

/* ---- Icon fonts --------------------------------------------------------
   The theme expects Font Awesome 6 Pro webfonts in /fonts. We map the Pro
   family names onto the free Font Awesome 6 files instead, so every icon
   used on this page renders without the Pro license files. */
@font-face { font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: 100; font-display: block; src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2") format("woff2"); }
@font-face { font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: 300; font-display: block; src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2") format("woff2"); }
@font-face { font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: 400; font-display: block; src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-regular-400.woff2") format("woff2"); }
@font-face { font-family: "Font Awesome 6 Pro"; font-style: normal; font-weight: 500 900; font-display: block; src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2") format("woff2"); }
@font-face { font-family: "Font Awesome 5 Pro"; font-style: normal; font-weight: 100 900; font-display: block; src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2") format("woff2"); }
@font-face { font-family: "Font Awesome 6 Brands"; font-style: normal; font-weight: 400; font-display: block; src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-brands-400.woff2") format("woff2"); }
/* lightGallery UI icons (close button etc.) */
@font-face { font-family: "lg"; font-style: normal; font-weight: normal; src: url("https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/fonts/lg.woff") format("woff"), url("https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/fonts/lg.ttf") format("truetype"); }
.lg-outer .lg-item { background-image: none; }

/* Decorative world-map textures from the original theme package are not bundled */
.section-dec, .map-dec2, .sc-dec, .sc-dec2, .sc-dec3 { background-image: none !important; }

/* ---- Page loader: resort logo instead of the theme's spinning gem --------- */
.loader { width: 200px; height: auto; line-height: normal; margin: 0; transform: translate(-50%, -50%); }
.loader img { display: block; width: 100%; height: auto; animation: loader-breathe 1.8s ease-in-out infinite; }
@keyframes loader-breathe {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .loader img { animation: none; } }
@media only screen and (max-width: 640px) { .loader { width: 160px; } }

/* ---- Logo ------------------------------------------------------------- */
/* Stacked mark + wordmark: use most of the 80px bar so the name stays legible */
.logo-holder img { height: 66px; width: auto; margin-top: -33px; }
/* Footer bar was a fixed 80px with overflow hidden, which clipped the stacked
   logo on its text baseline. Let the bar grow and centre its three parts. */
.footer-logo { height: auto; }
.footer-logo img { display: block; height: 76px; width: auto; }
.designed-by { display: block; margin-top: 2px; font-size: 11px; letter-spacing: .5px; text-transform: none; color: rgba(255, 255, 255, .55); }
.designed-by a { color: var(--main-color); }
.designed-by a:hover { text-decoration: underline; }
@media only screen and (min-width: 1069px) {
  .footer-bottom .copyright { text-align: center; }
  .footer-bottom { height: auto; line-height: 30px; padding: 16px 0; }
  .footer-bottom .container { display: flex; align-items: center; justify-content: space-between; }
  .footer-bottom .container::before, .footer-bottom .container::after { display: none; }
}

/* ---- Header ----------------------------------------------------------- */
/* Room names are long: widen the dropdown and keep each name on one line */
.nav-holder nav li ul { min-width: 270px; }
.nav-holder nav li ul a { white-space: nowrap; }
.serach-header-btn { cursor: pointer; }
.header-top_contacts a span { margin-right: 4px; }

/* ---- Hero ------------------------------------------------------------- */
/* The theme styles only h2 in hero titles; the first slide uses h1 for SEO. */
.hero-title-container .section-title h1 {
  color: #fff;
  font-family: var(--main-font);
  font-size: 4.8em;
  font-weight: 400;
  line-height: 1.05;
  text-transform: uppercase;
  padding: 30px 0 20px;
  margin: 0;
}
.hero-wrap .section-title h1, .hero-wrap .section-title h2 { text-wrap: balance; }
/* Slider titles on the other slides (theme default 6.7em is too large) */
.hero-title-container .section-title h2 { font-size: 5.6em; }
/* Inner-page parallax titles (h1 instead of the theme's h2) */
.content-section.parallax-section.hero-section .section-title h1 {
  color: #fff;
  font-family: var(--main-font);
  font-size: 4.5em;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
  padding: 10px 0 0;
}
@media only screen and (max-width: 1068px) {
  .hero-title-container .section-title h1 { font-size: 3.6em; }
  .hero-title-container .section-title h2 { font-size: 4.0em; }
  .content-section.parallax-section.hero-section .section-title h1 { font-size: 3.4em; }
}
@media only screen and (max-width: 640px) {
  .hero-title-container .section-title h1 { font-size: 2.2em; padding: 10px 0; }
  .hero-title-container .section-title h2 { font-size: 3.1em; }
  .content-section.parallax-section.hero-section .section-title h1 { font-size: 2.5em; }
}

/* ---- Section-closing CTA button ---------------------------------------- */
/* A centred button already ends the section, so the full 100px bottom padding
   left a large empty band before the next (dark) section. */
.content-section:has(> .container > .dwonload_btn:last-child) { padding-bottom: 50px; }
.content-section > .container > .dwonload_btn:last-child { margin-top: 40px; }
@media only screen and (max-width: 1068px) {
  .content-section:has(> .container > .dwonload_btn:last-child) { padding-bottom: 40px; }
}

/* ---- Wide section CTA -------------------------------------------------- */
.wide-cta { float: right; margin-top: 10px; }
@media only screen and (max-width: 1068px) { .wide-cta { float: none; } }

/* ---- Rooms list -------------------------------------------------------- */
.rates-note { text-align: center; color: #878c9f; font-size: 13px; margin: 10px 0 0; float: left; width: 100%; }
.rates-note a { color: var(--main-color); }

/* Theme draws a light grey panel poking out behind the bottom-right of these
   image blocks (About intro, Restaurant slider); it read as a stray box. */
.image-collge-wrap:before { display: none; }
/* Restaurant slider mixes 3:2 and 4:3 photos; the slider took the tallest
   height, so the 3:2 slides left an empty strip and the dots hung below the
   photo. One crop for all slides keeps the dots on the image. */
.image-collge-wrap .single-slider .swiper-slide img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; }

/* ---- About intro photo ------------------------------------------------- */
/* The aerial shot is a tall portrait; at full column width it ran far below the
   text. Crop it to a 5:4 frame centred on the pool. */
.image-collge-wrap .main-iamge img { width: 100%; aspect-ratio: 5 / 4; height: auto; object-fit: cover; object-position: center 62%; display: block; }

/* ---- Room page booking box -------------------------------------------- */
.book-box-list { list-style: none; padding: 0; margin: 10px 0 20px; text-align: left; }
.book-box-list li { font-size: 13px; color: rgba(255,255,255,.8); padding: 6px 0; border-bottom: 1px dashed rgba(255,255,255,.12); }
.book-box-list i { color: var(--main-color); margin-right: 8px; }
.book-box .bs_btn { display: block; width: 100%; text-align: center; color: #fff; line-height: 60px; font-size: 13px; letter-spacing: 1px; }
.book-box-call { display: block; text-align: center; margin-top: 16px; font-size: 13px; font-weight: 600; color: #fff; }
.book-box-call i { color: var(--main-color); margin-right: 6px; }

/* ---- Gallery filters --------------------------------------------------- */
.gallery-filters { text-align: center; margin: 0 0 30px; float: left; width: 100%; position: relative; z-index: 5; }
.gallery-filters a {
  display: inline-block;
  margin: 0 4px 8px;
  padding: 10px 22px;
  border: 1px solid #e5e5e5;
  background: #fff;
  color: #272535;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all .3s;
}
.gallery-filters a:hover { border-color: var(--main-color); color: var(--main-color); }
.gallery-filters a.gallery-filter-active { background: #272535; border-color: #272535; color: var(--main-color); }
.gallery-filters + .dec-container { clear: both; margin-top: 10px; }
/* Gallery: identical 4:3 tiles so rows line up; portraits are centre-cropped (full photo opens in the lightbox) */
.photo-grid .grid-item-holder { overflow: hidden; border-radius: 10px; }
.photo-grid .grid-item-holder img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: center; display: block; }

/* Rooms page grid: equal-height cards in centred rows (no masonry), so the
   last row of two sits centred instead of leaving a hole under the first card. */
.rooms-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.rooms-grid .gallery-item { float: none; display: flex; flex-direction: column; }
.rooms-grid .grid-item-details { flex: 1; display: flex; flex-direction: column; }
/* No prices on cards: the View Details button sits in the flow, pinned to the card bottom */
.rooms-grid .room-card-details { margin-bottom: 24px; }
.rooms-grid .gid_link { position: relative; bottom: auto; right: auto; align-self: flex-start; margin-top: auto; }

/* Room cards: same 4:3 crop for every photo so cards line up */
.rooms-grid .grid-item-holder img,
.item-related_img img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; }
@media only screen and (max-width: 640px) {
  .gallery-filters a { padding: 8px 12px; font-size: 11px; margin: 0 2px 6px; }
}

/* ---- Photo slider arrows ----------------------------------------------- */
/* Frosted glass instead of a solid disc, so the photo shows through softly */
.slider-button {
  background: rgba(39, 37, 53, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .25);
}
.slider-button:hover { background: rgba(39, 37, 53, .7); }
@media only screen and (max-width: 640px) {
  .slider-button { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
}

/* ---- Restaurant: Events & Catering -------------------------------------- */
/* Centred intro over four matching feature cards (was a lopsided text/list split) */
.events-intro { max-width: 760px; margin: 0 auto 40px; text-align: center; font-size: 15px; line-height: 1.9; }
.events-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.events-feature {
  padding: 34px 22px 28px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  text-align: center;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.events-feature:hover { transform: translateY(-4px); border-color: var(--main-color); box-shadow: 0 10px 24px rgba(37, 44, 65, .08); }
.events-feature_icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; margin-bottom: 18px;
  border-radius: 50%;
  background: #272535; color: var(--main-color); font-size: 22px;
  box-shadow: 0 0 0 6px rgba(196, 166, 118, .15);
}
.events-feature h5 { font-family: var(--main-font); font-size: 1.6em; font-weight: 400; color: #272535; margin-bottom: 8px; }
.events-feature p { text-align: center; font-size: 13px; line-height: 1.7; margin: 0; }
@media only screen and (max-width: 1068px) {
  .events-features { grid-template-columns: repeat(2, 1fr); }
}
@media only screen and (max-width: 640px) {
  .events-features { grid-template-columns: 1fr; gap: 14px; }
  .events-feature { padding: 24px 18px 22px; }
  .events-feature_icon { width: 54px; height: 54px; font-size: 19px; margin-bottom: 14px; }
  .events-intro { margin-bottom: 28px; }
}

/* ---- Restaurant hover panels ------------------------------------------ */
/* Keep panel titles on one line so they never run into the hours box below */
.fw-aminit-item-container h3 { font-size: 2.8em; white-space: nowrap; }
@media only screen and (min-width: 1069px) {
  .fw-aminit-item-container { top: 42%; }
}
@media only screen and (max-width: 1068px) {
  .fw-aminit-item-container h3 { font-size: 2.4em; }
}

/* ---- FAQ -------------------------------------------------------------- */
.faq-list details { border: 1px solid #eee; background: #fff; margin-bottom: 10px; text-align: left; }
.faq-list summary { cursor: pointer; padding: 16px 44px 16px 18px; font-weight: 600; font-size: 14px; color: #272535; list-style: none; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--main-color); font-size: 20px; transition: transform .2s; }
.faq-list details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-list details p { padding: 0 18px 16px; margin: 0; font-size: 13px; }
.faq-list details a { color: var(--main-color); }

/* ---- Contact ----------------------------------------------------------- */
.map-contact { margin-top: 0; }
.map-dir-btn { margin-top: 20px; }

/* ---- Rooms carousel ---------------------------------------------------- */
/* The looping carousel counts its cloned slides as extra dots; the arrows are enough */
.rooms-carousel-wrap .fwc_pag2 { display: none; }
/* Legibility: the theme's gradient covers only the bottom half, leaving the
   room title over the bright part of the photo. Taller, darker scrim + shadows. */
.rooms-carousel-item .bg-parallax-wrap-gradien:before {
  height: 85%;
  background: linear-gradient(to bottom, rgba(24, 22, 34, 0) 0%, rgba(24, 22, 34, .55) 35%, rgba(24, 22, 34, .92) 75%, rgba(24, 22, 34, .97) 100%);
}
.rooms-carousel-wrap .swiper-slide-active .bg-parallax-wrap-gradien:before,
.rooms-carousel-wrap .swiper-slide-next .bg-parallax-wrap-gradien:before { opacity: 1; }
.rooms-carousel-item_container h3,
.rooms-carousel-item_container h3 a { text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.rooms-carousel-item_container p {
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}
.rooms-carousel-item_container .room-card-details { border-color: rgba(255, 255, 255, .25); }
/* Alignment: the copy is bottom-anchored, so a two-line name ("Poolside Premium
   Twin Room") pushed its title higher than one-line names on the next card.
   Reserve two lines for every name (text sits on the lower line) and two lines
   for every description, so titles, descriptions and features share baselines. */
@media only screen and (min-width: 1069px) {
  .rooms-carousel-item_container h3 {
    font-size: 2.5em;
    line-height: 1.25;
    min-height: 2.5em;
    display: flex;
    align-items: flex-end;
  }
  .rooms-carousel-item_container p {
    line-height: 1.8;
    min-height: 3.6em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}
.rooms-carousel-item_container .room-card-details li { text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
/* Prev/next arrows: the theme centres them vertically, right over the last
   card's text. Pin them to the bottom-right corner, with the card copy lifted
   clear of them. */
@media only screen and (min-width: 1069px) {
  .rc-controls-wrap { top: auto; bottom: 40px; right: 40px; }
  .rc-button { margin-top: 0; width: 44px; height: 44px; line-height: 44px; margin-left: 16px; }
  .rooms-carousel-item_container { padding-bottom: 100px; }
}

/* ---- Contact / map ---------------------------------------------------- */
.map-container-wrap {
  position: relative;
  width: 100%;
  height: 420px;
  margin-top: 30px;
  border: 10px solid #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .06);
}
.map-container-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.contacts-card-item a { word-break: break-word; }

/* ---- Policies (events carousel re-used) ------------------------------- */
.event-carousel-item p strong { color: var(--main-color); font-weight: 600; }

/* ---- Footer ----------------------------------------------------------- */
.footer-widget-content p a { color: var(--main-color); }
.footer-title-dec { white-space: nowrap; }

@media (max-width: 1064px) {
  .footer-title-dec { font-size: 5em; }
}
@media (max-width: 640px) {
  .logo-holder img { height: 38px; margin-top: -19px; }
  .map-container-wrap { height: 320px; }
  .footer-title-dec { display: none; }
}