/* Harbor Motel - static replica of the original Squarespace layout.
   Measurements taken from the live stayharbormotel.com pages. */

@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #3836b5;
  font-family: "Figtree", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 0.9em;               /* 14.4px, as on the original */
  color: #777;
  -webkit-font-smoothing: antialiased;
}
a { color: #78260c; text-decoration: none; }
a:hover { opacity: .8; }
img { border: 0; }

/* White page panel */
#canvas {
  width: 1150px;
  max-width: 100%;
  margin: 0 auto;
  padding: 50px;
  background: #fff;
  box-shadow: 0 0 40px rgba(0, 0, 0, .05);
}

/* Header */
#header { height: 104px; }
#header::after { content: ""; display: table; clear: both; }
#logo { float: left; }
#logo h1 { margin: 0; line-height: 0; font-size: 16px; }
#logo img { height: 104px; width: auto; display: inline-block; }
#topNav { float: right; }
#siteNav { list-style: none; margin: 0; padding: 0; }
#siteNav li { float: left; height: 48px; }
#siteNav a {
  display: inline-block;
  padding: 7.5px 15px;
  line-height: 33px;
  letter-spacing: 3px;
  text-transform: capitalize;
  color: #999;
  transition: color .15s;
}
#siteNav li:last-child a { padding-right: 0; }
#siteNav a:hover, #siteNav .active-link a { color: #111; opacity: 1; }
#mobile-toggle { display: none; }

.page-divider { border-bottom: 1px solid #e4e4e4; }

/* Page body */
#page { margin: 40px 0; }
#page.gallery-page { margin: 0; }

/* Squarespace-style 12 column grid */
.sqs-row { margin: 0 -17px; }
.sqs-row::after { content: ""; display: table; clear: both; }
.col { float: left; }
.span-12 { width: 100%; }
.span-8 { width: 66.6667%; }
.span-6 { width: 50%; }
.span-4 { width: 33.3333%; }
.sqs-block { padding: 15px 17px; }
.sqs-block.top0 { padding-top: 0; }
.sqs-block.bot0 { padding-bottom: 0; }

/* Text blocks */
.sqs-html-content > *:first-child { margin-top: 0; }
.sqs-html-content > *:last-child { margin-bottom: 0; }
.sqs-html-content p { margin: 0 0 16px; }
.sqs-html-content ul { margin: 16px 0; padding-left: 40px; }
.sqs-html-content h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #222;
  min-height: 22.6px;
}
strong { font-weight: 700; }

/* Home page slideshow (arrows, fade) */
.slideshow { position: relative; overflow: hidden; background: rgba(175, 175, 175, .1); }
.slideshow .slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.slideshow .slide.active { opacity: 1; }
.home-slideshow { width: 100%; aspect-ratio: 16 / 9; }
.home-slideshow .arrow {
  position: absolute; top: 50%; margin-top: -30px;
  width: 44px; height: 60px; padding: 10px;
  background: rgba(0, 0, 0, .12); color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.home-slideshow .arrow:hover { background: rgba(0, 0, 0, .3); }
.home-slideshow .prev { left: 0; }
.home-slideshow .next { right: 0; }
.home-slideshow .arrow svg { width: 16px; height: 22px; }

/* Map */
.map { display: block; width: 100%; height: 360px; border: 0; background: #e5e3df; }

/* Photos page gallery (3:2 slideshow + thumbnail strip) */
.gallery-slides { width: 100%; aspect-ratio: 3 / 2; }
.gallery-slides .arrow {
  position: absolute; top: 50%; margin-top: -20px;
  width: 40px; height: 40px; border-radius: 10%;
  background: #222; color: #fff; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s;
}
.gallery-slides .prev { left: 21px; }
.gallery-slides .next { right: 21px; }
.gallery-slides .arrow.disabled { opacity: 0; pointer-events: none; }
.gallery-slides .arrow svg { width: 10px; height: 14px; }
.thumb-strip { margin: 20px 0; height: 66px; overflow: hidden; position: relative; }
.thumb-track { display: flex; transition: transform .4s ease; }
.thumb {
  flex: 0 0 100px; width: 100px; height: 66px; padding: 0; border: 0; cursor: pointer;
  background-size: cover; background-position: center; opacity: .5; transition: opacity .2s;
}
.thumb:hover, .thumb.active { opacity: 1; }

/* Image blocks (Reviews page) */
.image-block img { display: block; width: 100%; height: auto; }

/* Footer */
#footer { margin-top: 32px; text-align: center; }
#bottomNav { height: 30px; }

/* Mobile */
@media (max-width: 640px) {
  #canvas { padding: 20px; }
  #header { height: auto; }
  #logo img { height: 70px; }
  #topNav { float: right; position: static; }
  #mobile-toggle {
    display: block; margin-top: 11px; padding: 10px; background: none; border: 0; cursor: pointer; color: #999;
  }
  #mobile-toggle svg { display: block; width: 24px; height: 24px; }
  #siteNav { display: none; position: absolute; left: 0; right: 0; top: 0; z-index: 10; background: #fff; padding: 30px 0; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
  #siteNav.open { display: block; }
  #siteNav li { float: none; height: auto; }
  #siteNav a, #siteNav li:last-child a { display: block; padding: 7.5px 30px; line-height: 48px; }
  #siteNav .close-item { text-align: right; }
  #siteNav .close-item button { background: none; border: 0; padding: 7.5px 30px 30px; cursor: pointer; color: #999; font-size: 28px; line-height: 1; }
  #header { position: relative; }
  .col, .span-8, .span-6, .span-4 { float: none; width: 100%; }
  .sqs-block.top0 { padding-top: 15px; }
  .sqs-row:first-child > .col:first-child > .sqs-block:first-child { padding-top: 0; }
  #page { margin: 24px 0; }
  .map { height: 300px; }
}
@media (min-width: 641px) {
  #siteNav .close-item { display: none; }
}