/* =========================================
   InkHeart: Responsive Layer (Overrides)
   Safe to place after your main CSS
   ========================================= */

/* Root fluid scales */
:root{
  /* tighter default container padding on small screens */
  --container-padding: max(16px, 4vw);
  /* hero & section padding scales down on mobile */
  --section-padding: clamp(48px, 9vw, 120px);
}

/* Fluid type for headings (keeps large screens pretty, mobiles sane) */
h1{ font-size: clamp(1.9rem, 3.6vw, 4.25rem); line-height: 1.15; }
h2{ font-size: clamp(1.6rem, 2.8vw, 3rem);   line-height: 1.2; }
h3{ font-size: clamp(1.25rem, 2.2vw, 2rem);  line-height: 1.25; }
p, li{ font-size: clamp(0.98rem, 1.5vw, 1.06rem); }

/* Container widths — keep full-bleed sections intact */
.container        { padding-left: var(--container-padding); padding-right: var(--container-padding); }
.container-content{ max-width: 1200px; margin: 0 auto; }
.container-narrow { max-width: 980px;  margin: 0 auto; }
.container-wide   { max-width: 1400px; margin: 0 auto; }

/* Global media hygiene */
img, video, canvas, svg{ max-width:100%; height:auto; }
iframe{ max-width:100%; }

/* --- Header / Nav --- */
header{ height:auto; }
nav{ height: 72px; }
.logo{ font-size: clamp(1.25rem, 3vw, 2rem); }

@media (max-width: 1024px){
  .nav-links{ gap: 1.25rem; }
}
@media (max-width: 900px){
  /* Force mobile menu pattern */
  .nav-links{ display:none !important; }
  .mobile-menu-btn{ display:block !important; }
}

/* --- Hero adjustments (prevent “too big” on phones) --- */
.hero{
  padding: calc(72px + clamp(24px, 6vw, 40px)) 0 clamp(40px, 8vw, 72px) !important;
  min-height: auto !important;   /* let content define height on small viewports */
}
.hero h1{ margin-bottom: .8rem; }
.hero-subtitle{ margin-top:.25rem; margin-bottom: clamp(18px, 4vw, 28px); }

/* --- Cards & grids --- */
.services-grid, .tools-grid, .features-grid, .testimonials-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: clamp(16px, 3.5vw, 24px);
}

/* Make service/tool cards never overflow */
.service-card, .tool-card, .testimonial{
  min-width: 0;  /* fix flex/grid overflow */
}

/* --- Tables become scrollable on mobile (admin pages, logs, students) --- */
.table-wrapper, .table-responsive, .admin-table-wrap{ overflow:auto; -webkit-overflow-scrolling: touch; }
.table{ min-width: 720px; }

/* Wrap your tables in .table-responsive (we’ll add a small helper below) */
.table-responsive::-webkit-scrollbar{ height:8px; }
.table-responsive::-webkit-scrollbar-thumb{ background:#c7c9d3; border-radius:4px; }

/* --- Forms & buttons --- */
input, select, textarea, button{
  font-size: 1rem;
  max-width: 100%;
}
button, .btn, .hero-btn, .cta-btn, .cta-btn-white, .cta-btn-outline{
  min-height: 44px;
  line-height: 1.1;
  white-space: normal; /* allow wrap on tiny screens */
}

/* --- CTA color tweak (as requested): WhatsApp = green, Consultation = yellow --- */
.cta-btn-outline[href*="wa.me"],
.fab-whatsapp{ background:#25D366 !important; border-color:#25D366 !important; color:#fff !important; }
.cta-btn-white[href*="consultation"],
.btn.btn-primary[href*="consultation"],
a[href*="consultation"].cta-btn-white{
  background:#facc15 !important; color:#111 !important; border-color:#facc15 !important;
}

/* --- Footer grid --- */
.footer-content{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(16px, 3vw, 28px);
}

/* --- Service detail page responsive (your services.php) --- */
.service-detail{ padding: clamp(48px, 8vw, 80px) var(--container-padding); }
.service-content{
  display:grid; gap: clamp(20px, 4vw, 48px);
  grid-template-columns: 1.15fr .85fr;
}
@media (max-width: 1024px){
  .service-content{ grid-template-columns: 1fr; }
  .service-demo-box{ position: static !important; }
}
.benefits-grid{
  display:grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* --- Floating actions: respect safe-area (iPhone notches), avoid overlap with chat --- */
.ai-fab-wrap{
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  gap: 12px;
}
@media (max-width: 420px){
  .ai-fab{ width: 50px; height: 50px; font-size: 20px; }
}

/* --- ROI overlay (if used) goes fullscreen cleanly on small screens --- */
#roi-overlay[open], .roi-modal{
  width: min(960px, 100%);
  max-width: 100%;
  inset: auto !important;
  margin: 0 auto;
}
.roi-sheet{
  padding: clamp(16px, 4.5vw, 28px);
}

/* --- Utilities --- */
.hide-on-mobile{ display: none !important; }
@media (min-width: 641px){ .hide-on-mobile{ display: initial !important; } }

.show-on-mobile{ display: initial !important; }
@media (min-width: 641px){ .show-on-mobile{ display: none !important; } }

/* Prevent horizontal jiggle from animations/transforms */
html, body{ overflow-x: hidden; }
/* ==== Extras (append) ============================================ */

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* Only animate hover on devices that support it */
html.has-hover .service-card:hover,
html.has-hover .tool-card:hover,
html.has-hover .testimonial:hover{
  transform: translateY(-6px) scale(1.01);
}

/* Ultra-small phones (<= 360px) */
@media (max-width: 360px){
  .hero-cta, .cta-buttons { gap: 10px; }
  .cta-btn, .hero-btn, .btn { padding: 10px 14px; min-width: auto; }
  .logo{ font-size: 1.1rem; }
  nav{ height: 64px; }
}

/* Make videos and iframes responsive */
.responsive-media{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.responsive-media iframe, .responsive-media video{
  position:absolute; top:0; left:0; width:100%; height:100%;
}

/* Admin tables: sticky header on narrow screens */
.table-responsive thead th{
  position: sticky; top: 0; background: #fff; z-index: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* Floating widget always above other elements, but below system UI */
.ai-fab-wrap{ z-index: 9999; }