/* ==========================================================================
   ZAMSUT — public-facing pages (home, login, applicant registration).
   Built on Bootstrap 5, independent of the legacy Gentelella/Bootstrap 3
   template used by the authenticated app (see zamsut-theme.css for that).
   Palette matches zamsut-website/wp-content/themes/zamsut/assets/css/main.css
   ========================================================================== */

:root {
	--navy-950:#071a33; --navy-900:#0b2545; --navy-800:#123c69; --navy-700:#1a4f86;
	--teal-700:#0d6e5f; --teal-600:#12886f; --teal-500:#17a589;
	--gold-600:#b8860f; --gold-500:#c9971c; --gold-400:#e0b13a;
	--bg-body:#f6f8fb; --bg-white:#ffffff; --bg-alt:#eef2f7;
	--text-dark:#1c2530; --text-body:#3b4552; --text-muted:#6b7686; --border-light:#e3e8f0;
	--shadow-sm: 0 2px 10px rgba(11,37,69,.07);
	--shadow-md: 0 10px 30px rgba(11,37,69,.12);
	--shadow-lg: 0 24px 60px rgba(7,26,51,.22);
	--radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px;
}

html, body { overflow-x: hidden; max-width: 100%; }

body.zamsut-public {
	background: var(--bg-body);
	color: var(--text-body);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
}
.zamsut-public h1, .zamsut-public h2, .zamsut-public h3,
.zamsut-public h4, .zamsut-public h5, .zamsut-public h6 {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--navy-900); font-weight: 700;
}
.zamsut-public a { color: var(--teal-700); text-decoration: none; }
.zamsut-public a:hover { color: var(--navy-800); }

/* ---------------------------------------------------------------------- */
/* Navbar                                                                  */
/* ---------------------------------------------------------------------- */
.zamsut-navbar {
	background: var(--bg-white);
	box-shadow: var(--shadow-sm);
	padding: 14px 0;
	position: sticky; top: 0; z-index: 1030;
}
.zamsut-navbar .navbar-brand-block { display: flex; align-items: center; gap: 12px; min-width: 0; }
.zamsut-navbar img.crest { height: 48px; width: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.zamsut-navbar .brand-text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; color: var(--navy-900); font-size: 17px; line-height: 1.25; }
.zamsut-navbar .brand-text small { display: block; font-family: 'Inter', sans-serif; font-weight: 500; color: var(--text-muted); font-size: 12px; letter-spacing: .2px; }
.zamsut-navbar .navbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

.btn-zamsut-primary {
	background: var(--navy-800); border: 1px solid var(--navy-900); color: #fff !important;
	font-weight: 600; padding: 9px 22px; border-radius: 999px; transition: all .15s ease;
}
.btn-zamsut-primary:hover { background: var(--navy-900); color: #fff !important; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-zamsut-gold {
	background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); border: none; color: #fff !important;
	font-weight: 600; padding: 9px 22px; border-radius: 999px; transition: all .15s ease;
}
.btn-zamsut-gold:hover { color: #fff !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(184,134,15,.35); }
.btn-zamsut-outline {
	background: transparent; border: 1.5px solid rgba(255,255,255,.7); color: #fff !important;
	font-weight: 600; padding: 9px 22px; border-radius: 999px; transition: all .15s ease;
}
.btn-zamsut-outline:hover { background: rgba(255,255,255,.12); color: #fff !important; }

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */
.zamsut-hero {
	background: linear-gradient(155deg, var(--navy-950) 0%, var(--navy-800) 55%, var(--teal-700) 145%);
	color: #fff;
	padding: 100px 0 120px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.zamsut-hero::before {
	content: ''; position: absolute; inset: 0;
	background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.06) 0, transparent 35%),
		radial-gradient(circle at 85% 75%, rgba(224,177,58,.10) 0, transparent 40%);
	pointer-events: none;
}
.zamsut-hero .inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }
.badge-motto {
	display: inline-block; background: rgba(224,177,58,.16); color: var(--gold-400);
	border: 1px solid rgba(224,177,58,.45); padding: 7px 20px; border-radius: 999px;
	font-size: 13px; font-weight: 600; letter-spacing: 1px; margin-bottom: 24px;
}
.zamsut-hero h1 {
	color: #fff; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.2; margin-bottom: 18px;
}
.zamsut-hero p.lead {
	color: rgba(255,255,255,.86); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.7;
	max-width: 640px; margin: 0 auto 36px;
}
.zamsut-hero .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.zamsut-hero .hero-actions .btn { padding: 13px 30px; font-size: 15px; }

/* ---------------------------------------------------------------------- */
/* Careers banner                                                          */
/* ---------------------------------------------------------------------- */
.careers-banner {
	background: linear-gradient(120deg, var(--gold-500), var(--gold-400));
	color: #fff; padding: 26px 0;
}
.careers-banner h3 { color: #fff; margin: 0 0 4px; font-size: 20px; }
.careers-banner p { margin: 0; color: rgba(255,255,255,.92); }

/* ---------------------------------------------------------------------- */
/* Sections / cards                                                        */
/* ---------------------------------------------------------------------- */
section.info { padding: 72px 0; }
section.info.alt { background: var(--bg-white); }
.info h2 { text-align: center; margin-bottom: 12px; font-size: clamp(22px, 3vw, 30px); }
.info p.sub { text-align: center; color: var(--text-muted); max-width: 620px; margin: 0 auto 44px; font-size: 15.5px; }

.zamsut-card {
	background: var(--bg-white); border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm); border: 1px solid var(--border-light);
	transition: transform .18s ease, box-shadow .18s ease;
}
.zamsut-card.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.vacancy-card { padding: 26px; height: 100%; display: flex; flex-direction: column; }
.vacancy-card h4 { font-size: 18px; margin-bottom: 6px; }
.vacancy-card p.dept { color: var(--teal-700); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 10px; }
.vacancy-card p.desc { color: var(--text-muted); font-size: 14px; flex-grow: 1; }

.feature-card { padding: 28px 22px; text-align: center; height: 100%; }
.feature-card .icon-wrap {
	width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--bg-alt); color: var(--teal-600); font-size: 22px; margin: 0 auto 16px;
}
.feature-card h5 { font-size: 16px; margin-bottom: 8px; }
.feature-card p { color: var(--text-muted); font-size: 13.5px; margin: 0; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */
.zamsut-footer { background: var(--navy-950); color: rgba(255,255,255,.72); }
.zamsut-footer .footer-top { padding: 56px 0 32px; }
.zamsut-footer h6 { color: #fff; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: .4px; text-transform: uppercase; margin-bottom: 18px; }
.zamsut-footer p, .zamsut-footer li { font-size: 14px; color: rgba(255,255,255,.68); line-height: 1.9; }
.zamsut-footer a { color: rgba(255,255,255,.68); }
.zamsut-footer a:hover { color: var(--gold-400); }
.zamsut-footer ul { list-style: none; padding: 0; margin: 0; }
.zamsut-footer .footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.zamsut-footer .footer-brand img { height: 42px; width: 42px; border-radius: 50%; }
.zamsut-footer .footer-brand span { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 700; color: #fff; font-size: 15px; }
.zamsut-footer .footer-bottom {
	border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; text-align: center;
	font-size: 13px; color: rgba(255,255,255,.55);
}

/* ---------------------------------------------------------------------- */
/* Auth screens (login / applicant registration) — split panel layout     */
/* ---------------------------------------------------------------------- */
.auth-shell { min-height: 100vh; display: flex; align-items: stretch; }
.auth-brand-panel {
	flex: 0 0 42%; max-width: 42%;
	background: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-800) 60%, var(--teal-700) 140%);
	color: #fff; display: flex; flex-direction: column; justify-content: center;
	padding: 60px 56px; position: relative; overflow: hidden;
}
.auth-brand-panel::before {
	content: ''; position: absolute; inset: 0;
	background-image: radial-gradient(circle at 20% 15%, rgba(255,255,255,.07) 0, transparent 35%),
		radial-gradient(circle at 90% 85%, rgba(224,177,58,.12) 0, transparent 40%);
}
.auth-brand-panel .content { position: relative; z-index: 1; }
.auth-brand-panel img.crest { height: 92px; width: 92px; border-radius: 50%; margin-bottom: 26px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.auth-brand-panel h2 { color: #fff; font-size: 26px; line-height: 1.3; margin-bottom: 12px; }
.auth-brand-panel p { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.7; margin-bottom: 0; }
.auth-brand-panel .motto { margin-top: 32px; font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-400); font-weight: 600; }

.auth-form-panel { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; background: var(--bg-body); padding: 48px 24px; }
.auth-form-card { width: 100%; max-width: 480px; }
.auth-form-card.wide { max-width: 640px; }
.auth-form-card h1 { font-size: 26px; margin-bottom: 6px; }
.auth-form-card p.subtitle { color: var(--text-muted); margin-bottom: 30px; font-size: 14.5px; }

.zamsut-input {
	border: 1.5px solid var(--border-light); border-radius: var(--radius-sm);
	padding: 12px 16px; font-size: 15px; background: var(--bg-white);
}
.zamsut-input:focus {
	border-color: var(--teal-600); box-shadow: 0 0 0 .18rem rgba(23,165,137,.15); background: #fff;
}
.zamsut-label { font-weight: 600; font-size: 13.5px; color: var(--navy-900); margin-bottom: 6px; }

.btn-zamsut-submit {
	background: linear-gradient(135deg, var(--gold-400), var(--gold-600)); border: none; color: #fff;
	font-weight: 700; padding: 13px 0; border-radius: var(--radius-sm); width: 100%;
	transition: all .15s ease; letter-spacing: .3px;
}
.btn-zamsut-submit:hover { color: #fff; box-shadow: 0 10px 24px rgba(184,134,15,.35); transform: translateY(-1px); }

.auth-alert { border-radius: var(--radius-sm); font-size: 14px; padding: 12px 16px; }

@media (max-width: 991.98px) {
	.auth-shell { flex-direction: column; }
	.auth-brand-panel { flex: 0 0 auto; max-width: 100%; padding: 40px 32px; text-align: center; }
	.auth-brand-panel .content { display: flex; flex-direction: column; align-items: center; }
	.auth-form-panel { padding: 40px 20px; }
}

@media (max-width: 575.98px) {
	.zamsut-hero { padding: 70px 0 90px; }
	.zamsut-navbar .brand-text { font-size: 14px; }
	.zamsut-navbar img.crest { height: 38px; width: 38px; }
}