/* ============================================
   MaloBatPRO — Styles responsive
   Mobile-first media queries
   Requirements : 6.4, 9.2
   ============================================ */

/* ============================================
   Mobile (< 768px)
   ============================================ */
@media (max-width: 767px) {

  /* --- Typography --- */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.2rem; }

  /* --- Layout --- */
  .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .section {
    padding: var(--space-xl) 0;
  }

  /* --- Grid: single column --- */
  .grid-2 > *,
  .grid-3 > *,
  .grid-4 > * {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* --- Burger menu visible --- */
  .burger-menu {
    display: flex;
  }

  /* --- Navigation hidden by default --- */
  .main-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-primary-dark);
    z-index: 999;
    overflow-y: auto;
    padding: var(--space-lg);
  }

  /* Nav open state (toggled via JS on .site-header) */
  .site-header.nav-open .main-nav {
    display: block;
  }

  .site-header.nav-open .burger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.nav-open .burger-bar:nth-child(2) {
    opacity: 0;
  }

  .site-header.nav-open .burger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }

  .nav-link {
    padding: var(--space-md);
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  /* --- Footer: stack columns --- */
  .footer-container {
    flex-direction: column;
    gap: var(--space-lg);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .footer-section {
    flex: 1 1 100%;
    min-width: 0;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  /* --- Forms: full width --- */
  .form-group {
    margin-bottom: var(--space-md);
  }

  .btn {
    width: 100%;
    padding: 0.75rem 1.5rem;
  }

  /* --- Floating button: usable on mobile --- */
  .floating-btn {
    bottom: var(--space-md);
    right: var(--space-md);
  }

  /* --- Section header spacing --- */
  .section-header {
    margin-bottom: var(--space-lg);
  }

  .section-header p {
    font-size: 0.9rem;
  }

  /* --- Cards --- */
  .card-body {
    padding: var(--space-md);
  }

  /* --- Header scrolled always opaque on mobile --- */
  .site-header {
    background-color: var(--color-primary-dark);
  }
}

/* ============================================
   Tablet (768px — 1024px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {

  /* --- Typography --- */
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.85rem; }

  /* --- Grid: 2 columns --- */
  .grid-3 > *,
  .grid-4 > * {
    flex: 1 1 calc(50% - var(--space-lg));
    min-width: 0;
  }

  /* --- Burger menu visible on tablet --- */
  .burger-menu {
    display: flex;
  }

  /* --- Navigation: same overlay as mobile --- */
  .main-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-primary-dark);
    z-index: 999;
    overflow-y: auto;
    padding: var(--space-lg);
  }

  .site-header.nav-open .main-nav {
    display: block;
  }

  .site-header.nav-open .burger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.nav-open .burger-bar:nth-child(2) {
    opacity: 0;
  }

  .site-header.nav-open .burger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }

  .nav-link {
    padding: var(--space-md);
    font-size: 1rem;
  }

  /* --- Header always opaque on tablet --- */
  .site-header {
    background-color: var(--color-primary-dark);
  }

  /* --- Footer: 2-column layout --- */
  .footer-section {
    flex: 1 1 calc(50% - var(--space-xl));
    min-width: 0;
  }
}

/* ============================================
   Desktop (> 1024px)
   ============================================ */
@media (min-width: 1025px) {

  /* --- Full navigation visible, burger hidden --- */
  .burger-menu {
    display: none;
  }

  .main-nav {
    display: block;
    position: static;
    background-color: transparent;
    padding: 0;
    overflow: visible;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
  }

  /* --- Floating button: desktop position --- */
  .floating-btn {
    bottom: var(--space-lg);
    right: var(--space-lg);
  }
}