/*
Theme Name: Jobster Child Theme
Theme URI: http://wpjobster.com/
Author: WPJobster
Author URI: http://wpjobster.com/
Description: This is a child theme for Jobster
Version: 3.0.0
Template: wpjobster
*/

/*************** ADD CUSTOM CSS BELOW ***************/

/* ============================================================================
 * Category menu — three rows of 6 / 6 / 5
 *
 * Two things outside this file make it work, and both must stay as they are:
 *
 *   1. Jobster → Design → Header → Main menu → "Long menu arrows" = Disabled.
 *      With it on, the container gets a "slider" class, menu.js sets
 *      white-space:nowrap inline, and the whole menu goes back to one
 *      scrolling row. Nothing below has any effect then.
 *
 *   2. The item order, set by hardyant-menu-rows.php. The four longest names
 *      (Handyman, Cleaning, Exterior, Tech) sit at the end so they land in the
 *      third row, which holds five items instead of six and has room.
 *
 * The row width is NOT set here. max-width below is ignored: the theme styles
 * this list as ".main-menu-container ul", two classes against one, so it wins
 * on specificity. The container gives 1200px and that is what the rows break
 * against. The rule is left in as documentation of the intended width.
 *
 * Measured on the live site: rows came out 1152 / 1147 / 1007 + 184 for the
 * last item, i.e. the third row needed 1207px against 1200 available — seven
 * pixels short, which pushed "Other & Custom Tasks" onto a fourth row. The
 * tightened padding and gap below free about 48px, so it fits with room to
 * spare.
 *
 * If you add or rename a category and a row breaks again, trim padding to
 * 6px 8px, or drop the font to 13px. Both buy back roughly the same amount.
 * ========================================================================== */

.categories-menu-list {
    justify-content: center;
    align-items: stretch;
    gap: 6px 2px;

    max-width: 1280px;               /* see note above: theme overrides this */
    margin: 0 auto;
    padding: 8px 0;
}

.categories-menu-list > li {
    flex: 0 0 auto;
    white-space: nowrap;             /* a category name never breaks mid-title */
}

.categories-menu-list > li > a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    line-height: 1.3;
}

/**
 * Dropdowns.
 *
 * With one row they opened downwards into empty space. With three they cover
 * rows two and three completely. Subcategories are shown as tiles on the
 * category page instead, where there is room for them.
 *
 * hardyant-menu-rows.php also removes the child items from menu 88, so this is
 * belt and braces. Delete this block if you ever want dropdowns back.
 */
.categories-menu-list .sub-menu,
.categories-menu-list .children,
.categories-menu-list .menu-item-has-children > .sub-menu,
.categories-menu-list li:hover > .sub-menu {
    display: none;
}

.categories-menu-list .menu-item-has-children > a::after {
    content: none;                   /* the "has children" caret */
}

/* --------------------------------------------------------------------------
 * Narrow screens. Three rows of six do not fit a phone, so below the layout
 * width the menu simply wraps as it will. The item order is preserved, which
 * is why the most-used categories sit at the front.
 * -------------------------------------------------------------------------- */

@media (max-width: 1280px) {
    .categories-menu-list {
        justify-content: flex-start;
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 640px) {
    .categories-menu-list {
        gap: 4px 2px;
    }

    .categories-menu-list > li > a {
        padding: 5px 8px;
        font-size: 13px;
    }
}


/* --------------------------------------------------------------------------

* Menu holder.
*
* The theme renders .header-wrapper-menu as an overlay on top of the page,
* while .header-wrapper-menu-holder reserves space for it in the document flow
* with a fixed height of 40px — enough for only one row. When the menu expands
* to three or four rows (130–198px), the holder remains unchanged, causing all
* content below to appear underneath the menu.
*
* Make the holder follow the actual height of the menu instead of using a
* fixed value.
* -------------------------------------------------------------------------- */

.header-wrapper-menu-holder {
    height: auto !important;
    min-height: 0 !important;
}


/* ============================================================================

* Location description next to the location selector
*
* Add this to the end of wp-content/themes/wpjobster-child/style.css
*
* Layout: on wide screens, the description appears to the right of the
* selector; on narrow screens, it moves below it and takes the full width.
* The parent .hardyant-header-location is converted to a wrapping flex
* container, so there is no need to modify the existing markup.
*
* The texts can be long ("Serving Dallas and the surrounding area: Fort Worth,
* Arlington, Plano, Irving, Garland, Frisco, McKinney, Denton"), so on desktop
* they are limited to two lines with an ellipsis. The full text is available
* on hover via the title attribute. On mobile, the truncation is removed —
* the description is already below the selector, where there is enough space.
* ========================================================================== */


.hardyant-header-location {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.hardyant-loc-desc {
    flex: 1 1 240px;
    min-width: 0;                    /* иначе flex-элемент не даст тексту сжаться */

    font-size: 13px;
    line-height: 1.4;
    color: #6b7280;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hardyant-loc-desc.is-empty {
    display: none;                   /* "All Locations" описания не имеет */
}


/* --------------------------------------------------------------------------

* Limited space in the sidebar: keep the selector and description stacked
* vertically at all times.
* -------------------------------------------------------------------------- */

.sidebar .hardyant-header-location,
.widget .hardyant-header-location {
    flex-direction: column;
    align-items: flex-start;
}

.sidebar .hardyant-loc-desc,
.widget .hardyant-loc-desc {
    flex: 1 1 100%;
    -webkit-line-clamp: 3;
}