/*
Theme Name: MagicYule
Theme URI: https://magicyule.it/
Author: MagicYule
Description: Custom presentation theme for the MagicYule platform.
Version: 0.1.0
Text Domain: magicyule
*/

:root { --my-shadow: 0 18px 50px rgba(16, 28, 58, .09); --my-line: rgba(62, 112, 183, .18); }
html { scroll-behavior: smooth; }
body { overflow-wrap: break-word; }
a { text-underline-offset: .2em; text-decoration-thickness: .08em; }
a:hover { color: var(--wp--preset--color--gold); }
:where(a, button, input, textarea, select, summary):focus-visible { outline: 3px solid var(--wp--preset--color--gold); outline-offset: 3px; }

.magicyule-site-alerts { background: var(--wp--preset--color--ivory); border-bottom: 1px solid var(--my-line); box-sizing: border-box; color: var(--wp--preset--color--ink); padding: .8rem max(1rem, 4vw); }
.magicyule-site-alerts__inner { display: grid; gap: .75rem; margin-inline: auto; max-width: 1180px; }
.magicyule-site-alert { border-left: 4px solid var(--wp--preset--color--gold); padding: .25rem 0 .25rem 1rem; }
.magicyule-site-alert__title { color: var(--wp--preset--color--night); font-weight: 700; margin: 0 0 .2rem; }
.magicyule-site-alert__content > :first-child { margin-top: 0; }
.magicyule-site-alert__content > :last-child { margin-bottom: 0; }

.site-header { background: linear-gradient(135deg, #101c3a 0%, #182a50 72%, #203761 100%); box-sizing: border-box; color: #fff; padding: .8rem max(1rem, 4vw); position: relative; z-index: 20; }
.site-header__inner { max-width: 1180px; margin-inline: auto; gap: 1.5rem; }
.site-header .wp-block-site-title { margin: 0; font: 400 clamp(1.1rem, 2vw, 1.45rem)/1 Georgia, serif; letter-spacing: .06em; }
.site-header .wp-block-site-title a { color: #fff; display: inline-grid; grid-template-columns: clamp(72px, 9vw, 108px) auto; align-items: center; gap: .7rem; text-decoration: none; }
.site-header .wp-block-site-title a::before { background: url(assets/images/magicyule-logo.png) center/contain no-repeat; content: ""; display: block; aspect-ratio: 3 / 2; width: 100%; }
.site-header .wp-block-navigation, .site-header .wp-block-navigation a { color: #fff; }
.site-header .wp-block-navigation a { text-decoration: none; text-underline-offset: .45rem; }
.site-header .wp-block-navigation a:hover { color: #dce9f5; text-decoration: underline; }
.site-header .wp-block-navigation__responsive-container.is-menu-open { background: #101c3a; color: #fff; padding: 2rem; }
.site-header .wp-block-navigation__responsive-container-open, .site-header .wp-block-navigation__responsive-container-close { color: currentColor; }

.site-main { margin-block: 0; padding-block: clamp(2.5rem, 6vw, 5rem); }
.site-main > :first-child { margin-block-start: 0; }
.my-page-shell { background: #fff; border: 1px solid var(--my-line); border-radius: 24px; box-shadow: var(--my-shadow); padding: clamp(1.5rem, 5vw, 4rem); }
.my-eyebrow { color: var(--wp--preset--color--gold); font-size: .78rem; font-weight: 700; letter-spacing: .16em; margin-bottom: .65rem; text-transform: uppercase; }
.my-intro { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--large); max-width: 42rem; }

.homepage { max-width: none !important; padding: 0; }
.homepage-slot { box-sizing: border-box; padding: clamp(3.5rem, 8vw, 7rem) max(1rem, 4vw); }
.homepage-slot > * { max-width: 1180px; margin-inline: auto; }
.homepage-slot h2 { max-width: 760px; }
.homepage-slot:nth-child(odd) { background: #fff; }
.homepage-slot:nth-child(even) { background: linear-gradient(135deg, #eef4f9, #fbf8f1); }
.homepage-slot--hero { background: radial-gradient(circle at 82% 18%, rgba(62,112,183,.34), transparent 32%), linear-gradient(135deg, #101c3a, #182a50 68%, #274570) !important; color: #fff; min-height: clamp(360px, 58vw, 640px); display: grid; align-items: center; }
.homepage-slot--hero h1 { color: #fff; margin-bottom: 1rem; max-width: 850px; }
.homepage-slot--hero .my-eyebrow { color: #e3c78f; }
.homepage-slot--hero p { color: #dce9f5; max-width: 42rem; }
.homepage-slot--olistipedia { background: linear-gradient(145deg, #182a50, #101c3a) !important; color: #fff; }
.homepage-slot--olistipedia h2 { color: #fff; }
.homepage-slot--newsletter { border-top: 1px solid var(--my-line); }

.my-section-grid { align-items: stretch; }
.my-panel, .wp-block-post-template > li, .wc-block-grid__product, .woocommerce ul.products li.product { background: #fff; border: 1px solid var(--my-line); border-radius: 18px; box-shadow: 0 10px 30px rgba(16,28,58,.06); padding: clamp(1.25rem, 3vw, 2rem); }
.my-panel h2, .my-panel h3 { margin-top: 0; }
.wp-block-post-template { gap: 1.5rem; }
.wp-block-post-template > li { list-style: none; }
.wp-block-post-title a { color: var(--wp--preset--color--night); text-decoration: none; }
.wp-block-post-title a:hover { color: var(--wp--preset--color--celestial); }

input:not([type="checkbox"]):not([type="radio"]), textarea, select { background: #fff; border: 1px solid #aab4c5; border-radius: 10px; box-sizing: border-box; color: #263147; font: inherit; max-width: 100%; padding: .75rem .9rem; width: 100%; }
input[type="file"] { padding: .65rem; }
textarea { resize: vertical; }
label { color: var(--wp--preset--color--night); display: inline-block; font-weight: 650; margin-bottom: .35rem; }
button, input[type="submit"], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .wc-block-components-button { background: var(--wp--preset--color--celestial); border: 0; border-radius: 999px; color: #fff; cursor: pointer; font: inherit; font-weight: 700; padding: .8rem 1.4rem; text-decoration: none; transition: background-color .2s ease, transform .2s ease; }
button:hover, input[type="submit"]:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .wc-block-components-button:hover { background: var(--wp--preset--color--night); color: #fff; transform: translateY(-1px); }

.woocommerce-message, .woocommerce-info, .woocommerce-error, .wc-block-components-notice-banner { background: #fff; border: 1px solid var(--my-line); border-left: 4px solid var(--wp--preset--color--celestial); border-radius: 10px; color: #263147; padding: 1rem 1.25rem; }
.woocommerce-error { border-left-color: #a63d49; }
.woocommerce table.shop_table, .wc-block-cart-items { background: #fff; border: 1px solid var(--my-line); border-collapse: separate; border-radius: 14px; overflow: hidden; }
.woocommerce table.shop_table th, .woocommerce table.shop_table td, .wc-block-cart-items th, .wc-block-cart-items td { border-color: var(--my-line); padding: .85rem; }
.woocommerce .price, .wc-block-components-product-price { color: var(--wp--preset--color--celestial); font-weight: 700; }
.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.woocommerce-MyAccount-navigation a { background: #fff; border: 1px solid var(--my-line); border-radius: 999px; display: block; padding: .55rem 1rem; text-decoration: none; }

.site-footer { background: #101c3a; box-sizing: border-box; color: #dce9f5; padding: clamp(2.5rem, 6vw, 4rem) max(1rem, 4vw); }
.site-footer__inner { max-width: 1180px; margin-inline: auto; }
.site-footer .wp-block-site-title { font-family: var(--wp--preset--font-family--display); margin: 0; }
.site-footer .wp-block-site-title, .site-footer a { color: #fff; }

@media (max-width: 900px) {
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
  .site-header .wp-block-navigation__responsive-container-open { display: flex; }
  .site-header__inner { align-items: center; flex-wrap: nowrap !important; }
  .site-header .wp-block-site-title a { grid-template-columns: 68px auto; }
  .site-main { padding-block: 2.5rem; }
  .my-page-shell { border-radius: 18px; padding: 1.35rem; }
  .homepage-slot { padding-block: 3.5rem; }
  .woocommerce table.shop_table { display: block; max-width: 100%; overflow-x: auto; }
}

@media (max-width: 480px) {
  .site-header .wp-block-site-title a { grid-template-columns: 58px auto; font-size: 1rem; gap: .4rem; }
  .homepage-slot--hero { min-height: 410px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }