/*
 * Djobsinfo Core — Component Styles
 * Header, navigation, cards, single layouts, footer, forms. Token-driven,
 * framework-free. Built by Megaone — geeaig.com
 */

/* ---------- Layout primitives ---------- */
.djc-section { padding-block: var(--djc-space-12); }
.djc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--djc-space-8);
}
@media (min-width: 640px)  { .djc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .djc-grid { grid-template-columns: repeat(3, 1fr); } }

.djc-muted { color: var(--djc-text-muted); }
.djc-danger-text { color: var(--djc-primary); }
.djc-skiplink { position: absolute; left: 8px; top: 8px; }
.djc-skiplink:focus { clip: auto; width: auto; height: auto; background: #fff; padding: 8px 12px; border-radius: var(--djc-radius); z-index: 1000; }

/* ---------- Header ---------- */
.djc-header { background: var(--djc-surface); box-shadow: var(--djc-shadow-md); position: relative; }
.djc-header__accent { display: block; height: 4px; background: var(--djc-primary); }
.djc-header__bar { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: var(--djc-space-6); }

.djc-brand__text { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--djc-text-primary); text-decoration: none; }
.djc-brand__text span { color: var(--djc-primary); }
.djc-brand__text:hover { text-decoration: none; }
.djc-brand__text--dark { color: #fff; }
.djc-brand__text--dark span { color: var(--djc-primary); }

.djc-nav { display: none; }
@media (min-width: 1024px) { .djc-nav { display: block; } .djc-nav-toggle { display: none; } }
.djc-nav__list { display: flex; align-items: center; gap: var(--djc-space-2); list-style: none; margin: 0; padding: 0; }
.djc-nav__list a { display: inline-flex; align-items: center; padding: 0.5rem 0.85rem; border-radius: var(--djc-radius); color: var(--djc-text-secondary); font-weight: 500; }
.djc-nav__list a:hover { color: var(--djc-primary); background: var(--djc-primary-soft); text-decoration: none; }
.djc-nav__list .current-menu-item > a { color: var(--djc-primary); font-weight: 700; background: var(--djc-primary-soft); }

.djc-nav-toggle { display: inline-flex; padding: 0.5rem; border: 1px solid var(--djc-border); border-radius: var(--djc-radius); background: var(--djc-surface); cursor: pointer; }
.djc-nav-toggle svg { width: 24px; height: 24px; }

.djc-mobile-nav { border-top: 1px solid var(--djc-border); background: var(--djc-surface); }
.djc-mobile-nav__list { list-style: none; margin: 0; padding: var(--djc-space-2) 0; }
.djc-mobile-nav__list a { display: block; padding: 0.75rem var(--djc-space-4); color: var(--djc-text-secondary); font-weight: 500; border-bottom: 1px solid var(--djc-border); }
.djc-mobile-nav__list a:hover { color: var(--djc-primary); text-decoration: none; }

/* ---------- Eyebrows / badges ---------- */
.djc-eyebrow { font-size: var(--djc-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--djc-text-muted); margin: 0 0 var(--djc-space-2); }
.djc-eyebrow--red { color: var(--djc-primary); }

/* ---------- Meta rows ---------- */
.djc-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--djc-space-3); font-size: var(--djc-small); color: var(--djc-text-secondary); }
.djc-meta--divided { margin-top: var(--djc-space-4); padding-top: var(--djc-space-4); border-top: 1px solid var(--djc-border); }
.djc-meta li { display: flex; align-items: center; gap: var(--djc-space-3); }
.djc-meta__ic { display: inline-flex; width: 1.25rem; justify-content: center; color: var(--djc-text-muted); font-weight: 700; }

/* ---------- Card scaffolding ---------- */
.djc-card { display: block; text-decoration: none; color: inherit; height: 100%; }
.djc-card:hover { text-decoration: none; }
.djc-card__foot { padding: var(--djc-space-6); background: #fafafa; border-top: 1px solid var(--djc-border); color: var(--djc-primary); font-weight: 700; text-align: center; margin-top: auto; }

/* Job card */
.djc-jobcard__inner { display: flex; flex-direction: column; height: 100%; }
.djc-jobcard__head { display: flex; align-items: center; gap: var(--djc-space-4); padding: var(--djc-space-6); border-bottom: 1px solid var(--djc-border); }
.djc-logo { width: 56px; height: 56px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #f3f4f6; border: 1px solid var(--djc-border); border-radius: var(--djc-radius); overflow: hidden; }
.djc-logo svg { width: 28px; height: 28px; color: var(--djc-text-muted); }
.djc-logo img { width: 100%; height: 100%; object-fit: contain; }
.djc-jobcard__org { display: flex; flex-direction: column; overflow: hidden; }
.djc-jobcard__org strong { color: var(--djc-text-primary); }
.djc-jobcard__body { padding: var(--djc-space-6); flex-grow: 1; }
.djc-jobcard__title { font-size: var(--djc-h4); margin-bottom: var(--djc-space-4); }
.djc-card:hover .djc-jobcard__title { color: var(--djc-primary); }

/* Scholarship + post cards */
.djc-schcard__inner, .djc-postcard__inner { display: flex; flex-direction: column; height: 100%; }
.djc-schcard__media, .djc-postcard__media { aspect-ratio: 16 / 9; overflow: hidden; }
.djc-schcard__media img, .djc-postcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--djc-transition); }
.djc-card:hover .djc-schcard__media img, .djc-card:hover .djc-postcard__media img { transform: scale(1.05); }
.djc-schcard__body, .djc-postcard__body { padding: var(--djc-space-6); flex-grow: 1; display: flex; flex-direction: column; }
.djc-schcard__title, .djc-postcard__title { font-size: var(--djc-h4); margin-bottom: var(--djc-space-3); }
.djc-card:hover .djc-schcard__title, .djc-card:hover .djc-postcard__title { color: var(--djc-primary); }
.djc-postcard__excerpt { color: var(--djc-text-secondary); font-size: var(--djc-small); flex-grow: 1; }
.djc-postcard__foot { display: flex; justify-content: space-between; align-items: center; margin-top: var(--djc-space-6); padding-top: var(--djc-space-4); border-top: 1px solid var(--djc-border); font-size: var(--djc-xs); color: var(--djc-text-muted); }
.djc-byline { font-weight: 600; }

/* ---------- Archive / empty ---------- */
.djc-archive-head { text-align: center; margin-bottom: var(--djc-space-12); }
.djc-archive-head h1 { letter-spacing: -0.02em; }
.djc-archive-head__desc { max-width: 46rem; margin: var(--djc-space-4) auto 0; color: var(--djc-text-secondary); }
.djc-empty { text-align: center; padding-block: var(--djc-space-16); }
.djc-empty h1 { font-size: 4rem; color: var(--djc-primary); }
.djc-empty p { color: var(--djc-text-muted); margin-bottom: var(--djc-space-6); }

/* ---------- Single layouts ---------- */
.djc-single__grid { display: grid; grid-template-columns: 1fr; gap: var(--djc-space-12); }
@media (min-width: 1024px) { .djc-single__grid { grid-template-columns: 2fr 1fr; align-items: start; } }
.djc-single__article { max-width: 46rem; margin-inline: auto; }
.djc-breadcrumb { font-size: var(--djc-small); color: var(--djc-text-muted); margin-bottom: var(--djc-space-4); }
.djc-single__head { margin-bottom: var(--djc-space-8); }
.djc-single__head h1 { letter-spacing: -0.02em; line-height: 1.15; }
.djc-single__org { font-size: var(--djc-h5); color: var(--djc-text-secondary); margin: var(--djc-space-2) 0 0; }
.djc-single__meta { color: var(--djc-text-muted); font-size: var(--djc-small); }
.djc-single__media { margin: 0 0 var(--djc-space-8); border-radius: var(--djc-radius-lg); overflow: hidden; border: 1px solid var(--djc-border); }
.djc-single__media img { width: 100%; height: auto; display: block; }

.djc-factgrid { list-style: none; margin: 0 0 var(--djc-space-8); padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--djc-space-4); }
.djc-factgrid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .djc-factgrid--4 { grid-template-columns: repeat(4, 1fr); } }
.djc-factgrid li { background: #fafafa; border: 1px solid var(--djc-border); border-radius: var(--djc-radius); padding: var(--djc-space-4); text-align: center; }
.djc-factgrid span { display: block; font-size: var(--djc-xs); color: var(--djc-text-muted); margin-bottom: 2px; }
.djc-factgrid strong { color: var(--djc-text-primary); }

.djc-single__aside { position: sticky; top: var(--djc-space-8); }
.djc-applybox { padding: var(--djc-space-6); text-align: center; }
.djc-applybox__btn { width: 100%; font-size: var(--djc-body); padding-block: 0.9rem; }
.djc-applybox__closed { background: #f3f4f6; color: var(--djc-text-muted); font-weight: 700; padding: 0.9rem; border-radius: var(--djc-radius); margin: 0; }
.djc-applybox__note { color: var(--djc-text-secondary); margin: 0; }

/* ---------- CTA + footer ---------- */
.djc-cta { margin-block: var(--djc-space-16); }
.djc-cta__box { background: #f8fafc; border: 1px solid var(--djc-border); border-radius: var(--djc-radius-xl); padding: var(--djc-space-8); text-align: center; box-shadow: var(--djc-shadow-md); }
.djc-cta__box h3 { color: var(--djc-text-primary); }
.djc-cta__box p { color: var(--djc-text-secondary); max-width: 42rem; margin-inline: auto; }

.djc-footer { background: #0b1220; color: #cbd5e1; margin-top: var(--djc-space-16); }
.djc-footer__accent { display: block; height: 4px; background: var(--djc-primary); }
.djc-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--djc-space-8); padding-block: var(--djc-space-12); }
@media (min-width: 768px)  { .djc-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .djc-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.djc-footer__col h4 { color: #fff; font-size: var(--djc-small); margin-bottom: var(--djc-space-4); }
.djc-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--djc-space-2); }
.djc-footer__menu a { color: #cbd5e1; font-weight: 400; font-size: var(--djc-small); }
.djc-footer__menu a:hover { color: #fff; text-decoration: none; }
.djc-footer .djc-muted { color: #94a3b8; }
.djc-footer__bar { border-top: 1px solid rgba(255,255,255,0.08); }
.djc-footer__barinner { display: flex; flex-direction: column; gap: var(--djc-space-2); align-items: center; justify-content: space-between; padding-block: var(--djc-space-6); font-size: var(--djc-xs); color: #94a3b8; }
@media (min-width: 768px) { .djc-footer__barinner { flex-direction: row; } }
.djc-footer__barinner p { margin: 0; }
.djc-footer .djc-signature a { color: #cbd5e1; }
.djc-footer .djc-signature a:hover { color: var(--djc-primary); }

/* ---------- Search form ---------- */
.djc-searchform { display: flex; gap: var(--djc-space-2); }
.djc-searchform input[type="search"] { flex: 1; padding: 0.7rem 0.9rem; border: 1px solid var(--djc-border); border-radius: var(--djc-radius); font: inherit; }
.djc-searchform input[type="search"]:focus { outline: none; border-color: var(--djc-primary); box-shadow: 0 0 0 3px var(--djc-focus-ring); }

/* =====================================================================
   Phase 6 — header fix, verified jobs, quick apply
   ===================================================================== */

/* Robust, unambiguous header breakpoint (fixes lone toggle on desktop) */
@media (min-width: 992px) {
	.djc-nav { display: block !important; }
	.djc-nav-toggle { display: none !important; }
	.djc-header__actions { display: flex; }
}
@media (max-width: 991.98px) {
	.djc-nav { display: none !important; }
	.djc-nav-toggle { display: inline-flex !important; }
	.djc-header__actions { display: none; }
}
.djc-header__actions { align-items: center; gap: 0.5rem; }
.djc-header__actions .djc-btn { padding: 0.5rem 0.9rem; }

/* Verified badge */
.djc-verified {
	display: inline-flex; align-items: center; gap: 0.25rem;
	font-size: var(--djc-xs); font-weight: 700; color: var(--djc-success);
	background: #ecfdf5; border: 1px solid #a7f3d0;
	padding: 0.15rem 0.5rem; border-radius: var(--djc-radius-full);
	margin-left: auto; white-space: nowrap;
}
.djc-verified svg { width: 14px; height: 14px; }
.djc-verified--inline { margin-left: 0.5rem; vertical-align: middle; }
.djc-jobcard.is-verified { border-color: #a7f3d0; }

/* Stretched link: makes the whole card clickable without nesting anchors */
.djc-jobcard { position: relative; }
.djc-stretch::after {
	content: ""; position: absolute; inset: 0; z-index: 0;
}
.djc-jobcard__title a { color: inherit; text-decoration: none; }
.djc-card:hover .djc-jobcard__title { color: var(--djc-primary); }

/* Job card footer with quick apply */
.djc-jobcard__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
	text-align: left;
}
.djc-jobcard__view { color: var(--djc-primary); font-weight: 700; }
.djc-quickapply { position: relative; z-index: 1; padding: 0.5rem 0.9rem; font-size: var(--djc-small); }
.djc-quickapply.is-applied { background: var(--djc-success); box-shadow: none; cursor: default; }

/* ---------- Page hero + body (content pages: About, legal, etc.) ---------- */
.djc-pagehero {
	position: relative;
	background: linear-gradient(180deg, #fff 0%, var(--djc-background) 100%);
	border-bottom: 1px solid var(--djc-border);
	padding: var(--djc-space-12) 0 var(--djc-space-8);
	text-align: center;
}
.djc-pagehero__accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--djc-primary); }
.djc-pagehero .djc-breadcrumb { justify-content: center; display: flex; gap: 0.4rem; align-items: center; margin-bottom: var(--djc-space-4); }
.djc-pagehero h1 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -0.02em; margin: 0; }
.djc-pagehero__sub { max-width: 44rem; margin: var(--djc-space-4) auto 0; color: var(--djc-text-secondary); font-size: var(--djc-h5); }

.djc-pagebody { max-width: 46rem; margin-inline: auto; }
.djc-pagebody__media { margin: 0 0 var(--djc-space-8); border-radius: var(--djc-radius-lg); overflow: hidden; border: 1px solid var(--djc-border); box-shadow: var(--djc-shadow-md); }
.djc-pagebody__media img { width: 100%; height: auto; display: block; }

/* Footer legal links */
.djc-footer__legal { display: flex; gap: var(--djc-space-4); flex-wrap: wrap; justify-content: center; }
.djc-footer__legal a { color: #94a3b8; font-size: var(--djc-xs); }
.djc-footer__legal a:hover { color: #fff; }