/*
 * ios-fixes.css
 * File CSS tập trung tất cả bản vá lỗi cho iOS Safari
 * 
 * CÁCH DÙNG: Thêm vào functions.php:
 * wp_enqueue_style('hnm-ios-fixes', get_stylesheet_directory_uri() . '/ios-fixes.css', array(), '1.0');
 *
 * Hoặc @import vào style.css:
 * @import url('ios-fixes.css');
 */


/* =============================================
   LỖI 1: 100vh tính sai trên iPhone
   
   NGUYÊN NHÂN: Safari tính 100vh = chiều cao màn hình
   bao gồm cả thanh địa chỉ (URL bar). Khi người dùng
   scroll, URL bar ẩn đi nhưng viewport thay đổi →
   hero section bị giật / bị che phần dưới.
   
   FIX: Dùng -webkit-fill-available
   ============================================= */
.hero-full-height,
section.relative.h-screen,
section.relative.min-h-screen,
.h-screen { 
    min-height: 100vh;
    min-height: -webkit-fill-available; 
}

/* =============================================
   LỖI 2: position: sticky không hoạt động
   
   NGUYÊN NHÂN: Nếu bất kỳ element cha nào có
   overflow: hidden hoặc overflow: auto thì
   position: sticky sẽ bị vô hiệu hóa hoàn toàn
   trên iOS Safari.
   
   FIX: Đảm bảo tất cả ancestor không có overflow hidden
   ============================================= */
body,
main,
.site-content,
.ast-container,
#page,
#content {
    overflow: visible !important;
}

/* Sidebar sticky trong single pages */
.my-sticky-sidebar,
.sticky-sidebar-group {
    position: -webkit-sticky !important; /* Bắt buộc cho Safari cũ */
    position: sticky !important;
}


/* =============================================
   LỖI 3: backdrop-filter không chạy trên Safari
   
   NGUYÊN NHÂN: Safari yêu cầu prefix -webkit-
   cho backdrop-filter. Không có prefix → hiệu ứng
   blur của floating bar và silk menu bị mất.
   
   FIX: Thêm -webkit-backdrop-filter song song
   ============================================= */
#floating-bar,
#silk-side-menu,
#mobile-smart-bar {
    -webkit-backdrop-filter: blur(15px) !important; /* Safari */
    backdrop-filter: blur(15px) !important;
}

#silk-menu {
    /* Silk menu nền đặc, không cần backdrop-filter */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}


/* =============================================
   LỖI 4: Touch event delay 300ms trên iOS
   
   NGUYÊN NHÂN: iOS Safari thêm 300ms delay trước
   khi fire click event để phát hiện double-tap zoom.
   Khiến nút bấm có cảm giác lag, đặc biệt menu hamburger.
   
   FIX: touch-action: manipulation loại bỏ delay này
   ============================================= */
button,
a,
[onclick],
.ham-line,
#floating-hamburger,
#btn-open-menu,
#btn-close-menu,
#close-silk {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent; /* Xóa highlight xanh khi tap */
}


/* =============================================
   LỖI 5: overflow-x: hidden trên body/html
   gây scroll lock trên iOS
   
   NGUYÊN NHÂN: iOS xử lý overflow-x: hidden khác
   Android. Khi set trên cả html VÀ body cùng lúc,
   iOS bị khóa scroll hoàn toàn, không scroll được.
   
   FIX: Chỉ set trên 1 trong 2, dùng clip thay hidden
   ============================================= */
html {
    overflow-x: clip; /* Thay hidden bằng clip - an toàn hơn trên iOS */
}
body {
    overflow-x: hidden;
    /* KHÔNG set overflow-x: hidden trên html VÀ body cùng lúc */
}


/* =============================================
   LỖI 6: -webkit-overflow-scrolling cần thiết
   cho scroll ngang mượt trên iOS
   
   Áp dụng cho: Tour cards scroll ngang, Partner logos
   ============================================= */
.hide-scrollbar,
#dynamic-tour-container,
.mobile-scroll-container,
.logos-slider {
    -webkit-overflow-scrolling: touch; /* Cuộn có đà (momentum) trên iPhone */
    scroll-behavior: smooth;
}


/* =============================================
   LỖI 7: input zoom tự động trên iOS
   
   NGUYÊN NHÂN: iOS tự zoom vào input khi font-size
   < 16px để dễ đọc hơn. Rất khó chịu với UX.
   
   FIX: Đảm bảo tất cả input trong form có font-size >= 16px
   Hoặc dùng transform scale nếu muốn chữ nhỏ hơn về mặt visual
   ============================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
    font-size: 16px !important; /* Ngăn iOS zoom khi focus vào input */
}


/* =============================================
   LỖI 8: position: fixed bị offset sai trên iOS
   khi có WP Admin Bar
   
   NGUYÊN NHÂN: WordPress thêm margin-top vào <html>
   khi admin bar hiển thị. Fixed elements tính từ
   viewport thật sự, không tính margin → bị lệch.
   
   FIX: Đã xử lý trong functions.php
   Dòng này là backup phòng khi JS chưa load
   ============================================= */
html {
    margin-top: 0 !important;
}

#floating-bar,
#mobile-smart-bar {
    top: 0 !important;
}


/* =============================================
   LỖI 9: Scroll snap không hoạt động mượt trên iOS
   
   NGUYÊN NHÂN: iOS cần scroll-snap-stop: always
   mới dừng đúng vị trí khi vuốt nhanh
   ============================================= */
.mobile-scroll-container > div,
#dynamic-tour-container > div {
    scroll-snap-align: start;
    scroll-snap-stop: always; /* Bắt buộc dừng tại mỗi card, không skip */
    flex-shrink: 0;
}


/* =============================================
   LỖI 10: Chữ trong hero section bị méo/nhỏ
   trên iPhone do text-size-adjust
   
   FIX: Tắt tính năng auto-adjust của iOS
   ============================================= */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}