/*
 Theme Name:   Moritz Reitz Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks on moritzreitz.com.
 Author:       Moritz Reitz
 Author URI:   https://moritzreitz.com/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
 Other CSS:    /css has custom stylesheets
*/

@layer ff-styling, base, utilities, tailwind, font-import, custom;

@layer base {
  :root {

    /* Brand Colours */
    --indigo:        hsl(234, 89%, 74%);        /* #818cf8 */
    --sky:           hsl(198, 93%, 60%);        /* #38bdf8 */
    --emerald:       hsl(158, 64%, 52%);        /* #34d399 */
    --navy:          hsl(222, 48%,  5%);        /* #070b14 */
    --navy-100:      hsl(222, 35%, 93%);        /* #e7ebf3 */
    --navy-200:      hsl(222, 38%, 78%);        /* #b2bede */
    --navy-300:      hsl(222, 42%, 55%);        /* #5c79bc */
    --navy-400:      hsl(222, 45%, 30%);        /* #2a3f6f */
    --navy-500:      hsl(222, 47%, 14%);        /* #131d34 */
    --navy-900:      hsl(224, 42%,  9%);        /* #0d1220 */
    --bg-card:       hsl(221, 39%, 11%);        /* #111827 */
    --border-subtle: hsla(0, 0%, 100%, 0.07);  /* rgba(255,255,255,0.07) */
    --grad:         linear-gradient(135deg, var(--indigo), var(--sky), var(--emerald));
    --grad-reverse: linear-gradient(135deg, var(--emerald), var(--sky), var(--indigo));
    --grad-text:    linear-gradient(90deg, var(--indigo) 0%, var(--sky) 60%, var(--emerald) 100%);
    /* System Colours */
    --dark:  var(--navy);
    --light: hsl(222, 15%, 96%);               /* #f3f4f6 */
    /* Dark */
    --dark-10: hsla(222, 48%, 5%, 0.1);
    --dark-20: hsla(222, 48%, 5%, 0.2);
    --dark-30: hsla(222, 48%, 5%, 0.3);
    --dark-40: hsla(222, 48%, 5%, 0.4);
    --dark-50: hsla(222, 48%, 5%, 0.5);
    --dark-60: hsla(222, 48%, 5%, 0.6);
    --dark-70: hsla(222, 48%, 5%, 0.7);
    --dark-80: hsla(222, 48%, 5%, 0.8);
    --dark-90: hsla(222, 48%, 5%, 0.9);

    --light-10: hsla(222, 15%, 96%, 0.1);
    --light-20: hsla(222, 15%, 96%, 0.2);
    --light-30: hsla(222, 15%, 96%, 0.3);
    --light-40: hsla(222, 15%, 96%, 0.4);
    --light-50: hsla(222, 15%, 96%, 0.5);
    --light-60: hsla(222, 15%, 96%, 0.6);
    --light-70: hsla(222, 15%, 96%, 0.7);
    --light-80: hsla(222, 15%, 96%, 0.8);
    --light-90: hsla(222, 15%, 96%, 0.9);
    --light-100: hsla(222, 15%, 96%, 1);

    /*SIZE VARIABLES*/

    /*Font Sizes*/
    --fs--1: clamp(0.85rem, 0.8rem + 0.2051vw, .95rem);
    --fs-1: clamp(0.95rem, 0.9273rem + 0.2564vw, 1.35rem);
    --fs-2: clamp(1.0938rem, 1.0216rem + 0.3205vw, 1.4063rem);
    --fs-3: clamp(1.3672rem, 1.277rem + 0.4006vw, 1.7578rem);
    --fs-4: clamp(1.709rem, 1.5963rem + 0.5008vw, 2.1973rem);
    --fs-5: clamp(2.1362rem, 1.9954rem + 0.626vw, 2.7466rem);
    --fs-6: clamp(2.6703rem, 2.4942rem + 0.7825vw, 3.4332rem);
    /*font styles*/
    --ff-display: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont,
      "Helvetica Neue", Arial, sans-serif;
    --ff-text: "Plus Jakarta Sans", "Segoe UI", -apple-system, BlinkMacSystemFont,
      "Helvetica Neue", Arial, sans-serif;
    /*Text overlay*/
    --txt-shadow--light: 0px 0px 10px var(--col-txt--light);
    --txt-shadow--dark: 0px 0px 10px var(--col-txt--dark);

    /*Spacing sizes*/
    --space-4xs: clamp(0.25rem, 0.24rem + 0.06vw, 0.375rem);
    --space-3xs: clamp(0.5rem, 0.48rem + 0.08vw, 0.625rem);
    --space-2xs: clamp(0.625rem, 0.61rem + 0.1vw, 0.75rem);
    --space-xs: clamp(0.75rem, 0.73rem + 0.12vw, 0.875rem);
    --space-s: clamp(0.875rem, 0.8424rem + 0.1327vw, 1rem);
    --space-m: clamp(1.3125rem, 1.2636rem + 0.1991vw, 1.5rem);
    --space-l: clamp(1.75rem, 1.6848rem + 0.2654vw, 2rem);
    --space-xl: clamp(2.625rem, 2.5272rem + 0.3981vw, 3rem);
    --space-2xl: clamp(3.5rem, 3.3696rem + 0.5309vw, 4rem);
    --space-3xl: clamp(5.25rem, 5.0544rem + 0.7963vw, 6rem);
    --space-4xl: clamp(7rem, 6.7391rem + 1.0619vw, 8rem);
    --space-5xl: clamp(8.75rem, 8.4239rem + 1.3272vw, 10rem);

    /*Section sizes*/
    --py-section: var(--space-3xl);
    --px-section: var(--space-l);
    /*Grid styles*/
    --grid-3xl: repeat(auto-fit, minmax(min(45rem, 100%), 1fr));
    --grid-2xl: repeat(auto-fit, minmax(min(40rem, 100%), 1fr));
    --grid-xl: repeat(auto-fit, minmax(min(35rem, 100%), 1fr));
    --grid-l: repeat(auto-fit, minmax(min(30rem, 100%), 1fr));
    --grid-m: repeat(auto-fit, minmax(min(23rem, 100%), 1fr));
    --grid-s: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    --grid-xs: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));

    --grid-3--gap: var(--space-m);
  }
  /*UTILITY CLASSES START*/
  html {
    scroll-behavior: smooth;
    font-size: 100%;
  } /*reset brx CSS */
  button, a{
    cursor: pointer;
  }
  /* Font Styles */
  body {
    color: var(--light);
    background: var(--dark);
    line-height: 1.5;
    font-size: var(--fs-1);
    font-family: var(--ff-text);
  }
  /* Link text style */
  a { color: var(--sky); text-decoration: underline;}

  .alternating-orange:nth-of-type(2n -1) a{
    color: var(--light);
  }

  /*Header Styles*/
  section {
    padding: var(--py-section) var(--px-section);
  }
  /*BRIX STYLES - overwriting brix default styles*/
  .brxe-container, .container { width: 100%;max-width: 1200px;} /*default section container class Brix Builder*/

  /*Font sizes*/
  h1,h2,h3,h4,h5,h6 {
    font-family: var(--ff-display); line-height: 1.2; letter-spacing: .02;
  }

  /*Heading Styles*/
  h1 { font-size: var(--fs-6); }
  h2 { font-size: var(--fs-5); }
  h3 { font-size: var(--fs-4); }
  h4 { font-size: var(--fs-3); }
  h5 { font-size: var(--fs-2); }
  h6 { font-size: var(--fs-1); }
/* GUTENBERG STYLES */
.brxe-post-content h2 { font-size: 1.7em;}
.brxe-post-content h3 { font-size: 1.6em;}
.brxe-post-content h4{ font-size: 1.4em;}
.wp-block-heading {border-bottom: 1px solid var(--light-40); padding-bottom: .4em; margin-bottom: .4em;}
}

@layer custom {
      /*===========MENU STYLES================*/
@layer navigation{
.nav{
  --fs-top: var(--fs--1);
  --fs-sub: ;
  --fw-top:  700;
  --fw-sub: 400;
  --tt-top: uppercase;
  --tt-sub: none; 
  --bg-top: none;
  --line-height: 1.2;
  --bg-sub: var(--dark);
  --bg-sub--mob:var(--dark-20);
  --bg-canvas:var(--dark-40);
  --size-toggle: 1.5em;
  
  /* navigation colours */
  --col-toggle: var(--light);
  --col-top: var(--light);
  --col-sub: var(--light);


  font-size: var(--fs-top);
  font-weight: 700;
  text-transform: uppercase;
  /* text-decoration: ; */
  letter-spacing: .02em;
  color: var(--col-top);
}
   /* menu link styles */
  .nav a {
    color: inherit;
    text-decoration: none;
    line-height: var(--line-height);
  }
/* ======= Mobile Menu ========= */
  /* Mobil menu toggle */
        .nav .bricks-mobile-menu-toggle{
          color: var(--col-toggle);
        }
        /* Nav wrapper */
        .nav .bricks-mobile-menu-wrapper{
          background: var(--bg-canvas);
          width: 100vw;
        }
        .nav .bricks-mobile-menu-wrapper:before{
          background: var(--bg-canvas);
        }
          /* ul wrapper */
          .nav .bricks-mobile-menu{
            margin-top: 8vh;
            transition: .4s ease-in-out;
          } 
            /* li wrapper */
            .nav.brxe-nav-menu .bricks-mobile-menu .menu-item{
              padding: 1.5em 0;
            }
            .nav .bricks-mobile-menu .open .sub-menu{
              margin-top: 2em;
              border-top: 2px solid var(--light);
            }
            /* Mobile Menu Button */
            .bricks-mobile-menu-wrapper .nav__btn{
              background: var(--dark)
            }
          }
  /* ========= Desktop Menu =========== */
@media only screen and (min-width: 992px){
.nav__btn{
  background: var(--col-orange-300);
  padding: .9em 2em;
}
/*Top menu Li*/
.nav .bricks-nav-menu > li { 
  display: flex;
}
.nav .bricks-nav-menu > li.open { 
  border-bottom: none;
}
/*===========SUBMENU=========*/
.sub-menu .menu-item {
    /*submenu li*/
    text-transform: var(--tt-sub);
    font-size: var(--fs-sub);
    background: var(--bg-sub);
    padding: 1.5em 0;
  }
}
.nav--primary .bricks-mobile-menu-toggle{
  color: var(--col-toggle);
}

@layer fluentforms-custom {
  /* Element Group */
  .ff-el-group{
    padding-top: .5em;
  }
    /* Fluent form styles */
    label {
      color: var(--light-70);
      text-transform: capitalize;
      font-size: var(--fs--1);
      letter-spacing: 0.02em;
      max-width: 100%;
    }
    /* ====== TEXT FIELDS & AREAS ========= */
    input,
    textarea {
      background: transparent;
      font-size: var(--fs--1);
      display: flex;
      border-color: var(--light-60);
    }
    input:not(:placeholder-shown),
    textarea:not(:placeholder-shown)
    {
      color: var(--light);
    }

    /* placeholder style */
    input::placeholder,
    textarea::placeholder 
    {
      color: var(--light-40) ;
    }
/* ============== SELECT FIELDS ========= */
    select option{
      background: var(--light);
      color: var(--dark);
    }
/* ============== CHECKBOXES =============*/
    .ff_t_c,
    .ff-el-form-check-label {
      text-transform: none;
      display: flex;
      gap: .4em;

      cursor: pointer;
    }
    /* wrapper TC checkbox */
    .ff_tc_checkbox{
      padding: 0 !important;
      margin: 0;
      display: flex ;
    }
      /* checkboxes */
      input[type="checkbox"],
      input[type="radio"] {
        accent-color: var(--col-orange);
        display: flex;
        padding: 0;
        margin: 0;
        top: 0;
      }

/* ======== FORM BUTTONS =========== */
    /* Allow child button to flex-grow */
    .ff_submit_btn_wrapper {
      display: flex;
    }
      .ff-btn-submit{
        background: var(--grad);
      }
/* ====== STEP BY STEP ELEMENTS ========== */
    /* Navigation wrapper */
    .ff-step-container, .fluentform-step{
      overflow: visible;
    }
      .step-nav{
        display: flex;
        align-items: end;
        justify-content: space-between;
      }
      .step-nav button{
        flex-grow: 0
      }
        .ff-step-body{
          margin: 0;
        }
      
/* ========== Progress Bar =============== */
    /* Progress bar wrapper */
    .ff-el-progress{
      background: var(--col-orange-100);
    }
      /* Progress bar  */
      .ff-el-progress-bar{
        background: var(--col-orange-200)
      }
/* ============== IMAGE CHECKBOX ============ */
    .ff-el-input--content:has(.ff-el-image-holder){
      display: flex;
      justify-content: center;
      gap: 1em;
    }
      .ff_el_checkable_photo_holders:has(.ff-el-image-holder){
        display: flex;
        justify-content: center;
        gap: 1em;
      } 
        .ff-el-image-holder.ff_item_selected{
          border: 3px solid var(--col-orange);
          border-radius: .3em;
          color: var(--col-orange)
        }
        /* Contain background image */
        .ff-el-image-input-src{
          background-size: contain;
        }
        .ff-el-image-holder:hover{
          background: var(--col-orange-100);
        } 
          /* Both child labels */
          .ff-el-image-holder, .ff-el-image-holder span{
            background: transparent;
            font-size: var(--fs-2);
            font-weight: 700;
            color: inherit;
          }
  }    

@layer toc {
  /* ===== TOC Container ===== */
  .toc {
    position: fixed;
    bottom: 0;
    z-index: 5;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-m);
    background: var(--light);
    box-shadow: 0 0 10px 0 var(--dark-50);
  }
  .toc a{ 
    color: var(--dark);
    text-decoration: none;
  }
  /* ===== TOC Buttons ===== */
  .toc button {
    background: transparent;
    display: flex;
    justify-content: space-between;
  }
  .toc.active .toc__icon{
    transform: rotate(90deg);
  }

  /* ===== List Reset ===== */
  .toc ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  /* ===== Main TOC List (Collapsed) ===== */
  .toc__ul {
    /* position: absolute; */
    max-height: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    list-style-type: none;
    transition: 0.4s ease-in-out;
  }

  /* Main TOC List (Expanded) */
  .toc.active .toc__ul {
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-s) 0;
    max-height: 100vh;
    max-width: 100vh;
    opacity: 1;
  }

  /* ===== TOC Header Wrapper ===== */
  .toc__ul .toc__header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-xs);
  }

  /* ===== Nested Lists (H3 children) ===== */
  /* Nested List (Collapsed) */
  .toc li ul {
    /* position: absolute;  */
    overflow: hidden;
    max-height: 0;
    max-width: 0;
    margin-left: 0.7em;
    opacity: 0;
    transition: 0.4s ease-in-out;
    gap: .15em;
    display: flex;
    flex-direction: column;
    padding: .2em 0;
  }
  .toc li.view > a, .toc li.view .toc__header> a{
    color: var(--col-orange);
  }
  /* Nested List (Expanded) */
  .toc li.active ul, 
  .toc li.view ul,
  .toc li ul:has(li.view) {
    position: static;
    max-height: 100vh;
    max-width: 100vw;
    width: auto;
    opacity: 1;
  }

  /* ===== Toggle Button (Cross Icon) ===== */
  /* Button Container */
  .toc ul li button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 1em;
    min-height: 1em;
    transition: 0.4s ease-in-out;
  }

  /* Button Rotation (Expanded) */
  .toc li.active button {
    transform: rotate(540deg);
  }

  /* Cross Bars */
  .toc ul li button div {
    position: absolute;
    width: 1em;
    height: 0.2em;
    background: var(--dark);
    transition: 0.4s ease-in-out;
  }

  /* Vertical Bar (Collapsed) */
  .toc ul li:not(.active) button div:last-of-type {
    transform: rotate(90deg);
  }
  /* =============== TOC DESKTOP =========== */
  @media only screen and (min-width: 992px){
    .toc{
      position: static;
      display: flex;
      flex-direction: column-reverse;
    }
    .toc.active .toc__icon{
      transform: rotate(-90deg);
    }
  }
}
@layer gutenberg{
/* =========== GUTENBERG/BLOG STYLES ================*/
.brxe-post-content{
  line-height: 1.6;
  font-size: var(--fs-1);
}
.wp-block-heading{

}
.brxe-post-content p{
  margin-bottom: 1em;
}
.brxe-post-content ul{
  margin: 1em 0;
  padding:  0 0 0 1.2em;
}
  .brxe-post-content ul li{
    margin: .3em 0;
  }
}

@layer splide{

/* ========= SLIDER SETTIGS =================== */
.splide__pagination__page{
 background: var(--light-30);
}
.splide__pagination__page.is-active{
 background: var(--light-70);
}
/* navigation arrows */
.bg-dark .splide__arrows svg path{
  fill: var(--light-30);
}
/* navigation dots */
.bg-dark .splide__pagination__page.is-active {
  background: var(--light);
}

}
@layer fixed-widget{
/* ========== STICKY CONTACT WIDGET============= */


.contact-bottom{
  position: fixed;
  left: 0;
  z-index: 100;
  transition: .4s ease-in-out;
  bottom: 1vh;
  transform: translateY(140%)
}
.contact-bottom.visible{
  transform: translateY(0)
}

  .contact-bottom__icn {
    width: calc(1.5rem + 1vw);
    height: auto;
  }

.contact-sidebar{
  position: fixed;
  right: 0;
  top: 45%;
  display: none;
  z-index: 100;
}
  .contact-sidebar__item{
    text-decoration: none;
    box-shadow: 0 0 15px  var(--dark-40);
    z-index: 100;
  }
  .contact-sidebar__item:not(:last-of-type){
    border-width:  2px 2px 0px 2px;
  }
    /* hide content */
    .contact-sidebar__content{
      max-width: 0px;
      overflow: hidden;
      opacity: 0;
      transition: .3s ease-in-out;
      white-space: nowrap;
    }
    .contact-sidebar__item:hover .contact-sidebar__content{
      max-width: 500px;
      padding: 0 var(--space-3xs);
      opacity: 1;
    }
    .contact-sidebar__icon{
      height: 2rem;
      width: auto;
    }
@media only screen and (min-width: 767px){
/* Display desktop version over 767px and mobile below */
  .contact-sidebar{
    display: flex;
  }
  .contact-bottom{
    display: none
  }
}

@layer toc {
  /* ===== TOC Container ===== */
  .toc {
    position: fixed;
    bottom: 0;
    z-index: 5;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: var(--space-m);
    background: var(--light);
    box-shadow: 0 0 10px 0 var(--dark-50);
  }
  .toc a{ 
    color: var(--dark);
    text-decoration: none;
  }
  /* ===== TOC Buttons ===== */
  .toc button {
    background: transparent;
    display: flex;
    justify-content: space-between;
  }
  .toc.active .toc__icon{
    transform: rotate(90deg);
  }

  /* ===== List Reset ===== */
  .toc ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
  }

  /* ===== Main TOC List (Collapsed) ===== */
  .toc__ul {
    /* position: absolute; */
    max-height: 0;
    max-width: 0;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    list-style-type: none;
    transition: 0.4s ease-in-out;
  }

  /* Main TOC List (Expanded) */
  .toc.active .toc__ul {
    position: static;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-s) 0;
    max-height: 100vh;
    max-width: 100vh;
    opacity: 1;
  }

  /* ===== TOC Header Wrapper ===== */
  .toc__ul .toc__header {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--space-xs);
  }

  /* ===== Nested Lists (H3 children) ===== */
  /* Nested List (Collapsed) */
  .toc li ul {
    /* position: absolute;  */
    overflow: hidden;
    max-height: 0;
    max-width: 0;
    margin-left: 0.7em;
    opacity: 0;
    transition: 0.4s ease-in-out;
    gap: .15em;
    display: flex;
    flex-direction: column;
    padding: .2em 0;
  }
  .toc li.view > a, .toc li.view .toc__header> a{
    color: var(--col-orange);
  }
  /* Nested List (Expanded) */
  .toc li.active ul, 
  .toc li.view ul,
  .toc li ul:has(li.view) {
    position: static;
    max-height: 100vh;
    max-width: 100vw;
    width: auto;
    opacity: 1;
  }

  /* ===== Toggle Button (Cross Icon) ===== */
  /* Button Container */
  .toc ul li button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 1em;
    min-height: 1em;
    transition: 0.4s ease-in-out;
  }

  /* Button Rotation (Expanded) */
  .toc li.active button {
    transform: rotate(540deg);
  }

  /* Cross Bars */
  .toc ul li button div {
    position: absolute;
    width: 1em;
    height: 0.2em;
    background: var(--dark);
    transition: 0.4s ease-in-out;
  }

  /* Vertical Bar (Collapsed) */
  .toc ul li:not(.active) button div:last-of-type {
    transform: rotate(90deg);
  }
  /* =============== TOC DESKTOP =========== */
  @media only screen and (min-width: 992px){
    .toc{
      position: static;
      display: flex;
      flex-direction: column-reverse;
    }
    .toc.active .toc__icon{
      transform: rotate(-90deg);
    }
  }
}
@layer scrollbar-customisation{
/* Scrollbar width */
::-webkit-scrollbar {
  width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
  background: var(--light-30);
}
/* Thumb */
::-webkit-scrollbar-thumb {
  background: var(--sky);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--sky);
}
}
}
}