/* =====================================================================
   Eviction Legal Center theme (October 2026)
   Calm coastal palette: deep navy, sea teal, warm sand and a sunset accent.
   Loaded after the template styles so these rules win.
   ===================================================================== */
:root {
    --elc-navy: #1f3b57;
    --elc-navy-2: #2b4f72;
    --elc-teal: #2f7f86;
    --elc-teal-light: #e3f1f2;
    --elc-sun: #f28c28;
    --elc-sun-dark: #d9741a;
    --elc-sand: #f7f1e8;
    --elc-cream: #fcfaf6;
    --elc-text: #2d3742;
    --elc-muted: #5f6b77;
    --elc-border: #dfe5ea;
    --elc-radius: 12px;
    --elc-shadow: 0 6px 22px rgba(31, 59, 87, .08);
}

body {
    background: var(--elc-cream);
    color: var(--elc-text);
    font-family: "Poppins", Arial, sans-serif;
    line-height: 1.7;
}

/* ---------- Text ---------- */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 { color: var(--elc-navy); font-weight: 600; }
main h1, main .h1 { font-size: 2rem; margin-bottom: .75rem; }
main h2 { position: relative; padding-bottom: .35rem; margin-top: 1.6rem; }
main h2:not(.h4):not(.h5):not(.no-bar)::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px;
    border-radius: 3px; background: var(--elc-sun);
}
main .text-center h2::after, main h2.text-center::after { left: 50%; transform: translateX(-50%); }
p.lead { color: var(--elc-muted); }
.text-muted, .muted { color: var(--elc-muted) !important; }
a { color: var(--elc-teal); }
a:hover { color: var(--elc-navy); }
main ul li::marker { color: var(--elc-teal); }
hr { border-top-color: var(--elc-border); }

/* ---------- Navigation ---------- */
header .navbar {
    background: #fff !important;
    border-bottom: 0 !important;
    box-shadow: 0 2px 14px rgba(31, 59, 87, .07) !important;
    margin-bottom: 0 !important;
}
header::after {
    content: ""; display: block; height: 4px;
    background: linear-gradient(90deg, var(--elc-teal), #7fb7a4 45%, var(--elc-sun));
}
.navbar-brand { font-weight: 700; color: var(--elc-navy) !important; letter-spacing: .3px; }
.navbar-light .navbar-nav .nav-link { color: var(--elc-navy) !important; font-weight: 500; }
.navbar-light .navbar-nav .nav-link:hover { color: var(--elc-teal) !important; }
.dropdown-menu { border: 0; border-radius: 10px; box-shadow: var(--elc-shadow); }
.dropdown-item:hover { background: var(--elc-teal-light); color: var(--elc-navy); }

/* ---------- Page banner (illustration under the menu) ---------- */
.elc-hero {
    position: relative; height: 210px; margin-bottom: 1.75rem;
    background-size: cover; background-position: center bottom; background-repeat: no-repeat;
}
.elc-hero .elc-hero-tag {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px;
    background: rgba(255, 255, 255, .88); color: var(--elc-navy);
    border-radius: 999px; padding: .35rem 1.1rem; font-size: .92rem; font-weight: 500;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08); white-space: nowrap;
}
@media (max-width: 575px) {
    .elc-hero { height: 130px; }
    .elc-hero .elc-hero-tag { font-size: .8rem; bottom: 10px; }
}

/* ---------- Buttons ---------- */
.btn { border-radius: 8px; font-weight: 500; }
.btn-primary, .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--elc-sun) !important; border-color: var(--elc-sun) !important; color: #fff !important;
}
.btn-primary:hover, .btn-primary:focus { background: var(--elc-sun-dark) !important; border-color: var(--elc-sun-dark) !important; }
.btn-outline-primary { color: var(--elc-teal) !important; border-color: var(--elc-teal) !important; background: transparent; }
.btn-outline-primary:hover { background: var(--elc-teal) !important; color: #fff !important; }
.btn-dark { background: var(--elc-navy) !important; border-color: var(--elc-navy) !important; color: #fff !important; }
.btn-dark:hover { background: var(--elc-navy-2) !important; }
.btn-link { color: var(--elc-teal); }

/* ---------- Cards, panels, tables ---------- */
.card { border: 1px solid var(--elc-border); border-radius: var(--elc-radius); box-shadow: var(--elc-shadow); }
.elc-panel {
    background: #fff; border-radius: var(--elc-radius); box-shadow: var(--elc-shadow);
    padding: 1.5rem 1.6rem; margin-bottom: 1.5rem; border: 1px solid var(--elc-border);
}
.elc-panel-sand { background: var(--elc-sand); border-color: #efe3d0; }
.elc-panel-teal { background: var(--elc-teal-light); border-color: #cfe5e6; }
.bg-light { background: var(--elc-sand) !important; border-radius: var(--elc-radius); }
.alert-info { background: var(--elc-teal-light); border-color: #cfe5e6; color: var(--elc-navy); border-radius: 10px; }
.alert-warning { border-radius: 10px; }
.table { background: #fff; border-radius: 10px; overflow: hidden; }
.table thead th { background: var(--elc-navy); color: #fff; border: 0; font-weight: 500; }
.table-striped tbody tr:nth-of-type(odd) { background: #f6f9fb; }
.badge-warning { background: #ffe2c2; color: #8a4a0c; font-weight: 600; }
a.badge-warning:hover { background: var(--elc-sun); color: #fff; }
.list-group-item { border-color: var(--elc-border); }
.list-group-item-action:hover { background: var(--elc-teal-light); }

/* Feature tiles with an icon (used on the home page and elsewhere) */
.elc-tile {
    background: #fff; border-radius: var(--elc-radius); box-shadow: var(--elc-shadow);
    padding: 1.4rem; height: 100%; border-top: 4px solid var(--elc-teal); transition: transform .15s ease;
}
.elc-tile:hover { transform: translateY(-3px); }
.elc-tile .elc-icon {
    width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--elc-teal-light); color: var(--elc-teal); font-size: 26px; margin-bottom: .75rem;
}
.elc-tile.sun { border-top-color: var(--elc-sun); }
.elc-tile.sun .elc-icon { background: #fff0e0; color: var(--elc-sun-dark); }
.elc-tile.navy { border-top-color: var(--elc-navy); }
.elc-tile.navy .elc-icon { background: #e6edf4; color: var(--elc-navy); }
.elc-tile h3 { font-size: 1.1rem; }

/* Call to action band */
.elc-cta {
    background: linear-gradient(120deg, var(--elc-navy), var(--elc-teal));
    color: #fff; border-radius: var(--elc-radius); padding: 1.6rem 1.8rem; margin: 2rem 0;
}
.elc-cta h2, .elc-cta h3, .elc-cta strong { color: #fff; }
.elc-cta h2::after { background: #ffd2a3 !important; }
.elc-cta a:not(.btn) { color: #ffe3c4; text-decoration: underline; }
.elc-cta .btn-outline-light:hover { color: var(--elc-navy); }

/* ---------- Forms: readable on every background ---------- */
.form-control {
    background: #fff; color: var(--elc-text); border: 1px solid #c8d2db; border-radius: 8px;
}
.form-control:focus { border-color: var(--elc-teal); box-shadow: 0 0 0 3px rgba(47, 127, 134, .18); }
.form-control::placeholder { color: #8a96a3; opacity: 1; }
label { color: var(--elc-navy); font-weight: 500; }

/* The consultation form on light backgrounds (Contact page and everywhere except the dark home banner). */
.consultation .form-control {
    background: #fff !important; color: var(--elc-text) !important;
    border: 1px solid #c8d2db !important; height: 50px !important;
}
.consultation textarea.form-control { height: auto !important; }
.consultation .form-control::placeholder,
.consultation .form-control::-webkit-input-placeholder { color: #8a96a3 !important; }
.consultation .spam-check {
    background: var(--elc-teal-light); border: 1px solid #cfe5e6; border-radius: 10px; padding: .75rem 1rem;
}
.consultation .spam-check label { color: var(--elc-navy); font-weight: 500; margin-bottom: .4rem; }
.consultation .spam-check strong { color: var(--elc-sun-dark); font-size: 1.1rem; }

/* The home page banner form sits on a photo; keep white text there but make inputs solid. */
.ftco-consultation .consultation .form-control {
    background: rgba(255, 255, 255, .95) !important; color: var(--elc-text) !important; border: 0 !important;
}
.ftco-consultation .consultation .spam-check { background: rgba(255, 255, 255, .95); border: 0; }
.ftco-consultation .consultation p.small { color: #fff; }
.ftco-consultation .overlay { background: linear-gradient(120deg, rgba(31, 59, 87, .88), rgba(47, 127, 134, .75)) !important; opacity: 1 !important; }

/* ---------- Footer ---------- */
.ftco-footer.ftco-bg-dark { background: linear-gradient(180deg, #1c3550, #142739) !important; }
.ftco-footer a { color: #cfe6e8; }
.ftco-footer a:hover { color: #ffd2a3; }
.ftco-footer .ftco-heading-2 { color: #ffd2a3; }

/* ---------- Helpers ---------- */
.elc-img { border-radius: var(--elc-radius); box-shadow: var(--elc-shadow); max-width: 100%; height: auto; }
.elc-section { padding: 2rem 0; }
.elc-band { background: var(--elc-sand); border-radius: var(--elc-radius); padding: 2rem 1.5rem; margin: 2rem 0; }
.elc-step-num {
    display: inline-flex; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--elc-sun); color: #fff; font-weight: 700; margin-right: .6rem; flex-shrink: 0;
}

/* ---------- Home page hero ---------- */
.elc-home-hero {
    background-size: cover; background-position: center bottom; padding: 3.5rem 0 7rem; margin-top: -1rem;
}
.elc-home-card {
    background: rgba(255, 255, 255, .93); border-radius: 16px; box-shadow: 0 10px 30px rgba(31, 59, 87, .15);
    padding: 2rem 2.2rem; max-width: 760px;
}
.elc-home-card h1 { font-size: 2.1rem; }
@media (max-width: 575px) { .elc-home-card { padding: 1.3rem; } .elc-home-card h1 { font-size: 1.5rem; } .elc-home-hero { padding: 1.5rem 0 4rem; } }
.services .icon span { color: var(--elc-teal); }
.elc-home-hero { border-radius: 16px; }

/* ---------- Fixes after visual review ---------- */
.btn.btn-primary, .btn.btn-primary:focus { background: var(--elc-sun) !important; border-color: var(--elc-sun) !important; color: #fff !important; }
.btn.btn-primary:hover { background: var(--elc-sun-dark) !important; border-color: var(--elc-sun-dark) !important; color: #fff !important; }
.btn.btn-outline-dark { color: var(--elc-navy); border-color: var(--elc-navy); }
.btn.btn-outline-dark:hover { background: var(--elc-navy); color: #fff; }
main h2.text-center::after, main .text-center > h2::after { left: 50% !important; transform: translateX(-50%); }
.ftco-section { padding: 3.5em 0; }
.ftco-section.ftco-no-pt { padding-top: 0; }
.subheading, .heading-section .subheading { color: var(--elc-sun-dark) !important; }
.heading-section-white .subheading { color: #ffd2a3 !important; }
.services-wrap:after { background: linear-gradient(120deg, var(--elc-teal), #7fb7a4) !important; border-radius: 12px; }
.tabulation-2 .nav-pills .nav-item .nav-link.active { background: var(--elc-teal) !important; color: #fff !important; }
.ftco-footer strong, .ftco-footer p, .ftco-footer .text { color: #d7e3ea; }
.ftco-footer .logo a, .ftco-footer .logo a span { color: #fff; }
.ftco-footer .logo a span { color: #ffd2a3; }
.elc-hero { height: 240px; background-position: center 72%; }

/* ---------- Menu: keep the brand on one line and items from wrapping ---------- */
a.navbar-brand { white-space: nowrap !important; word-break: normal !important; font-size: 1.15rem; }
.navbar-nav .nav-link { white-space: nowrap; font-size: .93rem; padding-left: .55rem !important; padding-right: .55rem !important; }
@media (max-width: 1199px) {
    .navbar-collapse { padding: .5rem 0 1rem; }
    .navbar-nav .nav-link { font-size: 1rem; padding: .45rem .25rem !important; }
}
@media (min-width: 1200px) { header .container { max-width: 1320px; } }

/* ---------- Brand: logo mark plus name; short name on phones ---------- */
.elc-brand { display: inline-flex; align-items: center; gap: .55rem; }
.elc-mark { width: 34px; height: 34px; flex-shrink: 0; }
.elc-brand-short { display: none; }
.elc-call {
    display: inline-flex; align-items: center; gap: .3rem; background: var(--elc-sun); color: #fff !important;
    border-radius: 999px; padding: .38rem .85rem; font-weight: 600; font-size: .9rem; text-decoration: none !important;
}
.elc-call:hover { background: var(--elc-sun-dark); }
@media (max-width: 575px) {
    .elc-brand-full { display: none; }
    .elc-brand-short { display: inline; font-size: 1.15rem; letter-spacing: 1px; }
}
@media (max-width: 359px) { .elc-call-text { display: none; } }
.navbar-brand.elc-brand span { display: inline !important; font-size: 1.15rem !important; color: var(--elc-navy) !important; font-weight: 700; letter-spacing: .3px; }
.navbar-brand.elc-brand span.elc-brand-short { display: none !important; }
@media (max-width: 575px) {
    .navbar-brand.elc-brand span.elc-brand-full { display: none !important; }
    .navbar-brand.elc-brand span.elc-brand-short { display: inline !important; letter-spacing: 1.5px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    .navbar-nav .nav-link { font-size: .86rem; padding-left: .4rem !important; padding-right: .4rem !important; }
    a.navbar-brand.elc-brand span { font-size: 1.02rem !important; }
}

/* ---------- Phones and small tablets ---------- */
html, body { overflow-x: hidden; }
img, svg, iframe, video { max-width: 100%; }
@media (max-width: 767px) {
    .elc-hero .elc-hero-tag { white-space: normal; text-align: center; max-width: 88%; width: max-content; line-height: 1.35; }
    main h1, main .h1 { font-size: 1.6rem; line-height: 1.3; }
    main h2 { font-size: 1.3rem; }
    body { font-size: 16px; }
    .container { padding-left: 16px; padding-right: 16px; }
    .btn { min-height: 44px; }
    .elc-panel { padding: 1.1rem; }
    .elc-cta { padding: 1.25rem; }
    .elc-band { padding: 1.4rem 1rem; }
    .table { font-size: .9rem; }
    .navbar-nav .nav-link { padding: .65rem .25rem !important; border-bottom: 1px solid #eef2f5; }
    .ftco-footer { text-align: left; }
    .ftco-footer .ftco-footer-widget { margin-left: 0 !important; }
}

/* ---------- Website chat ---------- */
.elc-chat-btn {
    position: fixed; right: 18px; bottom: 18px; z-index: 1050; border: 0; border-radius: 999px;
    background: linear-gradient(120deg, var(--elc-teal), var(--elc-navy)); color: #fff; font-weight: 600;
    padding: .8rem 1.2rem; box-shadow: 0 8px 24px rgba(31, 59, 87, .3); font-size: 1rem; cursor: pointer;
}
.elc-chat-btn:hover { filter: brightness(1.08); }
.elc-chat-btn .icon-comments-o { font-size: 1.15rem; margin-right: .2rem; }
.elc-chat-btn-hide { display: none; }
.elc-chat {
    position: fixed; right: 18px; bottom: 18px; z-index: 1060; width: 370px; max-width: calc(100vw - 24px);
    height: 560px; max-height: calc(100vh - 36px); background: #fff; border-radius: 16px;
    box-shadow: 0 16px 48px rgba(31, 59, 87, .3); display: flex; flex-direction: column; overflow: hidden;
}
.elc-chat[hidden] { display: none; }
.elc-chat-head {
    background: linear-gradient(120deg, var(--elc-navy), var(--elc-teal)); color: #fff; padding: .85rem 1rem;
    display: flex; justify-content: space-between; align-items: center;
}
.elc-chat-title { font-weight: 700; }
.elc-chat-sub { font-size: .8rem; opacity: .85; }
.elc-chat-x { background: transparent; border: 0; color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; padding: 0 .25rem; }
.elc-chat-start { padding: 1rem; overflow-y: auto; font-size: .95rem; }
.elc-chat-start label { font-size: .85rem; margin-bottom: .2rem; }
.elc-chat-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.elc-chat-body[hidden] { display: none; }
.elc-chat-log { flex: 1; overflow-y: auto; padding: .9rem; background: var(--elc-cream); }
.elc-msg { max-width: 88%; margin-bottom: .6rem; padding: .55rem .75rem; border-radius: 12px; font-size: .93rem; line-height: 1.45; }
.elc-msg-who { font-size: .72rem; font-weight: 600; opacity: .7; margin-bottom: .1rem; }
.elc-msg-text { white-space: pre-wrap; word-wrap: break-word; }
.elc-msg-visitor { margin-left: auto; background: #fff0e0; border: 1px solid #f6d6b3; }
.elc-msg-assistant { background: #fff; border: 1px solid var(--elc-border); }
.elc-msg-staff { background: #dbeafe; border: 1px solid #bfd4f0; }
.elc-typing { font-style: italic; color: var(--elc-muted); }
.elc-chat-form { display: flex; gap: .5rem; padding: .6rem; border-top: 1px solid var(--elc-border); background: #fff; }
.elc-chat-form textarea { resize: none; height: 46px !important; font-size: .95rem; }
.elc-chat-form .btn { min-height: 46px; }
.elc-chat-foot { font-size: .72rem; color: var(--elc-muted); padding: 0 .8rem .6rem; background: #fff; }
@media (max-width: 575px) {
    .elc-chat { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100%; max-height: 100%; border-radius: 0; }
    .elc-chat-btn { right: 12px; bottom: 12px; padding: .75rem 1rem; }
}