/*
BLOCK
1_ HOMEPAGE BENTO GRID
2_ BODY
3_ HEADER & NAV 
4_ FOOTER
5_ FORMS
6_ OTHER


 /************************************************************************************/

 /************ 1_ HOMEPAGE BENTO GRID ************/

/************************************************************************************/  
.card{  
  border-radius: 1rem;
  padding: var(--space-m); 
}


.card-1{
background-color: var(--shadow); 
}

.card-2{
  background-color: var(--secondary);
  background-image: url(/svgs/uni.svg);
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--text-alt);
  padding: inherit;  
  display: grid;
  align-items: end;
  justify-content: end;
  min-height:  10rem;
}
.card-2 p{
  background-color: var(--text); 
  margin: 0; 
  padding-inline: 1rem;
  }


.card-3{
  background-color: var(--brand);
  color: var(--text-alt);
  justify-items: center;
}


.card-4{
  background-image: url(/images/Ladies-Hairdressing-bw.webp);
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 100rem  100rem  oklch(from var(--text) l c h /.85);
  color: var(--text-alt);
  justify-items: center;
  grid-column: span 2;
}

.card-5{
  background-color: var(--secondary);
  font-size: var(--step--1);
  line-height: 1.8;
  place-content: center;
  grid-column: span 2;
  }


  .card-6{
    background-color: var(--shadow)
   
   }
  

  .card-7{
    border: .4rem solid var(--brand);
    place-content: center;
     }


/* 

Other card background styles

  background-image: url(/);
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode:multiply; 
  box-shadow: inset 100rem  100rem  oklch(from var(--secondary) l c h /.8);
  

  background-image: url(/);
  background-repeat: no-repeat;
  background-size: cover;
  border-image: fill 1 linear-gradient( 90deg, var(--brand),  var(--secondary) ); 
}

} */
  

/* https://gui-challenges.web.app/relative-colors/dist/ */
 

 


/********************************************************/

/************ 2_ BODY ************/              

/*********************************************************/


/* Bento animation*/

@keyframes slide-fade-in {
  from {
    /* opacity: 0; */
    /* transform:  translatex(-5vw); */
  
  }
}

.card {
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      animation: slide-fade-in both;
      animation-timeline: view();
      animation-range:entry 0% 50%;
     
    
    }
  }
}

/*  removes all browers button styles
focus need to be added back */
button{
  all:unset
}

.btn,.btn:active{
  border-radius: 0.5rem;
  border: none;
  background-color: var(--tertiary);
  color:  var(--text);
  display: block;
  padding: 0.3em 1.5em;
  font-weight: 600;
  letter-spacing: 0.05em;  
  text-decoration: none;  
  text-transform: uppercase;
  width:  fit-content;
  height: fit-content; 
  font-size: var(--step--2); 
  outline: 0.1rem solid transparent;
  outline-offset: -0.125rem;
  box-shadow: .08rem  .15rem 0rem hsl(0, 0%, 2%);
  transition: .2s ease-out;
  margin-block-end: var(--space-s);
}


.btn:hover {
  color:  var(--text);
  transition: .1s ease-in; 
  box-shadow: .05rem .08rem ;
  transition: .2s ease-in;  
  background-color: hsl(from var(--tertiary) h s calc(l + -8)); 
}  
 
.btn:focus-visible{
  outline: 0.3rem solid var(--accent);  
  border-radius: 0.5rem;
}

/************************************************************************************/

 /**********3_ HEADER & NAV  **********/

/************************************************************************************/
header{
  padding-block: var(--space-m);
  color: var(--text);
}

header a{
  text-decoration: none;
  }
  

.logo-area{ 
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
  align-items: center;
  border: 5px solid var(--brand);
  border-radius: 1rem;
  padding: 1rem; 

}

.logo img{
  border-radius: 50%;
 max-inline-size:150px;
  block-size: auto;
 /* filter: grayscale(1) contrast(1.3); */
   
}

header h1 span{
  font-size: var(--step-0);
  display: block;  
  line-height: normal;
}

.header-contacts{
  background-color: var(--shadow);
  border-radius: 1rem;
  padding: 1rem; 
  align-content: center;
  justify-items: center;    
}

.header-contacts li{
  list-style: none;  
}



.header-contacts li img {
 display: inline;
 vertical-align: middle;
 inline-size: 1.8rem;
}


/************************************************************************************/

 /************ 4_ FOOTER ************/

/************************************************************************************/  

footer{

  padding-block: var(--space-m);
}


/************ 5_ FORMS ************/

/*********************************************************/
/* Base form styles */
form {
  margin-block-end: var(--space-m);
  background-color: var(--shadow-2);

  border-radius: 0.5rem;
}

.field-wrapper {
  margin-block-end: 1.5rem;
}

/* Label styles */
label {
  display: block;
  font-weight: 600;
  margin-block-end: 0.5rem;
  color: var(--text);
}

/* Required field indicator */
.required {
  color: var(--tertiary);
  margin-inline-start: 0.25rem;
}

/* Input styles */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
  width: 100%;
  padding: 1rem 0.5rem;
  border: 0.2rem solid var(--text);
  border-radius: 0.5rem; 
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Focus states */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent); 
}

/* Error states */
input:invalid:not(:focus):not(:placeholder-shown),
textarea:invalid:not(:focus):not(:placeholder-shown) {
  border-color: var(--tertiary);
}

/* Textarea specific styles */
textarea {
  height: 15rem;
  resize: vertical; 
}


/************************************************************************************/

/************6_OTHERS  ************/

/************************************************************************************/  
 /* Footer opening prices mock table */

 .prices ul li {  
  padding: 1rem 0; 
  list-style: none;  
  }  
       
 .prices ul li span:first-child{
 float: inline-start; 
 padding: 0 .8rem 0 0; 
 font-weight: 600;
 }
 
 .prices ul li span:first-child + span{
 float: inline-end; 
 padding: 0 0 0 .5rem;
 font-weight: 600;
 }
 .prices  ul li:after{ 
   content: ''; 
   height:1.5rem;
   display: block;
   overflow: hidden; 
   border-block-end: .1rem solid var(--brand); 
  }  
  
  main:not(.home main){
   border-radius: 2rem;
   border: .4rem solid var(--brand);
   padding-block: 3rem;
  }