/*
 Theme Name:   TFH Theme
 Theme URI:    https://www.two-for-happiness.com/
 Description:  Child Theme für Bricks.
 Author:       Twentyone Brands
 Author URI:   https://www.twentyone-brands.com/
 Template:     bricks
 Version:      1.1
 Text Domain:  tfh
*/

/**
 * @license
 *
 * Font Family: PP Editorial Old
 * Designed by: Mat Desjardins, Fred Wiltshire,
 *              Francesca Bolognini
 * Foundry: Pangram Pangram Foundry
 * URL: https://pangrampangram.com/products/Editorial-Old
 * License: Proprietary - Pangram Pangram EULA
 * License URL: https://pangrampangram.com/pages/eula
 *
 * Commercial web use requires an appropriate Web License.
 */

@font-face {
  font-family: 'PP Editorial Old';
  src: url('./webfonts/pp-editorial-old/PPEditorialOld-Ultralight.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Editorial Old';
  src: url('./webfonts/pp-editorial-old/PPEditorialOld-UltralightItalic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}


/**
 * @license
 *
 * Font Family: Roboto
 * Designed by: Christian Robertson, ParaType, Font Bureau
 * Copyright 2011 The Roboto Project Authors
 * URL: https://github.com/google/fonts/tree/main/ofl/roboto
 * License: SIL Open Font License v1.1
 * Full license text included in ./webfonts/roboto/OFL.txt
 *
 * Roboto Variable Font
 */

@font-face {
  font-family: 'Roboto';
  src: url('./webfonts/roboto/Roboto-VariableFont.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
  font-synthesis-weight: none;
  font-family: 'PP Editorial Old', Times New Roman, system-ui, serif;
}

h1.is--secondary, h2.is--secondary, h3.is--secondary, h4.is--secondary, h5.is--secondary, h6.is--secondary {
  font-family: 'Roboto', Arial, system-ui, sans-serif;
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1920p; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 2560px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

:root {
  --space-2xs: min(0.25em, calc(var(--size-font-fluid) * 0.25));
  --space-xs:  min(0.5em,  calc(var(--size-font-fluid) * 0.5));
  --space-s:   min(1em,    var(--size-font-fluid));
  --space-m:   min(2em,    calc(var(--size-font-fluid) * 2));
  --space-l:   min(3em,    calc(var(--size-font-fluid) * 3));
  --space-xl:  min(4.5em,  calc(var(--size-font-fluid) * 4.5));
  --space-2xl: min(6em,    calc(var(--size-font-fluid) * 6));
  --space-3xl: min(8em,    calc(var(--size-font-fluid) * 8));

  --space-section: var(--space-2xl);
	 
  --radius-xs: min(0.25em, calc(var(--size-font-fluid) * 0.25));
  --radius-s: min(0.5em, calc(var(--size-font-fluid) * 0.5));
  --radius-m: min(1em, var(--size-font-fluid));
  --radius-l: min(1.5em, calc(var(--size-font-fluid) * 1.5));
  --radius-xl: min(2em, calc(var(--size-font-fluid) * 2));
  --radius-2xl: min(4.75em, calc(var(--size-font-fluid) * 4.75));
}

/* Framework */

[id] {
  scroll-margin-top: -1em;
}

@media screen and (max-width: 767px) {
	[id] {
		scroll-margin-top: 2.75em;
	}
}

html, body {
  scrollbar-gutter: stable;
}

a,
button,
[role="button"],
[type="button"],
input,
textarea,
select,
label {
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  scroll-behavior: auto !important;
}

/* Lenis */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* Accessibility */

body.bricks-is-frontend :focus:not(:focus-visible) {
  outline: none !important;
}

body.bricks-is-frontend :focus-visible {
  outline: solid 3px var(--base);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(0 100% 100% 0);
  white-space: nowrap;
  border-width: 0;
}

/* Normalizer */

ul[class],
ol[class] {
  padding: 0;
  margin: 0;	
  list-style: none;
}

ul.wp-block-list,
ol.wp-block-list {
  padding-left: 1em;
  margin: inherit;
  margin-top: 1em;	
  list-style: inherit;
}

address {
  font-style: normal;
}

.bricks-is-frontend img {
  pointer-events: none;
}

/* Text */

::selection {
	background: var(--secondary);
	color: #000;
}

body {
  font-size: var(--size-font);
  font-family: var(--font-family-a);
  color: var(--text-color);
  background: var(--white);
}

:where(p, .brxe-text-basic) {
  line-height: var(--text-line-height);
  font-weight: var(--text-font-weight);
  letter-spacing: var(--letter-spacing);
  max-width: 60ch;
}

.brxe-text :where(p, ul, ol) {
  line-height: var(--text-line-height);
}

strong {
  font-weight: 600;
}

h1, h2, h3, h4, h5, h6{
  line-height: var(--heading-line-height);
  color: var(--heading-color);
  font-weight: var(--heading-font-weight);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing);
}

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

/* Containers */

:where(section:not(section section)){
  padding: var(--padding-section);
}

@media screen and (max-width: 767px) {
  :where(section:not(section section)){
    padding-top: var(--space-m);
    padding-bottom: var(--space-m);
  }	
}

:where(.brxe-container) > .brxe-block, :where(.brxe-container) {
  gap: var(--content-gap);
}

main > section:last-of-type {
  padding-bottom: var(--space-3xl);
}

@media screen and (min-width: 992px) {
  main > section:last-of-type {
    padding-bottom: calc(var(--space-3xl) * 2);
  }
}

/* Grid Util */

.grid {
  display: grid;
  gap: var(--grid-gap-l);
}

.grid-1 { grid-template-columns: var(--grid-1); }
.grid-2 { grid-template-columns: var(--grid-2); }
.grid-3 { grid-template-columns: var(--grid-3); }
.grid-4 { grid-template-columns: var(--grid-4); }
.grid-5 { grid-template-columns: var(--grid-5); }

.grid-1-2 { grid-template-columns: var(--grid-1-2); }
.grid-1-3 { grid-template-columns: var(--grid-1-3); }
.grid-1-4 { grid-template-columns: var(--grid-1-4); }
.grid-2-1 { grid-template-columns: var(--grid-2-1); }
.grid-2-3 { grid-template-columns: var(--grid-2-3); }
.grid-2-4 { grid-template-columns: var(--grid-2-4); }
.grid-3-1 { grid-template-columns: var(--grid-3-1); }
.grid-3-2 { grid-template-columns: var(--grid-3-2); }
.grid-3-4 { grid-template-columns: var(--grid-3-4); }
.grid-4-1 { grid-template-columns: var(--grid-4-1); }
.grid-4-2 { grid-template-columns: var(--grid-4-2); }
.grid-4-3 { grid-template-columns: var(--grid-4-3); }

@media (max-width: 991px) {
  .grid {
    gap: var(--content-gap);
  }
  .grid-2,
  .grid-3,
  .grid-4,
  .grid-5,
  .grid-1-2,
  .grid-1-3,
  .grid-1-4,
  .grid-2-1,
  .grid-2-3,
  .grid-2-4,
  .grid-3-1,
  .grid-3-2,
  .grid-3-4,
  .grid-4-1,
  .grid-4-2,
  .grid-4-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .grid--m-1 { grid-template-columns: 1fr; }
  .grid--m-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .grid--m-3 { grid-template-columns: repeat(3, minmax(0, 1fr));	}
}

@media (max-width: 767px) {
  .grid--s-1 { grid-template-columns: 1fr; }
  .grid--s-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--s-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 478px) {
  .grid--xs-1 { grid-template-columns: 1fr; }
  .grid--xs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--xs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }	
}

.col-1 { grid-column: 1; }
.col-2 { grid-column: 2; }
.col-3 { grid-column: 3; }
.col-4 { grid-column: 4; }

.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }

.g-align-end { align-items: end; }
.g-align-start { align-items: start; }
.g-align-center { align-items: center; }

/* Fix overflow */

.bricks-is-frontend header{
  max-width: 100vw;
}

body.bricks-is-frontend {
  overflow-x: clip;
}

.brxe-section {
  overflow-x: hidden;
  overflow-x: clip;
}

body.bricks-is-frontend.no-scroll{
  overflow: hidden !important;
}