/* ============================================================
   AUCTION247 — RESPONSIVE / MOBILE STYLESHEET
   Full site mobile-first overrides
   Breakpoints: 1200 / 1024 / 900 / 640 / 480 / 380
   ============================================================ */

/* ── Global: prevent horizontal scroll ───────────────────── */
html, body { overflow-x: hidden; }
* { box-sizing: border-box; }

/* ── Global: trust bar text should be dark (#111) on yellow ─ */
.trust-item { color: #fff !important; }
.trust-item .check { background: rgba(255,255,255,0.25); color: #fff; }

/* ── Global: ensure buttons are touchable ────────────────── */
.btn { min-height: 44px; }

/* ── Fix: form submit button text contrast ───────────────── */
.wpcf7-form .wpcf7-submit,
.a247-form .btn-submit { color: #fff; }

/* ============================================================
   BREAKPOINT: 1200px — Large tablet landscape
   ============================================================ */
@media (max-width: 1200px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
  .footer-brand { grid-column: 1 / -1; }

  .hero__title { font-size: clamp(2.5rem, 6vw, 4.5rem); }
}

/* ============================================================
   BREAKPOINT: 1024px — Tablet landscape
   ============================================================ */
@media (max-width: 1024px) {
  .about-grid { gap: 40px; }
  .contact-grid { gap: 24px; }
  .process-steps { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

/* ============================================================
   BREAKPOINT: 900px — Tablet portrait / nav breakpoint
   ============================================================ */
@media (max-width: 900px) {

  /* ── HEADER ── */
  .header-inner { height: 64px; }

  /* Stack/hide CTAs at breakpoint — show only one key button */
  .header-ctas .btn-outline { display: none; }
  .header-ctas .btn-primary.btn-sm,
  .header-ctas .btn-sm { padding: 10px 16px; font-size: 0.82rem; }

  /* Mobile nav open state — drops cleanly below header */
  .main-nav.open {
    display: block !important;
    position: absolute;
    /* Relative to the fixed #site-header via its stacking context */
    top: 64px;
    left: 0;
    right: 0;
    background: #111111;
    border-bottom: 2px solid var(--color-primary);
    padding: 8px 0 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.7);
    z-index: 2000;
    animation: mobileNavIn 0.2s ease both;
    /* Scrollable if many items */
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Critical: ensure links receive pointer events */
    pointer-events: auto;
  }
  .main-nav.open ul {
    flex-direction: column;
    gap: 0;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  /* All nav links — full-width, easy tap target */
  .main-nav.open li {
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .main-nav.open li:last-child { border-bottom: none; }
  .main-nav.open > ul > li > a {
    display: block;
    width: 100%;
    padding: 15px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    /* Remove desktop underline pseudo-element on mobile */
    position: static;
  }
  .main-nav.open > ul > li > a::after { display: none !important; }
  .main-nav.open > ul > li > a:hover,
  .main-nav.open .current-menu-item > a { color: var(--color-primary); }
  /* Sub-menus inline on mobile */
  .main-nav.open .sub-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: rgba(255,255,255,0.04);
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
    z-index: auto;
  }
  .main-nav.open .sub-menu li { border-bottom: 1px solid rgba(255,255,255,0.04); }
  .main-nav.open .sub-menu a {
    padding: 12px 20px 12px 36px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.6);
  }
  .main-nav.open .sub-menu a:hover { color: var(--color-primary); }

  /* ── HERO ── */
  .hero { padding: 80px 20px 50px; min-height: auto; }
  .hero__title { font-size: clamp(2.2rem, 8vw, 3.5rem); }
  .hero__sub { font-size: 1rem; }
  .hero__ctas { flex-direction: column; align-items: center; gap: 10px; }
  .hero__ctas .btn { width: 100%; max-width: 320px; justify-content: center; }

  /* Hero ticker — hide on smaller tablets, use space for content */
  .hero__ticker { display: none; }

  /* ── PAGE HERO ── */
  .page-hero { padding: 90px 20px 40px; }
  .page-hero h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); }

  /* ── TRUST BAR ── */
  .trust-bar { padding: 16px 0; }
  .trust-bar__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
    text-align: left;
    padding: 0 16px;
  }
  .trust-item { font-size: 0.82rem; }

  /* ── STATS ── */
  .stat-item { padding: 24px 12px; }

  /* ── HOW IT WORKS ── */
  .how-step { padding: 32px 16px; }

  /* ── SELL TEASER ── */
  .sell-teaser { padding: 56px 20px; }
  .sell-teaser h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
  .sell-teaser > div > div[style] {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .sell-teaser .btn { width: 100%; max-width: 300px; justify-content: center; }

  /* ── FORMS ── */
  .wpcf7-form, .a247-form { padding: 24px 20px; }
  .contact-info { padding: 24px 20px; }

  /* ── ABOUT ── */
  .about-grid { gap: 32px; }
  .differentiator-grid { grid-template-columns: 1fr; }

  /* ── PROCESS STEPS ── */
  .process-steps { grid-template-columns: 1fr; gap: 40px; max-width: 480px; margin: 0 auto; }

  /* ── FOOTER ── */
  #site-footer { padding: 40px 0 0; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom { flex-direction: column; text-align: center; gap: 10px; }
  .footer-bottom-links { justify-content: center; flex-wrap: wrap; gap: 12px; }
}

/* ============================================================
   BREAKPOINT: 640px — Mobile landscape / large phone
   ============================================================ */
@media (max-width: 640px) {

  /* ── CONTAINER ── */
  .container { padding: 0 16px; }

  /* ── HEADER ── */
  .header-ctas { gap: 8px; }

  /* ── HERO ── */
  .hero { padding: 72px 16px 40px; }
  .hero__eyebrow { font-size: 0.72rem; padding: 5px 12px; text-align: center; }

  /* ── TRUST BAR ── */
  .trust-bar__inner {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 0 16px;
  }
  .trust-item { justify-content: flex-start; }

  /* ── STATS ── */
  .grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-item { padding: 20px 8px; }
  .stat-number { font-size: clamp(1.8rem, 8vw, 2.8rem); }

  /* ── NEWSLETTER ── */
  .newsletter-section { padding: 40px 0; }
  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
  }
  .newsletter-form input[type="email"] { min-width: auto; width: 100%; }
  .newsletter-form .btn { width: 100%; justify-content: center; }

  /* ── SELL TEASER ── */
  .sell-benefits { flex-direction: column; align-items: flex-start; padding: 0 8px; }
  .sell-benefit-item { font-size: 0.875rem; }

  /* ── FAQ ── */
  .faq-question { font-size: 0.875rem; padding: 14px 16px; gap: 10px; }
  .faq-answer-inner { padding: 0 16px 14px; font-size: 0.875rem; }

  /* ── CONTACT ── */
  .contact-grid { grid-template-columns: 1fr; gap: 20px; }
  .wpcf7-form, .a247-form { padding: 20px 16px; }
  .contact-info { padding: 20px 16px; }

  /* ── LOT DETAIL ── */
  .lot-detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .lot-gallery { position: static; }
  .lot-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
  .lot-tabs__btn { padding: 10px 14px; font-size: 0.8rem; }
  .lot-bid-box { padding: 16px; }
  .lot-bid-box .bid-amount { font-size: 1.8rem; }

  /* ── SELLER BENEFITS ── */
  .seller-benefits-grid { grid-template-columns: 1fr; }

  /* ── FOOTER ── */
  .footer-bottom-links { gap: 8px; }
  .footer-bottom-links a { font-size: 0.78rem; }

  /* ── FORMS (GENERAL) ── */
  .wpcf7-form .wpcf7-submit,
  .a247-form .btn-submit { font-size: 0.9rem; }

  /* ── SECTION SPACING ── */
  :root { --section-py: 40px; }
  .section-header { margin-bottom: 32px; }
}

/* ============================================================
   BREAKPOINT: 480px — Typical phone
   ============================================================ */
@media (max-width: 480px) {

  /* ── HEADER ── */
  .site-logo-text { font-size: 1.1rem; }
  .header-logo-img { height: 38px; max-width: 150px; }

  /* ── HERO ── */
  .hero__title { font-size: clamp(1.9rem, 9vw, 2.8rem); letter-spacing: -0.02em; }
  .hero__sub { font-size: 0.925rem; }

  /* ── BUTTONS ── */
  .btn-lg { padding: 14px 24px; font-size: 0.95rem; }

  /* ── TRUST BAR ── */
  .trust-bar { padding: 14px 0; }

  /* ── STATS ── */
  .stat-number { font-size: clamp(1.6rem, 7vw, 2.4rem); }

  /* ── AUCTION CARDS (custom theme) ── */
  .auction-card__body { padding: 16px; }
  .auction-card__actions { flex-direction: column; }
  .auction-card__actions .btn { flex: unset; width: 100%; }

  /* ── AF BRIDGE: cards go full-width ── */
  .bp-lots .bp-lot.bp-lot_auction {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* ── AF BRIDGE: search/filter stacks ── */
  .bp-search-section,
  .bp-search-in-auction,
  .bp-search-wrap { flex-direction: column !important; gap: 8px !important; }

  /* ── AF BRIDGE: login/register forms ── */
  .bp-profile-wrapper,
  #bp-registration-wrapper,
  .bp-login-form {
    padding: 24px 16px !important;
    margin: 24px auto !important;
    border-radius: 10px !important;
  }

  /* ── FOOTER ── */
  .footer-logo-img { max-width: 140px; }
  .footer-grid { gap: 24px; }

  /* ── PAGE HERO ── */
  .page-hero { padding: 80px 16px 32px; }

  /* ── ABOUT GRID ── */
  .about-grid { grid-template-columns: 1fr; gap: 24px; }

  /* ── HOW IT WORKS ── */
  .how-step { padding: 24px 12px; }
  .how-step__icon { font-size: 2rem; }
  .how-step__num { width: 48px; height: 48px; font-size: 1.2rem; }

  /* ── PROCESS STEPS ── */
  .process-step { padding: 36px 20px 24px; }

  /* ── SECTION HEADERS ── */
  .section-header h2 { font-size: clamp(1.5rem, 6vw, 2rem); }

  /* ── SECTION SPACING ── */
  :root { --section-py: 36px; }
}

/* ============================================================
   BREAKPOINT: 380px — Small phone (iPhone SE, older Androids)
   ============================================================ */
@media (max-width: 380px) {

  /* ── HEADER ── */
  .header-inner { gap: 8px; }
  .header-ctas .btn-sm { padding: 9px 12px; font-size: 0.78rem; }

  /* ── HERO ── */
  .hero { padding: 68px 12px 36px; }
  .hero__title { font-size: clamp(1.7rem, 10vw, 2.4rem); }
  .hero__ctas .btn { max-width: 100%; }

  /* ── TRUST BAR ── */
  .trust-item { font-size: 0.78rem; }
  .trust-item .check { width: 18px; height: 18px; font-size: 0.65rem; }

  /* ── STATS ── */
  .grid-4 { grid-template-columns: 1fr !important; }

  /* ── BUTTONS ── */
  .btn { padding: 12px 18px; font-size: 0.88rem; }
  .btn-lg { padding: 13px 20px; font-size: 0.92rem; }

  /* ── CONTAINER ── */
  .container { padding: 0 12px; }

  /* ── AF CARDS ── */
  .bp-lots .bp-lot.bp-lot_auction { border-radius: 10px !important; }
  .bp-lot__content { padding: 16px !important; }

  /* ── FOOTER ── */
  .footer-bottom-links { flex-direction: column; align-items: center; gap: 6px; }

  /* ── SECTION SPACING ── */
  :root { --section-py: 32px; }
}

/* ============================================================
   MOBILE NAV ANIMATION KEYFRAME
   ============================================================ */
@keyframes mobileNavIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   AF BRIDGE — ADDITIONAL MOBILE RESPONSIVE
   (must !important to override AP plugin defaults)
   ============================================================ */

/* AF cards: 2-up at tablet 480-720px */
@media (min-width: 481px) and (max-width: 720px) {
  .bp-lots .bp-lot.bp-lot_auction {
    flex: 0 0 calc(50% - 12px) !important;
    max-width: calc(50% - 12px) !important;
    width: calc(50% - 12px) !important;
  }
}

/* AF search toolbar — stack vertically on mobile */
@media (max-width: 640px) {
  .bp-search-section > *,
  .bp-search-in-auction > * { width: 100% !important; }

  .bp-header.bp-header-simple { min-height: 120px !important; }
  .bp-header.bp-row.bp-single-page { min-height: 100px !important; }

  /* AF form padding */
  .bp-profile-wrapper,
  #bp-registration-wrapper,
  .bp-login-form {
    padding: 24px 16px !important;
    margin: 16px auto !important;
  }

  /* AF thanks page */
  #thanks-page {
    padding: 24px 16px !important;
    margin: 16px auto !important;
  }
}

/* ============================================================
   UTILITY: touch-friendly link tap targets
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover transforms on touch — prevents sticky hover states */
  .auction-card:hover { transform: none; }
  .btn:hover { transform: none !important; }
  .bp-lot.bp-lot_auction:hover { transform: none !important; }

  /* Make nav links easier to tap */
  .main-nav a { padding: 10px 16px; }

  /* Ensure category card counts always show on touch */
  .category-card__count { opacity: 1; transform: translateY(0); }
}