/* ============================================================
   Ophelia Theme – main.css
   IMPORTANT: All @import rules MUST come before any CSS rules.
   CSS spec invalidates @imports that follow regular rules.
   ============================================================ */

/* Base */
@import url('base/_variables.css');
@import url('base/_reset.css');
@import url('base/_typography.css');

/* Components */
@import url('components/_buttons.css');
@import url('components/_forms.css');
@import url('components/_navigation.css');
@import url('components/_cards.css');

/* Sections */
@import url('sections/_hero.css');
@import url('sections/_tagline.css');
@import url('sections/_about.css');
@import url('sections/_services.css');
@import url('sections/_projects.css');
@import url('sections/_contact.css');
@import url('sections/_footer.css');

/* ── Layout ── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Utils */
body.menu-open {
  overflow: hidden;
}

.page-content,
.single-content {
  padding-block: var(--space-24);
}

.error-404 {
  padding-block: var(--space-32);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.error-404 h1 {
  font-size: clamp(6rem, 20vw, 14rem);
  font-weight: var(--font-weight-black);
  letter-spacing: -0.05em;
  color: var(--color-gray-200);
  line-height: 1;
}