/**
 * Global responsive styles for Human Blockchain theme templates.
 * Breakpoints: 980px, 768px, 520px
 */

/* === Base & layout === */
@media (max-width: 980px) {
  .wrap {
    padding-left: 18px;
    padding-right: 18px;
  }
  .grid {
    grid-template-columns: 1fr !important;
  }
  .row {
    grid-template-columns: 1fr !important;
  }
  .two,
  .three {
    grid-template-columns: 1fr !important;
  }
  .cols {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .ctaRow,
  .actions {
    flex-direction: column;
  }
  .ctaRow .btn,
  .ctaRow a.btn,
  .actions .btn,
  .actions a.btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .wrap {
    padding-left: 12px;
    padding-right: 12px;
  }
  h1 {
    font-size: 1.5rem !important;
  }
  h2 {
    font-size: 1.35rem !important;
  }
  h3 {
    font-size: 1rem !important;
  }
  .btn {
    min-height: 44px;
    padding: 12px 16px;
  }
}

/* === Nav patterns (.nav-inner, .site-nav, .nav-links) === */
@media (max-width: 980px) {
  .nav-inner {
    flex-wrap: wrap;
    padding-left: 16px;
    padding-right: 16px;
  }
  .nav-links {
    width: 100%;
    justify-content: flex-start;
    order: 3;
  }
  .site-nav .nav-inner {
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .nav-inner {
    padding: 12px 14px;
  }
  .nav-links a {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* === Cards & sections === */
@media (max-width: 768px) {
  .card {
    padding: 14px !important;
  }
  .section {
    padding: 20px 0 !important;
  }
  .hero {
    padding: 28px 0 14px !important;
  }
  .mini {
    padding: 12px !important;
  }
}

@media (max-width: 520px) {
  .card {
    padding: 12px !important;
    border-radius: 14px !important;
  }
}

/* === Modals & overlays === */
@media (max-width: 768px) {
  .modal-inner,
  .modal {
    padding: 14px !important;
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* === Footer === */
@media (max-width: 768px) {
  .footer {
    padding: 20px 0 28px !important;
  }
  .footer .cols,
  .footer > div {
    flex-direction: column !important;
    gap: 14px !important;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .footer .small {
    font-size: 11px !important;
  }
}

/* === Forms === */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    min-height: 44px;
    font-size: 16px; /* prevents zoom on iOS */
  }
}

/* === Hero / main content grid === */
@media (max-width: 980px) {
  .hero .grid {
    grid-template-columns: 1fr !important;
  }
}

/* === Tables & pre (overflow scroll on small) === */
@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  pre, .pre, code.block {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* === Disclaimer / page nav (.disclaimer-nav) === */
@media (max-width: 768px) {
  .disclaimer-nav .nav-inner {
    padding: 12px 16px;
  }
  .disclaimer-nav .nav-links {
    width: 100%;
    justify-content: flex-start;
  }
  .disclaimer-nav .nav-links a {
    padding: 10px 12px;
    font-size: 13px;
  }
}

@media (max-width: 520px) {
  .disclaimer-nav .brand-name {
    font-size: 14px;
  }
  .disclaimer-nav .nav-links a {
    padding: 10px 10px;
    font-size: 12px;
  }
}

/* === Pills / pillrow === */
@media (max-width: 768px) {
  .pillrow {
    gap: 8px;
  }
  .pill {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* === Main content padding === */
@media (max-width: 768px) {
  main {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 40px !important;
  }
}

@media (max-width: 520px) {
  main {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* === Utility: hide on small, show on small === */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .show-mobile-only {
    display: none !important;
  }
}