/* ================================================================
   RESPONSIVE FIXES — SolidVPS
   Supplemental breakpoints and mobile improvements.
   This file is loaded after style.css and nav-responsive.css.
   ================================================================ */

/* ── Touch targets: minimum 44px for all interactive elements ─── */
@media (max-width: 991.98px) {
  .nav-link-svps {
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }
  .btn-primary-svps,
  .btn-secondary-svps,
  .btn-order,
  .btn-nav-cta {
    min-height: 44px;
  }
  .accordion-btn-svps,
  .faq-btn {
    min-height: 44px;
  }
}

/* ── Navbar: mobile (<768px) touch sizing ────────────────────── */
@media (max-width: 767.98px) {
  .navbar-svps .nav-link-svps {
    font-size: 14px;
    padding: 12px 10px !important;
  }
  .dropdown-menu-svps {
    min-width: calc(100vw - 32px) !important;
    max-width: 100vw;
  }
  .navbar-svps .btn-nav-cta {
    margin: 8px 10px 4px !important;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .dropdown-menu-svps {
    min-width: calc(100vw - 24px) !important;
  }
  .navbar-svps .nav-link-svps {
    font-size: 13px;
    padding: 10px 8px !important;
  }
}

/* ── Hero CTA buttons: stack full-width on mobile ────────────── */
@media (max-width: 576px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
  }
  .hero-actions .btn-primary-svps,
  .hero-actions .btn-secondary-svps {
    width: 100%;
    justify-content: center;
  }
  .btn-order {
    width: 100%;
    justify-content: center;
  }
}

/* ── Tables: ensure table-responsive on all pricing tables ──── */
@media (max-width: 767.98px) {
  /* If a table doesn't have .table-responsive wrapper, add overflow at the section level */
  .section-py .table-svps {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Server category block tables: mobile card layout ────────── */
@media (max-width: 991.98px) {
  .server-category-block .table-svps {
    min-width: 0 !important;
  }
  .server-category-block .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Pricing plan badge: scale on small screens ─────────────── */
@media (max-width: 576px) {
  .plan-badge {
    top: -10px;
    font-size: 10px;
    padding: 4px 14px;
  }
}
@media (max-width: 380px) {
  .plan-badge {
    top: -8px;
    font-size: 9px;
    padding: 3px 10px;
  }
}

/* ── Plan amount: scale on very small screens ────────────────── */
@media (max-width: 380px) {
  .plan-amount { font-size: 1.8rem; }
}

/* ── FAQ / Accordion: consistent touch targets ───────────────── */
@media (max-width: 767.98px) {
  .faq-btn {
    min-height: 44px;
    padding: 14px 16px;
  }
  .faq-body {
    padding: 0 16px 14px;
  }
}
@media (max-width: 576px) {
  .faq-btn {
    padding: 14px 12px;
    font-size: 14px;
  }
  .faq-icon {
    width: 24px;
    height: 24px;
    font-size: 14px;
    flex-shrink: 0;
  }
}

/* ── Location tabs: shrink on small screens ─────────────────── */
@media (max-width: 480px) {
  .location-tabs {
    gap: 4px;
  }
  .loc-tab {
    padding: 6px 10px;
    font-size: 12px;
    flex: 1 1 auto;
    text-align: center;
  }
}
@media (max-width: 360px) {
  .loc-tab {
    padding: 6px 8px;
    font-size: 11px;
  }
}

/* ── Section eyebrow: scale letter-spacing on mobile ─────────── */
@media (max-width: 576px) {
  .section-eyebrow,
  .page-hero-eyebrow-text,
  .section-label {
    font-size: 10px;
    letter-spacing: 1.8px;
  }
  .section-eyebrow::before,
  .section-label::before {
    width: 20px;
  }
}

/* ── Map: consistent breakpoints ────────────────────────────── */
@media (max-width: 576px) {
  #leafletMap { height: 280px; }
}
@media (max-width: 480px) {
  #leafletMap { height: 240px; }
}
@media (max-width: 360px) {
  #leafletMap { height: 200px; }
}

/* ── Ultra-small screens (320px–360px) ──────────────────────── */
@media (max-width: 360px) {
  .hero-title {
    font-size: clamp(1.7rem, 9vw, 2rem);
  }
  .page-hero h1,
  .page-hero .hero-title,
  .page-hero-title {
    font-size: clamp(1.5rem, 8vw, 1.8rem);
  }
  .section-title {
    font-size: clamp(1.4rem, 6vw, 1.7rem);
  }
  .section-py {
    padding: 28px 0;
  }
  .page-hero {
    padding: 32px 0 22px;
  }
  .table-svps tbody tr td,
  .table-svps thead tr th {
    padding: 6px 8px;
    font-size: 11px;
  }
  .hero-stat .s-num,
  .stat-num {
    font-size: 1.5rem;
  }
  .card-svps {
    padding: 20px 16px;
  }
}

/* ── Footer: 2-column on tablet, single-column on phone ──────── */
@media (min-width: 577px) and (max-width: 767px) {
  .footer-svps .col-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }
}
@media (max-width: 576px) {
  .footer-links a {
    font-size: 13px;
  }
  .footer-col-head,
  .footer-heading {
    font-size: 10px;
    margin-bottom: 12px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
  .footer-bottom-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
  }
}

/* ── iOS Safari: fix 100vh quirk on page hero ────────────────── */
@supports (-webkit-touch-callout: none) {
  .hero-section {
    min-height: -webkit-fill-available;
  }
}

/* ── Prevent any horizontal overflow on all viewports ────────── */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* ── Ensure images never overflow their containers ───────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Table cells: word-break for long strings on mobile ──────── */
@media (max-width: 576px) {
  .table-svps td,
  .table-svps th {
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ── Announcement bar: wrap text on mobile ───────────────────── */
@media (max-width: 576px) {
  .announcement-bar {
    font-size: 12px;
    padding: 8px 12px;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
  }
}

/* ── Feature/plan cards: consistent gap on mobile ────────────── */
@media (max-width: 576px) {
  .row.g-4 {
    --bs-gutter-y: 1rem;
    --bs-gutter-x: 0.75rem;
  }
  .row.g-5 {
    --bs-gutter-y: 1.25rem;
    --bs-gutter-x: 1rem;
  }
}

/* ── Ensure dropdown menus don't escape viewport on mobile ───── */
@media (max-width: 991.98px) {
  .dropdown-menu-svps {
    transform: none !important;
    position: static !important;
    width: 100%;
    box-shadow: none;
    border: none;
    background: rgba(255, 255, 255, 0.03);
    margin-top: 4px !important;
  }
}

/* ── Print: hide nav, footer, decorative elements ────────────── */
@media print {
  .navbar-svps,
  .footer-svps,
  .announcement-bar,
  .hero-glow-1,
  .hero-glow-2,
  .canvas-bg {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
  a {
    color: #000;
    text-decoration: underline;
  }
}