/* ═══════════════════════════════════════════════════════
   Vieww Directory — Frontend Styles
   Colour variables: swap --viewwdi-primary to match brand

   Link selectors use element+class (a.viewwdi-*) to beat
   Elementor's broad ".elementor a" specificity.
═══════════════════════════════════════════════════════ */

:root {
    --viewwdi-primary:    #2A7A7A;
    --viewwdi-primary-dk: #1f5a5a;
    --viewwdi-accent:     #97CECB;
    --viewwdi-border:     #e0e0e0;
    --viewwdi-bg-soft:    #f9f9f9;
    --viewwdi-text:       #333333;
    --viewwdi-muted:      #666666;
    --viewwdi-radius:     10px;
}


/* ── Sidebar ──────────────────────────────────────────── */

.viewwdi-sidebar {
    background: #fff;
    border: 1px solid var(--viewwdi-border);
    border-radius: var(--viewwdi-radius);
    overflow: hidden;
}

.viewwdi-sidebar__title {
    background: var(--viewwdi-primary);
    color: #fff;
    margin: 0;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.viewwdi-sidebar__list,
.viewwdi-sidebar__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.viewwdi-sidebar__list {
    padding: 8px 0;
}

.viewwdi-sidebar a.viewwdi-sidebar__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    color: var(--viewwdi-text);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s, color 0.15s;
    line-height: 1.3;
}

.viewwdi-sidebar a.viewwdi-sidebar__link:hover {
    background: var(--viewwdi-bg-soft);
    color: var(--viewwdi-primary);
}

.viewwdi-sidebar__item--active > a.viewwdi-sidebar__link {
    background: var(--viewwdi-primary);
    color: #fff;
    font-weight: 600;
}

.viewwdi-sidebar__item--active > a.viewwdi-sidebar__link .viewwdi-sidebar__count {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.viewwdi-sidebar__label {
    flex: 1;
}

.viewwdi-sidebar__count {
    background: var(--viewwdi-bg-soft);
    color: var(--viewwdi-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 50px;
    min-width: 22px;
    text-align: center;
}

.viewwdi-sidebar__arrow {
    font-size: 16px;
    color: var(--viewwdi-muted);
    margin-left: 2px;
    transition: transform 0.2s;
}

.viewwdi-sidebar__item--open > a.viewwdi-sidebar__link .viewwdi-sidebar__arrow {
    transform: rotate(90deg);
    color: var(--viewwdi-primary);
}

/* Sub-categories */
.viewwdi-sidebar__sublist {
    display: none;
    background: var(--viewwdi-bg-soft);
    border-top: 1px solid var(--viewwdi-border);
    padding: 4px 0;
}

.viewwdi-sidebar__item--open > .viewwdi-sidebar__sublist {
    display: block;
}

.viewwdi-sidebar__sublist a.viewwdi-sidebar__link {
    padding: 8px 20px 8px 36px;
    font-size: 13px;
}

.viewwdi-sidebar__sublist .viewwdi-sidebar__item--active > a.viewwdi-sidebar__link {
    background: var(--viewwdi-primary);
    color: #fff;
}

/* Divider between parent items */
.viewwdi-sidebar__list > .viewwdi-sidebar__item + .viewwdi-sidebar__item {
    border-top: 1px solid var(--viewwdi-border);
}


/* ── Search bar ───────────────────────────────────────── */

form.viewwdi-search {
    margin-bottom: 20px;
}

.viewwdi-search .viewwdi-search__wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.viewwdi-search input.viewwdi-search__input {
    width: 100%;
    padding: 11px 48px 11px 16px;
    border: 2px solid var(--viewwdi-border);
    border-radius: 8px;
    font-size: 15px;
    color: var(--viewwdi-text);
    box-sizing: border-box;
    transition: border-color 0.2s;
    background: #fff;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.4;
    height: auto;
    margin: 0;
}

.viewwdi-search input.viewwdi-search__input:focus {
    outline: none;
    border-color: var(--viewwdi-primary);
    box-shadow: none;
}

.viewwdi-search button.viewwdi-search__btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    color: var(--viewwdi-primary);
    line-height: 1;
    box-shadow: none;
}

.viewwdi-search button.viewwdi-search__btn:hover {
    color: var(--viewwdi-primary-dk);
}

.viewwdi-search button.viewwdi-search__btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
}

a.viewwdi-search__clear {
    position: absolute;
    right: 40px;
    font-size: 20px;
    color: var(--viewwdi-muted);
    text-decoration: none;
    line-height: 1;
    padding: 4px;
}

a.viewwdi-search__clear:hover { color: #c00; }

/* Results label */
.viewwdi-results-label {
    font-size: 13px;
    color: var(--viewwdi-muted);
    margin: 0 0 16px;
}

.viewwdi-results-count { font-weight: 600; }

a.viewwdi-results-clear {
    color: var(--viewwdi-primary);
    text-decoration: underline;
}


/* ── Grid ─────────────────────────────────────────────── */

.viewwdi-grid {
    display: grid;
    gap: 20px;
}

.viewwdi-cols-2 { grid-template-columns: repeat(2, 1fr); }
.viewwdi-cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1100px) {
    .viewwdi-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .viewwdi-cols-2,
    .viewwdi-cols-3 { grid-template-columns: 1fr; }
}


/* ── Card ─────────────────────────────────────────────── */

.viewwdi-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--viewwdi-border);
    border-radius: var(--viewwdi-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.viewwdi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.viewwdi-card--featured {
    border-color: var(--viewwdi-accent);
    box-shadow: 0 2px 10px rgba(232,180,0,0.2);
}

/* Badge */
.viewwdi-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--viewwdi-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 1;
}

/* Logo area */
.viewwdi-card__logo {
    background: var(--viewwdi-bg-soft);
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 14px;
    flex-shrink: 0;
}

.viewwdi-card__logo img {
    max-height: 102px;
    max-width: 100%;
    object-fit: contain;
}

.viewwdi-card__initials {
    width: 64px;
    height: 64px;
    background: var(--viewwdi-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Body */
.viewwdi-card__body {
    padding: 18px 18px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.viewwdi-card__name {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.viewwdi-card__name a {
    color: var(--viewwdi-primary);
    text-decoration: none;
}

.viewwdi-card .viewwdi-card__name a:hover { text-decoration: underline; }

.viewwdi-card__tagline {
    margin: 0;
    font-size: 13px;
    color: var(--viewwdi-muted);
    font-style: italic;
    line-height: 1.4;
}

/* Category tags */
.viewwdi-card__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.viewwdi-tag {
    background: var(--viewwdi-bg-soft);
    color: var(--viewwdi-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Contact rows */
.viewwdi-card__contact {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
}

.viewwdi-card .viewwdi-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 13px;
    color: var(--viewwdi-text);
    text-decoration: none;
    line-height: 1.4;
}

.viewwdi-card a.viewwdi-contact-row:hover { color: var(--viewwdi-primary); }

.viewwdi-contact-row svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    margin-top: 2px;
    fill: var(--viewwdi-primary);
}

/* Footer */
.viewwdi-card__footer {
    padding: 14px 18px;
    border-top: 1px solid var(--viewwdi-border);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Buttons */
a.viewwdi-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.18s;
    line-height: 1;
    white-space: nowrap;
}

a.viewwdi-btn.viewwdi-btn--primary {
    background: var(--viewwdi-primary);
    color: #fff;
    border: 2px solid var(--viewwdi-primary);
}

a.viewwdi-btn.viewwdi-btn--primary:hover {
    background: var(--viewwdi-primary-dk);
    border-color: var(--viewwdi-primary-dk);
    color: #fff;
}

a.viewwdi-btn.viewwdi-btn--outline {
    background: transparent;
    color: var(--viewwdi-primary);
    border: 2px solid var(--viewwdi-primary);
}

a.viewwdi-btn.viewwdi-btn--outline:hover {
    background: var(--viewwdi-primary);
    color: #fff;
}

/* Social icons (in card body, under tagline) */
.viewwdi-card__socials {
    display: flex;
    gap: 8px;
}

.viewwdi-card__socials a {
    color: var(--viewwdi-muted);
    display: flex;
    text-decoration: none;
    transition: color 0.15s;
}

.viewwdi-card__socials a:hover { color: var(--viewwdi-primary); }

.viewwdi-card__socials svg {
    width: 16px;
    height: 16px;
}

/* No results */
.viewwdi-no-results {
    padding: 32px 0;
    text-align: center;
    color: var(--viewwdi-muted);
}

.viewwdi-no-results p { margin-bottom: 16px; }


/* ═══════════════════════════════════════════════════════
   Directory Archive Layout — sidebar + main grid
═══════════════════════════════════════════════════════ */

.viewwdi-archive-wrap {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 24px 64px;
    box-sizing: border-box;
}

.viewwdi-archive-wrap .viewwdi-directory-layout {
    display: grid !important;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
}

.viewwdi-archive-wrap .viewwdi-directory-layout__sidebar {
    position: sticky;
    top: 100px;
}

@media (max-width: 860px) {
    .viewwdi-archive-wrap .viewwdi-directory-layout {
        grid-template-columns: 1fr;
    }

    .viewwdi-archive-wrap .viewwdi-directory-layout__sidebar {
        position: static;
    }
}


/* ═══════════════════════════════════════════════════════
   Single Member Profile Page
═══════════════════════════════════════════════════════ */

.viewwdi-single-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

/* Back link */
a.viewwdi-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--viewwdi-muted);
    text-decoration: none;
    margin-bottom: 28px;
    transition: color 0.15s;
}

a.viewwdi-back-link:hover { color: var(--viewwdi-primary); }

.viewwdi-back-link svg {
    width: 16px;
    height: 16px;
}

/* Header */
.viewwdi-single__header {
    display: flex;
    gap: 32px;
    align-items: flex-start;
    margin-bottom: 40px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--viewwdi-border);
}

.viewwdi-single__logo {
    flex-shrink: 0;
    width: 140px;
    height: 140px;
    background: var(--viewwdi-bg-soft);
    border: 1px solid var(--viewwdi-border);
    border-radius: var(--viewwdi-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
    box-sizing: border-box;
}

.viewwdi-single__logo img {
    max-width: 100%;
    max-height: 116px;
    object-fit: contain;
}

.viewwdi-single__initials {
    width: 72px;
    height: 72px;
    background: var(--viewwdi-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
}

.viewwdi-single__header-info {
    flex: 1;
    min-width: 0;
}

.viewwdi-single__meta-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.viewwdi-single__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.viewwdi-single__title {
    font-size: 32px;
    font-weight: 800;
    color: var(--viewwdi-primary);
    margin: 0 0 6px;
    line-height: 1.2;
}

.viewwdi-single__tagline {
    font-size: 16px;
    color: var(--viewwdi-muted);
    margin: 0 0 20px;
    font-style: italic;
}

/* Body layout */
.viewwdi-single__body {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    align-items: flex-start;
}

/* About / content */
.viewwdi-single__section {
    margin-bottom: 36px;
}

.viewwdi-single__section:last-child { margin-bottom: 0; }

.viewwdi-single__section-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--viewwdi-primary);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--viewwdi-border);
}

.viewwdi-single__content {
    font-size: 15px;
    line-height: 1.7;
    color: var(--viewwdi-text);
}

.viewwdi-single__content p { margin: 0 0 1em; }
.viewwdi-single__content p:last-child { margin-bottom: 0; }

/* Photo gallery */
.viewwdi-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.viewwdi-gallery__item {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    aspect-ratio: 4/3;
}

.viewwdi-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.viewwdi-gallery__item:hover img { transform: scale(1.04); }

/* Aside card */
.viewwdi-single__aside-card {
    background: #fff;
    border: 1px solid var(--viewwdi-border);
    border-radius: var(--viewwdi-radius);
    overflow: hidden;
    position: sticky;
    top: 100px;
}

.viewwdi-single__aside-title {
    background: var(--viewwdi-primary);
    color: #fff;
    margin: 0;
    padding: 14px 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.viewwdi-single__contact-list {
    padding: 4px 0;
}

.viewwdi-single__contact-item {
    display: flex;
    flex-direction: column;
    padding: 12px 20px;
    border-bottom: 1px solid var(--viewwdi-border);
    gap: 2px;
}

.viewwdi-single__contact-item:last-child { border-bottom: none; }

.viewwdi-single__contact-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--viewwdi-muted);
}

.viewwdi-single-wrap .viewwdi-single__contact-value {
    font-size: 14px;
    color: var(--viewwdi-text);
    text-decoration: none;
    word-break: break-word;
}

.viewwdi-single-wrap a.viewwdi-single__contact-value:hover { color: var(--viewwdi-primary); }

/* Social links in aside */
.viewwdi-single__socials {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid var(--viewwdi-border);
}

.viewwdi-single-wrap a.viewwdi-single__social-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--viewwdi-text);
    text-decoration: none;
    transition: color 0.15s;
}

.viewwdi-single-wrap a.viewwdi-single__social-link:hover { color: var(--viewwdi-primary); }

.viewwdi-single__social-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 860px) {
    .viewwdi-single__body {
        grid-template-columns: 1fr;
    }

    .viewwdi-single__aside-card {
        position: static;
    }

    .viewwdi-single__aside {
        order: -1;
    }
}

@media (max-width: 600px) {
    .viewwdi-single__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .viewwdi-single__meta-top {
        justify-content: center;
    }

    .viewwdi-single__title { font-size: 26px; }

    .viewwdi-gallery {
        grid-template-columns: repeat(2, 1fr);
    }
}