/* ============================================================
   AGENCIA RENACER TRAVEL — Responsive / Mobile styles
   Loaded on every page after the page's own <style> block.
   Uses !important where needed to override matching inline
   styles (inline styles otherwise always win over stylesheets).
   ============================================================ */

/* ---- generic safety: never allow horizontal scroll ---- */
html, body { max-width: 100%; overflow-x: hidden; }
img { max-width: 100%; }

/* ---- hamburger button (hidden on desktop) ---- */
.rc-nav-toggle{
  display:none; background:none; border:none; cursor:pointer;
  padding:8px; margin:0; flex-shrink:0; -webkit-tap-highlight-color:transparent;
}
.rc-nav-toggle svg{ display:block; }

/* mobile-only CTA link duplicated inside the nav panel; hidden on desktop */
.rc-mobile-cta{ display:none !important; }

/* dark backdrop behind the open mobile menu */
.rc-nav-overlay{
  display:none; position:fixed; inset:0; background:rgba(16,42,76,.45);
  z-index:999; opacity:0; transition:opacity .25s ease;
}
.rc-nav-overlay.rc-open{ display:block; opacity:1; }

/* ---- generic grid collapse: every section tagged .rc-grid
   (any container using CSS grid-template-columns) becomes a
   single stacked column below the breakpoint ---- */
@media (max-width: 860px){
  .rc-grid{ grid-template-columns:1fr !important; }
}

/* ---- top utility bar: shrink on small screens ---- */
@media (max-width: 640px){
  .rc-topbar{ gap:14px !important; justify-content:center !important; }
  .rc-topbar span{ font-size:10.5px !important; }
}
@media (max-width: 420px){
  .rc-topbar .rc-hide-xs{ display:none !important; }
}

/* ---- header / mobile nav panel ---- */
@media (max-width: 900px){
  .rc-nav-toggle{ display:flex; align-items:center; justify-content:center; }

  /* the header CTA button that sits outside the nav panel on desktop */
  .rc-header-cta{ display:none !important; }

  #mainNav{
    position:fixed !important;
    top:0; right:0;
    height:100vh; width:min(80vw,320px);
    background:#fff;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;
    gap:2px !important;
    padding:90px 28px 28px !important;
    margin:0 !important;
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:1000;
    box-shadow:-14px 0 36px -12px rgba(16,42,76,.35);
    overflow-y:auto;
  }
  #mainNav.rc-open{ transform:translateX(0); }
  #mainNav a{
    width:100%;
    padding:14px 0 !important;
    border-bottom:1px solid #EEE;
    font-size:15.5px !important;
  }
  #mainNav .rc-mobile-cta{
    display:block !important; width:100%; text-align:center;
    margin-top:18px; border-bottom:none;
    padding:14px 22px !important;
  }
}

/* ---- forms: make sure two-column field grids always stack
   on phones even earlier than the generic 860px breakpoint
   isn't needed since .rc-grid already covers it, this is just
   a bit of breathing room for labels/inputs ---- */
@media (max-width: 540px){
  .field-input{ font-size:16px !important; } /* avoids iOS auto-zoom on focus */
}

/* ---- footer socials / bottom bar: keep centered & wrapped ---- */
@media (max-width: 480px){
  .rc-grid + div[style*="justify-content:space-between"]{
    justify-content:center !important; text-align:center;
  }
}