/* ===== UNIFIED MARGIN & PADDING VARIABLES ===== */

:root {
  /* Container Variables - Based on Legal Pages */
  --container-max-width: 1200px;
  --container-padding-desktop: 2rem;
  --container-padding-tablet: 1.5rem;
  --container-padding-mobile: 1rem;
  --container-padding-small: 0.75rem;
  
  /* Content Area Variables */
  --content-max-width: 800px;
  --content-padding-desktop: 2rem;
  --content-padding-tablet: 1.5rem;
  --content-padding-mobile: 1rem;
  
  /* Section Variables */
  --section-padding-desktop: 5rem 0 2rem;
  --section-padding-tablet: 4rem 0;
  --section-padding-mobile: 3rem 0;
  --section-padding-small: 2.5rem 0;
  
  /* Hero Section Variables */
  --hero-padding-desktop: 2rem 0;
  --hero-padding-tablet: 2rem 1rem;
  --hero-padding-mobile: 1rem;
  --hero-padding-small: 0.75rem;
  
  /* Card Variables */
  --card-padding-desktop: 2rem;
  --card-padding-tablet: 1.5rem;
  --card-padding-mobile: 1.25rem;
  --card-padding-small: 1rem;
  
  /* Navigation Variables */
  --nav-padding-desktop: 1rem 0;
  --nav-padding-tablet: 0.75rem 0;
  --nav-padding-mobile: 0.5rem 0;
  
  /* Form Variables */
  --form-padding-desktop: 2rem;
  --form-padding-tablet: 1.5rem;
  --form-padding-mobile: 1.25rem;
  --form-padding-small: 1rem;
  
  /* Footer Variables */
  --footer-padding-desktop: 3rem 0 1rem;
  --footer-padding-tablet: 2.5rem 0 1rem;
  --footer-padding-mobile: 2rem 0 1rem;
  --footer-padding-small: 1.5rem 0 1rem;
}

/* ===== UNIFIED CONTAINER CLASSES ===== */

/* Main Container - Used across all pages */
.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-desktop);
  box-sizing: border-box;
}

/* Content Container - For main content areas like legal pages */
.content-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--content-padding-desktop);
  box-sizing: border-box;
}

/* Hero Container - Special container for hero sections */
.hero-container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--hero-padding-desktop);
  box-sizing: border-box;
}

/* ===== RESPONSIVE CONTAINER ADJUSTMENTS ===== */

/* Tablet Breakpoint */
@media (max-width: 1024px) {
  .container {
    padding: 0 var(--container-padding-tablet);
  }
  
  .content-container {
    padding: var(--content-padding-tablet);
  }
  
  .hero-container {
    padding: var(--hero-padding-tablet);
  }
}

/* Mobile Breakpoint */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--container-padding-mobile);
  }
  
  .content-container {
    padding: var(--content-padding-mobile);
    margin: 1rem;
  }
  
  .hero-container {
    padding: var(--hero-padding-mobile);
  }
}

/* Small Mobile Breakpoint */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--container-padding-small);
  }
  
  .content-container {
    padding: var(--content-padding-mobile);
    margin: 0.75rem;
  }
  
  .hero-container {
    padding: var(--hero-padding-small);
  }
}

/* ===== SECTION PADDING CLASSES ===== */

.section {
  padding: var(--section-padding-desktop);
}

@media (max-width: 1024px) {
  .section {
    padding: var(--section-padding-tablet);
  }
}

@media (max-width: 768px) {
  .section {
    padding: var(--section-padding-mobile);
  }
}

@media (max-width: 480px) {
  .section {
    padding: var(--section-padding-small);
  }
}

/* ===== CARD PADDING CLASSES ===== */

.card,
.feature__card,
.city__card,
.hours__card,
.contact__info-card,
.contact__form {
  padding: var(--card-padding-desktop);
}

@media (max-width: 1024px) {
  .card,
  .feature__card,
  .city__card,
  .hours__card,
  .contact__info-card,
  .contact__form {
    padding: var(--card-padding-tablet);
  }
}

@media (max-width: 768px) {
  .card,
  .feature__card,
  .city__card,
  .hours__card,
  .contact__info-card,
  .contact__form {
    padding: var(--card-padding-mobile);
  }
}

@media (max-width: 480px) {
  .card,
  .feature__card,
  .city__card,
  .hours__card,
  .contact__info-card,
  .contact__form {
    padding: var(--card-padding-small);
  }
}

/* ===== NAVIGATION PADDING ===== */

.nav {
  padding: var(--nav-padding-desktop);
}

@media (max-width: 1024px) {
  .nav {
    padding: var(--nav-padding-tablet);
  }
}

@media (max-width: 768px) {
  .nav {
    padding: var(--nav-padding-mobile);
  }
}

/* ===== FOOTER PADDING ===== */

.footer {
  padding: var(--footer-padding-desktop);
}

@media (max-width: 1024px) {
  .footer {
    padding: var(--footer-padding-tablet);
  }
}

@media (max-width: 768px) {
  .footer {
    padding: var(--footer-padding-mobile);
  }
}

@media (max-width: 480px) {
  .footer {
    padding: var(--footer-padding-small);
  }
}

/* ===== HERO SPECIFIC ADJUSTMENTS ===== */

.hero__container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--hero-padding-desktop);
  box-sizing: border-box;
}

@media (max-width: 1024px) {
  .hero__container {
    padding: var(--hero-padding-tablet);
  }
}

@media (max-width: 768px) {
  .hero__container {
    padding: var(--hero-padding-mobile);
  }
}

@media (max-width: 480px) {
  .hero__container {
    padding: var(--hero-padding-small);
  }
}

/* ===== LEGAL PAGES CONSISTENCY ===== */

.legal-content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: var(--content-padding-desktop);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .legal-content {
    margin: 1rem;
    padding: var(--content-padding-mobile);
  }
}

@media (max-width: 480px) {
  .legal-content {
    margin: 0.75rem;
    padding: var(--content-padding-mobile);
  }
}

/* ===== UTILITY CLASSES FOR CONSISTENT SPACING ===== */

.p-desktop {
  padding: var(--container-padding-desktop);
}

.p-tablet {
  padding: var(--container-padding-tablet);
}

.p-mobile {
  padding: var(--container-padding-mobile);
}

.p-small {
  padding: var(--container-padding-small);
}

.px-desktop {
  padding-left: var(--container-padding-desktop);
  padding-right: var(--container-padding-desktop);
}

.px-tablet {
  padding-left: var(--container-padding-tablet);
  padding-right: var(--container-padding-tablet);
}

.px-mobile {
  padding-left: var(--container-padding-mobile);
  padding-right: var(--container-padding-mobile);
}

.px-small {
  padding-left: var(--container-padding-small);
  padding-right: var(--container-padding-small);
}

/* ===== RESPONSIVE UTILITY CLASSES ===== */

@media (max-width: 1024px) {
  .p-responsive {
    padding: var(--container-padding-tablet);
  }
  
  .px-responsive {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}

@media (max-width: 768px) {
  .p-responsive {
    padding: var(--container-padding-mobile);
  }
  
  .px-responsive {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }
}

@media (max-width: 480px) {
  .p-responsive {
    padding: var(--container-padding-small);
  }
  
  .px-responsive {
    padding-left: var(--container-padding-small);
    padding-right: var(--container-padding-small);
  }
}