/*
Theme Name:        Tourism Fund Staff
Theme URI:         https://staff.tourismfund.go.ke/
Author:            Tourism Fund ICT
Description:       Official theme for staff.tourismfund.go.ke — the Tourism Fund staff identity verification portal. Matches the approved staff ID card design (green STAFF ID band, official logo lock-up, lime/green stripes) and renders the Tourism Fund Staff ID & Verification plugin on the home page.
Version:           1.0.0
Requires at least: 6.2
Tested up to:      6.8
Requires PHP:      7.4
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       tourismfund-staff
*/

/* ---------- Fonts (self-hosted Roboto, Apache-2.0) ---------- */
@font-face{font-family:"Roboto";src:url("assets/fonts/roboto-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("assets/fonts/roboto-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Roboto";src:url("assets/fonts/roboto-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("assets/fonts/roboto-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto";src:url("assets/fonts/roboto-black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

/* ---------- Tokens (sampled from the approved card) ---------- */
:root{
	--tf-green:#088149;
	--tf-green-dark:#027943;
	--tf-lime:#7AC131;
	--tf-lime-light:#A6D864;
	--tf-rule:#C6D9B4;
	--tf-ink:#0B0F0D;
	--tf-grey:#58605C;
	--tf-bg:#F3F6F2;
	--tf-red:#B3261E;
	--tf-amber:#A15C00;
	--tf-slate:#59626B;
	--tf-band:72px;
	--tf-radius:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tf-bg);color:var(--tf-ink);font:400 16px/1.55 "Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--tf-green);text-underline-offset:2px}
a:hover{color:var(--tf-green-dark)}
:focus-visible{outline:3px solid var(--tf-lime);outline-offset:2px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:1000;width:auto;height:auto;clip:auto;background:#fff;padding:10px 14px;border-radius:6px;box-shadow:0 2px 8px rgba(0,0,0,.2)}

/* ---------- STAFF ID band (left, as on the card) ---------- */
.tfs-band{position:fixed;inset:0 auto 0 0;width:var(--tf-band);background:var(--tf-green-dark);z-index:20;overflow:hidden}
body{background:linear-gradient(90deg,var(--tf-green-dark) 0 var(--tf-band),var(--tf-bg) var(--tf-band))}
.tfs-band-text{position:absolute;left:50%;top:150px;transform:translateX(-50%) rotate(-90deg);transform-origin:center;white-space:nowrap;color:#fff;font-weight:900;font-size:30px;letter-spacing:.06em;line-height:1}
.tfs-band svg{position:absolute;left:0;bottom:70px;width:100%;height:auto}
.tfs-site{margin-left:var(--tf-band);min-height:100vh;display:flex;flex-direction:column;background:#fff}

/* ---------- Header ---------- */
.tfs-header{background:#fff;border-bottom:3px solid var(--tf-green)}
.tfs-header-inner{max-width:1080px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:24px}
.tfs-logo{display:block;line-height:0}
.tfs-logo img{height:68px;width:auto}
.tfs-header-tag{margin-left:auto;text-align:right;font-weight:700;color:var(--tf-green);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
.tfs-header-tag small{display:block;font-weight:500;color:var(--tf-grey);text-transform:none;letter-spacing:0;font-size:12.5px}
.tfs-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.tfs-nav a{text-decoration:none;font-weight:500;color:var(--tf-ink)}
.tfs-nav a:hover{color:var(--tf-green)}

/* ---------- Main ---------- */
.tfs-main{flex:1;width:100%;max-width:880px;margin:0 auto;padding:34px 28px 48px}
.tfs-content h1,.tfs-content h2,.tfs-content h3{line-height:1.25}
.tfs-page-title{font-weight:900;text-transform:uppercase;font-size:28px;letter-spacing:.01em;margin:0 0 6px;padding-bottom:12px;border-bottom:3px solid var(--tf-green)}

/* ---------- Verification ---------- */
.tf-verify .tf-title{font-weight:900;text-transform:uppercase;font-size:clamp(20px,3.2vw,28px);letter-spacing:.01em;margin:0 0 4px}
.tfs-title-rule{height:3px;background:var(--tf-green);margin:0 0 22px;border:0}
.tfs-eyebrow{color:var(--tf-green);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:13px;margin:0 0 6px}

.tf-status{display:flex;gap:16px;align-items:center;border-radius:var(--tf-radius);padding:20px 22px;color:#fff;margin:0 0 20px;box-shadow:0 6px 18px rgba(2,121,67,.12)}
.tf-status p{margin:.3em 0 0;font-size:15.5px;opacity:.96}
.tf-status-icon{flex:0 0 58px;height:58px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900}
.tf-status-label{font-weight:900;font-size:clamp(22px,4vw,30px);letter-spacing:.02em;line-height:1.1}
.tf-status-green{background:var(--tf-green)}
.tf-status-amber{background:var(--tf-amber)}
.tf-status-red{background:var(--tf-red)}
.tf-status-grey{background:var(--tf-slate)}

/* ID-card replica */
.tfs-idcard{position:relative;display:grid;grid-template-columns:200px 1fr;gap:28px;background:#fff;border:1px solid #DDE5DA;border-radius:18px;padding:26px 28px 30px 52px;margin:0 0 18px;box-shadow:0 10px 30px rgba(11,15,13,.07);overflow:hidden}
.tfs-idcard::before{content:"";position:absolute;inset:0 auto 0 0;width:22px;background:var(--tf-green-dark)}
.tfs-idcard::after{content:"";position:absolute;left:0;bottom:26px;width:22px;height:90px;background:linear-gradient(160deg,transparent 0 22%,var(--tf-lime-light) 22% 40%,transparent 40% 55%,var(--tf-lime) 55% 73%,transparent 73%)}
.tfs-photo{width:200px;aspect-ratio:394/557;border:4px solid var(--tf-green);border-radius:16px;overflow:hidden;background:#F1F4F0}
.tfs-photo img{display:block;width:100%;height:100%;object-fit:cover}
.tfs-name{font-weight:900;text-transform:uppercase;font-size:clamp(20px,3vw,27px);line-height:1.15;margin:4px 0 8px;padding-bottom:9px;border-bottom:3px solid var(--tf-green);word-break:break-word}
.tfs-designation{color:var(--tf-green);font-weight:700;font-size:clamp(17px,2.4vw,21px);margin:0 0 12px}
.tfs-rows{margin:0}
.tfs-row{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:10px 0;border-bottom:1.5px solid var(--tf-rule)}
.tfs-row:last-child{border-bottom:0}
.tfs-row dt{color:var(--tf-green);font-weight:700}
.tfs-row dd{margin:0;font-weight:700;letter-spacing:-.005em}
.tfs-mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tf-pill{display:inline-block;padding:3px 12px;border-radius:999px;color:#fff;font-size:13px;font-weight:700;letter-spacing:.02em}
.tf-pill-green{background:var(--tf-green)}.tf-pill-amber{background:var(--tf-amber)}.tf-pill-red{background:var(--tf-red)}.tf-pill-grey{background:var(--tf-slate)}
.tfs-idcard-min{grid-template-columns:1fr}

.tf-statement{background:#fff;border:1px solid #DDE5DA;border-left:5px solid var(--tf-green);padding:14px 16px;margin:0 0 14px;border-radius:0 10px 10px 0}
.tf-warning{background:#FDECEA;border:1px solid #F1B5AF;color:#7A1A13;padding:14px 16px;border-radius:10px;margin:0 0 14px}
.tf-hint{color:#3E4844;margin:0 0 14px}
.tf-checked{font-size:14px;color:var(--tf-grey);margin:6px 0 22px}

.tfs-steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.tfs-steps li{counter-increment:s;position:relative;background:#fff;border:1px solid #DDE5DA;border-radius:var(--tf-radius);padding:18px 18px 18px 64px;min-height:84px}
.tfs-steps li::before{content:counter(s);position:absolute;left:18px;top:18px;width:32px;height:32px;border-radius:50%;background:var(--tf-green);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center}
.tfs-steps strong{display:block;margin-bottom:2px}
.tfs-lead{font-size:17px;color:#2E3632;margin:0 0 22px;max-width:62ch}
.tfs-note{margin-top:22px;padding:14px 16px;background:#EEF6E6;border-radius:10px;color:#24402F}

.tf-notice{background:#FFF4E5;border:1px solid #F0C98B;padding:12px 14px;border-radius:10px;margin:0 0 16px}
.tf-notice-ok{background:#E8F5EC;border-color:#9ED0AE}

.tf-report{background:#fff;border:1px solid #DDE5DA;border-radius:var(--tf-radius);padding:14px 18px}
.tf-report summary{cursor:pointer;font-weight:700;color:#8E1C15}
.tf-report form{display:grid;gap:12px;margin-top:14px}
.tf-report label{display:block;font-size:15px;font-weight:700}
.tf-report input,.tf-report textarea{display:block;margin-top:5px;font:inherit;font-weight:400;padding:11px 12px;border:1.5px solid #C3CCC6;border-radius:8px;width:100%;background:#fff}
.tf-report input:focus,.tf-report textarea:focus{border-color:var(--tf-green);outline:none;box-shadow:0 0 0 3px rgba(122,193,49,.35)}
.tf-report button,.tfs-button{font:inherit;font-weight:700;background:var(--tf-green);color:#fff;border:0;border-radius:8px;padding:13px 18px;cursor:pointer;text-decoration:none;display:inline-block}
.tf-report button:hover,.tfs-button:hover{background:var(--tf-green-dark);color:#fff}
.tf-report .req{color:var(--tf-red)}
.tf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Footer (card stripes + green bar) ---------- */
.tfs-stripes{display:block;width:100%;height:64px;margin-top:auto}
.tfs-footer{background:var(--tf-green-dark);color:#E3F0E6;font-size:14px}
.tfs-footer-inner{max-width:1080px;margin:0 auto;padding:22px 28px 26px;display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.tfs-footer a{color:#fff}
.tfs-footer h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--tf-lime);margin:0 0 6px}
.tfs-footer p{margin:0 0 4px}
.tfs-footer-meta{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.18);padding-top:12px;font-size:12.5px;opacity:.8}

/* ---------- Generic content ---------- */
.tfs-content{background:#fff}
.tfs-content p,.tfs-content li{max-width:70ch}
.tfs-404{text-align:center;padding:30px 0}
.tfs-404 .tfs-big{font-weight:900;font-size:84px;color:var(--tf-green);line-height:1;margin:0}

/* ---------- Responsive ---------- */
@media (max-width:900px){
	:root{--tf-band:0px}
	.tfs-band{display:none}
	.tfs-header{border-top:8px solid var(--tf-green-dark);box-shadow:inset 0 3px 0 0 var(--tf-lime)}
	.tfs-header-inner{padding:12px 18px}
	.tfs-logo img{height:auto;width:min(100%,380px)}
	.tfs-header-tag{display:none}
	.tfs-main{padding:24px 16px 36px}
	.tfs-idcard{grid-template-columns:1fr;justify-items:center;padding:22px 18px 24px 40px;gap:18px}
	.tfs-idcard::before,.tfs-idcard::after{width:16px}
	.tfs-photo{width:170px}
	.tfs-details{width:100%}
	.tfs-row{grid-template-columns:108px 1fr;gap:10px}
	.tfs-steps{grid-template-columns:1fr}
	.tfs-footer-inner{grid-template-columns:1fr;padding:18px 18px 22px}
	.tfs-stripes{height:40px}
}
@media (max-width:420px){
	.tf-status{padding:16px;gap:12px}
	.tf-status-icon{flex-basis:46px;height:46px;font-size:24px}
	.tfs-row{grid-template-columns:96px 1fr;font-size:15px}
}
@media print{
	.tfs-band,.tfs-stripes,.tf-report{display:none}
	.tfs-site{margin:0}
}