/* App-wide CSS goes here. Page styling itself lives in the theme (public/theme/css/style.css) — see templates/theme/base.html.twig. */

/* Home page intro + state grid section. The theme's own .page-wrapper adds
   70px top/bottom padding, meant for a section that's the only thing on a
   page — stacking it between the search header and the widgets section
   below left a large dead gap. This uses much tighter, single-purpose
   spacing instead, and the intro paragraph gives search engines real page
   copy instead of that gap being pure whitespace. */
.gov-intro {
    padding: 40px 0 10px;
}

.gov-intro h2 {
    margin-top: 0;
}

/* Home page dashboard widget cards (public/govdata/_exam_mini_list.html.twig).
   The plain .dashboard-wrapper box the theme ships is fine for a single panel,
   but a whole grid of them side by side had no visual hierarchy and (worse)
   uneven heights row to row since Bootstrap 3's grid doesn't stretch columns.
   .dash-row/.dash-card fix both: flexbox equal-height columns, plus an icon +
   colour accent per card so "Urgent", "Results", "Jobs" etc. read apart at a
   glance instead of being 10 identical grey boxes. Colours reuse the same
   success/info/warning/danger palette as the badges elsewhere on the site. */
.dash-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.dash-row > [class*="col-"] {
    display: flex;
    margin-bottom: 20px;
}

.dash-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid #eee;
    border-left: 4px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dash-card:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.dash-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #f2f2f2;
}

.dash-card-header i {
    font-size: 18px;
    color: #ccc;
}

.dash-card-header h4 {
    margin: 0;
    font-size: 15px;
}

.dash-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

.dash-card-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #f8f8f8;
    font-size: 13px;
}

.dash-card-list li:last-child {
    border-bottom: none;
}

.dash-card-list li a {
    color: #333;
}

.dash-card-list li a:hover {
    color: #f2711c;
    text-decoration: none;
}

.dash-card-date {
    color: #999;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.dash-card-empty {
    flex: 1 1 auto;
    margin: 0;
    padding: 16px;
    color: #999;
    font-size: 13px;
    font-style: italic;
}

.dash-card-footer {
    padding: 10px 16px;
    border-top: 1px solid #f2f2f2;
}

.dash-card--primary { border-left-color: #337ab7; }
.dash-card--primary .dash-card-header i { color: #337ab7; }

.dash-card--success { border-left-color: #5cb85c; }
.dash-card--success .dash-card-header i { color: #5cb85c; }

.dash-card--info { border-left-color: #5bc0de; }
.dash-card--info .dash-card-header i { color: #5bc0de; }

.dash-card--warning { border-left-color: #f0ad4e; }
.dash-card--warning .dash-card-header i { color: #f0ad4e; }

.dash-card--danger { border-left-color: #d9534f; }
.dash-card--danger .dash-card-header i { color: #d9534f; }

/* Combined India map (public/govdata/_state_grid.html.twig, theme/icons/india_map.svg).
   Each state is an <a><path></a> inside one shared SVG — style the path via
   the parent .india-map-state link, not the svg root, so hover/focus work
   per-state. */
.india-map-wrapper {
    max-width: 650px;
    margin: 10px auto 0;
}

.india-map-wrapper svg {
    width: 100%;
    height: auto;
    display: block;
}

.india-map-state path {
    fill: #333;
    stroke: #fff;
    stroke-width: 0.6;
    transition: fill 0.15s ease;
    cursor: pointer;
}

.india-map-state:hover path,
.india-map-state:focus path {
    fill: #f2711c;
}

.india-map-label {
    font-size: 13px;
    color: #777;
}

.india-map-label strong {
    color: #333;
}

/* State grid tile (public/govdata/_state_grid.html.twig) — the theme has no
   icon+text tile pattern of its own, so this is the one bit of layout CSS
   we add on top of it. Each icon is the real state outline (inline SVG,
   fill="currentColor"), not a font icon — sized here rather than via font-size. */
.state-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Fixed height so every tile in a row matches — some state names (e.g.
       "Dadra & Nagar Haveli and Daman & Diu") wrap to 3 lines, and Bootstrap 3's
       float grid misaligns/gaps subsequent rows when row heights differ. */
    min-height: 150px;
    padding: 15px 10px;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
    border: 1px solid #eee;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.state-tile:hover,
.state-tile:focus {
    text-decoration: none;
    border-color: #ccc;
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.state-tile:hover .state-tile-icon,
.state-tile:focus .state-tile-icon {
    color: #f2711c;
}

.state-tile:hover .state-tile-label,
.state-tile:focus .state-tile-label {
    color: #000;
}

.state-tile-icon {
    display: block;
    margin: 0 auto 8px;
    width: 40px;
    height: 40px;
}

.state-tile-icon svg {
    width: 100%;
    height: 100%;
}

.state-tile-label {
    display: block;
    font-size: 13px;
}

.state-search {
    position: relative;
    max-width: 400px;
    margin: 0 0 15px;
}

.state-search i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #999;
}

.state-search input {
    height: 44px;
    padding-left: 40px;
}

.state-group-heading {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 12px;
}

#state-search-empty {
    color: #999;
    padding: 20px 0;
}

/* Advanced search box (theme/_search_box.html.twig). The tricolor bar is a
   subtle nod to the India/government context — not an official emblem, just
   a thin accent stripe — and everything else stays plain/functional. */
.home-hero {
    background: #ffffff;
    margin-top: 12px;
    padding: 38px 0 34px;
    border-top: 1px solid #f1f3f6;
    border-bottom: 1px solid #f1f3f6;
}

.home-hero .content {
    max-width: 980px;
}

.home-hero .page-name {
    margin-bottom: 8px;
}

.home-hero p {
    margin-bottom: 18px;
    color: #4b5563;
}

.gov-search {
    max-width: 800px;
    text-align: left;
}

.gov-search-tricolor {
    height: 3px;
    border-radius: 10px 10px 0 0;
    border: 1px solid #e7ebf0;
    border-bottom: none;
    background: linear-gradient(to right, #ff9933 0 33.33%, #ffffff 33.33% 66.66%, #138808 66.66% 100%);
}

.gov-search-row {
    position: relative;
    display: flex;
    border: 1px solid #e7ebf0;
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.gov-search-category,
.gov-search-input,
.gov-search-submit {
    height: 54px;
    font-size: 16px;
}

.gov-search-category {
    flex: 0 0 150px;
    border-radius: 0 !important;
    border: none !important;
    background: #ffffff !important;
    color: #344054;
    border-right: none !important;
}

.gov-search-input {
    flex: 1 1 auto;
    border: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 10px 18px;
}

.gov-search-input::placeholder {
    color: #98a2b3;
}

.gov-search-submit {
    flex: 0 0 auto;
    border-radius: 0 !important;
    padding: 10px 36px;
}

.gov-search-suggestions {
    position: relative;
    z-index: 20;
    background: #fff;
    border: 1px solid #eee;
    border-top: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.gov-search-suggestion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #f5f5f5;
    color: #333;
}

.gov-search-suggestion:last-child {
    border-bottom: none;
}

.gov-search-suggestion:hover,
.gov-search-suggestion:focus {
    background: #f9f9f9;
    color: #000;
    text-decoration: none;
}

.gov-search-suggestion span {
    font-size: 12px;
    color: #999;
}

.gov-search-tags {
    margin-top: 14px;
    font-size: 12px;
    color: #98a2b3;
}

.gov-search-tags a {
    display: inline-block;
    margin-left: 6px;
    padding: 4px 12px;
    border: 1px solid #e7ebf0;
    border-radius: 20px;
    background: #ffffff;
    color: #475467;
}

.gov-search-tags a:hover {
    border-color: #d0d5dd;
    color: #111827;
    text-decoration: none;
}

.search-page {
    background: #ffffff;
    padding-top: 54px;
}

.search-page__panel {
    max-width: 980px;
    margin: 0 auto;
}

.search-page__hero {
    background: #ffffff;
    border: 1px solid #e7ebf0;
    padding: 30px 32px 28px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

.search-page__eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.search-page__title {
    margin: 0 0 10px;
    color: #101828;
    font-size: 34px;
    line-height: 1.15;
}

.search-page__lead {
    margin: 0 0 20px;
    max-width: 760px;
    color: #667085;
    font-size: 15px;
    line-height: 1.8;
}

.search-page__form .gov-search {
    max-width: none;
}

.search-page__summary {
    margin-top: 28px;
    margin-bottom: 18px;
}

.search-page__summary-title {
    margin: 0 0 6px;
    color: #101828;
    font-size: 28px;
}

.search-page__summary-note {
    margin: 0;
    color: #667085;
    font-size: 14px;
}

.search-results {
    display: grid;
    gap: 18px;
}

.search-result-card {
    background: #ffffff;
    border: 1px solid #e7ebf0;
    padding: 22px 24px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-result-card:hover {
    border-color: #d0d5dd;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.search-result-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.search-result-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: #111827;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.search-result-card__chip--muted {
    background: #f4f6f8;
    color: #344054;
}

.search-result-card__date {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.search-result-card__title {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.35;
}

.search-result-card__title a {
    color: #101828;
}

.search-result-card__title a:hover,
.search-result-card__title a:focus {
    color: #000;
    text-decoration: none;
}

.search-result-card__summary {
    margin: 0;
    color: #475467;
    font-size: 15px;
    line-height: 1.75;
}

.search-result-card__footer {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.search-result-card__location {
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.search-result-card__link {
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.search-pagination {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.search-pagination__item,
.search-pagination__nav {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid #d9e1ea;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
}

.search-pagination__item.is-active {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

.search-pagination__ellipsis {
    color: #98a2b3;
    font-size: 18px;
    line-height: 1;
}

.search-empty {
    margin-top: 26px;
    background: #ffffff;
    border: 1px solid #e7ebf0;
    padding: 28px 30px;
}

.search-empty h3 {
    margin: 0 0 10px;
    color: #101828;
}

.search-empty p {
    margin: 0;
    color: #667085;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .search-page {
        padding-top: 36px;
    }

    .search-page__hero {
        padding: 22px 18px 20px;
    }

    .search-page__title {
        font-size: 28px;
    }

    .search-result-card {
        padding: 18px;
    }

    .search-result-card__title {
        font-size: 20px;
    }

    .search-result-card__footer {
        display: block;
    }

    .search-result-card__link {
        display: inline-block;
        margin-top: 10px;
    }
}

/* Language switcher — lives in the theme's top bar (theme/_top_header.html.twig),
   next to Search, replacing the theme's non-functional EN/HI <select> placeholder.
   All 22 entries would make a single-column dropdown very tall, so it wraps into
   two columns; each language's own script is set alongside a small grey English
   label since most visitors can't visually identify every script by its native
   name alone. It sits at the far right of the page, so the dropdown must open
   right-aligned (left: auto) or it overflows off-screen. */
.lang-switcher {
    position: relative;
}

.lang-switcher-menu {
    display: flex;
    flex-wrap: wrap;
    width: 340px;
    max-width: 90vw;
    padding: 8px 0;
    left: auto;
    right: 0;
}

.lang-switcher-menu li {
    flex: 0 0 50%;
    box-sizing: border-box;
}

.lang-switcher-menu li a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    padding: 6px 15px;
    white-space: nowrap;
    overflow: hidden;
}

.lang-switcher-menu li a.active {
    color: #f2711c;
    font-weight: bold;
}

.lang-switcher-english {
    font-size: 11px;
    color: #999;
    text-overflow: ellipsis;
    overflow: hidden;
}