/*
Theme Name: DataCenterUPS
Theme URI: https://datacenterups.com
Description: Astra child theme for DataCenterUPS contractor directory
Template: astra
Version: 1.0.0
Author: DataCenterUPS
*/

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
    --dcu-blue:       #1B3A6B;
    --dcu-blue-light: #2952A3;
    --dcu-orange:     #E8501A;
    --dcu-orange-hover: #CC4414;
    --dcu-bg:         #F8F9FA;
    --dcu-white:      #FFFFFF;
    --dcu-gray-100:   #F1F3F5;
    --dcu-gray-300:   #CED4DA;
    --dcu-gray-500:   #868E96;
    --dcu-gray-700:   #495057;
    --dcu-gray-900:   #212529;
    --dcu-shadow:     0 2px 8px rgba(0,0,0,0.08);
    --dcu-shadow-hover: 0 6px 20px rgba(0,0,0,0.14);
    --dcu-radius:     6px;
    --dcu-font:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}

/* ============================================================
   HEADER — FIX BLANK SPACE
   The Astra header was floating in ~500px of dead space due to
   hero plugin pushing a huge margin-top on .site. Reset it all.
   ============================================================ */
.site-header,
.main-header-bar,
.ast-header-break-point {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
}

/* Remove any spacer/hero plugin adds a padding-top to .site */
.site,
#page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Ensure the header sits flush at the top of the viewport */
.ast-header-break-point .main-header-bar,
.ast-above-header-bar,
.header-main-layout-1 .main-header-bar {
    position: relative;
    top: 0 !important;
}

/* Fix any blank canvas the Elementor hero plugin creates above the header */
body.dcu-modernized .elementor-page-title,
body .dcu-hero-spacer,
.ast-page-builder-template .site-header ~ .ast-page-builder-template {
    margin-top: 0 !important;
}

/* ============================================================
   GLOBAL RESET FOR CONTRACTOR PAGES
   ============================================================ */
body {
    font-family: var(--dcu-font);
    color: var(--dcu-gray-900);
    background-color: var(--dcu-bg);
}

a {
    color: var(--dcu-blue);
}

a:hover {
    color: var(--dcu-blue-light);
}

/* ============================================================
   SUPPRESS BROKEN JS INJECTIONS
   The dcu-modernization.js injects .services-preview divs.
   Hide them globally — the child theme templates don't use them.
   ============================================================ */
.services-preview {
    display: none !important;
}

/* ============================================================
   ARCHIVE PAGE — SEARCH/FILTER BAR
   ============================================================ */
.dcu-filter-bar {
    background: var(--dcu-white);
    border: 1px solid var(--dcu-gray-300);
    border-radius: var(--dcu-radius);
    padding: 20px 24px;
    margin-bottom: 32px;
    box-shadow: var(--dcu-shadow);
}

.dcu-filter-bar form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.dcu-filter-bar .dcu-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 180px;
}

.dcu-filter-bar label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dcu-gray-500);
}

.dcu-filter-bar input[type="text"],
.dcu-filter-bar select {
    padding: 9px 12px;
    border: 1px solid var(--dcu-gray-300);
    border-radius: var(--dcu-radius);
    font-size: 14px;
    font-family: var(--dcu-font);
    color: var(--dcu-gray-900);
    background: var(--dcu-white);
    width: 100%;
    transition: border-color 0.15s;
}

.dcu-filter-bar input[type="text"]:focus,
.dcu-filter-bar select:focus {
    outline: none;
    border-color: var(--dcu-blue);
    box-shadow: 0 0 0 3px rgba(27,58,107,0.12);
}

.dcu-filter-bar .dcu-filter-btn {
    padding: 9px 24px;
    background: var(--dcu-orange);
    color: var(--dcu-white);
    border: none;
    border-radius: var(--dcu-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    align-self: flex-end;
}

.dcu-filter-bar .dcu-filter-btn:hover {
    background: var(--dcu-orange-hover);
}

/* ============================================================
   ARCHIVE PAGE — CONTRACTOR COUNT
   ============================================================ */
.dcu-results-count {
    font-size: 14px;
    color: var(--dcu-gray-500);
    margin-bottom: 20px;
    font-weight: 400;
}

.dcu-results-count strong {
    color: var(--dcu-gray-900);
    font-weight: 600;
}

/* ============================================================
   ARCHIVE PAGE — CONTRACTOR CARD GRID
   ============================================================ */
.dcu-contractor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

@media (max-width: 768px) {
    .dcu-contractor-grid {
        grid-template-columns: 1fr;
    }

    .dcu-filter-bar form {
        flex-direction: column;
    }

    .dcu-filter-bar .dcu-filter-group {
        min-width: 100%;
    }
}

/* Individual card */
.dcu-card {
    background: var(--dcu-white);
    border: 1px solid var(--dcu-gray-300);
    border-radius: var(--dcu-radius);
    padding: 20px;
    box-shadow: var(--dcu-shadow);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dcu-card:hover {
    box-shadow: var(--dcu-shadow-hover);
    transform: translateY(-2px);
}

.dcu-card-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.dcu-card-title a {
    color: var(--dcu-blue);
    text-decoration: none;
}

.dcu-card-title a:hover {
    color: var(--dcu-blue-light);
    text-decoration: underline;
}

.dcu-card-location {
    font-size: 13px;
    color: var(--dcu-gray-500);
    display: flex;
    align-items: center;
    gap: 4px;
}

.dcu-card-location::before {
    content: '📍';
    font-size: 12px;
}

.dcu-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Badge pill — trade category */
.dcu-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.dcu-badge-trade {
    background: #EBF2FF;
    color: var(--dcu-blue);
    border: 1px solid #C5D8FF;
}

.dcu-badge-metro {
    background: var(--dcu-gray-100);
    color: var(--dcu-gray-700);
    border: 1px solid var(--dcu-gray-300);
}

/* Trade category color variants */
.dcu-badge-electrical    { background: #FFF3CD; color: #856404; border-color: #FFE08A; }
.dcu-badge-mechanical    { background: #D1ECF1; color: #0C5460; border-color: #9DE0EA; }
.dcu-badge-generator     { background: #F8D7DA; color: #721C24; border-color: #F5C6CB; }
.dcu-badge-ups           { background: #D4EDDA; color: #155724; border-color: #A8D5B2; }
.dcu-badge-fire          { background: #FFE5D0; color: #7A3300; border-color: #FFBF8A; }
.dcu-badge-bms           { background: #E2D9F3; color: #4A2080; border-color: #C0A8E8; }
.dcu-badge-gc            { background: #E2F0FB; color: #0D456B; border-color: #9DD1F5; }

.dcu-card-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--dcu-gray-100);
}

.dcu-btn-view {
    display: inline-block;
    padding: 8px 18px;
    background: var(--dcu-orange);
    color: var(--dcu-white) !important;
    border-radius: var(--dcu-radius);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background 0.15s;
}

.dcu-btn-view:hover {
    background: var(--dcu-orange-hover);
    color: var(--dcu-white) !important;
}

/* ============================================================
   ARCHIVE PAGE — PAGINATION
   ============================================================ */
.dcu-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.dcu-pagination a,
.dcu-pagination span {
    padding: 8px 14px;
    border: 1px solid var(--dcu-gray-300);
    border-radius: var(--dcu-radius);
    font-size: 14px;
    text-decoration: none;
    color: var(--dcu-blue);
    background: var(--dcu-white);
    transition: background 0.15s;
}

.dcu-pagination .current,
.dcu-pagination a:hover {
    background: var(--dcu-blue);
    color: var(--dcu-white);
    border-color: var(--dcu-blue);
}

/* ============================================================
   SINGLE PROFILE PAGE — LAYOUT
   ============================================================ */
.dcu-profile-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px 60px;
}

.dcu-profile-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--dcu-gray-500);
    text-decoration: none;
    margin-bottom: 24px;
    transition: color 0.15s;
}

.dcu-profile-back:hover {
    color: var(--dcu-blue);
}

.dcu-profile-back::before {
    content: '←';
    font-size: 16px;
}

.dcu-profile-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 860px) {
    .dcu-profile-layout {
        grid-template-columns: 1fr;
    }

    .dcu-profile-sidebar {
        order: -1;
    }
}

/* ============================================================
   SINGLE PROFILE — HEADER
   ============================================================ */
.dcu-profile-header {
    margin-bottom: 28px;
}

.dcu-profile-title {
    font-size: 28px;
    font-weight: 800;
    color: var(--dcu-blue);
    margin: 0 0 10px;
    line-height: 1.2;
}

.dcu-profile-location {
    font-size: 15px;
    color: var(--dcu-gray-500);
    margin-bottom: 14px;
}

.dcu-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

/* ============================================================
   SINGLE PROFILE — DESCRIPTION SECTION
   ============================================================ */
.dcu-profile-description {
    background: var(--dcu-white);
    border: 1px solid var(--dcu-gray-300);
    border-radius: var(--dcu-radius);
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: var(--dcu-shadow);
}

.dcu-profile-description h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dcu-blue);
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dcu-profile-description p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--dcu-gray-700);
    margin: 0;
}

/* ============================================================
   SINGLE PROFILE — SIDEBAR CONTACT BOX
   ============================================================ */
.dcu-contact-box {
    background: var(--dcu-white);
    border: 2px solid var(--dcu-blue);
    border-radius: var(--dcu-radius);
    padding: 24px;
    box-shadow: var(--dcu-shadow);
    position: sticky;
    top: 20px;
}

.dcu-contact-box h3 {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dcu-blue);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--dcu-gray-100);
}

.dcu-contact-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 16px;
}

.dcu-contact-field:last-of-type {
    margin-bottom: 0;
}

.dcu-contact-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--dcu-gray-500);
}

.dcu-contact-value {
    font-size: 14px;
    color: var(--dcu-gray-900);
    word-break: break-word;
}

.dcu-contact-value a {
    color: var(--dcu-blue);
    text-decoration: none;
}

.dcu-contact-value a:hover {
    text-decoration: underline;
}

/* Phone CTA button */
.dcu-btn-phone {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px;
    background: var(--dcu-blue);
    color: var(--dcu-white) !important;
    border-radius: var(--dcu-radius);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    margin-top: 16px;
    transition: background 0.15s;
}

.dcu-btn-phone:hover {
    background: var(--dcu-blue-light);
}

.dcu-btn-website {
    display: block;
    width: 100%;
    text-align: center;
    padding: 10px;
    background: var(--dcu-white);
    color: var(--dcu-blue) !important;
    border: 2px solid var(--dcu-blue);
    border-radius: var(--dcu-radius);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    margin-top: 10px;
    transition: all 0.15s;
}

.dcu-btn-website:hover {
    background: var(--dcu-blue);
    color: var(--dcu-white) !important;
}

/* ============================================================
   SINGLE PROFILE — UPGRADE / CLAIM CTA
   (only shows on single-contractor.php, never on homepage/archive)
   ============================================================ */
.dcu-claim-bar {
    background: linear-gradient(135deg, #FFF8F5 0%, #FFF1EB 100%);
    border: 1px solid #FFD4C0;
    border-radius: var(--dcu-radius);
    padding: 18px 22px;
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.dcu-claim-bar p {
    margin: 0;
    font-size: 14px;
    color: var(--dcu-gray-700);
}

.dcu-claim-bar strong {
    color: var(--dcu-gray-900);
}

.dcu-btn-claim {
    padding: 9px 20px;
    background: var(--dcu-orange);
    color: var(--dcu-white) !important;
    border-radius: var(--dcu-radius);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.15s;
}

.dcu-btn-claim:hover {
    background: var(--dcu-orange-hover);
}

/* ============================================================
   SUPPRESS DUPLICATE / BROKEN PLUGIN OUTPUT ON PROFILES
   - .entry-content on single pages: the default Astra template
     renders the raw post_content HTML. Our template replaces that,
     but in case something falls through, hide the default content area.
   - Hides the embedded search form the old template injected.
   - Hides duplicate Listed badges.
   ============================================================ */
.single-contractor .entry-content > p:empty,
.single-contractor .entry-content > br {
    display: none;
}

/* Hide search shortcodes/forms that plugins inject on profile pages */
.single-contractor .wp-block-search,
.single-contractor .searchform,
.single-contractor [class*="search-form"]:not(.dcu-filter-bar) {
    display: none !important;
}

/* Suppress any "Is this your business?" bars from plugins on non-profile pages */
.home .dcu-claim-bar,
.archive .dcu-claim-bar,
.post-type-archive-contractor .dcu-claim-bar {
    display: none !important;
}

/* ============================================================
   NO RESULTS STATE
   ============================================================ */
.dcu-no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--dcu-gray-500);
}

.dcu-no-results p {
    font-size: 16px;
}