/* ===================================
   CONSISTENT SPACING SYSTEM
   Based on 8px base unit system
   =================================== */

:root {
  /* Base spacing unit - 8px */
  --spacing-base: 8px;
  
  /* Spacing scale based on 8px increments */
  --spacing-xs: calc(var(--spacing-base) * 0.5); /* 4px */
  --spacing-sm: var(--spacing-base); /* 8px */
  --spacing-md: calc(var(--spacing-base) * 2); /* 16px */
  --spacing-lg: calc(var(--spacing-base) * 3); /* 24px */
  --spacing-xl: calc(var(--spacing-base) * 4); /* 32px */
  --spacing-2xl: calc(var(--spacing-base) * 6); /* 48px */
  --spacing-3xl: calc(var(--spacing-base) * 8); /* 64px */
  --spacing-4xl: calc(var(--spacing-base) * 9); /* 72px */
  --spacing-5xl: calc(var(--spacing-base) * 12); /* 96px */
  
  /* Section spacing */
  --section-padding-mobile: var(--spacing-3xl); /* 64px */
  --section-padding-tablet: var(--spacing-4xl); /* 72px */
  --section-padding-desktop: var(--spacing-5xl); /* 96px */
  
  /* Content spacing */
  --content-gap-sm: var(--spacing-md); /* 16px */
  --content-gap-md: var(--spacing-lg); /* 24px */
  --content-gap-lg: var(--spacing-xl); /* 32px */
  --content-gap-xl: var(--spacing-2xl); /* 48px */
}

/* ===================================
   SECTION SPACING
   =================================== */

/* Apply consistent section padding only to home page */
body[data-page="home"] section {
  padding: var(--section-padding-mobile) 5vw;
}

@media (min-width: 768px) {
  body[data-page="home"] section {
    padding: var(--section-padding-tablet) 6vw;
  }
}

@media (min-width: 1024px) {
  body[data-page="home"] section {
    padding: var(--section-padding-desktop) 8vw;
  }
}

/* Prevent excessive padding on other pages */
body:not([data-page="home"]) section {
  padding: 0;
}

/* ===================================
   CONTENT BLOCK SPACING
   =================================== */

/* Section headings */
.section-heading {
  margin-bottom: var(--spacing-2xl); /* 48px */
}

.section-heading h1 {
  margin-bottom: var(--spacing-md); /* 16px */
}

.section-heading p {
  margin: 0;
}

/* Content blocks within sections */
.content-block {
  margin-bottom: var(--spacing-xl); /* 32px */
}

.content-block:last-child {
  margin-bottom: 0;
}

/* ===================================
   TEXT AND LINK SPACING
   =================================== */

/* Paragraph spacing */
p {
  margin-bottom: var(--spacing-md); /* 16px */
  line-height: 1.6;
}

p:last-child {
  margin-bottom: 0;
}

/* List spacing */
ul, ol {
  margin-bottom: var(--spacing-md); /* 16px */
}

li {
  margin-bottom: var(--spacing-xs); /* 4px */
}

li:last-child {
  margin-bottom: 0;
}

/* ===================================
   HEADING HIERARCHY AND STYLING
   =================================== */

/* Base heading styles */
h1, h2, h3, h4, h5, h6 {
  margin-bottom: var(--spacing-md); /* 16px */
  margin-top: var(--spacing-lg); /* 24px */
  font-family: var(--font-heading, 'Signika', sans-serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}

/* Heading hierarchy sizes */
h1 {
  font-size: clamp(2.5rem, 3vw + 1rem, 3.75rem);
  margin-bottom: var(--spacing-lg); /* 24px */
  letter-spacing: 0.04em;
}

h2 {
  font-size: clamp(2rem, 2.5vw + 0.5rem, 3rem);
  margin-bottom: var(--spacing-md); /* 16px */
  letter-spacing: 0.03em;
}

h3 {
  font-size: clamp(1.5rem, 2vw + 0.25rem, 2.25rem);
  margin-bottom: var(--spacing-md); /* 16px */
}

h4 {
  font-size: clamp(1.25rem, 1.5vw + 0.25rem, 1.875rem);
  margin-bottom: var(--spacing-sm); /* 8px */
}

h5 {
  font-size: clamp(1.125rem, 1.25vw + 0.125rem, 1.5rem);
  margin-bottom: var(--spacing-sm); /* 8px */
}

h6 {
  font-size: clamp(1rem, 1vw + 0.125rem, 1.25rem);
  margin-bottom: var(--spacing-sm); /* 8px */
}

/* Section headings - special styling */
.section-heading h1 {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

.section-heading h2 {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

/* Heading capitalization standards */
.heading-sentence-case {
  text-transform: none; /* Sentence case - capitalize first letter only */
}

.heading-title-case {
  text-transform: capitalize; /* Title case - capitalize each word */
}

.heading-uppercase {
  text-transform: uppercase; /* All uppercase */
  letter-spacing: 0.1em;
}

/* Responsive heading adjustments */
@media (max-width: 640px) {
  h1, h2, h3, h4, h5, h6 {
    margin-top: var(--spacing-md); /* 16px */
  }
  
  h1 {
    margin-bottom: var(--spacing-md); /* 16px */
  }
}

/* ===================================
   LINK GROUP SPACING
   =================================== */

/* Groups of links with proper separation */
.link-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md); /* 16px */
  margin: var(--spacing-lg) 0; /* 24px top/bottom */
}

.link-group a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs); /* 4px between icon and text */
}

/* Vertical link groups */
.link-group-vertical {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm); /* 8px */
  margin: var(--spacing-lg) 0; /* 24px top/bottom */
}

/* ===================================
   CARD AND COMPONENT SPACING
   =================================== */

/* Grid layouts */
.grid-layout {
  display: grid;
  gap: var(--spacing-lg); /* 24px */
  margin-bottom: var(--spacing-xl); /* 32px */
}

/* Card internal spacing */
.card-content {
  padding: var(--spacing-xl) var(--spacing-lg); /* 32px vertical, 24px horizontal */
}

.card-content > *:last-child {
  margin-bottom: 0;
}

/* ===================================
   FORM SPACING
   =================================== */

/* Form group spacing */
.form-group {
  margin-bottom: var(--spacing-lg); /* 24px */
}

.form-group:last-child {
  margin-bottom: 0;
}

/* Form label spacing */
.form-group label {
  margin-bottom: var(--spacing-sm); /* 8px */
  display: block;
}

/* Form input spacing */
.form-group input,
.form-group textarea,
.form-group select {
  margin-bottom: var(--spacing-xs); /* 4px for help text */
}

/* Form help text */
.form-help {
  margin-top: var(--spacing-xs); /* 4px */
  margin-bottom: 0;
}

/* ===================================
   BUTTON SPACING
   =================================== */

/* Button groups */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md); /* 16px */
  margin: var(--spacing-lg) 0; /* 24px top/bottom */
}

/* Button internal spacing */
.btn,
.join-btn,
.primary-link,
.secondary-link {
  padding: var(--spacing-sm) var(--spacing-md); /* 8px vertical, 16px horizontal */
}

/* Larger buttons */
.btn-lg,
.join-btn {
  padding: var(--spacing-md) var(--spacing-xl); /* 16px vertical, 32px horizontal */
}

/* ===================================
   NAVIGATION SPACING
   =================================== */

/* Navigation item spacing */
.navbar-nav .nav-item:not(:last-child) {
  margin-right: var(--spacing-lg); /* 24px */
}

.navbar-nav .nav-link {
  padding: var(--spacing-sm) var(--spacing-md); /* 8px vertical, 16px horizontal */
}

/* ===================================
   FOOTER SPACING
   =================================== */

/* Footer section spacing */
.footer {
  padding-top: var(--spacing-3xl); /* 64px */
  padding-bottom: var(--spacing-xl); /* 32px */
}

.footer .row > div {
  margin-bottom: var(--spacing-xl); /* 32px */
}

/* ===================================
   RESPONSIVE SPACING ADJUSTMENTS
   =================================== */

@media (max-width: 640px) {
  /* Reduce spacing on mobile */
  section {
    padding: var(--spacing-2xl) 5vw; /* 48px */
  }
  
  .section-heading {
    margin-bottom: var(--spacing-xl); /* 32px */
  }
  
  .content-block {
    margin-bottom: var(--spacing-lg); /* 24px */
  }
  
  .link-group {
    gap: var(--spacing-sm); /* 8px */
    margin: var(--spacing-md) 0; /* 16px top/bottom */
  }
  
  .grid-layout {
    gap: var(--spacing-md); /* 16px */
  }
  
  .card-content {
    padding: var(--spacing-lg) var(--spacing-md); /* 24px vertical, 16px horizontal */
  }
}

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

/* Margin utilities */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }

.m-sm { margin: var(--spacing-sm) !important; }
.mt-sm { margin-top: var(--spacing-sm) !important; }
.mb-sm { margin-bottom: var(--spacing-sm) !important; }
.ml-sm { margin-left: var(--spacing-sm) !important; }
.mr-sm { margin-right: var(--spacing-sm) !important; }

.m-md { margin: var(--spacing-md) !important; }
.mt-md { margin-top: var(--spacing-md) !important; }
.mb-md { margin-bottom: var(--spacing-md) !important; }
.ml-md { margin-left: var(--spacing-md) !important; }
.mr-md { margin-right: var(--spacing-md) !important; }

.m-lg { margin: var(--spacing-lg) !important; }
.mt-lg { margin-top: var(--spacing-lg) !important; }
.mb-lg { margin-bottom: var(--spacing-lg) !important; }
.ml-lg { margin-left: var(--spacing-lg) !important; }
.mr-lg { margin-right: var(--spacing-lg) !important; }

.m-xl { margin: var(--spacing-xl) !important; }
.mt-xl { margin-top: var(--spacing-xl) !important; }
.mb-xl { margin-bottom: var(--spacing-xl) !important; }
.ml-xl { margin-left: var(--spacing-xl) !important; }
.mr-xl { margin-right: var(--spacing-xl) !important; }

/* Padding utilities */
.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }

.p-sm { padding: var(--spacing-sm) !important; }
.pt-sm { padding-top: var(--spacing-sm) !important; }
.pb-sm { padding-bottom: var(--spacing-sm) !important; }
.pl-sm { padding-left: var(--spacing-sm) !important; }
.pr-sm { padding-right: var(--spacing-sm) !important; }

.p-md { padding: var(--spacing-md) !important; }
.pt-md { padding-top: var(--spacing-md) !important; }
.pb-md { padding-bottom: var(--spacing-md) !important; }
.pl-md { padding-left: var(--spacing-md) !important; }
.pr-md { padding-right: var(--spacing-md) !important; }

.p-lg { padding: var(--spacing-lg) !important; }
.pt-lg { padding-top: var(--spacing-lg) !important; }
.pb-lg { padding-bottom: var(--spacing-lg) !important; }
.pl-lg { padding-left: var(--spacing-lg) !important; }
.pr-lg { padding-right: var(--spacing-lg) !important; }

.p-xl { padding: var(--spacing-xl) !important; }
.pt-xl { padding-top: var(--spacing-xl) !important; }
.pb-xl { padding-bottom: var(--spacing-xl) !important; }
.pl-xl { padding-left: var(--spacing-xl) !important; }
.pr-xl { padding-right: var(--spacing-xl) !important; }

/* Gap utilities for flexbox and grid */
.gap-sm { gap: var(--spacing-sm) !important; }
.gap-md { gap: var(--spacing-md) !important; }
.gap-lg { gap: var(--spacing-lg) !important; }
.gap-xl { gap: var(--spacing-xl) !important; }