/*
 * Innovick Residence - visual polish layer.
 *
 * Loaded AFTER styles.css. It only refines how the existing site LOOKS: colour, depth, rounding, typography
 * finish, hover/focus feedback. It deliberately never touches content, display, grid/flex tracks, widths,
 * heights, margins or padding, so every section keeps exactly the same details and layout.
 * Delete this file (and its <link>) to get the previous look back.
 */

:root {
    --polish-ink: #173b3a;
    --polish-gold: #f1bf68;
    --polish-ring: rgba(35, 105, 103, 0.55);
    --polish-card-line: rgba(131, 68, 23, 0.1);
    --polish-shadow-1: 0 1px 2px rgba(23, 59, 58, 0.06), 0 6px 18px rgba(23, 59, 58, 0.07);
    --polish-shadow-2: 0 2px 4px rgba(23, 59, 58, 0.06), 0 18px 40px rgba(23, 59, 58, 0.13);
    --polish-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --polish-serif: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ---------- Page finish ---------- */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-tap-highlight-color: rgba(160, 86, 30, 0.14);
}

::selection {
    background: rgba(241, 191, 104, 0.55);
    color: #1f2933;
}

/* One clear, on-brand keyboard focus ring everywhere (inputs keep their own glow). */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--polish-ring);
    outline-offset: 3px;
}

.navbar a:focus-visible,
.navbar button:focus-visible,
.hero a:focus-visible,
.hero button:focus-visible,
.site-footer a:focus-visible,
.subpage-hero a:focus-visible {
    outline-color: var(--polish-gold);
}

/* ---------- Typography: headings ---------- */
#rooms > h2,
#amenities > h2,
#gallery > h2,
.booking-header-area h2,
.section-title-wrap h2,
.video-reviews-block > .section-heading,
.site-container > .section-heading,
.section-content-wrapper > h2,
.about-title,
.contact-title {
    font-family: var(--polish-serif);
    font-weight: 700;
    letter-spacing: -0.012em;
}

#rooms > h2,
#amenities > h2,
#gallery > h2,
.booking-header-area h2,
.section-title-wrap h2,
.video-reviews-block > .section-heading,
.site-container > .section-heading,
.about-title,
.contact-title {
    color: var(--polish-ink);
}

/* A small gold rule under centred section titles that have room for it. It is absolutely positioned, so
   nothing moves. ("Our Rooms" and "Book Your Stay" sit flush against their content and are left without it.) */
#amenities > h2,
#gallery > h2,
.section-title-wrap h2,
.video-reviews-block > .section-heading,
.site-container > .section-heading {
    position: relative;
}

#amenities > h2::after,
#gallery > h2::after,
.section-title-wrap h2::after,
.video-reviews-block > .section-heading::after,
.site-container > .section-heading::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 56px;
    height: 3px;
    margin: 8px 0 0 -28px;
    border-radius: 3px;
    background: linear-gradient(90deg, #a0561e, var(--polish-gold));
    pointer-events: none;
}

.hero-copy h1,
.subpage-hero__title {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 10px 32px rgba(0, 0, 0, 0.42);
}

/* ---------- Buttons ---------- */
.btn,
.hero-btn,
.about-btn,
.nav-book-button,
.contact-whatsapp-btn,
.hub-rate-card__btn,
button[type="submit"] {
    transition: transform 0.22s var(--polish-ease), box-shadow 0.22s var(--polish-ease),
        background-color 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.btn:hover,
.hero-btn:hover,
.about-btn:hover,
.nav-book-button:hover,
.contact-whatsapp-btn:hover,
.hub-rate-card__btn:hover,
button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(131, 68, 23, 0.28);
}

.btn:active,
.hero-btn:active,
.about-btn:active,
.nav-book-button:active,
.contact-whatsapp-btn:active,
.hub-rate-card__btn:active,
button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 6px 14px rgba(131, 68, 23, 0.22);
}

.btn:disabled,
button:disabled {
    transform: none;
}

/* ---------- Navigation ---------- */
@media (min-width: 993px) {
    .navbar ul li a {
        position: relative;
        transition: color 0.2s ease;
    }

    .navbar ul li a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -5px;
        height: 2px;
        border-radius: 2px;
        background: var(--polish-gold);
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.25s var(--polish-ease);
        pointer-events: none;
    }

    .navbar ul li a:hover::after,
    .navbar ul li a:focus-visible::after,
    .navbar ul li a[aria-current="page"]::after {
        transform: scaleX(1);
    }
}

.navbar.scrolled {
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    backdrop-filter: saturate(140%) blur(14px);
    box-shadow: 0 1px 0 rgba(255, 250, 242, 0.08), 0 10px 30px rgba(14, 28, 32, 0.28);
}

.nav-phone {
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.nav-phone:hover {
    background: rgba(241, 191, 104, 0.1);
}

/* ---------- Hero ---------- */
.hero-rating-card {
    border-radius: 14px;
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hero-proof-bar {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

@media (prefers-reduced-motion: no-preference) {
    .hero-copy,
    .hero-rating-card {
        animation: polish-rise 0.8s var(--polish-ease) both;
    }

    .hero-rating-card {
        animation-delay: 0.12s;
    }
}

@keyframes polish-rise {
    from {
        transform: translateY(14px);
    }

    to {
        transform: none;
    }
}

/* ---------- Cards ---------- */
.room,
.room-hub-card,
.hub-rate-card,
.content-card,
.policy-card,
.attraction-card,
.room-narrative-card,
.room-video-card,
.room-specs-card,
.room-amenities-card,
.room-faq-card,
.testimonial-card,
.reviews-overview-card,
.contact-card,
.about-feature-item,
.faq-category-block {
    border-color: var(--polish-card-line);
    border-radius: 16px;
    box-shadow: var(--polish-shadow-1);
    transition: transform 0.3s var(--polish-ease), box-shadow 0.3s var(--polish-ease), border-color 0.3s ease;
}

.room:hover,
.room-hub-card:hover,
.hub-rate-card:hover,
.testimonial-card:hover,
.about-feature-item:hover {
    box-shadow: var(--polish-shadow-2);
    border-color: rgba(160, 86, 30, 0.22);
}

.room--sold-out {
    background: linear-gradient(180deg, #f9f4ec, #f3ece1);
}

.room .room-image img,
.room-hub-card__media img {
    border-radius: 12px;
}

/* ---------- Amenities ---------- */
.amenity {
    transition: transform 0.25s var(--polish-ease);
}

.amenity:hover {
    transform: translateY(-4px);
}

.amenity i,
.amenity .material-icons,
.fan-icon {
    transition: color 0.3s ease, transform 0.3s var(--polish-ease);
    filter: drop-shadow(0 4px 6px rgba(160, 86, 30, 0.16));
}

.amenity:hover i,
.amenity:hover .material-icons,
.amenity:hover .fan-icon {
    transform: scale(1.12);
}

/* ---------- Gallery ---------- */
.gallery-images img {
    border-radius: 14px;
    box-shadow: 0 2px 4px rgba(23, 59, 58, 0.08), 0 10px 24px rgba(23, 59, 58, 0.12);
    transition: transform 0.4s var(--polish-ease), box-shadow 0.4s var(--polish-ease), filter 0.4s ease;
}

.gallery-images img:hover {
    transform: translateY(-4px) scale(1.015);
    box-shadow: 0 4px 8px rgba(23, 59, 58, 0.1), 0 22px 44px rgba(23, 59, 58, 0.2);
    filter: saturate(1.06);
}

/* ---------- Forms ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
    border-radius: 10px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="date"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover {
    border-color: rgba(35, 105, 103, 0.45);
}

/* ---------- Contact ---------- */
.contact-item {
    transition: transform 0.25s var(--polish-ease), box-shadow 0.25s var(--polish-ease), border-color 0.25s ease;
}

.contact-item:hover {
    box-shadow: var(--polish-shadow-1);
}

/* ---------- Footer ---------- */
.footer-links li a,
.footer-contact-list li a,
.footer-legal a,
.footer-socials a {
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.25s var(--polish-ease), border-color 0.2s ease;
}

.footer-socials a:hover {
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .btn:hover,
    .hero-btn:hover,
    .about-btn:hover,
    .nav-book-button:hover,
    .contact-whatsapp-btn:hover,
    .hub-rate-card__btn:hover,
    button[type="submit"]:hover,
    .amenity:hover,
    .amenity:hover i,
    .amenity:hover .material-icons,
    .amenity:hover .fan-icon,
    .gallery-images img:hover,
    .footer-socials a:hover {
        transform: none;
    }
}