/* ========================================
   MAIN STYLESHEET
   ======================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

/* Import CSS Architecture */
@import url('src/styles/variables.css');
@import url('src/styles/components.css');
@import url('src/styles/showcase.css');
@import url('src/styles/mobile-patch.css');

/* ========================================
   LAYOUT STRUCTURE
   ======================================== */

/* Flexbox layout for sticky footer */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Main content area */
main {
  flex: 1;
}

/* Footer sticks to bottom */
.footer {
  margin-top: auto;
}

/* ========================================
   SECTION OVERRIDES
   ======================================== */

/* Logo section specific styles */
#logo.section {
  padding: var(--space-3xl) 0;
  text-align: center;
}

.section-logo {
  max-width: 400px;
  display: block;
  justify-content: left;
}

/* About section specific styles */
#about.section {
  padding: var(--space-4xl) 0;
}

#about .section-text {
  max-width: 60%;
  justify-content: left;
}

/* Showcase section */
#showcases {
  overflow: hidden; /* Prevent horizontal scroll from slider */
}

/* ========================================
   RESPONSIVE LAYOUT ADJUSTMENTS
   ======================================== */

@media (max-width: 767px) {
  /* Reduce section padding on mobile */
  .section {
    padding: var(--space-2xl) 0;
  }
  
  #logo.section {
    padding: var(--space-xl) 0;
  }
  
  /* Stack footer elements on mobile */
  .footer-bottom .container {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }
}

@media (max-width: 479px) {
  .section {
    padding: var(--space-xl) 0;
  }
  
  #logo.section {
    padding: var(--space-lg) 0;
  }
}