/* ==========================================================================
   trpe.co.uk — hover menu size only (14 Sept 2026)
   The navigation bar keeps its original transparency; nothing about the bar
   itself is changed here.

   The problem: the hover panel opened enormous — 96px padding top AND bottom,
   a 32px margin on every row, 40px links, and a 497px-tall featured photo.
   ========================================================================== */

/* the panel */
.header .uk-navbar-dropdown{
  padding-top:26px !important;
  padding-bottom:30px !important;
}

/* the rows: kill the 32px stacking margin, let padding do the spacing */
.header .uk-navbar-dropdown-nav > li{margin-top:0 !important}
.header .uk-navbar-dropdown-nav > li > a{
  font-size:19px !important;
  line-height:1.3 !important;
  font-weight:400 !important;
  padding:10px 0 !important;
  min-height:0 !important;
  display:flex;
  align-items:center;
  gap:18px;
}
/* the long 50px arrow shrinks with the text */
.header .uk-navbar-dropdown-nav > li > a svg{width:26px;height:10px;margin:0 !important}

/* the featured property card alongside the links */
.header .uk-navbar-dropdown .property-item{max-width:380px;margin-left:auto}
.header .uk-navbar-dropdown .property-item img{
  height:240px !important;
  width:100% !important;
  object-fit:cover !important;
}
.header .uk-navbar-dropdown .property-item h3{font-size:21px !important;font-weight:600 !important}
.header .uk-navbar-dropdown .property-item h6{font-size:14px !important}
.header .uk-navbar-dropdown .property-item .property-overlay{padding:16px !important}

/* this theme's `uk-grid-80@s` shifts a row 80px left but only pads it back 40px */
.header .uk-navbar-dropdown [class*="uk-grid-80"]{margin-left:-40px !important}

/* ---- three listing cards in the Sales / Lettings menus (14 Sept 2026) ---- */
.header .uk-navbar-dropdown .menu-props{
  display:none;            /* one row per property type; JS shows the hovered one */
  gap:14px;
  justify-content:flex-end;
}
.header .uk-navbar-dropdown .menu-props.is-on{display:flex}
.header .uk-navbar-dropdown .menu-prop{
  position:relative;
  display:block;
  width:210px;
  aspect-ratio:5/6;
  border-radius:14px;
  overflow:hidden;
  flex:none;
}
.header .uk-navbar-dropdown .menu-prop-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.header .uk-navbar-dropdown .menu-prop:hover .menu-prop-img{transform:scale(1.05)}
.header .uk-navbar-dropdown .menu-prop-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,11,16,0) 34%,rgba(8,11,16,.85) 100%);
}
.header .uk-navbar-dropdown .menu-prop-meta{
  position:absolute;left:0;right:0;bottom:0;
  padding:14px;display:flex;flex-direction:column;gap:2px;color:#fff;
}
.header .uk-navbar-dropdown .menu-prop-price{font-size:15px;font-weight:700;line-height:1.2}
.header .uk-navbar-dropdown .menu-prop-price small{font-size:11px;font-weight:500;opacity:.8}
.header .uk-navbar-dropdown .menu-prop-name{
  font-size:13.5px;font-weight:500;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.header .uk-navbar-dropdown .menu-prop-area{font-size:11.5px;opacity:.72}
@media(max-width:1300px){
  .header .uk-navbar-dropdown .menu-prop{width:170px}
}

/* ---- hovering a property type swaps the cards, without JavaScript ----
   The links column and the card rows are siblings inside the menu's grid, so
   :has() can do this on its own. Safari 15.4+ / Chrome 105+. */
.header .uk-navbar-dropdown .uk-grid > div:has(a[data-props="apartments"]:hover) ~ .menu-props,
.header .uk-navbar-dropdown .uk-grid > div:has(a[data-props="apartment"]:hover) ~ .menu-props{
  display:none;
}
.header .uk-navbar-dropdown .uk-grid > div:has(a[data-props="apartments"]:hover) ~ .menu-props[data-group="apartment"],
.header .uk-navbar-dropdown .uk-grid > div:has(a[data-props="apartment"]:hover) ~ .menu-props[data-group="apartment"]{
  display:flex;
}
/* the type links that have no listings behind them keep showing the full set */
.header .uk-navbar-dropdown .uk-grid > div:has(a[data-props="all"]:hover) ~ .menu-props{display:none}
.header .uk-navbar-dropdown .uk-grid > div:has(a[data-props="all"]:hover) ~ .menu-props[data-group="all"]{display:flex}

/* a type with nothing listed says so, rather than leaving the last cards up */
.header .uk-navbar-dropdown .menu-empty{
  align-self:center;
  max-width:280px;
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.55;
  text-align:right;
}
.header .uk-navbar-dropdown .menu-empty a{
  display:block;
  margin-top:6px;
  color:#fff;
  text-decoration:underline;
}

/* every type link swaps the row, including the ones with nothing behind them */
.header .uk-navbar-dropdown .uk-grid > div:has(a[data-props="penthouses"]:hover) ~ .menu-props{display:none}
.header .uk-navbar-dropdown .uk-grid > div:has(a[data-props="penthouses"]:hover) ~ .menu-props[data-group="penthouse"]{display:flex}

/* the hover/active underline sat at the bottom of a 112px-tall link box, a long
   way under the word. Put it just below the text instead. */
.header .uk-navbar-nav > li > a:after{
  bottom:auto !important;
  top:calc(50% + 15px) !important;
  height:2px !important;
}


}

/* ==========================================================================
   The four tiles (Buyer Process / Seller Process / Areas / Developments) on the
   Sales and Lettings pages: the theme gives each one a 516px minimum height, so
   two rows run past a full screen. (15 Sept 2026)
   ========================================================================== */
.tile.uk-padding-top-96\@s{padding-top:56px !important}
.tile .uk-accordion li{
  min-height:0 !important;
  padding:26px 22px !important;
}
@media(min-width:640px){
  .tile .uk-accordion li{
    min-height:290px !important;
    padding:34px 40px !important;
  }
  .tile .uk-accordion li:hover .uk-accordion-content,
  .tile .uk-accordion li.uk-open .uk-accordion-content{max-height:290px !important}
}
.tile .uk-accordion-title{
  font-size:clamp(20px,2.3vw,30px) !important;
  line-height:1.2 !important;
}
.tile .uk-accordion-content p{font-size:14.5px;line-height:1.6}

/* ==========================================================================
   Empty search results (15 Sept 2026) — a message, a way to get in touch, and
   what IS available, instead of a black screen.
   ========================================================================== */
.no-results{
  padding:26px 0 8px;
  max-width:760px;
}
.no-results-title{
  font-size:clamp(20px,2.2vw,27px) !important;
  font-weight:600;
  color:#fff !important;
  margin:0 0 10px;
  line-height:1.25;
}
.no-results-text{
  color:rgba(255,255,255,.68) !important;
  font-size:15.5px;
  line-height:1.6;
  margin:0 0 20px;
  max-width:52ch;
}
.no-results .cta.no-results-cta{
  display:inline-flex;
  margin-bottom:38px;
}
.no-results-sub{
  font-size:15px !important;
  font-weight:600;
  letter-spacing:.02em;
  color:#fff !important;
  margin:0 0 16px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
}
.no-results-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media(max-width:860px){.no-results-grid{grid-template-columns:1fr}}
.no-results-card{
  display:block;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .2s,transform .2s;
}
.no-results-card:hover{border-color:rgba(255,255,255,.45);transform:translateY(-2px)}
.no-results-media{display:block;aspect-ratio:16/11;overflow:hidden}
.no-results-media img{width:100%;height:100%;object-fit:cover}
.no-results-meta{display:block;padding:13px 15px 15px}
.no-results-price{display:block;font-size:16px;font-weight:700;color:#fff}
.no-results-name{
  display:block;font-size:13.5px;color:rgba(255,255,255,.82);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.no-results-area{display:block;font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}

/* the empty-state column fills the same height as the filters beside it:
   the grid rows share whatever space is left, and each card's photo stretches */
.sidebar-content .uk-width-expand{display:flex;flex-direction:column}
.sidebar-content .uk-width-expand > .uk-switcher{flex:1;display:flex;flex-direction:column}
.no-results{display:flex;flex-direction:column;flex:1}
.no-results-grid{grid-auto-rows:1fr;align-content:stretch}
.no-results-grid:last-of-type{flex:1}
.no-results-card{display:flex;flex-direction:column;height:100%}
.no-results-media{flex:1;min-height:120px;aspect-ratio:auto}
.no-results-meta{flex:none}

/* keep the CTA its own width, and size the card rows so three rows of listings
   finish level with the filters panel beside them */
.no-results .cta.no-results-cta{align-self:flex-start;width:auto}
.no-results-grid{grid-auto-rows:150px;gap:14px}
.no-results-card{min-height:0}
.no-results-media{min-height:0;overflow:hidden}
.no-results-meta{padding:9px 12px 11px}
.no-results-price{font-size:14.5px}
.no-results-name{font-size:12.5px}
.no-results-area{font-size:11px}
.no-results-sub{padding-top:16px;margin-bottom:12px}

/* let both card rows share whatever height the filters column sets, so the two
   columns finish level whichever is taller */
.no-results-grid{grid-auto-rows:1fr !important;min-height:0}
.no-results-grid{flex:1 1 0}
.no-results-card{min-height:0}
.no-results-media{min-height:70px}

/* both rows keep a real minimum so neither collapses while they share the space */
.no-results-grid{flex:1 1 auto !important;min-height:170px}

/* both columns finish on the same line: the filters panel stretches to the row
   height, and the empty-state block has no trailing padding of its own */
.sidebar-content .uk-width-auto\@l{display:flex;flex-direction:column}
.sidebar-content .uk-width-auto\@l > *{flex:1;display:flex;flex-direction:column}
.sidebar-content .property-filter{flex:1}
.no-results{padding-bottom:0}
.no-results-grid:last-of-type{margin-bottom:0}

/* the stretch has to run the whole way down: column -> switcher -> list item ->
   the empty-state block -> its last row of cards */
/* only the ACTIVE tab — this must not override UIkit hiding the map panel */
.sidebar-content .uk-switcher > li.uk-active{flex:1;display:flex;flex-direction:column;min-height:0}
.sidebar-content .property-filter--list{flex:1;display:flex;flex-direction:column;min-height:0}
.no-results{height:100%}
.no-results-grid:last-of-type{flex:1 1 auto !important}

/* the theme sets the filter column to z-index:-1 inline, which puts it behind
   the page and swallows clicks. Bring it back in front. */
.sidebar-content .uk-width-auto\@l{
  position:relative !important;
  z-index:2 !important;
}
.sidebar-content .uk-width-expand{position:relative;z-index:1}

/* ==========================================================================
   FOOTER SIZE (15 Sept 2026) — it ran to roughly 1,800px tall. The photo and
   the layout are untouched; only the spacing is tightened.
   ========================================================================== */
.footer{padding-bottom:28px !important}
.footer .form-container{padding:40px 36px !important;border-radius:18px}
.footer .footer-form h2{font-size:clamp(24px,2.6vw,34px) !important;line-height:1.15 !important}
.footer .footer-form .uk-form{margin-top:20px !important}
.footer .footer-form .form-item{margin-bottom:4px !important}
.footer .footer-form textarea{min-height:96px !important;height:96px !important}
.footer .footer-form .cta{margin-top:18px !important}
.footer hr{margin-top:40px !important;margin-bottom:40px !important}
.footer .newsletter-form{margin-top:24px !important}
.footer .newsletter-form p{margin-top:6px !important}
.footer .footer-logo{max-width:170px;height:auto}
.footer .primary-nav a{padding:3px 0 !important}
.footer .uk-margin-top-40{margin-top:20px !important}
.footer .uk-margin-top-64,
.footer .uk-margin-top-56{margin-top:26px !important}
.footer .secondary-nav{margin-top:22px !important}
.footer .copyright,
.footer .new-copyright{margin:6px 0 !important}
@media(max-width:959px){
  .footer .form-container{padding:28px 20px !important}
  .footer hr{margin-top:28px !important;margin-bottom:28px !important}
}

/* --- Get in Touch: the radio row hung outside the card ---------------------
   Theme bug: `.uk-grid-80@s` sets margin-left:-80px but its cells only get
   padding-left:40px, so that row sits 40px left of everything else. */
.footer .form-container [class*="uk-grid-80"]{margin-left:-40px !important}
.footer .form-container .uk-radio{
  width:18px !important;
  height:18px !important;
  margin:0 10px 0 0 !important;
  border:2px solid rgba(255,255,255,.85) !important;
  border-radius:50% !important;
  vertical-align:middle !important;
  background-image:none !important;
  flex:none;
}
.footer .form-container .uk-radio:checked{
  background-color:#fff !important;
  box-shadow:inset 0 0 0 3px rgba(10,14,22,.92);
}
.footer .form-container label{
  display:inline-flex !important;
  align-items:center;
  margin-right:26px;
  cursor:pointer;
}

/* --- the phone and email pills were smaller than their text --------------- */
.footer .footer-sublinks-align{
  display:inline-flex !important;
  align-items:center !important;
  gap:11px !important;
  border:1px solid rgba(255,255,255,.38) !important;
  border-radius:999px !important;
  padding:13px 22px !important;
  min-height:48px;
  margin-top:10px !important;
  font-size:15.5px !important;
  line-height:1.45 !important;
  white-space:nowrap;
  color:#fff !important;
  background:rgba(10,14,22,.28);
  width:auto !important;
  max-width:100%;
}
.footer .footer-sublinks-align:hover{border-color:#fff !important;background:rgba(10,14,22,.5)}
.footer .footer-sublinks-align svg{flex:none;width:17px;height:17px}

/* breathing room between the four tiles and the footer photo */
.tile{padding-bottom:72px !important}
@media(max-width:639px){.tile{padding-bottom:48px !important}}