@import './generated/nav-priority.css';

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src:
    url('/fonts/Montserrat_400.woff2') format('woff2'),
    url('/fonts/Montserrat_400.woff') format('woff');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src:
    url('/fonts/Montserrat_400.woff2') format('woff2'),
    url('/fonts/Montserrat_400.woff') format('woff');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src:
    url('/fonts/Montserrat_400.woff2') format('woff2'),
    url('/fonts/Montserrat_400.woff') format('woff');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src:
    url('/fonts/Montserrat_400.woff2') format('woff2'),
    url('/fonts/Montserrat_400.woff') format('woff');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src:
    url('/fonts/Montserrat_400.woff2') format('woff2'),
    url('/fonts/Montserrat_400.woff') format('woff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* nav spacing */
body.error-status-page nav.primary ul li.nav-item-join:last-child {
  padding-right: 4px;
}

@media only screen and (max-width: 525px) {
  body.no-user nav.primary ul li a.editor-link,
  body.no-user nav.primary ul li a.nav-join-button {
    padding: 21px 12px 21px 0px;
  }

  body.no-user h4.logo {
    padding-right: 7px;
  }
}

@media only screen and (max-width: 425px) {
  /* A 60px phone header instead of 68px, with every piece of it scaled by the
     same factor (header.css). 67px of the bar scales; the 1px rule does not.
     The height is pinned because the scaled wordmark's line boxes round up to
     60.27px: on that fractional axis the pill and the hamburger bars snap to
     different device pixels and the icon sits visibly high against Join Now.
     The wordmark is the tallest item at 59.3px, so the pin only trims that
     rounding. */
  header {
    --header-scale: calc(59 / 67);
    height: calc(67px * var(--header-scale));
  }

  body.no-user h4.logo {
    padding-right: calc(7px * var(--header-scale));
  }

  /* The error page has no hamburger, so the CTA sits on the 16px edge inset,
     which does not scale: the li makes up whatever the scaled link padding
     (5px at full size) leaves. */
  body.error-status-page nav.primary ul li.nav-item-join:last-child {
    padding-right: calc(16px - 5px * var(--header-scale));
  }
}

@media only screen and (max-width: 375px) {
  nav.primary ul li a.nav-join-button p {
    padding: calc(5px * var(--header-scale)) calc(9px * var(--header-scale));
  }
}

/* visual feed */

@media only screen and (max-width: 1199px) {
  .photo-category-list article:nth-child(7),
  .photo-category-list article:nth-child(8),
  .performer-list article:nth-child(7),
  .performer-list article:nth-child(8) {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  section.visual-feed section.photos article > .photo-container img {
    max-height: 100vh;
  }

  .photo-category-list article:nth-child(7),
  .photo-category-list article:nth-child(8),
  .performer-list article:nth-child(7),
  .performer-list article:nth-child(8) {
    display: inherit;
  }
}

/* carousel position overrides */

[data-video-carousel-video-id="cam-vs-riah"] {
  --video-carousel-media-top: -10%;
}

[data-video-carousel-video-id="electro-box"] {
  --video-carousel-media-top: -7%;
}

[data-video-carousel-video-id="bottoms-up"] {
  --video-carousel-media-top: -42%;
}

[data-video-carousel-video-id="hitachi-torment"] {
  --video-carousel-media-top: -7%;
}

[data-video-carousel-video-id="daisy-and-vespa"] {
  --video-carousel-media-top: -17%;
}

[data-video-carousel-video-id="canoodle"] {
  --video-carousel-media-top: -15%;
}

[data-video-carousel-video-id="sack-and-jack"] {
  --video-carousel-media-top: -17%;
}

[data-video-carousel-video-id="awlivv-and-cam"] {
  --video-carousel-media-top: -15%;
}