/*
 Theme Name:   Rhianonne Stone Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  For Rhianonnestone.com.
 Author:       Moritz Reitz
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* Font Face Declarations for Noto Serif Display */
@layer base, utilities, tailwind, custom;

@layer base{

@layer font-import {
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-ThinItalic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-ExtraLightItalic.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-ExtraBoldItalic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Serif Display';
  src: url('./fonts/NotoSerifDisplay-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
}
:root {
    --col-dark: hsl(0, 7%, 16%); /* Base Dark Color */
    --col-light: #f0f0f0; /* Base Light Color */

    /* Secondary primary brand color */
    --col-primary: var(--col-dark);
    --col-secondary: var(--col-light);
    /* Dark color scale based on --col-dark (hsl(0, 7%, 16%)) */
    --col-dark-100: hsl(0, 7%, 85%);   /* Lightest dark shade */
    --col-dark-200: hsl(0, 7%, 70%);
    --col-dark-300: hsl(0, 7%, 55%);
    --col-dark-400: hsl(0, 7%, 45%);
    --col-dark-500: hsl(0, 7%, 35%);   /* Medium dark shade */
    --col-dark-600: hsl(0, 7%, 28%);
    --col-dark-700: hsl(0, 7%, 22%);
    --col-dark-800: hsl(0, 7%, 19%);
    --col-dark-900: hsl(0, 7%, 10%);   /* Deepest dark shade */
    
    /* Light color scale (from light to dark shades) */
    --col-light-100: hsl(0, 0%, 95%);  /* Lightest light shade */
    --col-light-200: hsl(0, 0%, 90%);
    --col-light-300: hsl(0, 0%, 85%);
    --col-light-400: hsl(0, 0%, 80%);
    --col-light-500: hsl(0, 0%, 70%);  /* Standard light shade */
    --col-light-600: hsl(0, 0%, 60%);
    --col-light-700: hsl(0, 0%, 50%);
    --col-light-800: hsl(0, 0%, 40%);
    --col-light-900: hsl(0, 0%, 30%);  /* Darkest light shade */

    /* Transparency variations for base colors */
    --col-light--10: rgba(240, 240, 240, 0.1);  /* 10% opacity */
    --col-light--20: rgba(240, 240, 240, 0.2);  /* 20% opacity */
    --col-light--30: rgba(240, 240, 240, 0.3);  /* 30% opacity */
    --col-light--40: rgba(240, 240, 240, 0.4);  /* 40% opacity */
    --col-light--50: rgba(240, 240, 240, 0.5);  /* 50% opacity */
    --col-light--60: rgba(240, 240, 240, 0.6);  /* 60% opacity */
    --col-light--70: rgba(240, 240, 240, 0.7);  /* 70% opacity */
    --col-light--80: rgba(240, 240, 240, 0.8);  /* 80% opacity */
    --col-light--90: rgba(240, 240, 240, 0.9);  /* 90% opacity */

    --col-dark--10: hsla(0, 7%, 16%, 0.1);   /* 10% opacity */
    --col-dark--20: hsla(0, 7%, 16%, 0.2);   /* 20% opacity */
    --col-dark--30: hsla(0, 7%, 16%, 0.3);   /* 30% opacity */
    --col-dark--40: hsla(0, 7%, 16%, 0.4);   /* 40% opacity */
    --col-dark--50: hsla(0, 7%, 16%, 0.5);   /* 50% opacity */
    --col-dark--60: hsla(0, 7%, 16%, 0.6);   /* 60% opacity */
    --col-dark--70: hsla(0, 7%, 16%, 0.7);   /* 70% opacity */
    --col-dark--80: hsla(0, 7%, 16%, 0.8);   /* 80% opacity */
    --col-dark--90: hsla(0, 7%, 16%, 0.9);   /* 90% opacity */
    /* Color declarations */
    --col-bg: var(--col-dark);
    --col-txt: var(--col-light);

    /*SIZE VARIABLES*/
    /*Font Sizes*/
    --fs--1: clamp(0.7292rem, 0.6977rem + 0.1283vw, 0.85rem);
    --fs-0: clamp(0.875rem, 0.8261rem + 0.1991vw, 1.0625rem);
    --fs-1: clamp(1.05rem, 0.9775rem + 0.2953vw, 1.3281rem);
    --fs-2: clamp(1.26rem, 1.1556rem + 0.4249vw, 1.6602rem);
    --fs-3: clamp(1.512rem, 1.3651rem + 0.598vw, 2.0752rem);
    --fs-4: clamp(1.8144rem, 1.6111rem + 0.8277vw, 2.594rem);
    --fs-5: clamp(2.1773rem, 1.8995rem + 1.1309vw, 3.2425rem);
    --fs-6: clamp(2.6127rem, 2.2371rem + 1.5293vw, 4.0531rem);
    /*font styles*/
    --ff-display: 'Noto Serif Display', "Times New Roman", Times, serif;
    --ff-text:  Manrope, "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-5xs: clamp(0.25rem, 0.24rem + 0.04vw, 0.3125rem);
    --space-4xs: clamp(0.375rem, 0.36rem + 0.06vw, 0.46875rem);
    --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);
    /*Section sizes*/
    --section-pad--vert: var(--space-3xl);
    --section-pad--hor:  var(--space-s);
    /* Grid sizes */
    --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));

}
/*UTILITY CLASSES START*/
html {
  scroll-behavior: smooth;
  font-size: 100%; /*reset brx CSS */
}
/* Font Styles */
body{
  color: var(--col-txt);
  background: var(--col-bg);
  display: flex;
}
/*Header Styles*/
section{
  padding:  var(--section-pad--vert) var(--section-pad--hor);
}
footer, header {
  padding: var(--space-s) var(--section-pad--hor);
  max-height: 100%;
  transition: .4s ease-in-out;
}
svg{
  height: 1em;
  width: auto;
}
/*BRIX STYLES - overwriting brix default styles*/
  .brxe-container, .container{ /*default section container class Brix Builder*/
    width: 100%;
    max-width: 1250px;
    margin: auto;
  }

/*Font styles*/
  .ff-display{font-family: var(--ff-display)}
  .ff-text{font-family: var(--ff-text)}
/* Heading styles */
  h1, h2, h3, h4, h5, h6 { font-family: var(--ff-display); font-style: italic;font-weight: 300;letter-spacing: .02em;}
  body{font-family: var(--ff-text);}
/* font sizes */
  .fs--1{font-size: var(--fs-b-050);}
  h1, .fs-6 {font-size: var(--fs-6)}
  h2, .fs-5 {font-size: var(--fs-5)}
  h3, .fs-4 {font-size: var(--fs-4)}
  h4, .fs-3 {font-size: var(--fs-3)}
  h5, .fs-2 {font-size: var(--fs-2)}
  h6, .fs-1 {font-size: var(--fs-1)}
/*Colour Themes*/
.dark {
  color:      var(--col-light);
  background: var(--col-dark);
}
.light {
  background: var(--col-light);
  color:      var(--col-dark);
}
.grey{
 background: var(--col-grey);
 color:      var(--col-light);
}
}
@layer custom{
/* Button styles */
.btn, .brxe-button, .ff-btn{
  background: transparent;
  color: var(--col-light);
  text-transform: uppercase;
  border: transparent;
  padding: var(--space-2xs) var(--space-l);
}
.btn--accent{
  color: var(--col-light);
  background: var(--col-accent);
}
.btn--full {
   width: 100%;
}
/* cta with arrow */
.cta{
  display: flex;
  align-items: center;
  transition: .4s ease-in-out;
  line-height: 1;
  gap: var(--space-5xs);
  --icn-size: 1.3em;
}
  .cta__icn{ 
    transition: inherit;
    transform: rotate(-40deg);
    height: var(--icn-size);
    width: var(--icn-size);
  }
  /* CTA hover effect */
.cta:hover{
  gap: var(--space-4xs);
  padding-left: var(--space-5xs);

}
  .cta:hover .cta__icn{
    transform: rotate(0deg);
  }
@layer navigation {
/* Mobile Menu Canvas */
.nav .bricks-mobile-menu-wrapper{
    width: 100%;
}
  /*Menu canvas*/
/* Menu Toggle*/
.nav button{
    color: var(--col-txt);
}
  /*Menu styles */
  .nav li {
    display: flex;
    align-items: center;
    justify-content: center;
  }
    .nav li a { /*Top level link text*/
      text-transform: uppercase;
      font-weight: 600;
    }
    /*Menu Button Desktop*/
    .nav--primary .bricks-nav-menu-wrapper .menu__btn{
      padding: var(--btn-padding);
      background: var(--col-accent) ;
      color: var(--col-light);
      text-transform: uppercase;
      font-weight: 600;
    }
  /* Mobile canvas background */
  .nav--primary .bricks-mobile-menu-wrapper:before {
    background: var(--col-accent);
  }
    /* Sub menu items on mobile canvas */
    .nav--primary .bricks-mobile-menu-wrapper li.open .sub-menu{
      background: var(--col-light) !important;
    }
     .nav--primary .bricks-mobile-menu-wrapper li.open .menu-item{
      color: var(--col-orange);
    }
      /* mobile dropdown menu link */
      .nav--primary .bricks-mobile-menu-wrapper .sub-menu li>a{
        padding: 0;
        line-height: 1.4em
      } 
    /*Menu Button on mobile*/
    .nav--primary .bricks-mobile-menu-wrapper .menu__btn{
    
    }

  /* Animate mobile dropdown */
  .bricks-mobile-menu .menu-item .sub-menu {
    max-height: 0vh;
    display: block;
    visibility: collapse;
    overflow: hidden;
    transition: .4s ease-in-out;
  }
.bricks-mobile-menu .menu-item.open .sub-menu {
  max-height: 100vh;
  visibility: visible;
}

/* Footer menus */

/* legal menu */
.nav--legal {
  font-weight: 400;
  text-decoration: underline;
  text-transform: none;
}
.nav--legal ul{
  flex-wrap: wrap;
}
/* Vertical menu */
.nav--vertical ul li {
  margin: 0;
}
/*Header menu styles*/
header .nav .bricks-nav-menu { /*main menu ul*/

}
  header .menu-item{ /*main menu li*/

  }
    header .sub-menu { /*Submenu ul*/



    }
      header .nav .sub-menu .menu-item { /*submenu li*/
        text-transform: capitalize;
        font-size: .95em;
      }
}

@layer forms;

@layer forms {
/*Form Styles/ Fluent form */
  .form input, 
  .form textarea {
    border-radius: 5px;
  }
  .form input:focus-visible, 
  .form textarea:focus-visible{
    outline: 2px solid var(--col-brand--primary);
    outline-offset: -3px;
    transition: none;
  }
  .form *::placeholder,
  .form textarea::placeholder{
    color: var(--col-overlay--dark);
  }
  .form label{
    color: var(--col-txt--blue)
  }
  .dark .form label{
    color: inherit;
  }
  /* custom form classes */
  .vff .field-multiplepicturechoice .ff__img-select--f-width  ul.f-radios li{
    flex: 1; /*stretch multiselect with images to full width*/
  }
  .vff .field-multiplepicturechoice .ff__img-select--f-grid ul.f-radios{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 2fr));
    gap: var(--space-s);
  }
  .vff .field-multiplepicturechoice .ff__img-select--f-grid ul.f-radios .f-label{
    text-align: center;
    margin:unset
  }
  /* blur estimates in form */
  .blur input {
    filter: blur(4px);
    opacity: 1;
  }
/* adjust padding fluent forms conversational forms */
@media screen and (max-width: 1023px) {
    .form .ff_conv_app_frame .vff .ff_conv_section_wrapper .ff_conv_input {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100%;
    }
}
.form .ffc_inline_form.ffc_conv_wrapper .ff_conv_app .ff_conv_input {
    padding-bottom: .5em;
    padding-top: .5em;
}
 /*Dark blue form */
  .form--dark {
    background: var(--col-bg--blue);
    padding: var(--space-xl) var(--space-l);
    border-radius: .5em;
  }
  .form--dark label {
    color: var(--col-txt--light);
  }
  .form--dark select {
    color: var(--col-txt--light);
    background: var(--col-bg--light);
  }

/*Breadcrumb styles*/
.breadcrumbs{
  font-size: var(--fs--1);
  color: var(--col-accent);
  font-weight: 600;
  text-transform: uppercase;
}
}
.logo__text{
    font-weight: 300;
    letter-spacing: .03em;
    font-style: italic;
}
/* Project Card */
.project-card{
  /* min-height: calc(10vh + 10vw); */
  padding-top: calc(5vh + 2.5vw);
  position: relative;
  /* Align child elements */
  display: flex;
  flex-direction: column;
  align-self: stretch;
  align-items: start;
  justify-content: end;
}
.project-card::before{
  content: '';
  inset: 0;
  position: absolute;
  background: linear-gradient(to top, var(--col-dark), transparent);  
}
  .project-card__title{
    z-index: 1;
    transform: translateY(10%);
    transition: .4s ease-in-out;
  }
  .project-card__role{
    z-index: 1;
    font-family: var(--ff-display);
    transition: .4s ease-in-out;
  }
  .project-card .cta{
    margin-top: var(--space-2xs);
  }
  @media only screen and (min-width: 992px){
    .project-card .cta {
      opacity: 0;
    }
  }
  /* Project Card Hover Effect */
  .project-card:has(a:hover) .project-card__title,
  .project-card:has(a:hover) .project-card__role{
    transform: translateY(-10%);
  }
  .project-card:has(a:hover) .project-card__role{
    opacity: 0;
  }
  .project-card:has(a:hover) .cta{
    opacity: 1;
  }

/* Project Single Page .single-project */

.single-project .content p{
  margin: .1em 0 .2em 0;
  line-height: 1.2;
}

/* CV layout */
@layer cv{
  .cv p{
    font-size: 1.1em;
  }
  .cv h2{
    margin: 1.5em 0 .5em 0; 
    font-size: var(--fs-0);
  }
}

}