/* 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;
    }
}