/* Hotel Hilton Inn - additive styles on top of the existing theme (no layout overrides) */

/* ============================================================
   0z. Room detail gallery - a small dependency-free image
   viewer, replacing the theme's old Owl Carousel v1 setup which
   rendered blank on this page (fade + singleItem mode never
   resolved a height, and the thumbs never wired themselves up).
   ============================================================ */
.hh-room-gallery { margin-top: 30px; }
.hh-room-gallery-main {
    position: relative; height: 480px; overflow: hidden; border-radius: 4px; background: #f2ede4;
}
.hh-room-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hh-room-gallery-main h6 {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
    background: rgba(35,35,35,0.6); color: #fff; font-size: 13px; padding: 15px 20px;
}
.hh-room-gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%; border: none;
    background: rgba(255,255,255,0.85); color: #232323; font-size: 15px;
    cursor: pointer; transition: background .2s ease, color .2s ease;
    display: flex; align-items: center; justify-content: center;
}
.hh-room-gallery-nav:hover { background: #e1bd85; color: #fff; }
.hh-room-gallery-nav.prev { left: 16px; }
.hh-room-gallery-nav.next { right: 16px; }

.hh-room-gallery-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.hh-room-gallery-thumbs img {
    width: calc(14.28% - 9px); height: 74px; object-fit: cover; border-radius: 3px;
    cursor: pointer; opacity: .65; border: 2px solid transparent; transition: opacity .2s ease, border-color .2s ease;
}
.hh-room-gallery-thumbs img:hover { opacity: 1; }
.hh-room-gallery-thumbs img.active { opacity: 1; border-color: #e1bd85; }

@media (max-width: 767px) {
    .hh-room-gallery-main { height: 280px; }
    .hh-room-gallery-thumbs img { width: calc(25% - 8px); height: 60px; }
}

/* ============================================================
   0a. Hero / banner slider - extra polish layered on top of the
   existing Revolution Slider markup, without touching anything
   the plugin itself controls (no transforms on its own elements).
   ============================================================ */
.section-slider { position: relative; }

/* Full-hero tint so the "Welcome To / Hotel Hilton Inn" caption stays
   crisp and readable no matter how bright or busy the slide photo is,
   without flattening the image into a solid dark box. */
.hero-overlay {
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8,6,4,.42) 0%, rgba(8,6,4,.52) 32%, rgba(8,6,4,.54) 62%, rgba(8,6,4,.38) 100%);
}

.hero-bottom-fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
    background: linear-gradient(to top, rgba(20,14,8,0.6), rgba(20,14,8,0));
    pointer-events: none;
    z-index: 5;
}

.hero-scroll-cue {
    position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 6;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    color: #fff; text-decoration: none;
    font-family: 'Montserrat', Arial, sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
    opacity: 0.85;
}
.hero-scroll-cue span.line {
    width: 1px; height: 26px; background: rgba(255,255,255,0.7);
    position: relative; overflow: hidden;
}
.hero-scroll-cue span.line::after {
    content: ''; position: absolute; left: 0; top: -100%; width: 100%; height: 100%;
    background: #d8b25c;
    animation: hh-scroll-cue 1.8s ease-in-out infinite;
}
@keyframes hh-scroll-cue {
    0% { top: -100%; }
    60% { top: 100%; }
    100% { top: 100%; }
}

.slider-caption { text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 10px 34px rgba(0,0,0,.45); }
.slider-caption-sub { text-shadow: 0 2px 10px rgba(0,0,0,.55); }

.awe-btn-slider {
    box-shadow: 0 0 0 0 rgba(216,178,92,0.55);
    animation: hh-btn-pulse 2.6s ease-out infinite;
}
.awe-btn-slider:hover { animation: none; }
@keyframes hh-btn-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(216,178,92,0.5); }
    70%  { box-shadow: 0 0 0 14px rgba(216,178,92,0); }
    100% { box-shadow: 0 0 0 0 rgba(216,178,92,0); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll-cue span.line::after,
    .awe-btn-slider { animation: none; }
}

/* ============================================================
   0. Real hotel logo lockup (mark image + text), used in the
   header (dark mark on light bg) and footer (mark flipped to
   white via filter, since the source artwork is black line-art).
   ============================================================ */
.site-logo { display: inline-flex; align-items: center; gap: 12px; }
.site-logo-mark { height: 52px; width: auto; display: block; }

/* The theme's header_top is transparent by design (it expected a
   dark hero image directly behind it); with real photos of varying
   brightness that made the address/phone text unreadable on some
   pages. Give it a solid, always-legible background instead. */
.header_top { background: #1c1712 !important; }

/* The theme caps this image at max-height:53px (40px on a mobile
   breakpoint) - a plain height override is not enough to grow it
   since max-height always wins when it's the smaller of the two, so
   every rule below restates max-height/max-width to match. */
.header_logo { display: flex; align-items: center; min-height: 108px; }
.site-logo-mark-only.site-logo .site-logo-mark {
    height: 96px !important; max-height: 96px !important;
    width: auto !important; max-width: none !important;
}

.footer-logo .site-logo-mark {
    height: 132px !important; max-height: 132px !important;
    width: auto !important; max-width: none !important;
    filter: brightness(0) invert(1);
}

@media (max-width: 991px) {
    .header_logo { min-height: 60px; }
    .site-logo-mark-only.site-logo .site-logo-mark { height: 52px !important; max-height: 52px !important; }
    .footer-logo .site-logo-mark { height: 92px !important; max-height: 92px !important; }
}

/* ============================================================
   1. Consistent image heights across dynamic cards/grids
   (real photos come in different aspect ratios; the theme's
   original CSS only ever had width:100% with no height, so
   cards became uneven and pages jumped while images loaded)
   ============================================================ */
.accomd-modations-room .img { height: 230px; overflow: hidden; }
.accomd-modations-room .img img { width: 100%; height: 230px; object-fit: cover; }

.room_item-1 .img { height: 260px; overflow: hidden; }
.room_item-1 .img img { width: 100%; height: 260px; object-fit: cover; }

.room-compare_item .img { height: 190px; overflow: hidden; }
.room-compare_item .img img { width: 100%; height: 190px; object-fit: cover; }

.our-best .img { height: 380px; overflow: hidden; }
.our-best .img img { width: 100%; height: 380px; object-fit: cover; }

/* Keep the amenity list rows an even height and the icon centred
   next to the label, whether the text wraps to one line or two. */
/* The theme's ul{display:table} shrinks to fit its content instead of
   filling the column, which starves the 50%-width <li> items of real
   space and forces awkward text wrapping. Give it an explicit width
   so the percentages resolve against the real column width. */
.our-best .text ul { width: 100%; }
.our-best .text ul li { min-height: 42px; }

.home-about .img { height: 380px; overflow: hidden; }
.home-about .img img { width: 100%; height: 380px; object-fit: cover; }

@media (max-width: 767px) {
    .our-best .img, .our-best .img img,
    .home-about .img, .home-about .img img { height: 260px; }
}

/* A reliable dark scrim for any full-bleed photo background, so
   white text (testimonials, etc.) always stays legible regardless
   of how busy or bright the underlying photo is. */
.hh-dark-bg { position: relative; }
.hh-dark-bg::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(rgba(15,10,6,0.72), rgba(15,10,6,0.72));
    z-index: 0;
}
.hh-dark-bg > * { position: relative; z-index: 1; }

.about-item .img { overflow: hidden; }
.about-item .img img { width: 100%; height: 360px; object-fit: cover; }
.about-item.about-right .img img { height: 320px; }

/* .section-check-availability is float:left in the theme's own CSS,
   and nothing after it clears that float - on desktop the check-bar
   is short enough that this goes unnoticed, but on mobile the form
   fields stack tall and the next section (Rooms & Rates) renders
   underneath it, hiding the heading entirely. */
.section-accomd { clear: both; }

.section-gallery .item-isotope img { width: 100%; height: 210px; object-fit: cover; }

.widget_deal .item .img { height: 130px; overflow: hidden; }
.widget_deal .item .img img { width: 100%; height: 130px; object-fit: cover; }

.widget_recent_entries .img { width: 70px; height: 70px; overflow: hidden; flex-shrink: 0; }
.widget_recent_entries .img img { width: 70px; height: 70px; object-fit: cover; }

.news-item .img { height: 200px; overflow: hidden; }
.news-item .img img { width: 100%; height: 200px; object-fit: cover; }

.event-item .img { overflow: hidden; }
.event-item .img img { width: 100%; object-fit: cover; }
.event-slide .event-item .img { height: 260px; }
.event-slide .event-item .img img { height: 260px; }
.col-xs-6 > .event-item .img { height: 200px; }
.col-xs-6 > .event-item .img img { height: 200px; }

/* Reduce layout shift while large photos decode (logos/icons/svgs excluded -
   they rely on a transparent background to sit on light or dark sections) */
img:not([src$=".svg"]):not([src*="/logo"]):not([src*="icon"]):not([src*="favicon"]) {
    background-color: #f2ede4;
}

/* ============================================================
   2. Sub-banners: reserve height up front so scrolling past
   them doesn't jump once the (larger) real photos finish
   decoding. Also clear the fixed header properly - the header
   is position:fixed and its logo now runs taller, so the
   theme's original 80px padding-top left banner text pinned
   right against it.
   ============================================================ */
.section-sub-banner {
    min-height: 480px;
    padding-top: 215px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.section-sub-banner .sub-banner { width: 100%; }
.section-slider, #slider-revolution { min-height: 640px; }

@media (max-width: 767px) {
    .section-sub-banner { min-height: 320px; padding-top: 145px; }
}

/* ============================================================
   3. Footer polish - wider logo lockup + short about text +
   a simple "latest updates" list to match the Quick
   Links / Contact Us layout style requested.
   ============================================================ */
.widget-logo .img { max-width: 230px; margin-right: 0; display: block; margin-bottom: 15px; }
.widget_logo .widget-logo { text-align: left; }
.footer-about-text { line-height: 1.7em; }

.footer-post-list { list-style: none; padding: 0; margin: 0; }
.footer-post-list li { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-post-list li:first-child { padding-top: 0; }
.footer-post-list li a { display: block; color: #fff; font-size: 13px; line-height: 1.5em; transition: color .3s ease; }
.footer-post-list li a:hover { color: #e1bd85; }
.footer-post-list li span { display: block; color: #acacac; font-size: 11px; margin-top: 4px; }

/* The theme only colours footer widget text for the exact class
   .widget_tripadvisor .tripadvisor p - our "Contact Us" hours widget
   reuses that same block but under our own class name, so restate it. */
.widget_hours .tripadvisor p { color: #acacac; font-size: 13.75px; margin-bottom: 12px; }
.widget_hours .tripadvisor p i { color: #e1bd85; margin-right: 8px; width: 16px; display: inline-block; text-align: center; }
.widget_hours .tripadvisor p strong { color: #fff; }
.widget_hours .tripadvisor p a { color: #acacac; }
.widget_hours .tripadvisor p a:hover { color: #e1bd85; }

/* ============================================================
   4. Reservation content panel - readable form controls
   (the theme's .awe-select / .awe-calendar are only styled
   for dark header bars or the sidebar widgets; we reuse them
   in the light reservation content panel too).
   ============================================================ */
.reservation_content .check_availability-field .bootstrap-select.awe-select .dropdown-toggle,
.reservation_content .check_availability-field .awe-calendar-wrapper .awe-calendar {
    background-color: #fff;
    border: 2px solid #e0e0e0 !important;
    color: #333;
}
.reservation_content .check_availability-field .bootstrap-select.awe-select .dropdown-toggle .filter-option,
.reservation_content .check_availability-field .bootstrap-select.awe-select .dropdown-toggle .caret {
    color: #333 !important;
}
.reservation_content .check_availability-field label {
    color: #232323;
}

/* ============================================================
   5. Attractive contact form - icon-prefixed fields
   ============================================================ */
.contact-form .field-group { position: relative; margin-top: 20px; }
.contact-form .field-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #b9b9b9; font-size: 15px; pointer-events: none; transition: color .3s ease; }
.contact-form .field-group .field-text { margin-top: 0; padding-left: 42px; }
.contact-form .field-group .field-textarea { padding-left: 42px; padding-top: 12px; }
.contact-form .field-group textarea ~ i { top: 26px; transform: none; }
.contact-form .field-text:focus ~ i,
.contact-form .field-group:focus-within i { color: #e1bd85; }
.contact-form .awe-btn-13 { letter-spacing: 1px; }

/* ============================================================
   6. Gentle hover lift + scroll-reveal animation
   ============================================================ */
.accomd-modations-room,
.room_item-1,
.room-compare_item,
.news-item,
.gallery_item,
.team_item,
.about-item {
    transition: transform .35s ease, box-shadow .35s ease;
}
.accomd-modations-room:hover,
.room_item-1:hover,
.room-compare_item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(30,20,10,0.14);
}

/* Safe by default: content stays fully visible unless JS confirms it is
   ready to animate it in (so a slow/blocked/broken script never hides
   real content - it only ever adds a subtle entrance effect). */
html.reveal-ready .reveal-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s ease;
}
html.reveal-ready .reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
html.reveal-ready .reveal-fade {
    opacity: 0;
    transition: opacity .8s ease;
}
html.reveal-ready .reveal-fade.is-visible {
    opacity: 1;
}

html.reveal-ready .reveal-left,
html.reveal-ready .reveal-right,
html.reveal-ready .reveal-scale {
    opacity: 0;
    transition: opacity .75s ease var(--reveal-delay, 0ms), transform .75s cubic-bezier(.22,.61,.36,1) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}
html.reveal-ready .reveal-left { transform: translateX(-30px); }
html.reveal-ready .reveal-right { transform: translateX(30px); }
html.reveal-ready .reveal-scale { transform: scale(.965); }
html.reveal-ready .reveal-left.is-visible,
html.reveal-ready .reveal-right.is-visible,
html.reveal-ready .reveal-scale.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal-up, .reveal-fade { opacity: 1; transform: none; transition: none; }
}

/* Smoother momentum scrolling on touch devices */
html { scroll-behavior: smooth; }

/* ============================================================
   7. About page add-ons: Amenities grid + Nearby Attractions
   ============================================================ */
.section-amenities { padding: 80px 0; }
.feature-item { text-align: center; margin-top: 40px; padding: 0 15px; }
.feature-item .icon {
    width: 78px; height: 78px; line-height: 78px; margin: 0 auto 18px;
    border: 2px solid #e1bd85; border-radius: 50%; font-size: 30px; color: #e1bd85;
    transition: background-color .3s ease, color .3s ease;
}
.feature-item:hover .icon { background-color: #e1bd85; color: #fff; }
.feature-item h4 { font-family: 'Montserrat'; font-size: 15px; text-transform: uppercase; margin: 0; color: #232323; }

.section-nearby { padding: 80px 0; }
.nearby-list { list-style: none; padding: 0; margin: 40px 0 0; }
.nearby-list li {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 0; border-bottom: 1px solid #ececec; font-family: 'Montserrat'; font-size: 15px; color: #333;
}
.nearby-list li:first-child { border-top: 1px solid #ececec; }
.nearby-list li i { color: #e1bd85; margin-right: 12px; font-size: 16px; }
.nearby-list li span.distance { color: #898989; font-size: 13px; text-transform: uppercase; }