/* MEast Directory — layered over storefront.css. Palette, header, category board. */

:root {
    --color-bg: #f4f6fb;
    --color-accent: #2a55d4;
    --color-accent-2: #f5a623;
    --color-accent-100: #e3ebff; --color-accent-200: #c5d5ff; --color-accent-300: #9db8ff;
    --color-accent-400: #6b92f5; --color-accent-500: #3b6df0; --color-accent-600: #2a55d4;
    --color-accent-700: #1f43aa; --color-accent-800: #183584; --color-accent-900: #12285f;
    --color-accent-2-100: #fff3d6; --color-accent-2-200: #ffe4a3; --color-accent-2-300: #ffd170;
    --color-accent-2-400: #fbbb3c; --color-accent-2-500: #f5a623; --color-accent-2-600: #d98a0b;
    --color-accent-2-700: #a96a06; --color-accent-2-800: #7d4e05; --color-accent-2-900: #523303;
    --mel-navy: #0f2742;
}

/* ── Top bar: region, language, tagline ─────────────────────────────────── */
.mel-topbar { background: var(--mel-navy); color: #dbe4f3; font-size: 13px; }
.mel-topbar__in { display: flex; align-items: center; gap: var(--space-4); min-height: 38px; }
.mel-topbar__tag { margin-inline-start: auto; opacity: .85; }
.mel-topbar__link { color: #fff; font-weight: 600; }
.mel-topbar__link:hover { color: var(--color-accent-2-300); text-decoration: none; }

.mel-pop { position: relative; }
.mel-pop > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    user-select: none;
}
.mel-pop > summary::-webkit-details-marker { display: none; }
.mel-topbar .mel-pop > summary { color: #fff; font-weight: 600; padding-block: 8px; }
.mel-pop__panel {
    position: absolute; inset-inline-start: 0; top: calc(100% + 6px); z-index: 60;
    min-width: 220px; max-height: 70vh; overflow: auto;
    background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-divider); border-radius: 12px;
    box-shadow: 0 18px 40px rgba(15, 39, 66, .18); padding: 8px;
    display: flex; flex-direction: column;
}
.mel-pop__panel a { padding: 8px 12px; border-radius: 8px; color: var(--color-text); font-size: 14px; }
.mel-pop__panel a:hover { background: var(--color-accent-100); text-decoration: none; }
.mel-region__panel { columns: 2; display: block; min-width: 340px; }
.mel-region__panel a { display: block; break-inside: avoid; }
.mel-region__all { font-weight: 700; color: var(--color-accent-700) !important; }

/* ── Main bar: logo | All categories | search | account + CTA ───────────── */
.mel-header { background: var(--color-surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--color-divider); }
.mel-header .sf-header__bar { gap: var(--space-3); flex-wrap: nowrap; padding-block: 10px; }
.mel-header .sf-logo { margin-inline-end: var(--space-2); }

.mel-cats > summary { display: inline-flex; gap: 8px; white-space: nowrap; }
.mel-cats__panel {
    inset-inline-start: 0; width: min(980px, 94vw); display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; padding: 18px;
}
.mel-cats__col { display: flex; flex-direction: column; }
.mel-cats__parent { display: flex !important; align-items: center; gap: 8px; font-weight: 700; color: var(--color-accent-700) !important; }
.mel-cats__child { font-size: 13px !important; color: var(--color-muted) !important; padding-block: 5px !important; }

.mel-search {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
    background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: 12px;
    padding-inline: 14px 4px; height: 46px;
}
.mel-search:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent); background: var(--color-surface); }
.mel-search svg { flex: none; color: var(--color-muted); }
.mel-search input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font: inherit; font-size: 15px;
    color: var(--color-text); height: 100%;
}
.mel-search button {
    border: 0; background: transparent; color: var(--color-accent-700); font-weight: 700; font-size: 14px;
    padding: 0 16px; height: 36px; border-radius: 9px; cursor: pointer;
}
.mel-search button:hover { background: var(--color-accent-100); }

.mel-header .sf-nav { margin-inline-start: 0; flex: none; }
.mel-header .sf-nav__cta {
    background: var(--color-accent-600); color: #fff; font-weight: 700; border-radius: 12px; padding-inline: 20px; height: 46px;
}
.mel-header .sf-nav__cta:hover { background: var(--color-accent-700); }

/* ── Home: compact hero + category board ────────────────────────────────── */
.mel-hero { background: linear-gradient(135deg, var(--mel-navy), #1b3d78); color: #fff; padding-block: 44px 40px; }
.mel-hero__title { font-family: var(--font-heading); font-size: clamp(28px, 4.2vw, 46px); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 10px; color: #fff; }
.mel-hero__sub { margin: 0 0 22px; font-size: 17px; max-width: 60ch; color: #cdd9ee; }
.mel-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mel-chip {
    padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 14px; font-weight: 600;
    border: 1px solid rgba(255, 255, 255, .22);
}
.mel-chip:hover { background: var(--color-accent-2-500); border-color: var(--color-accent-2-500); color: var(--mel-navy); text-decoration: none; }

.mel-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mel-tile {
    background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 16px; padding: 16px;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.mel-tile:hover { box-shadow: 0 12px 28px rgba(15, 39, 66, .1); transform: translateY(-2px); border-color: var(--color-accent-300); }
.mel-tile__head { display: flex; align-items: center; gap: 12px; color: var(--color-text); }
.mel-tile__head:hover { text-decoration: none; }
.mel-tile__icon {
    flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
    background: var(--color-accent-100); color: var(--color-accent-700);
}
.mel-tile:nth-child(3n+2) .mel-tile__icon { background: var(--color-accent-2-100); color: var(--color-accent-2-700); }
.mel-tile__name { flex: 1; font-weight: 700; font-size: 16px; line-height: 1.25; }
.mel-tile__count { font-size: 12px; font-weight: 700; color: var(--color-muted); background: var(--color-bg); border-radius: 999px; padding: 2px 9px; }
.mel-tile__subs { list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px dashed var(--color-divider); display: grid; gap: 2px; }
.mel-tile__subs a { display: block; padding: 4px 2px; font-size: 14px; color: var(--color-muted); }
.mel-tile__subs a:hover { color: var(--color-accent-700); text-decoration: none; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.sf-card__price { font-size: 13px; font-weight: 600; color: var(--color-muted); }
.sf-card__cat { background: var(--color-accent-2-500); color: var(--mel-navy); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .mel-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mel-cats__panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .mel-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mel-cats__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mel-topbar__tag { display: none; }
    .mel-topbar__link { margin-inline-start: auto; }
    .mel-header .sf-header__bar { flex-wrap: wrap; }
    .mel-search { order: 5; flex: 1 1 100%; }
    .mel-cats > summary span { display: none; }
    .mel-cats__panel { position: fixed; inset-inline: 8px; top: 120px; width: auto; }
}
@media (max-width: 560px) {
    .mel-tiles { grid-template-columns: 1fr; }
    .mel-region__panel { columns: 1; min-width: 220px; }
    .mel-cats__panel { grid-template-columns: 1fr; max-height: 70vh; }
}

/* ── Business contact card ──────────────────────────────────────────────── */
.mel-contact__name { margin: 0 0 6px; font-weight: 700; font-size: 17px; }
.mel-contact__row { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; font-size: 14px; color: var(--color-muted); }
.mel-contact__row svg { flex: none; margin-top: 3px; }
.mel-contact__actions { display: grid; gap: 8px; margin-top: 14px; }
.mel-contact__actions .sf-btn { justify-content: center; word-break: break-word; }