/* ──────────────────────────────────────────────────────────────────
   Idlis site — Responsive layer (v2)
   Loaded AFTER site.css. Adds mobile/tablet behaviour without touching
   the desktop design. Old pages don't load this file, so they are
   unaffected.
   Breakpoints:  ≤900px  → hamburger nav
                 ≤860px  → single-column layouts, reduced spacing/type
                 ≤520px  → phone-scale fine tuning
   ────────────────────────────────────────────────────────────────── */

/* ── Hamburger toggle (hidden on desktop) ─────────────────────────── */
.site-nav-toggle { display: none; }

/* ── Footer store badges ──────────────────────────────────────────── */
.store-badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; scroll-margin-top: 40px; }
.store-badges img { height: 44px; width: auto; display: block; }
.store-badges a { transition: opacity var(--duration-fast) var(--ease-default); }
.store-badges a:hover { opacity: 0.85; }
.store-badges--lg { gap: 16px; }
.store-badges--lg img { height: 56px; }
.site-footer__cta { align-items: center; }
.site-footer__cta > div:last-child { margin-top: 40px; }
.site-mobile-menu { display: none; }

@media (min-width: 1101px) {
  .site-nav-toggle { display: none !important; }
  .site-mobile-menu { display: none !important; }
}

/* ════════════════  ≤ 900px : navigation collapses  ════════════════ */
@media (max-width: 1100px) {
  html { overflow-x: hidden; }

  .site-nav { display: none; }
  .site-header__actions { display: none; }

  .site-header__inner { gap: 16px; }

  .site-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    border-radius: 12px;
    background: transparent;
  }
  .site-nav-toggle:hover { background: rgba(0,0,0,0.05); }
  .site-header.on-dark .site-nav-toggle:hover { background: rgba(255,255,255,0.08); }

  .site-nav-toggle .ham { position: relative; width: 20px; height: 14px; display: block; }
  .site-nav-toggle .ham i {
    position: absolute; left: 0; right: 0; height: 2px;
    background: var(--site-ink); border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, top .25s ease;
  }
  .site-header.on-dark .site-nav-toggle .ham i { background: #fff; }
  .site-nav-toggle .ham i:nth-child(1) { top: 0; }
  .site-nav-toggle .ham i:nth-child(2) { top: 6px; }
  .site-nav-toggle .ham i:nth-child(3) { top: 12px; }
  .site-nav-toggle .ham[data-open="true"] i:nth-child(1) { top: 6px; transform: rotate(45deg); }
  .site-nav-toggle .ham[data-open="true"] i:nth-child(2) { opacity: 0; }
  .site-nav-toggle .ham[data-open="true"] i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

  /* Dropdown panel */
  .site-mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px 18px;
    border-top: 1px solid var(--site-line);
    background: rgba(250, 250, 247, 0.98);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
  }
  .site-header.on-dark .site-mobile-menu {
    background: rgba(20, 0, 40, 0.96);
    border-top-color: rgba(255,255,255,0.08);
  }
  .site-mobile-menu a.nav-link {
    padding: 13px 8px;
    font: 500 16px/1 "Inter";
    color: var(--site-ink);
    border-radius: 8px;
  }
  .site-mobile-menu a.nav-link.is-active { color: var(--site-purple); }
  .site-mobile-menu a.nav-link:hover { background: rgba(0,0,0,0.04); }
  .site-header.on-dark .site-mobile-menu a.nav-link { color: rgba(255,255,255,0.85); }
  .site-header.on-dark .site-mobile-menu a.nav-link.is-active { color: var(--site-lime); }
  .site-header.on-dark .site-mobile-menu a.nav-link:hover { background: rgba(255,255,255,0.08); }
  .site-mobile-menu .menu-actions {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 12px; padding-top: 14px;
    border-top: 1px solid var(--site-line);
  }
  .site-header.on-dark .site-mobile-menu .menu-actions { border-top-color: rgba(255,255,255,0.08); }
  .site-mobile-menu .menu-actions .btn { width: 100%; }
}

/* ════════════════  ≤ 860px : layouts go single-column  ═══════════ */
@media (max-width: 860px) {
  /* Collapse every inline multi-column grid */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* CSS-defined grids */
  .site-footer__cta > div:last-child { margin-top: 0; }
  .site-footer__cta {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 40px 28px;
    border-radius: 24px;
    margin-bottom: 48px;
    gap: 28px;
  }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 40px; }
  .site-footer { padding: 56px 0 32px; }
  .site-footer__bottom {
    flex-direction: column; gap: 8px; align-items: flex-start; text-align: left;
  }

  /* Tame oversized inline spacing */
  [style*="padding-top: 120px"]  { padding-top: 64px !important; }
  [style*="padding-bottom: 120px"]{ padding-bottom: 64px !important; }
  [style*="padding-top: 96px"]   { padding-top: 56px !important; }
  [style*="padding-bottom: 96px"]{ padding-bottom: 56px !important; }
  [style*="padding: 48px"]       { padding: 26px !important; }
  [style*="gap: 80px"]           { gap: 32px !important; }
  [style*="gap: 48px"]           { gap: 28px !important; }
  [style*="max-width: 60%"]      { max-width: 100% !important; }

  /* Decorative illustrations that overlap/float — drop on small screens */
  .illo-optional { display: none !important; }

  /* Responsive display type */
  .h-display-xxl { font-size: 52px; line-height: 1.0; }
  .h-display-xl  { font-size: 44px; line-height: 1.02; }
  .h-display-lg  { font-size: 36px; line-height: 1.05; }
  .h-display-md  { font-size: 30px; line-height: 1.1; }
  .h-display-sm  { font-size: 23px; line-height: 1.2; }
  .lead { font-size: 18px; line-height: 1.5; }

  /* Phone carousel scales down */
  .phone-carousel {
    width: min(320px, 80vw) !important;
    height: auto !important;
    aspect-ratio: 340 / 690;
  }
}

/* ════════════════  ≤ 520px : phone-scale fine tuning  ════════════ */
@media (max-width: 520px) {
  :root { --gutter: 20px; }

  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 24px; }

  [style*="padding-top: 120px"]  { padding-top: 52px !important; }
  [style*="padding-bottom: 120px"]{ padding-bottom: 52px !important; }

  .h-display-xxl { font-size: 40px; }
  .h-display-xl  { font-size: 34px; }
  .h-display-lg  { font-size: 30px; }
  .h-display-md  { font-size: 26px; }
  .h-display-sm  { font-size: 21px; }
  .lead { font-size: 16px; }

  .phone-carousel { width: min(300px, 86vw) !important; }
}

.site-nav a{white-space:nowrap}