/* EPic Event Photo Booths: Jenn's design, rebuilt from the Wix capture (docs/DESIGN.md).
   Values come from the computed styles in docs/migration/design-tokens.json. */

/* ---------- Fonts (uploaded to Wix by Jenn; files in /assets/fonts) ---------- */
@font-face { font-family: "Brown Carolina Sans"; src: url(/assets/fonts/brown-carolina-sans.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "La Luxes Serif"; src: url(/assets/fonts/la-luxes-serif.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "La Luxes Serif W05"; src: url(/assets/fonts/la-luxes-serif-w05.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Le Mores Serif"; src: url(/assets/fonts/le-mores-serif.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Le Mores Script"; src: url(/assets/fonts/le-mores-script.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Arches"; src: url(/assets/fonts/arches.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Astrid"; src: url(/assets/fonts/astrid.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Rasella"; src: url(/assets/fonts/rasella.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Greenold"; src: url(/assets/fonts/greenold.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Roberta"; src: url(/assets/fonts/roberta.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "About Heart"; src: url(/assets/fonts/about-heart.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Elegant Golden Script"; src: url(/assets/fonts/elegant-golden-script.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Sweet Brownies"; src: url(/assets/fonts/sweet-brownies.woff2) format("woff2"); font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --black: #020200;
  --white: #fefefe;
  --gold-light: #dcc06d;   /* nav bar, hero title */
  --gold: #d8ae52;         /* client login */
  --gold-deep: #c4943f;    /* buttons, footer rule */
  --ink: #020200;
  --cream-veil: rgba(255, 253, 246, 0.82);

  --f-nav: "Brown Carolina Sans", "Le Mores Serif", sans-serif;
  --f-serif: "Le Mores Serif", "Cormorant Garamond", Georgia, serif;
  --f-script: "Le Mores Script", cursive;
  --f-display: "Arches", "Le Mores Serif", Georgia, serif;
  --f-luxe: "La Luxes Serif", "Le Mores Serif", Georgia, serif;
  --f-body: Arial, Helvetica, sans-serif;
  --f-light: "Jost", "Brandon Grotesque", Arial, sans-serif; /* Wix's Brandon Grotesque isn't ours to host */
  --f-button: "Playfair Display", Georgia, serif;

  --glitter: url(/assets/img/gold-glitter-background.png);
  --content: 1080px;
  --gutter: 16px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--black); color: var(--ink); font: 16px/1.4 var(--f-body); }
main { background: var(--white); overflow-x: clip; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
p + p { margin-top: 1.4em; }

/* ---------- Header ---------- */
.site-header { background: var(--black); position: relative; z-index: 20; }
.site-header__top { position: relative; max-width: 1440px; margin: 0 auto; height: 255px; display: flex; justify-content: center; align-items: flex-start; }
.site-header__logo img { width: 458px; height: auto; margin-top: 8px; }
.btn-login {
  position: absolute; right: calc(50% - 488px); top: 200px;
  display: inline-block; padding: 7px 38px; background: var(--gold); color: var(--white);
  font: 17px/1.4 var(--f-button); letter-spacing: 2.55px; text-decoration: none;
  outline: 1px solid var(--white); outline-offset: -4px;
}
.btn-login:hover { background: var(--gold-deep); }
.nav-toggle { display: none; }

.site-nav { background: var(--gold-light); }
.site-nav > ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1440px; display: flex; justify-content: space-between; }
.site-nav li { position: relative; }
.site-nav a, .site-nav button {
  display: block; padding: 7px 8px; color: var(--black); background: none; border: 0; cursor: pointer;
  font: 700 21px/31px var(--f-nav); text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.site-nav > ul > li > a:hover, .site-nav > ul > li > button:hover, .site-nav li:focus-within > button { color: var(--white); }
.site-nav .sub-toggle { display: none; }
.site-nav li ul {
  list-style: none; margin: 0; padding: 0; position: absolute; left: 0; top: 100%; min-width: 100%;
  background: var(--gold-light); display: none;
}
.site-nav li ul a { font-size: 17px; line-height: 1.3; padding: 10px 14px; }
.site-nav li ul a:hover { background: var(--gold-deep); color: var(--white); }
.site-nav li.has-sub:hover > ul, .site-nav li.has-sub:focus-within > ul, .site-nav li.open > ul { display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 603px; border-top: 33px solid var(--black); overflow: hidden; background: var(--black); display: flex; align-items: flex-end; justify-content: center; }
.hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__title {
  position: relative; max-width: 1140px; margin: 0 var(--gutter) 88px; text-align: center;
  color: var(--gold-light); font: 37px/1.3 var(--f-serif);
  text-shadow: rgba(255, 255, 255, 0.6) 1px 1px 1px, rgba(0, 0, 0, 0.6) -1px -1px 1px;
}

/* ---------- Glitter sections: gold bands with cream panels between ---------- */
.glitter { background: var(--glitter) center / cover; }
.band { padding: 22px var(--gutter); text-align: center; }
.band--thin { padding: 26px 0; }
.band__title { font: 700 41px/1.25 var(--f-serif); }
.band__title--sub { font-size: 34px; font-weight: 400; margin-top: 18px; }
.band__script { font: 54px/1.3 var(--f-script); margin-top: 0; }
.band__display { font: 68px/1.2 var(--f-display); display: inline-block; }
.band__display--rule::after { content: ""; display: block; width: 41%; height: 1px; background: var(--black); margin: 4px auto 0 0; transform: translateX(17%); }
.band--callout { padding: 44px var(--gutter) 46px; }
.band--callout p { font: bold 18px/2.2 var(--f-serif); }

.panel { background: var(--cream-veil); padding: 50px var(--gutter) 46px; }
.panel--wide { padding-top: 52px; padding-bottom: 38px; }

.split { max-width: var(--content); margin: 0 auto; display: flex; gap: 32px; align-items: flex-start; }
.split + .split { margin-top: -20px; }
.split__text { flex: 1 1 0; min-width: 0; }
.split__media { flex: 0 0 auto; }
.split--reverse .split__text { padding-top: 48px; }
.split__media--stack { display: flex; flex-direction: column; align-items: center; gap: 64px; }

.heading-serif { font: 700 22px/1.4 var(--f-serif); color: var(--black); }
.heading-serif--rule { text-align: center; margin-bottom: 22px; }
.heading-serif--rule::after { content: ""; display: block; width: 284px; max-width: 60%; height: 1px; background: var(--black); margin: 18px auto 0; }
.heading-serif--bold { font-weight: 700; margin-bottom: 14px; }
.heading-serif--small { font-size: 17px; font-weight: 700; margin-top: 1.4em; }
.split p:not(.heading-serif) { font-size: 16px; line-height: 22.4px; }

.photo-frame { margin: 0; background: var(--white); padding: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25); }
.photo-frame img { width: 100%; }
.split > .photo-frame { width: 388px; margin-top: 2px; }
.split__media--stack .photo-frame { width: 427px; }

.btn-gold {
  display: inline-block; min-width: 320px; padding: 9px 24px; text-align: center;
  background: var(--gold-deep); color: var(--white); text-decoration: none;
  font: bold 18px/22px var(--f-body); letter-spacing: 1.8px;
}
.btn-gold:hover { background: var(--black); }

.prose { color: var(--black); }
.prose > * { max-width: 1102px; margin-left: auto; margin-right: auto; }
.prose h3 { font: 26px/1.3 var(--f-display); font-weight: 700; margin-top: 30px; }
.prose h3:first-child { margin-top: 0; }
.prose p { font-size: 16px; line-height: 22.4px; margin-top: 0; }
.prose p + p { margin-top: 22px; }

/* ---------- As seen on ---------- */
.seen-on { background: var(--white); border-bottom: 10px solid var(--black); }
.seen-on__title { background: var(--black); color: #fafafa; font: bold 16px/32px var(--f-body); text-align: center; text-transform: uppercase; }
.seen-on__logos { list-style: none; margin: 0 auto; padding: 14px var(--gutter); max-width: 1440px; display: flex; justify-content: space-around; align-items: center; gap: 16px; }
.seen-on__logos img { width: 223px; aspect-ratio: 223 / 81; object-fit: cover; }
.seen-on__logos li:nth-child(4) img { aspect-ratio: 223 / 99; }

/* ---------- Occasions ---------- */
.occasions { background: var(--white); padding: 10px var(--gutter) 84px; }
.occasions__title { font: 50px/1.2 var(--f-display); text-align: center; margin-bottom: 18px; }
.occasions__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1376px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.occasion { display: block; text-decoration: none; color: var(--black); }
.occasion__img { position: relative; display: block; aspect-ratio: 260 / 377; overflow: hidden; }
.occasion__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s ease; }
.occasion__img img + img { opacity: 0; }
.occasion:hover .occasion__img img + img, .occasion:focus-visible .occasion__img img + img { opacity: 1; }
.occasion__label { display: block; text-align: center; font: 26px/1.6 var(--f-luxe); letter-spacing: 2px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--black); color: var(--white); padding: 40px var(--gutter) 0; border-top: 8px solid var(--gold-deep); }
.awards { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; }
.awards img { width: 79px; aspect-ratio: 79 / 81; object-fit: cover; }
.awards li:nth-child(4) img, .awards li:nth-child(5) img { width: 83px; }
.awards__big img { width: 138px !important; }
.site-footer__brand { max-width: 1150px; margin: 12px auto 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.site-footer__brand::before, .site-footer__brand::after { content: ""; grid-row: 2; height: 2px; background: var(--gold-deep); align-self: start; margin-top: -34px; }
.site-footer__brand::before { grid-column: 1; }
.site-footer__brand::after { grid-column: 3; }
.site-footer__logo { width: 273px; }
.site-footer__link { text-align: center; color: var(--gold-light); font: 12px/1 var(--f-serif); padding-bottom: 46px; }
.site-footer__cols { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 450px 1fr; align-items: center; }
.site-footer__col { font: 17px/1.25 var(--f-serif); text-align: center; font-style: normal; margin: 0; padding: 22px 0; }
.site-footer__col--mid { border-left: 2px solid var(--gold-deep); border-right: 2px solid var(--gold-deep); padding: 26px 34px; }
.site-footer__email { display: block; font: 18px/1.2 var(--f-luxe); color: var(--gold-light); text-decoration: none; margin-bottom: 14px; }
.site-footer__area { font: 15px/1.5 var(--f-light); text-transform: none; }
.site-footer__social { list-style: none; }
.site-footer__copy { font: 15px/21px var(--f-body); text-align: center; padding: 34px 0 6px; }

/* ---------- Phone and small tablet ---------- */
@media (max-width: 1100px) {
  .site-header__top { height: auto; padding: 14px var(--gutter); justify-content: space-between; align-items: center; }
  .site-header__logo img { width: 150px; margin: 0; }
  .btn-login { position: static; padding: 6px 14px; font-size: 14px; letter-spacing: 1.5px; margin-left: auto; margin-right: 12px; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; padding: 10px; background: var(--gold-light); border: 0; cursor: pointer; }
  .nav-toggle span { display: block; height: 3px; background: var(--black); }
  .site-nav { display: none; }
  .site-nav.is-open { display: block; }
  .site-nav > ul { flex-direction: column; }
  .site-nav > ul > li { border-top: 1px solid rgba(0, 0, 0, 0.15); }
  .site-nav a, .site-nav button { width: 100%; text-align: left; padding: 12px var(--gutter); }
  .site-nav li.has-sub:hover > ul { display: none; }
  .site-nav li.open > ul { display: block; position: static; background: rgba(255, 255, 255, 0.35); }
  .site-nav .sub-toggle { display: block; position: absolute; right: 0; top: 0; width: 56px; height: 55px; padding: 0; }
  .site-nav .sub-toggle::after, .site-nav li.has-sub > button:not(.sub-toggle)::after { content: "+"; float: right; font-size: 24px; }
  .site-nav .sub-toggle::after { float: none; }
  .site-nav li.open > button::after { content: "–"; }
  .site-nav li ul a { padding-left: 32px; }

  .hero { height: 62vw; min-height: 300px; border-top: 0; }
  .hero__title { font-size: clamp(20px, 4.4vw, 40px); margin-bottom: 7vw; }
  .band__title { font-size: clamp(24px, 5.6vw, 41px); }
  .band__title--sub { font-size: clamp(18px, 4.6vw, 34px); }
  .band__script { font-size: clamp(30px, 7.4vw, 54px); }
  .band__display { font-size: clamp(40px, 10vw, 68px); }
  .band--callout p { font-size: 16px; line-height: 1.6; }
  .band--callout br { display: none; }

  .split, .split--reverse { flex-direction: column; gap: 28px; }
  .split--reverse { flex-direction: column-reverse; }
  .split + .split { margin-top: 40px; }
  .split--reverse .split__text { padding-top: 0; }
  .split > .photo-frame, .split__media--stack .photo-frame { width: min(100%, 427px); margin: 0 auto; }
  .split__media { align-self: center; }
  .split__media--stack { gap: 28px; }
  .btn-gold { min-width: 0; width: min(100%, 320px); }

  .seen-on__logos { flex-wrap: wrap; justify-content: center; }
  .seen-on__logos li { flex: 0 1 calc(50% - 16px); display: flex; justify-content: center; }
  .seen-on__logos img { width: 100%; max-width: 223px; }

  .occasions__grid { grid-template-columns: repeat(2, 1fr); }
  .occasions__grid li:last-child { grid-column: 1 / -1; width: calc(50% - 9px); justify-self: center; }
  .occasions__title { font-size: clamp(34px, 8vw, 50px); }
  .occasion__label { font-size: clamp(16px, 4.4vw, 26px); }

  .site-footer__brand { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .site-footer__brand::before, .site-footer__brand::after { display: none; }
  .site-footer__logo { order: -1; width: 200px; }
  .site-footer__link { padding: 6px 0; font-size: 14px; }
  .site-footer__cols { grid-template-columns: 1fr; }
  .site-footer__col--mid { border: 0; border-top: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); padding: 22px 0; }
}

/* ---------- Entrance animations (Wix's effects, recreated) ----------
   Add data-anim="<effect>" to an element; it plays once as it scrolls into view (site.js).
   Effects: up / down (rise from below / drop from above), from-left / from-right, fade, blur, grow, spin, expand, fold.
   Optional data-anim-delay="200" (ms). Content stays visible without JavaScript or with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .anim-ready [data-anim] {
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), transform 1.2s cubic-bezier(0.445, 0.05, 0.55, 0.95), filter 1.6s linear;
    transition-delay: var(--anim-delay, 0ms);
  }
  .anim-ready [data-anim="up"] { transform: translateY(60px); }
  .anim-ready [data-anim="down"] { transform: translateY(-60px); }
  .anim-ready [data-anim="from-left"] { transform: translateX(-60px); }
  .anim-ready [data-anim="from-right"] { transform: translateX(60px); }
  .anim-ready [data-anim="blur"] { filter: blur(12px); transition-duration: 1.4s, 1.4s, 2s; }
  .anim-ready [data-anim="grow"] { transform: scale(0.6); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); }
  .anim-ready [data-anim="spin"] { transform: rotate(-90deg) scale(0.4); transition-duration: 1.08s, 1.8s; transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19), cubic-bezier(0.645, 0.045, 0.355, 1); }
  .anim-ready [data-anim="expand"] { transform: scale(0.85); transition-timing-function: linear, cubic-bezier(0.645, 0.045, 0.355, 1); }
  .anim-ready [data-anim="fold"] { transform: perspective(800px) rotateX(-80deg); transform-origin: top; transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94), cubic-bezier(0.175, 0.885, 0.32, 1.275); }
  .anim-ready span[data-anim] { display: inline-block; }
  .anim-ready [data-anim].is-in { opacity: 1; transform: none; filter: none; }
}

/* ---------- Slideshow (Wix "Slideshow Gallery", CrossFade skin) ----------
   <div class="slideshow" data-interval="3000"> <img> <img> … </div>
   Photos cross-fade in 1s, the counter ("3/7") shows on hover, and a click opens the photo full screen (site.js).
   Size the box with the page's own class (aspect-ratio/width); photos fill it. */
.slideshow { position: relative; overflow: hidden; }
.slideshow > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; cursor: zoom-in; }
.slideshow > img:first-of-type, .slideshow.is-live > img.is-current { opacity: 1; }
.slideshow.is-live > img:first-of-type:not(.is-current) { opacity: 0; }
.slideshow.is-live > img:not(.is-current) { pointer-events: none; }
.slideshow.is-live > img.is-current { z-index: 1; }
.slideshow__counter {
  position: absolute; top: 0; right: 0; width: 60px; padding: 9px 10px 10px 0; text-align: right;
  font: 12px/1 Arial, Helvetica, sans-serif; color: var(--black); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; z-index: 2;
}
.slideshow:hover .slideshow__counter, .slideshow:focus-within .slideshow__counter { opacity: 1; }

.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(255, 255, 255, 0.98); }
.lightbox::backdrop { background: transparent; }
.lightbox__img { position: absolute; inset: 56px 64px; width: calc(100% - 128px); height: calc(100% - 112px); object-fit: contain; }
.lightbox button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: var(--black); cursor: pointer; font: 30px/1 Arial, sans-serif; }
.lightbox__close { top: 6px; right: 8px; }
.lightbox__prev { left: 8px; top: calc(50% - 24px); }
.lightbox__next { right: 8px; top: calc(50% - 24px); }
.lightbox__count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font: 12px Arial, sans-serif; }
@media (max-width: 600px) { .lightbox__img { inset: 56px 8px; width: calc(100% - 16px); } .lightbox__prev, .lightbox__next { top: auto; bottom: 4px; } }