/* Location landing + directory pages.
   Plain CSS on purpose: the SCSS in scss/ is compiled to css/evcs.css by CodeKit, so a new
   partial there would not reach the browser until someone opens CodeKit. Loaded only by
   location-landing.php / location-index.php. Safe to fold into the SCSS build later. */

:root {
    /* Sampled from live evcs.com, not the local SCSS ($logo_orange is #f25b2a, a shade off). */
    --loc-orange: #f15a29;
    --loc-darkblue: #002d48;
    --loc-text: #514f4d;
    --loc-border: #e4e5e7;
    --loc-green: #1a9e5c;
    --loc-grey: #808080;
    --loc-footer-link: #f8f9fa;
    --loc-footer-heading: #878f99;
}

/* ==========================================================================
   Buttons — matched to evcs.com (pill, 100px radius, 15px/25px, 14px/600)
   ========================================================================== */
.evcs-btn,
a.evcs-btn {
    display: inline-block;
    background-color: var(--loc-orange);
    color: #fff;
    border: 1px solid var(--loc-orange);
    border-radius: 100px;
    padding: 15px 25px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

.evcs-btn:hover,
a.evcs-btn:hover {
    background-color: #d94a1d;
    border-color: #d94a1d;
    color: #fff;
    text-decoration: none;
}

/* Outline variant — white on the navy footer, navy on light page backgrounds. */
.evcs-btn-line,
a.evcs-btn-line {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
}

.evcs-btn-line:hover,
a.evcs-btn-line:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--loc-darkblue);
}

.evcs-btn-outline,
a.evcs-btn-outline {
    background-color: transparent;
    border-color: var(--loc-darkblue);
    color: var(--loc-darkblue);
}

.evcs-btn-outline:hover,
a.evcs-btn-outline:hover {
    background-color: var(--loc-darkblue);
    border-color: var(--loc-darkblue);
    color: #fff;
}

.evcs-btn-block {
    display: block;
    width: 100%;
}

.loc-wrap {
    /* --loc-wrap-top is measured and set by includes/nav-offset.php: 30px on desktop where
       the nav is in normal flow, nav height + 24px below 1000px where it is fixed. The
       fallback here only applies with JS off. */
    padding-top: var(--loc-wrap-top, 30px);
    padding-bottom: 60px;
    /* Keeps the footer near the bottom of the window on short pages (the 404, a location
       with no photo or notes) instead of leaving bare white space beneath it. */
    min-height: 62vh;
}

.loc-breadcrumb {
    font-size: 13px;
    color: var(--loc-grey);
    margin-bottom: 18px;
}

.loc-breadcrumb a {
    color: var(--loc-grey);
    text-decoration: underline;
}

.loc-breadcrumb a:hover {
    color: var(--loc-orange);
}

.loc-breadcrumb span {
    margin: 0 6px;
}

.loc-breadcrumb span:last-child {
    margin-left: 0;
}

.loc-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--loc-darkblue);
    line-height: 1.15;
    margin-bottom: 10px;
}

.loc-address {
    font-size: 1.05rem;
    color: var(--loc-text);
    margin-bottom: 20px;
}

.loc-actions {
    margin-bottom: 26px;
}

.loc-btn-directions {
    padding-left: 34px;
    padding-right: 34px;
}

/* --- live availability banner --- */
.loc-availability {
    border: 1px solid var(--loc-border);
    border-left: 5px solid var(--loc-grey);
    border-radius: 4px;
    padding: 14px 18px;
    margin-bottom: 30px;
    background: #fff;
}

.loc-availability.is-open {
    border-left-color: var(--loc-green);
}

.loc-availability.is-busy {
    border-left-color: var(--loc-orange);
}

.loc-availability-headline {
    font-size: 1.05rem;
    color: var(--loc-darkblue);
}

.loc-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 8px;
    background: var(--loc-grey);
    vertical-align: middle;
}

.loc-availability.is-open .loc-dot {
    background: var(--loc-green);
}

.loc-availability.is-busy .loc-dot {
    background: var(--loc-orange);
}

.loc-asof {
    font-size: 12px;
    color: var(--loc-grey);
    margin-top: 4px;
    padding-left: 17px;
}

/* --- connectors --- */
.loc-h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--loc-darkblue);
    margin: 30px 0 14px;
}

.loc-connectors {
    border: 1px solid var(--loc-border);
    border-radius: 4px;
    overflow: hidden;
}

.loc-connector {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--loc-border);
}

.loc-connector:last-child {
    border-bottom: 0;
}

.loc-connector img {
    width: 38px;
    margin-right: 16px;
    flex: 0 0 auto;
}

.loc-connector-body {
    flex: 1 1 auto;
    min-width: 0;
}

.loc-connector-name {
    font-weight: 600;
    color: var(--loc-darkblue);
}

.loc-connector-meta {
    font-size: 13px;
    color: var(--loc-grey);
}

.loc-connector-count {
    flex: 0 0 auto;
    text-align: right;
    line-height: 1.1;
}

.loc-connector-count strong {
    font-size: 1.3rem;
}

.loc-connector-count.has-free strong {
    color: var(--loc-green);
}

.loc-connector-count.no-free strong {
    color: var(--loc-grey);
}

.loc-connector-count span {
    color: var(--loc-grey);
}

.loc-connector-count small {
    display: block;
    font-size: 11px;
    color: var(--loc-grey);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.loc-note {
    color: var(--loc-text);
    margin-bottom: 8px;
}

/* --- media column --- */
.loc-photo {
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
    background: #f2f2f2;
}

.loc-photo img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

#loc-map {
    width: 100%;
    height: 320px;
    border-radius: 6px;
    background: #eee;
}

/* --- nearby chargers (landing page) --- */
.loc-nearby {
    margin-top: 46px;
    padding-top: 30px;
    border-top: 1px solid var(--loc-border);
}

.loc-nearby-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}

.loc-nearby-all {
    font-size: 14px;
    font-weight: 600;
    color: var(--loc-orange);
    text-decoration: none;
}

.loc-nearby-all:hover { text-decoration: underline; }

.loc-nearby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px;
}

.loc-nearby-card {
    display: block;
    border: 1px solid var(--loc-border);
    border-radius: 6px;
    padding: 14px 16px;
    text-decoration: none;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.loc-nearby-card:hover {
    border-color: var(--loc-orange);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    text-decoration: none;
}

.loc-nearby-name {
    display: block;
    font-weight: 600;
    color: var(--loc-darkblue);
    line-height: 1.25;
    margin-bottom: 3px;
}

.loc-nearby-city {
    display: block;
    font-size: 13px;
    color: var(--loc-grey);
}

.loc-nearby-dist {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--loc-orange);
    margin-top: 6px;
}

/* --- "find another charger" CTA (landing page) --- */
.loc-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 40px;
    padding: 24px 28px;
    background: #f7f8f9;
    border-radius: 8px;
}

.loc-cta-text strong {
    display: block;
    color: var(--loc-darkblue);
    font-size: 1.05rem;
}

.loc-cta-text span {
    color: var(--loc-grey);
    font-size: 14px;
}

.loc-cta-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* --- directory index --- */
.loc-index-head {
    margin-bottom: 22px;
}

.loc-index-head h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--loc-darkblue);
}

.loc-index-count {
    color: var(--loc-grey);
    font-size: .95rem;
    font-weight: 400;
}

.loc-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    padding: 14px 0 12px;
    border-bottom: 1px solid var(--loc-border);
    margin-bottom: 6px;
}

.loc-search {
    position: relative;
    max-width: 460px;
}

.loc-search i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--loc-grey);
    font-size: 14px;
}

.loc-search input {
    width: 100%;
    border: 1px solid var(--loc-border);
    border-radius: 100px;
    padding: 12px 40px 12px 40px;
    font-size: 15px;
    color: var(--loc-text);
    outline: none;
    transition: border-color .2s ease;
}

.loc-search input:focus {
    border-color: var(--loc-orange);
}

#loc-filter-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    color: var(--loc-grey);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

#loc-filter-clear:hover { color: var(--loc-darkblue); }

.loc-statenav {
    margin-top: 12px;
}

.loc-statenav a {
    display: inline-block;
    margin: 0 8px 6px 0;
    padding: 6px 14px;
    border: 1px solid var(--loc-border);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    color: var(--loc-darkblue);
    text-decoration: none;
}

.loc-statenav a:hover {
    border-color: var(--loc-orange);
    color: var(--loc-orange);
    text-decoration: none;
}

.loc-statenav a span {
    color: var(--loc-grey);
    font-weight: 400;
    margin-left: 5px;
}

.loc-noresults {
    padding: 34px 0;
    color: var(--loc-grey);
}

.loc-linkbtn {
    border: 0;
    background: transparent;
    color: var(--loc-orange);
    font-weight: 600;
    cursor: pointer;
    padding: 0 0 0 6px;
}

.loc-state-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--loc-darkblue);
    margin: 34px 0 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--loc-border);
    scroll-margin-top: 120px;
}

.loc-state-count {
    font-size: .95rem;
    font-weight: 400;
    color: var(--loc-grey);
    margin-left: 6px;
}

.loc-city-heading {
    font-size: .95rem;
    font-weight: 700;
    color: var(--loc-orange);
    margin: 20px 0 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.loc-city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 8px;
}

.loc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--loc-border);
    border-radius: 6px;
    text-decoration: none;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.loc-item:hover {
    border-color: var(--loc-orange);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
    text-decoration: none;
}

.loc-item-main {
    min-width: 0;
}

.loc-item-name {
    display: block;
    color: var(--loc-darkblue);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}

.loc-item-addr {
    display: block;
    color: var(--loc-grey);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.loc-item-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.loc-item-meta img {
    width: 21px;
    opacity: .85;
}

.loc-item-ports {
    min-width: 24px;
    margin-left: 4px;
    padding: 2px 7px;
    border-radius: 100px;
    background: #f1f3f5;
    color: var(--loc-text);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* Link added to each find-a-charger result card. */
.loc-card-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--loc-orange);
    text-decoration: underline;
}

/* ==========================================================================
   Footer — matched to evcs.com
   ========================================================================== */
#footer-evcs {
    background-color: var(--loc-darkblue);
    color: var(--loc-footer-link);
}

#footer-evcs .fe-main {
    padding: 55px 0 40px;
}

#footer-evcs .fe-col {
    margin-bottom: 26px;
}

#footer-evcs .fe-logo {
    width: 150px;
    margin-bottom: 26px;
}

#footer-evcs .fe-heading {
    color: var(--loc-footer-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .48px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

#footer-evcs .fe-links a {
    display: block;
    color: var(--loc-footer-link);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 14px;
}

#footer-evcs .fe-links a:hover {
    color: var(--loc-orange);
}

#footer-evcs .fe-social {
    margin-top: 6px;
}

#footer-evcs .fe-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 8px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    color: var(--loc-footer-link);
    font-size: 14px;
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease;
}

#footer-evcs .fe-social a:hover {
    background-color: var(--loc-orange);
    border-color: var(--loc-orange);
    color: #fff;
}

#footer-evcs .fe-phone {
    display: flex;
    align-items: center;
    margin-bottom: 22px;
}

#footer-evcs .fe-phone i {
    color: var(--loc-orange);
    font-size: 20px;
    margin-right: 12px;
}

#footer-evcs .fe-phone a {
    color: var(--loc-footer-link);
    text-decoration: none;
}

#footer-evcs .fe-phone-label {
    display: block;
    font-size: 13px;
    color: var(--loc-footer-heading);
}

#footer-evcs .fe-phone-number {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

#footer-evcs .fe-buttons a {
    margin: 0 8px 10px 0;
}

#footer-evcs .fe-bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: 18px 0;
    text-align: center;
    font-size: 13px;
    color: var(--loc-footer-heading);
}

/* At this width scss/nav.scss switches .navbar to position:fixed and compensates with
   #main-canvas { margin-top: 75px }. These pages set margin-top:0 inline (copied from the
   full-screen map page, which deliberately sits under the nav), so that compensation is
   overridden and the fixed nav would cover the heading — clear it here instead.
   Breakpoint is 1000px to match nav.scss exactly, not Bootstrap's 992px. */
@media (max-width: 1000px) {
    /* No-JS fallback only: 185px clears the tallest the fixed navbar ever measures (161px
       around 601-660px wide, where its own links wrap onto an extra row). With JS the
       measured value above wins and the spacing is exact at every width. */
    .loc-wrap { padding-top: var(--loc-wrap-top, 185px); }
    /* Sticky would sit behind the fixed navbar, and the pills eat a short viewport. */
    .loc-toolbar { position: static; }
}

@media (max-width: 991px) {
    .loc-title { font-size: 1.7rem; }
    #loc-map { height: 260px; margin-top: 16px; }
    #footer-evcs .fe-main { padding: 40px 0 20px; }
    .loc-city-grid { grid-template-columns: 1fr; }
    .loc-nearby-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .loc-cta { flex-direction: column; align-items: flex-start; }
}