/* WordPress-only additions on top of css/site.min.css (the static site's
   bundle, copied by tools/sync-from-static.sh — don't edit it here).
   ========================================================================== */

/* Uploaded photos in the design's boxes (ju_attachment_img() in inc/helpers.php).
   ju-cover: the box stays as designed, the photo is cropped to it.
   ju-fill: the design crops a specific bundled photo with offsets (collage,
   polaroids, occasion cards, prep cells); an upload fills the window instead. */
.ju-cover {
  object-fit: cover;
}

img.ju-fill {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
  translate: none;
}

/* Honeypot of the forms: off-screen for people, still filled in by bots */
.ju-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* A form while it is being sent */
.is-sending [type="submit"] {
  opacity: 0.6;
  cursor: progress;
}

/* The popup has no status line in the design; it shows send errors only
   (a successful send switches the popup to its thank-you state) */
.popup__status {
  display: none;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 18px;
  color: var(--c-red);
  text-align: center;
}

.popup__status.is-visible {
  display: block;
}

/* Pages other than the home page (privacy policy, 404): a dark band under the
   header, the text in the container; the footer's curve overlaps the bottom
   332px (desktop) / 128m (compact), hence the large bottom padding. */
.ju-page {
  position: relative;
  min-height: 60vh;
  padding: 220px 0 440px;
  background: var(--c-black);
  color: var(--c-white);
}

.ju-page__inner {
  max-width: 960px;
  padding: 0 24px;
}

.ju-page__title {
  margin: 0 0 40px;
  font-size: 64px;
  font-weight: var(--fw-regular);
  line-height: 1;
  text-transform: uppercase;
}

.ju-page__content {
  font-size: 18px;
  line-height: 1.6;
}

.ju-page__content a {
  color: inherit;
}

@media (max-width: 1279px) {
  .ju-page {
    padding: 140px 0 calc(220px * var(--m));
  }

  .ju-page__title {
    font-size: 40px;
  }

  .ju-page__content {
    font-size: 16px;
  }
}

/* Privacy policy (template-privacy.php): a dark band with the label and the
   title like the section headings, the text on cream, then the footer (its
   curve overlaps the last 332px desktop / 128m compact).
   ========================================================================== */
:root {
  --g-legal-hero: linear-gradient(208.84deg, #0c0707 10.824%, #720006 95.566%); /* the compact expertise gradient */
}

.ju-legal {
  position: relative;
  background: var(--c-cream);
  color: var(--c-wine);
}

.ju-legal__hero {
  padding: 240px 0 110px;
  background: var(--g-legal-hero);
  color: var(--c-white);
}

.ju-legal__head,
.ju-legal__body .container {
  padding: 0 80px;
}

.ju-legal__label {
  margin: 0 0 28px;
}

.ju-legal__title {
  margin: 0;
  font-size: 85px;
  font-weight: var(--fw-regular);
  line-height: 79px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.ju-legal__date {
  margin: 36px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--c-white-55);
}

.ju-legal__body {
  padding: 110px 0 472px;
}

/* Full width of the container (80px margins) on desktop and laptop */
.ju-legal__content {
  font-size: 18px;
  line-height: 28px;
  color: var(--c-wine-75);
}

.ju-legal__content > :first-child {
  margin-top: 0;
}

.ju-legal__content .ju-legal__lead {
  font-size: 26px;
  line-height: 34px;
  letter-spacing: -0.03em;
  color: var(--c-wine);
}

.ju-legal__content h2 {
  margin: 72px 0 20px;
  padding-top: 24px;
  border-top: 1px solid var(--c-wine-15);
  font-size: 30px;
  font-weight: var(--fw-medium);
  line-height: 33px;
  letter-spacing: -0.03em;
  color: var(--c-wine);
}

.ju-legal__content p {
  margin: 0 0 16px;
}

.ju-legal__content ul {
  margin: 0 0 16px;
  padding-left: 22px;
}

.ju-legal__content li {
  margin-bottom: 6px;
}

.ju-legal__content a {
  color: var(--c-wine);
}

/* Laptop: the desktop values × 0.75, like the rest of the site */
@media (max-width: 1919px) {
  .ju-legal__hero { padding: 180px 0 82px; }
  .ju-legal__head, .ju-legal__body .container { padding: 0 60px; }
  .ju-legal__label { margin-bottom: 21px; }
  .ju-legal__title { font-size: 63.75px; line-height: 59.25px; }
  .ju-legal__date { margin-top: 27px; font-size: 12px; line-height: 18px; }
  .ju-legal__body { padding: 82px 0 354px; }
  .ju-legal__content { font-size: 13.5px; line-height: 21px; }
  .ju-legal__content .ju-legal__lead { font-size: 19.5px; line-height: 25.5px; }
  .ju-legal__content h2 { margin: 54px 0 15px; padding-top: 18px; font-size: 22.5px; line-height: 24.75px; }
  .ju-legal__content p, .ju-legal__content ul { margin-bottom: 12px; }
}

/* Tablets and phones: the 320m column of the compact layout */
@media (max-width: 1279px) {
  .ju-legal__hero { padding: calc(150px * var(--m)) 0 calc(56px * var(--m)); }
  .ju-legal__head, .ju-legal__body .container { width: calc(320px * var(--m)); margin: 0 auto; padding: 0; }
  .ju-legal__label { margin-bottom: calc(16px * var(--m)); }
  /* Long single words (RU "КОНФИДЕНЦИАЛЬНОСТИ") are wider than the 320m
     column at 40m: smaller, and hyphenated where they still don't fit */
  .ju-legal__title { font-size: calc(32px * var(--m)); line-height: calc(34px * var(--m)); -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
  .ju-legal__date { margin-top: calc(20px * var(--m)); font-size: calc(13px * var(--m)); line-height: calc(18px * var(--m)); }
  .ju-legal__body { padding: calc(56px * var(--m)) 0 calc(128px * var(--m) + 90px); }
  .ju-legal__content { font-size: calc(15px * var(--m)); line-height: calc(23px * var(--m)); }
  .ju-legal__content .ju-legal__lead { font-size: calc(19px * var(--m)); line-height: calc(25px * var(--m)); }
  .ju-legal__content h2 { margin: calc(44px * var(--m)) 0 calc(14px * var(--m)); padding-top: calc(16px * var(--m)); font-size: calc(21px * var(--m)); line-height: calc(25px * var(--m)); }
}