/* ============================================================
   Miami Waterfront Estates — idx.css
   iHomefinder Optima Express: our context bar, cosmetic
   overrides of the plugin's markup, and the safety net.

   Loaded on the iHomefinder virtual pages (listing details,
   listing reports, search results, property organizer) and on
   the homepage, which embeds the toppicks feed. Enqueued after
   the plugin's own CSS (functions.php section 15).

     1  Our wrappers: the context bar and the page frame
     2  Plugin markup: type, color, borders, radius
     3  Safety net: a Twenty Twenty-Five fallback render

   THE RULE FOR SECTION 2: type, color, borders, radius,
   shadows and the plugin container's outer spacing only. Never
   display, float, width, height, grid, flex, position or
   aspect-ratio on anything the plugin prints: that is what
   dismantled its responsive grid on the Venetian site (it
   forced grid and aspect-ratio on guessed class names, and the
   feed fell apart into one card per row). Everything in
   section 2 is scoped to .idx-feed (homepage), .idx-content
   (IDX pages) and, in the safety-net case only, Twenty
   Twenty-Five's post-content wrapper, so none of it reaches the
   rest of the site.

   SUBSTRING SELECTORS ([class*="price"] and the like) are used
   for typography only, as on Venetian: a wrong match costs a
   font. Never use one for anything in the box model; on
   Venetian a [class*="ihf"][class*="map"] height rule caught
   every map marker and card badge and drew tall gray bars.

   Class names below marked "seen live" were confirmed on the
   Venetian site with this same plugin; the rest are the
   plugin's Bootstrap 3 base classes.
   ============================================================ */

/* ---------- 1. OUR WRAPPERS ----------
   These are our own elements, so layout is fine here. */
.idx-bar{
  background:var(--sand);
  border-bottom:1px solid var(--hair-soft);
}
.idx-bar-in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px 24px;
  min-height:60px;
  padding-block:8px;
}
.idx-back{
  display:inline-flex;
  align-items:center;
  align-self:stretch;   /* full bar height as the tap target */
  gap:10px;
  font-family:var(--f-mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  white-space:nowrap;
}
.idx-back:hover{ color:var(--surf); }
.idx-back .ico{ width:18px; height:18px; transition:transform .3s var(--ease); }
.idx-back:hover .ico{ transform:translate3d(-3px,0,0); }
.idx-bar-right{ display:flex; align-items:center; gap:18px; }
.idx-bar-phone{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  color:var(--ink);
  white-space:nowrap;
}
.idx-bar-phone .ico{ width:16px; height:16px; color:var(--surf); }
.idx-bar-cta{ min-height:42px; padding:0 18px; font-size:11px; }

/* On phones the header phone already sits in the top bar, so the bar keeps
   the way back and the showing button only. */
@media (max-width: 600px){
  .idx-bar-phone{ display:none; }
  .idx-bar-cta{ min-height:38px; padding:0 14px; }
  .idx-back{ font-size:11px; letter-spacing:.1em; }
}
/* 320px phones: "Back to listings" and the button don't fit side by side,
   so the button takes its own full-width row. */
@media (max-width: 374px){
  .idx-bar:not(.idx-bar--brand) .idx-bar-in{ flex-wrap:wrap; padding-block:4px 12px; }
  .idx-bar:not(.idx-bar--brand) .idx-back{ min-height:44px; }
  .idx-bar:not(.idx-bar--brand) .idx-bar-right{ flex:1 1 100%; }
  .idx-bar:not(.idx-bar--brand) .idx-bar-cta{ flex:1 1 auto; }
}

.idx-page{
  padding-block:clamp(28px, 4vw, 56px) clamp(56px, 7vw, 96px);
  background:var(--paper);
}

/* ---------- 2. PLUGIN MARKUP (cosmetic only) ---------- */
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content){
  font-family:var(--f-body);
  color:var(--ink);
  line-height:1.55;
}

/* Square corners everywhere in the plugin's markup, as on the rest of the
   site. Safe: border-radius never affects layout flow. */
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) *{ border-radius:0 !important; }

/* The plugin's outer container carries its own generous top padding, which
   stacked on our page frame (seen live on Venetian). Outer spacing only. */
:is(.idx-content, .mwe-idx-fallback .wp-block-post-content) :is(#ihf-main-container, [id^="ihf-main"]){
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Headings and prices in the display serif. */
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) :is(h1, h2, h3, [class*="price"], [class*="Price"]){
  font-family:var(--f-dsp) !important;
  font-weight:400;
  letter-spacing:-.008em;
  color:var(--ink);
}
:is(.idx-content, .mwe-idx-fallback .wp-block-post-content) h1{ line-height:1.1; }

/* MLS numbers, status, courtesy and disclaimer lines in the mono face
   (seen live: these substrings name the plugin's own classes). */
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) :is([class*="mls"], [class*="courtesy"], [class*="disclaimer"], [class*="status"], [class*="badge"]){
  font-family:var(--f-mono);
  letter-spacing:.06em;
}
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) :is(h4, h5, h6, label, .control-label){
  font-family:var(--f-body);
  color:var(--ink);
}

:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) a{ color:var(--surf); }
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) a:hover{ color:var(--ink); }

/* Buttons. The plugin's stock gray action bar reads unfinished (Venetian's
   finding), so every plugin button takes the site's ink with white text,
   pinned, and teal on hover. Outline (.btn-default) buttons stay outlined. */
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) :is(.btn, button, input[type="submit"], input[type="button"], a[class*="btn"]){
  font-family:var(--f-mono) !important;
  font-weight:500 !important;
  font-size:11.5px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  background-color:var(--ink) !important;
  background-image:none !important;
  border-color:var(--ink) !important;
  color:var(--white) !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) :is(.btn, button, input[type="submit"], input[type="button"], a[class*="btn"]):hover{
  background-color:var(--surf) !important;
  border-color:var(--surf) !important;
  color:var(--white) !important;
}
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) :is(a.btn-default, button.btn-default, .btn.btn-default){
  background-color:transparent !important;
  border-color:var(--ink) !important;
  color:var(--ink) !important;
}
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) :is(a.btn-default, button.btn-default, .btn.btn-default):hover{
  background-color:var(--ink) !important;
  color:var(--white) !important;
}

/* Form fields. */
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], select, textarea, .form-control){
  border-color:var(--hair);
  color:var(--ink);
  font-family:var(--f-body);
  box-shadow:none;
}
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) :is(input, select, textarea, .form-control):focus{
  border-color:var(--surf);
  box-shadow:0 0 0 1px var(--surf);
}

/* Feature tables: the site's sand banding in place of the stock gray
   (seen live on Venetian's detail pages). */
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) table th{
  background-color:var(--sand) !important;
  font-family:var(--f-mono) !important;
  font-size:10.5px !important;
  font-weight:500 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
  color:var(--ink) !important;
}
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) :is(table, td, th, hr, .nav-tabs, .nav-tabs > li > a){ border-color:var(--hair-soft) !important; }

/* Cards, panels, tabs, pagination: hairlines in the site's colors. */
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) :is(.panel, .well, .card, .thumbnail, .modal-content){
  border-color:var(--hair-soft);
  box-shadow:none;
}
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) .nav-tabs > li > a{ color:var(--ink); }
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) :is(.pagination > li > a, .pagination > li > span){ color:var(--ink); border-color:var(--hair-soft); }
:is(.idx-feed, .idx-content, .mwe-idx-fallback .wp-block-post-content) :is(.pagination > .active > a, .pagination > .active > span){
  background-color:var(--ink) !important;
  border-color:var(--ink) !important;
  color:var(--white) !important;
}

/* The listing-detail "« 1 of 54 »" navigation and the results pagination,
   centered with text-align only (seen live: these two wrapper classes).
   Venetian ALSO had to set display:flex on these wrappers and float:none on
   .ihf-page-number to center fully; those touch layout, so they are left
   out here by the project rule. If the control sits off-center once the
   feed is live, that is the known fix: ask before adding it. */
:is(.idx-content, .mwe-idx-fallback .wp-block-post-content) :is(.ihf-detail-navigation-wrapper, .ihf-pagination-wrapper){
  text-align:center;
}

/* ---------- 3. SAFETY NET ----------
   Only when Twenty Twenty-Five's own template rendered an iHomefinder page
   instead of idx-page.php (body.mwe-idx-fallback, set in functions.php
   section 15). Hides the block theme's own header and footer parts, which
   are Twenty Twenty-Five's markup, not the plugin's, and frames the content
   the way idx-page.php would. Inert on every normal page. */
body.mwe-idx-fallback :is(header.wp-block-template-part, footer.wp-block-template-part, .wp-block-post-title, .wp-block-post-date){
  display:none !important;
}
body.mwe-idx-fallback .wp-site-blocks{
  padding:0 !important;
  margin:0 !important;
  gap:0 !important;
}
body.mwe-idx-fallback .wp-site-blocks > *{ margin-block-start:0 !important; }
body.mwe-idx-fallback :is(.wp-block-post-content, .entry-content){
  max-width:var(--wrap);
  margin:0 auto !important;
  padding:clamp(28px, 4vw, 56px) var(--gutter) clamp(56px, 7vw, 96px) !important;
  font-family:var(--f-body);
  color:var(--ink);
}
.idx-bar--brand .idx-bar-in{ min-height:70px; }
.idx-bar--brand .idx-bar-brand{ margin-right:auto; }
.idx-bar--brand .idx-back{ margin-right:8px; }
@media (max-width: 760px){
  .idx-bar--brand .idx-back{ display:none; }
}
@media (max-width: 600px){
  .idx-bar--brand .idx-bar-in{ flex-wrap:wrap; }
  .idx-bar--brand .brand-sub{ display:none; }
  .idx-bar--brand .brand-mark{ font-size:20px; }
}

/* Final overrides (keep last). */
.idx-back,
.idx-bar-phone,
.idx-bar-cta,
.idx-bar-brand{ text-decoration:none !important; }