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

/*
Theme Name: Mosalam Tailwind
Description: A modern WordPress theme built with Tailwind CSS and custom Gutenberg blocks
Version: 1.0.0
Author: Mosalam
*/

/* Grid System Setup */
body {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Header - Fixed height */
header {
  grid-area: header;
  height: 80px; /* Fixed header height */
  position: sticky;
  top: 0;
  z-index: 50;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Main content area */
main {
  grid-area: main;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Footer */
footer {
  grid-area: footer;
  width: 100%;
}

/* Hide page titles */
.page-title,
.entry-title,
h1.entry-title {
  display: none !important;
}

/* Block spacing system */
.wp-block-group,
.wp-block-columns,
.wp-block-column,
.wp-block-cover,
.wp-block-media-text {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Default gaps between blocks */
.wp-block-group:not([class*="cta"]):not([class*="hero"]),
.wp-block-columns:not([class*="cta"]):not([class*="hero"]),
.wp-block-cover:not([class*="cta"]):not([class*="hero"]) {
  margin-bottom: 2rem; /* 32px gap between regular blocks */
}

/* No gaps for CTA and hero blocks */
.wp-block-group[class*="cta"],
.wp-block-group[class*="hero"],
.wp-block-cover[class*="cta"],
.wp-block-cover[class*="hero"],
.wp-block-group[class*="cta-section"],
.wp-block-group[class*="hero-carousel"] {
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove gaps from CTA blocks to other elements */
.wp-block-group[class*="cta"] + *,
.wp-block-group[class*="hero"] + *,
.wp-block-cover[class*="cta"] + *,
.wp-block-cover[class*="hero"] + * {
  margin-top: 0 !important;
}

/* Full height sections */
.wp-block-group[style*="min-height"],
.wp-block-cover {
  min-height: 100vh;
}

/* Container constraints */
.container,
.wp-block-group[class*="constrained"] {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0 1rem; /* Add horizontal padding for content */
}

/* Content area */
.site-content,
.main-content,
.content-area {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* Responsive gaps */
@media (min-width: 768px) {
  .wp-block-group:not([class*="cta"]):not([class*="hero"]),
  .wp-block-columns:not([class*="cta"]):not([class*="hero"]),
  .wp-block-cover:not([class*="cta"]):not([class*="hero"]) {
    margin-bottom: 3rem; /* 48px gap on larger screens */
  }

  .container,
  .wp-block-group[class*="constrained"] {
    padding: 0 2rem; /* More padding on larger screens */
  }
}

@media (min-width: 1024px) {
  .container,
  .wp-block-group[class*="constrained"] {
    padding: 0 4rem; /* Even more padding on large screens */
  }
}

/* Ensure blocks don't have internal gaps */
.wp-block-group > *,
.wp-block-columns > *,
.wp-block-column > * {
  margin: 0;
  padding: 0;
}

/* Remove any default WordPress spacing */
.wp-block {
  max-width: 100%;
  width: 100%;
}

/* Full viewport height for hero sections */
.wp-block-group[class*="hero"],
.wp-block-cover[class*="hero"] {
  min-height: 100vh;
  height: 100vh;
}

/* Remove any theme wrapper constraints */
.wp-block-group[class*="constrained"],
.wp-block-group[class*="container"] {
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0 1rem;
}