/* Self-hosted DM Sans — avoids Google Fonts CDN / Safari ITP warning */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/dm-sans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/dm-sans-500.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/dm-sans-700.woff2') format('woff2');
}

/** Generally this CSS is super generic stuff which overrides Bootstrap. Not the custom stuff for the homepage**/

html {font-size: 16px;}

/** Other Stuff **/
h1 {font-size:2rem;line-height: 1.4em;margin:30px 0px 30px 0px;font-weight:700;}
h2 {line-height: 1.4em;margin:30px 0px 30px 0px;font-weight:700;}
h3 {line-height: 1.8em;margin:20px 0px 10px 0px; font-weight:700;font-size:24px;}
h4 {line-height: 1.8em;margin:20px 0px 10px 0px; font-weight:700;font-size:20px;}
body {font-family:"DM Sans", sans-serif;font-size: 18px;font-weight:400;}   
strong {font-weight:600;}   

p, ul, ol {font-weight:400;line-height: 1.7em;max-width:800px; margin-bottom:40px;font-size:18px;}
li {margin-bottom: 0.8em;}
a {color: #707070;transition: 0.2s;border-bottom: #b6b6b6 1px solid;text-decoration: none;}
a:hover {text-decoration:none; color: #F6714F; border-bottom: 1px solid;}
.page-header h3 {line-height:1.5;}

.spacer {height:60px}

.shadow {box-shadow: 0px 0px 20px #dcdcdc;}

.caption {margin-top: 5px;font-size: 80%; color:#707070;}
.tight {margin-top: -25px;}

/** Page Header and Nav **/
.page-header {background-color:#fafafa;border:none;color:#707070;margin-top: 0px;margin-bottom:0px;padding-top:60px; padding-bottom: 60px;}
.navbar{padding:0rem;}
.navbar-light .navbar-nav .nav-item {margin-bottom:5px; margin-top:5px;}

/** Logo **/
.navbar-light .navbar-brand {min-height:48px;font-weight:600; font-size: 24px; color: #22bee3;border-bottom: 1px solid transparent;}
.navbar-light .navbar-brand:hover {color: #22bee3; border-bottom: 1px solid;transition: 0.2s;}

/** Nav bar items **/
.navbar-light .navbar-nav .nav-link{color: #707070;font-size:18px;font-weight: 500;border-bottom: 1px solid transparent;padding: 10px 0px 2px 0px;}
@media (min-width: 768px) {.navbar-light .navbar-nav .nav-link{padding-top:0px;margin:0px 20px 0px 20px;border-bottom: 1px solid transparent;}}

.navbar-light .navbar-nav .nav-link:hover {color: #F6714F; padding-bottom: 2px;padding-left:0px;padding-right:0px;border-bottom: 1px solid transparent; }
@media (min-width: 768px) {.navbar-light .navbar-nav .nav-link:hover{border-bottom: 1px solid;}}

/** Burger **/
.navbar-toggler {border:none;}
.navbar-toggler-icon:hover {transition: 0.2s;}
.navbar-toggler:focus {background-color:#f4f4f4;box-shadow:none;outline:none;}


/*<!-- Navigation menu responsive tweaks -->*/
@media (max-width: 769px) {
  h1 {margin-top:40px;}
  div.page-header {padding-top:30px; padding-bottom:30px; }
  div.col-auto.p-3 {padding: 0.5rem!important;}
  }  


/** Page intro **/
.page-intro {margin-top: 0px;margin-bottom:50px;padding-top:50px; padding-bottom: 15px;}

/** coloured sections **/
.airtame-section {background: #f4f4f4;padding-top:80px; padding-bottom: 80px;}
.light-grey {background: #f4f4f4;}
.lg-divider {height: 8px;max-width: 64px;background: #f4f4f4;}
.dark-grey {background: #222; color:#fff;}
.dark-grey a {color:#b6b6b6}
.dark-grey a:hover {color: #F6714F;}
.honeycomb-yellow {background: #fed333}

/** Portfolio page **/
h3 a, h2 a {color:#222; border-bottom:none;}
.tag-line {margin-top:-20px;margin-bottom:80px;font-weight:300;max-width:550px;}
.tile {margin-bottom: 40px;}
.tile h3 {font-size: 18px;font-weight: 500;margin-top: 5px;}
.tile a {color:#222;}
.tile a:hover h3 {color:#F6714F;transition: 0.2s}
#airtame-thumbnail {border-bottom: none;}
#airtame-thumbnail:hover {border-bottom: none;}

/** Airtame Homescreen **/
.tv {border-radius:2px; border: solid 4px #222; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);margin-top:20px;margin-bottom: 30px;}
/** Back to top **/
#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 20px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background: none; /* Set a background color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
}

#myBtn svg {fill:#707070;}

#myBtn:hover {opacity: 1; /* Add a light-grey background on hover */
}

#myBtn svg:hover {fill:#F6714F;  transition: 0.3s;}

/** Footer with contact details  **/

.footer-line {height:10px;background:#f4f4f4;margin:60px 0 10px 0;}
#Footer a{border-bottom:none;line-height: 1.8em}


/** Lightbox **/
img.lb-enabled { cursor: zoom-in; }

#lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.95);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#lb-overlay.lb-open { display: flex; align-items: center; justify-content: center; }
#lb-overlay.lb-visible { opacity: 1; }

#lb-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 90vw;
  cursor: default;
  pointer-events: none;
}

#lb-img {
  display: block;
  max-width: 90vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: auto;
  transition: opacity 0.15s ease;
}
#lb-img.lb-img-loading { opacity: 0; }

#lb-caption {
  margin-top: 14px;
  margin-bottom: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #b6b6b6;
  text-align: center;
  max-width: 90vw;
  line-height: 1.5;
  min-height: 1em;
  pointer-events: auto;
}

#lb-close, #lb-prev, #lb-next {
  background: none;
  outline: none;
  cursor: pointer;
  font-family: "DM Sans", sans-serif;
  transition: color 0.15s, opacity 0.15s, border-color 0.15s, background 0.15s;
}

#lb-close {
  position: fixed;
  top: 20px;
  right: 24px;
  z-index: 1060;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 8px 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#lb-close:hover { color: #fff; }

#lb-prev, #lb-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1060;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #fff !important;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0.8;
}
#lb-prev { left: 32px; }
#lb-next { right: 32px; }
#lb-prev:hover, #lb-next:hover {
  opacity: 1;
  background: rgba(0,0,0,0.6);
}

#lb-overlay.lb-single #lb-prev,
#lb-overlay.lb-single #lb-next { display: none; }

body.lb-scroll-lock { overflow: hidden; }

@media (max-width: 576px) {
  #lb-prev { left: 12px; width: 40px; height: 40px; }
  #lb-next { right: 12px; width: 40px; height: 40px; }
  #lb-close { top: 12px; right: 14px; }
  #lb-caption { font-size: 13px; }
}

/** Scroll-reveal animation **/

.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

.scroll-reveal.scroll-revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal.scroll-revealed-instant {
  opacity: 1;
  transform: translateY(0);
  transition: none;
}

@media (max-width: 767px) {
  .scroll-reveal {
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }
}

/** Image hover zoom **/

/* Clip the scaled image to its original bounds (zoom in, not grow) */
.img-zoom-clip {
  display: block;
  overflow: hidden;
}

/* Remove inherited link border when an anchor directly wraps a clip container */
a:has(> .img-zoom-clip) {
  display: block;
  border-bottom: none;
}

/* Once revealed, switch to a snappy transition ready for hover */
img.img-fluid:not(.tv).scroll-revealed,
img.img-fluid:not(.tv).scroll-revealed-instant {
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  /* Zoom on hover for scroll-revealed images */
  img.img-fluid:not(.tv):not(.no-zoom).scroll-revealed:hover,
  img.img-fluid:not(.tv):not(.no-zoom).scroll-revealed-instant:hover {
    transform: scale(1.01);
  }

  /* Fallback: images not using scroll-reveal (e.g. prefers-reduced-motion) */
  img.img-fluid:not(.tv):not(.no-zoom):not(.scroll-reveal):hover {
    transform: scale(1.01);
    transition: transform 0.4s ease;
  }
}