﻿
:root {
    --gov-navy: var(--c-primary, #162F6A);
    --gov-navy-dark: var(--c-dark, #0F2150);
    --gov-yellow: var(--c-accent, #FFFF00);
    --gov-text: #1f2937;
    --gov-border: #d9dde5;
    --gov-font: "Noto Sans", "Noto Sans Devanagari", "Noto Sans Kannada", sans-serif; /* DBIM 4.1 / 4.2 */
    --gh-img: 72px; /* size of emblem / NIC / extra logo */
}

/* GIGW 5.1.15 - never let the page grow wider than the screen */
html, body {
    max-width: 100%;
}

/* ---------- HEADER ---------- */
.gh-wrap {
    background: #fff;
    font-family: var(--gov-font);
}

.gh-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
}

/* top strip */
.gh-top {
    border-bottom: 1px solid var(--gov-border);
}

    .gh-top .gh-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 48px;
        gap: 12px;
        flex-wrap: wrap;
    }

.gh-gov {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gh-flag {
    width: 36px;
    height: 24px;
    flex: none;
    display: block;
}

.gh-gov-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    font-size: 13px;
    color: var(--gov-text);
}

    .gh-gov-text small {
        font-size: 11px;
        font-weight: 600;
    }

.gh-tools {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
}

    .gh-tools > li {
        padding: 0 14px;
        border-left: 1px solid var(--gov-border);
        display: flex;
        align-items: center;
    }

        .gh-tools > li:first-child {
            border-left: 0;
        }

    .gh-tools a.gh-link {
        color: var(--gov-text);
        font-size: 13px;
        text-decoration: none;
    }

        .gh-tools a.gh-link:hover {
            color: var(--gov-navy);
            text-decoration: underline;
        }

    .gh-tools select {
        border: 0;
        background: transparent;
        font: inherit;
        font-size: 13px;
        color: var(--gov-text);
        cursor: pointer;
    }

    .gh-tools .gh-btn {
        display: inline-block;
        background: var(--gov-navy);
        color: #fff !important;
        border-radius: 4px;
        padding: 5px 12px;
        font-size: 13px;
        text-decoration: none;
    }

        .gh-tools .gh-btn:hover {
            background: var(--gov-navy-dark);
            text-decoration: none;
        }

/* brand row: emblem left | search center | NIC right */
.gh-brand .gh-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 40px;
}

.gh-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    justify-self: start;
    min-width: 0;
}

    /* all brand-row images share one size */
    .gh-logo img.gh-emblem,
    .gh-nic img,
    .gh-extra img {
        width: var(--gh-img);
        height: var(--gh-img);
        object-fit: contain;
        display: block;
    }

.gh-title {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

    .gh-title strong {
        font-size: 24px;
        font-weight: 600;
        color: var(--gov-navy);
        white-space: nowrap;
    }

    .gh-title span {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .1em;
        color: var(--gov-navy);
        margin-top: 4px;
        white-space: nowrap;
    }

.gh-search {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: 48px;
    border: 2px solid #aab2c0;
    border-radius: 8px;
    overflow: hidden;
    justify-self: stretch;
}

    .gh-search input {
        flex: 1;
        min-width: 0;
        border: 0;
        outline: 0;
        padding: 8px 12px 8px 16px;
        font-size: 16px;
        font-family: var(--gov-font);
    }

    .gh-search button {
        border: 0;
        background: var(--gov-navy);
        color: #fff;
        width: 60px;
        cursor: pointer;
        font-size: 18px;
    }

        .gh-search button:hover {
            background: var(--gov-navy-dark);
        }

/* right-side group: NIC + extra logo */
.gh-logos-right {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-self: end;
}

/* ---------- FOOTER ---------- */
/* Dark navy background so yellow (#FFFF00) and white text pass
   WCAG 1.4.3 (yellow on #162F6A is about 13:1). */
.gf-wrap {
    background: var(--gov-navy);
    border-top: 4px solid var(--c-strong, #214AAB);
    color: #fff;
    font-family: var(--gov-font);
}

.gf-inner {
    max-width: 1170px;
    margin: 0 auto;
    padding: 34px 15px 28px;
    display: grid;
    grid-template-columns: 1.35fr 1.15fr .8fr;
    gap: 0;
}

.gf-col {
    padding: 0 28px;
    min-width: 0;
}

    .gf-col:first-child {
        padding-left: 0;
    }

    .gf-col + .gf-col {
        border-left: 1px solid var(--c-strong, #214AAB);
    }

    .gf-col h3 {
        margin: 0 0 18px;
        font-size: 20px;
        font-weight: 600;
        color: #fff;
    }

.gf-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}

    .gf-links ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .gf-links li {
        margin-bottom: 14px;
    }

    .gf-links a {
        color: #fff;
        text-decoration: none;
        font-size: 15px;
    }

        .gf-links a::before {
            content: "\203A";
            display: inline-block;
            margin-right: 10px;
            font-weight: 700;
        }

        .gf-links a:hover,
        .gf-links a:focus {
            color: var(--c-light, #A3BBF3);
            text-decoration: underline;
        }

.gf-about p {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.7;
    color: #fff;
}

.gf-about .gf-hl {
    color: var(--gov-yellow);
    font-weight: 600;
}

.gf-about a.gf-hl {
    text-decoration: none;
}

.gf-about .gf-updated {
    margin-top: 14px;
}

    .gf-about .gf-updated strong {
        font-weight: 700;
    }

/* social icons: crisp inline SVG */
.gf-social {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

    .gf-social a {
        width: 44px;
        height: 44px;
        border: 2px solid var(--c-light, #A3BBF3);
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        background: transparent;
        text-decoration: none;
        font-size: 18px;
        transition: background .15s, color .15s, transform .15s;
    }

        .gf-social a svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
            display: block;
        }

            .gf-social a svg.gf-ico-stroke {
                fill: none;
                stroke: currentColor;
                stroke-width: 2;
            }

                .gf-social a svg.gf-ico-stroke .gf-dot {
                    fill: currentColor;
                    stroke: none;
                }

        .gf-social a:hover,
        .gf-social a:focus-visible {
            background: #fff;
            color: var(--c-primary, #162F6A);
            border-color: #fff;
            transform: translateY(-2px);
        }

/* back to top */
.gf-top-btn {
    position: fixed;
    right: 40px;
    bottom: 6px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--c-light, #A3BBF3);
    background: var(--c-strong, #214AAB);
    color: #fff;
    font-size: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99;
}

    .gf-wrap a:focus-visible,
    .gf-top-btn:focus-visible {
        outline: 2px solid var(--c-accent, #FFFF00);
        outline-offset: 2px;
    }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
    .gf-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .gf-col, .gf-col:first-child {
        padding: 0;
    }

        .gf-col + .gf-col {
            border-left: 0;
            border-top: 1px solid var(--c-strong, #214AAB);
            padding-top: 24px;
        }
}

@media (max-width: 640px) {
    :root {
        --gh-img: 44px; /* smaller emblem / NIC / extra logos */
    }

    /* accessibility bar: allow wrapping (GIGW 5.1.15) */
    #b-accessibility {
        flex-wrap: wrap;
        max-width: 100%;
        box-sizing: border-box;
    }

    .b-ministryname,
    .b-acc-icons {
        flex-wrap: wrap;
        max-width: 100%;
    }

    /* brand row: logo + NIC on first line, search full width below */
    .gh-brand .gh-inner {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "logo nic"
            "search search";
        gap: 10px;
    }

    .gh-logo {
        grid-area: logo;
        gap: 8px;
    }

    .gh-logos-right {
        grid-area: nic;
        gap: 8px;
    }

    .gh-search {
        grid-area: search;
        width: 100%;
        justify-self: stretch;
    }

    /* title must wrap instead of forcing the page wider */
    .gh-title strong,
    .gh-title span {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .gh-title strong {
        font-size: 16px;
    }

    .gh-title span {
        font-size: 10px;
        letter-spacing: .03em;
    }

    .gh-tools > li {
        padding: 0 8px;
    }

    /* footer: long text and links must wrap */
    .gf-links {
        grid-template-columns: 1fr;
    }

    .gf-about p,
    .gf-about a {
        overflow-wrap: anywhere;
    }
}

/* ---------- DBIM 4.1.1 - body text left-aligned, no ALL-CAPS paragraphs ----------
   Keep this block LAST so it overrides base.css / site.css / bootstrap.
   !important is needed because justify may come from inline styles. */
p,
main p,
main li,
main td {
    text-align: left !important;
    text-transform: none;
}

/* ---------- DBIM 4.3.1 / 4.3.2 - type scale ----------
   Desktop: H1 36 / H2 24 / H3 20 / P 16 (14 for small text)
   Mobile : H1 24 / H2 20 / H3 16 / P 14 (12 for small text)
   Keep this block LAST. px is used on purpose: Bootstrap 3 sets html{font-size:10px}, so rem would be wrong. */
:root {
    --fs-h1: 36px;
    --fs-h2: 24px;
    --fs-h3: 20px;
    --fs-p: 16px;
    --fs-p-small: 14px;
}

h1, .h1 {
    font-size: var(--fs-h1) !important;
    line-height: 1.2;
}

h2, .h2 {
    font-size: var(--fs-h2) !important;
    line-height: 1.25;
}

h3, .h3 {
    font-size: var(--fs-h3) !important;
    line-height: 1.3;
}

p {
    font-size: var(--fs-p) !important;
}

/* footer text uses the smaller body size (14) */
.gf-about p {
    font-size: var(--fs-p-small) !important;
}

.gf-col h3 {
    font-size: var(--fs-h3) !important;
}

@media (max-width: 767px) {
    :root {
        --fs-h1: 24px;
        --fs-h2: 20px;
        --fs-h3: 16px;
        --fs-p: 14px;
        --fs-p-small: 12px;
    }
}

/* ---------- DBIM 4.1 / 4.2 - Noto Sans everywhere ----------
   Form controls do not inherit the font by default in some browsers. */
body,
.gh-wrap, .gf-wrap, .gp-wrap,
input, button, select, textarea {
    font-family: var(--gov-font);
}
