/* 
=======================================
BASE STYLES - Applied to every page 
=======================================
*/

/* Utility Styles */
@import url('./utils/variables.css');
@import url('./utils/reset.css');

/* Base Styles */
@import url('./base.css');

/* Layout Styles */
@import url('./layouts/navbar.css');
@import url('./layouts/footer.css');
@import url('./layouts/main.css');

/* Component Styles */
@import url('./components/cards.css');
@import url('./components/hero.css');
@import url('./components/animations.css');

/* 
=======================================
PAGE-SPECIFIC STYLES - Applied selectively
=======================================
*/

/* Page Styles - Import only what you need for each page */
@import url('./pages/home.css');
@import url('./pages/about.css');
@import url('./pages/events.css');
@import url('./pages/contact.css');
@import url('./pages/resources.css');
@import url('./pages/join.css');

/* Global styles that apply to the entire site */

/* Mobile optimization additions */
html {
  touch-action: manipulation;
  text-size-adjust: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

/* Apply consistent padding to page content */
.page-content {
  padding: 0 var(--spacing-md);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Custom scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(0 0 0 / 5%);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color-light);
  border-radius: 4px;
}

/* Mobile Optimizations */
@media (width <= 768px) {
  /* Enhance vertical spacing between sections */
  section + section {
    margin-top: 2rem;
  }

  /* Improve tap targets globally */
  a,
  button,
  input[type='button'],
  input[type='submit'],
  select,
  .btn,
  .nav-link,
  .footer-link {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    touch-action: manipulation;
  }

  /* Proper form element sizing to prevent zoom on iOS */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Add extra padding to the sides of all pages for better readability */
  main section {
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Improved iframe responsiveness */
  iframe {
    max-width: 100%;
    width: 100%;
    height: 300px;
  }

  /* Container adjustments */
  .container {
    width: 100%;
    max-width: 100%;
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Grid adjustments */
  .grid {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

@media (width <= 480px) {
  /* Further adjustments for small phones */
  body {
    font-size: 15px;
  }

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.3rem;
  }

  /* Increase side padding for very small screens */
  main section {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
  }

  /* Make iframes smaller on tiny screens */
  iframe {
    height: 250px;
  }

  /* Container adjustments */
  .container {
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);
    margin: 0;
  }
}

/* Landscape orientation adjustments */
@media (width <= 768px) and (orientation: landscape) {
  /* Adjust for landscape mode on mobile */
  .branch-hero,
  .hero-section {
    min-height: 400px;
    height: 70vh;
  }
}

/* Utility class for hiding content from visual browsers but keeping it for screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}