/* ------------------------------------------------------------------
   Hotel Shikha — supplementary overrides on top of the MM (Moksha
   Meadows / BootstrapMade) template. Keep this file additive only:
   never edit assets/css/main.css directly so template updates stay
   easy to diff.
------------------------------------------------------------------- */

/* Fix: page-wide scroll jitter around the 100px mark. main.js toggles
   body.scrolled based on window.scrollY > 100, and main.css's
   .scrolled .header .topbar rule collapses the topbar's height to 0 when
   that class is present. Because the header is sticky (still in normal
   flow), collapsing its height shifts all page content upward by the
   topbar's height. The browser's scroll-anchoring feature then "corrects"
   scrollY to compensate for that shift, which pushes scrollY back under
   100, removes .scrolled, restores the topbar height, shifts content back
   down, and the cycle repeats dozens of times a second - the fast
   flicker between "index-page scrolled" and "index-page" the user
   reported. Disabling scroll anchoring on the document breaks the loop:
   the topbar still collapses/expands normally at the 100px mark, it just
   no longer fights the browser's own scroll-position compensation.
   Reproduced and verified fixed with Playwright before/after. */
html {
  overflow-anchor: none;
}

.header .logo img {
  max-height: 64px;
  margin-right: 0;
  margin-bottom: 0;
}

/* TripAdvisor Travellers' Choice badge, sat to the right of the "View Rooms"
   button in the home page hero. .hero-buttons is display:flex with no
   align-items set (so it defaults to stretch) - align-self: center keeps
   the badge's own aspect ratio instead of being stretched to button height. */
.hotel-hero .hero-buttons .travellers-choice-badge {
  height: 58px;
  width: auto;
  align-self: center;
}

@media (max-width: 480px) {
  .hotel-hero .hero-buttons .travellers-choice-badge {
    height: 46px;
  }
}

/* Override the generic `section { padding: 40px 0 }` top padding for the
   hotel-hero section — 0 on desktop (it sits right under the Check
   Availability widget / hero carousel), a small 1rem on mobile so content
   isn't flush against the widget above it. */
.hotel-hero {
  padding-top: 0;
}

@media (max-width: 991px) {
  .hotel-hero {
    padding-top: 1rem;
  }
}

/* Sitewide heading letter-spacing tightening. Base template leaves h1/h2 at
   normal (0) letter-spacing; pull all of them in by 1px, with the home page
   hero h1 ("Best Budget Hotel in Jaipur") pulled in an extra px on top of
   that via the more specific selector below. No other h1/h2 rule in
   main.css sets letter-spacing on a selector that's actually used on this
   site, so this applies cleanly everywhere. */
h1,
h2 {
  letter-spacing: -1px;
}

.hotel-hero .hero-content h1 {
  letter-spacing: -2px;
}

@media (max-width: 575px) {
  .header .logo img {
    max-height: 50px;
  }

  .section-title h2 {
    padding: 0px 10px;
  }
}

/* Page-title banner (inner-page heading + breadcrumb strip) — MM's default
   is only 25px padding / 24px heading, which reads as a thin sliver. Give
   it more presence on every inner page, desktop and mobile alike. */
.page-title {
  padding: 70px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--heading-color), transparent 92%);
}

.page-title h1 {
  font-size: 40px;
  font-family: var(--heading-font);
}

.page-title .breadcrumbs ol {
  font-size: 15px;
}

@media (max-width: 768px) {
  .page-title {
    padding: 45px 0;
  }

  .page-title h1 {
    font-size: 28px;
  }
}

/* Section titles: MM overlays a large faint duplicate of the heading text
   behind it (.section-title span) as a decorative watermark. Hidden
   site-wide per request - keeps every "COMFORTABLE & AFFORDABLE ROOMS"
   style heading to just the clean h2. */
.section-title span {
  display: none;
}

.btn-book-now {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-color);
  color: var(--contrast-color, #fff);
  padding: 10px 22px;
  border-radius: 50px;
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-left: 20px;
  white-space: nowrap;
  transition: .3s;
}

.btn-book-now:hover {
  background: color-mix(in srgb, var(--accent-color), black 15%);
  color: var(--contrast-color, #fff);
}

/* Generic fallback so .btn-primary / .btn-outline read correctly even
   outside the specific sections the template originally scoped them to
   (hero, offers, booking cards, etc). Scoped rules in main.css still win
   inside those sections since they carry higher specificity. */
.btn.btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #fff;
  border-radius: 50px;
  padding: 12px 30px;
  font-family: var(--heading-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Rooms page: "Check Availability & Book Now" CTA reads better in normal
   case than the template's default all-caps button style. Doubled up as
   .btn.btn-check-availability-cta to out-specificity the .btn.btn-primary
   rule above rather than relying on source order. */
.btn.btn-check-availability-cta {
  text-transform: none;
}

.btn.btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 15%);
  border-color: color-mix(in srgb, var(--accent-color), black 15%);
  color: #fff;
}

.btn.btn-outline {
  background: transparent;
  border: 2px solid var(--accent-color);
  color: var(--accent-color);
  border-radius: 50px;
  padding: 10px 28px;
  font-family: var(--heading-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.btn.btn-outline:hover {
  background: var(--accent-color);
  color: #fff;
}

/* Give the dropdown menus a touch more room for longer Hotel Shikha
   menu labels (Services / Travel groups). */
.navmenu .dropdown ul li {
  min-width: 240px;
}

/* Room / service tariff badge used on Accommodation & Services pages */
.tariff-note {
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  border-left: 3px solid var(--accent-color);
  padding: 18px 22px;
  border-radius: 6px;
  margin-bottom: 30px;
}

/* Simple feature grid used on the Hotel Features / Services page */
.feature-grid .feature-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  height: 100%;
  transition: .3s;
}

.feature-grid .feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,.1);
}

.feature-grid .feature-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

.feature-grid .feature-card .feature-card-body {
  padding: 18px 20px 22px;
}

.feature-grid .feature-card h5 {
  font-family: var(--heading-font);
  margin-bottom: 8px;
}

.feature-grid .feature-card .badge-renovation {
  display: inline-block;
  background: #b8860b;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 9px;
  border-radius: 4px;
  margin-bottom: 8px;
}

/* FAQ accordion (long-tail SEO content) */
.shikha-accordion .accordion-item {
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  margin-bottom: 12px;
  border-radius: 8px;
  overflow: hidden;
}

.shikha-accordion .accordion-button {
  font-family: var(--heading-font);
  font-weight: 600;
  background: #fff;
}

.shikha-accordion .accordion-button:not(.collapsed) {
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
}

.shikha-accordion .accordion-button:focus {
  box-shadow: none;
}

.badges-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 20px;
}

.badges-row img {
  height: 90px;
  width: auto;
  border: 1px solid #e2e2e2;
  border-radius: 6px;
  padding: 4px;
  background: #fff;
}

/* Experience badge (circular ₹1,990 / Rooms Starting From price badge on the
   About Home section) — MM's default sizing is a touch large for the price
   text inside the 100px circle. Scale it down slightly. */
.about-home .about-images .experience-badge .badge-content .badge-number {
  font-size: 1.1rem;
}

.about-home .about-images .experience-badge .badge-content .badge-text {
  font-size: 0.62rem;
}

@media (max-width: 768px) {
  .about-home .about-images .experience-badge .badge-content .badge-number {
    font-size: 0.95rem;
  }

  .about-home .about-images .experience-badge .badge-content .badge-text {
    font-size: 0.52rem;
  }
}

/* Quick-link pill buttons (Terms & Hotel Policy and Hostel pages) - Josefin
   Sans (the heading font these pills use) carries extra leading below the
   baseline, so text reads as sitting slightly high / more gap at the bottom
   than the top. Trim 1px off the bottom padding to compensate. Needs the
   .btn.btn-outline.policy-jump selector (3 classes) to out-specificity the
   plain .btn.btn-outline padding rule above. */
.policy-jump {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn.btn-outline.policy-jump {
  padding-top: 10px;
  padding-bottom: 9px;
}

/* Anchor targets on the Terms & Hotel Policy page - offset so the sticky
   header doesn't cover the heading being jumped to. Paired with the
   instant (non-smooth) scrollIntoView on the page's quick-link buttons,
   which avoids an overshoot bug where the topbar's collapse-on-scroll
   transition races the template's global smooth-scroll anchor animation
   on long pages. */
.policy-anchor {
  scroll-margin-top: 100px;
}

/* Standalone checklist (Dorm Features on the Hostel page, and similar plain
   feature lists outside a .amenity-card) — same visual language as MM's
   .amenity-features list but usable anywhere, not just inside amenity-cards. */
.dorm-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}

.dorm-features-list li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: var(--default-color);
}

.dorm-features-list li i {
  color: var(--accent-color);
  font-size: 17px;
  margin-right: 10px;
  width: 20px;
  text-align: center;
}

/* Reusable lightbox photo grid — used on pages (Conference Room, Hostel, and
   similar) that need a real GLightbox photo gallery outside of MM's
   .room-details-scoped gallery-thumbnails component. */
.shikha-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.shikha-photo-grid a {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.shikha-photo-grid img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.shikha-photo-grid a:hover img {
  transform: scale(1.06);
}

/* Hero carousel on mobile: MM's default is min-height: 100vh, which fills
   the whole screen and pushes everything else below the fold. Cut it down
   to roughly half the viewport on phones/tablets - the hero images already
   use object-fit: cover so they simply crop tighter into the shorter box
   instead of stretching or distorting. */
@media (max-width: 768px) {
  .hero .carousel {
    min-height: 50vh;
  }

  .hero .carousel-container {
    inset: 0 24px 24px 24px;
    gap: 10px;
  }

  .hero h2 {
    font-size: 30px;
    line-height: 1.15;
  }

  .hero p {
    margin: 0;
  }
}

@media (max-width: 480px) {
  .hero .carousel {
    min-height: 50vh;
  }

  .hero h2 {
    font-size: 24px;
  }

  .hero .carousel-container {
    inset: 0 16px 16px 16px;
    gap: 8px;
  }

  .hero .btn-get-started {
    padding: 7px 24px;
    font-size: 13px;
    margin: 4px;
  }
}

/* Homepage "Check Availability" widget — floats over the join between the
   hero carousel and the hotel-hero section, redirects to the letsbook.me
   booking engine with checkin/checkout/adults pre-filled. */
.check-availability-widget {
  position: relative;
  z-index: 20;
  margin-top: -44px;
  margin-bottom: 24px;
}

@media (min-width: 992px) {
  .check-availability-widget {
    margin-top: -56px;
    padding: 0;
    overflow: visible;
  }
}

.check-availability-widget .availability-card {
  background: var(--surface-color, #fff);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  padding: 22px 26px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 22px;
}

.check-availability-widget .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.check-availability-widget .field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--heading-color);
  display: flex;
  align-items: center;
  gap: 6px;
}

.check-availability-widget input[type="date"] {
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 85%);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px;
  font-family: var(--default-font);
  color: var(--default-color);
  min-width: 165px;
}

.check-availability-widget .stepper {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--heading-color), transparent 85%);
  border-radius: 8px;
  padding: 7px 14px;
}

.check-availability-widget .stepper-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--accent-color);
  background: #fff;
  color: var(--accent-color);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.2s;
}

.check-availability-widget .stepper-btn:hover:not(:disabled) {
  background: var(--accent-color);
  color: #fff;
}

.check-availability-widget .stepper-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.check-availability-widget #shikhaAdultsCount {
  min-width: 18px;
  text-align: center;
  font-weight: 600;
  color: var(--heading-color);
}

.check-availability-widget button[type="submit"] {
  margin-left: auto;
  white-space: nowrap;
  align-self: center;
}

@media (max-width: 991px) {
  .check-availability-widget {
    margin-top: 20px;
  }

  .check-availability-widget .availability-card {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .check-availability-widget input[type="date"] {
    min-width: 0;
    width: 100%;
  }

  .check-availability-widget button[type="submit"] {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}