/* ==========================================================================
   Layout additions to the design (maria-devito.css stays untouched).
   Animations for the parts below live in motion.css.
   ========================================================================== */

/* ---------- Header breakpoint ----------
   The full header row (socials · 3 links · logo · 2 links · Contact Me)
   needs ~1180px; the hamburger takes over below 1280px for comfortable
   spacing (the design switched at 900px and overlapped above that). The
   Contact Me button stays until the design's own 900px rule hides it. */
@media (max-width: 1279px) {
  .main-nav, .header-social { display: none; }
  .menu-toggle { display: inline-flex; }
}

/* ---------- Hamburger: three lines that morph into a cross ---------- */
.menu-toggle { position: relative; z-index: 2; }
.menu-toggle:hover { color: var(--gold-light); }
.menu-toggle:focus-visible { outline: 1px solid var(--gold-light); outline-offset: 2px; }
/* Whole-pixel line positions so all three render equally crisp. */
.menu-toggle__box { position: relative; display: block; width: 26px; height: 16px; }
.menu-toggle__box span {
  position: absolute; left: 0; width: 100%; height: 1px; background: currentColor;
  transform-origin: center;
}
.menu-toggle__box span:nth-child(1) { top: 1px; }
.menu-toggle__box span:nth-child(2) { top: 8px; }
.menu-toggle__box span:nth-child(3) { top: 15px; }
.menu-toggle.is-active .menu-toggle__box span:nth-child(1),
.menu-toggle.is-active .menu-toggle__box span:nth-child(3) { top: 8px; }
.menu-toggle.is-active .menu-toggle__box span:nth-child(1) { transform: rotate(45deg); }
.menu-toggle.is-active .menu-toggle__box span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.is-active .menu-toggle__box span:nth-child(3) { transform: rotate(-45deg); }

/* While the menu is open the header (logo + the toggle, now a cross) is
   pinned above the drawer, so it's there even if the page was scrolled. */
body.nav-open .site-header { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); z-index: 60; }
body.nav-open .site-header__rule { opacity: 0; }

/* ---------- Mobile drawer ---------- */
.mobile-nav {
  justify-content: center; gap: 0; padding: 150px 24px 48px; overflow-y: auto;
  background: radial-gradient(120% 70% at 50% 0%, #15263D 0%, var(--navy-deep) 62%);
}
.mobile-nav__close { display: none; } /* the header toggle closes it now */
.mobile-nav__links { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mobile-nav__links a {
  position: relative; padding: 4px 0;
  font-family: var(--font-display); font-size: clamp(34px, 6vw, 46px); line-height: 1.15;
  color: var(--ivory); text-decoration: none;
}
.mobile-nav__links a:hover, .mobile-nav__links a[aria-current="page"] { color: var(--gold-light); }
.mobile-nav__links a[aria-current="page"] { font-style: italic; }

.mobile-nav__footer {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  margin-top: 52px; text-align: center;
}
.mobile-nav__footer .ornament { margin-bottom: 14px; }
.mobile-nav a.mobile-nav__contact {
  font-family: var(--font-body); font-size: 13px; letter-spacing: .12em; color: var(--text-on-dark); text-decoration: none;
}
.mobile-nav a.mobile-nav__contact:hover { color: var(--gold-light); }
.mobile-nav__social { display: flex; gap: 10px; padding-top: 12px; }
.mobile-nav .mobile-nav__social a {
  width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(214, 190, 140, .35); color: var(--text-on-dark);
  font-size: 0; /* the design's .mobile-nav a sets 34px display text; icons only here */
  transition: color .3s, background .3s, border-color .3s;
}
.mobile-nav .mobile-nav__social a:hover { color: var(--navy); background: var(--gold-light); border-color: var(--gold-light); }
.mobile-nav__social svg { width: 16px; height: 16px; }

@media (max-height: 640px) {
  .mobile-nav { justify-content: flex-start; padding-top: 120px; }
  .mobile-nav__links { gap: 6px; }
  .mobile-nav__footer { margin-top: 32px; }
}

/* ---------- Gallery lightbox (site.js §9) ---------- */
.gallery-item { cursor: zoom-in; }
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 100000; /* above the WP admin bar */
  display: flex; align-items: center; justify-content: center;
  padding: 72px 104px 40px;
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(10, 20, 34, .94); }
.lightbox__figure {
  position: relative; margin: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
.lightbox__stage {
  position: relative; flex: 1 1 auto; min-height: 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__img { max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); }
.lightbox__ph {
  width: min(100%, 960px); aspect-ratio: 3 / 2; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--sand); color: #8C7B5C; font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
}
.lightbox__caption {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  width: min(100%, 960px); padding-top: 18px; border-top: 1px solid rgba(214, 190, 140, .25); color: var(--ivory);
}
.lightbox__text { display: flex; flex-direction: column; gap: 6px; }
.lightbox__cat { font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold-light); }
.lightbox__title { font-family: var(--font-display); font-size: 26px; line-height: 1.1; }
.lightbox__count { font-family: var(--font-display); font-size: 20px; color: var(--gold-light); white-space: nowrap; }

.lightbox__btn {
  position: absolute; z-index: 2; width: 52px; height: 52px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 1px solid rgba(214, 190, 140, .45); color: var(--ivory);
  transition: background .3s, color .3s, border-color .3s;
}
.lightbox__btn:hover, .lightbox__btn:focus-visible { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy); outline: none; }
.lightbox__close { top: 20px; right: 24px; }
.lightbox__nav { top: 50%; margin-top: -26px; }
.lightbox__nav--prev { left: 28px; }
.lightbox__nav--next { right: 28px; }
.lightbox.is-single .lightbox__nav { display: none; }

@media (max-width: 900px) {
  .lightbox { padding: 76px 16px 24px; }
  .lightbox__nav { top: auto; bottom: 24px; margin-top: 0; width: 46px; height: 46px; }
  .lightbox__nav--prev { left: 16px; }
  .lightbox__nav--next { right: 16px; }
  .lightbox__caption { padding: 16px 64px 0; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .lightbox__text { align-items: center; }
  .lightbox__title { font-size: 22px; }
}
body.admin-bar .lightbox__close { top: calc(20px + var(--wp-admin--admin-bar--height, 0px)); }

/* ---------- Form states (inc/forms.php, site.js §10) ---------- */
.md-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
form.is-sending { opacity: .7; pointer-events: none; transition: opacity .3s; }
.md-form-msg { margin: 0; font-size: 14px; line-height: 1.6; }
.md-form-msg.is-success { color: #4E7A55; }
.md-form-msg.is-error { color: #A4402F; }
.form--dark .md-form-msg.is-success { color: var(--gold-light); }
.form--dark .md-form-msg.is-error { color: #E8A493; }
.newsletter .md-form-msg { width: 100%; text-align: center; }
.field.is-invalid input, .field.is-invalid textarea { border-bottom-color: #A4402F; }
.form--dark .field.is-invalid input, .form--dark .field.is-invalid textarea { border-bottom-color: #E8A493; }
input.is-invalid { border-color: #A4402F; }
.md-field-error { font-size: 12px; letter-spacing: 0; text-transform: none; color: #A4402F; }
.form--dark .md-field-error { color: #E8A493; }

/* Thank-you panel that replaces a sent form. */
.md-form-done {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center;
  padding: 56px 40px; background: var(--ivory-light); border: 1px solid var(--line); outline: none;
}
.md-form-done--dark { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
.md-form-done p { max-width: 420px; margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 1.3; }
.newsletter .md-form-done { width: 100%; max-width: 560px; padding: 32px; }
.newsletter .md-form-done p { font-size: 22px; }
.md-form-done__mark {
  position: relative; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--gold);
}
.md-form-done__mark::after {
  content: ""; position: absolute; left: 20px; top: 15px; width: 12px; height: 22px;
  border: solid var(--gold); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg);
}