/* Myrtle Kit - WordPress / Elementor glue (loaded after mc.css). */

/* Chrome templates: the header template only holds fixed elements, so it takes no space; the footer is full bleed. */
.mck-chrome--header { height: 0; overflow: visible; }
.mck-chrome .e-con, .mck-chrome .e-con-inner, .mck-chrome .elementor-element, .mck-chrome .elementor-widget-container { padding: 0 !important; margin: 0 !important; min-height: 0 !important; max-width: none !important; --content-width: 100% !important; gap: 0 !important; }
.mck-chrome--footer { width: 100%; }

/* Arrow inside the button island: one masked shape, colour per variant (replaces the per-colour <img>). */
.mck-arrow { display: block; width: 20px; height: 20px; background-color: var(--if, #FFFEFD); -webkit-mask: url("../icons/white/arrow-right.svg") center / contain no-repeat; mask: url("../icons/white/arrow-right.svg") center / contain no-repeat; transition: transform .6s var(--ease); }
.btn:hover .island .mck-arrow { transform: translateX(2px) rotate(-45deg); }
.btn--sm .mck-arrow { width: 18px; height: 18px; }
.btn--teal .mck-arrow { background-color: var(--teal); }
.btn--white .mck-arrow { background-color: var(--white); }
.fc-cta .mck-arrow { background-color: var(--ink); }
.btn--lg { min-height: 72px; padding-left: 34px; font-size: 18px; }
.btn--lg .island { width: 56px; height: 56px; }

/* Button / tag wrappers */
.mck-btn-wrap, .mck-tag-wrap { display: flex; flex-wrap: wrap; }
@media (max-width: 767px) {
  .mck-btn-wrap--full .btn { width: 100%; justify-content: space-between; }
}

/* Heading without the rise animation still shows its underline */
.mck-static .mark-u { background-size: 100% .07em; }

/* Elementor puts widgets in its own boxes; keep our display type from inheriting kit heading styles */
.elementor-widget-mck-heading .mck-h { margin: 0; }

/* Elementor containers set their own --display (flex/grid), which shadows the design system's --display font token.
   Restore the font on every Myrtle widget (their wrappers don't use Elementor's --display). */
[class*="elementor-widget-mck-"], .mck-chrome .elementor-widget { --display: "Sunset Serial", Georgia, serif; }
/* Elementor's `.elementor img { height: auto }` beats mc.css's .tag icon size; restore it everywhere. */
.elementor .tag img, .mck-chrome .tag img { width: 18px; height: 18px; }
.elementor .btn .island img, .mck-chrome .btn .island img { width: 20px; height: 20px; }
.elementor .btn--sm .island img, .mck-chrome .btn--sm .island img, .elementor .ulink img, .mck-chrome .ulink img { width: 18px; height: 18px; }