/*
 * ============================================================
 *  InksConsult - Android & iOS 移动端全局适配样式表
 *  该文件通过 @media 查询覆写原有样式，解决手机端布局问题
 *  不修改任何原有 CSS 文件，仅追加注入
 * ============================================================
 */

/* ============================================================
 * 0. iOS SafeArea 安全区域适配（刘海屏 / 底部横条）
 * ============================================================ */
@supports (padding: env(safe-area-inset-top)) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* 固定导航栏适配 SafeArea */
  .site-header,
  .header-mobile,
  .elementor-section.is-fixed {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  /* Footer 底部安全区 */
  .site-footer,
  #back-to-top {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ============================================================
 * 1. 全局防溢出和基础适配
 * ============================================================ */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

#page {
  overflow-x: hidden !important;
}

/* 所有图片自适应 */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* iframe 自适应（如 Google Maps） */
iframe {
  max-width: 100% !important;
}

/* ============================================================
 * 2. 平板设备适配（max-width: 1024px）
 * ============================================================ */
@media (max-width: 1024px) {

  /* 修复首页大图负 margin 偏移 */
  .elementor-element .elementor-widget-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 修复 column margin 偏移 */
  .elementor-column > .elementor-element-populated {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 表格响应式横向滚动 */
  .tablepress-scroll-wrapper,
  .entry-content table,
  .elementor-widget-table table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ============================================================
 * 3. 手机设备适配（max-width: 767px）
 * ============================================================ */
@media (max-width: 767px) {

  /* --- 整体布局 --- */
  .site {
    overflow-x: hidden !important;
  }

  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .e-con {
    --container-max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* --- Header 导航修复 --- */
  .header-desktop {
    display: none !important;
  }

  .header-mobile {
    display: block !important;
  }

  .header-mobile .elementor-section {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* 移动菜单抽屉优化 */
  .mmenu-wrapper {
    max-width: 85vw !important;
    width: 300px !important;
  }

  .mmenu-wrapper .mobile_mainmenu li a {
    padding: 12px 20px !important;
    font-size: 15px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  .mmenu-wrapper .mobile_mainmenu .sub-menu li a {
    padding-left: 35px !important;
    font-size: 14px !important;
  }

  /* --- 内容区域修复 --- */

  /* 所有 Elementor column 在手机上堆叠显示 */
  .elementor-column {
    width: 100% !important;
  }

  /* 修复原主题中的负 margin 问题 */
  .elementor-1023 .elementor-element.elementor-element-9fcb57c > .elementor-widget-container,
  .elementor-1023 .elementor-element.elementor-element-38b1baf > .elementor-widget-container,
  .elementor-1023 .elementor-element.elementor-element-82b3aac > .elementor-widget-container {
    margin: 0 !important;
  }

  /* 所有 section 间距优化 */
  .elementor-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 标题文字自适应 */
  .ot-heading .main-head {
    font-size: clamp(22px, 5vw, 36px) !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  .ot-heading > span {
    font-size: clamp(12px, 3vw, 14px) !important;
  }

  /* 正文文字自适应 */
  .elementor-widget-text-editor {
    font-size: clamp(14px, 3.5vw, 16px) !important;
    line-height: 1.6 !important;
  }

  /* --- 按钮和链接触摸优化 --- */
  .octf-btn,
  .elementor-button,
  a.elementor-button,
  .btn-details,
  .wpcf7-submit,
  button[type="submit"] {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }

  /* --- 图标盒子组件适配 --- */
  .icon-box {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .icon-box .content-box {
    margin-left: 80px !important;
    margin-right: 0 !important;
  }

  .icon-box .icon-main {
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
  }

  .icon-box .icon-main i {
    font-size: 30px !important;
    line-height: 60px !important;
  }

  /* --- 图片盒子组件适配 --- */
  .ot-image-box {
    margin-bottom: 20px !important;
  }

  .ot-image-box .overlay-image img {
    width: 100% !important;
    height: auto !important;
  }

  /* --- FAQ 手风琴适配 --- */
  .acc-item .acc-toggle {
    padding: 15px !important;
    font-size: 15px !important;
    min-height: 44px !important;
  }

  .acc-item .acc-content {
    padding: 15px !important;
    font-size: 14px !important;
  }

  /* --- 表单适配 --- */
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 input[type="url"],
  .wpcf7 textarea,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important;  /* 防止 iOS 自动缩放 */
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    border-radius: 4px !important;
    -webkit-appearance: none;
    appearance: none;
  }

  textarea {
    min-height: 120px !important;
  }

  /* --- Footer 适配 --- */
  .site-footer .elementor-column {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  .site-footer .elementor-container {
    padding: 0 15px !important;
  }

  /* --- 页面头部横幅适配 --- */
  .page-header {
    padding: 80px 15px 40px !important;
    min-height: auto !important;
  }

  .page-header .page-title {
    font-size: clamp(24px, 6vw, 36px) !important;
  }

  /* --- 面包屑导航适配 --- */
  .breadcrumbs {
    font-size: 13px !important;
    flex-wrap: wrap !important;
  }

  /* --- 轮播/Slider 适配 --- */
  .owl-carousel .owl-nav {
    display: none !important;
  }

  .owl-carousel .owl-dots {
    bottom: 10px !important;
  }

  /* --- 滚动到顶部按钮 --- */
  #back-to-top {
    right: 15px !important;
    bottom: 80px !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* --- 社交图标 --- */
  .team-social a,
  .footer-social a {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- Pricing Table 适配 --- */
  .ot-pricing-table {
    margin-bottom: 30px !important;
  }

  /* --- Counter / Stats 适配 --- */
  .ot-counter span {
    font-size: clamp(28px, 8vw, 48px) !important;
  }

  /* --- Progress Bar 适配 --- */
  .line-progress {
    margin-bottom: 25px !important;
  }

  /* --- 视频按钮 --- */
  .ot-video-button a span {
    width: 60px !important;
    height: 60px !important;
  }

  /* --- 团队成员卡片 --- */
  .ot-team {
    margin-bottom: 25px !important;
  }

  /* --- Testimonials 适配 --- */
  .ot-testimonials {
    padding: 0 10px !important;
  }

  /* --- WooCommerce / 产品询价表单 --- */
  .enquiry-form-container {
    padding: 15px !important;
  }

  /* --- Signup 页面专属适配 --- */
  .signup-container,
  .registration-form {
    padding: 20px 15px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 注册表单 grid 双列布局 → 手机单列堆叠 */
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  /* Elementor inner column 在手机上也堆叠 */
  .elementor-inner-column {
    width: 100% !important;
  }

  /* 内部 section 容器在手机上堆叠 */
  .elementor-inner-section .elementor-container {
    flex-direction: column !important;
  }

  /* Hero 按钮在极窄屏幕垂直堆叠 */
  .octf-btn-group {
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* ============================================================
   * 奖学金页面专属适配 (Scholarships)
   * 该页面使用 inline style flex 两栏布局，必须强制覆写
   * ============================================================ */

  /* 主内容区域：inline flex → 垂直堆叠 */
  div[style*="display: flex"][style*="gap: 30px"],
  div[style*="display:flex"][style*="gap:30px"] {
    flex-direction: column !important;
    padding: 20px 15px !important;
  }

  /* 左侧筛选器 sidebar：取消固定宽度 */
  div[style*="width: 300px"][style*="flex-shrink: 0"],
  div[style*="width:300px"][style*="flex-shrink:0"] {
    width: 100% !important;
    flex-shrink: 1 !important;
  }

  /* 筛选器内部 sticky 定位取消 */
  div[style*="position: sticky"] {
    position: relative !important;
  }

  /* 右侧内容区域 */
  div[style*="flex: 1"][style*="min-width: 0"],
  div[style*="flex:1"][style*="min-width:0"] {
    width: 100% !important;
  }

  /* 奖学金标题文字缩小 */
  div[style*="flex: 1"] > h2,
  div[style*="flex:1"] > h2 {
    font-size: 22px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  /* 英雄横幅标题缩小 */
  div[style*="padding: 80px 0"] > h1,
  div[style*="padding:80px 0"] > h1 {
    font-size: 28px !important;
    padding: 0 15px !important;
  }

  div[style*="padding: 80px 0"],
  div[style*="padding:80px 0"] {
    padding: 60px 15px !important;
  }

  /* 搜索框和控件区域堆叠 */
  div[style*="display: flex"][style*="justify-content: space-between"][style*="margin-bottom: 16px"] {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  /* 搜索框宽度自适应 */
  input#searchBox {
    width: 100% !important;
  }

  /* 数据表格横向可滚动 */
  div[style*="overflow-x: auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* 表格最小宽度保证不压缩变形 */
  #scholarshipTable,
  .eael-data-table {
    min-width: 700px !important;
    white-space: nowrap !important;
  }

  #scholarshipTable th,
  #scholarshipTable td,
  .eael-data-table th,
  .eael-data-table td {
    padding: 10px 8px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  /* e-con 容器修复 */
  .elementor-element-171be3d {
    width: 100% !important;
    --width: 100% !important;
  }

  /* 分页器自适应 */
  div#pagination {
    flex-wrap: wrap !important;
  }
}

/* ============================================================
 * 4. 超小屏幕适配（max-width: 375px）- iPhone SE 等
 * ============================================================ */
@media (max-width: 375px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .ot-heading .main-head {
    font-size: 20px !important;
  }

  .elementor-button,
  .octf-btn {
    padding: 10px 18px !important;
    font-size: 14px !important;
  }

  .header-mobile .the-logo img {
    width: 100px !important;
  }
}

/* ============================================================
 * 5. 横屏模式适配
 * ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .page-header {
    padding: 60px 15px 30px !important;
    min-height: auto !important;
  }

  .elementor-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}

/* ============================================================
 * 6. 触摸交互优化（适用于触摸设备）
 * ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* 禁用 hover 效果，防止"粘住"的状态 */
  .icon-box:hover .icon-main,
  .ot-image-box:hover .link-box,
  .main-navigation ul > li:hover > a {
    transition: none !important;
  }

  /* 增加可点击区域 */
  .main-navigation > ul > li > a,
  .mobile_mainmenu > li > a {
    padding: 12px 15px !important;
  }

  /* 平滑滚动优化 */
  * {
    -webkit-overflow-scrolling: touch;
  }

  /* 防止长按弹出菜单 */
  img {
    -webkit-touch-callout: none;
  }
}

/* ============================================================
 * 7. 深色模式检测（可选增强）
 * ============================================================ */
@media (prefers-color-scheme: dark) {
  /* 预留深色模式适配空间 */
  /* 当前保持原有配色不变 */
}

/* ============================================================
 * 8. 减少动画偏好（无障碍适配）
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}