/* Ben & Lily */

/* declare vars */
:root {
  --font-heading: "DKKaikoura";
  --font-subhead: "Aubrey";
  --font-body: "Zain";

  --color-green: #95A975;
  --color-orange: #EC6124;
  --color-orange-light: #FEC60C;

  --color-background: #ecebe4;
  --color-heading: #201f1e;
  --color-heading-shadow: var(--color-green);

  --border-width: 8px;
}

/* floating orange border, except on iOS26 */
body .site::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border: var(--border-width) solid var(--color-orange-light);
  border-image: linear-gradient(165deg, var(--color-orange-light), var(--color-orange)) 1;
  z-index: 10000;
}

body.ios26 .site::before {
  border-width: 0 var(--border-width);
}

body.ios26 {
  border: 0 solid var(--color-orange-light);
  border-width: 0 var(--border-width) var(--border-width);
  border-image: linear-gradient(165deg, var(--color-orange-light), var(--color-orange)) 1;
}

body.ios26 {
  .hero {
    margin-top: 0;
  }
}

/* Override: background texture repeat */
.site::after {
  background-repeat: repeat;
  background-size: auto;
  pointer-events: none;
}

.hero {
  margin-top: var(--border-width);
}

/* top menu */
.menu {
  top: 0;
  padding: calc(var(--border-width) + 10px) 40px 10px;
  font: normal normal 700 18px/20px var(--font-body);
  background: rgba(255, 255, 255, 0.8) !important;
  background-color: color-mix(in srgb, var(--color-background), transparent 35%) !important;
  backdrop-filter: blur(8px);
  border-bottom: .5px solid var(--color-green);
}

/* on small screens this appears when hamburger is open */
.menu__overlay {
  display: none !important;
}

.menu__content {
  max-width: 1000px;
  margin: 0 auto;
}

.menu__items {
  background: none !important;
  float: none;

  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

.menu__item a:is(:hover, :active, :focus-visible) {
  text-decoration: underline;
}

/* align RSVP to the right */
.menu__item--rsvp {
  margin-left: auto;
}

/* at smaller widths menu is a hamburger, so style items as the menu */
@media (max-width: 1024px) {
  body.has-menu {
    padding-top: 0;
  }

  /* collapse into button */
  .menu {
    top: 20px;
    right: 20px;
    left: auto;
    width: auto;
    padding: 10px 10px 0 0;
    border: .5px solid var(--color-green);
    border-radius: 4px;
  }

  .menu:hover,
  .menu:focus-within {
    background-color: var(--color-background) !important;
  }

  .menu .menu__icon {
    width: auto;
    white-space-collapse: collapse;
  }

  .menu .menu__icon::after {
    content: "Menu";
    letter-spacing: 0;
    text-transform: uppercase;
  }

  .menu__items {
    background: var(--color-background) !important;
    flex-direction: column;
    gap: 10px;
    
    top: 60px;
    right: -350px;
    bottom: auto;
    border: .5px solid var(--color-green);
    border-radius: 4px;
    
    height: auto; 
    /* calc(100vh - 80px); */
    overflow: scroll;

    opacity: .2;
  }

  .menu.is-opened .menu__items {
    opacity: 1;
  }

  .menu__item--rsvp {
    margin-left: unset;
  }
}


/* larger margin for larger menu */
.menu + .site {
  margin-top: 120px;
}

/* Custom Header */
.ws_header {
  margin: 50px 0;

  display: flex;
  gap: 40px;
  align-items: center;

  white-space: nowrap;
}

.ws_header_title {
  color: var(--color-heading);
  font-family: var(--font-heading);
  font-size: 80px;
  line-height: 80px;
  filter: drop-shadow(4px 2px 0px var(--color-heading-shadow));
  text-align: left;
  margin: 0 0 5px 0;
}

.ws_header_date {
  font-family: var(--font-subhead);
  font-size: 68px;
  line-height: 68px;
  font-weight: 700;
  color: var(--color-orange);
  text-align: left;
  margin: 0;
}

.ws_header_image {
  flex-shrink: 1;
  object-fit: scale-down;
}

@media (max-width: 700px) {
  .ws_header {
    flex-direction: column;
  }

  .ws_header_title {
    font-size: 60px;
    line-height: 60px;
  }

  .ws_header_date {
    font-size: 50px;
    line-height: 50px;
  }
}

/* remove default width restriction */
.sections {
  width: auto;
}

/* max-width for all content */
.section,
.hero__image {
  max-width: 1000px;
  margin: 0 auto;
  font: normal normal 400 24px/36px var(--font-body);
}

/* image blocks to full bleed when 'center' is chosen */
.section--element-image.section--alignment-center {
  max-width: 100%;
}

/* image blocks have borders 'left' or 'right' is chosen */
.section--element-image.section--alignment-left img,
.section--element-image.section--alignment-right img {
  padding: 0;
  border: .5px solid var(--color-green);
}

.section--element-image .section__subtitle {
  padding: 0 20px;
  font-size: 14px;
  font-style: italic;
  text-align: right;
  opacity: 80%;
}

/* Design tab overrides; font: */
.section__heading, .section__title {
  font-family: var(--font-heading);
  font-weight: 600;
}

.section--element-paragraph .section__text,
.section--element-quote .section__text {
  background: var(--color-background);
  padding: 30px 40px;
  box-shadow: 12px 12px 0px -4px var(--color-green);
  border: .5px solid var(--color-green);

  font-size: 36px;
  line-height: 48px;
}

.section__button {
  padding: 20px 40px;
  font-weight: 700;
}

/* Font family + weight + style */
/*.menu, .site { font-family: "Cardo"; font-weight: 400; font-style: normal; }
.header__main, .menu__names { font-family: "Alegreya SC"; font-weight: 400; font-style: normal; }
.and { font-family: "Alegreya SC"; font-weight: 400; font-style: normal; }
.section__title { font-family: "Alegreya SC"; font-weight: 400; font-style: normal; }
.header__date { font-family: "Alegreya SC"; font-weight: 400; font-style: normal; }
.section__heading { font-family: "Alegreya SC"; font-weight: 400; font-style: normal; }
.section__label { font-family: "Alegreya SC"; font-weight: 400; font-style: normal; }
  */
/* Font size + spacing + leading */
.site { letter-spacing: normal; line-height: 2; }
.header__main { letter-spacing: normal; line-height: 1; }
.header__delimiter { letter-spacing: normal; line-height: 1; }
.header__date { letter-spacing: normal; line-height: 1; }
.section__heading { letter-spacing: normal; line-height: 1; }
.section__title { letter-spacing: normal; line-height: 1.2; }
.section__label { letter-spacing: normal; line-height: 1; }

/* Color scheme */
/*
  body, .menu, .menu__items, .site { color: #010101 !important; }
  .section--element-quote .section__text:before, .section--element-quote .section__text:after { background-color: #010101 !important; }
  .section__input { border-color: #010101 !important; }
  .header__delimiter, .section__label, .section__divider { color: #010101 !important; }
  .menu__link--rsvp, .header__button, .section__button, .section__divider, .section--element-timeline:before { background-color: #010101 !important; }
  .section--element-timeline:after { border-color: #010101 !important; }
  .menu__link--rsvp, .header__button { color: #ffffff !important; }
  body, .menu, .menu__items, .site, .section--element-timeline:after { background-color: #ffffff !important; }
   { border-color: #ffffff !important; }
  */