/**
 * Hair One - Base styles
 *
 * Brand tokens (CSS custom properties) and fonts shared by every Hair One
 * template (homepage, shop archive, and anything added later). Always
 * enqueued site-wide and inside the block editor, since any .ho-* or
 * WooCommerce override elsewhere depends on these variables existing.
 *
 * @package Reign-child
 */

:root {
    /* Brand */
    --ho-blue: #74badf;
    --ho-blue-deep: #1b7eb5;
    --ho-navy: #2c4a70;
    --ho-navy-ink: #0b2545;
    --ho-black: #0a0a0a;
    --ho-slate: #1b222a;

    /* Surfaces */
    --ho-ice: #ebeef7;
    --ho-mist: #f4f8fb;
    --ho-paper: #fafafa;
    --ho-white: #fff;
    --ho-border: #d5d7da;

    /* Text */
    --ho-text: #33383f;
    --ho-text-muted: #5f7183;

    /* Topic tints */
    --ho-sand: #efe7d8;
    --ho-tint-mist: #d0e3e5;
    --ho-blush: #ecdcdc;
    --ho-sage: #dee7e6;

    /* Type */
    --ho-font-display: "Cabin", "Gill Sans", "Segoe UI", sans-serif;
    --ho-font-body: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;

    /* Shape */
    --ho-radius-btn: 4px;
    --ho-radius-card: 4px;
    --ho-shadow-card: 0 1px 2px rgba(11, 37, 69, 0.06), 0 8px 24px rgba(11, 37, 69, 0.06);
    --ho-container: 1270px;

}

/* ---------------------------------------------------------------
 * Header - logo + Site Title beside it
 *
 * The title <p class="site-title ho-site-title"> is appended inside
 * .site-branding .logo, right after the .custom-logo-link anchor. This file
 * only handles LAYOUT (row, alignment, gap, logo scale, mobile hide).
 *
 * Font family / size / weight / letter-spacing / transform and colour are
 * deliberately NOT set here - the parent theme's `site-title` class routes
 * those to the native Customizer control:
 *   Customise -> Typography -> "Site Title"   (font + size + weight + ...)
 *   Customise -> Colours     -> "Site Title"  (colour)
 * Editing there is the supported way to restyle this text.
 * --------------------------------------------------------------- */

.site-branding .logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Sit inline with the logo; the parent theme already gives .site-branding
 * .site-title nowrap + ellipsis, so we only need to clear its block margins. */
.site-branding .logo .ho-site-title {
    margin: 0;
    line-height: 1.15;
}

/*
 * The logo art (haironesite-emb.png) is a circular mark cropped tight to the
 * circle with a transparent background. The parent theme's default
 * `.site-branding a img { max-height: 90px }` would render this square file
 * at 90px - larger than before. Pin it to the circle's previous on-screen
 * size so the header height and logo scale stay unchanged.
 */
.header-desktop .site-branding .logo .custom-logo {
    max-width: none;
    width: auto;
    height: 64px;
    max-height: 64px;
    padding: 0;
}

.site-branding .logo .ho-site-title a {
    text-decoration: none;
}

/* Mobile header bar is tight on space - hide the text there, keep the logo. */
@media (max-width: 980px) {
    .site-branding .logo .ho-site-title {
        display: none;
    }
}

/*
 * Logged-out header keeps only the "Join Now" call-to-action - hide the
 * search and cart icons (desktop + mobile) for visitors. Logged-in members
 * still get both. `body.logged-in` is added by WordPress core.
 *
 * The "|" separator and the Register -> Join Now label live in
 * template-parts/header-icons/register-menu.php, which already only renders
 * for logged-out users.
 *
 * Note: this only hides them - the search toggle script and WooCommerce's
 * cart-fragments request still load. Full-page caches that serve a
 * logged-out page to a logged-in user would briefly hide them too.
 */
body:not(.logged-in) .site-header .search-wrap,
body:not(.logged-in) .site-header .woo-cart-wrapper,
body:not(.logged-in) .reign-navbar-mobile .search-wrap,
body:not(.logged-in) .reign-navbar-mobile .woo-cart-wrapper {
    display: none;
}

/*
 * "Join Now" button - brand light blue (--ho-blue) with navy text per design,
 * replacing the theme's global navy button colour. Scoped to the header so
 * other buttons (hero CTAs, WooCommerce) are untouched.
 *
 * The three-class selector (0,3,0) outranks the theme's `.rg-register-btn-wrap
 * .button` (0,2,0) / `a.btn-register` (0,1,1) without !important. The theme's
 * one !important rule on this button is inside `@media (max-width:959px)`
 * (mobile collapses it to nothing), so it never competes on desktop.
 */
.site-header .rg-register-btn-wrap .btn-register,
.site-header .rg-register-btn-wrap .btn-register:focus {
    background-color: var(--ho-blue);
    border-color: var(--ho-blue);
    color: var(--ho-navy-ink);
}

.site-header .rg-register-btn-wrap .btn-register:hover,
.site-header .rg-register-btn-wrap .btn-register:focus-visible {
    background-color: var(--ho-blue-deep);
    border-color: var(--ho-blue-deep);
    color: var(--ho-navy-ink);
}