/* =========================================================
   RAREVO — SHARED MOBILE / TABLET RESPONSIVE LAYER
   Linked LAST on every page so it refines each page's own styles.
   Breakpoints: 1024 (tablet) · 900 (nav -> menu) · 600 (phone) · 400 (small phone)
========================================================= */

/* ---------- Global safety (all screen sizes) ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html,body{max-width:100%;overflow-x:hidden;}
img,video,svg,canvas,iframe{max-width:100%;}
img{height:auto;}
.rv-burger{display:none;}
.rv-drawer,.rv-overlay{display:none;}

/* ---------- Hamburger button + drawer (injected by responsive.js) ---------- */
@media (max-width:900px){

  /* hide old desktop links + the old dead/redirecting buttons */
  .rarevo-navbar .rarevo-nav,
  .navbar .nav-links,
  .navbar .nav-btn,
  .rarevo-navbar .menu-btn,
  .navbar .menu-btn{display:none!important;}

  .rarevo-navbar,.navbar{
    top:10px!important;
    width:calc(100% - 20px)!important;
    height:62px!important;
    min-height:62px;
    padding:0 14px 0 18px!important;
    border-radius:16px!important;
    justify-content:space-between!important;
    gap:12px;
  }
  .rarevo-logo,.navbar .logo{font-size:21px!important;}

  .rv-burger{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    width:44px;height:44px;
    margin-left:auto;
    border:0;border-radius:12px;
    background:rgba(21,91,255,.12);
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    flex:0 0 auto;
  }
  .rv-burger span{
    display:block;width:20px;height:2px;border-radius:2px;
    background:currentColor;
    transition:transform .3s ease,opacity .2s ease;
  }
  /* burger colour follows the bar: white bar = dark lines, dark bar = light lines */
  .rv-burger{color:#fff;}
  .rv-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .rv-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .rv-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .rv-overlay{
    display:block;position:fixed;inset:0;z-index:9990;
    background:rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
  }
  .rv-drawer{
    display:flex;flex-direction:column;
    position:fixed;z-index:9995;
    top:82px;left:10px;right:10px;
    max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);
    overflow-y:auto;overscroll-behavior:contain;
    padding:10px;
    background:#0b0b0d;color:#fff;
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
    opacity:0;visibility:hidden;transform:translateY(-12px) scale(.98);
    transform-origin:top center;
    transition:opacity .28s ease,transform .28s ease,visibility .28s;
  }
  .rv-drawer a{
    display:flex;align-items:center;justify-content:space-between;
    min-height:52px;padding:0 18px;
    font-family:inherit;font-size:16px;font-weight:600;letter-spacing:.01em;
    color:#f1f1f1!important;border-radius:12px;
  }
  .rv-drawer a + a{border-top:1px solid rgba(255,255,255,.06);}
  .rv-drawer a:active,.rv-drawer a:hover{background:rgba(255,255,255,.07);}
  .rv-drawer a.rv-current{color:#4f8bff!important;}
  .rv-drawer a.rv-current::after{content:"";width:8px;height:8px;border-radius:50%;background:#2F7BFF;}
  .rv-drawer a.rv-cta{
    justify-content:center;margin-top:10px;
    background:#155BFF;color:#fff!important;border-top:0;
  }
  .rv-drawer a.rv-cta:active{background:#2F7BFF;}
  body.rv-menu-open{overflow:hidden;}
  body.rv-menu-open .rv-overlay{opacity:1;visibility:visible;}
  body.rv-menu-open .rv-drawer{opacity:1;visibility:visible;transform:none;}
}

/* ---------- Tablet (<=1024) ---------- */
@media (max-width:1024px){
  .section,section.section{padding-left:5%;padding-right:5%;}
}

/* ---------- Phone (<=700) ---------- */
@media (max-width:700px){
  .section,section.section{padding-top:84px;padding-bottom:64px;padding-left:20px;padding-right:20px;}

  /* fluid headings so long words never push the page sideways */
  h1{font-size:clamp(34px,10.5vw,52px)!important;line-height:1.05!important;letter-spacing:-.03em!important;overflow-wrap:break-word;}
  h2{font-size:clamp(28px,8.4vw,42px)!important;line-height:1.1!important;letter-spacing:-.025em!important;overflow-wrap:break-word;}
  h3{overflow-wrap:break-word;}
  p,li{overflow-wrap:break-word;}

  /* big outlined / ghost text that bleeds off screen */
  .bg-text,.big-text,.ghost-text,[class*="outline-text"]{font-size:clamp(60px,26vw,120px)!important;max-width:100%;}

  /* buttons: comfortable tap size */
  a.btn,.btn,.rarevo-btn,button,.cta-btn,.hero-btn,[class*="-btn"]:not(.rv-burger):not(.menu-btn){
    min-height:46px;
  }
  .hero-buttons,.hero-actions,.cta-buttons,.btn-row{display:flex;flex-direction:column;gap:12px;align-items:stretch;}
  .hero-buttons a,.hero-actions a,.cta-buttons a,.btn-row a{width:100%;justify-content:center;text-align:center;}

  /* forms: 16px stops iOS zooming on focus */
  input,select,textarea{font-size:16px!important;max-width:100%;}
  input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;}

  /* tables scroll inside themselves instead of breaking the page */
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

  /* footers stack neatly */
  .rarevo-footer-top,.footer-top{flex-direction:column!important;gap:34px!important;}
  .rarevo-footer-links{flex-wrap:wrap;gap:26px!important;}
  .rarevo-footer-bottom,.footer-bottom{flex-direction:column!important;gap:10px!important;text-align:left;}

  /* floating whatsapp / social buttons: smaller, tucked into the corner */
  .whatsapp-float,.wa-float,.float-whatsapp,.social-float,.floating-btn{
    width:50px!important;height:50px!important;right:14px!important;bottom:14px!important;
  }
}

/* ---------- Small phone (<=400) ---------- */
@media (max-width:400px){
  .rarevo-logo,.navbar .logo{font-size:19px!important;}
  .section,section.section{padding-left:16px;padding-right:16px;}
}

/* touch devices: no hover-only effects / custom cursors */
@media (hover:none),(pointer:coarse){
  .cursor-glow,.cur-ring,.cur-dot{display:none!important;}
}

/* ---------- Homepage hero: stack text, then phone mockup (no overlap) ---------- */
@media (max-width:900px){
  .rarevo-hero{
    display:flex!important;flex-direction:column;justify-content:flex-start;
    height:auto!important;min-height:0!important;
    padding:118px 22px 70px!important;
  }
  .rarevo-hero .hero-content{width:100%;max-width:none;}
  .hero-device{
    position:relative!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;
    transform:rotate(-4deg)!important;
    width:min(240px,68%)!important;
    margin:44px auto 0!important;
  }
  .hero-device img{width:100%;height:auto!important;max-height:420px;object-fit:cover;}
  .hero-glow{max-width:100vw;}
}
@media (max-width:700px){
  .hero-heading{font-size:clamp(36px,11vw,54px)!important;}
  .hero-description{font-size:16px!important;line-height:1.65!important;}
  .hero-buttons{flex-direction:column;align-items:stretch;gap:12px;}
  .hero-button{width:100%;justify-content:center;text-align:center;}
}