/* ==========================================================
   ENLEIO EVENTS: STYLES
   Mobile-first: the base styles are for phones, and the
   @media (min-width: ...) blocks add changes for bigger screens.
   ========================================================== */

/* ----------------------------------------------------------
   1. COLORS + FONTS  (CHANGE THEM HERE, ONE PLACE)
   ---------------------------------------------------------- */
:root {
  --ivory:     #FAF6F1;  /* main background */
  --blue:      #CFE0EC;  /* powder blue (accents) */
  --blue-soft: #E8F0F6;  /* light blue section backgrounds */
  --berry:     #7A1F4B;  /* buttons, links, accents */
  --berry-dark:#5E1738;  /* button hover */
  --plum:      #2B2430;  /* dark text + dark sections */
  --muted:     #5E5566;  /* softer text */
  --champagne: #B8976A;  /* tiny decorative details only */
  --white:     #FFFFFF;

  /* Fonts. If you change these, also change the Google Fonts link in index.html */
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body:    "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "DM Mono", ui-monospace, Menlo, monospace;

  --header-h: 84px;   /* height of the top bar */
}

/* ----------------------------------------------------------
   2. BASICS
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  margin: 0;
  background: var(--ivory);
  color: var(--plum);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 .6em;
  letter-spacing: -.005em;
}
h1 { font-size: clamp(2.5rem, 8vw, 4.75rem); }
h2 { font-size: clamp(2rem, 5vw, 3rem); }
h3 { font-size: 1.6rem; }
h1 em, h2 em { font-style: italic; color: inherit; }

p { margin: 0 0 1.1em; }
a { color: var(--berry); }
a:hover { color: var(--berry-dark); }

:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; }

.container { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 1rem; }
.container--narrow { max-width: 780px; }
.text-center { text-align: center; }
.hidden { display: none; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--berry); color: var(--white); padding: .75rem 1rem;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--berry);
  margin-bottom: 1rem;
}
.eyebrow--light { color: var(--blue); }

.lead {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  line-height: 1.4;
  color: var(--plum);
}

/* ----------------------------------------------------------
   3. BUTTONS
   ---------------------------------------------------------- */
.btn {
  display: inline-block;
  background: var(--berry);
  color: var(--white);
  border: 1.5px solid var(--berry);
  padding: .9rem 1.8rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--berry-dark); border-color: var(--berry-dark); color: var(--white); }
.btn--small { padding: .6rem 1.2rem; font-size: .78rem; }
.btn--ghost { background: transparent; border-color: var(--white); color: var(--white); }
.btn--ghost:hover { background: var(--white); color: var(--plum); border-color: var(--white); }
.btn--light { background: var(--ivory); border-color: var(--ivory); color: var(--plum); }
.btn--light:hover { background: var(--blue); border-color: var(--blue); color: var(--plum); }
/* Keeps the ivory button's text dark inside the dark contact section (links there are light blue by default) */
.section--plum .btn--light, .section--plum .btn--light:hover { color: var(--plum); }

.text-link { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }

/* ----------------------------------------------------------
   4. HEADER + NAVIGATION  (mobile menu first)
   ---------------------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 100;
  color: var(--white);                 /* transparent over the hero photo */
  transition: background .3s, color .3s, box-shadow .3s;
}
.site-header.is-solid,
.site-header.menu-open {
  background: var(--ivory);
  color: var(--plum);
  box-shadow: 0 1px 0 rgba(43, 36, 48, .08);
}
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }

.logo {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 6vw, 2.6rem);   /* CHANGE: size of "Enleio Events" in the top bar (smallest, scaling, largest) */
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  letter-spacing: .02em;
  position: relative; z-index: 2;
}
.logo span { font-style: italic; font-weight: 400; }

/* Menu button (three lines) */
.menu-toggle {
  position: relative; z-index: 2;
  width: 44px; height: 44px;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.menu-toggle span { display: block; width: 26px; height: 1.5px; background: currentColor; transition: transform .25s, opacity .25s; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Full-screen mobile menu */
.nav {
  position: fixed; inset: 0;
  background: var(--ivory);
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 2rem;
  padding: var(--header-h) 1rem 2rem;
}
.nav.is-open { display: flex; }
.nav-list { list-style: none; margin: 0; padding: 0; text-align: center; }
.nav-list a {
  display: block; padding: .5rem 1rem;
  font-family: var(--font-heading); font-size: 2rem;
  color: var(--plum); text-decoration: none;
}
.nav-list a:hover { color: var(--berry); }
.nav-actions { display: flex; align-items: center; gap: 1.2rem; }
.icon-link { color: inherit; display: inline-flex; padding: .4rem; }
.menu-open .icon-link { color: var(--plum); }

/* Desktop navigation */
/* Below 1100px wide (phones, tablets, small laptops) the menu collapses to the ☰ button so the larger logo always fits */
@media (min-width: 1100px) {
  .menu-toggle { display: none; }
  .nav {
    position: static; display: flex; flex-direction: row;
    background: none; padding: 0; gap: 2rem; inset: auto;
  }
  .nav-list { display: flex; gap: .25rem; }
  .nav-list a {
    font-family: var(--font-body); font-size: .85rem; font-weight: 400;
    letter-spacing: .08em; text-transform: uppercase;
    color: inherit; padding: .5rem .8rem;
  }
  .nav-list a:hover { color: inherit; opacity: .7; }
}

/* ----------------------------------------------------------
   5. HERO
   ---------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  background: var(--berry-dark);        /* shows if the photo is missing */
  color: var(--white);
  overflow: hidden;
}
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0;
  /* A soft berry-tinted shade (not grey) so white text stays readable.
     Lower the last number in each rgba(...) for a lighter, brighter photo. */
  background:
    linear-gradient(to bottom, rgba(70, 14, 42, .6) 0%, rgba(70, 14, 42, 0) 24%),     /* top: keeps the logo and menu readable */
    linear-gradient(to right, rgba(70, 14, 42, .62) 0%, rgba(70, 14, 42, .2) 55%, rgba(70, 14, 42, 0) 100%), /* left: keeps the headline readable */
    linear-gradient(to top, rgba(70, 14, 42, .55) 0%, rgba(70, 14, 42, .08) 45%, rgba(70, 14, 42, 0) 100%);  /* bottom */
}
.hero-content { position: relative; padding-top: 8rem; padding-bottom: 4rem; }

/* Photo caption in the bottom-right corner of the hero */
.hero-caption {
  position: absolute; z-index: 2; margin: 0;
  right: 1rem; bottom: 1.2rem;
  max-width: 60%; text-align: right;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em;
  color: rgba(255, 255, 255, .95);
  background: rgba(43, 36, 48, .22);   /* very light backing so the caption reads on any photo; raise .22 for more contrast */
  padding: .25rem .55rem;
}

/* Phones: photo on top, text below it on berry, so the text never covers the couple.
   CHANGE: 62svh is how much of the screen height the photo takes. */
@media (max-width: 759px) {
  .hero { display: block; min-height: 0; }
  .hero-img { position: relative; height: 62svh; min-height: 380px; }
  .hero-overlay {
    bottom: auto; height: 62svh; min-height: 380px;
    background:
      linear-gradient(to bottom, rgba(70, 14, 42, .55) 0%, rgba(70, 14, 42, 0) 28%),
      linear-gradient(to top, var(--berry-dark) 0%, rgba(94, 23, 56, 0) 22%);
  }
  .hero-content { padding-top: 1.5rem; padding-bottom: 3rem; }
  /* caption moves to the bottom-right corner of the photo */
  .hero-caption { top: calc(max(62svh, 380px) - 2rem); bottom: auto; right: 1rem; left: auto; max-width: none; }
}

/* Desktop: SPLIT HERO. Text on an ivory panel on the left, the photo on the right with no overlay,
   so the photo stays bright and clean. CHANGE: 1fr / 1.15fr sets how wide each side is. */
@media (min-width: 760px) {
  .site-header { background: var(--ivory); color: var(--plum); box-shadow: 0 1px 0 rgba(43, 36, 48, .08); }
  .hero h1 { font-size: clamp(2.4rem, 5vw, 4.75rem); }
  .hero {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    margin-top: var(--header-h); min-height: calc(100svh - var(--header-h));
    background: var(--ivory); color: var(--plum);
  }
  .hero-overlay { display: none; }
  .hero-img { position: relative; inset: auto; grid-column: 2; grid-row: 1; width: 100%; height: 100%; object-position: 55% center; }
  .hero-content {
    grid-column: 1; grid-row: 1; align-self: center; max-width: none; margin: 0;
    padding: 4rem clamp(2rem, 5vw, 5rem) 4rem clamp(2rem, 6vw, 6rem);
  }
  .hero .eyebrow--light { color: var(--berry); }
  .hero .btn--ghost { border-color: var(--berry); color: var(--berry); }
  .hero .btn--ghost:hover { background: var(--berry); border-color: var(--berry); color: var(--white); }
  .hero-caption { right: 1rem; bottom: 1rem; }
}
.hero h1 { max-width: 14ch; }
.hero-sub { max-width: 40rem; font-size: 1.15rem; margin-bottom: 2rem; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ----------------------------------------------------------
   6. SECTIONS
   ---------------------------------------------------------- */
.section { padding: 4.5rem 0; }
.section--narrow { padding: 4rem 0; }
.section--blue { background: var(--blue-soft); }
.section--plum { background: var(--plum); color: var(--ivory); }
.section--plum a { color: var(--blue); }

.section-head { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.section-head p:last-child { color: var(--muted); margin-bottom: 0; }
.section-head--light p:last-child { color: var(--blue); }

@media (min-width: 768px) {
  /* CHANGE: space above / below each section on desktop. The bottom is larger because the last line of text
     carries some built-in space, so the two look the same on the page. */
  .section { padding: 4.4rem 0 5.5rem; }
}

/* Services cards */
.cards { display: grid; gap: 1.25rem; }
.card { background: var(--ivory); padding: 2rem 1.75rem; border-top: 3px solid var(--berry); }   /* CHANGE: card color */
.card-num { font-family: var(--font-mono); font-size: .8rem; color: var(--berry); margin-bottom: .5rem; }
.card-note { font-style: italic; color: var(--muted); margin: 1.2rem 0 0; font-size: .98rem; }
.services-extra { text-align: center; max-width: 560px; margin: 2.5rem auto 0; color: var(--muted); }
/* Four cards: two per row on bigger screens. Change to repeat(4, 1fr) for one row. */
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }

/* Image + text blocks */
.split { display: grid; gap: 2.5rem; align-items: center; }
.split-media { margin: 0; }
.split-media img { width: 100%; }
.split-media--portrait img { max-height: 640px; object-fit: cover; }
figcaption {
  font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .06em;
  color: var(--muted);
  margin-top: .6rem;
}
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .split--reverse .split-media { order: 2; }
}

/* Gallery: staggered "contact sheet" layout */
/* Phones: two even columns (rows dissolve). Desktop: justified rows, each row's photos share one height.
   Each figure's --ar (width / height) is set in index.html. */
.gallery { columns: 2; column-gap: .9rem; }
.gallery .row { display: contents; }
.gallery figure { margin: 0 0 1.2rem; break-inside: avoid; }
.gallery img { width: 100%; background: var(--blue); }
@media (min-width: 860px) {
  .gallery { columns: auto; }
  .gallery .row { display: flex; gap: 1.4rem; margin-bottom: 2rem; align-items: flex-start; }
  .gallery .row figure { flex: var(--ar) 1 0; min-width: 0; margin: 0; }
}
.wedding { max-width: 640px; margin: 0 auto 2.2rem; text-align: center; }
.wedding p { color: var(--muted); margin-bottom: 0; }
.gallery + .wedding { margin-top: 5rem; }
.credit a { color: inherit; text-underline-offset: 3px; }
.credit { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); text-align: center; margin-top: 2rem; }

/* Testimonials */
.quotes { display: grid; gap: 2.5rem; max-width: 900px; margin: 0 auto; }
blockquote { margin: 0; padding-left: 1.5rem; border-left: 2px solid var(--champagne); }
blockquote p {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-style: italic; line-height: 1.4;
}
blockquote footer { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }

/* Process chapters */
.chapters { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; }
.chapters li { display: flex; gap: 1.5rem; padding: 2rem 0; border-top: 1px solid rgba(43, 36, 48, .15); }
.chapters li:last-child { border-bottom: 1px solid rgba(43, 36, 48, .15); }
.chapter-num { font-family: var(--font-heading); font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--berry); min-width: 3.2rem; }
.chapters h3 { margin-bottom: .3em; }
.chapters p { margin: 0; color: var(--muted); }

/* FAQ */
.faq details { border-bottom: 1px solid rgba(43, 36, 48, .18); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.2rem 2rem 1.2rem 0; position: relative;
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 1rem; font-size: 1.6rem; color: var(--berry); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { color: var(--muted); padding-bottom: 1.2rem; margin: 0; }

/* Contact + form */
.contact { display: grid; gap: 3rem; }
.contact-intro > p { color: var(--blue); }
.contact-list { list-style: none; padding: 0; margin: 2rem 0 0; }
.contact-list li { margin-bottom: .4rem; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: start; } }

.form { background: var(--ivory); color: var(--plum); padding: 1.75rem; }
@media (min-width: 600px) { .form { padding: 2.5rem; } }
.field { margin-bottom: 1.2rem; }
.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
label { display: block; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: .4rem; }
input, select, textarea {
  width: 100%; padding: .8rem .9rem;
  font: inherit; font-size: 1rem; color: var(--plum);
  background: var(--white); border: 1px solid #b9b2bd; border-radius: 0;
}
input:focus, select:focus, textarea:focus { outline: 3px solid var(--blue); border-color: var(--berry); }

/* ----------------------------------------------------------
   7. FOOTER + THANK-YOU PAGE
   ---------------------------------------------------------- */
.site-footer { background: var(--plum); color: var(--ivory); padding: 3rem 0; text-align: center; }
.site-footer a { color: var(--blue); }
.logo--footer { font-size: 2rem; margin-bottom: .5rem; }
.copyright { font-family: var(--font-mono); font-size: .75rem; opacity: .75; margin-top: 1.5rem; margin-bottom: 0; }
.thanks { padding: calc(var(--header-h) + 6rem) 0 6rem; min-height: 70vh; }

/* ----------------------------------------------------------
   8. SCROLL FADE-IN  (only active when JavaScript is on)
   ---------------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------------------------------------
   PHONE-ONLY TWEAKS (screens narrower than 768px)
   CHANGE: padding values below set the space between sections.
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .section { padding: 3.25rem 0; }
  .section--narrow { padding: 2.75rem 0; }
  .section-head { margin-bottom: 2.25rem; }
  .wedding { margin-bottom: 1.75rem; }
  .gallery + .wedding { margin-top: 3.5rem; }
  /* smaller photo credit on the hero photo */
  .hero-caption { font-size: .58rem; letter-spacing: .03em; padding: .25rem .55rem; right: .75rem;
    background: transparent; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }   /* CHANGE: no dark box on phones */
}

/* About on phones: "About" + heading first, then the photo, then the story.
   (The text block "dissolves" so its pieces can be re-ordered around the photo.) */
@media (max-width: 859px) {
  #about .split { gap: 0; align-items: start; }
  #about .split-text { display: contents; }
  #about .split-text .eyebrow { order: 1; text-align: center; }
  #about .split-text h2 { order: 2; text-align: center; }
  #about .split-media { order: 3; margin: .5rem 0 1.75rem; }
  #about .split-text p:not(.eyebrow), #about .split-text .text-link { order: 4; }
}