/*
Theme Name: Olympus
Theme URI: https://miocommerce.com/
Author: MioCommerce 
Author URI: https://miocommerce.com/
Description: MioCommerce Olypus block theme.
Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, full-site-editing, one-column, template-editing, threaded-comments, translation-ready, wide-blocks
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0.7
Text Domain: olympus
*/

/* Helpers
---------------------------------------- */
.f-shrink-0 {
  flex-shrink: 0;
}

/* Defaults
---------------------------------------- */

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

html {
  scroll-behavior: smooth;
}

main {
  overflow-x: hidden;
}

a,
button,
input:focus,
input[type="button"],
input[type="submit"],
textarea:focus,
.wp-element-button {
  transition: all 0.2s ease-in-out;
}

a,
a:focus,
a:hover,
a:not(.wp-element-button) {
  text-decoration-thickness: 1px;
}

b,
strong,
th {
  font-weight: var(--wp--custom--font-weight--medium);
}

.wp-admin .orphic-motion-animation{
	visibility: visible;
}

.wp-block-image img {
  vertical-align: middle;
}

html:not([data-scroll="0"]) .wp-site-blocks > header.wp-block-template-part {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  z-index: 99;
}

@media (max-width: 950px) {
  .wp-site-blocks > header.wp-block-template-part {
    position: relative;
    z-index: 9999;
  }

  html:not([data-scroll="0"]) .wp-site-blocks > header.wp-block-template-part {
    z-index: 9999;
  }
}

html:not([data-scroll="0"])
  .admin-bar
  .wp-site-blocks
  > header.wp-block-template-part {
  top: 32px;
}

.wp-site-blocks > .entry-content {
  margin-top: 0;
}

/* -- Forms -- */

input,
select,
textarea {
  background-color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--contrast);
  border-radius: 0;
  color: var(--wp--preset--color--contrast);
  font-family: var(--wp--preset--font-family--primary);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: var(--wp--custom--font-weight--light);
  line-height: var(--wp--custom--line-height--body);
  padding: 10px 20px;
  width: 100%;
}

input:focus,
textarea:focus {
  background-color: var(--wp--preset--color--neutral);
  outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
  width: auto;
}

input[type="button"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="text"],
textarea {
  -webkit-appearance: none;
}

::placeholder {
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--small);
  opacity: 0.5;
}

/* Blocks
---------------------------------------- */

/* -- Code -- */

*:not(.wp-block-code) > code {
  background-color: var(--wp--preset--color--neutral);
  font-size: var(--wp--preset--font-size--small);
  padding: 5px 8px;
}

/* -- Navigation -- */

.wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--wp--custom--spacing--gap);
}

.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
  padding-top: var(--wp--custom--spacing--gap);
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
  border: 1px solid currentColor;
  padding: 2px;
}

.has-background .wp-block-navigation__responsive-container-open:focus,
.has-background .wp-block-navigation__responsive-container-open:hover {
  color: var(--wp--preset--color--base);
}

/* -- Navigation Submenu -- */

.wp-block-navigation:not(.has-background)
  .wp-block-navigation__submenu-container {
  background-color: var(--wp--preset--color--contrast);
  border: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
  padding: 10px;
}

.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
  padding: 2px 10px;
}

/* -- Buttons -- */
/* By default the buttons have an arrow that matches the text color. We provide a block variation for a button without an arrow */
.wp-block-button:not(.is-style-no-arrow-button) .wp-block-button__link:after {
  width: 20px;
  height: 16px;
  margin-left: 16px;
  margin-right: 4px;
  display: inline-block;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath class='fa-secondary' opacity='.4' d=''/%3E%3Cpath class='fa-primary' d='M507.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-144-144c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L457.4 240 16 240c-8.8 0-16 7.2-16 16s7.2 16 16 16l441.4 0L340.7 388.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l144-144z'/%3E%3C/svg%3E")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath class='fa-secondary' opacity='.4' d=''/%3E%3Cpath class='fa-primary' d='M507.3 267.3c6.2-6.2 6.2-16.4 0-22.6l-144-144c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L457.4 240 16 240c-8.8 0-16 7.2-16 16s7.2 16 16 16l441.4 0L340.7 388.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0l144-144z'/%3E%3C/svg%3E")
    no-repeat 50% 50%;
  -webkit-mask-size: cover;
  mask-size: cover;
  background-color: currentColor;
  vertical-align: middle;
  transition: all 200ms ease;
}

.wp-block-button:not(.is-style-no-arrow-button)
  .wp-block-button__link:hover:after {
  margin-left: 20px;
  margin-right: 0px;
}

/* Others
---------------------------------------- */
.service-tags-container {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.service-tags-container.floating {
  position: absolute;
  top: -15px;
  left: 0;
  z-index: 36;
  justify-content: flex-end;
}
.service-tags-container.left {
  justify-content: flex-start;
}
.service-tag {
  padding: 2px 10px;
  border-radius: 15px;
  font-size: 0.8em;
  margin: 0 10px 0 0;
  text-decoration: none;
}

.service-tags-container.left .service-tag {
  margin: 0 0 0 10px;
}

/* Media Queries
---------------------------------------- */

@media only screen and (max-width: 600px) {
  /* -- Utility -- */

  .is-style-hidden-mobile {
    display: none !important;
  }
}

@media only screen and (max-width: 782px) {
  /* -- Columns -- */

  .is-style-columns-reverse {
    flex-direction: column-reverse;
  }
}

@media (min-width: 1056px) {
  .hide-on-desktop:not(.wp-block) {
    display: none !important;
  }
}

@media (max-width: 1055px) {
  .hide-on-tablet:not(.wp-block) {
    display: none !important;
  }
}

@media (max-width: 599px) {
  .hide-on-mobile:not(.wp-block) {
    display: none !important;
  }
}