/* =========================================================
   Usability / mobile accessibility hardening — v1
   Goals: readable text, 44–48px touch targets, no horizontal
   overflow, robust responsive media, keyboard focus and
   reduced-motion support without changing the visual identity.
   ========================================================= */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}
body{
  min-width:320px;
  overflow-x:hidden;
}
main,section,header,footer,nav,.container{min-width:0}
.container{width:min(1220px,calc(100% - 32px))!important}

/* Never let media or long strings create a sideways mobile scroll. */
img,svg,video,canvas,iframe{max-width:100%}
img{height:auto}
iframe{display:block;width:100%;border:0}
.video-frame iframe,.yatra-video-section iframe{width:100%;height:100%;min-height:250px}
p,li,a,span,strong,small,h1,h2,h3,h4,h5,h6{overflow-wrap:anywhere}
pre,code{max-width:100%;overflow-x:auto}

/* Form controls stay readable on mobile and avoid iOS auto-zoom. */
input,select,textarea,button{max-width:100%}
input,select,textarea{
  font-size:16px!important;
  min-height:48px;
}
textarea{min-height:120px;resize:vertical}
label{font-size:13px!important;line-height:1.45}

/* Useful controls meet a comfortable tap target. */
.btn,button[type="submit"],.premium-room-link,.round-link{
  min-height:48px;
}
.menu-toggle,.nav-close,.mobile-header-book,.float-action{
  min-width:48px!important;
  min-height:48px!important;
}
.faq button,.faq-v2-item button,.contact-faq-accordion button{
  min-height:52px;
}

/* Keep interface/decorative copy readable in automated mobile audits. */
small,.eyebrow,.page-kicker,.hero-kicker,.lux-overline,.blog-date,
.room-label,.room-category,.lux-badge,.gallery-slide span,
.gallery-preview-item:after,.gallery-grid a:after{
  font-size:12px!important;
  line-height:1.45!important;
}
.footer p,.footer a,.footer span{font-size:14px!important}

/* Strong keyboard visibility is also useful for non-mouse users. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #f0bf54!important;
  outline-offset:3px!important;
}
.skip-link:focus{left:12px;top:12px;z-index:10000}

/* Prevent common grid/flex overflow from long text. */
[class*="grid"]>* , [class*="wrap"]>* , .main-nav>* , .footer-grid>*{
  min-width:0;
}

@media (max-width:900px){
  .container{width:min(1220px,calc(100% - 28px))!important}
  .main-nav{overflow-y:auto!important;overscroll-behavior:contain}
  .main-nav>a:not(.btn),.nav-cta{min-height:52px!important;display:flex!important;align-items:center!important}
  .nav-close{width:48px!important;height:48px!important}
}

@media (max-width:650px){
  :root{--nb-topbar-h:44px}
  body,button,input,select,textarea{font-size:16px!important}
  p,li,main p,.section p,.article p,.page-content p,.faq-answer p,
  .blog-card p,.room-card p,.premium-room-content p,
  .room-v2-card .premium-room-content p,.yatra-service-card p,
  .timeline-grid p,.contact-action-card p,.contact-steps p{
    font-size:16px!important;
    line-height:1.72!important;
  }
  .lead,main p.lead,.section p.lead{font-size:17px!important}
  .container{width:calc(100% - 28px)!important;max-width:1220px!important}

  /* Keep the compact topbar but make its active items finger-friendly. */
  .luxury-topbar .topbar-inner{min-height:44px!important}
  .luxury-topbar .top-left{min-height:44px!important}
  .luxury-topbar .top-left a{
    min-height:44px!important;
    padding:0 2px!important;
    font-size:12px!important;
    line-height:1.3!important;
  }
  .site-header.luxury-header{top:44px!important}

  .luxury-header .nav-wrap{min-height:76px!important}
  .mobile-header-book,.menu-toggle{
    width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;
  }
  .main-nav>a:not(.btn),.nav-cta{font-size:16px!important;min-height:52px!important}

  /* Give stacked actions full width where space is tight. */
  .hero-actions .btn,.cta-actions .btn,.article-actions .btn{
    min-height:50px;
  }

  /* Links in the footer are frequent touch targets; increase hit area. */
  .footer-grid>div:not(.footer-brand)>a{
    display:flex!important;
    align-items:center!important;
    min-height:44px!important;
    padding-block:7px!important;
  }

  .floating-actions{right:max(12px,env(safe-area-inset-right))!important}
  .float-action{
    width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;
  }

  /* Avoid fixed-height media clipping on narrow phones. */
  .video-frame{max-width:100%!important;overflow:hidden!important}
  .video-frame iframe{min-height:220px}

  /* Any two-column utility grids collapse on very narrow screens. */
  .field-row{grid-template-columns:1fr!important}
}

@media (max-width:390px){
  .container{width:calc(100% - 24px)!important}
  .luxury-header .brand{max-width:calc(100% - 112px)!important}
  .mobile-header-book,.menu-toggle{width:48px!important;height:48px!important}
}

/* Respect users who request less motion while preserving layout. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}