/* ============================================================================
   SMBR Location Details and Map Block

   Scope: Unified section for location details, map, cities list, and ZIP
          coverage accordion. All selectors scoped to .smbr-location-details-and-map
          to ensure high specificity and avoid cross-block style leakage.

   Strategy:
   - All selectors prefixed with .smbr-location-details-and-map for isolation
   -  used on display properties and resets to override other themes
   - Hierarchical structure: section > containers > rows > cols > content
   ============================================================================ */

/* ============================================================================
   SECTION WRAPPER & FLEX LAYOUT
   ============================================================================ */

.wp-block-columns.area-cities-zip:before {
    content: none !important;
}

/* Main unified section container - full flex column layout */
.smbr-location-details-and-map {
    display: flex;
    flex-wrap: wrap!important;
    flex-direction: column;
    width: 100%;
    max-width: 1300px;
    margin: 100px auto 100px auto;
    position: relative;
}
.smbr-location-details-and-map .zip-coverage section {
    margin: 0;
}
.smbr-location-details-and-map .zip-coverage section {
    margin: 0 auto;
    padding: 0;
}
/* Header container - full width intro section */
.smbr-location-details-and-map .location-header-container {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    padding: 0;
    display: block;
    border-bottom: solid 3px !important;
}

/* Layout container and Bootstrap row/column scoping for block body. */
.smbr-location-details-and-map > .container {
    width: 100%;
    border-bottom: solid 3px;
    margin-bottom: 25px;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    border: none;
}

.smbr-location-details-and-map .location-details-main-row {
    display: flex;
    flex-wrap: wrap;
}

/* Left column (cities + map) roughly 30% width, right column (ZIP) 70%. */
.smbr-location-details-and-map .location-details-left-col {
    width: 30%;
}

.smbr-location-details-and-map .location-details-right-col {
    width: 70%;
}


/* ============================================================================
   HEADER SECTION STYLES
   ============================================================================ */
.smbr-location-details-and-map .zip-header-preview {
  /* max-width: 850px; */
  width: 100%;
  margin: 0 auto 25px auto;
}

.smbr-location-details-and-map h2.zip-header-preview {
    width: 100%;
    margin: 0 0 25px 0;
}

.smbr-location-details-and-map .zip-header-preview h2 {
    font-weight: 400;
    color: black;
    font-size: 45px;
    line-height: 55px;
}

.smbr-location-details-and-map .zip-header-preview p {
    margin: 0;
    color: black;
}

.smbr-location-details-and-map p {
    margin: 0;
}

/* ============================================================================
   CITIES LIST SECTION
   ============================================================================ */

/* Cities container wrapper */
.smbr-location-details-and-map .cities {
    border: solid black 1px;
    padding: 0;
}

/* When multiple city groups are stacked, add separation between them. */
.smbr-location-details-and-map .cities + .cities {
    margin-top: 24px;
}

/* Cities heading appears once per block (outside individual .cities groups). */
.smbr-location-details-and-map .col-md-4.location-details-left-col h2 {
    font-size: 22px;
    font-weight: 400;
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    color: black;
}

/* Cities description text (above list) */
.smbr-location-details-and-map .cities .cities-description {
    margin: 0;
    padding: 15px 0 15px 25px;
    border-bottom: solid black 1px;
    font-size: 14px;
    font-weight: 400;
    color: #4679b8;
}
.smbr-location-details-and-map .cities .cities-description:before {
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    background: #4679b8;
    border-radius: 50%;
    position: absolute;
    top: unset;
    left: 12px;
    clip-path: inset(0 0 0 50%);
}

/* Cities list container */
.smbr-location-details-and-map .cities ul {
    margin: 15px;
    padding: 0;
    list-style: none;
}

/* Individual city list item */
.smbr-location-details-and-map .cities ul li {
    display: inline-block;
    padding: 5px 10px;
    border: solid 1px black;
    margin: 3px 0;
}

/* City list link styling */
.smbr-location-details-and-map .cities ul li a {
    color: inherit;
    text-decoration: none;
}

.smbr-location-details-and-map .cities ul li a:hover {
    text-decoration: underline;
}

/* Hidden city items - revealed by JS "See more" button */
.smbr-location-details-and-map .cities ul li.initially-hidden {
    display: none;
}

.smbr-location-details-and-map .cities ul li.expanded-element {
    display: inline-block;
}

/* "See more / See less" button container */
.smbr-location-details-and-map .cities ul li.li-button {
    margin: 10px 0;
    border: none;
    padding: 0;
    display: inline-block;
}

/* "See more / See less" button */
.smbr-location-details-and-map .cities ul li.li-button .see-more-btn {
    border: none;
    background: transparent;
    color: #4679b8;
    text-decoration: underline;
    padding: 5px 10px;
    cursor: pointer;
    font-size: inherit;
    font-weight: inherit;
}

.smbr-location-details-and-map .cities ul li.li-button .see-more-btn:hover {
    opacity: 0.8;
}

/* ============================================================================
   ZIP COVERAGE SECTION & ACCORDION
   ============================================================================ */

/* ZIP coverage description text */
.smbr-location-details-and-map .zip-coverage {
    margin-bottom: 15px;
    padding: 0;
}

/* Map/embed area must sit before ZIP coverage content in the right column. */
.smbr-location-details-and-map .location-map-content {
    margin-bottom: 20px;
}

/* "See More..." button for accordion load-more behavior */
.smbr-location-details-and-map button.accordion-load-more {
    display: block;
    margin-top: 30px;
    padding: 20px;
    width: 100%;
    background-color: #eeeeee;
    font-size: 17px;
    text-decoration: underline;
    border-radius: 0;
    border: none;
    cursor: pointer;
}

.smbr-location-details-and-map button.accordion-load-more:hover {
    background-color: #ddd;
}

/* ============================================================================
   ZIP COVERAGE SECTION & ACCORDION
   ============================================================================ */

/* ZIP coverage description text */
.smbr-location-details-and-map .zip-coverage {
    margin: 25px 0 0 !important;
    padding: 0 !important;
}

/* Map/embed area must sit before ZIP coverage content in the right column. */
.smbr-location-details-and-map .location-map-content {
    margin-bottom: 20px !important;
}

/* "See More..." button for accordion load-more behavior */
.smbr-location-details-and-map button.accordion-load-more {
    display: block !important;
    margin-top: 30px !important;
    padding: 20px !important;
    width: 100% !important;
    background-color: #eeeeee !important;
    font-size: 17px !important;
    text-decoration: underline !important;
    border-radius: 0 !important;
    border: none !important;
    cursor: pointer !important;
}

.smbr-location-details-and-map button.accordion-load-more:hover {
    background-color: #ddd !important;
}

/* ============================================================================
   ACCORDION STYLING (ZIP Coverage Inner Accordion)
   ============================================================================ */

/* Accordion container reset */
.smbr-location-details-and-map .accordions-container {
    background-color: transparent !important;
    border: none !important;
    max-width: 550px !important;
    margin: 0 auto;
}

/* Accordion panels - default hidden, visible with .shown class */
.smbr-location-details-and-map .accordions-container .fxa-accordion__panel {
    display: none !important;
}

.smbr-location-details-and-map .accordions-container .fxa-accordion__panel:first-child {
    display: block !important;
}

.smbr-location-details-and-map .accordions-container .fxa-accordion__panel.shown {
    display: block !important;
}

/* Accordion panel base styles */
.smbr-location-details-and-map .fxa-accordion__panel {
    margin: 0 !important;
    padding: 0 !important;
}

.smbr-location-details-and-map .accordions-container .fxa-accordion__panel__toggle {
    background: white !important;
    color: black !important;
    border-bottom: solid 2px black !important;
    border-radius: 0 !important;
    width: 100% !important;
    text-align: left !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.smbr-location-details-and-map .accordions-container .fxa-accordion__panel__toggle:hover {
    background-color: #f9f9f9 !important;
}

/* Accordion toggle chevron (collapsed state - rotated 45deg) */
.smbr-location-details-and-map .fxa-accordion__panel .fxa-accordion__panel__toggle:after {
    content: '' !important;
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid #555 !important;
    border-bottom: 2px solid #555 !important;
    transform-origin: center !important;
    transform: rotate(45deg) !important;
    float: right !important;
    color: #80808082 !important;
}

/* Accordion toggle chevron (expanded state - rotated 225deg) */
.smbr-location-details-and-map .fxa-accordion__panel.is-expanded .fxa-accordion__panel__toggle:after {
    content: '' !important;
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid #555 !important;
    border-bottom: 2px solid #555 !important;
    transform-origin: center !important;
    transform: rotate(225deg) !important;
    float: right !important;
    color: #80808082 !important;
}

/* Accordion content panel (display controlled by JS for reliable toggling). */
.smbr-location-details-and-map .fxa-accordion__panel__content {
    display: none;
}

.smbr-location-details-and-map .fxa-accordion__panel.is-expanded .fxa-accordion__panel__content {
    display: block;
}

/* Specifically target the ZIP accordion container used by this block so global
   fx_accordion stylesheet rules do not override our display state toggling. */
.smbr-location-details-and-map .accordions-container .fxa-accordion__panel__content {
    display: none !important;
}

.smbr-location-details-and-map .accordions-container .fxa-accordion__panel.is-expanded .fxa-accordion__panel__content {
    display: block !important;
}

.smbr-location-details-and-map .fx-accordion-panel__content {
    padding: 12px 0 24px !important;
}

/* ============================================================================
   RESPONSIVE BEHAVIOR: TABLETS & MEDIUM SCREENS
   ============================================================================ */

@media (max-width: 1200px) {
    .smbr-location-details-and-map .cities ul {
        margin: 10px 0 0 0;
        padding: 5px;
        text-align: center;
    }
}

/* ============================================================================
   RESPONSIVE BEHAVIOR: MOBILE & SMALL SCREENS
   ============================================================================ */

@media (max-width: 860px) {
    /* Switch main layout from two-column to single-column (full width) */
    .smbr-location-details-and-map {
        flex-direction: column;
    }

    /* Container padding adjustments */
    .smbr-location-details-and-map > .container {
        margin: 0 auto 10px;
        padding-left: 24px;
        padding-right: 24px;
    }

    /* Ensure both columns stack on mobile. */
    .smbr-location-details-and-map .location-details-left-col,
    .smbr-location-details-and-map .location-details-right-col {
        width: 100%;
    }
}