/*
Theme Name: Webcrema Child Theme
Description: This is a custom child theme for Webcrema
Theme URI:   https://webcrema.de
Author: Webcrema
Author URI:  https://webcrema.de
Template: salient
Version: 1.0
*/

/* =========================
   TYPOGRAPHY – LabGrotesque
   Desktop ≥1024px | Tablet 768–1023px | Mobile <768px
   ========================= */

:root {
  --font-sans: "LabGrotesque", system-ui, -apple-system, Segoe UI, Roboto, Arial,
    sans-serif;

  /* Desktop/Tablet sizes (per Design) */
  --h1: 60px;
  --h2: 48px;
  --h3: 40px;
  /* --h4: clamp(22px, 2vw, 32px); */
  --h4: 32px;
  --h5: 24px;
  --h6: 20px;
  --lh-head: 120%;

  --text-big: 22px;
  --lh-big: 28px; /* weight: 400/600 */
  --text-std: 18px;
  --lh-std: 24px; /* weight: 400/600 */
  --text-small: 14px;
  --lh-small: 20px; /* weight: 400/600 */

  --color-text: #1a1375;
}

/* =========================
   Lab Grotesque – Custom Font
   ========================= */

@font-face {
  font-family: "LabGrotesque";
  src: url("fonts/LabGrotesque-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LabGrotesque";
  src: url("fonts/LabGrotesque-ThinItalic.woff2") format("woff2");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "LabGrotesque";
  src: url("fonts/LabGrotesque-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LabGrotesque";
  src: url("fonts/LabGrotesque-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

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

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

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

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

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

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

@font-face {
  font-family: "LabGrotesque";
  src: url("fonts/LabGrotesque-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LabGrotesque";
  src: url("fonts/LabGrotesque-BlackItalic.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* =========================
   Lab Grotesque Mono
   ========================= */

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

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

/* Beispiel-Zuweisung */
body {
  font-family: "LabGrotesque", sans-serif;
  color: #;
}
code,
pre {
  font-family: "LabGrotesqueMono", monospace;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
span {
  font-family: "LabGrotesque", sans-serif;
}

/* ========== HEADLINES (Desktop/Tablet default) ========== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: var(--lh-head);
  letter-spacing: 0; /* optional, neutral */
  margin: 0 0 10px !important;
}

h1,
h1 span {
  font-size: var(--h1);
}
h2,
h2 span {
  font-size: var(--h2);
}
h3,
h3 span {
  font-size: var(--h3);
}
h4,
h4 span {
  font-size: var(--h4);
}
h5,
h5 span {
  font-size: var(--h5);
}
h6,
h6 span {
  font-size: var(--h6);
}

/* ========== TEXT STYLES (Desktop/Tablet default) ========== */
.text-big {
  font-family: var(--font-sans);
  font-size: var(--text-big);
  line-height: var(--lh-big);
  font-weight: 400;
}
.text-big--medium {
  font-family: var(--font-sans);
  font-size: var(--text-big);
  line-height: var(--lh-big);
  font-weight: 600;
}

.text-standard,
.text-standard p,
.text-standard div,
.text-standard span {
  font-family: var(--font-sans);
  font-size: var(--text-std);
  line-height: var(--lh-std);
  font-weight: 400;
}
.text-standard--medium p,
.text-standard--medium div,
.text-standard--medium span,
.text-standard--medium li {
  font-family: var(--font-sans);
  font-size: var(--text-std);
  line-height: var(--lh-std);
  font-weight: 600;
}

.text-small p,
.text-small div,
.text-small span,
.text-small li {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  font-weight: 400;
}
.text-small--medium p,
.text-small--medium div,
.text-small--medium span,
.text-small--medium li {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  line-height: var(--lh-small);
  font-weight: 600;
}

/* ========== TABLET (768–1023px) – gleich wie Desktop ========== */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* explizit gesetzt, Werte identisch mit Desktop – lässt sich bei Bedarf später leicht anpassen */
  h1 {
    font-size: 60px;
  }
  h2 {
    font-size: 48px;
  }
  h3 {
    font-size: 40px;
  }
  h4 {
    font-size: 32px;
  }
  h5 {
    font-size: 24px;
  }
  h6 {
    font-size: 20px;
  }

  .text-big,
  .text-big--medium {
    font-size: 22px;
    line-height: 28px;
  }
  .text-standard,
  .text-standard--medium {
    font-size: 18px;
    line-height: 24px;
  }
  .text-small,
  .text-small--medium {
    font-size: 14px;
    line-height: 20px;
  }
}

/* ========== MOBILE (<768px) – reduzierte Größen laut Mobile-Layout ========== */
@media (max-width: 768px) {
  h1 {
    font-size: 40px;
    line-height: var(--lh-head);
  }
  h2 {
    font-size: 32px;
    line-height: var(--lh-head);
  }
  h3 {
    font-size: 24px;
    line-height: var(--lh-head);
  }
  h4 {
    font-size: 22px;
    line-height: var(--lh-head);
  }
  h5 {
    font-size: 20px;
    line-height: var(--lh-head);
  }
  h6 {
    font-size: 18px;
    line-height: var(--lh-head);
  }

  .text-big,
  .text-big--medium {
    font-size: 20px;
    line-height: 28px;
  } /* 400 / 600 */
  .text-standard,
  .text-standard--medium {
    font-size: 16px;
    line-height: 24px;
  } /* 400 / 600 */
  .text-small,
  .text-small--medium {
    font-size: 12px;
    line-height: 16px;
  } /* 400 / 600 */
}

.blue-100 h1,
.blue-100 h2,
.blue-100 h3,
.blue-100 h4,
.blue-100 h5,
.blue-100 h6,
.blue-100 p,
.blue-100 span,
.blue-100 li,
.blue-100 a {
  color: var(--color-text);
}

.primary-100 h1,
.primary-100 h2,
.primary-100 h3,
.primary-100 h4,
.primary-100 h5,
.primary-100 h6,
.primary-100 p,
.primary-100 span,
.primary-100 li {
  color: #3245f2;
}

.secondary-100 h1,
.secondary-100 h2,
.secondary-100 h3,
.secondary-100 h4,
.secondary-100 h5,
.secondary-100 h6,
.secondary-100 p,
.secondary-100 span,
.secondary-100 li {
  color: #02f3ec;
}

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  opacity: 1 !important;
}

a:hover {
  opacity: 0.8 !important;
}