/* ==========================================================================
   MoroFun Atlas — elementor.css
   Loaded only when Elementor is active.
   Part A restyles the widgets already on the site so existing pages inherit
   the new identity without being rebuilt. Part B adds opt-in classes you type
   into Elementor > Advanced > CSS Classes.
   ========================================================================== */

/* --- A. Inherited styling for existing Elementor content ------------------ */

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--mf-display);
  font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
  letter-spacing: -.015em;
  line-height: 1.12;
}
.elementor-widget-text-editor,
.elementor-widget-theme-post-content { font-family: var(--mf-body); color: var(--mf-ink); }

/* Buttons inherit the pill + lift treatment */
.elementor-button {
  border-radius: 999px;
  font-family: var(--mf-body);
  font-weight: 700;
  letter-spacing: .04em;
  transition: transform var(--mf-fast) var(--mf-ease),
              background-color var(--mf-fast) var(--mf-ease),
              box-shadow var(--mf-base) var(--mf-ease);
}
.elementor-button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(193,98,43,.26); }

/* Image boxes / icon boxes lift on hover */
.elementor-widget-image-box .elementor-image-box-wrapper,
.elementor-widget-icon-box .elementor-icon-box-wrapper {
  transition: transform var(--mf-base) var(--mf-ease);
}
.elementor-widget-image-box:hover .elementor-image-box-wrapper,
.elementor-widget-icon-box:hover .elementor-icon-box-wrapper { transform: translateY(-5px); }

.elementor-widget-image-box .elementor-image-box-img img,
.elementor-widget-image .elementor-widget-container img {
  border-radius: var(--mf-radius-lg);
}

/* Form fields */
.elementor-field-group .elementor-field-textual {
  border-radius: 999px;
  border: 1px solid var(--mf-line);
  background: var(--mf-white);
  padding: .8rem 1.15rem;
  transition: border-color var(--mf-fast), box-shadow var(--mf-fast);
}
.elementor-field-group .elementor-field-textual:focus {
  border-color: var(--mf-clay);
  box-shadow: 0 0 0 3px rgba(193,98,43,.14);
  outline: none;
}
.elementor-field-group textarea.elementor-field-textual { border-radius: var(--mf-radius-lg); }

/* Accordion / toggle */
.elementor-accordion .elementor-accordion-item,
.elementor-toggle .elementor-toggle-item { border-color: var(--mf-line); }
.elementor-accordion .elementor-tab-title,
.elementor-toggle .elementor-tab-title {
  font-family: var(--mf-display);
  font-variation-settings: "opsz" 144, "WONK" 1;
  transition: color var(--mf-fast);
}
.elementor-accordion .elementor-tab-title:hover,
.elementor-toggle .elementor-tab-title:hover { color: var(--mf-clay); }

/* Divider picks up the gold hairline */
.elementor-widget-divider { --divider-color: var(--mf-gold); }

/* Keep Elementor sections from clipping the sticky header */
.elementor-section.elementor-section-stretched { z-index: auto; }

/* --- B. Opt-in classes for Elementor > Advanced > CSS Classes ------------- */

/* mf-reveal, mf-stagger  (defined in main.css, listed here as reference)
   mf-parallax            slow background drift on the element's image
   mf-arch                horseshoe-arch mask on the image inside
   mf-lift                hover lift + shadow
   mf-zoom                hover zoom on the contained image
   mf-glass               frosted card surface
   mf-pattern-top         zellige hairline above the section
   mf-tight               removes default column padding                      */

.mf-lift { transition: transform var(--mf-base) var(--mf-ease), box-shadow var(--mf-base) var(--mf-ease); }
.mf-lift:hover { transform: translateY(-6px); box-shadow: var(--mf-shadow-md); }

.mf-zoom img { transition: transform 600ms var(--mf-ease); will-change: transform; }
.mf-zoom:hover img { transform: scale(1.06); }
.mf-zoom, .mf-zoom .elementor-widget-container { overflow: hidden; border-radius: var(--mf-radius-lg); }

.mf-arch img,
.mf-arch .elementor-widget-container > img {
  border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px;
}

.mf-glass {
  background: color-mix(in srgb, var(--mf-white) 78%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(222,210,190,.7);
  border-radius: var(--mf-radius-lg);
  box-shadow: var(--mf-shadow-sm);
}

.mf-pattern-top { position: relative; }
.mf-pattern-top::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 L6 0 L12 6 L18 0 L24 6' fill='none' stroke='%23C9A24B' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  opacity: .5;
  pointer-events: none;
}

.mf-tight > .elementor-widget-container { padding: 0 !important; }

/* Parallax layer prepared by motion.js */
.mf-parallax { overflow: hidden; }
.mf-parallax img { will-change: transform; }

/* Editor safety: never hide content inside the Elementor canvas */
.elementor-editor-active .mf-reveal,
.elementor-editor-active .mf-stagger > *,
.elementor-editor-preview .mf-reveal,
.elementor-editor-preview .mf-stagger > * { opacity: 1 !important; transform: none !important; }