/* ============================================================
   mobile-enhance.css — DryRose.org
   Global mobile optimization overlay, loaded on every page.
   Ensures perfect rendering on iOS + Android + small phones.
   ============================================================ */

/* --- 1. Prevent iOS font inflation on landscape orientation --- */
html{
  -webkit-text-size-adjust:100%;
  -ms-text-size-adjust:100%;
  text-size-adjust:100%;
}

/* --- 2. Safe-area insets for iPhone notch + bottom home bar --- */
@supports(padding:env(safe-area-inset-top)){
  /* Fixed nav respects the notch */
  .navbar{
    padding-top:env(safe-area-inset-top) !important;
  }
  /* Ensure page content starts below notch when no navbar */
  body{
    padding-bottom:env(safe-area-inset-bottom);
  }
  .site-footer, footer{
    padding-bottom:max(20px, env(safe-area-inset-bottom));
  }
}

/* --- 3. Prevent horizontal overflow on small devices --- */
html,body{overflow-x:hidden;max-width:100%;}
img,video,iframe,embed,object,table{max-width:100%;height:auto;}

/* --- 4. Images: responsive + lazy rendering hint --- */
img{
  display:block;
  height:auto;
  max-width:100%;
}

/* --- 5. Touch target minimums (WCAG 2.5.5 / Apple HIG 44pt) --- */
a, button, input[type="submit"], input[type="button"], .btn, [role="button"]{
  min-height:44px;
  min-width:44px;
}

/* --- 6. Tap-highlight color (brand maroon, subtle) --- */
*{
  -webkit-tap-highlight-color:rgba(139,26,43,0.15);
}

/* --- 7. Font smoothing on WebKit / Blink --- */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* --- 8. Form inputs: 16px minimum to prevent iOS zoom-on-focus --- */
input, select, textarea{
  font-size:16px !important;
}

/* --- 9. Floating WhatsApp CTA (mobile + desktop) --- */
.kn-wa-float{
  position:fixed;
  bottom:20px;
  right:20px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#25D366;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  transition:transform .2s,box-shadow .2s;
  text-decoration:none;
}
.kn-wa-float:hover{transform:scale(1.08);box-shadow:0 8px 26px rgba(0,0,0,0.32);}
.kn-wa-float svg{width:30px;height:30px;fill:#fff;}
.kn-wa-float::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:3px solid #25D366;
  opacity:.55;
  animation:knWaPulse 2.2s infinite;
}
@keyframes knWaPulse{
  0%{transform:scale(1);opacity:.55;}
  100%{transform:scale(1.4);opacity:0;}
}

/* Safe-area offset on iPhone */
@supports(padding:env(safe-area-inset-bottom)){
  .kn-wa-float{bottom:max(20px, env(safe-area-inset-bottom));}
}

/* Tiny tooltip on hover (desktop only) */
@media(hover:hover) and (pointer:fine){
  .kn-wa-float::before{
    content:'Chat on WhatsApp · +92 334 2634411';
    position:absolute;
    right:70px;
    top:50%;
    transform:translateY(-50%);
    background:#2b1a12;
    color:#fff;
    padding:8px 12px;
    border-radius:6px;
    font-size:13px;
    font-family:system-ui,-apple-system,sans-serif;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s;
  }
  .kn-wa-float:hover::before{opacity:1;}
}

/* --- 10. Hide floating CTA when printing --- */
@media print{
  .kn-wa-float, .site-nav, .nav-toggle, .mobile-menu{display:none !important;}
}

/* --- 11. Small-phone refinements (≤ 360px: Galaxy Fold, SE) --- */
@media(max-width:360px){
  html{font-size:15px;}
  h1{font-size:1.6rem !important;}
  h2{font-size:1.3rem !important;}
  .btn, button, [role="button"]{
    padding:10px 16px !important;
    font-size:.95rem !important;
  }
  .kn-wa-float{width:52px;height:52px;bottom:14px;right:14px;}
  .kn-wa-float svg{width:26px;height:26px;}
}

/* --- 12. Landscape short screens (phones in landscape) --- */
@media(max-height:500px) and (orientation:landscape){
  .hero, .zh-hero, .ru-hero, .ar-hero{min-height:auto !important;padding:40px 16px !important;}
}

/* --- 13. High-contrast / a11y preference --- */
@media(prefers-contrast:more){
  a{text-decoration:underline;}
  .btn{border:2px solid currentColor;}
}

/* --- 14. Dark mode friendly (opt-in; doesn't override brand pages) --- */
@media(prefers-color-scheme:dark){
  :root{color-scheme:light dark;}
}

/* --- 15. Reduced motion honor --- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .kn-wa-float::after{display:none;}
}

/* --- 16. Tables: horizontal scroll on mobile instead of squash --- */
@media(max-width:640px){
  table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
}

/* --- 17. RTL-safe (for Arabic pages) --- */
[dir="rtl"] .kn-wa-float{right:auto;left:20px;}
[dir="rtl"] .kn-wa-float::before{right:auto;left:70px;}

/* --- 18. Ensure rich-media PDFs open in mobile-safe viewer --- */
a[href$=".pdf"]:after{
  content:' ↓';
  font-size:.9em;
  color:inherit;
  opacity:.75;
}

/* --- 19. iOS notch tint: only if navbar doesn't exist on the page --- */
/* (Safe — the fixed .navbar above already extends into the safe area
   and uses an opaque background, so no tinted bar needed.) */

/* --- 20. Keyboard-safe form scrolling on iOS --- */
input:focus, textarea:focus, select:focus{
  scroll-margin-top:90px;
}

/* --- 21. Faster tap response + no double-tap-zoom on buttons --- */
a, button, .btn, [role="button"], input[type="submit"], label{
  touch-action:manipulation;
}

/* --- 22. Blurry/flash avoidance on hero sections during scroll --- */
.hero, .zh-hero, .ru-hero, .ar-hero, .hero-video{
  transform:translateZ(0);
  will-change:transform;
}