/* Quiet motion: premium websites should feel composed, not busy. */
html { scroll-behavior: auto; }

/* Keep a calm editorial hover response without tracking every pointer movement. */
@media (hover: hover) and (pointer: fine) {
  .image-motion:not(.managed-photo) {
    background-position: center;
    background-size: 104%;
  }
  .image-motion:not(.managed-photo):hover { background-size: 108%; }
  .managed-photo img { transition: opacity .28s ease, transform .4s cubic-bezier(.2,.7,.2,1); }
  .managed-photo:hover img { filter: none; transform: scale(1.018); }
}

/* The Wayanad landscape is a full-bleed editorial panel, never a tiled texture. */
.image--wayanad.image-motion,
.image--wayanad.image-motion:hover {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover !important;
}

/* Zoom the whole framed landscape, so its cover crop stays seamless. */
.explore__layout { overflow: hidden; }
.image--wayanad.image-motion { transition: transform .62s cubic-bezier(.2,.75,.2,1); }
@media (hover: hover) and (pointer: fine) {
  .image--wayanad.image-motion:hover { transform: scale(1.025); }
}

/* A calm evergreen resting state replaces a repeated loading animation. */
.managed-photo:before { animation: none; display: none; }

/* Home follows the same quiet language as every other navigation link. */
@media (min-width: 1101px) {
  .site-header nav > a,
  .site-header .more-menu > button {
    font-size: 11px;
  }
}

.site-header nav > a:first-child {
  background: transparent;
  border: 0;
  color: var(--deep) !important;
  padding: 0;
}
.site-header nav > a:first-child.is-active {
  background: transparent;
  color: var(--deep) !important;
}
.site-header nav > a:first-child.is-active::after { background: var(--gold); }

/* A compact, considered menu rather than a large utility dropdown. */
.more-menu__panel {
  background: #f8f5ed;
  border: 1px solid rgba(174, 145, 75, .35);
  box-shadow: 0 20px 44px rgba(12, 34, 26, .16);
  min-width: 248px;
  padding: 10px;
  right: -15px;
  top: 31px;
}
.more-menu__panel::before {
  color: #927c3e;
  content: 'DISCOVER MIHRA MIST';
  display: block;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .14em;
  padding: 7px 11px 11px;
}
.more-menu__panel a {
  border-top: 1px solid rgba(20, 48, 38, .11);
  font-size: 17px !important;
  line-height: 1.2;
  padding: 12px 11px !important;
  transition: background-color .2s ease, color .2s ease !important;
}
.more-menu__panel a:hover,
.more-menu__panel a:focus-visible {
  background: #e9e1cb;
  color: #102d22 !important;
  outline: 0;
}

/* Wayanad discovery links: understated tactile feedback with no scroll work. */
.explore__list a {
  transition: background-color .24s ease, color .24s ease, padding .24s cubic-bezier(.2,.7,.2,1), transform .24s cubic-bezier(.2,.7,.2,1);
}
.explore__list a b { transition: transform .24s cubic-bezier(.2,.7,.2,1); }
.explore-tags { gap: 10px; margin-top: 32px; }
.explore-tags a {
  align-items: center;
  border: 1px solid rgba(20, 48, 39, .2);
  color: var(--ink);
  display: inline-flex;
  font-family: var(--mono);
  font-size: 9px;
  gap: 10px;
  letter-spacing: .08em;
  padding: 10px 12px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .24s ease, border-color .24s ease, color .24s ease, transform .24s cubic-bezier(.2,.7,.2,1);
}
.explore-tags a b {
  color: var(--gold);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  transition: color .24s ease, transform .24s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) and (pointer: fine) {
  .explore__list a:hover, .explore__list a:focus-visible {
    background: rgba(190, 157, 84, .1);
    color: #806b2a;
    outline: 0;
    padding-inline: 10px;
    transform: translateX(4px);
  }
  .explore__list a:hover b, .explore__list a:focus-visible b { transform: translate(3px, -3px); }
  .explore-tags a:hover, .explore-tags a:focus-visible {
    background: var(--deep);
    border-color: var(--deep);
    color: var(--cream);
    outline: 0;
    transform: translateY(-2px);
  }
  .explore-tags a:hover b, .explore-tags a:focus-visible b {
    color: var(--cream);
    transform: translate(2px, -2px);
  }
}

/* Give page actions the same precise invitation to click as the homepage. */
.button:not(.menu-button),
.page-card:not(.room-card),
.page-main .text-link {
  transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease, transform .22s cubic-bezier(.2,.75,.2,1);
}

@media (hover: hover) and (pointer: fine) {
  .button:not(.menu-button):hover,
  .button:not(.menu-button):focus-visible {
    box-shadow: 0 12px 24px rgba(12, 38, 28, .16);
    outline: 0;
    transform: translateY(-2px) scale(1.018);
  }

  .page-card:not(.room-card):hover,
  .page-card:not(.room-card):focus-visible {
    border-color: #9c8650;
    box-shadow: 0 18px 34px rgba(20, 48, 39, .1);
    outline: 0;
    transform: translateY(-4px);
  }

  .page-main .text-link:hover,
  .page-main .text-link:focus-visible {
    color: #806b2a;
    outline: 0;
    transform: translateX(4px);
  }
}

/* FAQs reveal their answer on intent, while retaining the native click control. */
.faq details {
  transition: background-color .24s ease, box-shadow .24s ease, transform .24s cubic-bezier(.2,.75,.2,1);
}
.faq summary {
  transition: color .24s ease, padding .24s cubic-bezier(.2,.75,.2,1);
}
.faq summary b { transition: color .24s ease, transform .24s cubic-bezier(.2,.75,.2,1); }
.faq details[open] p { animation: faq-answer-reveal .3s cubic-bezier(.2,.75,.2,1) both; }

/* Room galleries remain editorial and load only as a visitor reaches them. */
.room-detail-cover { margin: 42px 0 26px; max-width: 980px; overflow: hidden; }
.room-detail-cover img { display: block; height: auto; width: 100%; }
.room-detail-introduction { color: #52645c; font-size: 16px; line-height: 1.75; margin: 0 0 38px; max-width: 68ch; }
.room-photo-gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 44px; max-width: 980px; }
.room-photo-gallery figure { aspect-ratio: 4 / 3; background: #e9e3d7; margin: 0; overflow: hidden; }
.room-photo-gallery img { display: block; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.75,.2,1); width: 100%; }
@media (hover: hover) and (pointer: fine) { .room-photo-gallery figure:hover img { transform: scale(1.025); } }
@media (max-width: 760px) { .room-detail-cover { margin-top: 30px; } .room-photo-gallery { grid-template-columns: 1fr; margin-bottom: 34px; } }

@keyframes faq-answer-reveal {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) and (pointer: fine) {
  .faq details:hover,
  .faq details:focus-within {
    transform: translateX(4px);
  }
  .faq details:hover summary,
  .faq details:focus-within summary { color: #806b2a; padding-inline: 16px; }
  .faq details:hover summary b,
  .faq details:focus-within summary b { color: #806b2a; transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .button:not(.menu-button):hover,
  .button:not(.menu-button):focus-visible,
  .page-card:not(.room-card):hover,
  .page-card:not(.room-card):focus-visible,
  .page-main .text-link:hover,
  .page-main .text-link:focus-visible,
  .faq details:hover,
  .faq details:focus-within { transform: none; }
  .faq details[open] p { animation: none; }
}