/* ============================================================
   MASAAR — BASE
   Fonts, reset, typography primitives and shared controls.

   RTL POLICY — read before adding CSS anywhere in this plugin.
   Every directional rule uses CSS *logical* properties:
     margin-inline / padding-inline / inset-inline / border-inline
     text-align: start | end   (never left | right)
   Arabic then needs a font swap and a handful of genuine mirroring
   fixes, not a parallel stylesheet. Physical left/right properties
   are the one thing that will make the AR phase expensive, so keep
   them out.
   ============================================================ */

/* --- Fonts ------------------------------------------------- *
   Files shipped in assets/fonts/, taken from arada-connected-life.
   TODO: Arada Light and both Arada Headline weights are .ttf only —
   convert to .woff2 to cut ~60% off their transfer size.            */

@font-face {
  font-family: "Arada";
  src: url("../fonts/Arada-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arada";
  src: url("../fonts/Arada-Regular.woff2") format("woff2"),
       url("../fonts/Arada-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arada";
  src: url("../fonts/Arada-Bold.woff2") format("woff2"),
       url("../fonts/Arada-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arada Headline";
  src: url("../fonts/AradaHeadline-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arada Headline";
  src: url("../fonts/AradaHeadline-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- Reset ------------------------------------------------- */

.masaar-page *,
.masaar-page *::before,
.masaar-page *::after {
  box-sizing: border-box;
}

body.masaar-page {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.masaar-page img,
.masaar-page video,
.masaar-page svg {
  display: block;
  max-width: 100%;
}

.masaar-page p,
.masaar-page h1,
.masaar-page h2,
.masaar-page h3,
.masaar-page h4,
.masaar-page h5 {
  margin: 0;
}

/* The arada-2022 theme floats every section:
     section { width: 100%; float: left; position: relative; }
   That drags following in-flow blocks (notably the footer) up alongside the
   float, so their top padding lands above the visible content and their
   background paints behind it. Opt our sections out of the float entirely —
   they are already block-level and full width. */
.masaar-page .masaar-section {
  float: none;
}

/* Belt and braces: even if a stray float appears in content, the footer
   should start below it. */
.masaar-page .masaar-footer {
  clear: both;
}

/* --- Layout ------------------------------------------------ */

.masaar-container {
  inline-size: 100%;
  max-inline-size: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Every block is a landmark section and an anchor target: the navbar
   links scroll to these ids (Neem, navbar annotation). */
.masaar-section {
  position: relative;
  background: var(--section-bg, transparent);
  color: var(--section-hc, inherit);
  scroll-margin-block-start: var(--navbar-height);
}

/* --- Type primitives --------------------------------------- */

.masaar-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.masaar-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
}

.masaar-h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-tight);
}

.masaar-body-l {
  font-size: var(--fs-body-l);
  line-height: var(--lh-tight);
}

.masaar-body-m {
  font-size: var(--fs-body-m);
  line-height: var(--lh-tight);
}

.masaar-body-s {
  font-weight: var(--fw-light);
  font-size: var(--fs-body-s);
  line-height: var(--lh-tight);
}

.masaar-label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-tight);
}

/* --- Controls ---------------------------------------------- */

.masaar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  /* FIXED, not a minimum. The design's Rounded Button (8106:60948) is
     h-[44px] with a 24px icon that overflows its own padding box -- so the
     height is declared, never derived from content. We had min-block-size,
     which let that 24px icon push the navbar's WhatsApp button to 48 and the
     navbar with it to 82 against the design's 78. Variants that are genuinely
     taller override --control-height rather than adding a min-height. */
  block-size: var(--control-height);
  padding-inline: var(--space-24);
  padding-block: 13px;
  /* Held in a custom property so the hover rule below can restate it -- see
     the note there. Variants set --btn-border instead of `border`. */
  --btn-border: 0 none;
  border: var(--btn-border);
  border-radius: var(--radius-button);
  background: var(--masaar-moss);
  color: var(--masaar-white);
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-cta);
  line-height: var(--lh-cta);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.masaar-button:hover,
.masaar-button:focus-visible {
  /* TODO: hover/focus colour is not specified in the Figma yet —
     ask Neem. This is a holding value, not a design decision. */
  background: #0d241f;
  /* The theme's style.css carries `a:hover, h1 a, h2 a, h3 a { border: none }`
     at (0,1,1), which outranks the (0,1,0) border on our variants. Every
     button rendered as an <a> therefore dropped its 1px border on hover,
     shrinking 2px in each axis and shifting the navbar height with it
     (Neem, bug report 2026-09-02). Restating it here at (0,2,0) wins the
     cascade; together with the fixed block-size above, no state can resize a
     button. Verified: only border-top-width was being stolen -- the theme's
     colour and underline hover rules live in style-min.css, which is not the
     stylesheet the theme actually enqueues. */
  border: var(--btn-border);
}

.masaar-button--full {
  inline-size: 100%;
}

.masaar-input {
  inline-size: 100%;
  block-size: var(--control-height);
  padding-inline: var(--space-16);
  padding-block: 14px;
  border: 0.5px solid var(--border-input);
  border-radius: var(--radius-input);
  background: var(--masaar-white);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  line-height: var(--lh-tight);
}

.masaar-input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.masaar-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding-inline: var(--space-8);
  padding-block: var(--space-4);
  border-radius: var(--radius-tag);
  background: var(--masaar-maple);
  color: var(--masaar-white);
}

@media (min-width: 1200px) {
  .masaar-tag {
    padding-inline: var(--space-16);
    padding-block: var(--space-8);
  }
}

/* --- Accessibility ----------------------------------------- */

/* --- Sticky header enabler ----------------------------------

   Neem, bug report 2026-09-02: the navbar scrolls away instead of staying put.
   It was already `position: sticky; top: 0` -- the theme was disabling it.

   themes/arada-2022/style.css sets `html, body { overflow-x: hidden }`, and a
   box cannot be hidden on one axis and visible on the other: the other axis
   computes to `auto`. That made html AND body scroll containers, so the navbar
   stuck to the nearest scrolling ancestor rather than the viewport and simply
   travelled up with the page (measured: top = -2000 at scrollY 2000).

   `clip` does the same job -- no horizontal scrollbar -- WITHOUT establishing a
   scroll container, so overflow-y stays visible and sticky resolves against the
   viewport again. :root and body.masaar-page out-specify the theme's bare
   element selectors, and this stylesheet only loads on Masaar pages, so the
   rest of the site keeps the theme's behaviour untouched. */
:root {
  overflow-x: clip;
}

body.masaar-page {
  overflow-x: clip;
}

.masaar-page :focus-visible {
  outline: 2px solid var(--masaar-sage);
  outline-offset: 2px;
}

.masaar-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .masaar-page *,
  .masaar-page *::before,
  .masaar-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.masaar-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.masaar-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

/* ============================================================
   CAROUSEL CONTROLS — shared by Amenities and Home Listings
   Figma (Home Listings 8106:52497, measured): dots 22x8 active /
   6x6 idle, 8 gap; arrows 44x44, 16 gap, aligned to the gutters.
   The disabled arrow samples #c4ccca — that is moss at 25% on
   white, not a separate grey, so it is expressed as such.

   Defaults are the light-ground treatment. Blocks on a dark
   ground retheme via the custom properties rather than by
   redeclaring the rules.
   ============================================================ */

.masaar-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

.masaar-dots {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.masaar-dot {
  /* Home Listings uses 6; Amenities' dark-ground dots are 8. */
  inline-size: var(--dot-size, 6px);
  block-size: var(--dot-size, 6px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--dot-idle, var(--masaar-grey-40));
  cursor: pointer;
  transition: inline-size 160ms ease, block-size 160ms ease, background-color 160ms ease;
}

.masaar-dot.is-active {
  inline-size: var(--dot-active-w, 22px);
  block-size: 8px;
  border-radius: 4px;
  background: var(--dot-active, var(--masaar-black));
}

.masaar-arrows {
  display: flex;
  gap: var(--space-16);
}

.masaar-round-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--arrow-bg, var(--masaar-moss));
  color: var(--arrow-fg, var(--masaar-white));
  cursor: pointer;
  transition: background-color 160ms ease;
}

.masaar-round-button:hover:not([disabled]),
.masaar-round-button:focus-visible:not([disabled]) {
  background: var(--arrow-bg-hover, var(--masaar-black));
}

/* Disabled is a real state here, not decoration: the design greys the
   prev arrow on page 1 and both arrows when there is only one page. */
.masaar-round-button[disabled] {
  background: var(--arrow-bg-off, rgba(19, 50, 43, 0.25));
  cursor: default;
}

/* The zoom cluster. Shared, not location-specific: the design uses the same
   136x76 frame -- two 44x44 buttons inset 16 with a 16 gap, flush to the
   bottom-right corner -- on the regional map and on the masterplan
   (I8106:53750;8106:53410). It lived in location.css, which made the
   masterplan's copy silently depend on the location block being on the
   page (M3ID-24). */
.masaar-map__controls {
  position: absolute;
  inset-block-end: var(--space-16);
  inset-inline-end: var(--space-16);
  display: flex;
  gap: var(--space-16);
  z-index: 1;
}

.masaar-map__btn[disabled] {
  opacity: 0.45;
}

/* The chevron is drawn pointing inline-start; the next button mirrors it,
   which also keeps both arrows correct in Arabic. */
.masaar-round-button--next svg {
  transform: scaleX(-1);
}

.masaar-page:dir(rtl) .masaar-round-button svg {
  transform: scaleX(-1);
}

.masaar-page:dir(rtl) .masaar-round-button--next svg {
  transform: none;
}

/* ============================================================
   SECTION REVEAL — see assets/js/reveal.js
   Neem: subtle fade-in per section, 400-500ms ease-out, once,
   no parallax or heavy transitions.
   ============================================================ */

.masaar-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 450ms ease-out, transform 450ms ease-out;
}

.masaar-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Belt and braces: the JS bails out under reduced motion, but if the
   preference changes after load nothing should stay hidden or move. */
@media (prefers-reduced-motion: reduce) {
  .masaar-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   METRIC CARD — shared by the Intro metrics and the Investor
   Investment Case. Same geometry in both masters (padding 24 and
   radius 16 on desktop, value in the display face, label H5 in
   grey-80); they differ only in ground and value colour, which
   each block sets. Card HEIGHT is per-block too — the intro's is
   224/200, the investment case's 132/200.
   ============================================================ */

.masaar-metric {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-24);
  /* Mobile masters use 16; desktop 24. */
  padding: var(--space-16);
  border-radius: var(--radius-panel);
  background: var(--masaar-grey-10);
}

.masaar-metric__value {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--masaar-black);
  /* NOT nowrap. The English values are short tokens ("24/7", "100,000+",
     "20 min") that never need to wrap, so nowrap was harmless there. Arabic
     translates them as phrases — "أمن وحراسة", "على بُعد 20 دقيقة فقط" — and
     the AR mobile master (8362:64376) wraps that last one across two lines
     inside the card. Held on one line it painted straight out of the card's
     rounded background and off the left edge.

     balance keeps the wrapped lines even, matching the master's ragging. */
  text-wrap: balance;
}

.masaar-metric__label {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5);
  line-height: var(--lh-tight);
  color: var(--masaar-grey-80);
}

@media (min-width: 1200px) {
  .masaar-metric { padding: var(--space-24); }
}