/* ==========================================================================
   Monal Group — shared widget foundation
   Converted from the static build (monal-group-html/assets/css/style.css).

   Sizing system (unchanged from the static build, but scoped)
   The static page set `html { font-size: 10px }` and, from 1200px up,
   `min(10px, 100vw / 192)`, so every value in the design is "Figma px / 10"
   and the desktop layout scales with the 1920 frame. Re-rooting the document
   font size inside WordPress would rescale every other widget on the site, so
   the same scale is carried by --monal-u instead and every length is written
   as calc(var(--monal-u) * <Figma px / 10>).

   Everything here is scoped to .monal-w (the root element every Monal widget
   renders) so nothing leaks into the theme or other Elementor widgets.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --monal-u: 10px;                    /* 1 unit == 10 Figma px (see above) */

  --monal-c-ink: #1e1916;
  --monal-c-black: #000;
  --monal-c-green: #2c5a4f;
  --monal-c-green-10: #eaefee;
  --monal-c-orange: #ed782c;
  --monal-c-orange-hot: #f87f0c;
  --monal-c-cream: #fef2ea;
  --monal-c-peach: #fbe4d5;
  --monal-c-grey-100: #f5f5f5;
  --monal-c-muted: rgba(30, 25, 22, .7);     /* #1E1916 @70% (Figma body copy, measured #605F5A) */
  --monal-c-white-70: rgba(255, 255, 255, .7);
  --monal-c-white-50: rgba(255, 255, 255, .5);
  --monal-c-green-70: rgba(44, 90, 79, .7);
  --monal-c-line: rgba(30, 25, 22, .1);
  --monal-c-white: #fff;

  --monal-f-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --monal-f-serif: "Libertinus Serif", Georgia, "Times New Roman", serif;
  --monal-f-display: "Libertinus Serif Display", "Libertinus Serif", Georgia, serif;
  --monal-f-sans-alt: "Libertinus Sans", "Poppins", sans-serif;

  --monal-inset: calc(var(--monal-u) * 1.1);              /* rounded panels inset from the viewport */
  --monal-gutter: calc(var(--monal-u) * 2.4);             /* page side padding (mobile) */
  --monal-radius-panel: calc(var(--monal-u) * 2.2);
  --monal-leaf: calc(var(--monal-u) * .3) calc(var(--monal-u) * .3) calc(var(--monal-u) * 1.4) calc(var(--monal-u) * .3);   /* buttons / tabs "leaf" corner */
  --monal-ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Picture glyph used to mark an empty image slot (map pointers). */
  --monal-ph-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 4.5h17a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-17a1 1 0 0 1-1-1v-13a1 1 0 0 1 1-1zm.5 13.2 5.2-5.6 3.4 3.7 3.1-2.6 4.3 4.5v.8H4v-.8z'/%3E%3Ccircle cx='8.6' cy='9.4' r='1.7'/%3E%3C/svg%3E");
}

@media (min-width: 1200px) {
  :root {
    --monal-u: min(10px, calc(100vw / 192));
    --monal-inset: calc(var(--monal-u) * 1.5);
    --monal-radius-panel: calc(var(--monal-u) * 5);
  }
}

/* ---------- Widget root + scoped reset ---------- */
.monal-w,
.monal-w *,
.monal-w *::before,
.monal-w *::after { box-sizing: border-box; }

.monal-w {
  font-family: var(--monal-f-sans);
  font-size: calc(var(--monal-u) * 1.6);
  line-height: 1.5;
  color: var(--monal-c-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Sections that hold off-canvas reveal offsets (the static build used
   `main, .footer { overflow-x: clip }`). Never applied to the header widget:
   it contains the fixed bar and drawer. */
.monal-w--clip { overflow-x: clip; }

/* The element resets are wrapped in :where()  (border-radius: 0 undoes the
   Hello Elementor reset, which rounds buttons and inputs by 3px) so they add no specificity beyond
   .monal-w. In the static build these were bare element selectors that every
   component rule outranked; :where() keeps that relationship intact — a section
   rule such as .monal-brands__lead { margin: … } still wins — while the reset
   itself still beats the theme's own bare `p {}` / `a {}` rules. */
.monal-w :where(h1, h2, h3, h4, p, ul, ol, li, figure, address) { margin: 0; padding: 0; }
.monal-w :where(ul, ol) { list-style: none; }
.monal-w :where(img, svg) { display: block; max-width: 100%; }
.monal-w :where(a) { color: inherit; text-decoration: none; }
/* Hello Elementor's reset styles the link states — `a:active, a:hover { color:
   #336 }` and `a, a:visited { text-decoration: underline }` — at (0,1,1), which
   :where() cannot outrank, so every link without its own hover colour turned
   navy and visited links were underlined. These rules sit at exactly (0,1,1)
   too: this stylesheet loads after the theme, so they win there, and each
   widget stylesheet loads after this one, so a section's own hover colour
   (.monal-footer a:hover, .monal-dropdown a:hover, …) still wins here. */
:where(.monal-w) a:hover,
:where(.monal-w) a:focus,
:where(.monal-w) a:active,
:where(.monal-w) a:visited { color: inherit; text-decoration: none; }
.monal-w :where(button, input) { font: inherit; color: inherit; border-radius: 0; }
/* Hello Elementor's reset rounds inputs with input[type="email"] (0,1,1), which
   :where() cannot outrank, so this one keeps the element in the selector. */
.monal-w input { border-radius: 0; }
.monal-w :where(button) { background: none; border: 0; padding: 0; cursor: pointer; white-space: normal; }
/* `white-space: normal` above undoes Hello Elementor's `button { white-space:
   nowrap }`, which stopped the brand category descriptions from wrapping; the
   buttons that genuinely must not wrap set it themselves (.monal-btn,
   .monal-site-nav__trigger), and those rules are declared after this one.

   Hello Elementor's reset also paints every button on hover AND focus:
   `button:hover, button:focus, [type=submit]:hover, … { background-color:#c36;
   color:#fff }` at (0,1,1) / (0,2,0). These rules match that at (0,2,0) — .monal-w
   plus the state pseudo-class, with :where() keeping the element out of the
   count — so they win here (this sheet loads after the theme) while every
   section's own button state (.monal-round-btn--solid:hover, .monal-subtab
   .monal-is-active, …) still wins, being equally specific but declared later. */
.monal-w :where(button, [type="button"], [type="submit"]):hover,
.monal-w :where(button, [type="button"], [type="submit"]):focus {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
}
.monal-w :where(address) { font-style: normal; }

/* Elementor resets figure margins inside every widget with a high-specificity
   selector (.elementor .elementor-widget:not(...):not(...) figure), which a
   single-class section rule cannot outrank. Sections therefore set the margin
   through --monal-figure-margin and these two rules apply it: the first outside
   Elementor, the second at matching specificity inside it (this stylesheet is
   always enqueued after elementor-frontend, so the tie resolves our way). */
.monal-w figure { margin: var(--monal-figure-margin, 0); }
.elementor .elementor-widget .monal-w.monal-w figure { margin: var(--monal-figure-margin, 0); }
.monal-w :where(em) { font-style: italic; }
.monal-w :focus-visible { outline: 2px solid var(--monal-c-orange); outline-offset: 3px; }

/* The drawer locks the page behind it. Hiding the scrollbar widens the
   viewport, so the page underneath jumps sideways; --monal-scrollbar (measured
   in JS when the drawer opens) holds that width and keeps everything still. */
body.monal-is-locked { overflow: hidden; padding-right: var(--monal-scrollbar, 0px); }

/* --------------------------------------------------------------------------
   WordPress admin bar. The static build never had one; on the logged-in
   frontend it covers the top 32px (46px below 783px), which the fixed header
   and the drawer both have to clear. Everything that pins itself to the top of
   the viewport adds --monal-admin-bar to its offset.
   -------------------------------------------------------------------------- */
:root { --monal-admin-bar: 0px; }
body.admin-bar { --monal-admin-bar: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar { --monal-admin-bar: 46px; }
}

/* Anchor jumps from the navigation must not land underneath the fixed header. */
.monal-w[id] { scroll-margin-top: calc(var(--monal-u) * 9 + var(--monal-admin-bar)); }
@media (min-width: 1200px) {
  .monal-w[id] { scroll-margin-top: calc(var(--monal-u) * 13 + var(--monal-admin-bar)); }
}

.monal-visually-hidden, .monal-email-form__label {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.monal-container { width: 100%; padding-inline: var(--monal-gutter); margin-inline: auto; }
@media (min-width: 1200px) {
  .monal-container { width: calc(var(--monal-u) * 154.4); padding-inline: 0; }
}
.monal-br-d { display: none; }
@media (min-width: 1200px) { .monal-br-d { display: inline; } }

/* ---------- Icons (mono SVGs recoloured through CSS masks) ---------- */
.monal-i {
  display: inline-block; flex: none;
  width: calc(var(--monal-u) * 2.4); height: calc(var(--monal-u) * 2.4);
  background-color: currentColor;
  -webkit-mask: var(--monal-i) center / contain no-repeat;
          mask: var(--monal-i) center / contain no-repeat;
}
.monal-i--arrow-ne { --monal-i: url(../icons/arrow-ne.svg); width: calc(var(--monal-u) * 1.35); height: calc(var(--monal-u) * 1.35); }
.monal-i--arrow-r { --monal-i: url(../icons/arrow-curved.svg); }
.monal-i--arrow-l { --monal-i: url(../icons/arrow-curved.svg); transform: scaleX(-1); }
.monal-i--ph-arrow-line-down { --monal-i: url(../icons/ph-arrow-line-down.svg); }
.monal-i--ph-envelope-simple { --monal-i: url(../icons/ph-envelope-simple.svg); }
.monal-i--ph-graduation-cap { --monal-i: url(../icons/ph-graduation-cap.svg); }
.monal-i--ph-hand-heart { --monal-i: url(../icons/ph-hand-heart.svg); }
.monal-i--ph-heartbeat { --monal-i: url(../icons/ph-heartbeat.svg); }
.monal-i--ph-instagram-logo { --monal-i: url(../icons/ph-instagram-logo.svg); }
.monal-i--ph-map-pin { --monal-i: url(../icons/ph-map-pin.svg); }
.monal-i--ph-phone { --monal-i: url(../icons/ph-phone.svg); }
.monal-i--ph-phone-call { --monal-i: url(../icons/ph-phone-call.svg); }
.monal-i--ph-plus { --monal-i: url(../icons/ph-plus.svg); }
.monal-i--ph-users-three { --monal-i: url(../icons/ph-users-three.svg); }
.monal-i--ph-handshake { --monal-i: url(../icons/ph-handshake.svg); }
.monal-i--ph-sparkle { --monal-i: url(../icons/ph-sparkle.svg); }
.monal-i--ph-whatsapp-logo { --monal-i: url(../icons/ph-whatsapp-logo.svg); }
.monal-i--ph-x-logo { --monal-i: url(../icons/ph-x-logo.svg); }
.monal-i--social-facebook { --monal-i: url(../icons/social-facebook.svg); }
.monal-i--social-linkedin { --monal-i: url(../icons/social-linkedin.svg); }
.monal-i--icon-restaurant { --monal-i: url(../icons/icon-restaurant.svg); }
.monal-i--icon-ferris { --monal-i: url(../icons/icon-ferris.svg); }
.monal-i--icon-catering { --monal-i: url(../icons/icon-catering.svg); }
.monal-i--icon-foundation { --monal-i: url(../icons/icon-foundation.svg); }
.monal-i--j-handshake { --monal-i: url(../icons/j-handshake.svg); }
.monal-i--j-expansion { --monal-i: url(../icons/j-expansion.svg); }
.monal-i--j-brands { --monal-i: url(../icons/j-brands.svg); }
.monal-i--j-entertainment { --monal-i: url(../icons/j-entertainment.svg); }
.monal-i--j-cities { --monal-i: url(../icons/j-cities.svg); }
.monal-i--j-corporate { --monal-i: url(../icons/j-corporate.svg); }

/* Orange two-dash marker (Figma 1:873) */
.monal-marker {
  display: block; width: calc(var(--monal-u) * 3.5); height: calc(var(--monal-u) * .25);
  background: url(../icons/marker.svg) left center / contain no-repeat;
}

/* ---------- Buttons ---------- */
.monal-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--monal-u) * 1.2);
  height: calc(var(--monal-u) * 5.4); padding: 0 calc(var(--monal-u) * 2);
  font-size: calc(var(--monal-u) * 1.6); line-height: 1; font-weight: 700; text-transform: uppercase;
  border-radius: var(--monal-leaf);
  transition: background-color .35s var(--monal-ease-out), color .35s var(--monal-ease-out), border-color .35s var(--monal-ease-out), transform .35s var(--monal-ease-out);
  white-space: nowrap;
}
.monal-btn .monal-i { transition: transform .35s var(--monal-ease-out); }
.monal-btn:hover .monal-i { transform: translate(calc(var(--monal-u) * .25), calc(var(--monal-u) * -.25)); }
.monal-btn--primary { background: var(--monal-c-orange); color: var(--monal-c-ink); }
.monal-btn--primary:hover { background: #f38a45; }
.monal-btn--outline { border: 1px solid #fff; color: #fff; font-weight: 600; }
.monal-btn--outline:hover { background: #fff; color: var(--monal-c-ink); }

/* Arrow circle used on cards (Figma "Group 1000010725" 53×53) */
.monal-arrow-circle {
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: calc(var(--monal-u) * 3.6); height: calc(var(--monal-u) * 3.6); border-radius: 50%;
  border: 1px solid #d9d9d9;   /* Figma Ellipse 17: no fill, #D9D9D9 stroke */
  background: transparent;
  color: var(--monal-c-black);
  transition: background-color .35s var(--monal-ease-out), color .35s var(--monal-ease-out), border-color .35s var(--monal-ease-out);
}
.monal-arrow-circle::before {
  content: ""; width: 45%; height: 45%;
  background: currentColor;
  -webkit-mask: url(../icons/arrow-curved.svg) center / contain no-repeat;
          mask: url(../icons/arrow-curved.svg) center / contain no-repeat;
  transform: rotate(-45deg);
  transition: transform .45s var(--monal-ease-out);
}
a:hover .monal-arrow-circle, .monal-arrow-circle:hover { background: var(--monal-c-orange); border-color: var(--monal-c-orange); color: #fff; }
a:hover .monal-arrow-circle::before, .monal-arrow-circle:hover::before { transform: rotate(0deg); }

.monal-round-nav { display: flex; gap: calc(var(--monal-u) * 1); }
.monal-round-btn {
  display: grid; place-items: center; width: calc(var(--monal-u) * 4.4); height: calc(var(--monal-u) * 4.4); border-radius: 50%;
  transition: background-color .3s, color .3s, border-color .3s, transform .3s var(--monal-ease-out);
}
.monal-round-btn .monal-i { width: calc(var(--monal-u) * 2); height: calc(var(--monal-u) * 2); }
.monal-round-btn:active { transform: scale(.94); }
.monal-round-btn--soft { background: var(--monal-c-cream); color: var(--monal-c-ink); }
.monal-round-btn--soft:hover { background: #fbdcc8; }
.monal-round-btn--solid { background: var(--monal-c-orange); color: #fff; }
.monal-round-btn--solid:hover { background: #d9661d; }
.monal-round-btn--ghost { border: 1px solid #fff; color: #fff; }
.monal-round-btn--ghost:hover { background: #fff; color: var(--monal-c-green); }

/* The display below beats the reset [hidden] rule on load order, so the
   button kept rendering under 1200 after the script hid it -- on a section
   with a single page of stories there is nothing for it to reveal. */
.monal-show-more[hidden] { display: none; }
.monal-show-more {
  display: flex; align-items: center; gap: calc(var(--monal-u) * .8); margin: calc(var(--monal-u) * 3.4) auto 0;
  font-size: calc(var(--monal-u) * 1.3); font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
}
.monal-show-more__icon {
  display: grid; place-items: center; width: calc(var(--monal-u) * 2.2); height: calc(var(--monal-u) * 2.2); border-radius: 50%;
  border: 1px solid currentColor; opacity: .7;
}
.monal-show-more__icon::before {
  content: ""; width: calc(var(--monal-u) * 1.2); height: calc(var(--monal-u) * 1.2); background: currentColor;
  -webkit-mask: url(../icons/arrow-curved.svg) center / contain no-repeat;
          mask: url(../icons/arrow-curved.svg) center / contain no-repeat;
  transform: rotate(90deg);
}
.monal-show-more--light { color: #fff; }

/* Placeholder image blocks (Figma "PLACEHOLDER IMAGE") */
.monal-ph {
  display: grid; place-items: center; text-align: center;
  background: #fff; color: var(--monal-c-green-70);
  font-weight: 600; font-size: calc(var(--monal-u) * 1.3); line-height: 1.3; text-transform: uppercase;
}

/* ---------- Headings ---------- */
.monal-h2 {
  font-weight: 500; font-size: calc(var(--monal-u) * 3.2); line-height: 1.19; letter-spacing: -.04em;
}
.monal-h2--light { color: #fff; }
.monal-line { display: block; overflow: hidden; }
.monal-line__in { display: block; }
@media (min-width: 1200px) {
  .monal-h2 { font-size: calc(var(--monal-u) * 6.6); line-height: calc(var(--monal-u) * 7.8); }
}

/* Shared responsive steps that the static build declared inside section
   media queries but which apply to these shared components globally. */
@media (min-width: 768px) {
  .monal-ph { font-size: calc(var(--monal-u) * 1.6); }
}
@media (min-width: 1200px) {
  .monal-ph { font-size: calc(var(--monal-u) * 2.8); line-height: calc(var(--monal-u) * 3.6); }
  .monal-round-btn { width: calc(var(--monal-u) * 5.3); height: calc(var(--monal-u) * 5.3); }
  .monal-round-btn .monal-i { width: calc(var(--monal-u) * 2.4); height: calc(var(--monal-u) * 2.4); }
}

/* ==========================================================================
   Motion helpers — initial states are set by JS (gsap.set) so the markup is
   fully visible without JS; these classes only guard the first paint.
   ========================================================================== */
.monal-js.monal-motion-ok [data-monal-hero-item],
.monal-js.monal-motion-ok .monal-hero__title .monal-line__in { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .monal-w, .monal-w *, .monal-w *::before, .monal-w *::after {
    transition-duration: .01ms !important; animation-duration: .01ms !important;
  }
}