/* wwwroot/css/site-theme.css */

/* ===== Shared theme defaults ===== */
:root {
    --banner-fit: contain;
    --banner-pos: center;
    --header-font: GreatVibes;
    --header-text-size: 60px;
    --header-text-color: #8F8F8F;
    --header-gradient-mid: #E7E4E2;
    --header-gradient-end: #E7E4E2;
    --banner-w: 255px;
    --banner-h: 150px;
}

/* ===== Header wrapper ===== */
.page-header {
    padding: 2px 2px; /* */
    margin-bottom: 0;
    /* uses vars later */
    background: linear-gradient( to right, white 0%, var(--header-gradient-mid) 35%, var(--header-gradient-end) 65%, white 100% );
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    border-bottom: 1px solid #ccc;
}

/* replaces inline min-width */
.page-header__inner {
    min-width: 320px;
    width: 100%;
    max-width: 1500px; /* tweak if you want the header content wider/narrower */
    padding: 0 12px;
    margin: 0 auto;
}

.page-header__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
}

    /* keep left/right tucked toward the banner */
    .page-header__row > .header-left {
        justify-self: end;
        text-align: right;
        align-items: flex-end;
    }

    .page-header__row > a {
        justify-self: center;
    }

    .page-header__row > .header-right {
        justify-self: start; /* keeps icons closer to banner */
        text-align: left;
    }

/* ===== Banner ===== */
.bannerImg {
    margin: 0px;
    width: var(--banner-w);
    height: var(--banner-h);
    object-fit: var(--banner-fit);
    object-position: var(--banner-pos);
    /*box-shadow: rgba(99,99,99,.2) 0 2px 4px 0;*/
    border-radius: 5px;
    display: block;
}

/* ===== Header text ===== */
.header-top-left,
.header-top-right {
    min-height: 100px;
    font-family: var(--header-font);
    font-size: var(--header-text-size);
    color: var(--header-text-color);
    line-height: 1.05; /* script fonts need a touch more */
    padding-top: 6px;
}

/* ===== Location line ===== */
.location {
    margin-top:15px;
    font-family: Roboto-Light;
    font-size: 14px;
    color: #666;
}

.geo-pin {
    color: darkred;
}

.sm-icons {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 8px; /* controls vertical placement */
}

/* ===== Social icons ===== */
.sm-icons a img {
    margin-top: 0;
    opacity: .65;
    transition: opacity .15s ease-in-out;
}

.sm-icons a:hover img {
    opacity: 1;
}

/* ===== Med screens ===== */
@media (min-width:870px) and (max-width: 1100px) {

    :root {
        --header-text-size: 54px;
    }
}

/* ===== Med screens ===== */
@media (min-width:768px) and (max-width: 869px) {

    :root {
        --header-text-size: 40px;
        --banner-w: 220px;
        --banner-h: 129px;
    }
}

@media (min-width:668px) and (max-width: 767px) {

    :root {
        --header-text-size: 34px;
        --banner-w: 215px;
        --banner-h: 126px;
    }
}

@media (min-width:568px) and (max-width: 667px) {

    :root {
        --header-text-size: 30px;
        --banner-w: 215px;
        --banner-h: 126px;
    }

    .location {
        font-size: 12px;
        white-space: normal;
    }

}


@media (max-width: 567px) {

    :root {
        --banner-w: 215px;
        --banner-h: 126px;
    }

    .header-top-left,
    .header-top-right {
        display: none !important;
    }

    .page-header {
        padding-top: 2px; /* was row margin-top */
        padding-bottom: 2px; /* optional */
    }

    .page-header__row {
        display: flex; /* override grid */
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }

        /* Banner link takes full row and centers the image */
        .page-header__row > a {
            flex: 0 0 100%;
            display: flex;
            justify-content: center;
            order: 1;
        }

        /* Left column (location) */
        .page-header__row > .header-left {
            order: 2;
            flex: 1 1 auto;
            min-width: 0;
            align-items: flex-start;
            text-align: left;
        }

        /* Right column (icons) */
        .page-header__row > .header-right {
            order: 3;
            flex: 0 0 auto;
            margin-left: auto;
        }

        .page-header__row > .header-left,
        .page-header__row > .header-right {
            margin-top: -10px;
        }

    .location {
        font-size: 12px;
        white-space: normal;
        text-align: left !important;
    }

    /* tighten icons and keep them together */
    .sm-icons {
        display: flex;
        justify-content: flex-end;
        margin-top: 0;
    }

        /* Tighten icon tap area a bit */
        .sm-icons a {
            padding: 2px !important; /* overrides Bootstrap p-2 */
        }
}