/*-------------------------------- 
ANIMATIONS AND MORE
-------------------------------- */

.black { border: var(--black); } 
.ora   { border: var(--ora);   }
.red   { border: var(--red);   }
.green { border: var(--green); }

::selection       { color:var(--wp--preset--color--light); background:var(--wp--preset--color--accent);}
::-moz-selection  { color:var(--wp--preset--color--light); background:var(--wp--preset--color--accent);}

a:link, .button, [class*="shadow"], input[type=submit], header {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
 

/*-------------------------------- 
GRID UTILITIES
-------------------------------- */

.flex, .d-flex            { display: flex; }
.flex-end                 { justify-content: flex-end; }
.flex-start               { justify-content: flex-start; }
.flex-center              { justify-content: center; }
.row-between              { justify-content: space-between; }
.row-full                 { max-width:100%!important; width: 100%!important;}
.row-center               { align-items: center; justify-content: center;}
.row-top                  { align-items: flex-start; }
.row-bottom               { align-items: flex-end; }
.row-right                { align-items: center; justify-content: flex-end!important; }
.nowrap                   { flex-wrap: nowrap; }
.wrap                     { flex-wrap: wrap; }
 
.justify-content-center   { justify-content: center; }

.center-items             { align-items: center; }
.center-between           { align-items: center; justify-content: space-between;}
.start-between            { align-items: flex-start; justify-content: space-between;}
.h-100p                   { height: 100%  } 

.hidden-col               { visibility: hidden;}
.section-vh               { padding:0!important; height: 100vh; width: 100%; }

.d-block                  { display: block; }
.d-inline-block           { display: inline-block; }
.d-inline-flex            { display: inline-flex; }
.d-none                   { display: none!important; }


.content-size  { width: var(--wp--style--global--content-size); margin-inline:auto; }
.wide-size     { width: var(--wp--style--global--wide-size); margin-inline:auto; }

.gap-none      { gap:0px; }
.gap-xxs       { gap:var(--wp--preset--spacing--xxs); }
.gap-xs        { gap:var(--wp--preset--spacing--xs); }
.gap-s         { gap:var(--wp--preset--spacing--s); }
.gap-m         { gap:var(--wp--preset--spacing--m); }
.gap-l         { gap:var(--wp--preset--spacing--l); }
.gap-xl        { gap:var(--wp--preset--spacing--xl); }

.flow > * + * {
  margin-top: var(--flow-space, 1em);
} 

.flow-xxs       { --flow-space:var(--wp--preset--spacing--xxs); }
.flow-xs        { --flow-space:var(--wp--preset--spacing--xs); }
.flow-s         { --flow-space:var(--wp--preset--spacing--s); }
.flow-l         { --flow-space:var(--wp--preset--spacing--l); }
.flow-xl        { --flow-space:var(--wp--preset--spacing--xl); }


.flow > h1:not(:last-child), 
.flow > h2:not(:last-child), 
.flow > h3:not(:last-child), 
.flow > h4:not(:last-child), 
.flow > h5:not(:last-child), 
.flow > h6:not(:last-child) { margin-bottom:0; }

.ml-auto { margin-left: auto!important; }
.mr-auto { margin-right: auto!important; }
.mt-auto { margin-top: auto!important; }
.mb-auto { margin-bottom: auto!important; }
.mx-auto { margin-inline:auto!important; } 
 
.columns { columns: 2; }

hr {
/*  border:none;*/
/*  border-top:4px solid white!important;*/
/*  padding-bottom: var(--space-xs);*/
/*  margin-bottom:  var(--space-xs);*/
}


.stacked {
    display: grid;
} 

.stacked > * {
    grid-column: 1/-1;
    grid-row: 1/-1;
} 

.imagecover {
    object-fit: cover;
    object-position: center;
    height: 100%;
    width: 100%;
}

.cover-gradient {
    background: var(--wp--preset--color--medium);
    background: var(--wp--preset--color--contrast);
}

.cover-gradient::after,
.cover-gradient::before {
    content:'';
    position: absolute;
    inset:0;
    background: linear-gradient(38deg, rgba(2,0,36,0) 0%, var(--wp--preset--color--contrast) 100%);
    mix-blend-mode: multiply;
    opacity: .8;
}

.cover-gradient::before {
    background: linear-gradient(222deg, rgba(2,0,36,0) 0%, var(--wp--preset--color--accent) 100%);
    opacity: .65;
    mix-blend-mode: color-burn;
}

.cover-gradient > img {
    position: absolute;
    inset: 0;
    height: 100%;
    mix-blend-mode: luminosity;
/*    mix-blend-mode: multiply;*/
    filter:brightness(.5);
    width: 100%;
    object-fit: cover;
    z-index: 0;
}

.cover-gradient :not(img)   {
    position: relative;
/*    z-index: 1;*/
}

/*-------------------------------- 
CUSTOM SCROLLBAR
-------------------------------- */
 

.custom-scrollbar::-webkit-scrollbar {
    --scroll: 6px;
    width:  var(--scroll);
    height: var(--scroll);
    position: relative;
    z-index: 0;
    opacity: 0;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgb(0 0 0 / .25);
    opacity: 0
}
.custom-scrollbar::-webkit-scrollbar-track:hover {
    opacity: 1;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--wp--preset--color--accent);
    border-radius: 100vmin;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--wp--preset--color--contrast);
    cursor: grab;
}

.custom-scrollbar::-webkit-scrollbar-thumb:active {
  cursor:grabbing;
}


/* -------------------------------- 
TEXT UTILITIES
-------------------------------- */

.icon-12 > svg { min-width: var(--icon-12); width: var(--icon-12); display: block; }
.icon-16 > svg { min-width: var(--icon-16); width: var(--icon-16); display: block; }
.icon-20 > svg { min-width: var(--icon-20); width: var(--icon-20); display: block; }
.icon-24 > svg { min-width: var(--icon-24); width: var(--icon-24); display: block; }
.icon-36 > svg { min-width: var(--icon-36); width: var(--icon-36); display: block; }
.icon-48 > svg { min-width: var(--icon-48); width: var(--icon-48); display: block; }
.icon-64 > svg { min-width: var(--icon-64); width: var(--icon-64); display: block; }

.font-900 { font-weight: 900; }
.font-700 { font-weight: 700; }
.font-600 { font-weight: 600; }
.font-500 { font-weight: 500; }
.font-400 { font-weight: 400; }
.font-300 { font-weight: 300; }

.line-heading  { line-height:var(--wp--custom--line-height--header); }
.line-body     { line-height:var(--wp--custom--line-height--body); }
.line-meta     { line-height:var(--wp--custom--line-height--meta); }
.line-small    { line-height:var(--wp--custom--line-height--small); }
 
.font-heading          { font-family: var(--wp--preset--font-family--header); }
.font-body             { font-family: var(--wp--preset--font-family--body); }

.font-italic           { font-style:italic; }
 
.text-uppercase        { text-transform: uppercase; }
.text-normal           { text-transform: none; }
.text-center           { text-align: center; }
.text-left             { text-align: left; }
.text-right            { text-align: right; }
.left-center           { text-align: left; } 
.right-center          { text-align: right; } 
.right-left            { text-align: right; } 

.text-truncate         { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-balance          { text-wrap: balance } 

.ch-6  { max-width: var(--ch-6); }
.ch-12 { max-width: var(--ch-12); }
.ch-14 { max-width: var(--ch-14); }
.ch-20 { max-width: var(--ch-20); }
.ch-30 { max-width: var(--ch-30); }
.ch-35 { max-width: var(--ch-35); }
.ch-45 { max-width: var(--ch-45); }
.ch-65 { max-width: var(--ch-65); }

.text-ellipses {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.text-columns {
  columns:2;
  column-gap: var(--wp--preset--spacing--l);
} 

@media only screen and (max-width:820px) {

.right-left                   { text-align: left;  } 
.left-center, .right-center   { text-align: center; } 

}


@media only screen and (max-width:540px) {

.text-columns {
  columns:1;
  column-gap: var(--space-m)
} 

}

 

/* -------------------------------- 
UI UTILITIES
-------------------------------- */

.back-contrast   { background-color: var(--wp--preset--color--contrast); }
.back-accent     { background-color: var(--wp--preset--color--accent); }
.back-soft       { background-color: var(--wp--preset--color--softblue); }
.back-medium     { background-color: var(--wp--preset--color--medium); }
.back-light      { background-color: var(--wp--preset--color--light); }
.back-grey       { background-color: #f2f2f2; }

.text-light      { color:white; }
.text-soft       { color:var(--wp--preset--color--softblue); }
.text-medium     { color:var(--wp--preset--color--medium) }
.text-accent     { color:var(--wp--preset--color--accent); }
.text-contrast   { color:var(--wp--preset--color--contrast); }
.text-body       { color:var(--wp--preset--color--body); }
 
.shadow-s        { box-shadow: var(--shadow-s); }
.shadow-m        { box-shadow: var(--shadow-m); }
.shadow-l        { box-shadow: var(--shadow-l); }
.shadow-xl       { box-shadow: var(--shadow-xl); }
.shadow-xxl      { box-shadow: var(--shadow-xxl); }
.shadow-card     { box-shadow: var(--shadow-card); }

.radius-4        { border-radius: var(--radius-4); }
.radius-8        { border-radius: var(--radius-8); }
.radius-12       { border-radius: var(--radius-12); }
.radius-16       { border-radius: var(--radius-16); }
.radius-24       { border-radius: var(--radius-24); }

/* -------------------------------- 
SPACE UTILITIES
-------------------------------- */

.py-xxs   { padding-block:var(--wp--preset--spacing--xxs)!important;}
.py-xs    { padding-block:var(--wp--preset--spacing--xs)!important;}
.py-s     { padding-block:var(--wp--preset--spacing--s)!important;}
.py-m     { padding-block:var(--wp--preset--spacing--m)!important;}
.py-l     { padding-block:var(--wp--preset--spacing--l)!important;}
.py-xl    { padding-block:var(--wp--preset--spacing--xl)!important;}
.py-large { padding-block:var(--wp--preset--spacing--large)!important;}
.py-huge  { padding-block:var(--wp--preset--spacing--huge)!important;}

.px-xxs   { padding-inline:var(--wp--preset--spacing--xxs)!important;}
.px-xs    { padding-inline:var(--wp--preset--spacing--xs)!important;}
.px-s     { padding-inline:var(--wp--preset--spacing--s)!important;}
.px-m     { padding-inline:var(--wp--preset--spacing--m)!important;}
.px-l     { padding-inline:var(--wp--preset--spacing--l)!important;}
.px-xl    { padding-inline:var(--wp--preset--spacing--xl)!important;}
.px-large { padding-inline:var(--wp--preset--spacing--large)!important;}
.px-huge  { padding-inline:var(--wp--preset--spacing--huge)!important;}

.pt-none  { padding-top:0!important; }
.pt-xxs   { padding-top:var(--wp--preset--spacing--xxs)!important;}
.pt-xs    { padding-top:var(--wp--preset--spacing--xs)!important;}
.pt-s     { padding-top:var(--wp--preset--spacing--s)!important;}
.pt-m     { padding-top:var(--wp--preset--spacing--m)!important;}
.pt-l     { padding-top:var(--wp--preset--spacing--l)!important;}
.pt-xl    { padding-top:var(--wp--preset--spacing--xl)!important;}
.pt-large { padding-top:var(--wp--preset--spacing--large)!important;}
.pt-huge  { padding-top:var(--wp--preset--spacing--huge)!important;}

.pb-none  { padding-bottom:0; }
.pb-xxs   { padding-bottom:var(--wp--preset--spacing--xxs);}
.pb-xs    { padding-bottom:var(--wp--preset--spacing--xs);}
.pb-s     { padding-bottom:var(--wp--preset--spacing--s);}
.pb-m     { padding-bottom:var(--wp--preset--spacing--m);}
.pb-l     { padding-bottom:var(--wp--preset--spacing--l);}
.pb-xl    { padding-bottom:var(--wp--preset--spacing--xl);}
.pb-large { padding-bottom:var(--wp--preset--spacing--large);}
.pb-huge  { padding-bottom:var(--wp--preset--spacing--huge);}


.my-none  { margin-block:0;}
.my-xxs   { margin-block:var(--wp--preset--spacing--xxs)!important;}
.my-xs    { margin-block:var(--wp--preset--spacing--xs)!important;}
.my-s     { margin-block:var(--wp--preset--spacing--s)!important;}
.my-m     { margin-block:var(--wp--preset--spacing--m)!important;}
.my-l     { margin-block:var(--wp--preset--spacing--l)!important;}
.my-xl    { margin-block:var(--wp--preset--spacing--xl)!important;}
.my-large { margin-block:var(--wp--preset--spacing--large)!important;}
.my-huge  { margin-block:var(--wp--preset--spacing--huge)!important;}

.mx-xxs   { margin-inline:var(--wp--preset--spacing--xxs)!important;}
.mx-xs    { margin-inline:var(--wp--preset--spacing--xs)!important;}
.mx-s     { margin-inline:var(--wp--preset--spacing--s)!important;}
.mx-m     { margin-inline:var(--wp--preset--spacing--m)!important;}
.mx-l     { margin-inline:var(--wp--preset--spacing--l)!important;}
.mx-xl    { margin-inline:var(--wp--preset--spacing--xl)!important;}
.mx-large { margin-inline:var(--wp--preset--spacing--large)!important;}
.mx-huge  { margin-inline:var(--wp--preset--spacing--huge)!important;}

.mt-none  { margin-top:0!important; }
.mt-xxs   { margin-top:var(--wp--preset--spacing--xxs)!important;}
.mt-xs    { margin-top:var(--wp--preset--spacing--xs)!important;}
.mt-s     { margin-top:var(--wp--preset--spacing--s)!important;}
.mt-m     { margin-top:var(--wp--preset--spacing--m)!important;}
.mt-l     { margin-top:var(--wp--preset--spacing--l)!important;}
.mt-xl    { margin-top:var(--wp--preset--spacing--xl)!important;}
.mt-large { margin-top:var(--wp--preset--spacing--large)!important;}
.mt-huge  { margin-top:var(--wp--preset--spacing--huge)!important;}

.mb-none  { margin-bottom:0!important; }
.mb-xxs   { margin-bottom:var(--wp--preset--spacing--xxs)!important;}
.mb-xs    { margin-bottom:var(--wp--preset--spacing--xs)!important;}
.mb-s     { margin-bottom:var(--wp--preset--spacing--s)!important;}
.mb-m     { margin-bottom:var(--wp--preset--spacing--m)!important;}
.mb-l     { margin-bottom:var(--wp--preset--spacing--l)!important;}
.mb-xl    { margin-bottom:var(--wp--preset--spacing--xl)!important;}
.mb-large { margin-bottom:var(--wp--preset--spacing--large)!important;}
.mb-huge  { margin-bottom:var(--wp--preset--spacing--huge)!important;}