/*
 Theme Name:   Realar Child  
 Theme URI:    https://themeholy.com/wordpress/realar
 Description:  This is a child theme for Realar - WordPress Theme
 Author:       Themeholy
 Author URI:   https://themeforest.net/user/themeholy 
 Template:     realar
 Version:      2.0.0
 Tags:         two-columns, three-columns, left-sidebar, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu, theme-options, editor-style, featured-images, microformats, post-formats,  sticky-post, threaded-comments, translation-ready
 Text Domain:  realar-child
*/

/*  [ Add your custom css below ]
- - - - - - - - - - - - - - - - - - - - */

/* ------------------------------------------------------------------
   UI polish / bug-fix pass — preserve design tokens & layout language.
   Do not introduce new colours, fonts, or component styles here.
   ------------------------------------------------------------------ */

/* ---------- 1. Sticky header: visibility + stacking ---------- */

/*
  Theme sticky becomes `position: fixed` with z-index:auto. Content sections
  (contact cards, maps, heroes) paint over the nav. Keep the bar above page
  content without changing its look.
*/
.sticky-wrapper.sticky {
  z-index: 999;
}

/*
  When sticky becomes `position:fixed` it leaves normal flow and the header
  shell collapses to 0 height, so page content jumps under the bar. Mirror the
  menu-area height while sticky so the document keeps its place.
*/
.th-header:has(> .sticky-wrapper.sticky) {
  min-height: 119px;
}

@media (max-width: 991px) {
  .th-header:has(> .sticky-wrapper.sticky) {
    min-height: 80px;
  }
}

/*
  Header 2026 (`.pr-header` / elementor-6156) is a dark bar with white menu
  text. `.header-layout2 .sticky-wrapper.sticky` forces a white sticky
  background, which makes the white links invisible. Keep the brand dark
  surface on sticky so menu + CTA stay readable.
*/
.pr-header .sticky-wrapper.sticky,
.elementor-6156 .sticky-wrapper.sticky {
  background-color: var(--theme-color);
  background: var(--theme-color);
}

.pr-header .sticky-wrapper.sticky .main-menu > ul > li > a,
.elementor-6156 .sticky-wrapper.sticky .main-menu > ul > li > a {
  color: var(--white-color);
}

.pr-header .sticky-wrapper.sticky .main-menu ul li.menu-item-has-children > a:after,
.elementor-6156 .sticky-wrapper.sticky .main-menu ul li.menu-item-has-children > a:after {
  color: var(--white-color);
}

/* CTA on the dark sticky bar must keep light text (Elementor sets the fill). */
.pr-header .sticky-wrapper.sticky .header-button .th-btn,
.elementor-6156 .sticky-wrapper.sticky .header-button .th-btn {
  color: var(--white-color);
}

/* ---------- 2. SEO service cards: text / button collision ---------- */

/*
  Theme `.box-text { margin-bottom: -0.5em }` is intentional when a card ends
  in `.service-img`. ServiceGrid swaps that image for a CTA, so restore
  breathing room and equalise card heights via flex.
*/
.service-card.style2.service-card-with-cta {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}

.service-card.style2.service-card-with-cta .box-text {
  margin-bottom: 24px;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.service-card.style2.service-card-with-cta .th-btn {
  margin-top: auto;
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}

/* ---------- 3. Footer / contact icons: alignment + visibility ---------- */

/*
  Theme circles the icon with line-height centering. Inline SVG/img sizing
  varies (18×20 vs 16×16), so flex-center keeps every glyph optically middle
  without changing the circle size or border language.
*/
.th-widget-contact .info-box_text .icon {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
  vertical-align: top;
}

.th-widget-contact .info-box_text .icon img {
  display: block;
  width: auto;
  height: auto;
  max-width: 18px;
  max-height: 18px;
}

/*
  Footer New 2026 uses white-stroke SVGs on `--theme-color`. The base theme
  wash filter (`contrast(0) brightness(2)`) obliterates those strokes. Once
  `.footer-layout2` is attached (via css_classes), theme already sets
  filter:none — reinforce for `.pr-footer` dark columns specifically.
*/
.pr-footer .th-widget-contact .info-box_text .icon {
  border-color: rgba(164, 181, 186, 0.45);
  color: var(--light-color);
}

.pr-footer .th-widget-contact .info-box_text .icon img {
  -webkit-filter: none;
          filter: none;
}

.pr-footer .th-widget-contact .info-box_text {
  -webkit-box-align: flex-start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.pr-footer .th-widget-contact .info-box_text .details {
  margin-top: 0;
  padding-top: 2px;
}

/* Social icon grid: consistent vertical alignment in the copyright row */
.footer-layout2 .elementor-social-icons-wrapper {
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

/*
  Footer + page social icons MUST sit on one horizontal row.
  Migrated Elementor CSS sets `--grid-template-columns: repeat(0, auto)`,
  which stacks every icon. Override with !important so homepage and
  inner-page footers both win the cascade.
*/
.elementor-widget-social-icons .elementor-social-icons-wrapper.elementor-grid,
.elementor-social-icons-wrapper.elementor-grid,
.pr-social-icons.elementor-grid,
.footer-layout2 .elementor-social-icons-wrapper,
.pr-footer .elementor-social-icons-wrapper {
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: row !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
  -webkit-flex-wrap: wrap !important;
      -ms-flex-wrap: wrap !important;
          flex-wrap: wrap !important;
  -webkit-box-align: center !important;
  -webkit-align-items: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  gap: var(--grid-column-gap, 16px) !important;
  grid-template-columns: none !important;
  --grid-template-columns: repeat(4, auto) !important;
  width: auto !important;
}

.elementor-widget-social-icons .elementor-grid-item,
.pr-social-icons .elementor-grid-item,
.footer-layout2 .elementor-social-icons-wrapper .elementor-grid-item {
  display: -webkit-inline-box !important;
  display: -webkit-inline-flex !important;
  display: -ms-inline-flexbox !important;
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
  -webkit-flex: 0 0 auto !important;
      -ms-flex: 0 0 auto !important;
          flex: 0 0 auto !important;
}

.footer-layout2 .elementor-social-icon,
.elementor-widget-social-icons .elementor-social-icon {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* Blog list cards: override bare h2 (48px) — titles use .box-title at 24px. */
.blog-card .blog-title,
.blog-card h2.blog-title,
.blog-card h2.box-title,
.th-blog-wrapper .blog-card .box-title,
.th-blog-wrapper .blog-card h2 {
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;
  max-width: 386px;
  margin-top: 13px;
  margin-bottom: 0.5em;
}

/* ---------- 4. Contact page info cards (style2) icon centering ---------- */

.about-contact-grid.style2 .about-contact-icon {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  line-height: 1;
}

.about-contact-grid.style2 .about-contact-icon i {
  line-height: 1;
}

/* ---------- 5. Rent / feature cards with CTA (homepage Features style 2) ---------- */

.rent-card {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

.rent-card .box-text {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.rent-card .th-btn {
  margin-top: auto;
}