/* =========================================================
   FIXWALA — Responsive Layer
   Global, cross-cutting breakpoint rules that sit on top of
   style.css / dashboard.css. Component-level breakpoints stay
   next to their components; this file covers fluid type,
   container spacing, touch targets, orientation and print.
   ========================================================= */

/* ---------- Fluid typography ---------- */
h1{ font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); }
h2{ font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
h3{ font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); }
.lead{ font-size: clamp(1rem, 0.92rem + 0.35vw, 1.15rem); }

/* ---------- Large desktop (1440px+) ---------- */
@media (min-width: 1440px){
  .container{ max-width: 1320px; }
  .dash-shell .container{ max-width: 1400px; }
}

/* ---------- Small laptop / large tablet (1100px) ---------- */
@media (max-width: 1100px){
  .container{ padding-inline: 20px; }
}

/* ---------- Tablet (900px) ---------- */
@media (max-width: 900px){
  section{ padding: 56px 0; }
  .btn{ padding-block: 12px; }
}

/* ---------- Mobile (600px) ---------- */
@media (max-width: 600px){
  .container{ padding-inline: 16px; }
  section{ padding: 44px 0; }
  h1{ line-height: 1.15; }
  .hero-ctas, .form-foot, .booking-nav{ flex-wrap: wrap; }
  table.data-table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling: touch; }
}

/* ---------- Extra-small phones (380px) ---------- */
@media (max-width: 380px){
  .container{ padding-inline: 14px; }
  .nav-logo{ font-size: 1rem; }
  .btn{ font-size: 0.85rem; padding: 11px 16px; }
  .hero-badge{ font-size: 0.72rem; }
}

/* ---------- Landscape phones (short viewport height) ---------- */
@media (max-height: 480px) and (orientation: landscape){
  #page-loader{ display:none; }
  .hero{ padding-block: 32px; }
  .auth-visual{ display:none; }
}

/* ---------- Touch devices: enlarge tap targets, remove hover-only affordances ---------- */
@media (hover: none) and (pointer: coarse){
  .btn, .pill, .option-card, .dash-icon-btn, .float-btn, .nav-links a{ min-height: 44px; }
  .service-card:hover, .pro-card:hover{ transform: none; }
}

/* ---------- Fine pointer (desktop): keep hover affordances snappy ---------- */
@media (hover: hover) and (pointer: fine){
  .magnetic-btn{ will-change: transform; }
}

/* ---------- High-density / retina tweak for hairline borders ---------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
  .glass, .finder-card{ border-width: 0.5px; }
}

/* ---------- Reduce card grids gracefully on narrow dashboard sidebars ---------- */
@media (max-width: 1280px) and (min-width: 1081px){
  .dash-grid-3{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Utility: hide/show helpers ---------- */
.hide-mobile{ display: initial; }
.hide-desktop{ display: none; }
@media (max-width: 768px){
  .hide-mobile{ display: none !important; }
  .hide-desktop{ display: initial !important; }
}

/* ---------- Accessibility: visually hide without removing from a11y tree ---------- */
.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Print styles ---------- */
@media print{
  .nav, .footer, .float-btn, #page-loader, .nav-burger, .dash-sidebar, .dash-topbar{ display:none !important; }
  body{ background:#fff; color:#000; }
  a[href]::after{ content: " (" attr(href) ")"; font-size:0.75em; color:#555; }
  .container{ max-width:100%; padding:0; }
}