/* ==========================================================================
   NearStay — theme-specific overrides on top of base.css (the cloned system)
   Only additions/rebrand hooks live here; base.css carries the exact layout.
   ========================================================================== */

/* Text logo fallback when no custom logo image is set */
.hnp-logo-text{
  font-family: var(--font-family, "DM Sans", Helvetica, Arial);
  font-weight: 700; font-size: 26px; line-height: 1;
  color: #fff; letter-spacing: .2px; white-space: nowrap; display: inline-block;
}
/* Keep the logo hard-left and the nav on the SAME row, right-aligned. base.css has
   a generic .logo{width:100%;display:flex;justify-content:center} rule that stretches
   the logo full-width (which drops the nav onto a second line) — override decisively
   and force the header into a single centred flex row. */
.header .header-container{
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
  align-items: center !important; justify-content: space-between !important;
  gap: 24px; text-align: left !important;
}
.header .header-container > .logo,
.header .logo{
  width: auto !important; height: auto !important; max-width: none !important;
  flex: 0 0 auto !important;
  display: inline-flex !important; align-items: center;
  justify-content: flex-start !important;
  margin: 0 !important;
}
.header .header-container > .content{
  flex: 0 1 auto !important; width: auto !important; margin: 0 !important;
}
.header .menu_container{
  display: flex !important; flex-direction: row !important; align-items: center !important;
}
.header .logo img{ max-height: var(--logo-height, 44px); width: auto !important; height: auto; }

/* The map is a JS/WebGL widget. Until a map provider key is set, show a clean
   static placeholder in its exact slot instead of an empty box. */
.map_container.is-placeholder{
  position: relative; min-height: 420px; border-radius: 6px; overflow: hidden;
  background: #e6edf0 linear-gradient(135deg,#e9eff2,#d7e2e7);
}
.map_container.is-placeholder > *{ display: none !important; }
.map_container.is-placeholder::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(#c4d3da 1px,transparent 1px),linear-gradient(90deg,#c4d3da 1px,transparent 1px);
  background-size:46px 46px;
}
.map_container.is-placeholder::after{
  content: attr(data-label); position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; color:#5b7683; font-weight:600;
  font-size:15px; font-family: var(--font-family,"DM Sans",Helvetica,Arial); letter-spacing:.02em;
}

/* Optional: kill link underlines site-wide (Customizer toggle adds body.no-underlines) */
body.no-underlines a,
body.no-underlines .hotel_card .hotel_details .title:hover{ text-decoration: none !important; }

/* Guides (listicle) — keep the theme working even before base.css classes are matched */
.hotel_card .hotel_details .buttons .btn.book{ background: var(--col-primary); color:#fff; }

/* Keep the strapline below the gallery in the flex-ordered .hotel_details
   (base.css orders breadcrumbs:1, gallery:2, details:3; strapline defaults to 0). */
.hotel_page .hotel_details .strapline{ order: 4; width: 100%; }

/* Accent colour hook (Customizer) — used on primary buttons/badges if desired */
:root{ --ns-accent: var(--col-primary); }

/* Footer social icons — white glyphs (thehotelguru .social_bar uses <img>; we use inline SVG) */
.footer .social_bar a{ color:#fff; display:inline-flex; align-items:center; justify-content:center; }
.footer .social_bar a svg{ width:100%; height:100%; fill:currentColor; display:block; }
.footer .social_bar a:hover{ opacity:.75; }

/* Footer logo — keep it small and top-left. Override both the generic
   .logo{width:100%;justify-content:center} rule and base.css's two-image sizing. */
.footer .logo{
  width:auto !important; height:auto !important; max-width:none !important;
  display:inline-flex !important; align-items:center;
  justify-content:flex-start !important;
  grid-column:1 !important; justify-self:start;
  margin:0 0 24px 0 !important;
}
.footer .logo img,
.footer .logo .custom-logo{ width:auto !important; height:var(--logo-height,44px) !important; max-height:52px; }
.footer .logo .hnp-logo-text{ font-size:24px; color:#fff; }

/* Footer grid — top-align the two columns and pin copyright left / socials right,
   so the layout stays correct now that the language flags are gone. */
.footer .footer_content{ align-items:start; }
.footer .footer_content > ul{ grid-column:1; justify-self:start; }
.footer .footer_content .copyright{ grid-column:1; justify-self:start; }
.footer .footer_content .social_bar{ grid-column:2; justify-content:flex-end; }

/* Search form band */
.search-form{ display:flex; gap:10px; align-items:center; }
.search-form .search-field{
  flex:1; padding:12px 14px; border:1px solid var(--col-mid-grey,#d8d8d8);
  border-radius:8px; font-family:var(--font-family,"DM Sans",Helvetica,Arial); font-size:15px;
}

/* Listing templates (archive.php / index.php) put the page heading in the left rail
   (3fr) of the shared `.hotel_list_content` grid and the card feed in the right (7fr),
   so every headline in the theme sits on the left. */
.hotel_list .hotel_list_content .hotel_list_head h1{ margin:0; }

/* Listicle posts (single.php) — price tier badge on the card title + intro spacing.
   The card itself reuses thehotelguru's `.hotel_card` (empty `.skeleton` = grey photo
   placeholder for the graceful, data-light version). */
.ns-price-tier{ color:var(--col-red,#eb4335); font-size:.8em; font-weight:600; margin-left:6px; letter-spacing:1px; }
.listicle-intro{ margin-bottom:10px; }
.hotel_list_content .hotel_list_body .hotel_cards{ margin-top:6px; }