/* ==========================================================
   Mindful Memories Website
   File: style.css
   Version: 2.0

   Description:
   Core layout stylesheet responsible for the
   overall structure of the website.

   Responsibilities:
   • Imports
   • Reset
   • Global Layout
   • Containers
   • Header
   • Navigation
   • Section Layout
   • Dividers
   • Footer
   • Utility Classes

   Author:
   Mindful Memories

========================================================== */


/* ==========================================================
   CHANGELOG

   Version 2.0

   ✔ Refactored into component architecture
   ✔ Typography moved to typography.css
   ✔ Buttons moved to buttons.css
   ✔ Hero moved to hero.css
   ✔ Simplified layout
   ✔ Improved maintainability

========================================================== */


/* ==========================================================
   IMPORTS
========================================================== */

@import url("variables.css");
@import url("typography.css");
@import url("buttons.css");
@import url("navigation.css");
@import url("hero.css");
@import url("wedding.css");
@import url("personalised.css");
@import url("animations.css");
@import url("collections.css");
@import url("features.css");
@import url("how-its-made.css");
@import url("reviews.css");
@import url("cta.css");
@import url("perfect-for.css");
@import url("wedding-process.css");
@import url("gallery.css");
@import url("wedding-cta.css");
@import url("about.css");
@import url("contact.css");
@import url("footer.css");

/* Responsive CSS */
@import url("responsive.css");


/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
}


/* ==========================================================
   GLOBAL LAYOUT
========================================================== */

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;

  background: var(--off-white);
  color: var(--charcoal);

  overflow-x: hidden;
}

main {
  flex: 1;
}


/* ==========================================================
   CONTAINERS
========================================================== */

.container {
  width: min(90%, 1200px);
  margin: 0 auto;
}

/* ==========================================================
   SECTION LAYOUT
========================================================== */

section {
  padding: var(--space-xxl) 0;
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.section-content {
  margin-top: var(--space-xl);
}

.section-accent{

    width:90px;

    height:4px;

    margin:0 auto 1.5rem;

    border-radius:999px;

    background:var(--gold);

}

.section-divider{

    width:100%;

    height:1px;

    background:rgba(200,169,106,.50);

}

/* ==========================================================
   DIVIDERS
========================================================== */

.divider {
  width: 100%;
  height: 2px;

  margin: var(--space-lg) 0 var(--space-xl);

  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    transparent
  );
}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer {
  padding: var(--space-xl) 0;

  background: var(--forest-green);
  color: var(--off-white);
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-xl);

  flex-wrap: wrap;
}

/* ==========================================================
   UTILITY CLASSES
========================================================== */

.text-center {
  text-align: center;
}

.hidden {
  display: none;
}

.mt-lg {
  margin-top: var(--space-lg);
}

.mb-lg {
  margin-bottom: var(--space-lg);
}

.shadow {
  box-shadow: var(--shadow-soft);
}

.text-center {
  text-align: center;
}