/* ============================================================
   Elite Property — enhancement layer
   Loaded LAST (via template/header.php) so it overrides base CSS.
   Non-destructive polish: typography, buttons, cards, spacing,
   vendor-form separation, and responsive behaviour.
   Safe to revert by removing the <link> in template/header.php.
   ============================================================ */

:root{
    --ep-accent:   #65cdff;   /* light-blue brand accent */
    --ep-blue:     #1f8fc7;   /* action blue (readable on white) */
    --ep-blue-dk:  #17739f;   /* hover */
    --ep-navy:     #000033;   /* footer / hero overlays */
    --ep-heading:  #12224a;   /* headings */
    --ep-text:     #4a4a4a;
    --ep-muted:    #7b8299;
    --ep-bg-soft:  #f5f7fa;   /* light section background */
    --ep-border:   #e7e9ef;
    --ep-shadow:   0 6px 24px rgba(16,34,84,0.08);
    --ep-radius:   10px;
    --ep-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Base & typography ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
body{
    font-family: var(--ep-font) !important;
    color: var(--ep-text);
    line-height: 1.65;
    font-size: 15px;
}
img{ max-width: 100%; height: auto; }
a{ color: var(--ep-blue); }
a:hover, a:focus{ color: var(--ep-blue-dk); }

h1,h2,h3,h4,h5{ font-family: var(--ep-font); color: var(--ep-heading); line-height: 1.25; }
h1{ font-weight: 300; }
h2{ font-weight: 400; margin-bottom: .5em; }
h3{ font-weight: 500; }
h4{ font-weight: 600; }

/* Section title helper */
.ep-section{ padding: 84px 0; }
.ep-section--soft{ background: var(--ep-bg-soft); }
.ep-section-head{ text-align: center; max-width: 720px; margin: 0 auto 40px; padding: 0 15px; }
.ep-section-head h2{ font-size: 30px; margin: 0 0 12px; }
.ep-section-head p{ color: var(--ep-muted); font-size: 17px; margin: 0; }
.ep-accent-rule{ width: 70px; height: 3px; background: var(--ep-accent); border-radius: 3px; margin: 16px auto 0; }

/* ---------- Buttons (unified) ---------- */
.btn{
    border-radius: 8px !important;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 10px 24px;
    border: 1px solid transparent;
    transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active{ transform: translateY(1px); }
.btn-lg{ padding: 13px 34px; font-size: 16px; }

.btn-primary{ background-color: var(--ep-blue); border-color: var(--ep-blue); color: #fff; }
.btn-primary:hover, .btn-primary:focus{ background-color: var(--ep-blue-dk); border-color: var(--ep-blue-dk); color: #fff; box-shadow: 0 6px 16px rgba(31,143,199,.28); }

.btn-success{ background-color: #2fa36b; border-color: #2fa36b; color: #fff; }
.btn-success:hover, .btn-success:focus{ background-color: #268257; border-color: #268257; color: #fff; box-shadow: 0 6px 16px rgba(47,163,107,.28); }

.btn-default{ background-color: #fff; border-color: var(--ep-border); color: var(--ep-heading); }
.btn-default:hover, .btn-default:focus{ border-color: var(--ep-accent); color: var(--ep-blue-dk); }

/* ---------- Forms ---------- */
.form-control{
    border-radius: 8px !important;
    border: 1px solid #d7dbe6;
    box-shadow: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus{
    border-color: var(--ep-accent) !important;
    box-shadow: 0 0 0 3px rgba(101,205,255,.18) !important;
}

/* ---------- Cards ---------- */
.ep-card{
    background: #fff;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    box-shadow: var(--ep-shadow);
    padding: 30px;
}

/* ---------- Readable content pages (about / legal) ---------- */
.ep-content{ max-width: 900px; margin: 0 auto; padding: 10px 20px 20px; }
.ep-content h1{ font-size: 32px; margin: 0 0 6px; }
.ep-content .ep-lead{ color: var(--ep-muted); font-size: 18px; margin-bottom: 30px; }
.ep-content h4{ color: var(--ep-heading); margin: 26px 0 8px; font-size: 18px; }
.ep-content p{ margin: 0 0 14px; }
.ep-page-head{ text-align: center; padding: 45px 15px 10px; }
.ep-page-head h1{ font-size: 34px; margin: 0 0 10px; color: var(--ep-heading); font-weight: 300; }
.ep-page-head p{ color: var(--ep-muted); font-size: 17px; margin: 0; }

/* ---------- HOME hero ---------- */
/* ---------- Header navigation (clean, centered, evenly spaced) ---------- */
.elite-header-menu { height: auto !important; }
.elite-header-menu > div { width: auto !important; max-width: 1100px; margin: 0 auto !important; padding: 0 15px; }
.elite-header-menu ul { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 !important; padding: 0; list-style: none; }
.elite-header-menu ul li { float: none !important; padding: 0 !important; margin: 0; }
.elite-header-menu ul li a {
    display: block; padding: 19px 22px !important;
    font-size: 15.5px !important; font-weight: 600; letter-spacing: 1.2px;
    text-transform: uppercase; color: #fff !important; text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.elite-header-menu ul li a:hover { background: rgba(255,255,255,.18); color: #fff !important; text-decoration: none; }
@media (max-width: 767px) {
    .elite-header-menu ul li a { padding: 14px 15px !important; font-size: 14px !important; letter-spacing: .8px; }
}

.elite-bg{ position: relative; display: flex; align-items: center; justify-content: center; }
/* Dark gradient overlay so hero text is always readable over the photo */
.elite-bg::before{
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(6,12,30,.72) 0%, rgba(6,12,30,.48) 45%, rgba(6,12,34,.82) 100%);
}
.ep-hero-inner{
    position: relative; z-index: 2;
    max-width: 1040px; margin: 0 auto; padding: 60px 20px; text-align: center; color: #fff;
}
.ep-hero-inner h1{ color:#fff; font-size: 48px; font-weight: 600; letter-spacing: -.5px; text-shadow: 0 2px 14px rgba(0,0,0,.45); margin: 0 0 18px; line-height: 1.15; }
.ep-hero-inner .ep-hero-sub{ color:#e6ecf7; font-weight: 300; font-size: 19px; line-height: 1.65; max-width: 640px; margin: 0 auto 36px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.ep-hero-actions{ display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 0 auto; }
/* All four cards share one consistent secondary style (dark near-solid panel) */
.ep-hero-btn{
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 210px; min-height: 150px; padding: 24px 16px; box-sizing: border-box;
    background: rgba(0,20,50,0.72);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px; color: #fff; text-decoration: none; text-align: center;
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
    transition: background .15s ease, transform .12s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
}
.ep-hero-btn .icon-stack, .ep-hero-btn .fa, .ep-hero-btn .glyphicon{ font-size: 40px; margin-bottom: 12px; color: var(--ep-accent); }
.ep-hero-btn span.ep-hero-label{ font-size: 17px; font-weight: 600; letter-spacing: .2px; }
.ep-hero-btn:hover, .ep-hero-btn:focus{
    background: rgba(0,20,50,0.86); border-color: rgba(255,255,255,.34); color:#fff; text-decoration: none;
    transform: translateY(-4px); filter: brightness(1.08); box-shadow: 0 14px 30px rgba(0,0,0,.36);
}
/* Free Valuation = primary CTA, same card family but brand-blue fill */
.ep-hero-btn[href="valuation"]{ background: var(--ep-blue); border-color: rgba(255,255,255,.28); }
.ep-hero-btn[href="valuation"] .glyphicon{ color: #fff; }
.ep-hero-btn[href="valuation"]:hover, .ep-hero-btn[href="valuation"]:focus{ background: var(--ep-blue-dk); border-color: #fff; }

/* ---------- HOME services strip ---------- */
.ep-services{ display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; max-width: 1080px; margin: 0 auto; padding: 0 15px; }
.ep-service{ flex: 1 1 300px; max-width: 340px; }
.ep-service .ep-card{ height: 100%; text-align: center; }
.ep-service .ep-ico{
    width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
    background: rgba(101,205,255,.15); color: var(--ep-blue);
    display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.ep-service h3{ font-size: 20px; margin: 0 0 10px; }
.ep-service p{ color: var(--ep-muted); margin: 0; }

/* ---------- HOME "Professional Property Services" 3-column block ----------
   Replaces the old floated columns that collapsed and let the vendor card
   overlap them. Flex layout = self-contained section, no overlap. */
.ep-home-services-wrap{ max-width: 1040px; margin: 0 auto; padding: 84px 20px 92px; }
.ep-home-services-head{ margin-bottom: 40px; }
.ep-home-services-head h2{ color: var(--ep-heading); margin: 0 0 6px; }
.ep-home-services-head i{ color: var(--ep-muted); }
.ep-home-services{
    display: flex; flex-wrap: wrap; gap: 30px;
    justify-content: center; align-items: flex-start;   /* top-aligned */
}
.ep-home-service{ flex: 1 1 260px; max-width: 320px; text-align: center; }
.ep-home-service h4{ color: var(--ep-heading); font-weight: 600; margin: 18px 0 8px; }
.ep-home-service p{ color: #666; margin: 0; line-height: 1.6; }
.ep-home-ico{
    width: 110px; height: 110px; border-radius: 50%; margin: 0 auto;
    background: var(--ep-accent);                        /* brand light blue */
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 24px rgba(101,205,255,.4);
}
.ep-home-ico .glyphicon{ font-size: 44px; color: #fff; }

/* ---------- Vendor Enquiry Form — its own section, separated from footer ---------- */
.vendor-section{
    background: #ffffff;                 /* white — detached from the navy footer */
    border-top: 1px solid var(--ep-border);
    padding: 88px 16px 104px;            /* generous room around the card */
    overflow: visible;
}
.vendor-card{
    max-width: 860px;
    margin: 0 auto 28px;                 /* bottom margin keeps card off the footer */
    background: #fff; border: 1px solid #dfe3ee;
    border-radius: 16px;                 /* all four corners */
    box-shadow: 0 10px 34px rgba(16,34,84,0.12);
    padding: 40px 34px 46px;             /* extra room under the Send button */
    box-sizing: border-box;
}
.vendor-card .vendor-title{ color: var(--ep-heading); font-weight: 400; font-size: 27px; margin: 0 0 6px; }
.vendor-card .vendor-subtitle{ color: var(--ep-muted); font-weight: 400; font-size: 16px; margin: 0 0 26px; }
.vendor-card .form-control{ margin-bottom: 16px; }
.vendor-card textarea.form-control{ height: 100%; min-height: 140px; }
.vendor-card .vendor-actions{ text-align: center; margin-top: 6px; }

/* ---------- Property listing cards (to-sale / to-let / home) ---------- */
[class*="col-xs-"] > div[style*="background: white"],
[class*="col-xs-"] > div[style*="background:white"]{
    border: 1px solid var(--ep-border) !important;
    border-radius: 12px;
    box-shadow: var(--ep-shadow);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
[class*="col-xs-"] > div[style*="background: white"]:hover,
[class*="col-xs-"] > div[style*="background:white"]:hover{
    box-shadow: 0 12px 30px rgba(16,34,84,.14);
    transform: translateY(-4px);
}
.latest-property-item img{ width: 100%; height: auto; display: block; }
/* card body: title + price */
[class*="col-xs-"] > div[style*="background: white"] > div:last-child{ padding: 16px 16px 4px; }
.latest-property-item + div h5,
.latest-property-item ~ div h5{ padding: 0 4px; }
.latest-property-item ~ div h5:first-child,
.latest-property-item + div h5:first-child{ font-weight: 600; color: var(--ep-heading); font-size: 15px; margin: 0 0 6px; min-height: 38px; }
.latest-property-item ~ div h5.text-info,
[class*="col-xs-"] > div[style*="background: white"] h5.text-info{ color: var(--ep-blue) !important; font-weight: 700; font-size: 18px; margin: 0; }
/* listing grid: a touch more breathing room + tidy pagination */
#latest-property .row{ padding: 55px 40px !important; }
#latest-property .btn-default{ margin: 2px; }

/* ---------- Responsive: stack Bootstrap-3 col-xs on small screens ---------- */
/* Tablets: property grid 2-up */
@media (min-width: 768px) and (max-width: 991px){
    .col-xs-3{ width: 50% !important; }
    .col-xs-4{ width: 50% !important; }
    /* Hero cards: 2 x 2 grid on tablets */
    .ep-hero-actions{ max-width: 456px; }
}
/* Phones: stack everything full width, kill fixed widths that overflow */
@media (max-width: 767px){
    [class^="col-xs-"], [class*=" col-xs-"]{
        width: 100% !important;
        float: none !important;
    }
    .container, .row{ width: auto !important; }
    .ep-hero-inner h1{ font-size: 32px; }
    .ep-hero-inner .ep-hero-sub{ font-size: 16px; }
    /* Hero cards: stack full-width, icon + label centred */
    .ep-hero-actions{ max-width: 340px; }
    .ep-hero-btn{ width: 100%; max-width: 340px; min-height: 120px; padding: 22px 16px; flex-direction: column; }
    .ep-hero-btn .icon-stack, .ep-hero-btn .glyphicon{ margin-bottom: 10px; font-size: 34px; }
    /* header nav: let it wrap and centre instead of a fixed 626px block */
    .elite-header-menu > div{ width: auto !important; }
    .elite-header-menu ul{ text-align: center; }
    .elite-header-menu ul li{ float: none !important; display: inline-block; }
    .vendor-card{ padding: 26px 18px; }
    .ep-section{ padding: 56px 0; }
    /* Home services: stack full-width on phones */
    .ep-home-service{ flex: 1 1 100%; max-width: 360px; }
    .ep-home-services-wrap{ padding: 56px 18px 62px; }
}