/* =========================================================
   File: assets/css/responsive.css
   Project: DumagueteAA QCS Lite
   Version: 0.1.0

   Purpose:
   Responsive refinements.

   Mobile-first philosophy:
   - Preserve readability
   - Preserve calm navigation
   - Preserve meeting accessibility
   - Preserve event readability
   - Avoid complex breakpoints

   ========================================================= */


/* =========================================================
   01) LARGE TABLETS
   ========================================================= */

@media (max-width: 1024px) {

  .daa-section {
    padding-left: var(--daa-space-md);
    padding-right: var(--daa-space-md);
  }

}


/* =========================================================
   02) TABLETS
   ========================================================= */

@media (max-width: 900px) {

  .daa-grid--two,
  .daa-grid--three {
    grid-template-columns: 1fr;
  }

  .daa-nav {
    flex-wrap: wrap;
  }

}


/* =========================================================
   03) MOBILE
   ========================================================= */

@media (max-width: 768px) {

  .daa-section {
    padding:
      var(--daa-space-lg)
      var(--daa-space-sm);
  }

  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.75rem;
  }

  h3 {
    font-size: 1.375rem;
  }

}


/* =========================================================
   04) SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .daa-nav {
    gap: var(--daa-space-sm);
  }

  .daa-card,
  .daa-event-card,
  .daa-convention-teaser {
    padding: var(--daa-space-sm);
  }

}


/* =========================================================
   05) MEETING TABLE SAFETY
   ========================================================= */

@media (max-width: 768px) {

  .daa-meeting-table,
  .ninja_table_wrapper,
  .ninja-tables {
    overflow-x: auto;
  }

}


/* =========================================================
   06) LOCATION CARDS
   ========================================================= */

@media (max-width: 768px) {

  .daa-location-card {
    width: 100%;
  }

}


/* =========================================================
   07) EVENT OBJECTS
   ========================================================= */

@media (max-width: 768px) {

  .daa-event-details {
    gap: var(--daa-space-xs);
  }

}


/* =========================================================
   08) FORMS
   ========================================================= */

@media (max-width: 768px) {

  .daa-form input,
  .daa-form textarea,
  .daa-form select {
    font-size: 16px;
  }

}


/* =========================================================
   09) FOOTER
   ========================================================= */

@media (max-width: 768px) {

  .daa-site-footer {
    text-align: center;
  }

}


/* =========================================================
   10) FUTURE CAPABILITY NOTES
   ========================================================= */

/*
Future responsive review:

- Convention registration
- Stripe payment flow
- Newsletter workflow
- Updates archive
- Volunteer handoff documentation

Keep responsive behavior simple,
predictable, and maintainable.
*/