/* =========================================================
   WixarWeb Responsive Excellence Layer — Phase 10
   Mobile-first hardening for 320px → 2560px displays.
   ========================================================= */

:root{
  --ww-safe-x:max(12px, env(safe-area-inset-left));
  --ww-safe-r:max(12px, env(safe-area-inset-right));
  --ww-safe-b:max(12px, env(safe-area-inset-bottom));
}

html{
  width:100%;
  max-width:100%;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:84px;
}

body{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:clip;
  margin:0;
}

img,svg,video,canvas,iframe{
  max-width:100%;
}

img,video{
  height:auto;
}

button,input,select,textarea{
  max-width:100%;
  font:inherit;
}

button,a{
  -webkit-tap-highlight-color:transparent;
}

input,select,textarea{
  font-size:16px;
}

table{
  max-width:100%;
}

/* Every data table lives inside a scroll wrapper. The table sizes to its
   content; when that is wider than the screen the wrapper scrolls. */
.table-scroll,
.table-wrap,
.table-container,
.responsive-table{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}

pre,code{
  max-width:100%;
}

pre{
  overflow:auto;
}

/* Prevent long Persian/Latin strings from blowing out cards. */
h1,h2,h3,h4,h5,h6,p,li,.title,.name,.description,.text{
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Table cells: `anywhere` shrinks min-content and splits Persian words in the
   middle. Wrap only between words; the scroll wrapper handles the rest. */
td,th{
  overflow-wrap:break-word;
  word-break:normal;
}

/* Common shell/container protection. */
.container,.container-fluid,.page-container,.content,.main-content,.dashboard-content{
  width:min(100% - 32px, 1440px);
  max-width:100%;
  min-width:0;
  margin-inline:auto;
}

.grid,.cards,.card-grid,.portfolio-grid,.services-grid,.stats-grid{
  min-width:0;
}

.card,.glass-card,.panel,.modal,.modal-content,.table-container,.form-card{
  min-width:0;
  max-width:100%;
}

/* Touch targets. */
@media (pointer:coarse){
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  .btn,
  a.nav-link,
  .icon-btn{
    min-height:44px;
  }
}

/* Round / icon-only controls must stay square in both axes, otherwise the
   44px min-height above turns a 36-42px circle into an oval. */
@media (pointer:coarse){
  .pf-modal-close,
  .pf-modal-nav,
  .testi-btn,
  .nav-toggle{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    flex:0 0 44px;
  }
}

/* ---------- 1100px and below ---------- */
@media (max-width:1100px){
  .container,.container-fluid,.page-container,.content,.main-content,.dashboard-content{
    width:min(100% - 28px, 1100px);
  }

  .two-col,.split-layout,.hero-grid,.dashboard-grid{
    grid-template-columns:1fr !important;
  }

  .wide-table{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* ---------- 768px and below: mobile/tablet ---------- */
@media (max-width:768px){
  html{
    scroll-padding-top:72px;
  }

  .container,.container-fluid,.page-container,.content,.main-content,.dashboard-content{
    width:calc(100% - 24px);
  }

  section{
    max-width:100%;
  }

  .section{
    padding-inline:0;
  }

  .grid,.cards,.card-grid,.services-grid,.stats-grid{
    grid-template-columns:1fr !important;
  }

  .portfolio-grid{
    grid-template-columns:1fr !important;
  }

  .row{
    flex-wrap:wrap;
  }

  .form-row,.form-grid{
    grid-template-columns:1fr !important;
  }

  .actions,.form-actions{
    flex-wrap:wrap;
  }

  .actions > *,
  .form-actions > *{
    max-width:100%;
  }

  /* Full-width mobile dialogs while retaining safe-area padding. */
  .modal{
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
  }

  .modal-content{
    width:100%;
    max-width:none;
    min-height:100%;
    max-height:100dvh;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }

  .modal-header{
    position:sticky;
    top:0;
    z-index:5;
  }

  /* Iframes become genuinely usable on small screens. */
  .preview-frame,
  .portfolio-preview,
  iframe{
    max-width:100%;
  }

  /* Keep cells on one line inside the scroll wrapper; the wrapper scrolls
     instead of squeezing columns. Empty-state rows (colspan) may wrap. */
  .table-scroll th,
  .table-scroll td,
  .table-wrap th,
  .table-wrap td,
  .table-container th,
  .table-container td,
  .responsive-table th,
  .responsive-table td{
    white-space:nowrap;
  }

  /* Action buttons/forms inside a cell stay in one row instead of stacking
     into very tall rows. */
  .table-scroll .actions-row,
  .table-wrap .actions-row,
  .table-container .actions-row,
  .responsive-table .actions-row{
    flex-wrap:nowrap;
    white-space:nowrap;
  }

  .table-scroll td[colspan],
  .table-wrap td[colspan],
  .table-container td[colspan],
  .responsive-table td[colspan]{
    white-space:normal;
  }

  /* Don't force desktop sticky sidebars into a narrow viewport. */
  .sidebar{
    max-width:min(88vw,360px);
  }

  /* Better mobile navigation layering. */
  .mobile-menu,
  .nav-menu,
  .sidebar{
    max-height:100dvh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Avoid fixed elements covering content. */
  .floating-cta,
  .mobile-cta,
  .bottom-cta{
    left:var(--ww-safe-x);
    right:var(--ww-safe-r);
    bottom:calc(10px + env(safe-area-inset-bottom));
    width:auto;
    max-width:none;
  }

  .toast,
  .notification,
  .alert{
    max-width:calc(100vw - 24px);
  }
}

/* ---------- 560px and below: phone-first ---------- */
@media (max-width:560px){
  .container,.container-fluid,.page-container,.content,.main-content,.dashboard-content{
    width:calc(100% - 20px);
  }

  h1{
    font-size:clamp(1.75rem, 8vw, 2.45rem);
    line-height:1.12;
  }

  h2{
    font-size:clamp(1.4rem, 6.5vw, 2rem);
    line-height:1.18;
  }

  h3{
    font-size:clamp(1.12rem, 5vw, 1.45rem);
  }

  form .btn,
  .hero-actions .btn,
  section .btn,
  .auth-card .btn,
  .panel-card .btn,
  .split-auth .btn,
  button[type="submit"],
  input[type="submit"]{
    width:100%;
  }

  header.site-header .btn,
  .header-actions .btn{
    width:auto;
    max-width:none;
    flex:0 0 auto;
  }

  .btn-group{
    display:grid;
    grid-template-columns:1fr;
    width:100%;
  }

  .stats,
  .stats-grid{
    grid-template-columns:1fr !important;
  }

  .hero,
  .hero-section{
    min-height:auto !important;
  }

  .hero-content{
    padding-block:28px;
  }

  .glass-card,
  .card,
  .panel,
  .form-card{
    border-radius:18px;
  }

  .portfolio-card{
    width:100%;
  }

  .portfolio-card .preview,
  .portfolio-preview,
  .preview-frame{
    min-height:220px;
  }

  .modal{
    padding:0;
  }

  .modal-body{
    padding:14px;
  }

  .modal-footer{
    position:sticky;
    bottom:0;
    z-index:4;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
  }

  .table-container{
    margin-inline:0;
    border-radius:14px;
  }

  /* Horizontal chips remain scrollable instead of wrapping into ugly stacks. */
  .chips,.tabs,.filter-tabs,.category-tabs{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }

  .chips::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  .filter-tabs::-webkit-scrollbar,
  .category-tabs::-webkit-scrollbar{
    display:none;
  }

  /* Large decorative elements must never create horizontal overflow. */
  .orb,.glow,.wireframe,.decorative{
    max-width:70vw;
  }
}

/* ---------- 390px and below ---------- */
@media (max-width:390px){
  .container,.container-fluid,.page-container,.content,.main-content,.dashboard-content{
    width:calc(100% - 16px);
  }

  .card,.glass-card,.panel,.form-card{
    padding:14px !important;
  }

  .hero-content{
    padding-block:22px;
  }

  .portfolio-card .preview,
  .portfolio-preview,
  .preview-frame{
    min-height:190px;
  }

  .modal-body{
    padding:12px;
  }

  .modal-header{
    padding:12px;
  }
}

/* ---------- 340px and below: compact phones ---------- */
@media (max-width:340px){
  .container,.container-fluid,.page-container,.content,.main-content,.dashboard-content{
    width:calc(100% - 12px);
  }

  .card,.glass-card,.panel,.form-card{
    padding:11px !important;
  }

  .btn,button,input,select,textarea{
    max-width:100%;
  }
}

/* ---------- 380px and below: 320-375px phones, header logo ---------- */
@media (max-width:380px){
  header.site-header{
    margin:8px;
    padding:8px 10px;
  }

  header.site-header .header-bar{
    gap:8px;
  }

  /* The logo takes the leftover space but never collapses below a readable width. */
  header.site-header .logo{
    flex:1 1 auto;
    min-width:88px;
    max-width:none;
    font-size:16px;
  }

  header.site-header .header-actions{
    gap:6px;
  }

  header.site-header .btn{
    min-height:38px;
    padding:6px 10px;
    font-size:12px;
  }
}

/* Landscape phones: preserve usable vertical space. */
@media (max-height:520px) and (orientation:landscape){
  .hero-content{
    padding-block:18px;
  }

  .modal-content{
    overflow-y:auto;
  }

  .mobile-menu,
  .sidebar{
    overflow-y:auto;
  }
}

/* Reduced-motion remains accessible without disabling responsive behavior. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
  }
}

body.ww-scroll-locked{overflow:hidden;touch-action:none;}