/* 
* Responsive CSS for tribecaquonex.com
* Contains all media queries and responsive adjustments
*/

/* ===== LARGE SCREENS (1200px+) ===== */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

/* ===== DESKTOP (992px - 1199px) ===== */
@media (max-width: 1199px) {
  .container {
    max-width: 960px;
  }

  h1 {
    font-size: 3.2rem;
  }

  h2 {
    font-size: 2.8rem;
  }

  .hero-section h1 {
    font-size: 4.2rem;
  }
}

/* ===== TABLET (768px - 991px) ===== */
@media (max-width: 991px) {
  .container {
    max-width: 720px;
  }

  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.6rem;
  }

  .hero-section h1 {
    font-size: 3.8rem;
  }

  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .about-image {
    order: 1;
  }

  .about-content {
    order: 2;
  }

  .services-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .footer-info {
    grid-column: span 2;
  }
}

/* ===== MOBILE LANDSCAPE (576px - 767px) ===== */
@media (max-width: 767px) {
  .container {
    width: 100%;
    padding: 0 2rem;
  }

  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2.4rem;
  }

  section {
    padding: 6rem 0;
  }

  .hero-section {
    padding: 10rem 0 6rem;
  }

  .hero-section h1 {
    font-size: 3.4rem;
  }

  .hero-wave svg {
    height: 50px;
  }

  .section-divider svg {
    height: 50px;
  }

  .services-grid,
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .testimonial-content {
    grid-template-columns: 1fr;
  }

  .testimonial-image {
    max-width: 150px;
    margin: 0 auto 2rem;
  }

  .cta-buttons {
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-info {
    grid-column: auto;
  }

  .policy-container {
    padding: 3rem 2rem;
  }

  /* Mobile Menu - PHP/CSS based (no JS) */
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-light);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    z-index: 1000;
  }

  .menu li {
    margin: 0 0 1.5rem;
  }

  .menu-toggle-label {
    display: block;
    cursor: pointer;
    width: 3rem;
    height: 2.5rem;
    position: relative;
  }

  .menu-icon,
  .menu-icon:before,
  .menu-icon:after {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
    position: absolute;
    transition: all 0.3s ease;
  }

  .menu-icon {
    top: 50%;
    transform: translateY(-50%);
  }

  .menu-icon:before {
    content: "";
    top: -10px;
  }

  .menu-icon:after {
    content: "";
    bottom: -10px;
  }

  /* CSS-based mobile menu toggle */
  .menu-toggle {
    display: none;
  }

  .menu-toggle:checked ~ .menu {
    display: flex;
    animation: slideDown 0.3s ease forwards;
  }

  .menu-toggle:checked ~ .menu-toggle-label .menu-icon {
    background-color: transparent;
  }

  .menu-toggle:checked ~ .menu-toggle-label .menu-icon:before {
    transform: rotate(45deg);
    top: 0;
  }

  .menu-toggle:checked ~ .menu-toggle-label .menu-icon:after {
    transform: rotate(-45deg);
    bottom: 0;
  }

  /* Cookie consent mobile layout */
  .cookie-content {
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
  }

  .btn-accept {
    width: 100%;
  }

  /* Thank you page */
  .thank-you-content {
    padding: 3rem 2rem;
  }

  .thank-you-actions {
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* ===== MOBILE PORTRAIT (up to 575px) ===== */
@media (max-width: 575px) {
  html {
    font-size: 58%;
  }

  .hero-section h1 {
    font-size: 3rem;
  }

  .hero-subtitle {
    font-size: 1.8rem;
  }

  .section-header {
    margin-bottom: 4rem;
  }

  .form-container {
    padding: 2rem;
  }

  .policy-container h1 {
    font-size: 2.6rem;
  }

  .policy-content h2 {
    font-size: 2rem;
  }

  blockquote:before {
    font-size: 5rem;
    top: -2rem;
  }

  .cookies-table {
    font-size: 1.4rem;
  }

  .cookies-table th,
  .cookies-table td {
    padding: 1rem 0.8rem;
  }
}