/* Define cascade layer order: general (Bricks) → tailwind → utilities */
@layer base, utilities, tailwind, font-import, custom;

@layer font-import{ 
/* Manrope Font Imports */
    @font-face {
        font-family: 'Manrope';
        src: url('../../../uploads/fonts/Manrope-ExtraLight.woff2') format('woff2');
        font-weight: 200;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Manrope';
        src: url('../../../uploads/fonts/Manrope-Light.woff2') format('woff2');
        font-weight: 300;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Manrope';
        src: url('../../../uploads/fonts/Manrope-Regular.woff2') format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Manrope';
        src: url('../../../uploads/fonts/Manrope-Medium.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Manrope';
        src: url('../../../uploads/fonts/Manrope-SemiBold.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Manrope';
        src: url('../../../uploads/fonts/Manrope-Bold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Manrope';
        src: url('../../../uploads/fonts/Manrope-ExtraBold.woff2') format('woff2');
        font-weight: 800;
        font-style: normal;
        font-display: swap;
    }
}
@layer base {
    :root {
        --col-dark: hsla(314, 18%, 14%, 1); /* Base Dark Color */
        --col-light: hsla(0, 40%, 98%, 1); /* 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: var(--col-light);   /* Lightest dark shade */
    --col-dark-900: var(--col-dark);    /* Deepest dark shade */
        /* Color styles */
        --white: hsla(0, 0%, 100%, 1);
        --sand--100: hsla(0, 40%, 98%, 1);
        --sand--200: hsla(5, 31.7%, 92%, 1);
        --sand--300: hsla(6, 29.4%, 80%, 1);
        --sand--400: hsla(7, 29.5%, 62.2%, 1);
        --sand--500: hsla(8, 29.4%, 50%, 1);
        --sand--600: hsla(8, 47.4%, 38%, 1);
        --sand--700: hsla(7, 47.1%, 30.4%, 1);
        
        --purple--100: hsla(320, 20%, 97.1%, 1);
        --purple--200: hsla(320, 11.7%, 84.9%, 1);
        --purple--300: hsla(320, 10.8%, 72.7%, 1);
        --purple--400: hsla(316, 10.6%, 48.2%, 1);
        --purple--500: hsla(317, 17.4%, 36.1%, 1);
        --purple--600: hsla(317, 17%, 28.8%, 1);
        --purple--700: hsla(314, 17.8%, 14.3%, 1);

        /* Transparency variations for base colors */
    --col-light-t10: hsla(240, 2%, 85%, 0.1);
    --col-light-t20: hsla(240, 2%, 85%, 0.2);
    --col-light-t30: hsla(240, 2%, 85%, 0.3);
    --col-light-t40: hsla(240, 2%, 85%, 0.4);
    --col-light-t50: hsla(240, 2%, 85%, 0.5);
    --col-light-t60: hsla(240, 2%, 85%, 0.6);
    --col-light-t70: hsla(240, 2%, 85%, 0.7);
    --col-light-t80: hsla(240, 2%, 85%, 0.8);
    --col-light-t90: hsla(240, 2%, 85%, 0.9);

    --col-dark-t10: hsla(240, 2%, 10%, 0.1);
    --col-dark-t20: hsla(240, 2%, 10%, 0.2);
    --col-dark-t30: hsla(240, 2%, 10%, 0.3);
    --col-dark-t40: hsla(240, 2%, 10%, 0.4);
    --col-dark-t50: hsla(240, 2%, 10%, 0.5);
    --col-dark-t60: hsla(240, 2%, 10%, 0.6);
    --col-dark-t70: hsla(240, 2%, 10%, 0.7);
    --col-dark-t80: hsla(240, 2%, 10%, 0.8);
    --col-dark-t90: hsla(240, 2%, 10%, 0.9);

        /* Color declarations */
        --col-bg: var(--col-light);
        --col-txt: var(--col-dark);
        --overlay-dark: hsla(0, 0%, 0%, 0.2);

        /*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(1.625rem, 1.2496rem + 1.5282vw, 2.625rem);
        --fs-6: clamp(2.6127rem, 2.2371rem + 1.5293vw, 4.0531rem);
        /*font styles*/
        --ff-display: "PF Marlet Display", "Times New Roman", Times, serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        --ff-text:  Manrope ,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        /*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: clamp(5.25rem, 5.0544rem + 0.7963vw, 6rem);
        --section-pad--hor:  clamp(5.25rem, 5.0544rem + 0.7963vw, 6rem);
        /* 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 */
    }
    .manrope{
      font-family: Manrope, sans-serif;
    }
    /* Body style */
    body{
    color: var(--col-txt);
    background: var(--col-bg);
    display: flex;
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: -.01em;
    }
    p{
      margin-bottom: .5em;
    }
    /*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;
    }
    /*BRIX STYLES - overwriting brix default styles*/
    .brxe-container, .container{ /*default section container class Brix Builder*/
        width: 100%;
        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: -.02em;line-height: 1.1;font-weight: 400;}
    body{font-family: var(--ff-text); font-weight: 400; letter-spacing: .02em; line-height: 1.3em;}
    /* paragraph styles */
    p{margin-block: 0 .5em;}
    /* 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); line-height: 1.2;}
    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*/

    }

.text-light {
  color: var(--col-light)
}
@layer custom {

@layer nav-menu {
.nav--primary{
font-weight: 800;
color: var(--col-light);
font-size: .875rem;
}
}
/* Button & CTA styles */
.cta {
  background: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3xs);
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 600;
  transition: .4s ease-in-out;
  color: var(--col-dark)
}
.cta:hover{
  gap: .1em;
}
.cta--light{
  color: var(--col-light);
}
  .cta__icn{
    height: 19px;
  }
.btn, .bricks-button{
    display: flex;
    background: transparent;
    padding: 1rem 1.5rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    border: 1.6px solid var(--col-light);
    color: var(--col-light);
}
.btn--purple, form .bricks-button{
  background: var(--purple--600);
  border: none;
  color: var(--col-light);
  width: 100%;
}
.btn--light{
  color: var(--col-light);
  border: 1px solid var(--col-light);
  background: transparent;
}
.btn--light:hover{
  background: var(--col-light);
  color: var(--col-dark);
}
.btn--sand-400{
  color: var(--col-light);
  border: 1px solid var(--col-light);
  background: var(--sand--400);
}
.btn--sand-400:hover{
  background: var(--col-light);
  color: var(--sand--400);
}
  @layer form {
    /* Allow child button to flex-grow */
    label {
      color: var(--col-dark);
      font-size: 12px;
      letter-spacing: 0.02em;
      text-transform: unset;
    }
    input,
    textarea {
      background: transparent;
      border-radius: 0;
      border-width: 0 0 1px 0;
      border-color: var(--purple--700);
      font-size: 1em;
      display: flex;
    }
    input[type="checkbox"],
    input[type="radio"] {
      accent-color: var(--purple--600);
    }
    .bg-orange input[type="checkbox"],
    .bg-orange input[type="radio"] {
      accent-color: var(--col-dark);
    }
    input:focus,
    textarea:focus {
      color: var(--col-dark);
      border: var(--purple--700);
    }
    input:not(:placeholder-shown),
    textarea:not(:placeholder-shown) {
      color: var(--col-dark-t40);
    }
    textarea {
      border: 1px solid var(--purple--700);
    }
    input::placeholder,
    textarea::placeholder {
      color: var(--col-dark-t40) !important;
      font-size: 16px;
    }
    textarea::placeholder {
      transform: translateY(3em);
    }
    .form-group {
      margin-bottom: 32px;
    }
  }
/* section colours */
.light{
  background: var(--col-light);
}
.sand-100{
  background: var(--sand--100);
}
.sand-200{
  background: var(--sand--200);
}
.sand-400{
    background: var(--sand--400);
    color: #FFF;
}
.sand-500 {
  color: var(--col-light);
  background: var(--sand--500);
}
.sand-600 {
  color: var(--col-light);
  background: var(--sand--600);
}
.purple-600{
    color: var(--col-light);
    background: var(--purple--600);
}

/* Header & hero - header positioned inside hero */
.hero{
  padding: 0;
}
  /* header elements */
  .header{
    flex-direction: column;
    padding: var(--space-2xl);
  }
    .nav--primary nav{ 
       width: 100%;
      /* Mobile seperator */
      --seperator-gap: calc(var(--space-l) * 2);
      margin-top: var(--seperator-gap) ;
    } 
    .nav--primary nav::before {
      display: flex;
      content:'';
      transform: translateY(calc((var(--seperator-gap) / 2) * -1));
      height: 1px;
      width: 100%;
      background: white;
    } 
      .nav--primary ul{  
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-s);
        width: 100%;
      }
        .nav--primary li{
          margin: 0;
        }
@media only screen and (min-width: 992px){
  .header{
    flex-direction: row;
    align-items: center;
  }
  .header .nav--primary nav::before{
    display: none
  } 
  .nav--primary  nav{ 
    margin-top: 0;

  } 
  .nav--primary ul {
    flex-direction: row;
    justify-content: end;
  }
}
  /* logo link wrapper */
  .logo img{
    min-width: 10rem;
  }

/* Flat's hover effect */
@layer apartment-map{ 
.map{/* container that holds the elements */
  position: relative;
}
.map img{
width: 100%;

}
  .map__grid{
    position: absolute;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr;
  }
    .map__appt{
      /* wraps SVG and content */
      position: relative;
      display: flex;
      opacity: 0;
      transition: .4s ease-in-out;
    }
    .map__appt .appt__outline{
      position: absolute;
      z-index: 1;
    }
    .map__appt:has(g:hover){
      opacity: 1;
      cursor: pointer;
    }
      .appt__content{
        /* wraps heading and CTA */
        position: absolute;
        z-index: 10;
        pointer-events: none;
        /* absolute spacings for grid content */
        --top: 63%;
        --bottom: 73%;
      }
    /* first flat */
      .map__appt:nth-of-type(1) .appt__outline{
        top: 36.5%;
        left: 11%;
        width: 82%;
      }
        .map__appt:nth-of-type(1) .appt__content{
          top: var(--top);
          left: 18%;
        }
      /* Second Flat */
      .map__appt:nth-of-type(2) .appt__outline{
        top: 36.5%;
        left: 5%;
        width: 82%;
      }
        .map__appt:nth-of-type(2) .appt__content{
          top: var(--top);
          right: 20%;
        }
      /* third flat */
      .map__appt:nth-of-type(3) .appt__outline{
        top: -8.5%;
        left: 11%;
        width: 88%;
      }
        .map__appt:nth-of-type(3) .appt__content{
          bottom: var(--bottom);
          right: 10%;
        }
      /* Fourth Flat */
      .map__appt:nth-of-type(4) .appt__outline{
        top: -8.5%;
        left: -.5%;
        width: 88%;
      }
        .map__appt:nth-of-type(4) .appt__content{
          bottom: var(--bottom);
          left: 10%;
        }

          .appt__content h2{
            text-transform: uppercase;
            color: #fff;
            text-shadow: -1px 1px 4px rgba(0, 0, 0, 0.45);
          }
          .appt__content .cta{

          }
}
@layer apartment-list{
  .appt{
    position: relative;
  }
  .appt__body{
    display: flex;
    align-items: stretch;
  }
  .appt__details{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    max-height: 0px;
    height: 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .4s ease-in-out, opacity .4s ease-in-out, padding .4s ease-in-out;
  }
  .appt__details.show{
    max-height: 1000px;
    height: auto;
    opacity: 1;
    padding: 24px;
    justify-content: space-around;
  }
  .appt button{
    background: transparent;
  }
  .appt__btn{
    color: var(--col-dark);
  }
  .appt__btn-icon{
    transition: .4s ease-in-out;
  }
  .appt.active .appt__btn-icon{
    transform: rotate(-180deg);
  }
}
@layer map-popup{
.map-popup__close-btn{
  background: transparent;
  border: none; 
}
}
/* Footer styles */
.socials svg{
    display: flex;
    --icn-size: 1.2rem;
    min-height: var(--icn-size);
    height: var(--icn-size);
    width: var(--icn-size);
    min-width: var(--icn-size);
}

}