/* The Guide: column and region mega panels in the header nav
   (inc/ec-nav-functions.php: `mega-columns` menu items and the Explore
   panel's region layout), plus area + category page extras.

   Written without nesting so the .scss and .css are identical and the file
   ships without a build step. Colors come from the brand tokens that
   Options > Brand Settings prints on :root, so every guide gets its own. */

/* ---------- Column panels (mega-columns) ---------- */

.ec-nav__panel--cols .ec-mega-col {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ec-nav__panel--cols .ec-mega__label {
    display: block;
    text-decoration: none;
}

.ec-nav__panel--cols a.ec-mega__label--link:hover,
.ec-nav__panel--cols a.ec-mega__label--link:focus-visible {
    color: var(--ec-accent);
}

.ec-mega__list--col {
    columns: 1;
}

.ec-mega__list--col .ec-nav__sublink {
    display: block;
    padding: 5px 0;
    font-size: 15px;
    line-height: 1.3;
    color: var(--ec-ink);
    text-decoration: none;
    white-space: normal;
}

.ec-mega__list--col .ec-nav__sublink:hover,
.ec-mega__list--col .ec-nav__sublink:focus-visible,
.ec-mega__list--col .ec-nav__sublink[aria-current="page"] {
    color: var(--ec-accent);
    background: none;
}

/* A column marked "mega-col--guides" (editorial links) gets a tinted card. */
.ec-nav__panel--cols .mega-col--guides {
    background: var(--ec-surface2);
    border-radius: 10px;
    padding: 14px 16px;
}

/* ---------- Explore panel: regions ---------- */

.ec-mega--regions {
    display: block;
}

.ec-mega__regions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 22px 26px;
}

.ec-mega__list--region {
    columns: 1;
}

.ec-mega__list--region > li > a {
    font-weight: 600;
}

.ec-mega__kids {
    list-style: none;
    margin: 0 0 6px;
    padding: 0 0 0 10px;
    border-left: 1px solid var(--ec-border);
}

.ec-mega__kids a {
    padding: 3px 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--ec-ink-sec) !important;
}

.ec-mega__kids a:hover,
.ec-mega__kids a:focus-visible {
    color: var(--ec-accent) !important;
}

.ec-mega__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 22px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ec-border);
}

.ec-mega__foot .ec-mega__all {
    margin-top: 0;
}

.ec-mega__start {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    color: var(--ec-ink-sec);
    text-decoration: none;
}

.ec-mega__foot .ec-mega__start {
    margin-top: 0;
}

.ec-mega__start:hover,
.ec-mega__start:focus-visible {
    color: var(--ec-accent);
    text-decoration: underline;
}

/* ---------- Desktop ---------- */

@media only screen and (min-width: 1150px) {
    .ec-nav__panel--cols {
        left: 50%;
        transform: translate(-50%, 6px);
        width: min(960px, calc(100vw - 48px));
        padding: 24px 28px 26px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
        gap: 22px 28px;
    }

    .ec-nav__item--mega.is-open > .ec-nav__panel--cols {
        display: grid; /* beats the base ".ec-nav__item.is-open > .ec-nav__panel { display: block }" */
        transform: translate(-50%, 0);
    }

    /* Mega items are position: static so their panel can span the header.
       Anchor the hover/open underline to the link instead, or it stretches
       across the whole header as a green line. */
    .ec-nav__item--mega > .ec-nav__link {
        position: relative;
    }

    .ec-nav__item--mega > .ec-nav__link::after {
        right: 4px;
    }

    .ec-nav__item--mega > .ec-nav__panel--mega:has(.ec-mega--regions) {
        width: min(1120px, calc(100vw - 48px));
    }
}

/* ---------- Drawer (tablet / phone) ---------- */

@media only screen and (max-width: 1149px) {
    .ec-nav__panel--cols {
        display: none;
    }

    .ec-nav__item.is-open > .ec-nav__panel--cols {
        display: block;
    }

    .ec-nav__panel--cols .ec-mega-col {
        margin-bottom: 14px;
    }

    .ec-nav__panel--cols .mega-col--guides {
        padding: 12px 14px;
    }

    .ec-mega__regions {
        grid-template-columns: 1fr 1fr;
        gap: 16px 18px;
    }

    /* Keep the drawer short: neighborhoods live on each area page. */
    .ec-mega__kids {
        display: none;
    }
}

@media only screen and (max-width: 480px) {
    .ec-mega__regions {
        grid-template-columns: 1fr;
    }
}

/* ---------- Area + category pages (category.php in area scope) ---------- */

.ec-area-cat-links {
    max-width: 1280px;
    margin: 36px auto 0;
    padding: 0 5%;
}

.ec-area-cat-links__heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
    color: var(--ec-ink);
    margin: 0 0 12px;
}

.ec-area-cat-links__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
}

.ec-area-cat-links__list a {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--ec-border-d);
    border-radius: 999px;
    font-size: 14px;
    color: var(--ec-ink);
    text-decoration: none;
}

.ec-area-cat-links__list a:hover,
.ec-area-cat-links__list a:focus-visible {
    border-color: var(--ec-accent);
    color: var(--ec-accent);
}

.ec-area-cat-links__list .ec-area-cat-links__n {
    color: var(--ec-muted);
    margin-left: 4px;
}

/* ---------- Nearby areas row on area pages ---------- */

.ec-area-nearby {
    max-width: 1280px;
    margin: 36px auto;
    padding: 0 5%;
}

/* ---------- Story breadcrumb (single-story.php) ---------- */

.ec-story__breadcrumb {
    margin: 0 0 16px;
}

/* ---------- Homepage Events section (parts/flex/events.php) ----------
   Day groups and image cards come from the /events/ styles in style.scss;
   this lays the days out two across on wide screens and styles the
   "Featured" label on events marked Feature on homepage. */

.ec-events--home .ec-events__days {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px 48px;
}

.ec-events--home .ec-wk-day {
    margin-top: 0;
}

.ec-events--home .ec-wk-day__title {
    padding: 0 !important;
}

@media only screen and (min-width: 900px) {
    .ec-events--home .ec-events__days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

.ec-wk-event__featured {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    color: #fff;
    background: var(--ec-accent);
    border-radius: 100px;
    padding: 4px 8px;
    margin-right: 10px;
    vertical-align: 1px;
}

/* ---------- Category Tiles section (parts/flex/category-tiles.php) ----------
   Tiles use the .ec-todo__grid / .ec-todo__tile styles in style.scss. */

.ec-cat-tiles__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

@media only screen and (min-width: 801px) {
    .ec-cat-tiles__inner {
        padding: 0 40px;
    }
}

.ec-cat-tiles__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}

.ec-cat-tiles__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ec-accent);
    margin: 0 0 12px;
    padding: 0;
}

.ec-cat-tiles__heading h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.375rem;
    font-weight: 600;
    line-height: 1.05;
    margin: 0;
    padding: 0 !important;
}

.ec-cat-tiles__heading p {
    margin: 10px 0 0;
    color: var(--ec-muted);
}

.ec-cat-tiles__see-all {
    font-size: 14px;
    font-weight: 600;
    color: var(--ec-accent);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.ec-cat-tiles__see-all:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 600px) {
    .ec-cat-tiles__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .ec-cat-tiles__heading h2 {
        font-size: 1.9rem;
    }
}

/* ---------- Story category pages (taxonomy-story_category.php) ---------- */

.ec-arch-hero__crumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.ec-arch-hero__crumbs a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.ec-arch-hero__crumbs a:hover,
.ec-arch-hero__crumbs a:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.ec-arch-hero__dek p {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.ec-arch-hero__dek p + p {
    margin-top: 10px;
}

/* ---------- Event type pages (taxonomy-event_type.php) ---------- */

a.ec-tax-filter-pill {
    display: inline-block;
    text-decoration: none;
}

.ec-type-pills {
    margin-bottom: 8px;
}

.ec-tax-hero__dek p {
    margin: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.ec-tax-hero__dek p + p {
    margin-top: 10px;
}

.ec-tax-hero__dek a {
    color: #fff;
}

/* ---------- Header button on tablet / phone ----------
   style.scss hides .ec-header__cta below 1150px, but the older
   `header a.button { display: inline-block }` rule outranks it, so the
   "List your business" button stayed in the bar and pushed the menu
   button off small screens. The drawer already has its own copy. */

@media only screen and (max-width: 1149px) {
    .ec-header .ec-header__controls .ec-header__cta {
        display: none;
    }
}

/* Small phones: keep logo + search + menu button on one line. */
@media only screen and (max-width: 420px) {
    .ec-header__inner {
        gap: 12px;
    }

    .ec-header__logo {
        min-width: 0;
        flex-shrink: 1;
    }

    .ec-header__logo img {
        width: auto;
        max-width: 100%;
        max-height: 48px;
        height: auto;
    }

    .ec-header__controls {
        gap: 4px;
        margin-left: auto;
    }
}

/* ---------- Image tiles: keep text white ----------
   The sitewide `main a:hover { color: ink }` outranks .ec-todo__tile, so a
   tapped or hovered tile turned its title dark on the photo. */

main a.ec-todo__tile,
main a.ec-todo__tile:visited,
main a.ec-todo__tile:hover,
main a.ec-todo__tile:focus,
main a.ec-todo__tile:focus-visible,
main a.ec-todo__tile:active {
    color: #fff;
    text-decoration: none;
}

/* ---------- Event cards (.ec-wk-event): whole card is tappable ----------
   The title link stretches over the card; the area link sits above it so
   it still goes to the area page. */

.ec-wk-event {
    position: relative;
}

.ec-wk-event__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ec-wk-event__area {
    position: relative;
    z-index: 2;
}

/* ---------- Event cards and day headers on phones ----------
   Compact list: smaller image and title, category and area on one quiet
   line, lighter meta, no description in homepage-style sections (two lines
   on the calendar pages). Applies on /events/, /this-weekend/, event type
   pages, area event pages, weekend stories and flexible Events sections. */

@media only screen and (max-width: 600px) {

    /* Day header */
    .ec-wk-day,
    .ec-story__body .ec-wk-day {
        margin-top: 28px;
    }

    .ec-wk-day .ec-wk-day__head {
        gap: 4px;
        padding-bottom: 10px;
        margin-bottom: 14px;
    }

    .ec-wk-day .ec-wk-day__title,
    .ec-story__body .ec-wk-day .ec-wk-day__title {
        font-size: 1.4rem;
    }

    .ec-wk-day .ec-wk-day__date {
        font-size: 13px;
    }

    .ec-wk-day .ec-wk-day__wx,
    .ec-story__body .ec-wk-day .ec-wk-day__wx {
        font-size: 12.5px;
        gap: 2px 8px;
    }

    .ec-wk-day .ec-wk-day__temp {
        font-size: 13.5px;
    }

    .ec-wk-day .ec-wk-day__icon {
        width: 16px;
        height: 16px;
    }

    .ec-wk-day .ec-wk-day__pop::before,
    .ec-wk-day .ec-wk-day__wind::before {
        margin-right: 8px;
    }

    .ec-wk-day__events {
        gap: 16px;
    }

    /* Card */
    .ec-wk-event {
        grid-template-columns: 84px 1fr;
        gap: 14px;
    }

    .ec-wk-event.ec-wk-event--no-img {
        grid-template-columns: 1fr;
    }

    .ec-wk-event .ec-wk-event__media {
        border-radius: 8px;
    }

    /* Category · area on one small line */
    .ec-wk-event .ec-wk-event__labels {
        flex-wrap: nowrap;
        gap: 0;
        margin-bottom: 3px;
        min-width: 0;
        font-size: 12px;
        line-height: 1.3;
    }

    .ec-wk-event .ec-wk-event__type {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: none;
    }

    .ec-wk-event .ec-wk-event__area {
        flex-shrink: 0;
        gap: 0;
        padding: 0;
        background: none;
        border-radius: 0;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.3;
        color: var(--ec-muted);
    }

    .ec-wk-event .ec-wk-event__area:hover {
        background: none;
        color: var(--ec-accent);
    }

    .ec-wk-event .ec-wk-event__area svg {
        display: none;
    }

    .ec-wk-event .ec-wk-event__type + .ec-wk-event__area::before,
    .ec-wk-event .ec-wk-event__featured + .ec-wk-event__area::before {
        content: "\00B7";
        margin: 0 6px;
        color: var(--ec-muted);
    }

    .ec-wk-event .ec-wk-event__featured {
        flex-shrink: 0;
        font-size: 9.5px;
        padding: 3px 6px;
        margin-right: 8px;
    }

    .ec-wk-event .ec-wk-event__title,
    .ec-story__body .ec-wk-event .ec-wk-event__title {
        font-size: 1.125rem;
        line-height: 1.2;
        margin: 0 0 4px;
    }

    .ec-wk-event .ec-wk-event__meta,
    .ec-story__body .ec-wk-event .ec-wk-event__meta {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.4;
        color: var(--ec-muted);
        margin: 0 0 4px;
    }

    .ec-wk-event .ec-wk-event__excerpt,
    .ec-story__body .ec-wk-event .ec-wk-event__excerpt {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        font-size: 13.5px;
        line-height: 1.45;
    }

    /* Homepage-style Events sections (homepage, Things to Do): no description */
    .ec-events--home .ec-wk-event .ec-wk-event__excerpt {
        display: none;
    }
}

/* ---------- Search results (search.php) ---------- */

/* The base h2 rule adds 1.5em of top padding, which left a big gap under the hero. */
.ec-search-results .ec-area-guide__heading--listings {
    padding: 0 !important;
}

/* Tablet / phone: filters stack in two tidy rows instead of squeezing the
   type pills into a narrow column beside the Grid/Map and Category controls. */
@media only screen and (max-width: 800px) {
    .ec-search-results .ec-tax-filters {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 16px;
    }

    .ec-search-results .ec-tax-filters__left {
        flex-wrap: nowrap;
        gap: 10px;
        min-width: 0;
    }

    .ec-search-results .ec-tax-filters__left:empty {
        display: none;
    }

    .ec-search-results .ec-tax-filters__pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        margin-right: -5%;
        padding-right: 5%;
    }

    .ec-search-results .ec-tax-filters__pills::-webkit-scrollbar {
        display: none;
    }

    .ec-search-results .ec-tax-filters__right {
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .ec-search-results .ec-tax-filters__right:empty {
        display: none;
    }
}

/* Phone: tighter spacing and a list of compact cards (image left, text right). */
@media only screen and (max-width: 600px) {
    .ec-search-results .ec-tax-listings {
        padding-top: 24px;
    }

    .ec-search-results .ec-area-guide__heading--listings {
        font-size: 1.35rem;
        margin-bottom: 16px;
    }

    .ec-search-results .ec-tax-filters__label {
        font-size: 11px;
    }

    .ec-search-results .ec-tax-filter-pill {
        font-size: 13px;
        padding: 8px 14px;
    }

    .ec-search-results .ec-tax-view-toggle__btn {
        font-size: 13px;
        padding: 9px 14px;
    }

    .ec-search-results .ec-tax-dropdown__btn {
        font-size: 13px;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .ec-search-results .ec-tax-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .ec-search-results .ec-biz-card {
        flex-direction: row;
        align-items: stretch;
        border-radius: 10px;
    }

    .ec-search-results .ec-biz-card:hover {
        transform: none;
    }

    .ec-search-results .ec-biz-card__img-wrap {
        flex: 0 0 104px;
        width: 104px;
    }

    .ec-search-results .ec-biz-card__img {
        aspect-ratio: auto;
        height: 100%;
        min-height: 104px;
    }

    .ec-search-results .ec-biz-card__type-badge {
        top: 6px;
        left: 6px;
        font-size: 8.5px;
        padding: 3px 6px;
    }

    .ec-search-results .ec-biz-card__price {
        top: auto;
        bottom: 6px;
        right: 6px;
        font-size: 10px;
        padding: 3px 6px;
    }

    .ec-search-results .ec-biz-card__body {
        padding: 10px 12px;
        min-width: 0;
        justify-content: center;
    }

    .ec-search-results .ec-biz-card__meta-row {
        justify-content: flex-start;
        gap: 6px;
        margin-bottom: 3px;
        min-width: 0;
    }

    .ec-search-results .ec-biz-card__cat {
        font-size: 10px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ec-search-results .ec-biz-card__area {
        flex-shrink: 0;
        font-size: 11px;
    }

    .ec-search-results .ec-biz-card__cat + .ec-biz-card__area::before {
        content: "\00B7";
        margin-right: 6px;
    }

    .ec-search-results .ec-biz-card__name {
        font-size: 1.05rem;
        line-height: 1.2;
    }

    .ec-search-results .ec-biz-card__tagline {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        font-size: 12.5px;
        line-height: 1.4;
        margin-top: 3px;
    }

    .ec-search-results .ec-biz-card__pills {
        display: none;
    }
}

/* ---------- Section headers on phones ----------
   Eyebrow + H2 on the left and a "See all" link on the right squeezed the
   heading into a narrow column (e.g. "Stories from Rosemary Beach" on four
   lines) and pushed the link off the edge. On phones the link drops under
   the heading and the H2 is a size smaller. Covers the homepage-style
   sections: Stories, Events, Featured Areas, Recommended Posts, Category Tiles. */

@media only screen and (max-width: 600px) {
    .ec-stories__header,
    .ec-events__header,
    .ec-feat-areas__header,
    .ec-rec-posts__header,
    .ec-cat-tiles__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
    }

    .ec-stories__eyebrow,
    .ec-events__eyebrow,
    .ec-feat-areas__eyebrow,
    .ec-rec-posts__eyebrow,
    .ec-cat-tiles__eyebrow {
        font-size: 11px;
        margin-bottom: 8px;
    }

    .ec-stories__heading h2,
    .ec-events__heading h2,
    .ec-feat-areas__heading h2,
    .ec-rec-posts__heading h2,
    .ec-cat-tiles__heading h2 {
        font-size: 1.85rem;
        line-height: 1.1;
    }

    .ec-stories__see-all,
    .ec-events__see-all,
    .ec-feat-areas__see-all,
    .ec-rec-posts__see-all,
    .ec-cat-tiles__see-all {
        font-size: 13.5px;
        white-space: normal;
    }

    /* Stories band */
    .ec-stories__inner {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .ec-stories__intro {
        font-size: 15px;
        line-height: 1.6;
        margin: 0 0 24px;
    }

    .ec-stories__grid {
        gap: 24px;
    }

    .ec-stories__lead-badge {
        top: 12px;
        left: 12px;
        font-size: 10px;
        padding: 6px 10px;
    }

    .ec-stories__lead-body {
        padding-top: 14px;
    }

    .ec-stories__lead-title {
        font-size: 1.4rem;
        margin-top: 8px;
    }

    .ec-stories__lead-dek {
        font-size: 14.5px;
        line-height: 1.55;
        margin-top: 8px;
    }

    .ec-stories__sidebar {
        gap: 16px;
    }

    .ec-stories__compact {
        grid-template-columns: 88px 1fr;
        gap: 14px;
    }

    .ec-stories__compact-title {
        font-size: 1.05rem;
        margin-top: 4px;
    }

    .ec-stories__compact-time {
        margin-top: 4px;
    }
}

/* ---------- Menu drawer after scrolling (tablet / phone) ----------
   Once the page scrolls past 150px the header turns sticky and gets a
   backdrop-filter blur. A backdrop-filter makes the header the containing
   block for position:fixed children, so the drawer (.ec-nav, fixed inside
   the header) was sized to the 72px header instead of the screen and the
   menu items spilled over the page with no background. No blur below
   desktop, so the drawer fills the screen again. */

@media only screen and (max-width: 1149px) {
    .ec-header.is-sticky {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--ec-surface);
    }

    /* Logged-in admin bar: 46px tall and fixed between 601px and 782px. */
    .admin-bar .ec-header.is-sticky {
        top: 46px;
    }
}

/* At 600px and below the admin bar scrolls away with the page, so the sticky
   header (and the drawer under it) sit at the very top. */
@media only screen and (max-width: 600px) {
    .admin-bar .ec-header.is-sticky {
        top: 0;
    }

    .admin-bar .ec-header.is-sticky .ec-nav {
        top: 72px;
    }
}

/* ============================================================
   Area pages (taxonomy-ec_area.php)
   ============================================================ */

/* Hero photo: a real <img> behind the text, darkened for contrast. */
.ec-tax-hero--photo {
    position: relative;
    isolation: isolate;
}

.ec-tax-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
}

.ec-tax-hero--photo::before {
    z-index: -1;
    background-color: transparent;
    background-image: linear-gradient(90deg, rgba(var(--ec-overlay-rgb), 0.9) 0%, rgba(var(--ec-overlay-rgb), 0.72) 45%, rgba(var(--ec-overlay-rgb), 0.35) 100%);
}

@media only screen and (max-width: 800px) {
    .ec-tax-hero--photo::before {
        background-image: linear-gradient(180deg, rgba(var(--ec-overlay-rgb), 0.7) 0%, rgba(var(--ec-overlay-rgb), 0.88) 100%);
    }
}

/* Jump links under the intro */
.ec-area-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ec-area-jump__link {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 100px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.ec-area-jump__link:hover,
.ec-area-jump__link:focus-visible {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

@media only screen and (max-width: 600px) {
    .ec-area-jump {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-right: -5%;
        padding-right: 5%;
    }

    .ec-area-jump::-webkit-scrollbar {
        display: none;
    }

    .ec-area-jump__link {
        font-size: 13px;
        padding: 8px 12px;
    }
}

/* Listing cards: photos are now <img> elements */
img.ec-biz-card__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Events and FAQs sit in their own bands after the listings */
.ec-area-events .ec-area-guide__section:first-child,
.ec-area-faqs .ec-area-guide__section:first-child {
    margin-top: 0;
}

.ec-area-faqs .ec-area-faq {
    max-width: 860px;
}

/* Plan your trip */
.ec-area-plan__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 8px 24px 48px;
}

@media only screen and (min-width: 801px) {
    .ec-area-plan__inner {
        padding: 8px 40px 56px;
    }
}

.ec-area-plan__eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ec-accent);
    margin: 0 0 10px;
    padding: 0;
}

.ec-area-plan__heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 20px;
    padding: 0 !important;
}

.ec-area-plan__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.ec-area-plan__list li {
    margin: 0;
    padding: 0;
}

.ec-area-plan__card {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    padding: 18px 20px;
    border: 1px solid var(--ec-border);
    border-radius: 12px;
    background: var(--ec-surface);
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ec-area-plan__card:hover,
.ec-area-plan__card:focus-visible {
    border-color: var(--ec-accent);
    box-shadow: 0 8px 24px -14px rgba(var(--ec-overlay-rgb), 0.35);
}

main a.ec-area-plan__card:hover .ec-area-plan__title,
.ec-area-plan__title {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.3;
    color: var(--ec-ink);
}

.ec-area-plan__desc {
    font-size: 14px;
    line-height: 1.45;
    color: var(--ec-muted);
}

/* List your business */
.ec-area-biz-cta {
    padding: 0 24px 56px;
}

.ec-area-biz-cta__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px 32px;
    padding: 28px 32px;
    border-radius: 14px;
    background: var(--ec-surface2);
}

.ec-area-biz-cta__heading {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 6px;
    padding: 0 !important;
}

.ec-area-biz-cta__text {
    margin: 0;
    padding: 0;
    font-size: 15px;
    color: var(--ec-muted);
}

@media only screen and (max-width: 600px) {
    .ec-area-plan__heading {
        font-size: 1.45rem;
    }

    .ec-area-biz-cta {
        padding: 0 5% 40px;
    }

    .ec-area-biz-cta__inner {
        padding: 22px 20px;
    }

    .ec-area-biz-cta__heading {
        font-size: 1.3rem;
    }

    .ec-area-biz-cta__btn {
        width: 100%;
        text-align: center;
    }
}

/* Area pages: "Every place in {area}" sits on the off-white band (same
   color as the Stories band) so the white listing cards stand out. */
.ec-tax-area .ec-tax-listings {
    background: var(--ec-surface2);
}

.ec-tax-area .ec-area-guide:has(+ .ec-tax-listings) {
    margin-bottom: 0;
}

.ec-tax-area .ec-tax-listings + .ec-area-guide,
.ec-tax-area .ec-tax-listings + .ec-area-plan {
    margin-top: 0;
}

/* ============================================================
   Mobile menu: touch targets (tablet / phone drawer)
   Every tappable item is at least 44px tall (WCAG 2.5.5 / Apple HIG),
   with the text centred vertically so the spacing still reads the same.
   ============================================================ */

@media only screen and (max-width: 1149px) {
    /* Header icons */
    .ec-header__search-btn {
        width: 44px;
        height: 44px;
    }

    .ec-header__burger {
        min-width: 44px;
        min-height: 44px;
    }

    /* Links inside open panels: area lists, column lists, sublinks */
    .ec-nav .ec-mega__list a,
    .ec-nav .ec-nav__sublink,
    .ec-nav .ec-mega__list--col .ec-nav__sublink {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding-top: 6px;
        padding-bottom: 6px;
        box-sizing: border-box;
        font-size: 16px;
        line-height: 1.25;
    }

    /* Column headings that are links (e.g. "Restaurants", "Shopping") */
    .ec-nav a.ec-mega__label {
        display: flex;
        align-items: center;
        min-height: 44px;
        margin-bottom: 0;
    }

    /* "All areas", "Where is the Emerald Coast?" and similar footer links */
    .ec-nav .ec-mega__all,
    .ec-nav .ec-mega__start {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 4px;
        font-size: 15px;
    }

    .ec-nav .ec-mega__foot {
        gap: 0 20px;
        margin-top: 10px;
        padding-top: 6px;
    }

    /* A little air between region groups in the Areas panel */
    .ec-nav .ec-mega__regions {
        gap: 10px 18px;
    }

    /* Drawer footer: search field and business button */
    .ec-nav__drawer-search input,
    .ec-nav__drawer-search button {
        min-height: 48px;
    }

    .ec-nav__drawer-cta {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================================
   Filter pills and buttons: touch targets
   Tablets, phones and any touch screen: every filter pill, view toggle,
   dropdown, "Clear" button and link pill is at least 44px tall.
   Covers area, category, search, events, event type and story pages.
   ============================================================ */

@media only screen and (max-width: 1149px), (pointer: coarse) {
    .ec-tax-filter-pill,
    .ec-tax-view-toggle__btn,
    .ec-tax-dropdown__btn,
    .ec-tax-dropdown__opt,
    .ec-tax-filters__clear,
    .ec-tax-no-results__clear,
    .ec-arch-hero__pill,
    .ec-arch-dropdown__btn,
    .ec-arch-dropdown__opt,
    .ec-arch-filters__clear,
    .ec-area-jump__link,
    .ec-tax-hero__subarea-pill,
    .ec-area-cat-links__list a,
    .ec-browse__pill {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        box-sizing: border-box;
    }

    /* Menu options inside dropdowns span the full menu width */
    .ec-tax-dropdown__opt,
    .ec-arch-dropdown__opt {
        display: flex;
        width: 100%;
    }

    .ec-tax-filter-pill,
    .ec-arch-hero__pill,
    .ec-tax-hero__subarea-pill,
    .ec-area-cat-links__list a,
    .ec-browse__pill {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ec-tax-view-toggle__btn {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Keep a little space between rows of pills so taps don't land on the wrong one */
    .ec-tax-filters__pills,
    .ec-arch-hero__pills,
    .ec-area-cat-links__list,
    .ec-browse__pills {
        gap: 8px;
    }
}

/* Tablet / phone: the nav is a fixed drawer (out of the header row), so push
   the search and menu buttons to the right edge. The hidden "List your
   business" button used to fill that space. */
@media only screen and (max-width: 1149px) {
    .ec-header__controls {
        margin-left: auto;
    }
}

/* ---------- Story breadcrumb (single-story.php) ----------
   Centered to match the centered story header. The current story's title is
   left out of the visible trail (it is the H1 right below); it stays in the
   BreadcrumbList schema. */
.ec-story__header .ec-story__breadcrumb {
    justify-content: center;
    margin: 0 0 18px;
    font-size: 13px;
}

.ec-story__header .ec-story__breadcrumb > span[aria-current="page"],
.ec-story__header .ec-story__breadcrumb > a:last-of-type + span[aria-hidden="true"] {
    display: none;
}

/* ---------- Site header always on top ----------
   The base theme gives EVERY <header> element z-index: 800, so a content
   header (the story header on single stories) had the same level as the site
   header and, coming later in the page, painted over the open menu panels.
   The site header now sits above everything except the search overlay
   (1200) and the skip link; content headers no longer form their own layer. */
header#main-nav.ec-header {
    z-index: 1100;
}

main header:not(.ec-header),
article header:not(.ec-header) {
    z-index: auto;
}

/* Leaflet maps use z-index up to 1000 on their controls; keep them inside
   the map so they can't cover the menu either. */
.ec-tax-map__canvas,
.leaflet-container {
    isolation: isolate;
}


/* Component links (cards, chips, pills, tiles, event rows) don't underline on
   hover; plain text links in paragraphs and lists still do. Links styled
   with a permanent underline (the "See all" links) are left alone. */
main a[class]:not(.ec-area-guide__all):not([class*="see-all"]):not(.ec-disclosure__more):hover,
main a[class]:not(.ec-area-guide__all):not([class*="see-all"]):not(.ec-disclosure__more):focus-visible {
    text-decoration: none;
}

/* Filter pills: the category pills are links now (crawlable), so centre their
   text like the "All" button instead of sitting at the top of the 44px pill. */
a.ec-tax-filter-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Phones: one swipeable row of pills instead of four stacked rows */
@media only screen and (max-width: 600px) {
    /* The pill row must be as wide as the filter bar, or it grows to fit every pill */
    .ec-tax-filters__left {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    .ec-tax-filters__pills {
        max-width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin-right: -5%;
        padding-right: 5%;
        padding-bottom: 2px;
    }

    .ec-tax-filters__pills::-webkit-scrollbar {
        display: none;
    }

    .ec-tax-filter-pill {
        flex: none;
    }
}

/* Listing card meta row (category + neighborhood): tight line height so a
   long category like "Bars & Nightlife" wraps neatly instead of doubling the row. */
.ec-biz-card__cat,
.ec-biz-card__area {
    line-height: 1.3;
}

.ec-biz-card__meta-row {
    align-items: baseline;
    flex-wrap: wrap;
    row-gap: 2px;
}

/* Sticky header spacer: style.css gives the element right after a sticky
   header 72px of top margin so content doesn't jump. That element is the
   search overlay (.ec-search), not <main>, so the overlay was pushed 72px
   down (header showing through above it) and the page content still jumped.
   Move the spacer to the element after the overlay. */
.ec-header.is-sticky + .ec-search {
    margin-top: 0;
}

.ec-header.is-sticky + .ec-search + * {
    margin-top: 72px;
}

@media only screen and (max-width: 1149px) {
    .ec-header.is-sticky + .ec-search + * {
        margin-top: 0;
    }
}

/* Flexible Guide hero buttons (Header Standard > Buttons) */
.ec-tax-hero__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

/* ── Hero Banner (parts/hero-banner.php, Flexible Guide template) ─────
   Modifiers for the "Hero Banner" ACF options on top of .ec-tax-hero. */
.ec-hero-banner__body {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.ec-hero-banner--narrow .ec-tax-hero__copy {
    max-width: 760px;
}

.ec-hero-banner--center .ec-tax-hero__breadcrumb,
.ec-hero-banner--center .ec-tax-hero__buttons {
    justify-content: center;
}

.ec-hero-banner--center .ec-tax-hero__copy {
    align-items: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.ec-hero-banner--center .ec-tax-hero__dek {
    margin-left: auto;
    margin-right: auto;
}

.ec-hero-banner--bold .ec-tax-hero__heading {
    font-weight: 800;
}

.ec-hero-banner--pad .ec-tax-hero__inner {
    padding-top: calc(32px + var(--ec-hero-pad, 3%));
    padding-bottom: calc(28px + var(--ec-hero-pad, 3%));
}

.ec-hero-banner--add-t-pad .ec-tax-hero__inner {
    padding-top: calc(56px + 4%);
}

.ec-hero-banner--no-b-pad .ec-tax-hero__inner {
    padding-bottom: 0;
}

/* Light backgrounds: White / None */
.ec-hero-banner--white-bg {
    background: #fff;
}

.ec-hero-banner--no-bg {
    background: transparent;
}

.ec-hero-banner--light::before {
    display: none;
}

.ec-hero-banner--light .ec-tax-hero__heading {
    color: var(--ec-ink);
}

.ec-hero-banner--light .ec-tax-hero__eyebrow {
    color: var(--ec-accent);
}

.ec-hero-banner--light .ec-tax-hero__dek,
.ec-hero-banner--light .ec-tax-hero__dek p {
    color: var(--ec-muted);
}

.ec-hero-banner--light .ec-tax-hero__breadcrumb,
.ec-hero-banner--light .ec-tax-hero__breadcrumb a,
.ec-hero-banner--light .ec-tax-hero__breadcrumb span[aria-current=page] {
    color: var(--ec-muted);
}

/* Image overlays (Background: Image) */
.ec-hero-banner--overlay-dark-overlay::before {
    background-image: none;
    background-color: rgba(0, 0, 0, 0.55);
}

.ec-hero-banner--overlay-dark-overlay-left::before {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
}

.ec-hero-banner--overlay-dark-overlay-bottom::before {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.1) 100%);
}

.ec-hero-banner--overlay-dark-overlay-grad::before {
    background-image: linear-gradient(30deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 55%, rgba(0, 0, 0, 0) 100%);
}

/* Side image */
.ec-hero-banner__side-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

@media only screen and (min-width: 801px) {
    .ec-hero-banner--side-right .ec-hero-banner__body,
    .ec-hero-banner--side-left .ec-hero-banner__body {
        flex-direction: row;
        align-items: center;
        gap: 48px;
    }

    .ec-hero-banner--side-left .ec-hero-banner__body {
        flex-direction: row-reverse;
    }

    .ec-hero-banner__body > .ec-tax-hero__copy {
        flex: 1 1 55%;
        min-width: 0;
    }

    .ec-hero-banner__side {
        flex: 0 1 42%;
        max-width: 500px;
    }
}

/* ── Events tile with a photo (parts/flex/category-tiles.php) ───────── */
.ec-todo__tile--events.ec-todo__tile--photo {
    background: var(--ec-hero-bg) center/cover no-repeat;
}

.ec-todo__tile--events.ec-todo__tile--photo::after {
    display: block;
}

/* ── FAQs flexible section (parts/flex/faqs-cpt.php) ───────────────────
   Same look as the area page FAQs (.ec-area-faq), with the theme's
   .question / .answer toggle and FAQPage microdata. */
.ec-flex-faqs__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

@media only screen and (min-width: 801px) {
    .ec-flex-faqs__inner {
        padding: 0 40px;
    }
}

.ec-flex-faqs .ec-area-faq,
.ec-flex-faqs__inner--narrow .ec-flex-faqs__heading {
    max-width: 860px;
}

.ec-flex-faqs__heading {
    margin-bottom: 22px;
}

.ec-flex-faqs__heading h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ec-ink);
    margin: 0;
    padding: 0 !important;
}

.ec-flex-faqs__heading p {
    margin: 10px 0 0;
    color: var(--ec-muted);
}

.ec-flex-faqs .ec-area-faq__item:has(.question.active) {
    border-color: var(--ec-border-d);
}

.ec-flex-faqs .question.ec-area-faq__q,
.white-bg .ec-flex-faqs .question.ec-area-faq__q,
.ec-flex-faqs.white-bg .question.ec-area-faq__q {
    align-items: center;
    background-color: transparent;
    transform: none;
    transition: color 0.15s ease;
}

.ec-flex-faqs .question.ec-area-faq__q:hover {
    transform: none;
}

.ec-flex-faqs .question.ec-area-faq__q:focus-visible {
    outline: 2px solid var(--ec-accent);
    outline-offset: -2px;
    border-radius: 10px;
}

.ec-flex-faqs .question.active.ec-area-faq__q::after {
    content: "\2212";
}

.ec-flex-faqs .ec-area-faq__title {
    font: inherit;
    color: inherit;
    letter-spacing: 0;
    margin: 0;
    padding: 0 !important;
}

.ec-flex-faqs .ec-area-faq__a > div > :last-child {
    margin-bottom: 0;
}

.ec-flex-faqs__buttons .flex-row {
    gap: 12px;
    margin-top: 24px;
}

@media only screen and (max-width: 600px) {
    .ec-flex-faqs__heading h2 {
        font-size: 1.7rem;
    }
}