/* ==========================================================================
   Patrika CMS
   Common Website Header
   File: assets/css/header.css
   ========================================================================== */


/* ==========================================================================
   Header Fonts
   ========================================================================== */

@import url(
    "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Noto+Serif+Devanagari:wght@400;500;600&display=swap"
);


/* ==========================================================================
   Header Variables
   ========================================================================== */

:root {

    --header-green: #064c38;
    --header-green-dark: #033c2c;
    --header-gold: #c89b3c;

    --header-text: #173c31;
    --header-muted: #666666;

    --header-border: #dedede;
    --header-background: #ffffff;

}


/* ==========================================================================
   Main Header
   ========================================================================== */

.site-header {

    position: relative;

    width: 100%;

    margin: 0;
    padding: 0;

    background: var(--header-background);

}


/* ==========================================================================
   Utility Bar
   ========================================================================== */

.site-header__utility {

    min-height: 36px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            var(--header-green-dark) 0%,
            var(--header-green) 60%,
            var(--header-green-dark) 100%
        );

    color: #ffffff;

}

.site-header__utility-inner {

    min-height: 36px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 28px;

}


/* ==========================================================================
   Social Media
   ========================================================================== */

.site-header__social {

    display: inline-flex;
    align-items: center;

    gap: 8px;

}

.site-header__social-link {

    width: 28px;
    height: 28px;

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

    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;

    color: #ffffff;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;

}

.site-header__social-link svg {

    width: 14px;
    height: 14px;

    display: block;

    fill: currentColor;

}

.site-header__social-link:hover,
.site-header__social-link:focus {

    border-color: var(--header-gold);

    background: var(--header-gold);
    color: var(--header-green-dark);

    transform: translateY(-1px);

}


/* ==========================================================================
   ISSN
   ========================================================================== */

.site-header__issn {

    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #ffffff;

    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.03em;

    white-space: nowrap;

}

.site-header__issn-label {

    font-weight: 600;

}

.site-header__issn-number {

    font-weight: 600;
    letter-spacing: 0.05em;

}


/* ==========================================================================
   Branding Area
   ========================================================================== */

.site-header__branding {

    position: relative;

    background: #ffffff;

    border-bottom: 2px solid var(--header-green);

}

.site-header__branding-inner {

    min-height: 145px;

    display: grid;

    grid-template-columns:
        145px
        minmax(500px, 1.35fr)
        1px
        minmax(390px, 1fr);

    align-items: center;

    column-gap: 30px;

    padding: 14px 0;

}


/* ==========================================================================
   Logo
   ========================================================================== */

.site-header__logo-area {

    display: flex;
    align-items: center;
    justify-content: center;

}

.site-header__logo-link {

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

    text-decoration: none;

}

.site-header__logo {

    width: 100px;
    height: 100px;

    display: block;

    object-fit: contain;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;

}

.site-header__logo-link:hover .site-header__logo {

    transform: scale(1.025);

    filter:
        drop-shadow(
            0 4px 10px rgba(6, 76, 56, 0.13)
        );

}

.site-header__logo-placeholder {

    width: 118px;
    height: 118px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 3px solid var(--header-gold);
    border-radius: 50%;

    background: #ffffff;

    color: var(--header-green);

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 2.4rem;
    font-weight: 700;

    box-shadow:
        inset 0 0 0 5px #ffffff,
        inset 0 0 0 7px var(--header-gold);

}


/* ==========================================================================
   Shared Journal Identity
   ========================================================================== */

.site-header__identity {

    min-width: 0;

}

.site-header__title-link {

    display: block;

    color: inherit;

    text-decoration: none;

}

.site-header__title-link:hover,
.site-header__title-link:focus {

    color: inherit;

}

.site-header__title {

    display: block;

    margin: 0;

    color: var(--header-green);

    font-family:
        "Cormorant Garamond",
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(2.45rem, 3vw, 3.2rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;

}

.site-header__tagline {

    margin: 10px 0 0;

    color: var(--header-muted);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(1rem, 1.25vw, 1.3rem);
    font-weight: 400;
    line-height: 1.35;

}


/* ==========================================================================
   English Identity
   ========================================================================== */

.site-header__identity--english {

    padding-right: 6px;

}

.site-header__identity--english .site-header__title {

    white-space: nowrap;

}


/* ==========================================================================
   Decorative Ornament
   ========================================================================== */

.site-header__ornament {

    display: none;

}


/* ==========================================================================
   Vertical Divider
   ========================================================================== */

.site-header__identity-divider {

    width: 1px;
    height: 100px;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            var(--header-border) 12%,
            var(--header-border) 88%,
            transparent 100%
        );

}


/* ==========================================================================
   Hindi Identity
   ========================================================================== */

.site-header__identity--hindi {

    padding-left: 8px;

}

.site-header__title--hindi {

    font-family:
        "Noto Serif Devanagari",
        "Nirmala UI",
        Mangal,
        serif;

    font-size: clamp(2.15rem, 2.8vw, 3rem);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: 0;

    white-space: nowrap;

}

.site-header__tagline--hindi {

    margin-top: 10px;

    font-family:
        "Noto Serif Devanagari",
        "Nirmala UI",
        Mangal,
        serif;

    font-size: clamp(0.95rem, 1.15vw, 1.2rem);
    line-height: 1.5;

    white-space: nowrap;

}


/* ==========================================================================
   Keyboard Focus
   ========================================================================== */

.site-header a:focus-visible {

    outline: 3px solid var(--header-gold);
    outline-offset: 4px;

}


/* ==========================================================================
   Large Desktop
   ========================================================================== */

@media (min-width: 1400px) {

    .site-header__branding-inner {

        grid-template-columns:
            150px
            minmax(540px, 1.35fr)
            1px
            minmax(420px, 1fr);

    }

}


/* ==========================================================================
   Medium Desktop
   ========================================================================== */

@media (max-width: 1199.98px) {

    .site-header__branding-inner {

        min-height: 165px;

        grid-template-columns:
            120px
            minmax(420px, 1.25fr)
            1px
            minmax(330px, 1fr);

        column-gap: 22px;

        padding: 21px 0;

    }

    .site-header__logo {

        width: 105px;
        height: 105px;

    }

    .site-header__logo-placeholder {

        width: 100px;
        height: 100px;

        font-size: 2rem;

    }

    .site-header__title {

        font-size: 2.85rem;

    }

    .site-header__title--hindi {

        font-size: 2.55rem;

    }

    .site-header__tagline {

        font-size: 1rem;

    }

    .site-header__tagline--hindi {

        font-size: 0.94rem;

    }

    .site-header__identity-divider {

        height: 110px;

    }

}


/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 991.98px) {

    .site-header__branding-inner {

        min-height: 150px;

        grid-template-columns:
            95px
            minmax(335px, 1.2fr)
            1px
            minmax(275px, 1fr);

        column-gap: 17px;

        padding: 18px 0;

    }

    .site-header__logo {

        width: 82px;
        height: 82px;

    }

    .site-header__logo-placeholder {

        width: 78px;
        height: 78px;

        font-size: 1.55rem;

    }

    .site-header__title {

        font-size: 2.25rem;

    }

    .site-header__title--hindi {

        font-size: 2.05rem;

    }

    .site-header__tagline {

        margin-top: 9px;

        font-size: 0.82rem;

    }

    .site-header__tagline--hindi {

        margin-top: 8px;

        font-size: 0.78rem;

    }

    .site-header__identity-divider {

        height: 95px;

    }

}


/* ==========================================================================
   Mobile and Small Tablet
   ========================================================================== */

@media (max-width: 767.98px) {

    .site-header__utility-inner {

        justify-content: space-between;

        gap: 16px;

    }

    .site-header__branding-inner {

        min-height: auto;

        grid-template-columns: 82px minmax(0, 1fr);

        column-gap: 16px;
        row-gap: 15px;

        padding: 20px 0;

    }

    .site-header__logo-area {

        grid-column: 1;
        grid-row: 1 / span 2;

    }

    .site-header__logo {

        width: 72px;
        height: 72px;

    }

    .site-header__logo-placeholder {

        width: 68px;
        height: 68px;

        font-size: 1.35rem;

    }

    .site-header__identity--english {

        grid-column: 2;
        grid-row: 1;

        padding: 0 0 13px;

        border-bottom: 1px solid var(--header-border);

    }

    .site-header__identity-divider {

        display: none;

    }

    .site-header__identity--hindi {

        grid-column: 2;
        grid-row: 2;

        padding: 0;

    }

    .site-header__title {

        font-size: clamp(1.9rem, 7vw, 2.45rem);

    }

    .site-header__title--hindi {

        font-size: clamp(1.7rem, 6.4vw, 2.2rem);

    }

    .site-header__tagline {

        margin-top: 6px;

        font-size: 0.82rem;

    }

    .site-header__tagline--hindi {

        margin-top: 5px;

        font-size: 0.78rem;

    }

    .site-header__identity--english .site-header__title,
    .site-header__title--hindi,
    .site-header__tagline--hindi {

        white-space: normal;

    }

}


/* ==========================================================================
   Small Mobile
   ========================================================================== */

@media (max-width: 575.98px) {

    .site-header__utility {

        min-height: 42px;

    }

    .site-header__utility-inner {

        min-height: 42px;

        gap: 10px;

    }

    .site-header__issn {

        gap: 4px;

        font-size: 0.78rem;

    }

    .site-header__issn-number {

        letter-spacing: 0.02em;

    }

    .site-header__social {

        gap: 5px;

    }

    .site-header__social-link {

        width: 25px;
        height: 25px;

    }

    .site-header__social-link svg {

        width: 12px;
        height: 12px;

    }

    .site-header__branding-inner {

        grid-template-columns: 64px minmax(0, 1fr);

        column-gap: 12px;
        row-gap: 12px;

        padding: 16px 0;

    }

    .site-header__logo {

        width: 56px;
        height: 56px;

    }

    .site-header__logo-placeholder {

        width: 54px;
        height: 54px;

        border-width: 2px;

        font-size: 1rem;

    }

    .site-header__identity--english {

        padding-bottom: 10px;

    }

    .site-header__title {

        font-size: clamp(1.55rem, 7.8vw, 2rem);

    }

    .site-header__title--hindi {

        font-size: clamp(1.4rem, 7vw, 1.8rem);

    }

    .site-header__tagline {

        margin-top: 4px;

        font-size: 0.71rem;
        line-height: 1.35;

    }

    .site-header__tagline--hindi {

        margin-top: 3px;

        font-size: 0.7rem;
        line-height: 1.4;

    }

}


/* ==========================================================================
   Very Small Mobile
   ========================================================================== */

@media (max-width: 390px) {

    .site-header__utility-inner {

        flex-wrap: wrap;
        justify-content: center;

        padding: 6px 0;

    }

    .site-header__social {

        order: 1;

    }

    .site-header__issn {

        order: 2;

        width: 100%;

        justify-content: center;

    }

    .site-header__branding-inner {

        grid-template-columns: 50px minmax(0, 1fr);

        column-gap: 9px;

    }

    .site-header__logo {

        width: 46px;
        height: 46px;

    }

    .site-header__logo-placeholder {

        width: 46px;
        height: 46px;

        font-size: 0.9rem;

    }

    .site-header__title {

        font-size: 1.42rem;

    }

    .site-header__title--hindi {

        font-size: 1.3rem;

    }

    .site-header__tagline,
    .site-header__tagline--hindi {

        font-size: 0.66rem;

    }

}