/* ==========================================================================
   WEBZELIA: Locations hub page styles
   Every class starts with "lo-". Load after web.css and local-seo.css.
   ========================================================================== */

.lo-hero{ background:var(--bg); padding:70px 0 56px; text-align:center; }
.lo-hero .lc-crumbs{ margin-bottom:20px; }
.lo-hero h1{ font-family:var(--font-display); font-size:clamp(2rem,4.4vw,3.2rem); font-weight:600; color:var(--navy); line-height:1.12; max-width:860px; margin:0 auto 20px; }
.lo-hero .lc-lead{ margin:0 auto 30px; max-width:700px; }

.lo-search{ position:relative; max-width:560px; margin:0 auto; }
.lo-search i{ position:absolute; left:20px; top:50%; transform:translateY(-50%); color:var(--blue); }
.lo-search input{
    width:100%; padding:17px 20px 17px 50px; border:2px solid var(--border); border-radius:40px; background:var(--paper);
    font-family:var(--font-body); font-size:var(--fs-base); color:var(--text); box-shadow:var(--shadow); transition:border-color .25s, box-shadow .25s;
}
.lo-search input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(22,115,230,.15); }
.lo-hint{ font-size:var(--fs-xs); color:var(--text-soft); margin-top:12px; }

.lo-stats{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px 44px; margin-top:34px; }
.lo-stats div{ text-align:center; }
.lo-stats strong{ display:block; font-family:var(--font-display); font-size:1.9rem; color:var(--navy); line-height:1.1; }
.lo-stats span{ font-size:var(--fs-xs); color:var(--text-soft); }

/* State cards */
.lo-states{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.lo-state{ background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.lo-state[hidden]{ display:none; }
.lo-state-head{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 26px; background:var(--tint); border-bottom:1px solid var(--border); }
.lo-state-head h3{ font-family:var(--font-display); font-size:var(--fs-lg); color:var(--navy); font-weight:600; }
.lo-state-head h3 a:hover{ color:var(--blue); }
.lo-count{ font-family:var(--font-mono); font-size:.72rem; color:var(--blue); background:var(--paper); border:1px solid var(--border); padding:5px 12px; border-radius:20px; white-space:nowrap; }
.lo-cities{ padding:8px 26px 20px; }
.lo-city{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--border); font-size:var(--fs-sm); }
.lo-city:last-child{ border-bottom:none; }
.lo-city[hidden]{ display:none; }
.lo-city a{ font-weight:700; color:var(--navy); display:flex; align-items:center; gap:10px; }
.lo-city a i{ color:var(--blue); }
.lo-city a:hover{ color:var(--blue); }
.lo-city small{ font-size:.72rem; color:var(--text-soft); text-align:right; }
.lo-city--soon{ color:var(--text-soft); }
.lo-city--soon span{ display:flex; align-items:center; gap:10px; }
.lo-city--soon i{ color:var(--border); }
.lo-live{ font-size:.68rem; font-weight:700; color:#176B57; background:#EAF5ED; padding:3px 10px; border-radius:20px; }
.lo-soon{ font-size:.68rem; font-weight:700; color:var(--text-soft); background:var(--bg); padding:3px 10px; border-radius:20px; border:1px solid var(--border); }

.lo-empty{ display:none; background:var(--paper); border:1px dashed var(--blue); border-radius:var(--radius-md); padding:32px; text-align:center; margin-top:24px; }
.lo-empty.show{ display:block; }
.lo-empty h3{ font-family:var(--font-display); font-size:var(--fs-lg); color:var(--navy); margin-bottom:8px; }
.lo-empty p{ font-size:var(--fs-sm); color:var(--text-soft); line-height:1.7; margin-bottom:18px; }

@media (max-width:860px){ .lo-states{ grid-template-columns:1fr; } }
@media (max-width:640px){ .lo-hero{ padding:44px 0 40px; } .lo-city{ flex-direction:column; align-items:flex-start; } .lo-city small{ text-align:left; } }

/* Country level (collapsible) */
.lo-countries{ display:flex; flex-direction:column; gap:20px; }
.lo-country{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg); overflow:hidden; }
.lo-country[hidden]{ display:none; }
.lo-country summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:16px; padding:22px 26px; }
.lo-country summary::-webkit-details-marker{ display:none; }
.lo-flag{ width:44px; height:44px; border-radius:12px; background:var(--navy); color:var(--sky); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.lo-cname{ font-family:var(--font-display); font-size:var(--fs-xl); font-weight:600; color:var(--navy); flex:1; }
.lo-country summary::after{ content:'+'; width:30px; height:30px; border-radius:50%; border:2px solid var(--navy); display:flex; align-items:center; justify-content:center; font-size:1.2rem; line-height:1; color:var(--navy); flex-shrink:0; }
.lo-country[open] summary::after{ content:'\2212'; background:var(--blue); border-color:var(--blue); color:#fff; }
.lo-country .lo-states{ padding:0 24px 26px; }
.lo-more-card{ display:flex; gap:20px; align-items:flex-start; margin-top:24px; }
.lo-more-card .lc-icon{ flex-shrink:0; margin-bottom:0; }
.lo-more-card p a{ margin-left:6px; }
@media (max-width:640px){ .lo-cname{ font-size:var(--fs-lg); } .lo-country summary{ flex-wrap:wrap; padding:18px; } .lo-country .lo-states{ padding:0 14px 18px; } .lo-more-card{ flex-direction:column; } }


/* Plain link list style (like a directory) */
.lo-cities{ list-style:none; padding:18px 26px 24px; display:grid; grid-template-columns:1fr 1fr; gap:0 32px; }
.lo-city{ display:block; padding:9px 0; border-bottom:none; }
.lo-city a{ display:block; font-weight:500; font-size:var(--fs-sm); color:var(--blue); line-height:1.5; }
.lo-city a:hover{ text-decoration:underline; color:var(--blue-dark); }
.lo-state{ scroll-margin-top:100px; }
.lo-country{ scroll-margin-top:100px; }
@media (max-width:640px){ .lo-cities{ grid-template-columns:1fr; padding:14px 18px 18px; } }