/*
 Theme Name:   Glasgow Web Design
 Author:       Moritz Reitz
 Author URI:   https://moritzreitz.com/
*/

@layer reset, utility, tailwind, custom;

@layer custom{

:root {
 
    --dark: hsl(240, 2%, 10%); /* Base Dark Color */
    --light: hsl(240, 2%, 85%); /* Base Light Color */
    --pink: #de60ca; /* Base Light Color */
    --yellow: #d5fb00; /* Base Light Color */

    /* Secondary primary brand color */
    --primary: var(--dark);
    --secondary: var(--light);
    /* Dark color scale based on --dark (hsl(0, 7%, 16%)) */
  --dark-100: var(--light);   /* Lightest dark shade */
  --dark-200: hsl(240, 2%, 70%);
  --dark-300: hsl(240, 2%, 55%);
  --dark-400: hsl(240, 2%, 40%);
  --dark-500: hsl(240, 2%, 30%);   /* Medium dark shade */
  --dark-600: hsl(240, 2%, 22%);
  --dark-700: hsl(240, 2%, 16%);
  --dark-800: hsl(240, 2%, 12%);
  --dark-900: var(--dark);    /* Deepest dark shade */


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

  --dark-10: hsla(240, 2%, 10%, 0.1);
  --dark-20: hsla(240, 2%, 10%, 0.2);
  --dark-30: hsla(240, 2%, 10%, 0.3);
  --dark-40: hsla(240, 2%, 10%, 0.4);
  --dark-50: hsla(240, 2%, 10%, 0.5);
  --dark-60: hsla(240, 2%, 10%, 0.6);
  --dark-70: hsla(240, 2%, 10%, 0.7);
  --dark-80: hsla(240, 2%, 10%, 0.8);
  --dark-90: hsla(240, 2%, 10%, 0.9);
    /*SIZE VARIABLES*/
    /*Font Sizes*/
    --fs--2: clamp(0.72rem, 0.8188rem + -0.1275vw, 0.7901rem);
    --fs--1: clamp(0.8889rem, 0.8843rem + 0.0202vw, 0.9rem);
    --fs-0: clamp(1rem, 0.9489rem + 0.2273vw, 1.125rem);
    --fs-1: clamp(1.125rem, 1.0099rem + 0.5114vw, 1.4063rem);
    --fs-2: clamp(1.2656rem, 1.0643rem + 0.8949vw, 1.7578rem);
    --fs-3: clamp(1.4238rem, 1.1074rem + 1.4063vw, 2.1973rem);
    --fs-4: clamp(1.6018rem, 1.1335rem + 2.0814vw, 2.7466rem);
    --fs-5: clamp(1.802rem, 1.1347rem + 2.9658vw, 3.4332rem);
    --fs-6: clamp(2.0273rem, 1.101rem + 4.1168vw, 4.2915rem);
    --fs-7: clamp(2.2807rem, 1.0192rem + 5.6068vw, 5.3644rem);
    --fs-8: clamp(2.5658rem, 0.8723rem + 7.5268vw, 6.7055rem);
    /*font styles*/
    --ff-display: "Plus Jakarta Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --ff-text:  "Plus Jakarta Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
     /*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 padding*/
    --sec-x: var(--space-s);
    --sec-y: var(--space-3xl);
    /* 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));

}
@layer base{
/*CSS reset*/
html {
  scroll-behavior: smooth;
  font-size: 100%; /*reset brx CSS */
}
/* Font Styles */
body{
  color: var(--light);
  background: var(--dark);
}
a, button{
  cursor: pointer;
}
a {
  color: var(--yellow);
  text-decoration: underline;
}
/*Header Styles*/
section{
  padding:  var(--sec-y) var(--sec-x);
}
footer, header {
  padding: var(--space-s) var(--sec-x);
  max-height: 100%;
  transition: .4s ease-in-out;
}
/*BRIX STYLES - overwriting brix default styles*/
  .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); letter-spacing: .01em; line-height: 1.2;}
  body{font-family: var(--ff-text); font-size: var(--fs-0);}
/* font sizes */

  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)}

  /* text utilties */
  .text-light{ color: var(--light)  }
  .text-white{color:#fff}
  .text-pink{color: var(--pink)  }
  .text-yellow{color: var(--yellow)  }
  .caption{ font-weight: 700; text-transform: uppercase; }
}
@layer theme-styles;
@layer theme-styles{
  /*Colour Themes*/
.bg-dark {
  color:      var(--light);
  background: var(--dark);
}
.light {
  background: var(--light);
  color:      var(--dark);
}
.grey{
 background: var(--grey);
 color:      var(--light);
}
/* Button styles */
.btn, .brxe-button, .ff-btn{
  background: transparent;
  color: var(--light);
  text-transform: uppercase;
  border: transparent;
  padding: var(--space-2xs) var(--space-l);
}
.btn--accent{
  color: var(--light);
  background: var(--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 menu {
/* Prevent body from scrolling when menu is active */
.no-scroll {overflow: hidden;height: 100vh;}
/* mobile menu hidden */
.nav a {color: var(--txt); text-decoration: none; font-weight: 600;} /*Reset colours*/
.nav--primary{
  display: flex;
}
  .nav--primary ul{
    /* Hide by default */
    height: 0px;
    top: 0;
    left: 0;
    width: 100vw;
    overflow: hidden;
    position: fixed;
    /*  */
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    gap: var(--space-s);
    font-size: var(--fs-2);
    transition: .4s ease-in-out;
}
/*menu visible*/
/* Navigation button Mobile*/
.nav__btn{
  display: flex;
  flex-direction: column;
  gap: .2em;
  z-index: 10;
  gap: .4em;
  background: transparent;
  border: none;
  }
  .nav__btn div{
    height: .2rem;
    border-radius: 1rem;
    width: 1.6rem;
    background:var(--light);
    transition: .4s ease-in-out; /*smooth animation to x*/
  }
/* Nav menu open */
.nav--primary.open ul{
  height: 100vh;
  opacity: 1;
  background: var(--dark);
  z-index: 10;
}
/* Hamburger to X animation */
.nav.open .nav__btn div:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav.open .nav__btn div:nth-child(2) {
    opacity: 0;
}

.nav.open .nav__btn div:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}
/* Desktop Menu */
@media only screen and (min-width: 60rem ){
/* hide button */
.nav__btn{
  display:none;
}
.nav--primary ul{
  position: static;
  height: unset;
  width: unset;
  flex-direction: row;
  font-size: var(--fs-1)
}
/* Hover Desktop Menu */
.nav--primary li{
  transition: .3s ease-in-out;
}
.nav--primary li:hover{
  transform: translateY(-2px);
}
.nav--primary li:hover a{
  color: var(--yellow);
}
}
}

@layer forms {

}
@layer directory{
  /* Directory Cards */
.directory {

}
  .directory-card {
    border-bottom: 1px solid var(--light-50);
  }
    .directory-card__list {

    }
      .directory-card__list-item{
        border: 1px solid var(--light);
        padding: .1em .5em;
      }
}

@layer scrollbar {
  /* Skinny White Scrollbar */
  .scrollbar-white {
    scrollbar-width: thin;
    scrollbar-color: var(--light) transparent;
  }

  .scrollbar-white::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .scrollbar-white::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-white::-webkit-scrollbar-thumb {
    background: var(--light);
    border-radius: 3px;
  }

  .scrollbar-white::-webkit-scrollbar-thumb:hover {
    background: var(--light-80);
  }
}

.logo-wrap{
  display: flex;
}
  .logo{
    max-height: 2em;
  }

}