/*
Theme Name: Märjamaa Moosid
Theme URI: https://production.objektiiv.eu/
Author: Märjamaa Moosid
Description: Julge ja kaasaegne plokkteema Märjamaa moosidele.
Version: 2.1.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: marjamaa-moosid
*/

:root {
  --mm-ink: #171313;
  --mm-cream: #f5f2ea;
  --mm-pink: #e84767;
  --mm-lime: #c8f45d;
  --mm-radius: clamp(1.25rem, 3vw, 2.5rem);
  --mm-shadow-sm: 0 8px 24px rgba(42, 25, 29, .08), 0 2px 7px rgba(42, 25, 29, .05);
  --mm-shadow: 0 26px 70px rgba(42, 25, 29, .14), 0 8px 22px rgba(42, 25, 29, .07);
  --mm-shadow-dark: 0 30px 80px rgba(23, 19, 19, .24), 0 8px 24px rgba(23, 19, 19, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
::selection { color: #fff; background: var(--mm-pink); }
a { text-underline-offset: .2em; }
.wp-site-blocks { overflow: clip; }

.mm-announcement { position: relative; z-index: 60; letter-spacing: .14em; text-transform: uppercase; }
.mm-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(23,19,19,.08); background: rgba(245,242,234,.86) !important; box-shadow: 0 8px 30px rgba(23,19,19,.055); backdrop-filter: saturate(150%) blur(18px); -webkit-backdrop-filter: saturate(150%) blur(18px); }
.mm-brand-dot { width: .8rem; height: .8rem; display: inline-block; border-radius: 50%; background: var(--mm-pink); box-shadow: .7rem -.35rem 0 var(--mm-lime), 0 4px 12px rgba(232,71,103,.34); }
.mm-header .wp-block-navigation-item__content { padding: .45rem .15rem; }
.mm-header .wp-block-navigation-item__content::after { display: block; width: 0; height: 2px; border-radius: 9px; background: var(--mm-pink); content: ""; transition: width .2s ease; }
.mm-header .wp-block-navigation-item__content:hover::after { width: 100%; }

.mm-hero { position: relative; isolation: isolate; min-height: min(820px, calc(100vh - 110px)); display: flex; align-items: center; }
.mm-hero::before { position: absolute; z-index: -2; inset: 0; content: ""; background: radial-gradient(circle at 82% 19%, rgba(232,71,103,.21), transparent 28%), radial-gradient(circle at 14% 92%, rgba(200,244,93,.25), transparent 27%), linear-gradient(145deg, rgba(255,255,255,.34), transparent 52%); }
.mm-hero::after { position: absolute; z-index: -1; right: -7vw; top: 8%; width: min(38vw, 520px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 30px 90px rgba(232,71,103,.12); content: ""; filter: blur(.1px); }
.mm-hero-title { max-width: 1050px; text-wrap: balance; }
.mm-hero-title em { color: var(--mm-pink); font-style: normal; text-shadow: 0 10px 35px rgba(232,71,103,.18); }
.mm-kicker { display: inline-flex; align-items: center; gap: .65rem; padding: .55rem .85rem; border: 1px solid rgba(255,255,255,.62); border-radius: 99px; letter-spacing: .11em; text-transform: uppercase; background: rgba(255,255,255,.58); box-shadow: var(--mm-shadow-sm); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.mm-kicker::before { width: .55rem; height: .55rem; flex: 0 0 auto; border-radius: 50%; background: var(--mm-pink); box-shadow: 0 0 0 5px rgba(232,71,103,.11); content: ""; }
.mm-hero-copy { max-width: 580px; }
.mm-hero-orbit { position: relative; min-height: 390px; }
.mm-jar { position: absolute; display: grid; place-items: center; width: clamp(180px, 22vw, 300px); aspect-ratio: .82; border: 3px solid var(--mm-ink); border-radius: 18% 18% 34% 34%; color: #fff; background: linear-gradient(150deg, #ff8aa0 0%, #e84767 35%, #a80e3b 100%); box-shadow: 22px 28px 0 var(--mm-ink), 38px 46px 55px rgba(53,19,29,.27), inset 18px 12px 24px rgba(255,255,255,.20); transform: rotate(8deg); transition: transform .35s ease, box-shadow .35s ease; }
.mm-jar:hover { box-shadow: 17px 21px 0 var(--mm-ink), 30px 38px 45px rgba(53,19,29,.24), inset 18px 12px 24px rgba(255,255,255,.22); transform: translateY(7px) rotate(6deg); }
.mm-jar::before { position: absolute; top: -8%; width: 82%; height: 13%; border: 3px solid var(--mm-ink); border-radius: 9px; background: linear-gradient(180deg, #d9ff7c, var(--mm-lime)); box-shadow: inset 0 4px 0 rgba(255,255,255,.34); content: ""; }
.mm-jar::after { position: absolute; top: 48%; width: 76%; height: 33%; border: 2px solid var(--mm-ink); border-radius: 50%; background: linear-gradient(145deg, #fff, var(--mm-cream)); box-shadow: 0 10px 22px rgba(53,19,29,.15); content: ""; }
.mm-jar strong { z-index: 2; color: var(--mm-ink); font-family: var(--wp--preset--font-family--serif); font-size: clamp(1.1rem, 2vw, 1.65rem); line-height: .95; text-align: center; transform: rotate(-8deg); }
.mm-sticker { position: absolute; right: 0; bottom: 5%; z-index: 3; display: grid; place-items: center; width: 118px; aspect-ratio: 1; padding: 1rem; border: 1px solid rgba(23,19,19,.1); border-radius: 50%; color: var(--mm-ink); background: var(--mm-lime); box-shadow: 0 18px 40px rgba(23,19,19,.18), inset 0 2px 0 rgba(255,255,255,.55); font-size: .72rem; font-weight: 900; line-height: 1.15; letter-spacing: .08em; text-align: center; text-transform: uppercase; transform: rotate(9deg); }

.mm-section { position: relative; border-top: 1px solid rgba(23,19,19,.08); }
.mm-section-number { color: var(--mm-pink); font-weight: 900; letter-spacing: .12em; }
.mm-bento { align-items: stretch !important; }
.mm-card { position: relative; overflow: hidden; height: 100%; border: 1px solid rgba(23,19,19,.09); border-radius: var(--mm-radius); box-shadow: var(--mm-shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.mm-card::after { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(145deg, rgba(255,255,255,.25), transparent 42%); content: ""; }
.mm-card:hover { transform: translateY(-8px) rotate(-.4deg); box-shadow: var(--mm-shadow); }
.mm-card-icon { display: grid; place-items: center; width: 3.2rem; aspect-ratio: 1; border: 2px solid currentColor; border-radius: 50%; box-shadow: 0 7px 18px rgba(23,19,19,.10); font-size: 1.25rem; font-weight: 900; }
.mm-marquee { position: relative; z-index: 2; overflow: hidden; box-shadow: 0 10px 32px rgba(143,35,64,.18); white-space: nowrap; }
.mm-marquee p { width: max-content; animation: mm-scroll 22s linear infinite; }
@keyframes mm-scroll { to { transform: translateX(-50%); } }

.wp-block-post-template { gap: 1.5rem; }
.wp-block-post-template > li { overflow: hidden; border: 1px solid rgba(23,19,19,.09); border-radius: var(--mm-radius); background: #fff; box-shadow: var(--mm-shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.wp-block-post-template > li:hover { transform: translateY(-8px); box-shadow: var(--mm-shadow); }
.wp-block-post-template .wp-block-post-featured-image { overflow: hidden; }
.wp-block-post-template .wp-block-post-featured-image img { aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease; }
.wp-block-post-template > li:hover .wp-block-post-featured-image img { transform: scale(1.035); }
.wp-block-post-title a:hover { color: var(--mm-pink); }
.wp-block-post-date { letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }

.wp-block-button__link, .wp-element-button { border: 1px solid transparent; box-shadow: 0 7px 18px rgba(23,19,19,.12); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.wp-block-button__link:hover, .wp-element-button:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(23,19,19,.2); }
.wp-block-button.is-style-outline .wp-block-button__link { background: rgba(255,255,255,.30); backdrop-filter: blur(8px); }
.mm-button-lime .wp-block-button__link { color: var(--mm-ink) !important; background: var(--mm-lime) !important; box-shadow: 0 10px 26px rgba(117,151,38,.24), inset 0 2px 0 rgba(255,255,255,.5); }
.mm-dark-panel { position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: var(--mm-radius); box-shadow: var(--mm-shadow-dark); }
.mm-dark-panel::after { position: absolute; top: -45%; right: -12%; width: 45%; aspect-ratio: 1; border-radius: 50%; background: rgba(232,71,103,.14); content: ""; filter: blur(5px); }
.mm-dark-panel > * { position: relative; z-index: 1; }
.mm-footer { position: relative; border-top-left-radius: clamp(2rem, 6vw, 6rem); border-top-right-radius: clamp(2rem, 6vw, 6rem); box-shadow: 0 -18px 55px rgba(23,19,19,.12); }
.mm-footer a { color: inherit; }
.mm-footer .mm-kicker { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.13); box-shadow: none; }
.wp-block-quote { border-left: 4px solid var(--mm-pink); }

@media (max-width: 781px) {
  .mm-header { padding-top: .75rem !important; padding-bottom: .75rem !important; }
  .mm-hero { min-height: auto; text-align: left; }
  .mm-hero::after { right: -30vw; top: 28%; width: 90vw; }
  .mm-hero-orbit { min-height: 330px; margin-top: 2rem; }
  .mm-jar { left: 50%; transform: translateX(-55%) rotate(7deg); }
  .mm-jar:hover { transform: translateX(-55%) translateY(5px) rotate(6deg); }
  .mm-jar strong { transform: rotate(-7deg); }
  .mm-sticker { right: 8%; }
  .wp-block-post-template.is-layout-grid { grid-template-columns: 1fr !important; }
  .mm-footer { border-radius: 2rem 2rem 0 0; }
}

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