/* ==========================================================================
   AGGARWAL FABRICS - RESPONSIVE STYLESHEET
   Mobile-first breakpoints + progressive desktop header degradation
   ========================================================================== */

/* ---------- ≥ 576 px (sm) ---------- */
@media (min-width: 576px) {
  .af-hero-stats { gap: 2rem; }
}

/* ---------- ≥ 768 px (md) ---------- */
@media (min-width: 768px) {
  .af-form-card.compact { padding: 2.5rem; }
}

/* ---------- ≥ 992 px (lg) ---------- */
@media (min-width: 992px) {
  .af-hero-visual { aspect-ratio: 4/5; }
}

/* ==========================================================================
   HEADER - PROGRESSIVE DESKTOP DEGRADATION
   Three tiers, all without clipping:
     Tier 1 (≥1400px)      → Full layout: brand+tagline, 8 nav items @ comfy
                              spacing, phone icon + "Call us anytime" + number,
                              "Get a Quote" button
     Tier 2 (1200-1399px)  → Hide "Call us anytime" small label, keep number,
                              tighten nav spacing
     Tier 3 (992-1199px)   → Brand tagline hidden, phone-text fully hidden
                              (icon-only tel: link), nav items at minimum
                              padding, button compact
     Tier 4 (<992px)       → Hamburger menu (mobile)
   ========================================================================== */

/* ---------- Tier 3: 992–1199 px (small laptop / large tablet landscape) ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .af-brand-text span:last-child { display: none; }      /* drop "Non Woven Excellence" tagline */
  .af-brand { font-size: 1.25rem; }
  .af-brand-text span:first-child { font-size: 1.05rem; }
  .af-brand-mark { width: 42px; height: 42px; font-size: 1.1rem; }

  .af-nav .nav-item { margin: 0; }
  .af-nav .nav-link { padding: 7px 8px !important; font-size: .85rem; gap: 5px; }
  .af-nav .nav-link .nav-ic { font-size: .9rem; }

  .af-phone-cta .phone-text { display: none; }           /* icon-only phone */
  .af-phone-cta .phone-icon { width: 38px; height: 38px; }

  .af-header-cta { gap: 10px; }
  .af-header-cta .btn { padding: 9px 14px; font-size: .82rem; }
  .af-header-cta .btn i { display: none; }               /* hide button icon at narrow widths */
}

/* ---------- Tier 2: 1200–1399 px (laptop / standard desktop) ---------- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .af-brand-text span:last-child { font-size: .58rem; letter-spacing: .18em; }
  .af-nav .nav-item { margin: 0 1px; }
  .af-nav .nav-link { padding: 8px 10px !important; font-size: .9rem; gap: 6px; }

  .af-phone-cta .phone-text small { display: none; }     /* drop "Call us anytime" label */
  .af-phone-cta .phone-text strong { font-size: .95rem; }

  .af-header-cta { gap: 12px; }
  .af-header-cta .btn { padding: 10px 16px; font-size: .85rem; }
}

/* ---------- Tier 1: ≥ 1400 px (full layout) ---------- */
@media (min-width: 1400px) {
  .af-nav .nav-item { margin: 0 3px; }
  .af-nav .nav-link { padding: 8px 14px !important; }
}

/* ---------- ≤ 991 px (mobile / hamburger) ---------- */
@media (max-width: 991.98px) {
  /* The collapse region drops below the brand row; reset flex layout */
  .af-navbar > .container { flex-wrap: wrap; gap: 0; }
  .navbar-collapse#afMainNav {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .af-nav {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    padding: 1rem 0;
    gap: 4px;
  }
  .af-nav .nav-item { margin: 2px 0; }
  .af-nav .nav-link { padding: 10px 12px !important; font-size: 1rem; }
  .af-nav .nav-link.active::after { display: none; }
  .af-nav .dropdown-menu {
    box-shadow: none;
    border: 0;
    padding: 0 0 0 12px;
    margin-top: 0 !important;
    background: transparent;
    min-width: 0;
  }
  .af-nav .dropdown-item { color: var(--af-muted); font-size: .9rem; padding: 8px 12px; }

  /* Mobile CTA: full-width stack, phone visible as icon+number, button full width */
  .af-header-cta {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin: 0 0 1rem 0;
    gap: 12px;
    padding: 0 4px;
  }
  .af-phone-cta {
    justify-content: center;
    padding: 10px 16px;
    background: var(--af-surface-2);
    border-radius: var(--af-r-md);
  }
  .af-phone-cta .phone-text { display: flex; }          /* show full text on mobile */
  .af-header-cta .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
    font-size: .95rem;
  }

  .af-hero { padding-top: 4rem; padding-bottom: 3rem; }
  .af-hero-visual { margin-top: 2.5rem; aspect-ratio: 16/12; }

  .af-cta-strip { padding: 2.5rem 1.5rem; }
}

/* ---------- ≤ 767 px (mobile portrait) ---------- */
@media (max-width: 767.98px) {
  :root { --af-header-h: var(--af-header-h-sm); }

  .announce-bar .ann-secondary { display: none; }
  .announce-bar { font-size: .78rem; padding: 7px 0; }

  .af-brand-text span:last-child { font-size: .58rem; }
  .af-brand-mark { width: 42px; height: 42px; font-size: 1.05rem; }
  .af-brand { font-size: 1.2rem; }
  .af-brand-text span:first-child { font-size: 1rem; }

  .af-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .af-hero-stats .stat-val { font-size: 1.75rem; }

  .af-footer { padding-top: 3rem; }
  .af-footer h5 { margin-top: 1.5rem; }
  .af-footer-bottom { justify-content: center; text-align: center; flex-direction: column; }
  .af-footer-bottom .legal-links { justify-content: center; }

  .af-form-card { padding: 1.5rem; }
  .af-form-card.compact { padding: 1.25rem; }

  .af-cta-strip { padding: 2rem 1.25rem; }
  .af-cta-strip h2 { font-size: 1.5rem; }

  .af-whatsapp { width: 48px; height: 48px; font-size: 1.25rem; bottom: 18px; left: 18px; }
  .af-back-top { width: 42px; height: 42px; bottom: 18px; right: 18px; }

  .product-price .amount { font-size: 1.5rem; }

  .af-page-header { padding: 3rem 0 2.5rem; }
}

/* ---------- ≤ 480 px ---------- */
@media (max-width: 479.98px) {
  .af-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .af-hero h1 { font-size: 1.85rem; }
  .btn { padding: 12px 20px; font-size: .88rem; }
  .af-feature, .af-card .af-card-body { padding: 1.25rem; }

  /* Brand at smallest size - keep readable but compact */
  .af-brand-mark { width: 38px; height: 38px; font-size: .95rem; }
  .af-brand-text span:first-child { font-size: .95rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}