/* 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-visible + span::before,
input[type="checkbox"]:focus-visible + span::before {
  outline: 3px solid color-mix(in srgb, var(--wp--preset--color--accent) 50%, transparent);
  outline-offset: 0px;
}
 

/* -------------------------------- 
BUTTONS
-------------------------------- */
a,
a:not([class]) > strong        { text-decoration:none; outline:0; color: var(--wp--preset--color--accent); }
a:hover,
a:not([class]):hover > strong  { color:var(--wp--preset--color--contrast); }
 
/*a { position: relative; overflow: hidden; cursor: pointer; }*/

body {
   --buttonRadius:       8px;
   --buttonRadiusInvert: 8px;
}

button,
.button, 
[type=submit],
.wp-block-button.is-style-fill > .wp-element-button,
.wp-block-button.is-style-outline > .wp-element-button
{
    --buttonColor:  var(--wp--preset--color--contrast);
    --buttonBack:   transparent;
    --buttonBorder: transparent;

    padding:          var(--wp--preset--spacing--s);
    background-color: var(--buttonBack);
    border:           2px solid var(--buttonBorder);
    color:            var(--buttonColor);
    font-size:        var(--wp--preset--font-size--s);
/*    border-radius:    var(--buttonRadius);*/

    text-align: center;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*position: relative;*/
    text-decoration: none;
    line-height: 1;

    overflow: hidden;
    cursor: pointer;

    transition: all 350ms linear;
}

 
.button:hover,
[type=button]:hover,
[type=reset]:hover,
[type=submit]:hover,
button:hover {
  color: var(--buttonColor);
  --buttonRadius:0px;
 }
 
input[disabled],
button[disabled],
input[disabled]:hover,
button[disabled]:hover {
    opacity: 0.2;
    cursor: not-allowed;
}

.button > svg,
[type=button] > svg,
[type=reset] > svg,
[type=submit] > svg,
button > svg   { margin-right: var(--space-xxs) }
 

.is-style-fill,
.wp-block-button.is-style-fill .wp-element-button { 
  --buttonColor:  white;
  --buttonBack:   var(--wp--preset--color--contrast);
  --buttonBorder: var(--wp--preset--color--contrast);
}

.is-style-fill:hover,
.wp-block-button.is-style-fill .wp-element-button:hover { 
  --buttonBack:    color-mix(in srgb, var(--wp--preset--color--contrast) 80%, white);
  --buttonBorder:  color-mix(in srgb, var(--wp--preset--color--contrast) 80%, white);
  --buttonColor:  white;
  --buttonRadius:0px;
  box-shadow: var(--shadow-5);
 }
  
.is-style-outline,
.wp-block-button.is-style-outline .wp-element-button { 
  /*--buttonColor: var(--wp--preset--color--accent);*/
  color:          var(--buttonColor); 
  border-color:   var(--wp--preset--color--accent); 
}

.is-style-outline:hover,
.wp-block-button.is-style-outline .wp-element-button:hover   { 
  --buttonColor:  white;
  --buttonBack:   var(--wp--preset--color--accent);
  --buttonBorder: var(--wp--preset--color--accent);
  --buttonRadius:0px;
}

.is-style-accent,
.wp-block-button.is-style-accent .wp-element-button         { 
  color:         var(--wp--preset--color--accent); 
  border-color:  var(--wp--preset--color--accent); 
}
.is-style-accent:hover,
.wp-block-button.is-style-accent .wp-element-button:hover   { 
  --buttonBack:   var(--wp--preset--color--accent);
  --buttonBorder: var(--wp--preset--color--accent);
  --buttonColor:  white;
  --buttonRadius:0px;
}  

.is-style-contrast,
.wp-block-button.is-style-contrast .wp-element-button         { 
  color:         var(--wp--preset--color--contrast); 
  border-color:  var(--wp--preset--color--contrast); 
}
.is-style-contrast:hover,
.wp-block-button.is-style-contrast .wp-element-button:hover   { 
  --buttonBack:   var(--wp--preset--color--contrast);
  --buttonBorder: var(--wp--preset--color--contrast);
  --buttonColor:  white;
  --buttonRadius:0px;
}  
 
 
 

.button-s {
  padding: var(--wp--preset--spacing--xs);
}  
 
 
.is-full { width: 100% }


/*.linkhover,
.is-style-linkhover a {
  --color:var(--wp--preset--color--contrast);
  --line:var(--wp--preset--color--contrast);
  background-color: transparent;
  display: inline-flex;
  align-items: center;
  gap:20px;
  position: relative;
  color:var(--color);
  padding: var(--wp--preset--spacing--s) 0;
  font-weight: 700;
  border-radius: 0;

  border: 2px solid;
  border-image: repeating-linear-gradient(135deg,var(--line) 0 10px,var(--line) 0 20px,var(--line) 0 30px) 8;
  -webkit-mask: 
    conic-gradient(from 180deg at top 8px right 8px, #0000 90deg,#000 0)
     var(--_i,200%) 0  /200% var(--_i,8px) border-box no-repeat,
    conic-gradient(at bottom 8px left  8px,  #0000 90deg,#000 0)
     0   var(--_i,200%)/var(--_i,8px) 200% border-box no-repeat,
    linear-gradient(#000 0 0) padding-box no-repeat;
  transition: .3s, -webkit-mask-position .3s .3s;
}

.linkhover:hover,
.is-style-linkhover a:hover  {
  --_i: 100%;
  gap:40px;
  padding: var(--wp--preset--spacing--s);
  color:   var(--color);
  transition: .3s, -webkit-mask-size .3s .3s;
}


.linkhover::after,
.is-style-linkhover a::after  {
  content:'';
  background-image:var(--arrow-dark);
  background-repeat: no-repeat;
  background-size: 32px;
  background-position: center;
  height: 32px;
  width:  32px;
   border-radius: 0;
  border:2px solid var(--line);
  transition: all 350ms ease;
}

.linkhover:hover::after,
.is-style-linkhover a:hover::after {
  background-image:var(--arrow-light);
  border-radius: 50px;
  background-color: var(--color);
  transform: rotate(-45deg);
}

.linklight {
  --color: var(--wp--preset--color--light);
  --line:  var(--wp--preset--color--light);
}
.linklight::after       { background-image:var(--arrow-light); }
.linklight:hover::after { background-image:var(--arrow-dark);  }

.is-style-linkhover a.has-light-color {
  --color: var(--wp--preset--color--light);
  --line:  var(--wp--preset--color--light);
}

.is-style-linkhover a.has-light-color::after       { background-image:var(--arrow-light); }
.is-style-linkhover a.has-light-color:hover::after { background-image:var(--arrow-dark);  }*/

.linkvideo:hover::after {
  transform: rotate(360deg);
}
 

 
 
@media only screen and (max-width: 620px) {  
  .is-mobile-full { width: 100% }
}
 
 
/* -------------------------------- 
FORMS & INPUTS
-------------------------------- */

form {
  --left:  0;
  --width: 120px;
  --size:  16px;
} 

.flexform {
    display: flex;
    gap: var(--space-l);
    justify-content: space-between;
    flex-wrap: wrap;
}

.flexform > p { flex: 1 1 60%; }
 
.mc-field-group { position: relative; }
.text-green     { color:mediumaquamarine; }


.newsletter-send {
  background: white;
  color:var(--wp--preset--color--contrast);
  font-weight: 600;
}

.newsletter-send:hover {
  box-shadow: 0 6px 20px var(--wp--preset--color--medium);
}

.formdark {
    width: 100%;
    position: relative;
    z-index: 2;
  --label:var(--wp--preset--color--contrast);
  --inputBack:white;
  --inputBorder:var(--wp--preset--color--contrast);
  --inputBorderFocus:var(--wp--preset--color--contrast);
}

.formlight {
    width: 100%;
    position: relative;
    z-index: 5;
  --label:var(--wp--preset--color--accent);
  --label:white;
  --inputBack:rgb(255 255 255 / .15);
  --inputBorder:var(--wp--preset--color--light);
  --inputBorderFocus:var(--wp--preset--color--contrast);
}

label {
  color:var(--label);
  /*font-weight: 600;*/
  font-size: var(--wp--preset--font-size--xs);
  display: block;
  margin-bottom: var(--wp--preset--spacing--xs);
}


input:not([type=submit]),
textarea,
select {
  font-size: var(--wp--preset--font-size--p);
  color:   var(--inputBorder);
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--xs); 
  background-color:var(--inputBack); 
  border:2px solid var(--inputBorder);
  transition: all 350ms linear;
  display: flex;
  width: 100%;

  backdrop-filter: blur(4px);
}

textarea::placeholder {
  font-weight: 500
}

 

.form-group input:not(:focus):not(:valid):not(:placeholder-shown)  {
  border-color: red;
  background-color: pink;
}

.form-group input ~ span { display: none;}
.form-group input:not(:focus):not(:valid):not(:placeholder-shown) ~ span {
  color:white;
  color:red;
  display: block;
}
 
 
/* -------------------------------- 

CHECKBOXES & RADIOS

-------------------------------- */
 
.form-check {
  display: flex;
  align-items: flex-start;
  position: relative;
  gap:calc(var(--size)/2);
}

.form-check label {
    color: var(--label);
    font-size: var(--wp--preset--font-size--xs);
    cursor: pointer;
    margin:0;
}

 
.form-check input[type="checkbox"] {
  position: absolute;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  z-index:-1;
  cursor: pointer;
}

input[type="checkbox"] + span { position:relative; } 
input[type="checkbox"] + span::before { 
  content: '';
  display: block;
  width:  var(--size);
  height: var(--size);
  border:2px solid var(--inputBorder);
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

input[type="checkbox"] + span::after {
  content: '';
  display: block;
  width:  var(--size);
  height: var(--size);
  position: absolute;
  inset:0;
}
 
input[type="checkbox"]:checked + span::after, 
input[type="checkbox"]:checked + span::before {
  --inputBorder:var(--wp--preset--color--accent);
  box-shadow: var(--shadow-3);
  transition: transform .2s;
}

input[type="checkbox"]:checked ~ label {
  color: var(--label); 
 }
 
input[type="radio"]:checked + span::after,
input[type="checkbox"]:checked + span::after {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%2338d9a9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  mask-size:  8px;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: var(--inputBorder);
}