/* ==========================================================================
   Mediator Town — responsive.css
   Mobile-first overrides. Base/desktop rules live in style.css.
   ========================================================================== */

/* ---------- ~1180px: tighten container & big type ---------- */
@media (max-width:1180px){
  :root{
    --text-6xl: 3.5rem;
    --text-5xl: 2.85rem;
    --container-w: 1080px;
  }
}

/* ---------- ~1024px: tablet grids ---------- */
@media (max-width:1024px){
  .container{ padding-inline:var(--space-5); }
  .hero .container.hero-grid{ grid-template-columns:1fr; gap:var(--space-8); }
  .hero-visual{ order:-1; max-width:520px; margin-inline:auto; }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .process-grid{ grid-template-columns:repeat(2,1fr); }
  .tools-grid{ grid-template-columns:repeat(4,1fr); }
  .why-grid{ grid-template-columns:1fr 1fr; }
  .why-grid.category-grid{ grid-template-columns:1fr 1fr 1fr; }
  .portfolio-grid{ grid-template-columns:repeat(2,1fr); }
  .about-grid{ grid-template-columns:1fr; gap:var(--space-7); }
  .about-visual{ order:-1; max-width:440px; margin-inline:auto; }
  .project-meta-grid{ grid-template-columns:repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; gap:var(--space-8); }
  .services-detail-row{ grid-template-columns:1fr; }
  .services-detail-row .service-visual{ order:-1; }
  .web-project-grid{ grid-template-columns:1fr; gap:var(--space-6); }
  .web-project-grid .device-stack{ order:-1; max-width:440px; margin-inline:auto; }
  .biz-grid{ grid-template-columns:repeat(3,1fr); }
  .pricing-grid{ grid-template-columns:repeat(2,1fr); }
  .gen-services-grid{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- ~960px: collapse navigation to mobile menu ---------- */
@media (max-width:960px){
  .nav-toggle{ display:flex; }
  .header-inner{ position:relative; }

  /* The mobile nav panel below is position:fixed with its own stacking
     context (it animates via transform), which paints above normal-flow
     siblings regardless of DOM order. Give the logo and the toggle button
     an explicit z-index so they stay visible/clickable above the open
     panel instead of being covered by it. */
  .logo, .nav-toggle{ position:relative; z-index:1; }

  .site-nav{
    position:fixed;
    inset:var(--header-h) 0 0 0;
    background:var(--color-bg);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:var(--space-6) var(--space-5) var(--space-8);
    overflow-y:auto;
    transform:translateX(100%);
    opacity:0;
    visibility:hidden;
    transition: transform var(--dur-base) var(--ease-in-out), opacity var(--dur-base), visibility var(--dur-base);
  }
  .nav-toggle-input:checked ~ .site-nav{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
  }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(2){ opacity:0; }
  .nav-toggle-input:checked ~ .nav-toggle span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

  .site-nav > ul{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .site-nav > ul > li{ width:100%; border-bottom:1px solid var(--color-border); }
  .site-nav > ul > li > a{
    display:flex; align-items:center; justify-content:space-between;
    padding:1.1rem .25rem;
    font-size:var(--text-lg);
  }
  .site-nav > ul > li > a::after{ display:none; }
  /* The generic rule above sets justify-content:space-between so a lone
     link's text sits at the left edge. .has-dropdown > a has TWO flex
     children (the chevron + the text) though, so space-between shoves
     them to opposite ends of the row — chevron far left, label far right
     — instead of sitting together like every plain link's label does. */
  .has-dropdown > a{ justify-content:flex-start; gap:.5rem; }
  /* .has-dropdown:hover/:focus-within .dropdown (style.css) is a compound
     selector with higher specificity than a plain .dropdown rule here, so
     it wins regardless of load order and re-applies the desktop centered
     flyout transform (translateX(-50%)) the instant the mobile link is
     tapped and focused -- shifting the whole submenu off-screen left. This
     matches that selector's specificity and lands after it in source
     order, so it actually wins the override. Mobile only ever uses the
     .is-open class below, never :hover/:focus-within. */
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown{
    transform:none;
  }
  /* Collapsed by default; main.js toggles .is-open on tap since the
     parent link also navigates and can't be relied on for hover/focus
     here. max-height (not display) so the collapse/expand animates. */
  .dropdown{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    box-shadow:none;
    border:0;
    border-radius:0;
    padding:0 0 0 1rem;
    min-width:0;
    background:transparent;
    max-height:0;
    overflow:hidden;
    transition:max-height var(--dur-base) var(--ease-out);
  }
  .has-dropdown.is-open .dropdown{ max-height:300px; padding-bottom:.75rem; }
  .has-dropdown.is-open > a::before{ transform:rotate(225deg); margin-top:2px; }
  .dropdown li a{ padding:.65rem .5rem; font-size:var(--text-base); }
  .nav-cta{
    margin-top:var(--space-5);
    width:100%;
    text-align:center;
    padding-block:1rem;
  }
  .theme-toggle{ margin-top:var(--space-4); }
}

/* ---------- ~768px: mobile layout ---------- */
@media (max-width:768px){
  :root{
    --text-6xl: 2.55rem;
    --text-5xl: 2.2rem;
    --text-4xl: 1.85rem;
    --text-3xl: 1.55rem;
    --header-h: 72px;
  }
  .section{ padding-block:var(--space-7); }
  .section-tight{ padding-block:var(--space-6); }
  .container{ padding-inline:var(--space-4); }
  .logo-word{ font-size:1.05rem; }

  .hero{ padding-top:var(--space-7); padding-bottom:var(--space-7); }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-stats{ grid-template-columns:1fr 1fr; }

  .services-grid{ grid-template-columns:1fr; }
  .process-grid{ grid-template-columns:1fr; }
  .tools-grid{ grid-template-columns:repeat(3,1fr); }
  .why-grid{ grid-template-columns:1fr; }
  .why-grid.category-grid{ grid-template-columns:1fr; }
  .portfolio-grid{ grid-template-columns:1fr; }
  .portfolio-slider .portfolio-card{ width:85vw; }
  .slider-arrow{ width:38px;height:38px; }
  .form-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--space-6); }
  .footer-brand{ grid-column:1 / -1; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .project-meta-grid{ grid-template-columns:1fr; }
  .final-cta-inner{ flex-direction:column; text-align:center; gap:var(--space-5); }
  .final-cta-inner .btn{ width:100%; }
  .quote-callout{ flex-direction:column; text-align:center; padding:var(--space-5); }
  .quote-callout-actions{ width:100%; }
  .quote-callout-actions .btn{ width:100%; }
  .marquee-item{ font-size:var(--text-base); }
  .page-hero{ padding-top:var(--space-6); padding-bottom:var(--space-6); }
  table.compare-table{ font-size:var(--text-sm); }

  .biz-grid{ grid-template-columns:1fr 1fr; }
  .pricing-grid{ grid-template-columns:1fr; }
  .gen-services-grid{ grid-template-columns:1fr 1fr; }
  .pricing-reveal-head{ flex-direction:column; align-items:flex-start; }
  .mt-modal-overlay{ padding:0; align-items:flex-end; }
  .mt-modal{
    max-width:100%; width:100%; max-height:92vh;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:var(--space-6) var(--space-5);
    transform:translateY(100%) scale(1);
  }
  .mt-modal-overlay.is-open .mt-modal{ transform:translateY(0) scale(1); }
}

/* ---------- ~480px: small phones ---------- */
@media (max-width:480px){
  :root{ --text-6xl: 2.1rem; --text-5xl: 1.9rem; }
  .hero-stats{ grid-template-columns:1fr; }
  .tools-grid{ grid-template-columns:repeat(2,1fr); }
  .card{ padding:var(--space-5); }
  .ai-mock{ transform:scale(.92); transform-origin:top center; padding:1.1rem; }
}

/* ---------- Print ---------- */
@media print{
  .site-header,.site-footer,.accent-3d,.nav-toggle{ display:none !important; }
}