/**
 * Theme Name: Intergerance
 * Theme URI: https://estatik.net
 * Description: Child theme of the Estatik Realtor Theme. Overrides selected template parts (e.g. template-parts/content/content-archive.php) without touching the parent theme.
 * Author: Yves Blatti
 * Template: Estatik-estatik-realtor-theme-c7679fbb0a83
 * Version: 1.1.24
 * Text Domain: ert
 */

/* =========================================================
   Design tokens — derived from the Intergerance logo
   ========================================================= */
:root {
    --ig-teal: #00a79d;        /* logo monogram accent */
    --ig-teal-dark: #007771;   /* hover / pressed state */
    --ig-ink: #2e2e30;         /* headings, strong text */
    --ig-gray: #4f4f51;        /* body text, logo lettering gray */
    --ig-gray-light: #9a9a9e;  /* muted text */
    --ig-bg: #fafeff;          /* very soft body background */
    --ig-bg-soft: #f7f8f8;     /* soft section backgrounds */
    --ig-bg-head: #eff4f6;     /* header backgrounds */
    --ig-purple: #A7005E;      /* purple color */

    --ig-font-heading: "Outfit", "Lato", sans-serif;
    --ig-font-body: "Inter", "Lato", sans-serif;
}

/* =========================================================
   Base typography
   ========================================================= */
body {
    font-family: var(--ig-font-body);
    color: var(--ig-gray);
    font-size: 17px;
    line-height: 1.6;
    background-color: var(--ig-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ig-font-heading);
    font-weight: 600;
    color: var(--ig-ink);
    line-height: 1.25;
}

h1 { font-size: 2.375rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }

@media (max-width: 767px) {
    h1 { font-size: 1.875rem; }
    h2 { font-size: 1.5rem; }
}

/* Headings that wrap a link (e.g. property card titles) keep the ink
   color and only pick up the accent on hover. */
h1 a, h2 a, h3 a, h4 a {
    color: inherit;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
    color: var(--ig-teal);
}

a {
    color: var(--ig-teal);
}

a:hover {
    color: var(--ig-teal-dark);
}

/* =========================================================
   Header navigation
   ========================================================= */

#header{
    background-color: var(--ig-bg-head);
    border: none;
}

#header .navbar-nav > li a {
    font-family: var(--ig-font-heading);
    font-weight: 500;
    font-size: 24px;
    text-transform: none;
    color: var(--ig-gray);
}

#header .navbar-nav > li a:hover,
#header .navbar-nav > li.current-menu-item > a {
    color: var(--ig-teal);
}

/* =========================================================
   Buttons
   Selector list mirrors the parent theme's .btn-light rules so the
   child stylesheet (loaded after it) wins at equal specificity.
   ========================================================= */
.btn-light,
.btn.btn-light,
.comment-reply-link.btn-light,
.es-btn.btn-light,
.wpcf7-submit.btn-light,
a.btn.btn-light {
    color: #fff;
    background: var(--ig-teal);
    border: none !important;
    border-radius: 6px !important;
    font-family: var(--ig-font-heading);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.btn-light:hover,
.btn.btn-light:hover,
.comment-reply-link.btn-light:hover,
.es-btn.btn-light:hover,
.wpcf7-submit.btn-light:hover,
a.btn.btn-light:hover {
    color: #fff;
    background: var(--ig-teal-dark);
    border-color: var(--ig-teal-dark);
}

/* =========================================================
   Page & section titles
   Parent renders .page-title / .widget-title at 40px weight 300,
   flanked by full-width black hairlines (::before/::after) that read
   as stray lines across the layout. Soften both.
   ========================================================= */
.page-title,
.so-panel:not(.es-widget):not(.widget_ert-property-carousel-widget):not(.widget_ert-properties-sidebar-list-widget) .widget-title {
    font-weight: 600;
    font-size: 32px;
    color: var(--ig-ink);
    text-align: left;
}

.page-title:after,
.page-title:before,
.so-panel:not(.es-widget):not(.widget_ert-property-carousel-widget):not(.widget_ert-properties-sidebar-list-widget) .widget-title:after,
.so-panel:not(.es-widget):not(.widget_ert-property-carousel-widget):not(.widget_ert-properties-sidebar-list-widget) .widget-title:before {
    border: none;
    display: none;
}

/* Static page title (e.g. "À propos"), rendered as h2.entry-title. */
.page .entry-header .entry-title {
    font-size: 2.25rem;
    margin: 30px 0 25px;
}

/* Drop the decorative hairline before the page title (keeps the
   trailing one), so the title aligns flush left. */
.entry-header .entry-title::before {
    content: none;
}

/* =========================================================
   Static page content (.entry-content)
   Width is constrained on direct children only: SiteOrigin-built
   pages (home…) wrap everything in panel divs, so their layout is
   unaffected.
   ========================================================= */
/*
DISABLED
.page .entry-content > p,
.page .entry-content > h2,
.page .entry-content > h3,
.page .entry-content > h4,
.page .entry-content > ul,
.page .entry-content > ol {
    max-width: 70ch;
}
*/


/* Section headings get a short brand-colored bar underneath. */
.page .entry-content h2 {
    margin: 1.6em 0 0.8em;
    padding-bottom: 0.4em;
    position: relative;
}

.page .entry-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: var(--ig-teal);
}

/* Custom teal bullets for top-level lists. */
.page .entry-content ul {
    list-style: none;
    padding-left: 0;
}

.page .entry-content ul > li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.45em;
}

.page .entry-content ul > li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--ig-teal);
}

/* =========================================================
   Word breaking
   Parent theme and Estatik use word-break:break-all in several spots,
   which cuts French words mid-letter. Restore normal breaking; long
   unbreakable tokens (URLs…) still wrap via overflow-wrap. The body
   prefix outweighs the original rules regardless of load order.
   ========================================================= */
body .es-property-single-fields li,
body .es-widget-wrap .es-widget__title,
body .es-request-form .es-widget__title,
body .es-listing .es-price {
    word-break: normal;
    overflow-wrap: break-word;
}

/* =========================================================
   Property edit shortcut (pencil after the title, editors only)
   ========================================================= */
.ig-edit-link {
    display: inline-block;
    vertical-align: baseline;
    margin-left: 8px;
    color: var(--ig-gray-light);
}

.ig-edit-link svg {
    width: 0.65em;
    height: 0.65em;
}

.ig-edit-link:hover {
    color: var(--ig-teal);
}

/* Belt and braces: never on the TV (it is logged out anyway). */
body.is-kiosk .ig-edit-link {
    display: none;
}

/* =========================================================
   TV kiosk mode (?kiosk=1 on a property page)
   Full-screen display: hide the site chrome.
   ========================================================= */
body.is-kiosk #header,
body.is-kiosk footer,
body.is-kiosk #wpadminbar,
body.is-kiosk .breadcrumb {
    display: none !important;
}

body.is-kiosk {
    margin-top: 0 !important;
    cursor: none; /* no pointer on a TV */
}

body.is-kiosk .es-property__content {
    margin-top: 50px;
}

/* =========================================================
   Contact page blocks (markup lives in the page content)
   ========================================================= */
.ig-contact-info {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 10px 0 25px;
}

.ig-contact-info__item {
    flex: 1 1 220px;
    background: var(--ig-bg-soft);
    border-radius: 10px;
    padding: 22px 24px;
}

.ig-contact-info__label {
    display: block;
    font-family: var(--ig-font-heading);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ig-teal);
    margin-bottom: 6px;
}

.ig-contact-info__value {
    font-size: 17px;
    color: var(--ig-ink);
}

.ig-contact-info__value a {
    color: var(--ig-ink);
}

.ig-contact-info__value a:hover {
    color: var(--ig-teal);
}

/* Team grid — centered within the (wider) content column. */
.ig-team {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 10px auto 40px;
}

@media (max-width: 575px) {
    .ig-team {
        grid-template-columns: 1fr;
    }
}

.ig-team__member {
    text-align: center;
}

.ig-team__photo {
    /* height:auto is required: the img tags carry a height="400"
       attribute that would otherwise stretch them into ovals. */
    display: block;
    margin: 0 auto;
    width: min(200px, 100%);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
}

.ig-team__name {
    font-size: 1.125rem;
    margin-top: 14px;
}

/* =========================================================
   Property archive cards
   ========================================================= */

/* Card container: replace the hairline border look with a soft
   shadow + rounded corners, deepened on hover. Applied to __inner
   (unique per card) because .ert-property-item appears on two
   nested wrappers in the archive markup, doubling the effect. */
.es-properties__list .ert-property-item__inner {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(46, 46, 48, 0.08);
    transition: box-shadow 0.2s ease;
}

.es-properties__list .ert-property-item__inner:hover {
    box-shadow: 0 8px 24px rgba(46, 46, 48, 0.14);
}

.ert-property-item .ert-property-item__content {
    border: none;
}

.ert-listing.es-listings--list .ert-property-item__content-wrap .ert-property-item__footer {
    padding-top: 5px;
}

/* Price overlay: stretch it across the image bottom with a dark
   gradient scrim so the white price stays readable on bright photos.
   Parent positions it absolute at bottom:10px/left:10px. */
.ert-property-item .ert-property-item__image .ert-property-item__image-price {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 48px 16px 14px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.ert-property-item .ert-property-item__image .ert-property-item__image-price .es-price {
    font-family: var(--ig-font-heading);
    font-weight: 600;
    font-size: 26px;
    font-variant-numeric: tabular-nums;
}

/* No-image fallback has a light background: drop the scrim there. */
.ert-property-item .ert-property-item__image.ert-no-image .ert-property-item__image-price {
    background: none;
}

/* Listing label badge ("À LOUER", "À VENDRE"…). The term color is
   printed as an inline style by the plugin, hence the !important.
   (Alternative: set the label color in wp-admin under Estatik labels.) */
.ert-property-item .es-badges .es-badge {
    background: var(--ig-teal) !important;
    border-radius: 4px;
}

.ert-property-item .es-badges .es-badge a {
    color: #fff;
    font-family: var(--ig-font-heading);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Meta fields (beds, baths, area): brand-colored icons. The plugin
   inlines the SVGs with a hardcoded gray fill on their paths. */
.ert-property-item__fields svg path {
    fill: var(--ig-teal);
}

.ert-property-item__fields .col-auto,
.ert-property-item__fields .col-12 {
    color: var(--ig-gray);
}

/* Hide property types */
.ert-property-types{
    display: none !important;
}

/* Excerpt: shorter clamp so the card keeps a scannable height. */
.es-properties__list .ert-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 7;
    overflow: hidden;
    font-size: 15px;
    color: var(--ig-gray);
}

@media screen and (max-width:1200px) {
    .es-properties__list .ert-excerpt {
        -webkit-line-clamp: 4;
    }
}

.ert-property__price {
    margin-top: 10px;
}

.ert-property-item .ert-property-item__content .ert-excerpt {
    color: var(--ig-gray);
}

.badge.badge-light {
    color: white;
}

/* Hide Homepage badge, as it's only a hack for homepage selection */
.badge-homepage {
    display: none !important;
}

footer{
    background-color: var(--ig-teal-dark);
    border: none;
    color: white;
}

footer a{
    color: white;
    text-decoration: underline;
}

footer a:hover{
    color: white;
    text-decoration: underline;
}