/* =====================================
   TYPOGRAPHY — Praktijk La Aurora
   ===================================== */

/* ===== LORA ===== */

/* Regular 400 */
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/Lora-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Italic 400 */
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/Lora-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium 500 */
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/Lora-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Medium Italic 500 */
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/Lora-MediumItalic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* SemiBold 600 */
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/Lora-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* SemiBold Italic 600 */
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/Lora-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* Bold 700 */
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/Lora-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bold Italic 700 */
@font-face {
  font-family: "Lora";
  src: url("/assets/fonts/Lora-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ===== TANGERINE (logo) ===== */

@font-face {
  font-family: "Tangerine";
  src: url("/assets/fonts/Tangerine-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Tangerine";
  src: url("/assets/fonts/Tangerine-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* =====================================
   BASE TYPE
   ===================================== */

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--lh-body);
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 600;
  margin: 0;
}

h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  font-weight: var(--h1-weight);
}

h2 {
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  font-weight: var(--h2-weight);
}

h3 {
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  font-weight: var(--h3-weight);
}

p {
  font-size: var(--p-size);
  line-height: var(--p-line);
  font-weight: var(--p-weight);
  margin: 0 0 1rem;
}

/* Lead-teksten */
p.lead,
.bridge-lead,
.offer-subtitle,
.offer-card-lead {
  font-size: var(--p-lead-size);
  line-height: var(--p-lead-line);
  font-weight: var(--p-lead-weight);
}

/* Sub / accent */
p.hero-sub,
p.sub,
.p-sub,
.bridge-sub {
  font-size: var(--p-sub-size);
  line-height: var(--p-sub-line);
  font-weight: var(--p-sub-weight);
}

@media (max-width: 767px) {
  h1 {
    font-size: var(--h1-size-mobile);
    line-height: var(--h1-line-mobile);
  }

  h2 {
    font-size: var(--h2-size-mobile);
    line-height: var(--h2-line-mobile);
  }

  h3 {
    font-size: var(--h3-size-mobile);
    line-height: var(--h3-line-mobile);
    font-weight: var(--h3-weight-mobile);
  }

  p {
    font-size: var(--p-size-mobile);
    line-height: var(--p-line-mobile);
  }

  p.lead,
  .bridge-lead,
  .offer-subtitle,
  .offer-card-lead {
    font-size: var(--p-lead-size-mobile);
    line-height: var(--p-lead-line-mobile);
    font-weight: var(--p-lead-weight-mobile);
  }

  p.hero-sub,
  p.sub,
  .p-sub,
  .bridge-sub {
    font-size: var(--p-sub-size-mobile);
    line-height: var(--p-sub-line-mobile);
    font-weight: var(--p-sub-weight-mobile);
  }
}


/* =====================================
   REVIEW TYPOGRAPHY
   ===================================== */

.review-text {
  font-size: var(--review-text-size);
  line-height: var(--review-text-line);
  font-style: var(--review-text-style);
}

.review-author {
  font-size: var(--review-author-size);
  line-height: var(--review-author-line);
}

.review-more {
  font-size: var(--review-meta-size);
  line-height: var(--review-meta-line);
}

.review-nav {
  font-size: var(--review-nav-size);
  line-height: 1;
}

@media (max-width: 767px) {

  .review-text {
    font-size: var(--review-text-size-mobile);
    line-height: var(--review-text-line-mobile);
  }

  .review-author {
    font-size: var(--review-author-size-mobile);
  }

  .review-more {
    font-size: var(--review-meta-size-mobile);
  }

  .review-nav {
    font-size: var(--review-nav-size-mobile);
  }

}

/* Logo */
.logo {
  font-family: "Tangerine", "Times New Roman", serif;
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1;
}