/* Crescent Nob Hill - responsive layer.
   Loaded last, so it corrects the original desktop-fixed styling without
   touching the template stylesheet. */

/* ---- never let anything push the page sideways ---- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* ---- fluid media ---- */
img,
video,
svg,
canvas {
  max-width: 100%;
  height: auto;
}
img[width][height] {
  height: auto;
}
iframe,
embed,
object {
  max-width: 100%;
}
.sqs-block-horizontalrule hr {
  max-width: 100%;
}

/* wide embeds (maps, video) keep their ratio instead of overflowing */
.sqs-block-video .sqs-video-wrapper,
.embed-block .sqs-block-content > iframe {
  width: 100% !important;
  max-width: 100%;
}

/* ---- long words / urls must wrap, not overflow ---- */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
blockquote,
figcaption,
td,
th {
  overflow-wrap: break-word;
}

/* ---- tables scroll instead of stretching the layout ---- */
table {
  max-width: 100%;
}
.sqs-block-table .sqs-block-content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
  /* background images set at 100% width look cropped on short viewports */
  #home-intro {
    background-size: cover !important;
    background-position: center center !important;
  }
}

@media (max-width: 767px) {
  /* The template's grid rows carry a negative gutter (margin: 0 -17px) that
     their columns cancel with 20px of padding. The content lands inside the
     viewport either way, but the row box itself sticks out and would scroll
     the page sideways, so collapse the gutter and let the column padding do
     the spacing on its own. */
  .sqs-layout .row.sqs-row {
    margin-left: 0;
    margin-right: 0;
  }

  /* keep gutters on every content column */
  .Index-page-content,
  .Main-content,
  .Content-outer,
  .sqs-layout > .row > .span-12 {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  /* Squarespace index sections sized in vh get very tall on phones */
  .Index-page--has-image,
  .Index-page {
    min-height: 0 !important;
  }

  /* oversized display type scales with the viewport */
  h1 {
    font-size: clamp(28px, 7.5vw, 44px) !important;
    line-height: 1.15 !important;
  }
  h2 {
    font-size: clamp(22px, 5.6vw, 32px) !important;
    line-height: 1.2 !important;
  }
  h3 {
    font-size: clamp(19px, 4.6vw, 26px) !important;
    line-height: 1.25 !important;
  }

  /* multi-column blocks stack */
  .sqs-layout .row > .span-1,
  .sqs-layout .row > .span-2,
  .sqs-layout .row > .span-3,
  .sqs-layout .row > .span-4,
  .sqs-layout .row > .span-5,
  .sqs-layout .row > .span-6,
  .sqs-layout .row > .span-7,
  .sqs-layout .row > .span-8,
  .sqs-layout .row > .span-9,
  .sqs-layout .row > .span-10,
  .sqs-layout .row > .span-11 {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
  }
  .sqs-layout .row {
    display: block !important;
  }

  /* comfortable hit areas */
  a.sqs-block-button-element,
  .sqs-block-button-element,
  button,
  input[type="submit"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* forms must not exceed the screen */
  input,
  select,
  textarea {
    max-width: 100%;
    font-size: 16px; /* stops iOS zoom-on-focus */
  }
  .form-wrapper .field-list .fields > .field {
    width: 100% !important;
    float: none !important;
  }

  /* galleries: one column */
  .sqs-gallery-design-grid .slide,
  .sqs-gallery-block-grid .slide {
    width: 100% !important;
    clear: both !important;
  }
}

@media (max-width: 480px) {
  .Index-page-content,
  .Main-content,
  .Content-outer {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}