/* Hide focus styles if they're not needed, for example, when an element receives focus via the mouse. */
:focus:not(:focus-visible) {
    outline: 0;
 }

/* Show focus styles on keyboard focus. */
:focus-visible,
input[type="radio"]:checked:active + span::before,
input[type="checkbox"]:checked:active + span::before,
input[type="radio"]:focus + span::before,
input[type="checkbox"]:focus + span::before {
  outline: 3px solid var(--wp--preset--color--yellow);
 
}
 
/* "shadow": "inset 0 0 0 2px var(--wp--preset--color--yellow)",*/

 


/* -------------------------------- 
BUTTONS
-------------------------------- */
a:not([class]),
a:not([class]) > strong        { outline:0; color:inherit; text-decoration:underline;   }

a { text-decoration: none; }
 
 
.link-underline       { text-decoration:underline; } 
.link-underline:hover { color:var(--wp--preset--color--contrast) }

.wp-block-button__link:hover {border-radius:6px; backdrop-filter:blur(2px)}

button,
.button {
  border:none;
  overflow: hidden;
  cursor: pointer;
  transition: all 350ms ease;
}



/*button,
.button {
    padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--m);
    border:none;
    font-size: var(--wp--preset--font-size--s);
    color:var(--wp--preset--color--dark);
    text-align: center;
    font-weight: 600;

    text-transform: uppercase;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
 
    position: relative;
    border-radius: var(--radius-8);
    text-decoration: none;
    line-height: 1;

    overflow: hidden;
    background-color: transparent;
    cursor: pointer;

    transition: all 350ms ease;
}

 
.button:hover,
[type=button]:hover,
[type=reset]:hover,
button:hover {
    opacity: 0.8;
}
 
input[disabled],
button[disabled],
input[disabled]:hover,
button[disabled]:hover {
    opacity: 0.2;
    cursor: not-allowed;
}*/
 

.is-fill        
{ color:var(--wp--preset--color--light); background:var(--wp--preset--color--accent); }
.is-fill:hover   
{ color:var(--wp--preset--color--light); box-shadow:var(--shadow-brand);  }

.is-outline        
{ color:var(--wp--preset--color--contrast); background:var(--wp--preset--color--light); border:2px solid var(--wp--preset--color--contrast); }
.is-outline:hover   
{ color:var(--wp--preset--color--contrast);  }

.is-small { 
  font-size: var(--text-xs);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--s);
}

.linkhover,
.linkhover svg {
  transition: all 250ms ease;
}

.linkhover {
  --rotate:0deg;
  border: 2px solid var(--wp--preset--color--contrast);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap:var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--xs);
  color:var(--wp--preset--color--contrast);

  text-transform: uppercase;
  font-size: var(--wp--preset--font-size--s);
}

.linkhover svg {
  transform: rotate(var(--rotate));
}

.linkhover:hover {
  color:var(--wp--preset--color--contrast);
  --rotate:-45deg;
}

 


a.linkicon {
  --linkPadding:var(--wp--preset--spacing--xxs);
  --size: 26px;
  text-decoration: none;
  font-size: var(--wp--preset--font-size--p);
  background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 75%, transparent);
  color:   white;
  display: inline-flex;
  gap: var(--wp--preset--spacing--xxs);
  padding: var(--linkPadding);
  border-radius: 100vmin;
}

a.linkicon:hover     { background-color: var(--wp--preset--color--contrast); }

a.linkicon:before {
  content:'';
  background-image: var(--phone);
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(var(--size)/1.4);
  width:  var(--size);
  height: var(--size);
  background-color: white;
  border-radius: 50%;
} 

a.phone:before { background-image: var(--phone); }
a.mail:before  { background-image: var(--mail); }



 
/* -------------------------------- 
DETAILS
-------------------------------- */

details summary::-webkit-details-marker {
  display: none;
}
      
details {
  --icon: 16px;
  --paddingSummary: var(--wp--preset--spacing--s);
  --colorSummary:   var(--wp--preset--color--contrast);
  --paddingInner:   0 0 var(--wp--preset--spacing--s);
  --colorInner:     var(--wp--preset--color--verde);
  --backOpen:       white;
  --back:           var(--wp--preset--color--lightgrey);
  --backHover:      var(--wp--preset--color--darkgrey);
  --events: none;
  width: 100%;
  transition: all 350ms linear;
}

details summary {
  color:          var(--colorSummary);
  padding:        var(--paddingSummary);
 
  font-weight: 900;
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  cursor:pointer;
  transition: all 350ms linear;
}

details summary:after {
  content: '';
  mask-image: var(--arrow-down);
  mask-repeat: no-repeat;
  mask-size: var(--icon);
  min-width: var(--icon);
  aspect-ratio: 1 / 1;
  display: block;
  transition: all 350ms linear;
  background-color: currentColor;
}
 
details[open] summary:after { transform: rotate(180deg);  }

details.details-footer {
  --icon:0px;
  --paddingSummary: 0 0 var(--wp--preset--spacing--s);
}  

details.details-footer summary {
  pointer-events: var(--events);
  font-size: var(--wp--preset--font-size--s);
}


@media only screen and (max-width: 620px)  {  
  details.details-footer summary:after {
/*    filter: invert(1);*/
  } 
  details.details-footer {
    --events:all;
    --icon:16px;
    --paddingSummary: var(--wp--preset--spacing--s) 0;
    
   }  
  
}