/*
Theme Name: Jobs Portal
Description: Lightweight Storefront child theme for an Indian job-notification portal.
Template: storefront
Version: 1.0.4
Text Domain: jobs-portal
*/

:root {
	--jobs-ink: #18212f;
	--jobs-muted: #5b6678;
	--jobs-border: #dce2ea;
	--jobs-blue: #0b57d0;
	--jobs-blue-dark: #073b8f;
	--jobs-pale: #f4f7fb;
	--jobs-green: #137333;
	--jobs-red: #b3261e;
}

body { color: var(--jobs-ink); }
.col-full { max-width: 1180px; }
body.no-wc-breadcrumb .site-header, body.home .site-header, body.home.blog .site-header, .site-header { margin-bottom: 1rem; }
.site-main { margin-bottom: 2.5rem; }
.job-shell { width: 100%; }
.job-hero { background: linear-gradient(135deg, #083a85, #0b57d0); border-radius: 14px; color: #fff; margin: 0 0 1.25rem; padding: 2rem clamp(1.1rem, 4vw, 3rem); }
.job-hero h1, .job-hero__title { color: #fff; font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 700; line-height: 1.2; margin: 0 0 .4rem; }
.job-hero p { font-size: 1.05rem; margin: 0; max-width: 680px; }
.job-section { margin: 1.5rem 0 2rem; }
.job-section__title { font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 0 0 .9rem; }

.job-filters { background: var(--jobs-pale); border: 1px solid var(--jobs-border); border-radius: 12px; margin: 0 0 1.5rem; padding: 1rem; }
.job-filter-group + .job-filter-group { margin-top: .85rem; }
.job-filter-group strong { display: block; font-size: .85rem; margin-bottom: .45rem; text-transform: uppercase; }
.job-filter-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.job-filter-chip { background: #fff; border: 1px solid #aeb8c7; border-radius: 999px; color: var(--jobs-ink); display: inline-block; font-size: .9rem; padding: .35rem .7rem; text-decoration: none; }
.job-filter-chip:hover, .job-filter-chip:focus, .job-filter-chip.is-active { background: var(--jobs-blue); border-color: var(--jobs-blue); color: #fff; }
.job-filter-clear { display: inline-block; font-size: .9rem; margin-top: .8rem; }

.job-list { display: grid; gap: .8rem; list-style: none; margin: 0; padding: 0; }
.job-card { background: #fff; border: 1px solid var(--jobs-border); border-radius: 10px; box-shadow: 0 2px 8px rgba(24, 33, 47, .05); padding: 1rem; }
.job-card__heading { align-items: flex-start; display: flex; gap: .65rem; justify-content: space-between; }
.job-card__title { font-size: 1.1rem; line-height: 1.35; margin: 0; }
.job-card__title a { color: var(--jobs-blue-dark); text-decoration: none; }
.job-card__organisation { color: var(--jobs-muted); margin: .25rem 0 .75rem; }
.job-card__facts { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.job-card__facts div { background: var(--jobs-pale); border-radius: 7px; padding: .55rem .65rem; }
.job-card__facts dt { color: var(--jobs-muted); font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; }
.job-card__facts dd { font-size: .9rem; font-weight: 600; margin: .1rem 0 0; overflow-wrap: anywhere; }
.job-card__footer { align-items: center; display: flex; flex-wrap: wrap; gap: .55rem; justify-content: space-between; margin-top: .75rem; }
.job-card__updated { color: var(--jobs-muted); font-size: .82rem; }
.job-badge, .job-status { border-radius: 999px; display: inline-block; font-size: .75rem; font-weight: 700; line-height: 1; padding: .35rem .55rem; }
.job-badge { background: #e7f0ff; color: var(--jobs-blue-dark); text-decoration: none; min-height: 24px; box-sizing: border-box; }
.job-card__types { display: flex; flex-wrap: wrap; gap: .4rem; }
.job-status--open { background: #e6f4ea; color: var(--jobs-green); }
.job-status--upcoming { background: #fff4ce; color: #7a4d00; }
.job-status--closed { background: #fce8e6; color: var(--jobs-red); text-transform: uppercase; }
.job-status-line { margin: 0 0 1rem; }

.job-single__header { border-bottom: 1px solid var(--jobs-border); margin-bottom: 1rem; padding-bottom: .75rem; }
.job-single__title { font-size: clamp(1.7rem, 4vw, 2.5rem); margin: 0 0 .4rem; }
.job-single__meta { color: var(--jobs-muted); margin: 0; }
.job-description { margin-top: .8rem; }
.job-breadcrumbs { align-items: center; color: var(--jobs-muted); display: flex; flex-wrap: wrap; font-size: .86rem; gap: .4rem; margin: 0 0 .9rem; }
.job-breadcrumbs a { color: var(--jobs-blue-dark); }
.job-detail-section { margin: 1.5rem 0; }
.job-detail-section h2 { font-size: 1.35rem; margin-bottom: .65rem; }
.job-table-wrap { border: 1px solid var(--jobs-border); border-radius: 10px; overflow-x: auto; }
.job-table { border: 0; border-collapse: collapse; margin: 0; table-layout: fixed; width: 100%; }
.job-table th, .job-table td { border-bottom: 1px solid var(--jobs-border); padding: .7rem .8rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.job-table tr:last-child th, .job-table tr:last-child td { border-bottom: 0; }
.job-table th { background: var(--jobs-pale); width: 38%; }
.job-apply-sticky { align-items: center; background: var(--jobs-pale); border: 1px solid var(--jobs-border); border-radius: 10px; display: flex; flex-wrap: wrap; gap: .65rem; padding: .85rem; position: sticky; top: 1rem; z-index: 10; }
.job-apply-sticky strong { display: block; margin-right: auto; }
.job-link-button { background: var(--jobs-blue); border-radius: 6px; color: #fff; display: inline-block; font-weight: 700; padding: .5rem .7rem; text-decoration: none; }
.job-link-button:hover, .job-link-button:focus { background: var(--jobs-blue-dark); color: #fff; }
.job-faq details { border-bottom: 1px solid var(--jobs-border); padding: .7rem 0; }
.job-faq summary { cursor: pointer; font-weight: 700; }
.job-latest-ten { background: var(--jobs-pale); border: 1px solid var(--jobs-border); border-radius: 10px; padding: 1rem; }
.job-latest-ten ol { column-count: 2; column-gap: 2rem; margin: 0; padding-left: 1.35rem; }
.job-latest-ten li { break-inside: avoid; margin: 0 0 .65rem; }
.job-latest-ten small { color: var(--jobs-muted); display: block; }
.job-prev-next { border-bottom: 1px solid var(--jobs-border); border-top: 1px solid var(--jobs-border); display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; margin: 1.5rem 0; padding: 1rem 0; }
.job-prev-next div:last-child { text-align: right; }
.job-empty { background: var(--jobs-pale); border-radius: 10px; padding: 1rem; }
.navigation.pagination { margin-top: 1.5rem; }

/* The pseudo-element owns the reserve because AdSense may zero the height of its own ancestors. */
.job-ad { clear: both; margin: 1.25rem auto; max-width: 100%; overflow: visible !important; position: relative !important; text-align: center; width: 100%; }
.job-ad::before { content: ""; display: block; height: 278px; width: 100%; }
.job-ad--top::before { height: 108px; }
.job-ad__label { color: #6c7480; font-size: 11px; left: 0; letter-spacing: .08em; line-height: 18px; position: absolute; right: 0; text-transform: uppercase; top: 0; }
.job-ad__box { display: block; left: 0; position: absolute; right: 0; top: 24px; width: 100%; }
.job-ad--top .job-ad__box { top: 18px; }
.job-ad ins.adsbygoogle { display: block; min-height: 250px; min-width: 250px; width: 100%; }
.job-ad--top ins.adsbygoogle { min-height: 90px; }
.job-ad-placeholder { align-items: center; background: repeating-linear-gradient(135deg, #f3f5f7, #f3f5f7 12px, #e9edf1 12px, #e9edf1 24px); border: 1px dashed #a7b0bc; color: #606a78; display: flex; justify-content: center; min-height: 250px; padding: 1rem; }
.job-ad--top .job-ad-placeholder { min-height: 90px; }
.job-ad:has(ins[data-ad-status="unfilled"]), .job-ad:has(ins[data-ad-status="unfill-optimized"]) { visibility: hidden; }
.job-links + .job-ad, .job-prev-next + .job-ad { margin-top: 3rem; }

@media (max-width: 760px) {
	.job-card__facts { grid-template-columns: 1fr; }
	.job-apply-sticky { bottom: .5rem; position: sticky; top: auto; z-index: 10; }
	.job-latest-ten ol { column-count: 1; }
	.job-breadcrumbs a, .job-latest-ten a, .site-footer a { align-items: center; display: inline-flex; min-height: 44px; padding-bottom: .55rem; padding-top: .55rem; }
	.job-prev-next { grid-template-columns: 1fr; }
	.job-prev-next div:last-child { text-align: left; }
	.job-table th, .job-table td { font-size: .9rem; padding: .6rem; }
}

@media (max-width: 600px) {
	.job-hero { border-radius: 10px; padding: 1.35rem 1rem; }
	.job-ad--top::before { height: 118px; }
	.job-ad--top ins.adsbygoogle, .job-ad--top .job-ad-placeholder { min-height: 100px; }
}