/*
Theme Name: Twenty Twenty-Four Purple Clouds
Template: twentytwentyfour
*/

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

html {
  color-scheme: dark;

  &:focus-within {
    scroll-behavior: smooth;
  }
}

:root {

    --background-dark: #060b07;
    --text-light: #fff;
    --text-muted: #ccc;
    --gradient-primary: linear-gradient(65deg, #ae48e5 0%, #5548e5 100%);
    --gradient-hover: linear-gradient(65deg, rgba(180, 72, 235, 1) 0%, rgba(100, 72, 235, 1) 100%);
    --gradient-button: linear-gradient(65deg, rgb(174, 72, 229) 0%, rgb(85, 72, 229) 100%);
    --gradient-button-hover: linear-gradient(65deg, rgb(180, 72, 235) 0%, rgb(100, 72, 235) 100%);
    --font-family: "Rubik", sans-serif;
    --font-size-base: 1.25rem;
    --font-size-title: 2.5em;
    --font-size-small: 1rem;
    --padding-base: 1rem;
    --transition-fast: .3s;
    --parallax-margin-top-default: 40svh;
    --parallax-margin-top-offset: 3.5rem;
}

header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 2000;
    height: 5svh;
    width: 100%;
    padding-block: 1rem;
    margin-bottom: -20svh;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0);
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 2rem;
}

header.wp-block-template-part::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--gradient-primary);
    z-index: -1;
    opacity: 0;
    transition: opacity var(--transition-fast) linear;
}

header.wp-block-template-part.scrolled::after {
    opacity: 1;
}

header.scrolled {
    box-shadow: 0 5px 12px rgba(0, 0, 0, .5);
}

header.wp-block-template-part > .wp-block-group {
    padding-top: 17px !important;
    padding-bottom: 0 !important;
}

.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
    text-decoration: none;
    font-style: normal;
}

.wp-block-navigation .wp-block-navigation-item {
    padding: .3rem .55rem;
    opacity: .8;
    transition: .5s all;
    border-bottom: 3px solid transparent;
    text-transform: uppercase;

    color: white;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.69px;
    font-size: 1.15rem;
    font-family: var(--font-family) !important;
}

.wp-block-navigation .wp-block-navigation-item:hover, 
.wp-block-navigation .wp-block-navigation-item.active,
.wp-block-navigation-item.current-menu-item {
    border-color: #ad00ff !important;
}

.wp-site-blocks header + div,
.wp-site-blocks header + main {
    padding-top: 11rem !important;
}

.wp-site-blocks > header > div {
    justify-content: space-evenly;
}

.wp-site-blocks > header > div > div:first-child {
    display: none !important;
}

.wp-site-blocks > footer {
    width: 90svw;
    margin: 2rem auto;
    padding-top: 2rem;
    border-top: 4px solid #9943d0;
}

.wp-site-blocks > footer p.has-text-align-right {
    font-size: 0.6rem;
    opacity: 0.5;
}

:where(.wp-site-blocks *:focus) {
    outline-width: 0px;
    outline-style: none;
}

h1 {
    font-family: "Rubik-Italic", sans-serif;
    color: var(--text-light) !important;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 100%;
    text-transform: uppercase;
    text-align: center;
    font-style: italic;

    padding-top: 1rem;
    padding-bottom: 1rem;
    z-index: 3;
    position: relative;
    
    width: auto;
    width: calc-size(fit-content, size + 7rem);
    white-space: nowrap;
    margin: 0 auto;
}

h1::before {
    content: "";
    width: 4rem;
    position: absolute;
    height: 3px;
    background: #ac48e5;
    left: -15%;
    margin-top: 1.4rem;
    z-index: -1;
    filter: drop-shadow(0px 0px 4px rgba(255, 255, 200, 0.3));
}

h1::after {
    content: "";
    width: 4rem;
    position: absolute;
    height: 3px;
    background: #5748e4;
    right: -15%;
    margin-top: 1.4rem;
    z-index: -1;
    filter: drop-shadow(0px 0px 4px rgba(255, 255, 200, 0.3));
}

:root :where(.wp-element-button, .wp-block-button__link) {
    background: none;
    font-size: 18px !important;
    font-family: var(--font-family) !important;
}

main button,
.wp-site-blocks > header + div .wp-block-button,
.home :where(.wp-element-button, .wp-block-button__link),
.wp-block-woocommerce-empty-cart-block .wp-block-button {
    font-style: italic !important;
    text-transform: uppercase !important;
    background: var(--gradient-button) !important;
    padding: 1em 2em !important;
    border: 0 !important;
    border-radius: 0.125em !important;
    cursor: pointer !important;
    transition: .5s all;
    z-index: 1000;
    position: relative;
    opacity: 0.9;
    font-size: 18px !important;
    font-weight: 900 !important;
    font-family: var(--font-family) !important;
}

main button:hover,
.wp-site-blocks > header + div .wp-block-button:hover,
.home :where(.wp-element-button, .wp-block-button__link):hover {
    background: var(--gradient-button-hover) !important;
    opacity: 0.96;
}

main button.has-small-font-size,
.wp-site-blocks > header + div .wp-block-button.has-small-font-size {
    font-size: 18px !important;   
}

.front-main-image {
    padding: 0 !important;
    margin-top: -5.5rem !important;
}

.wc-block-components-drawer__screen-overlay,
.wc-block-components-drawer,
:where(.wp-block-woocommerce-mini-cart-contents),
.wp-block-woocommerce-empty-mini-cart-contents-block {
    background-color: transparent !important;
}

div:where(.wp-block-woocommerce-mini-cart-contents) {
    background-color: rgba(6, 11, 7, 0.9) !important;
}

.wc-block-components-button.wc-block-components-drawer__close {
    margin: 0;
}

select {
    padding: 0.5rem;
}

.wp-block-button.wc-block-components-product-button.align-center.wp-block-woocommerce-product-button.has-small-font-size:not([data-block-name='woocommerce/product-button']) {
    max-height: 3rem;
    max-width: fit-content;
}

.home button.wp-block-button__link.wp-element-button.wc-block-components-product-button__button.add_to_cart_button.ajax_add_to_cart.product_type_simple.has-font-size.has-small-font-size.has-text-align-center.wc-interactive,
.wp-block-woocommerce-product-details + .wp-block-woocommerce-product-collection button.wp-block-button__link.wp-element-button.wc-block-components-product-button__button.add_to_cart_button.ajax_add_to_cart.product_type_simple.has-font-size.has-small-font-size.has-text-align-center.wc-interactive {
    background: none !important;
    width: auto;
    padding: 0;
    margin: -1.69rem;
    white-space: nowrap;
    display: inline-block;
}

h3.wp-block-post-title > a {
    color: var(--text-light);
}

.wc-block-product h3.has-text-align-center.wp-block-post-title {
    min-height: 3rem;
}