/*
=========================================================
 EBONY QUEST
 Main Website Stylesheet
=========================================================
*/

/* RESET / WORDPRESS COMPATIBILITY */

html,
body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
}

body {
    overflow-x: hidden;
}

#eq-page,
#eq-page * {
    box-sizing: border-box;
}

#eq-page {
    position: relative;
    width: 100%;
    min-height: 100svh;
    overflow-x: hidden;
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    color: #111111;
}


/*
=========================================================
 TOP NAVIGATION
=========================================================
*/

.eq-nav {
    width: 100% !important;
    min-height: 58px !important;

    margin: 0 !important;
    padding: 0 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    gap: clamp(30px, 5vw, 70px) !important;

    background: #071a40 !important;

    box-sizing: border-box !important;

    position: relative !important;
    z-index: 999 !important;
}

.eq-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 10px 8px !important;

    color: #ffffff !important;
    background: transparent !important;

    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
    text-transform: none !important;

    white-space: nowrap !important;

    opacity: 1 !important;
    visibility: visible !important;
}

.eq-nav a:hover,
.eq-nav a:focus,
.eq-nav a:focus-visible {
    color: #d4af20 !important;
    background: transparent !important;
    text-decoration: none !important;
}


/*
=========================================================
 HERO / CITY BACKGROUND
=========================================================
*/

#eq-page .eq-hero {
    width: 100%;

    min-height: 40svh;

    background-image: url("../images/cityscape.jpg");
    background-size: cover;
    background-position: center 32%;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(24px, 5vw, 58px) 20px 34px;
}


/*
=========================================================
 HERO CONTENT
=========================================================
*/

#eq-page .eq-hero-inner {
    width: min(760px, 92vw);
    margin: 0 auto;
    text-align: center;
}


/*
=========================================================
 EBONY QUEST TITLE
=========================================================
*/

#eq-page .eq-title {
    margin: 0 0 clamp(28px, 5vw, 42px);

    color: #d4af20;

    font-family: Candara, Calibri, Arial, sans-serif;

    font-size: clamp(44px, 7vw, 76px);

    line-height: 0.95;

    font-weight: 800;

    letter-spacing: -2px;

    -webkit-text-stroke: 2px #111111;

    paint-order: stroke fill;

    text-shadow:
        0 2px 3px rgba(0, 0, 0, 0.95),
        0 4px 10px rgba(0, 0, 0, 0.70);
}


/*
=========================================================
 SEARCH BAR
=========================================================
*/

#eq-page .eq-searchbar {
    width: 100%;
    min-height: 64px;

    border-radius: 34px;

    background: #ffffff;

    display: flex;
    align-items: center;

    padding: 0 22px;

    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

#eq-page .eq-searchbar svg {
    width: 25px;
    height: 25px;

    color: #64748b;

    flex: 0 0 auto;
}

#eq-page .eq-searchbar input {
    min-width: 0;
    width: 100%;

    border: 0 !important;
    outline: 0 !important;

    box-shadow: none !important;

    padding: 18px 16px !important;

    font-size: clamp(16px, 2vw, 18px) !important;

    color: #222222 !important;

    background: transparent !important;
}


/*
=========================================================
 SEARCH BUTTONS
=========================================================
*/

#eq-page .eq-buttons {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 14px;

    margin-top: 24px;

    flex-wrap: wrap;
}

#eq-page .eq-button {
    appearance: none;
    -webkit-appearance: none;

    background: #253247 !important;

    color: #ffffff !important;

    border: 1px solid #253247 !important;

    border-radius: 7px !important;

    padding: 12px 20px !important;

    min-width: 150px;
    min-height: 46px;

    font-size: 14px !important;

    font-weight: 700 !important;

    line-height: 1.2 !important;

    cursor: pointer;

    opacity: 1 !important;

    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.20) !important;
}

#eq-page .eq-button:hover {
    background: #1d2939 !important;

    border-color: #1d2939 !important;

    color: #ffffff !important;
}


/*
=========================================================
 LOWER WHITE SECTION
=========================================================
*/

#eq-page .eq-lower {
    width: 100%;

    min-height: 60svh;

    background: #ffffff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

    padding: clamp(38px, 6vw, 55px) 20px 18px;
}


/*
=========================================================
 QUICK-LINK ICON GRID
=========================================================
*/

#eq-page .eq-icons {
    display: grid;

    grid-template-columns: repeat(6, 50px);

    justify-content: center;

    gap: 46px 38px;

    max-width: 100%;
}

#eq-page .eq-icon {
    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: #000000;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 20px;

    font-weight: 700;

    text-decoration: none !important;

    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.18);
}


/*
=========================================================
 SOCIAL ICON COLORS
=========================================================
*/

#eq-page .instagram {
    color: #ff2d74;
}

#eq-page .youtube {
    color: #ff0000;
}

#eq-page .facebook {
    color: #1685ff;
}

#eq-page .wikipedia {
    font-family: Georgia, serif;
    font-size: 25px;
}

#eq-page .reddit {
    color: #ff4500;
}

#eq-page .linkedin {
    color: #0a66c2;
}

#eq-page .twitch {
    color: #9146ff;
}

#eq-page .snapchat {
    color: #ffe600;
}

#eq-page .pinterest {
    color: #e60023;
}

#eq-page .telegram {
    color: #27a7e7;
}


/*
=========================================================
 FOOTER
=========================================================
*/

#eq-page .eq-footer {
    width: 100%;

    text-align: center;

    color: #667085;

    font-size: 14px;

    padding-top: 38px;
}


/*
=========================================================
 BUSINESS DIRECTORY / LIST YOUR BUSINESS
=========================================================
*/

.eq-content {
    max-width: 1050px;

    margin: 32px auto;

    padding: 0 20px 50px;

    color: #14213a;

    font: 16px/1.5 Arial, Helvetica, sans-serif;
}

.eq-content h1 {
    color: #142b60;
}


/*
=========================================================
 DIRECTORY SEARCH
=========================================================
*/

.eq-directory-search,
.eq-listing-form {
    display: grid;

    gap: 12px;

    background: #f2f5fb;

    padding: 22px;

    border-radius: 14px;
}

.eq-directory-search {
    grid-template-columns: 1fr 1fr auto;

    align-items: end;
}

.eq-directory-search label {
    grid-row: 1;
}

.eq-directory-search input,
.eq-directory-search select {
    grid-row: 2;
}

.eq-directory-search button {
    grid-column: 3;

    grid-row: 2;
}


/*
=========================================================
 DIRECTORY FORM FIELDS
=========================================================
*/

.eq-content input,
.eq-content select,
.eq-content textarea {
    box-sizing: border-box;

    width: 100%;

    padding: 12px;

    border: 1px solid #aebbd1;

    border-radius: 8px;

    font: inherit;

    background: #ffffff;
}

.eq-content button {
    padding: 13px 22px;

    border: 0;

    border-radius: 8px;

    background: #124aaf;

    color: #ffffff;

    font: 700 16px Arial, Helvetica, sans-serif;

    cursor: pointer;
}

.eq-content button:hover {
    background: #0d347e;
}


/*
=========================================================
 BUSINESS LISTINGS
=========================================================
*/

.eq-business-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 18px;

    margin: 24px 0;
}

.eq-business-card {
    padding: 20px;

    border: 1px solid #dae1ed;

    border-radius: 12px;

    background: #ffffff;

    box-shadow: 0 3px 10px #1a315014;
}

.eq-business-card h2 {
    margin-top: 0;
}


/*
=========================================================
 BUSINESS SUBMISSION FORM
=========================================================
*/

.eq-listing-form {
    max-width: 650px;
}

.eq-listing-form label {
    font-weight: 600;
}

.eq-listing-form label input,
.eq-listing-form label select,
.eq-listing-form label textarea {
    display: block;

    margin-top: 5px;

    font-weight: 400;
}


/*
=========================================================
 DIRECTORY UTILITIES
=========================================================
*/

.eq-trap {
    position: absolute;

    left: -9999px;

    height: 1px;

    overflow: hidden;
}

.eq-notice {
    padding: 12px 16px;

    background: #e4efff;

    border-left: 4px solid #124aaf;
}

.eq-small {
    font-size: 13px;

    margin: 0;
}

.eq-pagination a,
.eq-pagination span {
    margin-right: 10px;
}


/*
=========================================================
 TABLET
=========================================================
*/

@media (max-width: 800px) {

    #eq-page .eq-icons {
        grid-template-columns: repeat(4, 50px);

        gap: 30px;
    }

    #eq-page .eq-hero {
        min-height: 44svh;

        background-position: center 30%;
    }

    #eq-page .eq-lower {
        min-height: 56svh;
    }
}


/*
=========================================================
 PHONES
=========================================================
*/

@media (max-width: 650px) {

    .eq-nav {
        min-height: 58px !important;

        padding: 10px 8px !important;

        gap: 8px !important;

        flex-wrap: wrap !important;
    }

    .eq-nav a {
        font-size: 12px !important;

        padding: 8px 6px !important;
    }

    .eq-directory-search {
        display: block;
    }

    .eq-directory-search > * {
        display: block;

        margin: 7px 0;

        width: 100%;
    }
}


@media (max-width: 520px) {

    #eq-page .eq-hero {
        min-height: 48svh;

        padding-left: 14px;

        padding-right: 14px;
    }

    #eq-page .eq-title {
        font-size: clamp(40px, 13vw, 58px);

        letter-spacing: -1px;

        -webkit-text-stroke: 1.5px #111111;
    }

    #eq-page .eq-searchbar {
        min-height: 58px;

        padding: 0 15px;
    }

    #eq-page .eq-buttons {
        gap: 10px;
    }

    #eq-page .eq-button {
        min-width: 135px;

        padding: 11px 15px !important;
    }

    #eq-page .eq-icons {
        grid-template-columns: repeat(3, 50px);

        gap: 26px 30px;
    }
}


/*
=========================================================
 VERY SMALL PHONES
=========================================================
*/

@media (max-width: 360px) {

    #eq-page .eq-icons {
        grid-template-columns: repeat(3, 46px);

        gap: 22px;
    }

    #eq-page .eq-icon {
        width: 46px;

        height: 46px;
    }
}
/* Keep navigation below the signed-in WordPress toolbar. */
body.admin-bar { padding-top: 32px !important; }
.eq-nav { flex-wrap: wrap !important; }
@media (max-width: 782px) { body.admin-bar { padding-top: 46px !important; } }

/* Responsive page foundations: phones, tablets, and touch devices. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.eq-content,.eq-listing-form,.eq-nav,#eq-page{max-width:100%;box-sizing:border-box}
.eq-content{overflow-wrap:anywhere}
.eq-content input,.eq-content select,.eq-content textarea{min-width:0;font-size:16px;min-height:44px}
.eq-content textarea{resize:vertical}
.eq-listing-form{width:100%;box-sizing:border-box}
.eq-nav a{min-height:44px!important;box-sizing:border-box!important}
.eq-content button{min-height:44px}
:where(.eq-nav,.eq-content,#eq-page) a:focus-visible,:where(.eq-content,#eq-page) button:focus-visible,:where(.eq-content,#eq-page) input:focus-visible{outline:3px solid #d4af20;outline-offset:3px}
@media(max-width:1024px){.eq-nav{gap:12px!important;padding:8px 16px!important}.eq-content{margin:24px auto;padding:0 20px 32px}}
@media(max-width:600px){.eq-nav{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px!important;padding:8px!important}.eq-nav a{white-space:normal!important;text-align:center;font-size:13px!important;padding:10px 6px!important}.eq-content{margin:20px auto;padding:0 14px 28px}.eq-content h1{font-size:clamp(25px,7vw,34px);line-height:1.2}.eq-listing-form{padding:16px;gap:16px}.eq-listing-form button{width:100%}#eq-page .eq-hero-inner{width:100%}#eq-page .eq-title{font-size:clamp(35px,11vw,58px)}#eq-page .eq-searchbar input{font-size:16px!important;padding:16px 10px!important}#eq-page .eq-searchbar{padding:0 14px}#eq-page .eq-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}#eq-page .eq-button{min-width:0;width:100%;padding:12px 8px!important;min-height:48px}#eq-page .eq-lower{padding-bottom:max(20px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){#eq-page *, .eq-equest *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}