@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: light;
  
  /* Fixed header dimensions - navbar height + top margin (mt-4 = 16px top + 16px visual space) */
  --header-height-mobile: 88px;  /* ~56px nav + 32px margin/spacing */
  --header-height-desktop: 96px; /* ~64px nav + 32px margin/spacing */
  
  /* Standard vertical spacing between sections (equal gaps principle) */
  /* Title ile alt bölüm arası = Menu ile title arası */
  --section-gap-mobile: 40px;   /* 10 * 4px = 2.5rem */
  --section-gap-tablet: 56px;   /* 14 * 4px = 3.5rem */
  --section-gap-desktop: 64px;  /* 16 * 4px = 4rem */
}

@layer base {
  /* Remove main padding - hero sections will handle spacing themselves */
  main {
    padding-top: 0;
  }
}

@layer components {
  /* Standard page hero section - only offset for fixed header */
  .page-hero-standard {
    /* Top padding = ONLY header height (fixed header offset) */
    padding-top: var(--header-height-mobile);
    /* Bottom padding = standard gap (to match next section) */
    padding-bottom: var(--section-gap-mobile);
  }
  
  @media (min-width: 640px) {
    .page-hero-standard {
      padding-top: var(--header-height-mobile);
      padding-bottom: var(--section-gap-tablet);
    }
  }
  
  @media (min-width: 1024px) {
    .page-hero-standard {
      padding-top: var(--header-height-desktop);
      padding-bottom: var(--section-gap-desktop);
    }
  }
  
  /* Container inside hero - adds top gap to match bottom gap */
  .hero-container-with-gap {
    padding-top: var(--section-gap-mobile);
  }
  
  @media (min-width: 640px) {
    .hero-container-with-gap {
      padding-top: var(--section-gap-tablet);
    }
  }
  
  @media (min-width: 1024px) {
    .hero-container-with-gap {
      padding-top: var(--section-gap-desktop);
    }
  }
}