/* ==========================================================================
   Maria & Ben — June 19, 2027
   Shared stylesheet for all pages.

   COLORS ARE ALL DEFINED ONCE, RIGHT BELOW. To change the site's whole
   color scheme, edit only the values inside :root { }.
   ========================================================================== */

:root {
  /* --- Core palette (matched to the Zola design) --- */
  --coral:        #C9603F;   /* main headings + body text */
  --coral-soft:   #D4805F;   /* lighter coral, for rules and small print */
  --coral-pale:   #F0D7CD;   /* hairline dividers */
  --mustard:      #F5C34B;   /* the yellow button */
  --mustard-dark: #E0AC30;   /* button hover */
  --ink:          #2A2118;   /* text on the yellow button */

  /* --- Botanical accents (used in the corner artwork) --- */
  --sage:         #8CA87B;
  --green-deep:   #56743F;
  --green-pale:   #C3D6B0;
  --blush:        #F0A9A0;
  --rose:         #E4849B;
  --violet:       #9B7FB8;

  /* --- Surfaces --- */
  --paper:        #FFFFFF;
  --paper-warm:   #FEFCFA;

  /* --- Type --- */
  --serif: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --sans:  "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  /* --- Layout --- */
  --measure: 720px;   /* max text width */
  --gutter:  24px;    /* side padding on phones */
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--coral);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  line-height: 1.65;
  text-align: center;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

/* --------------------------------------------------------------------------
   CORNER ARTWORK
   There is no artwork on the site right now. This section is the frame that
   will hold whatever you add later, so you don't have to write any CSS.

   When you have a graphic (PNG, JPG or SVG all work):
     1. Save the file into this assets folder
     2. In each page, find the "CORNER ARTWORK SLOT" comment near the top
        and un-comment the <img> line, pointing it at your filename
     3. Use  floral-topright  on the home page and  floral-bottomleft  on
        the others, or use whichever you prefer on every page

   Tuning it: width controls how big it is, and the negative top / right /
   bottom / left values are how far it bleeds off the edge of the screen.
   Artwork with a transparent background (PNG or SVG) sits best on the page;
   a JPG will show its white box.
   -------------------------------------------------------------------------- */

.floral {
  position: fixed;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  width: 46vw;
  max-width: 620px;
  opacity: 0.95;
}

.floral-topright   { top: -2vw;    right: -4vw; }
.floral-bottomleft { bottom: -3vw; left: -5vw; }

/* Add  flipped  alongside the class above to mirror the image, if your
   artwork points the wrong way for the corner you've put it in. */
.floral.flipped { transform: scaleX(-1); }

@media (max-width: 760px) {
  .floral { width: 74vw; max-width: none; opacity: 0.8; }
  .floral-topright   { top: -6vw;    right: -18vw; }
  .floral-bottomleft { bottom: -8vw; left: -22vw; }
}

/* Everything that is not artwork sits above it */
.page { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Header & navigation
   -------------------------------------------------------------------------- */

.site-header {
  padding: 46px var(--gutter) 0;
}

.monogram {
  font-family: var(--serif);
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  margin: 0 0 22px;
  line-height: 1.1;
}

.monogram a { text-decoration: none; }

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 30px;
}

.nav a {
  display: inline-block;
  padding: 4px 2px;
  font-size: 18px;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.18s ease, opacity 0.18s ease;
}

.nav a:hover { border-bottom-color: var(--coral-soft); }

/* The current page is underlined, matching the Zola look */
.nav a[aria-current="page"] { border-bottom-color: var(--coral); }

@media (max-width: 620px) {
  .site-header { padding-top: 32px; }
  .nav ul { gap: 2px 20px; }
  .nav a  { font-size: 16.5px; }
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

main {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 70px var(--gutter) 90px;
}

/* The home page is vertically airier than the inner pages */
main.home { padding-top: 90px; padding-bottom: 110px; }

@media (max-width: 620px) {
  main { padding: 46px var(--gutter) 60px; }
  main.home { padding-top: 54px; }
}

/* --------------------------------------------------------------------------
   Home page
   -------------------------------------------------------------------------- */

.names {
  font-size: clamp(42px, 9vw, 86px);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.08;
  margin: 0;
}

.ampersand {
  font-size: clamp(17px, 2.4vw, 21px);
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0.02em;
  margin: 26px 0;
}

.wedding-date {
  font-size: clamp(28px, 5.2vw, 46px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 78px 0 0;
  /* Old-style figures give the date that classic engraved look */
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
}

.wedding-place {
  font-size: 19px;
  letter-spacing: 0.06em;
  margin: 14px 0 0;
}

@media (max-width: 620px) {
  .wedding-date { margin-top: 48px; }
}

/* --- Countdown --- */

.countdown {
  margin: 62px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 34px;
  font-variant-numeric: oldstyle-nums;
  font-feature-settings: "onum" 1;
}

.countdown li { list-style: none; font-size: 19px; }
.countdown .num { margin-right: 6px; }

.countdown.is-over { font-style: italic; letter-spacing: 0.04em; }

@media (max-width: 620px) {
  .countdown { gap: 6px 22px; margin-top: 44px; }
  .countdown li { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Inner page typography
   -------------------------------------------------------------------------- */

.page-title {
  font-size: clamp(30px, 5.4vw, 46px);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 34px;
}

.lede {
  font-size: 20px;
  max-width: 600px;
  margin: 0 auto 60px;
}

.section-label {
  font-size: 15px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.section-title {
  font-size: clamp(25px, 4.4vw, 36px);
  font-weight: 400;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  line-height: 1.22;
  margin: 0 0 16px;
}

.address {
  font-style: italic;
  font-size: 19px;
  margin: 0 0 30px;
}

p { margin: 0 0 22px; }

.fine-print {
  font-size: 16.5px;
  color: var(--coral-soft);
}

/* Optional small ornament above a section heading. Nothing uses this right
   now. If you later add a little graphic you want repeated above sections,
   drop it in the assets folder and add this line above a section label:
     <img class="section-icon" src="assets/your-ornament.svg" alt="" aria-hidden="true">  */
.section-icon {
  width: 42px;
  margin: 0 auto 18px;
  opacity: 0.85;
}

/* Hairline divider with a small diamond in the middle */
.divider {
  border: 0;
  height: 1px;
  background: var(--coral-pale);
  max-width: 300px;
  margin: 64px auto;
  position: relative;
  overflow: visible;
}

.divider::after {
  content: "";
  position: absolute;
  top: -3.5px;
  left: 50%;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  background: var(--paper);
  border: 1px solid var(--coral-soft);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  background: var(--mustard);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 15px 62px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.btn:hover,
.btn:focus-visible { background: var(--mustard-dark); }

.btn--outline {
  background: transparent;
  color: var(--coral);
  border: 1.5px solid var(--coral-soft);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.faq {
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}

.faq details {
  border-bottom: 1px solid var(--coral-pale);
  padding: 4px 0;
}

.faq details:first-of-type { border-top: 1px solid var(--coral-pale); }

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 34px 20px 0;
  position: relative;
  font-size: 19.5px;
  letter-spacing: 0.01em;
}

.faq summary::-webkit-details-marker { display: none; }

/* Plus sign that becomes a minus when the question is open */
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  line-height: 1;
  color: var(--coral-soft);
}

.faq details[open] summary::after { content: "\2013"; }

.faq .answer {
  padding: 0 34px 24px 0;
  font-size: 18px;
}

.faq .answer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Things-to-do cards
   -------------------------------------------------------------------------- */

.category { margin: 0 0 66px; }

.listing {
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}

.listing .item {
  padding: 24px 0;
  border-bottom: 1px solid var(--coral-pale);
}

.listing .item:first-child { border-top: 1px solid var(--coral-pale); }

.item-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.item-meta {
  font-style: italic;
  font-size: 16.5px;
  color: var(--coral-soft);
  margin: 0 0 8px;
}

.item-note { font-size: 18px; margin: 0; }

/* --------------------------------------------------------------------------
   Schedule — the simple version currently on the site.
   Three days, each one a small day line above a large event line.
   -------------------------------------------------------------------------- */

.agenda {
  max-width: 480px;
  margin: 0 auto;
}

.agenda-item {
  padding: 34px 0;
  border-bottom: 1px solid var(--coral-pale);
}

.agenda-item:first-child { border-top: 1px solid var(--coral-pale); }

.agenda-day {
  margin: 0 0 8px;
  font-size: 15px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--coral-soft);
}

.agenda-event {
  margin: 0;
  font-size: clamp(25px, 4.4vw, 34px);
  font-weight: 400;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  line-height: 1.22;
}

@media (max-width: 620px) {
  .agenda-item { padding: 26px 0; }
}

/* --------------------------------------------------------------------------
   Schedule timeline — NOT USED RIGHT NOW.
   Kept here in case you later want a detailed hour-by-hour schedule with
   times down the left. Harmless to leave alone; harmless to delete.
   -------------------------------------------------------------------------- */

.day { margin: 0 0 8px; }

.timeline {
  max-width: 560px;
  margin: 0 auto;
  text-align: left;
}

.event {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 0 26px;
  padding: 22px 0;
  border-bottom: 1px solid var(--coral-pale);
}

.event:first-child { border-top: 1px solid var(--coral-pale); }

.event-time {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral-soft);
  font-variant-numeric: oldstyle-nums tabular-nums;
  font-feature-settings: "onum" 1;
  /* nudge the time onto the same baseline as the event name */
  padding-top: 3px;
}

.event-body > * { margin: 0 0 5px; }
.event-body > *:last-child { margin-bottom: 0; }

.event-name {
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  line-height: 1.25;
}

.event-where {
  font-style: italic;
  font-size: 17.5px;
  color: var(--coral-soft);
}

.event-note { font-size: 17.5px; }

.event-dress {
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral-soft);
  padding-top: 3px;
}

/* On a phone the time sits above the event instead of beside it */
@media (max-width: 560px) {
  .event {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .event-time { padding-top: 0; }
}

/* --------------------------------------------------------------------------
   Placeholders — the pink dashed boxes you fill in, then delete this style
   usage from the HTML. They are deliberately obvious so nothing ships empty.
   -------------------------------------------------------------------------- */

.todo {
  display: block;
  border: 1.5px dashed var(--coral-soft);
  background: #FDF4F0;
  border-radius: 4px;
  padding: 14px 18px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #A8532F;
  text-align: left;
}

.todo strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   RSVP embed
   -------------------------------------------------------------------------- */

.form-wrap {
  max-width: 680px;
  margin: 0 auto;
}

.form-wrap iframe {
  width: 100%;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  position: relative;
  z-index: 1;
  padding: 0 var(--gutter) 60px;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral-soft);
}

.site-footer .initials {
  font-size: 22px;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  color: var(--coral);
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Accessibility & motion
   -------------------------------------------------------------------------- */

a:focus-visible,
summary:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .floral, .nav, .btn { display: none; }
  body { color: #000; font-size: 12pt; }
}
/* --------------------------------------------------------------------------
   FLOATING FLOWERS
   -------------------------------------------------------------------------- */

body { position: relative; }

.petals {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.petal {
  position: absolute;
  display: block;
  will-change: transform;
  opacity: 0.9;
}

@media (max-width: 680px) {
  .petal { opacity: 0.7; }
}