/* SHADA-HEADER-COMPACT-GRID-R4 START */

/*
 * Stable bilingual header:
 *
 * Physical left:
 * - active English or Persian branding
 *
 * Physical right:
 * - telephone
 * - language selector underneath
 *
 * Navigation and server-rendered search remain below.
 * The language dropdown overlays the navigation and
 * does not increase the white header height.
 */

html body
.container-header
.container-topbar {
    display: grid !important;

    grid-template-columns:
        minmax(0, 1fr)
        9.25rem !important;

    grid-template-rows:
        2.2rem
        2.85rem !important;

    column-gap:
        clamp(
            0.5rem,
            2vw,
            1.25rem
        ) !important;

    row-gap: 0.25rem !important;

    align-items: center !important;
    align-content: center !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-height: 6.1rem !important;
    height: auto !important;

    margin: 0 !important;

    padding:
        0.4rem
        clamp(
            0.6rem,
            2.5vw,
            2rem
        ) !important;

    direction: ltr !important;

    background: #ffffff !important;

    overflow: visible !important;

    isolation: isolate !important;

    z-index: 3000 !important;
}

/*
 * Remove the old nested layout boxes so the existing
 * logo and actions can become direct grid items.
 */
html body
.container-header
.container-topbar
#mod-custom121,

html body
.container-header
.container-topbar
#mod-custom121
.shada-site-header,

html body
.container-header
.container-topbar
#mod-custom121
.shada-site-header-inner {
    display: contents !important;
}

/*
 * Where Joomla adds module chrome around module 138,
 * remove only that wrapper's layout box.
 */
html body
.container-header
.container-topbar
> *:has(
    #shada-language-selector-138
) {
    display: contents !important;
}

/* Branding: permanent physical left. */

html body
.container-header
.container-topbar
.shada-header-logo {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;

    justify-self: start !important;
    align-self: center !important;

    position: static !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    inset: auto !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    z-index: 2 !important;
}

html body
.container-header
.container-topbar
.shada-header-logo--en
img {
    display: block !important;

    width: auto !important;
    max-width: 13rem !important;

    height: auto !important;
    max-height: 4.4rem !important;

    margin: 0 !important;

    object-fit: contain !important;
}

/*
 * Existing Persian markup is text followed by icon.
 * row-reverse places the S/bird physically on the
 * left and the Persian wording physically on its right.
 */
html[lang^="fa"]
body
.container-header
.container-topbar
.shada-header-logo--fa {
    display: inline-flex !important;
    flex-direction: row-reverse !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 0.55rem !important;

    direction: ltr !important;

    max-width:
        min(
            25rem,
            calc(
                100vw - 11rem
            )
        ) !important;

    color: #087c83 !important;
    text-decoration: none !important;
}

html[lang^="fa"]
body
.container-header
.container-topbar
.shada-header-logo-fa__text {
    display: block !important;

    min-width: 0 !important;

    direction: rtl !important;
    unicode-bidi: isolate !important;

    text-align: right !important;
    white-space: nowrap !important;

    font-family:
        "ShadaIRANSans",
        Arial,
        sans-serif !important;

    font-size:
        clamp(
            1rem,
            2vw,
            1.45rem
        ) !important;

    font-weight: 700 !important;
    line-height: 1.15 !important;
}

html[lang^="fa"]
body
.container-header
.container-topbar
.shada-header-logo-fa__icon {
    display: block !important;

    flex: 0 0 auto !important;

    width: auto !important;
    height: 3.5rem !important;
    max-width: 4.5rem !important;

    margin: 0 !important;

    object-fit: contain !important;
}

/* Telephone: physical right, upper row. */

html body
.container-header
.container-topbar
.shada-header-actions {
    grid-column: 2 !important;
    grid-row: 1 !important;

    justify-self: end !important;
    align-self: center !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    position: static !important;

    width: 9.25rem !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    z-index: 5 !important;
}

html body
.container-header
.container-topbar
.shada-phone-button {
    position: static !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    width: 9.25rem !important;
    height: 2.15rem !important;

    margin: 0 !important;
    padding: 0.25rem 0.55rem !important;

    border-radius: 0.7rem !important;

    direction: ltr !important;
    unicode-bidi: isolate !important;

    font-size: 0.88rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    transform: none !important;
}

/*
 * The approved search control is rendered in the
 * navigation. Hide only any residual copy while it
 * remains inside the topbar actions container.
 */
html body
.container-header
.container-topbar
.shada-header-actions
.shada-search-toggle {
    display: none !important;
}

/* Language selector: physical right, lower row. */

html body
.container-header
.container-topbar
#shada-language-selector-138 {
    grid-column: 2 !important;
    grid-row: 2 !important;

    justify-self: end !important;
    align-self: center !important;

    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    inset: auto !important;

    width: 9.25rem !important;
    min-width: 9.25rem !important;
    max-width: 9.25rem !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    overflow: visible !important;

    z-index: 13000 !important;
}

/*
 * Opening the selector must never enlarge the topbar.
 * These rules override the old 12rem and 14.75rem
 * expansion rules in user.css.
 */
html body
.container-header
.container-topbar:has(
    #shada-language-selector-138
    > .shada-language-selector__menu:not([hidden])
),

html body
.container-header
.container-topbar:has(
    #shada-language-selector-138
    .shada-language-selector__toggle[
        aria-expanded="true"
    ]
) {
    grid-template-rows:
        2.2rem
        2.85rem !important;

    min-height: 6.1rem !important;

    padding-bottom: 0.4rem !important;
}

/*
 * Dropdown remains attached to the selector and
 * overlays the teal navigation rather than pushing it.
 */
html body
.container-header
.container-topbar
#shada-language-selector-138
> .shada-language-selector__menu {
    position: absolute !important;

    top:
        calc(
            2.85rem
            + 0.3rem
        ) !important;

    right: 0 !important;
    bottom: auto !important;
    left: auto !important;

    margin: 0 !important;

    z-index: 14000 !important;
}

/* Navigation remains immediately below the compact topbar. */

html body
.container-header
.container-nav {
    position: relative !important;

    margin-top: 0 !important;

    z-index: 100 !important;
}

/* Narrow phones. */

@media (max-width: 600px) {

    html body
    .container-header
    .container-topbar {
        column-gap: 0.35rem !important;

        padding:
            0.35rem
            0.4rem !important;
    }

    html body
    .container-header
    .container-topbar
    .shada-header-logo--en
    img {
        max-width:
            min(
                8.75rem,
                calc(
                    100vw - 10.25rem
                )
            ) !important;

        max-height: 3.5rem !important;
    }

    html[lang^="fa"]
    body
    .container-header
    .container-topbar
    .shada-header-logo--fa {
        gap: 0.25rem !important;

        max-width:
            calc(
                100vw - 10.25rem
            ) !important;
    }

    html[lang^="fa"]
    body
    .container-header
    .container-topbar
    .shada-header-logo-fa__text {
        font-size:
            clamp(
                0.72rem,
                3.3vw,
                0.94rem
            ) !important;
    }

    html[lang^="fa"]
    body
    .container-header
    .container-topbar
    .shada-header-logo-fa__icon {
        height: 2.5rem !important;
        max-width: 3rem !important;
    }

    html body
    .container-header
    .container-topbar
    .shada-phone-button {
        font-size: 0.8rem !important;
        padding-inline: 0.3rem !important;
    }
}

/* SHADA-HEADER-COMPACT-GRID-R4 END */