/* =========================================================
   SHARED BUTTONS
   Navigation buttons remain in navigation.css.
   ========================================================= */

button {
  font:inherit;
  -webkit-tap-highlight-color:transparent;
}

.image-lightbox-nav[hidden] {
  display:none;
}

.image-lightbox-close,
.image-lightbox-nav {
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  font:inherit;
  line-height:1;
  cursor:pointer;
}

.image-lightbox-close {
  position:fixed;
  z-index:10001;
}

.image-lightbox-nav {
  min-width:44px;
  min-height:44px;
  color:#fff;
  font-size:clamp(48px, 7vw, 84px);
}

.image-lightbox-close:focus-visible,
.image-lightbox-nav:focus-visible,
.image-lightbox-trigger:focus-visible,
.contact-form button:focus-visible {
  outline:2px solid var(--black, #000);
  outline-offset:4px;
}

/* =========================================================
   DESKTOP BUTTONS
   ========================================================= */

@media screen and (min-width:1200px) and (min-height:501px) {
  .image-lightbox-close {
    top:20px;
    right:28px;
    color:var(--black, #000);
    font:200 48px/1 Arial, sans-serif;
  }

  .contact-form button {
    width:max-content;
    padding:12px 35px;
    border:1px solid var(--black, #000);
    border-radius:0;
    background:var(--white, #fff);
    color:var(--black, #000);
    font-family:"futura-pt-condensed", sans-serif;
    font-size:25px;
    cursor:pointer;
  }

  .contact-form button:hover {
    background:var(--black, #000);
    color:var(--white, #fff);
  }
}

/* =========================================================
   TABLET BUTTONS
   ========================================================= */

@media screen and (min-width:768px) and (max-width:1199px) and (min-height:501px) {
  .image-lightbox-close {
    top:16px;
    right:20px;
    color:var(--black, #000);
    font:200 46px/1 Arial, sans-serif;
  }

  .contact-form button {
    width:max-content;
    padding:12px 35px;
    border:1px solid var(--black, #000);
    border-radius:0;
    background:var(--white, #fff);
    color:var(--black, #000);
    font-family:"futura-pt-condensed", sans-serif;
    font-size:25px;
    cursor:pointer;
  }

  .contact-form button:hover {
    background:var(--black, #000);
    color:var(--white, #fff);
  }
}

/* =========================================================
   MOBILE BUTTONS
   ========================================================= */

@media screen and (max-width:767px),
       screen and (orientation:landscape) and (max-height:500px) {
  .image-lightbox-close {
    top:16px;
    right:20px;
    color:var(--black, #000);
    font:200 46px/1 Arial, sans-serif;
  }

  body#top .image-lightbox-close {
    top:18px;
    right:18px;
    font-size:42px;
  }

  .image-lightbox-nav {
    font-size:48px;
  }

  .contact-page button,
  .contact-form button {
    width:fit-content;
    min-height:44px;
    padding:10px 18px;
    border:1px solid var(--black, #000);
    border-radius:0;
    background:var(--black, #000);
    color:var(--white, #fff);
  }
}