/* General */
:root {
  --font-family: 'Manrope';
  --font:        400 calc(15px + 0.390625vw) / 1.5 var(--font-family);

  --full:        minmax(var(--gap), 1fr);
  --content:     minmax(0, calc(100% - var(--gap) * 2));
  --feature:     minmax(0, 5rem);
  --popout:      min(50ch, 100% - var(--gap) * 2);

  --gap:         calc(8px + 1.5625vw);
  --gap-s:       calc(var(--gap) / 1.5);

  --tiny:        .125rem;

  --r:           2rem;
  --r-s:         1.125rem;
  --r-r:         100%;

  --btn:         2.5rem;
  --btn-bg:      linear-gradient(to right, var(--grey), var(--c4), var(--c2));

  --black:       #1f2022;
  --grey:        #f1f1f1;
  --white:       #fff;
  --accent:      var(--c5);

  --red:         #f21b1b;
  --blue:        #6f6ff0;
  --green:       #1daa1d;

  --c1:          #fffdbe;
  --c2:          #fffc96;
  --c3:          #fcf113;
  --c4:          #c7d9ff;
  --c5:          #a6c2ff;
  --c6:          #4773d3;

  --bg-gr:       linear-gradient(to right, var(--c1), var(--accent));
  --bg-gr-link:  linear-gradient(to right, var(--c6), var(--accent));
  --bg-gr-t:     radial-gradient(ellipse at left top, var(--c5) 10%, var(--c1) 40%, transparent 65%);
  --bg-gr-b:     radial-gradient(circle 55vw at center 105%, var(--c1) 10%, var(--c5) 60%, transparent 90%);

  --sec:         all   1s ease;
  --h-sec:       all  .5s ease;
  --q-sec:       all .25s ease;

  --logo:        max(5vw,60px);

  --big-pad:     calc(var(--btn) + var(--gap) * 2);
}
@media (prefers-color-scheme: dark) {
  :root {
    --black:     #1f2022;
  }
}

::selection {
  color: var(--black);
  background: var(--accent);
}

html {
  font: var(--font);
  color: var(--black);
}
html.fixed,
html.fixed body {
    touch-action: none;
    -ms-scroll-chaining: none;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    overflow: hidden;
}
body {
  display: grid;
  grid-template: auto 1fr / 100%;
  min-height: 100vh;
  min-height: 100svh;
}

/* Layout Breakouts */
body > :is(header,main,footer,dialog) {
  display: grid;
  row-gap: var(--gap-s);
  grid-template-columns:
    [full-start] var(--full)
      [content-start] var(--content)
        [feature-start] var(--feature)
          [popout-start] var(--popout) [popout-end]
        var(--feature) [feature-end]
      var(--content) [content-end]
    var(--full) [full-end];
}
body > :is(header,main,footer,dialog) > section[full]    {grid-column: full}
body > :is(header,main,footer,dialog) > section          {grid-column: content}
body > :is(header,main,footer,dialog) > section[feature] {grid-column: feature}
body > :is(header,main,footer,dialog) > section[popout]  {grid-column: popout}


/* Preloader */
#loader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-items: center;
  align-items: center;
  backdrop-filter: blur(.25rem);
  visibility: visible;
  opacity: 1;
  z-index: 3;
}
#loader::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--white);
  opacity: .85;
}
#loader > span {
  position: absolute;
  width: 150px;
  height: 150px;
}
#loader > span:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 25px;
  height: 25px;
  background-color: var(--accent);
  border-radius: 100%;
  animation: loader 1.2s infinite ease-in-out both;
}
#loader > span:nth-child(2)          {transform:rotate(30deg)}
#loader > span:nth-child(3)          {transform:rotate(60deg)}
#loader > span:nth-child(4)          {transform:rotate(90deg)}
#loader > span:nth-child(5)          {transform:rotate(120deg)}
#loader > span:nth-child(6)          {transform:rotate(150deg)}
#loader > span:nth-child(7)          {transform:rotate(180deg)}
#loader > span:nth-child(8)          {transform:rotate(210deg)}
#loader > span:nth-child(9)          {transform:rotate(240deg)}
#loader > span:nth-child(10)         {transform:rotate(270deg)}
#loader > span:nth-child(11)         {transform:rotate(300deg)}
#loader > span:nth-child(12)         {transform:rotate(330deg)}
#loader > span:nth-child(2)::before  {animation-delay:-1.1s}
#loader > span:nth-child(3)::before  {animation-delay:-1s}
#loader > span:nth-child(4)::before  {animation-delay:-.9s}
#loader > span:nth-child(5)::before  {animation-delay:-.8s}
#loader > span:nth-child(6)::before  {animation-delay:-.7s}
#loader > span:nth-child(7)::before  {animation-delay:-.6s}
#loader > span:nth-child(8)::before  {animation-delay:-.5s}
#loader > span:nth-child(9)::before  {animation-delay:-.4s}
#loader > span:nth-child(10)::before {animation-delay:-.3s}
#loader > span:nth-child(11)::before {animation-delay:-.2s}
#loader > span:nth-child(12)::before {animation-delay:-.1s}

/* Section */
section {
  position: relative;
  border-radius: var(--r);
  overflow: hidden;
  padding: var(--gap);
  scroll-margin-top: var(--gap);
}
section#loader {
  border-radius: 0;
}
@supports (scroll-margin-top: 0) {
  section {scroll-margin-top: var(--gap)}
}
section[beauty-t]::before,
section[beauty-b]::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  filter: blur(.25rem);
}
section[beauty-t]::before {background: var(--bg-gr-t)}
section[beauty-b]::after  {background: var(--bg-gr-b)}
header > section          {padding:0}
main > section[full]      {padding:var(--gap) 0}
main > section#info       {padding: var(--big-pad) max(var(--big-pad), 15vw) var(--gap)}

/* Sides */
[sides]::before, [sides]::after {
  position: absolute;
  content: "";
  background: linear-gradient(to right, var(--white) 20%, transparent 100%);
  height: 100%;
  width: calc(var(--gap) * 2);
  z-index: 1;
}
[sides]::before {
  left: 0;
  top: 0;
}
[sides]::after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

/* Text */
h1,h2,h3,h4,h5,h6 {
  font-family: 'El Messiri';
  line-height: 1.5;
  font-weight: 700;
}
h1 {font-size:  3.5rem}
h2 {font-size: 2.25rem}
h3 {font-size: 1.75rem}
h4 {font-size:  1.5rem}
h5 {font-size: 1.25rem}
h6 {font-size:    1rem}

hr {border:0; height:var(--gap-s)}
p.warn {padding: 0 max(var(--big-pad), 15vw) var(--gap-s)}

[strong] {
  font-size: 1.125rem;
  font-weight: 700;
}
b {font-weight: 700}
.q::before, .q::after {content:'"'}
.nw {white-space:nowrap}
.u {
  background-image: linear-gradient(to bottom, transparent 65%, var(--c3) 0);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* Link */
p a, li a {
  width: fit-content;
  border-bottom: var(--tiny) solid var(--accent);
  background-image: linear-gradient(var(--accent) 0%, var(--accent) 100%);
  background-repeat: repeat-y;
  background-size: 0% 0em;
  transition: var(--h-sec);
}
p a:hover, li a:hover {
  border-bottom-color: transparent;
  background-size: 100% 1em;
}
.ticker a {border-bottom-width:0}
#news a {
  border-bottom-color: transparent;
  border-image: var(--bg-gr-link);
  border-image-slice: 1;
  background-image: var(--bg-gr-link);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 100%;
  filter: saturate(5) brightness(.75) contrast(1.5);
}
#news a::after {
  display: none;
  font: var(--fa-font-solid);
  content: "\f101";
}
#news a > svg {
  font-size: .8rem;
  color: var(--accent);
  padding-inline: .25rem;
  vertical-align: middle;
  transition: var(--h-sec);
}
#news a:hover > svg {
  transform: rotate(-180deg);
}

/* Button */
button,
a.btn,
#fc button,
#fc .button-file {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  column-gap: var(--gap-s);
  min-width: var(--btn);
  width: fit-content;
  height: var(--btn);
  justify-items: center;
  align-items: center;
  padding-inline: var(--gap-s);
  border-radius: var(--r-s);
  background-size: 300% 100%;
  background-image: var(--btn-bg);
  box-shadow: 0 0 .5rem var(--grey);
  text-decoration: none;
  cursor: pointer;
  transition: var(--h-sec);
}
button[lite],
a.btn[lite],
#fc button.submit-button {
  height: calc(var(--btn) - var(--tiny) * 2);
  background: rgba(255,255,255,.85);
  box-shadow: 0 0 .5rem var(--c2);
}
button[lite]::before,
a.btn[lite]::before,
#fc button.submit-button::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  margin: calc(var(--tiny) * -1);
  border-radius: var(--r);
  background-size: 300% 100%;
  background-image: var(--btn-bg);
  filter: saturate(7.5);
  transition: var(--h-sec);
}
button:hover,
a.btn:hover,
button[lite]:hover::before,
a.btn[lite]:hover::before,
#fc button:hover,
#fc .button-file:hover,
#fc button.submit-button:hover::before {
  background-position: 100% 0;
}
button:focus,
a.btn:focus,
#fc button:focus,
#fc .button-file:focus {
  outline: none;
}
button[square],
a.btn[square] {
  aspect-ratio: 1 / 1;
  width: var(--btn);
  justify-content: center;
}
:not(figure) > :not(button):not(a.btn):has(+ button),
:not(figure) > :not(button):not(a.btn):has(+ a.btn) {
  margin-bottom: var(--gap-s);
}
#fc .submit-cover {height: var(--btn)}

/* Flex */
[flex] {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
}

/* Header bar */
header {padding-block: var(--gap-s)}
header > section {
  grid-template-columns: var(--logo) 1fr var(--logo);
  text-align: center;
  font-size: .7rem;
}

/* Navigation bar */
.nav-bar {
  position: absolute;
  display: flex;
  justify-content: space-between;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--gap);
  border-radius: var(--r);
  transition: var(--h-sec);
  z-index: 2;
}

/* Content */
main[poster]::before,
main[hero]::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 60%;
  z-index: -1;
  top: 0;
  filter: blur(.25rem);
}
main[poster]::before {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.5), #fff 70%),
    url('/img/test/cover-1.jpg')
    center -20dvw/cover no-repeat;
}
main[hero]::before {
  background: var(--bg-gr-t)
}
main[poster] > section:first-child,
main[hero] > section:first-child {
  min-height: calc(100dvh - var(--logo) - var(--gap-s) * 3);
  padding-bottom: var(--big-pad);
}

/* Modal */
dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  backdrop-filter: blur(.25rem);
  transition: var(--q-sec);
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}
dialog:target {
  pointer-events: all;
  opacity: 1;
}
dialog > .close-modal::before {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--grey);
  opacity: .85;
  cursor: url(https://artvstup.online/wp-content/themes/udu-wp/assets/fonts/fontawesome/xmark-solid.svg), auto;
  z-index: -1;
}

/* Figure */
figure {
  position: relative;
  padding: var(--gap);
  border-radius: var(--r);
  overflow: hidden;
  backdrop-filter: blur(.25rem);
}
figure::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: var(--bg-gr);
  opacity: .85;
  filter: blur(.25rem);
  transition: var(--h-sec);
}

/* Ticker */
.ticker {
  display: flex;
  gap: var(--gap);
}
.ticker > ul {
  display: flex;
  flex-shrink: 0;
  min-width: 100%;
  animation: ticker 60s infinite linear;
}
.ticker:hover > ul {
  animation-play-state: paused;
}

/* Formcraft */
#fc .form-page-content {
  margin-right: calc(var(--gap-s)* -1);
}
#fc .form-element-html {
  padding: 0 var(--gap-s) var(--gap-s) 0;
}
#fc .form-element-type-submit > .form-element-html {
  padding: 0 var(--gap-s) 0 0;
}
#fc .field-cover > span {
  padding-right: var(--gap-s);
}
#fc .main-label,
#fc .sub-label,
#fc th,
#fc .row-count,
#fc .customText-cover p {
  font-size: .8rem;
  font-style: normal;
  color: var(--black);
}
#fc .customText-cover p {
  font-size: .65rem;
  line-height: 1.5;
  text-align: center;
  margin: 0;
}
#fc .form-element-type-customText,
#fc .form-element-type-heading {
  top: 0 !important;
}
#fc .customText-cover {
  display: inline-block;
  padding: 0 max(var(--big-pad), 15vw);
}
#fc .main-label > span::after {
  color: var(--red);
  right: -10px;
}
#fc button,
#fc .button-file {
  color: var(--black);
  font-weight: normal;
  border: none;
}
#fc button.submit-button {
  font-size: inherit;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  padding-inline: var(--gap-s);
}
#fc button.add-tabular-row,
#fc .button-file {
  padding-block: 0;
}
#fc button.add-tabular-row {
  margin: var(--gap-s) var(--gap-s) 0 0;
  padding-block: 0;
}
#fc .button-file .icon-upload-cloud {display: none}
#fc button .spin-cover {
  font-size: inherit;
  right: auto;
  top: auto;
  margin: 0;
}
#fc th {
  background-color: transparent;
  line-height: 1.5;
  border: none;
  padding: calc(var(--gap-s) / 2)  var(--gap-s) 0;
}
#fc td {
  border: var(--tiny) solid transparent;
}
#fc td:last-child span {
  color: var(--white);
  background-color: var(--red);
  right: calc(50% - 8px);
}
#fc input[type=color],
#fc input[type=date],
#fc input[type=datetime-local],
#fc input[type=datetime],
#fc input[type=email],
#fc input[type=month],
#fc input[type=number],
#fc input[type=password],
#fc input[type=search],
#fc input[type=tel],
#fc input[type=text],
#fc input[type=time],
#fc input[type=url],
#fc input[type=week],
#fc select,
#fc textarea {
  padding: calc(var(--gap-s) / 2)  var(--gap-s);
  border-radius: var(--r-s);
  border: var(--tiny) solid var(--grey) !important;
  background-color: var(--white);
  color: var(--black);
  line-height: 1.5;
}
#fc input[type="password"]:focus,
#fc input[type="email"]:focus,
#fc input[type="tel"]:focus,
#fc input[type="text"]:focus,
#fc textarea:focus,
#fc select:focus {
  border: var(--tiny) solid var(--grey) !important;
}
#fc input[type='text']:focus {
  box-shadow: none;
  background-color: var(--white);
}
#fc input[type="radio"]:checked,
#fc input[type="checkbox"]:checked {
  border-color: var(--blue);
  background: var(--blue);
}
#fc .checkbox-cover > span {
  top: .5rem;
}
#fc .checkbox-cover > div,
#fc .fileupload-cover > div,
#fc .matrix-cover > div,
#fc .star-cover > div {
  margin: 0;
  padding: var(--tiny);
  border: none;
}
#fc .checkbox-cover > div label {
  color: var(--black);
  padding: calc(var(--gap-s) / 2) var(--gap-s) calc(var(--gap-s) / 2) 0;
}
#fc .checkbox-cover > div label:not(:last-child) {
  padding: 0 var(--gap-s) calc(var(--gap-s) / 2) 0;
}
#fc .checkbox-cover > div label:last-child {
  padding: 0 var(--gap-s) 0 0;
}
#fc .error-field input[type=password],
#fc .error-field input[type=tel],
#fc .error-field input[type=text],
#fc .error-field select,
#fc .error-field textarea,
#fc .error-field .checkbox-cover > div,
#fc .error-field .fileupload-cover > div,
#fc .error-field .matrix-cover > div,
#fc .error-field .star-cover > div {
  border: var(--tiny) solid var(--red) !important;
  border-radius: var(--r-s);
}
#fc .fileupload-cover .files-list li div {
  height: 2rem;
  line-height: 2;
  padding: 0 var(--gap-s);
  background-color: var(--green);
  border: var(--tiny) solid var(--green);
  border-radius: var(--r-s);
}
#fc .fileupload-cover .files-list li {
  box-shadow: none;
  background-color: transparent;
}
#fc .fileupload-cover .files-list li .delete-file,
#fc .fileupload-cover .files-list li .icon-ok {
  color: var(--white);
  background-color: var(--green);
  border-radius: var(--r-r);
}
#fc .fileupload-cover .files-list li .delete-file {
  font-size: 1.2rem;
  top: .2rem;
  right: .2rem;
  padding: 0 .5rem;
}
#fc .error {
  top: 0;
  font-size: .7rem;
  line-height: 1.2;
  color: var(--red);
  background: none;
}
#fc .has-error {
  color: var(--red);
  padding-top: var(--gap-s);
}
#fc .final-success {
  color: var(--green);
  padding: 0;
}
#fc .final-success .final-success-check {
  border: var(--tiny) solid var(--green);
}

/* Responsive */
@media (height >= 700px) and (orientation: portrait) {
  main[poster] > section:first-child,
  main[hero] > section:first-child {
    min-height: 65dvh;
  }
}
@media (width >= 768px) {  }
@media (width >= 1024px) {  }

/* Animations */
@keyframes loader {
  0%, 39%, 100% {opacity:0}
  40%           {opacity:1}
}
@keyframes ticker {
  100% {transform: translateX(-100%)}
}