/* ===========================================================================
   Hand-maintained overrides that must load AFTER the vendor stylesheet.

   ml-theme.css is generated by concatenating the ported src/ sheets, so a hand
   edit there is lost the next time it is regenerated; style.css is the
   purchased template and is not ours to touch. This file is where the theme's
   own late-cascade rules live. It started as the language switcher and has
   since collected the sold markers, the Croatian menu casing and the image
   sizing below — the common thread is "ours, and must win on source order".
   =========================================================================== */

/* ---------------------------------------------------------------------------
   IMAGES KEEP THEIR ASPECT RATIO

   The template's only base rule for images is `img { max-width: 100% }`
   (style.css:159) — no `height: auto`. That works for as long as no <img>
   carries a height attribute: the browser derives the height from the
   intrinsic ratio.

   Adding width/height attributes for CLS (see ml_img_dimensions() in
   inc/media.php) broke that. CSS then set the width — `width: 100%` or the
   `max-width` reset — while the height stayed pinned to the attribute's raw
   pixels. Measured on the home page's testimonial image: intrinsic 2560×1429
   (ratio 1.79) rendered at 675×1429 (ratio 0.47), a landscape aerial stretched
   into a portrait almost 1500 px tall.

   `height: auto` at ELEMENT specificity is the rule the template omitted. It is
   deliberately not scoped: every component that gives an image a real height
   does so through a class (`.rd-hero__tile img`, `.ml-listing__img`,
   `.breadcrumb__bg img`, and ~60 more, all `height: 100%` with
   `object-fit: cover`), so all of them still win on specificity. There is no
   bare `img { height: … }` rule anywhere in style.css to conflict with — that
   was checked, not assumed.

   The width/height attributes stay: browsers read them for the aspect ratio
   even with `height: auto`, which is exactly the documented pattern and the
   whole point of adding them.
   --------------------------------------------------------------------------- */

img {
  height: auto;
}

/* ===========================================================================
   Language switcher (inc/i18n.php → ml_language_switcher()).

   Its own file rather than an entry in ml-theme.css: that sheet is generated by
   concatenating the ported src/ stylesheets, and a hand edit there is lost the
   next time it is regenerated.

   ONE KNOB PER SURFACE. `currentColor` looked like the right answer and was
   not: the switcher's containers inherit the body ink (#555), not the ink of
   the band they sit on. On the black header that made the ACTIVE language
   #555-on-black — 2.2:1, dimmer than the nav links beside it and unreadable as
   a state. Each variant therefore declares --ml-lang-ink explicitly, matching
   the element it sits next to: the nav links in the header, the legal links in
   the footer, the contact links in the side panel.
   =========================================================================== */

.ml-langs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-sans-next, inherit);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;

  /* Fallback for any surface a future variant is dropped on. */
  --ml-lang-ink: currentColor;
}

/* Inactive sits at 0.42 of the band's ink, active at full strength with a 2px
   rule under it. Two signals, not one: the opacity step answers "which one?"
   from across the viewport and the rule confirms it up close.

   The rule is a transparent border on EVERY item so the two never differ in
   height, and font-weight does NOT change with state — a bolder active item
   would re-measure the row and nudge the "Book a viewing" button sideways each
   time the language changed. */
.ml-langs__item {
  position: relative;
  display: inline-block;
  padding: 5px 9px 4px;
  border-bottom: 2px solid transparent;
  color: var(--ml-lang-ink);
  opacity: 0.42;
  text-decoration: none;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}

.ml-langs__item + .ml-langs__item::before {
  content: "";
  position: absolute;
  left: -1px;
  top: calc(50% - 1px);
  width: 1px;
  height: 11px;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.3;
}

.ml-langs__item:hover,
.ml-langs__item:focus-visible {
  opacity: 0.75;
  color: currentColor;
}

.ml-langs__item.is-current {
  opacity: 1;
  border-bottom-color: currentColor;
}

/* The current language is not a link to anywhere else, so it does not react to
   the pointer either — hover on it would suggest the click does something. */
.ml-langs__item.is-current:hover {
  opacity: 1;
}

.ml-langs__item:focus-visible {
  outline: 2px solid var(--ml-gold-500, #c8a96a);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---- Header: between the nav and the "Book a viewing" button. -------------
   The gap is 32px, not the 18px it started at: at 18px the EN hit area ended
   a few pixels from the button's left edge, which is a mis-tap waiting to
   happen on a trackpad and a certainty on a touch-capable laptop.

   The ink is the nav links' own #cfcfcf on the black bar, and the active item
   goes past it to pure white — brighter than the navigation around it, which is
   what makes the current language the first thing read in that corner. */
.ml-langs--header {
  margin-inline-end: 32px;
  --ml-lang-ink: #cfcfcf;
}

.ml-langs--header .ml-langs__item.is-current {
  color: var(--ml-white, #fff);
}

/* The last item's own padding sits inside the 32px, so pull the measurable gap
   back out to the edge of the text rather than the edge of the box. */
.ml-langs--header .ml-langs__item:last-child {
  padding-inline-end: 0;
}

/* ---- Side panel (mobile): under the Contact button. ------------------------
   White surface, so the ink is the panel's own link colour rather than the
   body grey its container inherits. */
.ml-langs--panel {
  margin-top: 22px;
  --ml-lang-ink: var(--ml-ink-900, #111);
}

/* ---- Footer: the last item in the .copyright__menu list of legal links. ----
   The list already spaces and separates its items, so the switcher only has to
   stop its own padding from making it taller than its neighbours. */
.copyright__menu-lang {
  display: inline-flex;
  align-items: center;
}

.ml-langs--footer {
  margin: 0;
  --ml-lang-ink: var(--ml-white, #fff);
}

/* Just enough vertical padding for the 2px active rule to clear the baseline
   without making the item taller than the legal links beside it. The earlier
   `padding-block: 0` collapsed the rule onto the text. */
.ml-langs--footer .ml-langs__item {
  padding-block: 1px 3px;
}

/* Putting the switcher inside .copyright__menu also put it inside the reach of
   `.footer-4__inner .copyright__menu li a { opacity: .74 }`, which flattened
   both languages to the same value and erased the active state. Restated at
   that selector's depth — four classes against its three — so the state
   survives without !important. */
.footer-4__inner .copyright__menu .ml-langs__item {
  opacity: 0.42;
}

.footer-4__inner .copyright__menu .ml-langs__item.is-current,
.footer-4__inner .copyright__menu .ml-langs__item:hover {
  opacity: 1;
}

/* ===========================================================================
   Sold marker in the footer residence index (footer.php).

   The footer lists all twelve residences, so it is the site's index and the one
   place a visitor scans to compare. An index that prints a sold residence the
   same as an available one is an index that misleads, so the label rides along
   with the name.

   An <em> because it is an emphasis on the name, not a separate list item, and
   the footer's link hover effect (a data-text duplicate sliding under the
   original) has to keep working — the label is part of that duplicate too, so
   the two layers stay the same width.
   =========================================================================== */

.ml-footer-sold {
  display: inline;
  font-family: var(--font-sans-next, inherit);
  font-size: 0.72em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: 1px;
  color: var(--ml-gold-500, #c8a96a);
}

/* The name itself steps back so the marker is what the eye lands on. */
.footer-nav-list a.is-sold span {
  opacity: 0.72;
}

.footer-nav-list a.is-sold:hover span {
  opacity: 1;
}

/* ---- Residence rail: the sold panel -------------------------------------
   inc/units-render.php replaces the visit form with this when
   ml_unit_is_sold() is true. Same .rd-rail__card, so the sticky rail and the
   dark island are untouched; only what sits inside it changes. */
.rd-rail__sold-note {
  margin: 0 0 18px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

/* Matches .rd-form__submit, so the card keeps the same footprint whether it
   carries a form or this panel. */
.rd-rail__sold-cta {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* The seal icon reads as part of the word, not as a bullet before it. */
.rd-rail__title .ph {
  margin-right: 0.3em;
  font-size: 0.85em;
  vertical-align: baseline;
}

/* ===========================================================================
   Croatian capitalisation in the two stacked menus.

   The purchased template title-cases the side-panel and mobile navigation.
   English is happy with that; Croatian is not — it capitalises only the first
   word of a phrase, so "O nama" and "Sve nekretnine" came out as "O Nama" and
   "Sve Nekretnine", which reads as a typo to a Croatian reader.

   The side-panel menu is meanmenu's clone, and the rule that reaches it is
   `.mobile-menu.mean-container .mean-nav ul li a` — four classes and four
   elements — so the override has to be written at that shape or it loses the
   cascade silently. (Confirmed with CSS.getMatchedStylesForNode rather than
   guessed: a shorter selector matched the element and still lost.) No
   !important: the language scope supplies the extra specificity honestly.

   Scoped to html[lang="hr"] so the English half of the site keeps exactly the
   typography it was designed with. The desktop bar is uppercase either way.
   =========================================================================== */

html[lang="hr"] .mobile-menu.mean-container .mean-nav ul li a,
html[lang="hr"] .side-info .mobile-menu a,
html[lang="hr"] .header__nav .main-menu a {
  text-transform: none;
}

/* ===========================================================================
   BREADCRUMBS — the visible trail on the residence and building pages.

   Markup: inc/units-render.php, ml_render_breadcrumbs(). The list it walks is
   ml_seo_breadcrumb_node()'s, the same array the JSON-LD BreadcrumbList is
   built from, so the two can never disagree.

   Type is the site's eyebrow shape — small, uppercase, tracked — matching
   .rd-intro__crumbs, which this replaces, and the section kickers. Links take
   the label ink and the current step the heading ink, so the trail reads as a
   path ending where you are. Every value is a Layer-2 semantic token; nothing
   here invents a size or a colour.

   The separator is a ::before on every item after the first, so it is never a
   text node: a printed "/" is announced by a screen reader ("Home slash
   Residences") and turns up inside Google's snippet.
   =========================================================================== */

.ml-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Row gap only: the horizontal gap around a separator is its own margin, so
     the "/" sits centred between two labels instead of hard against one. */
  gap: 6px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-3);
  text-transform: uppercase;
  color: var(--text-label);
}

/* Trailing, not leading. On a phone the trail wraps mid-way, and a ::before on
   the following item puts a stray "/" alone in the left gutter of the second
   line. Owned by the item BEFORE the break instead, it stays at the end of the
   first line, where it reads as "continues" — measured on /p1-a1/ at 430px,
   which wraps after the third step.

   No display change on the item: the separator is inline content, so it sits on
   the label's baseline. Flex-centring it floats the "/" a pixel high against
   uppercase text. */
.ml-crumbs__item:not(:last-child)::after {
  content: "/";
  margin: 0 10px;
  color: var(--text-faint);
}

.ml-crumbs__item a {
  color: var(--text-label);
  text-decoration: none;
  transition: color 0.3s ease;
}
.ml-crumbs__item a:hover,
.ml-crumbs__item a:focus-visible {
  color: var(--text-title);
}

/* The page you are on: full heading ink, and it is a <span>, not a link. */
.ml-crumbs__item.is-current > span {
  color: var(--text-title);
}

/* ---- Residence pages ------------------------------------------------------
   The trail is the first child of .rd-intro's container, exactly where
   .rd-intro__crumbs used to be, and .rd-intro__head keeps its own 20px of top
   margin — so the intro block and the hero mosaic above it do not move. Nothing
   to declare here; this note records that the absence is deliberate. */

/* ---- Building pages -------------------------------------------------------
   /apartmani-p1/ and /apartmani-p2/ keep building-title switched off
   (inc/visibility.php), so the listing block's own <h1> is the page heading and
   the trail is printed inside .section-title__wrap.project above it
   (ml_render_residences_listing(), 'crumbs' => true).

   That wrap reserves 105px of top padding (40px on a phone), and THAT is what
   clears the fixed header — 112px tall at ≥992, 78px at 576–991, 104px at ≤575,
   against a section padding-top of only 100/80/60px. Printing into the pocket
   inherits the clearance the design already validated, so there is no header
   arithmetic here and no vendor breakpoint to keep in sync.

   The wrap is a flex row holding the heading and the filters button. The trail
   takes the whole first line of it; the row below is unchanged. flex-wrap is
   scoped to the building sections by data-section, so /nekretnine/ keeps the
   no-wrap row it was designed with. */

.ml-res-section[data-section="building-units"] .section-title__wrap.project {
  flex-wrap: wrap;
}
.section-title__wrap.project > .ml-crumbs {
  flex: 0 0 100%;
  margin-bottom: 18px;
}

/* ===========================================================================
   Sold tag on the mega-menu thumbnail
   (template-parts/residences-mega.php).

   Sized to the real thumbnail, which was measured rather than guessed: 118×88
   at the desktop breakpoint. "PRODANO" at 9px/700 with this tracking is about
   62px including padding, so it sits inside the top-left corner with room to
   spare and never wraps.

   Colour is the same pairing the residence cards use for a sold badge —
   teal fill, white text — but written literally rather than through
   --text-inverse, because that token is redefined inside dark contexts
   (ml-theme.css:364 flips it to the teal itself) and the mega menu lives in the
   dark header. The chip carries its own background, so the pairing is fixed and
   should not follow the surrounding theme.
   =========================================================================== */

/* The thumb is `display: block` with `overflow: hidden` in ml-theme.css and no
   position, so it cannot contain an absolute child until it is told to. The
   hover zoom is a transform on the <img> alone, which is why the tag stays put
   while the picture moves under it. */
.ml-mega__thumb {
  position: relative;
}

.ml-mega__status {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 1;
  padding: 3px 6px;
  border-radius: 3px;
  background: var(--ml-teal-700, #17332e);
  color: #fff;
  font-family: var(--font-sans-next, inherit);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

/* The picture steps back once the residence is gone — the same treatment the
   listing cards get, so "sold" looks the same wherever it is met. Applied to
   the image, not the card, so the tag itself keeps full contrast. */
.ml-mega__card.is-sold .ml-mega__thumb img {
  filter: saturate(0.55) brightness(0.92);
}

/* =============================================================================
   Empty story slot (inc/units-render.php -> ml_story_figure_placeholder())

   Only ever in the DOM for an administrator with the image editor switched on;
   a visitor gets no <figure> at all, so none of this reaches the public site.

   The placeholder must occupy the same box a real figure would, or the admin
   would be judging a picture's fit against a space the wrong shape: it inherits
   the 16/10 and the radius from `.rd-story__figure img` and adds only the
   affordance. The caption stays visible — it is the one thing that says WHICH
   photograph belongs here.
   ========================================================================== */
.rd-story__figure--empty .rd-story__slot {
  cursor: pointer;
  background-color: var(--ml-sage-050);
  object-fit: contain;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}
.rd-story__figure--empty .rd-story__slot:hover {
  opacity: 1;
}
/* Dimmed to match, so the row does not read as a finished figure with a caption
   under it. Restored on hover with the image, as one target. */
.rd-story__figure--empty figcaption {
  opacity: 0.6;
}
.rd-story__figure--empty:hover figcaption {
  opacity: 1;
}