/* ============================================================
   MOBILE.CSS — Mobile-First Enhancements
   AI Digital Guides Theme v1.0.0
   ============================================================
   This file supplements layout.css with:
   - Touch-friendly tap targets (44px minimum)
   - Fluid typography
   - Safe area insets (notch/island support)
   - Mobile nav improvements
   - Card stack layouts
   - Swipe-friendly horizontal scrollers
   - Print optimizations
   ============================================================ */

/* ── FLUID TYPOGRAPHY ─────────────────────────────────────── */
:root {
  --fs-xs:   clamp(0.68rem, 1.5vw, 0.75rem);
  --fs-sm:   clamp(0.78rem, 1.8vw, 0.875rem);
  --fs-base: clamp(0.9rem,  2vw,   1rem);
  --fs-md:   clamp(1rem,    2.5vw, 1.125rem);
  --fs-lg:   clamp(1.1rem,  3vw,   1.35rem);
  --fs-xl:   clamp(1.4rem,  4vw,   1.875rem);
  --fs-2xl:  clamp(1.8rem,  5vw,   2.5rem);
  --fs-3xl:  clamp(2.2rem,  6vw,   3.5rem);
  --fs-hero: clamp(2.5rem,  7vw,   4.5rem);
}

body { font-size: var(--fs-base); }
h1   { font-size: var(--fs-hero) !important; }
h2   { font-size: var(--fs-3xl)  !important; }
h3   { font-size: var(--fs-xl)   !important; }
h4   { font-size: var(--fs-lg)   !important; }

/* ── TAP TARGETS ──────────────────────────────────────────── */
/* All interactive elements must be ≥ 44×44px on mobile */
.btn,
.nav-menu li a,
.filter-btn,
.cat-filter__btn,
.tool-card__link,
.post-card,
.project-card,
.tool-card,
.social-icon,
.pagination .page-numbers li a,
.pagination .page-numbers li span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* nav-toggle tap target — only on mobile/tablet where it's visible */
@media (max-width: 900px) {
  .nav-toggle {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Revert floating pill to full-width bar on mobile */
  .site-header {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    transform: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
  }
  .site-header.scrolled { top: 0; }
  .hero { padding-top: calc(var(--nav-h) + 40px); }
}

.social-icon { min-width: 44px; justify-content: center; }

/* ── SAFE AREA INSETS (notch / Dynamic Island) ────────────── */
.site-header .container {
  padding-left:  max(clamp(16px,4vw,48px), env(safe-area-inset-left));
  padding-right: max(clamp(16px,4vw,48px), env(safe-area-inset-right));
}
.site-footer .container {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.primary-nav.is-open {
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* ── MOBILE NAV IMPROVEMENTS ──────────────────────────────── */
.primary-nav.is-open {
  max-height: calc(100vh - var(--nav-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-menu li a {
  padding: 12px 16px;
  font-size: var(--fs-md);
  border-radius: var(--radius-md);
}
/* Active nav indicator */
.nav-menu li.current-menu-item > a::before,
.nav-menu li.current_page_item > a::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--magenta);
  border-radius: 50%;
  margin-right: 8px;
  flex-shrink: 0;
}

/* ── HORIZONTAL SCROLL WRAPPERS ───────────────────────────── */
.filter-bar__inner,
.cat-filter,
.hero-stats,
.cert-chips,
.post-tags,
.service-card__tags,
.tool-card__meta {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;   /* IE/Edge */
}
.filter-bar__inner::-webkit-scrollbar,
.cat-filter::-webkit-scrollbar,
.hero-stats::-webkit-scrollbar { display: none; }

/* ── HERO SECTION MOBILE ──────────────────────────────────── */
@media (max-width: 600px) {
  .hero {
    padding-top: calc(var(--nav-h) + 32px);
    padding-bottom: 40px;
    min-height: auto;
  }
  .hero__title { word-break: break-word; hyphens: auto; }
  .hero__badge { max-width: 100%; text-align: center; word-break: break-word; white-space: normal; }
  .hero__cta   { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { text-align: center; justify-content: center; width: 100%; }
  .hero__meta  { flex-direction: column; gap: 8px; }
}

/* ── GRIDS — SINGLE COLUMN ON SMALL SCREENS ───────────────── */
@media (max-width: 480px) {
  .services-grid,
  .projects-grid,
  .posts-grid--3,
  .posts-grid--2,
  .process-steps { grid-template-columns: 1fr; }
  .stats-grid    { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tools-grid--full .tool-card { flex-direction: column; }
  .tool-card__link { align-self: flex-start; margin-top: 8px; }
  .featured-post-card { grid-template-columns: 1fr; }
  .featured-post-card__img { min-height: 180px; }
}

/* ── CARDS — TOUCH FEEDBACK ───────────────────────────────── */
@media (hover: none) {
  /* Disable hover effects on touch devices (prevents stuck hover states) */
  .post-card:hover,
  .project-card:hover,
  .tool-card:hover,
  .service-card:hover { transform: none; box-shadow: none; border-color: var(--border); }
  /* Replace with active feedback */
  .post-card:active,
  .project-card:active,
  .tool-card:active    { transform: scale(0.98); transition: transform 0.1s; }
  .btn:active           { transform: scale(0.97); }
}

/* ── IMAGES ───────────────────────────────────────────────── */
img { max-width: 100%; height: auto; }
.post-card__thumb,
.featured-post-card__thumb,
.project-card__thumb { object-fit: cover; width: 100%; }

/* Responsive iframes/embeds */
.wp-block-embed,
.wp-block-video,
.fluid-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.wp-block-embed iframe,
.wp-block-video iframe,
.fluid-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ── FORMS MOBILE ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .form-input { font-size: 16px; } /* prevent iOS zoom on focus */
  input[type="email"],
  input[type="text"],
  input[type="url"],
  textarea { font-size: 16px !important; } /* critical — iOS zooms if < 16px */
}

/* ── SIDEBAR — MOBILE ─────────────────────────────────────── */
@media (max-width: 900px) {
  .blog-sidebar  { order: -1; } /* show sidebar ABOVE posts on mobile */
  .post-page-inner { grid-template-columns: 1fr; }
  .blog-page-inner { grid-template-columns: 1fr; }
}

/* ── FOOTER MOBILE ────────────────────────────────────────── */
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom__inner { flex-direction: column; text-align: center; gap: 6px; }
  .footer-col--newsletter .nl-form { max-width: 100%; }
}

/* ── PROCESS STEPS MOBILE ─────────────────────────────────── */
@media (max-width: 600px) {
  .process-steps  { grid-template-columns: 1fr 1fr; gap: 20px; }
  .process-steps__line { display: none; }
}
@media (max-width: 400px) {
  .process-steps  { grid-template-columns: 1fr; }
}

/* ── ABOUT SECTION MOBILE ─────────────────────────────────── */
@media (max-width: 900px) {
  .about-inner { grid-template-columns: 1fr; gap: 40px; }
  .about__bio  { max-width: 100%; }
}

/* ── CONTACT SECTION MOBILE ───────────────────────────────── */
@media (max-width: 600px) {
  .contact-cta  { flex-direction: column; align-items: stretch; }
  .contact-cta .btn { text-align: center; justify-content: center; }
  .contact-links { flex-direction: column; gap: 12px; align-items: center; }
}

/* ── TABLE RESPONSIVE ─────────────────────────────────────── */
.prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── BREADCRUMBS OVERFLOW ─────────────────────────────────── */
.breadcrumbs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; scrollbar-width: none; }
.breadcrumbs::-webkit-scrollbar { display: none; }

/* ── PAGINATION MOBILE ────────────────────────────────────── */
@media (max-width: 480px) {
  .pagination .page-numbers { gap: 4px; }
  .pagination .page-numbers li a,
  .pagination .page-numbers li span { width: 36px; height: 36px; font-size: 0.78rem; }
}

/* ── TOOL CARD MOBILE ─────────────────────────────────────── */
@media (max-width: 480px) {
  .tool-card { flex-direction: column; }
  .tool-card__link { align-self: flex-start; }
}

/* ── 404 MOBILE ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .error-404__actions { flex-direction: column; align-items: stretch; }
  .error-404__actions .btn { text-align: center; justify-content: center; }
}

/* ── TABLET NAV (768-900) ─────────────────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {
  .services-grid  { grid-template-columns: 1fr 1fr; }
  .projects-grid  { grid-template-columns: 1fr 1fr; }
  .posts-grid--3  { grid-template-columns: 1fr 1fr; }
  .process-steps  { grid-template-columns: 1fr 1fr; }
  .stats-grid     { grid-template-columns: 1fr 1fr; }
}

/* ── FOCUS STYLES (accessibility) ────────────────────────── */
:focus-visible {
  outline: 2px solid var(--purple-light);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
a:focus-visible,
button:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; }

/* ── REDUCED MOTION ───────────────────────────────────────── */
@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;
  }
  .marquee-track { animation: none; }
  .hero-orb__ring, .hero-orb__glow, .hero-orb__icon,
  .hero-chip, .hero-badge__dot { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ── HIGH CONTRAST MODE ───────────────────────────────────── */
@media (forced-colors: active) {
  .btn--primary { forced-color-adjust: none; }
  .gradient-text { -webkit-text-fill-color: ButtonText; color: ButtonText; }
}

/* ── DARK MODE SYSTEM (respects OS pref) ─────────────────── */
/* Theme is already dark — this prevents flash on load */
html { color-scheme: dark; }

/* ── PRINT ────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .blog-sidebar,
  .nav-toggle, .nav-cta, .hero__cta,
  .contact-section, .nl-form, .submit-tool-form,
  .pagination, .marquee-wrap, .filter-bar { display: none !important; }

  body  { background: #fff !important; color: #000 !important; font-size: 11pt; }
  h1,h2,h3,h4 { color: #000 !important; }
  a    { color: #000 !important; text-decoration: underline; }
  .gradient-text { -webkit-text-fill-color: #000 !important; color: #000 !important; }

  .post-content,
  .tool-single__content,
  .entry-content { max-width: 100%; }

  .post-card__img,
  .featured-post-card__img { display: none; }

  a[href]::after { content: ' (' attr(href) ')'; font-size: 8pt; color: #555; }
  a[href^='#']::after,
  a[href^='javascript']::after { content: ''; }

  @page { margin: 2cm; }
}