/* 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,
a > strong        { outline:0; color:inherit;  }
a:not(.wp-element-button):hover,
a:not(.wp-element-button):hover > strong  { opacity: .7;}
 
.link-underline       { text-decoration:underline; } 
.link-underline:hover { color:var(--wp--preset--color--contrast) }

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: red;
    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;
}

 



 
/* -------------------------------- 
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(--newsletterMain);
  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);  }