/* ============================= */
/* GLOBAL FOUNDATION             */
/* ============================= */
@import url("base/reset.css");
@import url("base/variables.css");
@import url("base/typography.css");

/* ============================= */
/* LAYOUT                        */
/* ============================= */
@import url("layout/header.css");
@import url("layout/footer.css");

/* ============================= */
/* BASIC PAGE LAYOUT             */
/* ============================= */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding-top: 76px; /* header height */
  font-family: var(--font-secondary);
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ensures footer can stick at bottom */
  justify-content: flex-start;
}

/* MAIN CONTENT */
.main-content {
  display: block; /* normal flow */
  padding: 20px;
  box-sizing: border-box;
  flex: 1; /* grows to fill space between header and footer */
}

/* EXTRA CONTENT */
/* EXTRA CONTENT COLUMNS */
.extra-content {
  width: 100%;
  padding: 60px 20px;
  box-sizing: border-box;
  background-color: var(--color-gray-light); /* make it visible */
  z-index: 2;
}

.extra-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.extra-column {
  flex: 1 1 200px;
  min-width: 180px;
  background-color: var(--overlay-light); /* make boxes visible */
  padding: 20px;
  border-radius: var(--radius-md);
  text-align: center;
}



/* FOOTER */
.site-footer {
  width: 100%;
  background-color: var(--color-black);
  color: var(--color-white);
  display: block;
  flex-direction: column;
  font-family: var(--font-secondary);
  padding: 40px 20px;
  box-sizing: border-box;

  /* sticky for short pages */
  margin-top: auto;
}

/* ============================= */
/* COMPONENTS                    */
/* ============================= */
@import url("components/slideshow.css");

/* HERO */
.hero {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  max-width: 1000px;
  min-height: 400px;
  margin: 10px auto;
  margin-bottom: clamp(40px, 8vh, 120px);
  padding: 50px var(--space-lg) var(--space-xxxl);
  text-align: center;
  color: var(--color-white);
  z-index: var(--z-default);
}

/* HERO CONTENT BOX */
.hero-content {
  position: relative;
  background: var(--overlay-medium);
  padding: var(--space-xxl);
  border-radius: var(--radius-xl);
  max-width: 1000px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  z-index: 2;
}

.hero h1,
.hero h2,
.hero h3,
.hero p {
  margin-bottom: var(--space-md);
}

.hero h1 { font-family: var(--font-primary); font-size: var(--text-hero); font-weight: var(--weight-bold); color: var(--color-accent); }
.hero h2 { font-family: var(--font-primary); font-size: var(--text-xl); font-weight: var(--weight-medium); }
.hero h3 { font-family: var(--font-primary); font-size: var(--text-lg); }
.hero p { font-family: var(--font-secondary); font-size: var(--text-md); line-height: 1.6; max-width: 800px; margin: 0 auto var(--space-md); }

.hero-left { text-align: left; margin-left: 0; }
.hero a { color: var(--color-accent); text-decoration: underline; }
.hero a:hover { color: var(--color-accent-hover); }

/* HERO BUY PANEL */
.hero-buy-now {
  position: absolute;
  right: 40px;
  bottom: 40px;
  width: 260px;
  background: var(--overlay-medium);
  backdrop-filter: blur(8px);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  text-align: left;
  z-index: 3;
}

/* ============================= */
/* RESPONSIVE                     */
/* ============================= */
@media (max-width: 900px) {
  .hero h1 { font-size: var(--text-xxl); }
  .hero h2 { font-size: var(--text-lg); }
  .hero-buy-now { position: relative; margin: var(--space-xl) auto 0; right: auto; bottom: auto; }
}

@media (max-width: 600px) {
  .hero { padding: var(--space-xl) var(--space-md); }
  .hero-content { padding: var(--space-xl); }
  .hero p { font-size: var(--text-base); }
}

@media (max-width: 768px) {
  .hero { width: 100%; min-height: 60vh; margin: 20px auto; padding: 30px 16px; }
  .hero-content { padding: 22px; max-width: 95%; }
  .hero h1 { font-size: 28px; }
  .hero p { font-size: 16px; }
}


/* RESPONSIVE */
@media (max-width: 768px) {
  .extra-columns {
    flex-direction: column;
    align-items: center;
  }

  .extra-column {
    width: 100%;
    max-width: 400px;
  }
}

/* ============================= */
/* PAGE-SPECIFIC IMPORTS (LAST)  */
/* ============================= */
@import url("pages/home.css");