/*
Theme Name: TaskHive Child
Theme URI: https://yritysfinder.fi
Description: Child theme for TaskHive
Author: Yritysfinder
Template: taskhive
Version: 1.0.0
*/

/* Add your custom CSS below */


/* ---------------------------------------------- */
/* MOBILE: order buttons + burger on the right    */
/* Apua tarvitaan = left, Lisää palveluilmoitus = middle, burger = right */
/* ---------------------------------------------- */
@media (max-width: 767px) {

    /* Right side of the header (burger + buttons) */
    .header-navbar__end {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 6px;
    }

    /* Make actions and burger participate in flex layout */
    .header-navbar__actions {
        order: 1;
        flex: 1;
    }

    .header-navbar__burger {
        order: 3;
        margin-left: auto;
    }

    /* Inside actions: two buttons side by side */
    .header-navbar__actions .hp-menu.hp-menu--site-header.hp-menu--main {
        display: flex;
        width: 100%;
        justify-content: space-between;
        gap: 6px;
    }

    /* Buttons look like small pills, stretch to fill space */
    .hp-menu__item--request-submit,
    .hp-menu__item--listing-submit {
        flex: 1;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 4px 6px;
        background: #fff;
        border-radius: 6px;
        border: 1px solid #ddd;
        white-space: nowrap;
        text-align: center;
    }

    /* Order of the two buttons: left & middle */
    .hp-menu__item--request-submit {
        order: 1;  /* LEFT: Apua tarvitaan */
    }

    .hp-menu__item--listing-submit {
        order: 2;  /* MIDDLE: Lisää palveluilmoitus */
    }

    /* Make sure the spans are visible */
    .hp-menu__item--request-submit span,
    .hp-menu__item--listing-submit span {
        display: inline-block;
        font-size: 14px;
        font-weight: 600;
        color: #222;
    }

    /* Just in case: keep icons hidden on mobile */
    .hp-menu__item--listing-submit .hp-icon,
    .hp-menu__item--request-submit .hp-icon {
        display: none !important;
    }
}
.header-navbar__burger i.fas.fa-bars {
    font-size: 28px !important;
    color: #222 !important;
    opacity: 1 !important;
}

.header-navbar__burger a {
    padding: 10px !important;
}
/* FORCE SHOW TEXT LABELS ON MOBILE */
@media (max-width: 767px) {

    .hp-menu__item--listing-submit span,
    .hp-menu__item--request-submit span {
        display: inline-block !important;
        font-size: 14px !important;
        line-height: 1 !important;
        color: #222 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Some TaskHive rules set span width to 0 — override that too */
    .hp-menu__item--listing-submit span,
    .hp-menu__item--request-submit span {
        width: auto !important;
    }
}
/* ==========================================
   MOBILE HEADER CUSTOM LAYOUT (ADJUSTABLE)
   ========================================== */
@media (max-width: 767px) {

    /* --- YOUR ADJUSTABLE VALUES --- */
    :root {
        --gap-between-buttons: 4px;   /* spacing between left + middle buttons */
        --burger-offset: -15px;        /* push hamburger right */
    }

    /* Main header right side */
    .header-navbar__end {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: 100%;
    }

    /* Container that holds BOTH buttons */
    .header-navbar__actions {
        display: flex !important;
        position: relative;
        gap: var(--gap-between-buttons);
        margin-right: var(--burger-offset);
    }

    /* Flex layout inside the actions menu */
    .header-navbar__actions .hp-menu {
        display: flex !important;
        gap: var(--gap-between-buttons);
    }

    /* Both buttons styled consistently */
    .hp-menu__item--request-submit,
    .hp-menu__item--listing-submit {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 8px;
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 10px;
        max-width: 135px;   /* <- Try adjusting this if necessary */
        white-space: nowrap;
    }

    /* Order the buttons */
    .hp-menu__item--request-submit { order: 1; } /* LEFT */
    .hp-menu__item--listing-submit { order: 2; } /* MIDDLE */

    /* Force text to display */
    .hp-menu__item--request-submit span,
    .hp-menu__item--listing-submit span {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #222 !important;
    }

    /* Hide icons */
    .hp-menu__item--listing-submit .hp-icon,
    .hp-menu__item--request-submit .hp-icon {
        display: none !important;
    }

    /* Hamburger spacing */
    .header-navbar__burger {
        margin-left: auto !important;
        padding-left: var(--burger-offset) !important;
    }
}
/* Adjust size of "Lisää palveluilmoitus" (blue button) */
.hp-menu__item--listing-submit {
    padding: 6px 8px !important;   /* height + horizontal padding */
    font-size: 15px !important;     /* text size */
    border-radius: 6px !important;  /* roundness */
    max-width: 160px !important;    /* make wider */
    width: auto !important;         /* prevents shrinking */
}
/* ==========================================
   ADJUST HAMBURGER RIGHT SPACING ON MOBILE
   ========================================== */
@media (max-width: 767px) {

    :root {
        --hamburger-right-spacing: 4px; /* Adjust this number */
    }

    .header-navbar__burger {
        margin-right: var(--hamburger-right-spacing) !important;
        padding-right: 0 !important; /* prevents double spacing */
    }

    .header-navbar__burger a {
        padding-right: 0 !important; /* remove internal padding */
    }
}
@media (max-width: 767px) {
    .hp-menu__item--listing-submit span {
        color: #fff !important;   /* white text on mobile */
    }
}