/**
 * Client portal entry point in the public site header.
 *
 * "Request A Proposal" is the marketing call to action and has to stay the
 * loudest thing in the header, so the portal link is given an outlined
 * treatment rather than a second solid red block — two identical buttons side
 * by side would make neither of them read as the primary action.
 *
 * It reuses the theme's own .thm-btn so it inherits the shared geometry and the
 * slide-up hover, and only overrides the fill. --thewebcreative-* tokens come
 * from thewebcreative.css.
 */

.header__btn--portal,
.mobile-header__btn--portal {
    background-color: transparent;
    /* An inset ring rather than a border, so the button's height stays
       identical to the solid one beside it. */
    box-shadow: inset 0 0 0 2px var(--thewebcreative-base);
    padding-left: 28px;
    padding-right: 28px;
}

/*
 * The two placements sit on opposite backgrounds, so the label colour is set
 * per placement rather than shared: the header is white, while the mobile
 * drawer is --thewebcreative-black. Setting ink on both would have made the
 * drawer button black on black — it only looked right because a more specific
 * theme rule happened to win.
 */
.header__btn--portal {
    color: var(--thewebcreative-black);
}

.mobile-header__btn--portal {
    color: var(--thewebcreative-white);
}

/* .thm-btn:after slides the black fill up on hover; the text just has to stop
   being ink at the same moment. */
.header__btn--portal:hover,
.header__btn--portal:focus-visible,
.mobile-header__btn--portal:hover,
.mobile-header__btn--portal:focus-visible {
    color: var(--thewebcreative-white);
}

.header__btn--portal {
    margin-right: 12px;
}

.header__btn--portal .fa,
.mobile-header__btn--portal .fa {
    margin-right: 8px;
    font-size: 14px;
}

/*
 * The theme hides .main-menu__right entirely below 768px and the mobile drawer
 * takes over, so only the tablet band needs tightening — two buttons plus the
 * search icon do not fit there at full width.
 */
@media (max-width: 1199px) {
    .header__btn--portal {
        padding-left: 20px;
        padding-right: 20px;
        margin-right: 8px;
    }
}

@media (max-width: 991px) {
    /* Below the desktop breakpoint the icon carries the meaning and the label
       is what has to give. */
    .header__btn--portal .header__btn-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .header__btn--portal {
        padding-left: 18px;
        padding-right: 18px;
    }

    .header__btn--portal .fa {
        margin-right: 0;
    }
}