/* ===========================================================
   General Responsive Styles
   =========================================================== */

/* Larger screens (tablets and desktops) */
@media (min-width: 768px) {
    :root { /* Update variables for larger screens if needed */
        --container-padding: 2rem;
    }

    /* Page-specific adjustments for larger screens */
    .hero-section { /* From _pages.css */
        text-align: left;
    }
    .hero-section .lead { /* From _pages.css */
      margin-left: 0;
      margin-right: 0;
    }
    .hero-buttons { /* From _pages.css */
        flex-direction: row;
        justify-content: flex-start; /* Align buttons to the start on larger screens */
    }
}


/* Smaller screens (mobiles) */
@media (max-width: 767.98px) {
    :root { /* Update variables for smaller screens */
        --section-padding: 3rem 0;
        --font-size-h1: clamp(1.8rem, 5vw, 2.5rem);
        --font-size-h2: clamp(1.5rem, 4vw, 2.2rem);
        /* --container-padding is 1.5rem by default from _variables.css */
    }

     /* Guest navbar collapse styles for small screens (light theme) */
     /* This specifically targets .navbar-light for the guest navbar behavior */
     .navbar-light .navbar-collapse {
        background-color: var(--light-color); /* Uses light-theme variable */
        padding: 1rem;
        margin-top: 0.5rem;
        border-radius: var(--border-radius);
        box-shadow: var(--card-shadow);
        border: 1px solid var(--border-color);
    }
    /* Dark mode for .navbar-collapse is handled in _theme-dark.css under [data-bs-theme="dark"] .navbar-light .navbar-collapse */


  /* Page-specific adjustments for smaller screens */
  .hero-buttons { /* From _pages.css */
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  .hero-buttons .btn { /* From _pages.css */
      width: 100%;
  }

  .feature-card .card-body { /* From _pages.css */
    padding: 1.25rem;
  }

  .pricing-card { /* From _pages.css */
    margin-bottom: 1.5rem; /* Add space between stacked pricing cards */
  }
  .popular-plan { /* From _pages.css */
      transform: scale(1); /* Reset popular plan scale on small screens */
  }
}