/* =========================================================
   HERTSPARTNERS DIRECTORIST STYLING (migrated from the WordPress
   "Additional CSS" database option — now git-tracked, per
   docs/DIRECTORIST_INTEGRATION.md and docs/SITE_ARCHITECTURE.md.
   Hardcoded values swapped for design tokens (docs/DESIGN_SYSTEM.md)
   where they matched exactly; structure and section labels preserved
   from the original.
   ========================================================= */

/* =========================================================
   ADD LISTING FORM STYLING
   ========================================================= */

/* FORM CARD */
.directorist-add-listing-form,
.directorist-form-section {
    border-radius: 20px;
    border: 1px solid var(--hp-color-border);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    overflow: hidden;
}

/* SIDEBAR STEPS */
.directorist-content-module,
.directorist-add-listing-tab {
    border-radius: 18px;
}

/* ACTIVE STEP */
.directorist-tab__nav__link.active {
    background: var(--hp-color-primary-500) !important;
    color: var(--hp-color-white) !important;
    border-radius: 14px;
}

/* INPUT FIELDS */
.directorist-form-element,
.directorist-form-element input,
.directorist-form-element textarea,
.directorist-form-element select {
    border-radius: 14px !important;
    border-color: var(--hp-color-border-strong) !important;
    box-shadow: none !important;
}

/* INPUT FOCUS */
.directorist-form-element input:focus,
.directorist-form-element textarea:focus,
.directorist-form-element select:focus {
    border-color: var(--hp-color-primary-500) !important;
    box-shadow: 0 0 0 4px rgba(124,58,237,0.08) !important;
}


/* =========================================================
   GLOBAL DIRECTORIST BUTTON STYLING
   ========================================================= */

/* BUTTONS */
.directorist-btn,
.directorist-btn-next,
.directorist-btn-prev,
.directorist-btn-sort,
.directorist-btn-search,
.directorist-btn-filter,
.directorist-btn-primary {
    border-radius: 14px !important;
    background: var(--hp-color-primary-500) !important;
    border: none !important;
    transition: 0.2s ease;
    color: var(--hp-color-white) !important;
}

/* BUTTON HOVER */
.directorist-btn:hover,
.directorist-btn-next:hover,
.directorist-btn-prev:hover,
.directorist-btn-sort:hover,
.directorist-btn-search:hover,
.directorist-btn-filter:hover,
.directorist-btn-primary:hover {
    transform: translateY(-1px);
    opacity: 0.95;
    color: var(--hp-color-white) !important;
}

/* =========================================================
   LISTING-PACKAGE CARDS  (L01.1, 2026-09-12)
   -------------------------------------------------------
   Two real cascade faults found by rendering /select-your-plan-2/ in both
   themes, not by reading CSS:

   1. The brand button rule above wins on `background` but loses on `color`
      against Directorist's own `.directorist-btn-lighter` modifier, so the
      package Continue button rendered as #444752 text on brand purple --
      1.62:1, in BOTH themes, on the one commercial action of the page. The
      surface and its foreground must be set as a pair, never half each.

   2. Dark mode recoloured the card's inherited text to near-white while
      Directorist kept painting the card itself #fff, so the feature list
      sat white-on-white. The fix is to darken the surface Directorist
      paints, not to force the text back to black.

   Layout, spacing, wording, prices and package contents are untouched --
   this is colour only.
   ========================================================= */

/* Directorist's own
   `.directorist-pricing .directorist-pricing__action .directorist-pricing__action--btn`
   sets `color: var(--directorist-color-primary) !important` at (0,3,0), which
   is why the shorter brand rule above lost the foreground while winning the
   background. Matched here at the same specificity, later in the cascade, so
   the pair stays together. Confirmed against the real matched-rule list, not
   assumed. */
body .directorist-pricing .directorist-pricing__action .directorist-pricing__action--btn,
body .directorist-pricing .directorist-pricing__action .directorist-pricing__action--btn:hover,
body .directorist-pricing .directorist-pricing__action .directorist-pricing__action--btn:focus-visible {
    color: var(--hp-color-white) !important;
}

body .directorist-pricing .directorist-pricing__action .directorist-pricing__action--btn i {
    color: var(--hp-color-white) !important;
}

/* Directorist writes the badge palette as an inline style attribute, so the
   only way to raise this 3.46:1 orange to a readable value is !important. */
.directorist-pricing .atbd_plan-type {
    color: #9a3412 !important;
    background: #fff3e0 !important;
    border-color: #f0a868 !important;
}

.hp-experience-dark .directorist-pricing,
.hp-experience-dark .directorist-pricing .directorist-pricing__title,
.hp-experience-dark .directorist-pricing .directorist-pricing__title h4,
.hp-experience-dark .directorist-pricing .directorist-pricing__price,
.hp-experience-dark .directorist-pricing .directorist-pricing__features {
    background: var(--hp-color-surface) !important;
    border-color: var(--hp-color-border) !important;
}

.hp-experience-dark .directorist-pricing,
.hp-experience-dark .directorist-pricing h4,
.hp-experience-dark .directorist-pricing p,
.hp-experience-dark .directorist-pricing li,
.hp-experience-dark .directorist-pricing small {
    color: var(--hp-color-ink) !important;
}

.hp-experience-dark .directorist-pricing .directorist-pricing__description,
.hp-experience-dark .directorist-pricing .directorist-pricing__value small {
    color: var(--hp-color-text-muted) !important;
}

.hp-experience-dark .directorist-pricing .atbd_plan-type {
    color: #ffd7b0 !important;
    background: #3a2412 !important;
    border-color: #7a4a22 !important;
}

/* BUTTON ICONS */
.directorist-btn i,
.directorist-btn-next i,
.directorist-btn-prev i,
.directorist-btn-sort i,
.directorist-btn-search i,
.directorist-btn-filter i,
.directorist-btn-primary i {
    color: var(--hp-color-white) !important;
}


/* =========================================================
   DIRECTORY CARD BASE STYLING
   ========================================================= */

/* DIRECTORY CARDS */
.directorist-single-listing,
.directorist-listing-single {
    border-radius: 22px !important;
    overflow: hidden;
    border: 1px solid var(--hp-color-border) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.05);
    transition: 0.25s ease;
    background: var(--hp-color-white) !important;
}

/* DIRECTORY CARD HOVER */
.directorist-single-listing:hover,
.directorist-listing-single:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

/* BUSINESS TITLE */
.directorist-single-listing .directorist-listing-title,
.directorist-listing-single .directorist-listing-title {
    font-weight: 700;
    color: var(--hp-color-ink);
}

/* CONTACT INFO */
.directorist-single-listing .directorist-listing-card-info li,
.directorist-single-listing .directorist-listing-card-info a,
.directorist-listing-single .directorist-listing-card-info li,
.directorist-listing-single .directorist-listing-card-info a {
    color: var(--hp-color-body) !important;
    font-size: 15px;
}

/* Stage B V43: the archive/single card's own phone/email links use a
 * different class (`__info__list`, not `-card-info`) than the rule above
 * and had no sizing at all -- bare inline text links well under the WCAG
 * 2.2 24x24px target minimum. */
.directorist-listing-single__info__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
}

/* CATEGORY TAG */
.directorist-listing-category {
    background: var(--hp-color-primary-100) !important;
    color: var(--hp-color-primary-500) !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    font-weight: 600;
}

/* SORT BUTTON */
.directorist-sorting select {
    border-radius: 14px !important;
}


/* =========================================================
   DESKTOP DIRECTORY CARD EQUAL HEIGHT FIX
   ========================================================= */

@media only screen and (min-width: 768px) {

    /* Make each grid column hold a full-height card */
    .directorist-archive-grid-view .directorist-row > [class*="directorist-col-"] {
        display: flex !important;
    }

    /* Force all grid cards to same height on desktop */
    .directorist-archive-grid-view .directorist-listing-single,
    .directorist-archive-grid-view .directorist-single-listing {
        height: 430px !important;
        width: 100%;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background: var(--hp-color-white) !important;
    }

    /* Fixed image area */
    .directorist-archive-grid-view .directorist-listing-single__thumb,
    .directorist-archive-grid-view .directorist-listing-single__thumb a,
    .directorist-archive-grid-view .directorist-single-listing__thumb,
    .directorist-archive-grid-view .directorist-single-listing__thumb a {
        height: 220px !important;
        width: 100%;
        overflow: hidden !important;
        display: block !important;
        background: var(--hp-color-white) !important;
    }

    /* Make desktop card images consistent */
    .directorist-archive-grid-view .directorist-listing-single__thumb img,
    .directorist-archive-grid-view .directorist-single-listing__thumb img,
    .directorist-archive-grid-view .directorist-listing-single img,
    .directorist-archive-grid-view .directorist-single-listing img {
        width: 100% !important;
        height: 220px !important;
        object-fit: cover !important;
        padding: 0 !important;
        background: var(--hp-color-white) !important;
    }

    /* Content fills remaining card space */
    .directorist-archive-grid-view .directorist-listing-single__content,
    .directorist-archive-grid-view .directorist-single-listing__content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 20px !important;
    }

    /* Keep business title tidy */
    .directorist-archive-grid-view .directorist-listing-title,
    .directorist-archive-grid-view .directorist-listing-title a {
        font-size: 18px !important;
        line-height: 1.25 !important;
        min-height: 46px !important;
        max-height: 46px !important;
        overflow: hidden !important;
        color: var(--hp-color-ink) !important;
    }

    /* Limit contact/details area so some cards don't become huge */
    .directorist-archive-grid-view .directorist-listing-card-info,
    .directorist-archive-grid-view .directorist-listing-single__info,
    .directorist-archive-grid-view .directorist-single-listing__info {
        max-height: 58px !important;
        overflow: hidden !important;
    }

    /* Push category tag/footer to bottom */
    .directorist-archive-grid-view .directorist-listing-single__footer,
    .directorist-archive-grid-view .directorist-single-listing__footer {
        margin-top: auto !important;
    }
}


/* =========================================================
   DIRECTORIST CARD BACKGROUND FIX
   ========================================================= */

.directorist-card,
.directorist-listing-single,
.directorist-listing-single__content,
.directorist-listing-single__info,
.directorist-listing-single__meta,
.directorist-listing-single__footer {
    background: var(--hp-color-white) !important;
}

.directorist-listing-single__footer {
    border-top: 1px solid #f1eaff !important;
}


/* =========================================================
   MOBILE BACKGROUND + MENU FIXES
   ========================================================= */

/* HIDE HEART ON MOBILE */
@media only screen and (max-width: 767px) {
    .hide-heart-mobile {
        display: none !important;
    }
}

/* Keep the deliberately dark mobile footer without turning every page black.
 *
 * L01.1 (2026-09-12): the bare `footer` selector here matched EVERY <footer>
 * element on the site, not just the site footer -- and with !important. A
 * card's own <footer> (the advertise page's testimonial attribution, for one)
 * was painted a solid black slab under 767px, leaving the reviewer's name at
 * 1.07:1 in light mode. Scoped to the real site footer, which is
 * `<footer class="hp-footer">` on this theme and `.elementor-location-footer`
 * where Elementor renders it. */
@media only screen and (max-width: 767px) {
    .elementor-location-footer,
    body > footer,
    footer.hp-footer {
        background: var(--hp-color-black) !important;
    }

    .elementor-location-footer {
        margin-top: 0 !important;
    }
}

/* HIDE MOBILE-ONLY ADD BUSINESS MENU ITEM ON DESKTOP */
@media only screen and (min-width: 768px) {
    #mobile-add-business {
        display: none !important;
    }
}


/* =========================================================
   SINGLE LISTING PAGE WHITE BACKGROUND FIX
   ========================================================= */

body.single-at_biz_dir,
body.single-at_biz_dir #page,
body.single-at_biz_dir .site,
body.single-at_biz_dir .site-content,
body.single-at_biz_dir .content-area,
body.single-at_biz_dir main,
body.single-at_biz_dir .directorist-single-wrapper,
body.single-at_biz_dir .directorist-single-listing-content,
body.single-at_biz_dir .directorist-container,
body.single-at_biz_dir .directorist-container-fluid {
    background: var(--hp-color-white) !important;
}

/* SINGLE LISTING TEXT READABILITY */
body.single-at_biz_dir .directorist-single-wrapper,
body.single-at_biz_dir .directorist-single-wrapper p,
body.single-at_biz_dir .directorist-single-wrapper span,
body.single-at_biz_dir .directorist-single-wrapper div,
body.single-at_biz_dir .directorist-single-wrapper li {
    color: var(--hp-color-ink);
}

/* SINGLE LISTING BRAND LINKS */
body.single-at_biz_dir .directorist-single-wrapper a {
    color: var(--hp-color-primary-500);
}


/* =========================================================
   SINGLE LISTING PHONE + EMAIL ICON FIX
   ========================================================= */

.directorist-listing-actions a[href^="tel:"] i,
.directorist-listing-actions a[href^="mailto:"] i {
    color: var(--hp-color-ink) !important;
    background: transparent !important;
    box-shadow: none !important;
}


/* =========================================================
   SINGLE LISTING MOBILE HEADER FIX
   ========================================================= */

@media only screen and (max-width: 767px) {

    body.single-at_biz_dir .directorist-single-listing-header {
        position: relative;
        z-index: 20;
        padding-bottom: 18px;
        background: var(--hp-color-white) !important;
    }

    body.single-at_biz_dir .directorist-single-listing-header .directorist-btn,
    body.single-at_biz_dir .directorist-single-listing-header button,
    body.single-at_biz_dir .directorist-single-listing-header a {
        border-radius: 14px !important;
        min-height: 46px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-weight: 700;
        font-size: 14px;
    }

    /* Make share dropdown sit above category/title area */
    body.single-at_biz_dir .directorist-social-share,
    body.single-at_biz_dir .directorist-share-popup,
    body.single-at_biz_dir .directorist-share-dropdown,
    body.single-at_biz_dir .directorist-listing-share {
        position: absolute !important;
        z-index: 9999 !important;
        background: var(--hp-color-white) !important;
        border-radius: 16px !important;
        box-shadow: 0 14px 34px rgba(0,0,0,0.12) !important;
    }

    /* Stop category badge overlapping share popup */
    body.single-at_biz_dir .directorist-single-listing-header .directorist-info-item,
    body.single-at_biz_dir .directorist-single-listing-header .directorist-listing-category {
        position: relative;
        z-index: 1;
    }

    /* Give title/category area breathing room */
    body.single-at_biz_dir .directorist-single-listing-header .directorist-listing-title,
    body.single-at_biz_dir .directorist-single-listing-header h1 {
        margin-top: 18px !important;
        margin-bottom: 12px !important;
        line-height: 1.15 !important;
    }
}

/* Milestone 40: Directorist's own "Lost your password?" link (~4.1:1 on
 * white) narrowly fails the 4.5:1 AA contrast minimum. Placed in this
 * unconditionally-loaded stylesheet (not directorist.css) because the real
 * login/register page isn't itself a Directorist archive/dashboard route. */
.atbdp_recovery_pass {
	color: var(--hp-color-body) !important;
}

/* Stage B V43: same link had no touch-target sizing at all -- a bare
 * inline-text control below the WCAG 2.2 24x24px minimum. */
.atbdp_recovery_pass {
	display: inline-flex !important;
	align-items: center;
	min-height: 44px;
}

/* =========================================================
   SHARED DIRECTORIST NOTICE (L01.1, 2026-09-12)
   This sits here, not in directorist.css, because the notice renders on
   routes that are not Directorist archives -- /add-listing/ and /account/
   among them -- where directorist.css is deliberately not enqueued.
   ========================================================= */

/* The signed-out/permission notice. Its own peach panel failed in BOTH
   themes (2.51:1), and the recovery link inside it was 1.21:1 in dark. */
body .directorist-alert.directorist-alert-warning {
	background: #fff4e6;
	border-color: #f0b072;
	color: #8a4200;
}

body .directorist-alert.directorist-alert-warning a {
	color: #7a3a00;
	text-decoration: underline;
}

html.hp-experience-dark body .directorist-alert.directorist-alert-warning {
	background: #33220f;
	border-color: #7a4a22;
	color: #ffd9b0;
}

html.hp-experience-dark body .directorist-alert.directorist-alert-warning a {
	color: #ffe6c8;
}

/*
 * Sign-in labels were being clipped by their own field.
 *
 * Directorist draws the focus ring on .directorist-form-element OUTSIDE the
 * input's border box. With the label sitting flush above the input, the ring
 * covered the bottom few pixels of "Username or Email Address" and "Password"
 * the moment somebody clicked into the field -- so the label became harder to
 * read exactly when it was being used. The gap costs nothing and the label
 * stays legible through the whole interaction.
 *
 * Scoped to the authentication form so no other Directorist form shifts.
 */
body .directorist-authentication .directorist-form-group > label {
	display: block;
	margin-bottom: 10px;
	line-height: 1.35;
}

/*
 * The focus ring also needs somewhere to go. Without this the first field in
 * a group can still push its ring into whatever sits above it.
 */
body .directorist-authentication .directorist-form-group {
	margin-top: 4px;
}

/*
 * Google's sign-in button, everywhere it appears on the site.
 *
 * Google renders the button inside an iframe it controls, and that iframe is
 * deliberately drawn OUTSIDE its own stated box: measured on production it is
 * 295x44 carrying `margin: -2px -10px`, to compensate for padding inside its
 * own document. The wrapper Google gives us is already the correct 275x40, but
 * it does not clip, so on a dark page those 10px each side and 2px top and
 * bottom show through as a white frame around the button. It is the iframe's
 * own background and is not ours to recolour.
 *
 * So nothing here styles inside the iframe, changes Google's rendering, or
 * touches the vendor plugin -- all three are off limits, and the last would be
 * lost on update anyway. We only tell OUR element to clip what Google chose to
 * paint beyond its own edges. The button itself is untouched, at Google's own
 * size, with Google's own theme.
 *
 * Site-wide rather than per-template because the same control appears on
 * /account/ (which is where the private-post gate sends people), on the Work
 * for Us auth screen, and anywhere else the provider buttons are rendered.
 */
.g_id_signin {
	/*
	 * fit-content, not a hardcoded 275px: it resolves to the iframe's own box
	 * minus the negative margins Google gives it, so if Google or the plugin
	 * ever changes that width this follows instead of cropping the button.
	 *
	 * The width matters as much as the clip. Where our own wrapper was wider
	 * than the iframe -- the Work for Us auth screen, where it filled a 420px
	 * column -- overflow:hidden cropped the LEFT overhang and left the right
	 * one sitting inside the box, still white. Shrinking to the button's real
	 * width is what makes both sides crop, which is why /account/ looked right
	 * and our own screen did not.
	 */
	width: fit-content;
	max-width: 100%;
	overflow: hidden;
	border-radius: 4px;
}