/* ___________________________________________________________________________  
    
    This CSS is for Gutenberg editor
    
    List of usable CSS classes:
    
    BUTTONS
    .wp-element-button
      .is-style-outline
      .is-style-link
    
    FONT SIZES
    .has-[SIZE]-font-size

    TEXT COLOR
    .has-[COLOR]-color
    
    BACKGROUND COLOR
    .has-[COLOR]-background-color
    
    IMAGE
    .has-align-center
    .no-shrink
    
    LISTS (ul, ol)
    .is-style-no-bullets
    .is-style-checkmark
    
    ALIGNMENTS
    .has-text-align-center
    .is-content-justification-center 
    .no-wrap
    
    ICONS
    + icon-plus         - icon-minus          i icon-info           x icon-close       
    ← icon-arrow-left   → icon-arrow-right    ⌃ icon-arrow-up       ⌄ icon-arrow-down   
    ✎ icon-edit         ✓ icon-check         » icon-double-arrow
    
    CARD
    .card
    
    GRIDS
    .is-layout-grid
    .is-layout-list
    
    VISIBILITY
    .only-on-desktop
    .only-on-tablet
    .only-on-mobile
    .hide-on-mobile
    
    STACKS
    .stack-on-600
    
 ______________________________________________________________________________ */


/* === Fonts === */
@font-face { 
  font-family: 'icons';                   /* Generated icon font */
  src:  url('fonts/icons.woff2') format('woff2'),
        url('fonts/icons.svg') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

body, input, label, textarea, button {
  font-family: 'inter', Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6, summary {
  font-family: 'inter', Helvetica, sans-serif;
}

code, pre {
  font-family: monospace;
  display: inline-block;
}

/* === Box Model === */

*, *:after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* === HTML === */

html {
  scroll-behavior: smooth;
}

body {
  font-size: 1rem;
  font-style: normal;
  color: var(--wp--preset--color--black);
  font-weight: var(--wp--custom--font-weight--default);
  line-height: var(--wp--custom--line-height--default);
  background: var(--wp--preset--color--white);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-feature-settings: 'liga' on;
  margin: 0;
  width: 100vw;
  max-width: 100vw;
  overflow-x: clip;
}

/**
 * Typography
 * --------------------------------------------------------------------------- */

a {
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  transition: all var(--wp--custom--animation-speed);
}

a h1, a h2, a h3, a h4, a h5, a h6, a p {
  color: initial;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .has-text-color a {
  color: inherit;
}

a svg {
  flex-shrink: 0;
  transition: all var(--wp--custom--animation-speed);
}

/* === Headings === */

h1, h2, h3, h4, h5, h6, summary {
  font-weight: var(--wp--custom--font-weight--bold);
  line-height: var(--wp--custom--line-height--heading);
  letter-spacing: var(--wp--custom--letter-spacing--heading);
  margin: var(--wp--preset--spacing--12) 0 var(--wp--preset--spacing--8);
  scroll-margin-top: var(--wp--custom--gap);
  color: inherit;
}

h1, .has-h-1-font-size {
  font-size: var(--wp--preset--font-size--h-1);
}

h2, .has-h-2-font-size {
  font-size: var(--wp--preset--font-size--h-2);
}

h3, summary, .has-h-3-font-size {
  font-size: var(--wp--preset--font-size--h-3);
}

h4, .has-x-large-font-size {
  font-size: var(--wp--preset--font-size--x-large);
}

h5, .has-large-font-size {
  font-size: var(--wp--preset--font-size--large);
  line-height: var(--wp--custom--line-height--default);
}

h6, .has-medium-font-size {
  font-size: var(--wp--preset--font-size--medium);
  line-height: var(--wp--custom--line-height--default);
}

/* === Paragraphs === */

p {
  margin: var(--wp--preset--spacing--8) 0 0;
}

p:empty {
  display: none;
}

.no-wrap {
  white-space: nowrap;
}

/* === Lists === */

ul {
  padding-left: var(--wp--preset--spacing--24);
  list-style-type: disc;
  margin: 0;
}

ol {
  padding-left: var(--wp--preset--spacing--24);
  margin: 0;
}

ol ol, ul ul, ol ul, ul ol {
  padding-bottom: 0;
  list-style-type: inherit;
}

li::marker {
  color: var(--wp--preset--color--primary);
}

address, dl {
  margin: var(--wp--preset--spacing--8) 0 0;
  font-style: normal;
}
address p {
  margin-top: 0;
}

.wp-block-list .wp-block-list {
  padding-top: var(--wp--preset--spacing--8);
  padding-bottom: var(--wp--preset--spacing--12);
}

.is-style-no-bullets {
  list-style: none;
  padding-left: 0;
}

.is-style-checkmark {
  list-style: none;
  padding-left: var(--wp--preset--spacing--32);
}
.is-style-checkmark li {
  position: relative;
  margin: var(--wp--preset--spacing--12) 0;
}
.is-style-checkmark li::before {
  content: '\2713';
  font-family: "icons";
  position: absolute;
  display: grid;
  place-content: center;
  width: var(--wp--preset--spacing--24);
  height: var(--wp--preset--spacing--24);
  left: calc(0rem - var(--wp--preset--spacing--32));
  font-size: var(--wp--preset--spacing--20);
  top: 0;
  border-radius: 50%;
}
.is-style-checkmark li.has-medium-font-size::before,
.is-style-checkmark li:has(.has-medium-font-size)::before,
.is-style-checkmark li.has-large-font-size::before,
.is-style-checkmark li:has(.has-large-font-size)::before { 
  top: 0.125em;
}
.is-style-checkmark li.has-x-large-font-size::before,
.is-style-checkmark li:has(.has-x-large-font-size)::before { 
  top: 0.25em;
}
.is-style-checkmark li.has-h-3-font-size::before,
.is-style-checkmark li:has(.has-h-3-font-size)::before { 
  top: 0.5em;
}


/* === Icons === */

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "icons";
  font-style: normal;
  font-weight: normal;
  speak: never;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-plus:before { content: '\2b'; }                  /* '+' */
.icon-minus:before { content: '\2d'; }                 /* '-' */
.icon-info:before { content: '\69'; }                  /* 'i' */
.icon-close:before { content: '\78'; }                 /* 'x' */
.icon-double-arrow:before { content: '\bb'; }          /* '»' */
.icon-arrow-left:before { content: '\2190'; }          /* '←' */
.icon-arrow-right:before { content: '\2192'; }         /* '→' */
.icon-arrow-up:before { content: '\2303'; }            /* '⌃' */
.icon-arrow-down:before { content: '\2304'; }          /* '⌄' */
.icon-edit:before { content: '\270e'; }                /* '✎' */
.icon-check:before { content: '\2713'; }               /* '✓' */


/**
 * Accordions
 * --------------------------------------------------------------------------- */

details {
  border-bottom: 1px solid var(--wp--preset--color--black);
  padding-bottom: var(--wp--preset--spacing--56);
  counter-increment: accordion;
  padding-left: var(--wp--preset--spacing--56);
}

details summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: var(--wp--preset--spacing--56) 0 0;
  margin-left: -3rem;
}

details summary::before {
  content: counter(accordion, decimal-leading-zero) '.';
  color: var(--wp--preset--color--primary);
  font-size: initial;
  line-height: 1;
  width: 3rem;
}


/**
 * Blockquotes
 * --------------------------------------------------------------------------- */

.wp-block-quote {
  border-top: 1px solid var(--wp--preset--color--black);
  border-bottom: 1px solid var(--wp--preset--color--black);
  padding: var(--wp--preset--spacing--56) var(--wp--preset--spacing--56);
  margin: var(--wp--preset--spacing--56) 0;
}

/**
 * Tables
 * --------------------------------------------------------------------------- */

table {
  width: 100%;
  border-collapse: collapse;
}

caption {
  padding: var(--wp--preset--spacing--56) var(--wp--preset--spacing--56);
}

td, th {
  padding: var(--wp--preset--spacing--16) 0;
  border-bottom: 1px solid var(--wp--preset--color--black);
  text-align: initial;
}

/**
 * Embedds
 * --------------------------------------------------------------------------- */

iframe {
  width: 100%;
  margin: 0;
}

.wp-block-embed.is-type-video {
  position: relative;
  height: 0;
  padding-bottom: 56.25%; /*16:9*/
}
.wp-block-embed.is-type-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.wp-block-embed.is-type-video.alignwide, .wp-block-embed.is-type-video.alignfull {
  padding-bottom: calc(56.25% + 20%); /*16:9*/
}

/**
 * Alignments
 * --------------------------------------------------------------------------- */

.alignwide {
  margin-left: calc(0px - var(--site-padding, var(--wp--preset--spacing--56)));
  margin-right: calc(0px - var(--site-padding, var(--wp--preset--spacing--56)));
  width: var(--wp--style--global--wide-size);
  max-width: var(--wp--style--global--wide-size);
}
 
.alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  border-radius: 0 !important;
}

.is-content-justification-center {
  justify-content: center;
  align-items: center;
}

/**
 * Separators
 * --------------------------------------------------------------------------- */

/* Basic line */

hr {
  border-bottom: 0 !important;
  border-top: 1px solid var(--wp--preset--color--black);
}

/**
 * Images
 * --------------------------------------------------------------------------- */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  display: block;
  max-width: 100%;
  margin: 0;
}

.wp-block-image.is-style-overlaid {
  position: relative;
}
.wp-block-image.is-style-overlaid::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.25);
}

.wp-block-image figcaption {
  width: var(--wp--style--global--content-size);
  max-width: 100%;
  margin: var(--wp--style--block-gap) auto 0;
  font-size: inherit;
}

.wp-block-post-featured-image {
  height: 20em;
  border-radius: var(--wp--custom--radius--default);
  overflow: hidden;
  flex-shrink: 0;
}
.wp-block-post-featured-image a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.wp-block-post-featured-image img {
  object-fit: cover;
  max-width: unset;
  width: auto;
  height: 100%;
  flex: 1;
}
@media screen and (max-width: 1080px) {
  .wp-block-post-featured-image {
    max-height: 50vw;
  }
}

.has-align-center {
  margin-left: auto;
  margin-right: auto;
}
.no-shrink {
  flex-shrink: 0;
}


/**
 *  Buttons
 * --------------------------------------------------------------------------- */

button {
  transition: all var(--wp--custom--animation-speed);
}

input[type='submit'], .button, 
.wp-element-button, .wp-block-button__link, .wp-block-button .wp-block-button__link,  /* gutenberg */
a.xcp-btn, a.xcp-btn.xoo-cp-btn-ch,                                                   /* plugin: add to cart */ 
.forminator-button,                                                                   /* plugin: forminator */ 
.wc-block-checkout__form button                                                             /* plugin: woocommerce */ 
{
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  border: 0;
  border-radius: var(--wp--custom--radius--default);
  cursor: pointer;
  display: flex;
  font-size: inherit;
  font-weight: var(--wp--custom--font-weight--bold);
  padding: var(--wp--preset--spacing--16) var(--wp--preset--spacing--40);
  line-height: var(--wp--custom--line-height--button);
  text-decoration: none;
  width: auto;
  align-items: center;
  gap: var(--wp--preset--spacing--8);
  white-space: nowrap;
  flex-shrink: 0;
  justify-content: center;
  margin: 0;
}
input[type='submit']:hover, input[type='submit']:focus,
.wp-element-button:hover, .wp-element-button:focus,
.button:hover, .button:focus,
.forminator-button:hover, .forminator-button:focus  {
  background-color: var(--wp--preset--color--black) !important;
}

.wp-block-buttons .is-style-outline {
  color: var(--wp--preset--color--primary);
}
.is-style-outline .wp-element-button,
.is-style-outline.wp-element-button,
a.xcp-btn.xoo-cp-btn-vc, a.xcp-btn.xoo-cp-close {
  background-color: transparent;
  color: var(--wp--preset--color--primary);
  outline: 2px solid;
  outline-color: inherit;
  outline-offset: -2px;
}
.is-style-outline .wp-element-button:hover,
.is-style-outline.wp-element-button:hover {
  color: var(--wp--preset--color--black) !important;
  background-color: transparent !important;
}

.is-style-link .wp-element-button,
.is-style-link.wp-element-button {
  border: 0;
  background-color: transparent;
  color: var(--wp--preset--color--primary);
  justify-content: flex-start;
  padding: 0;
}
.is-style-link .wp-element-button::after,
.is-style-link.wp-element-button::after {
  content: '→';
  font-family: "icons";
}
.is-style-link .wp-element-button:hover,
.is-style-link.wp-element-button:hover {
  color: var(--wp--preset--color--black);
  background-color: transparent !important;
}


/**
 * Containers & Columns
 * --------------------------------------------------------------------------- */

/* === Groups  === */


/* === Columns === */

.wp-block-column {
  word-break: normal;
  overflow-wrap: normal;
}

/* === Covers === */

.wp-block-cover, .wp-block-cover-image {
  min-height: 10em;
  margin-bottom: 0;
  border-radius: var(--wp--custom--radius--default);
}

.wp-block-cover .wp-block-columns {
  margin-bottom: 0;
}

/* === Download File === */

.wp-block-file, .wp-block-file:not(.wp-element-button) {
  font-size: var(--wp--preset--font-size--medium);
  background: white;
  padding: var(--wp--preset--spacing--56) var(--wp--preset--spacing--56);
  border-radius: var(--wp--custom--radius--default);
  margin-top: var(--wp--style--block-gap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: var(--wp--style--block-gap);
}
.wp-block-file__embed {
  flex: 100%;
  flex-shrink: 0;
}
.wp-block-file *+.wp-block-file__button {
  margin-left: 0;
}

/* === Grid layout === */

.is-layout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--wp--preset--spacing--24);
  padding: 0;
}
@media (max-width: 1080px) {
  .is-layout-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 781px) {
  .is-layout-grid {
    grid-template-columns: 1fr;
  }
}


/* === List layout (eg. search results) === */

.is-layout-list {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--24);
}

.is-layout-list .card {
  flex-direction: row;
  padding: var(--wp--preset--spacing--32);
  gap: var(--wp--preset--spacing--24);
}
.is-layout-list .card figure {
  height: 8rem;
  width: 12.5rem;
}
.is-layout-list .card section {
  padding: 0;
  gap: var(--wp--preset--spacing--12);
}
body.search-results .card .wp-block-buttons {
  display: none;
}
@media (max-width: 781px) {
  .is-layout-list .card figure {
    display: none;
  }
}

/* === Editor in Admin === */

@media (max-width: 1400px){ 
  .editor-post-title, .wp-block-post-content {
    padding: 0 2rem;
  }
}


/* ___________________________________________________________________________  
   
   RESPONSIVENESS - GENERAL
______________________________________________________________________________ */

.only-on-tablet { display: none; }
.only-on-mobile { display: none; }

/* === Large Desktop === */

@media screen and (max-width: 1440px) {
  body {
    
  }
}

/* === Smaller Desktop === */

@media screen and (max-width: 1280px) {
  
  /* smaller spacing */
  body {
    --wp--style--global--content-size: 100vw;
    --wp--style--global--wide-size: 100vw;
  }
  
  /* fullsize containers */
  .alignwide, 
  .alignfull {
    border-radius: 0;
    padding-left: var(--site-padding, var(--wp--preset--spacing--32));
    padding-right: var(--site-padding, var(--wp--preset--spacing--32));
  }
  .alignfull > .wrapper {       /* eg. entry-header */
    padding: 0;
  }

}

/* === Tablet === */

@media screen and (max-width: 1080px) {
  
  /* smaller typography */
  body {
    --wp--preset--font-size--h-1: 3.25em;
    --wp--preset--font-size--h-2: 2.25em;
    --wp--preset--font-size--x-large: 1.5em;
    --wp--preset--font-size--large: 1.25em;
    
    --wp--preset--spacing--56: 3rem;
    --wp--preset--spacing--64: 3.5rem;
    --wp--preset--spacing--80: 4rem;
    --wp--preset--spacing--120: 5rem;
    --wp--preset--spacing--160: 7.5rem;
  }
  
  /* reversed order in stacked columns */
  .stack-from-tablet {
    flex-direction: column;
  }
  .stack-from-tablet figure {
    display: flex !important;
    justify-content: center;
  }
  .reverse {
    flex-direction: reverse;
  }
  
  /* make spaces added via block editor smaller */
  .wp-block-spacer {
    max-height: var(--wp--preset--spacing--80) !important;
  }
  
  /* visibility */
  .only-on-desktop { display: none; }
  .only-on-tablet { display: block; }

}

/* === Mobile === */

/* WordPress mobile breakpoint - stacking columns */
@media screen and (max-width: 781px) {
  /* smaller type and spacing */
  body {
    font-size: 0.875rem;

    --wp--preset--font-size--h-1: 2.75em;
    --wp--preset--font-size--h-2: 2em;
    --wp--preset--font-size--small: 1em;
    --wp--preset--font-size--normal: 1.125em;
    
    --wp--preset--spacing--20: 1.125rem;
    --wp--preset--spacing--24: 1.25rem;
    --wp--preset--spacing--32: 1.5rem;
    --wp--preset--spacing--40: 1.75em;
    --wp--preset--spacing--56: 2rem;
    --wp--preset--spacing--64: 2.5rem;
    --wp--preset--spacing--80: 3rem; 
    --wp--preset--spacing--120: 4rem;
    --wp--preset--spacing--160: 5rem;
  }

  /* remove manual breaks from large text */
  h1 br, h2 br, h3 br, .has-large-font-size br, .has-x-large-font-size br {
    display: none;
  }
  
  /* column that contain only image go first */
  .wp-block-columns:not(.is-not-stacked-on-mobile) .wp-block-column:has(>.wp-block-image:only-child) {
    order: -1;
  }

  /* text aligned left */
  .has-text-align-right {
    text-align: initial;
  }
  .is-content-justification-right {
    justify-content: initial !important;
  }

  /* visibility */
  .hide-on-mobile { display: none !important; }
  .only-on-tablet { display: none; }
  .only-on-mobile { display: block; }
}

@media screen and (max-width: 600px) {
  /* stacks */
  .stack-on-600 {
    flex-direction: column;
  }
}

@media screen and (max-width: 480px) {
  body {
    font-size: 0.825rem;
  
    --wp--preset--font-size--h-1: 2.5em;
    
    --wp--custom--gap: 1.5em;
  }
  
  /* buttons stretch */
  .wp-block-buttons, .wp-block-button {
    width: 100%;
  }
  button, input[type='submit'], .button,
  .wp-element-button, .wp-block-button__link, 
  .wp-block-button .wp-block-button__link {
    width: 100%;
  } 
}

/* ___________________________________________________________________________  
   
   Fix for WP Admin
______________________________________________________________________________ */

.interface-interface-skeleton__sidebar, .interface-navigable-region, .interface-navigable-region interface-interface-skeleton__header {
  color: #3c434a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 13px;
  line-height: 1.4em;
  letter-spacing: initial;
}
.interface-complementary-area h2, .components-toggle-control__label {
  letter-spacing: initial;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
.components-toggle-control__label {
  font-weight: initial;
  font-size: inherit;
}