/*
Theme Name: HireCabal (WTV Magazine)
Theme URI: https://hire.educabal.com.ng/
Description: Clean editorial magazine theme for a visa-sponsored jobs site (USA, UK, Canada, EU). Top bar, sticky category nav, hero + latest grid, per-category sections, "Most read" sidebar, article template with reading time, and a four-column footer.
Version: 1.2.0
Author: Temzyola
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: wtv
*/

:root{
  --site-bg:#faf9f7;
  --site-surface:#fff;
  --site-text:#1c1917;
  --site-muted:#78716c;
  --site-soft:#57534e;
  --site-border:#e7e5e4;
  --site-primary:#16a34a;
  --site-primary-hover:#15803d;
  --site-dark:#14532d;
  --site-radius:10px;
  --site-radius-sm:8px;
  --site-shadow-xs:0 1px 2px #1c19170d,0 1px 3px #1c19170f;
  --site-shadow-sm:0 2px 4px #1c19170d,0 4px 10px #1c19170d;
  --site-shadow-md:0 8px 24px #1c191717,0 2px 6px #1c19170d;
  --font-sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-display:Sora,system-ui,sans-serif;
  --container:1152px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--site-bg);color:var(--site-text);font-family:var(--font-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--site-primary)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.25;margin:0;color:var(--site-text)}
.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:8px 12px;border-radius:6px;box-shadow:var(--site-shadow-md)}
.container{max-width:var(--container);margin:0 auto;padding:0 16px}
.site-main{flex:1;padding:24px 0 0}

/* ---------- Top bar ---------- */
.site-topbar{background:var(--site-dark);color:#ecfdf5;font-size:12px}
.site-topbar .container{display:flex;justify-content:space-between;gap:16px;padding-top:6px;padding-bottom:6px}
.site-topbar span:last-child{opacity:.9}

/* ---------- Header ---------- */
.site-masthead{background:var(--site-surface);border-bottom:1px solid var(--site-border)}
.site-masthead-inner{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:16px}
.site-brand{display:flex;align-items:center;gap:10px;color:var(--site-primary)}
.site-brand:hover{color:var(--site-primary)}
.site-brand svg{width:36px;height:36px;flex:none}
.site-brand img{max-height:44px;width:auto}
.site-title{font-family:var(--font-display);font-weight:700;font-size:24px;letter-spacing:-.02em;color:var(--site-text)}
.nav-toggle{display:none;background:none;border:1px solid var(--site-border);border-radius:8px;padding:8px;cursor:pointer;color:var(--site-text)}
.nav-toggle svg{width:22px;height:22px;display:block}

/* ---------- Nav ---------- */
.site-nav-row{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--site-border)}
.admin-bar .site-nav-row{top:32px}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;overflow-x:auto;scrollbar-width:none}
.site-nav ul::-webkit-scrollbar{display:none}
.site-nav a{display:block;padding:12.8px 0;font-size:13px;font-weight:600;color:var(--site-soft);white-space:nowrap;border-bottom:2px solid transparent}
.site-nav a:hover{color:var(--site-primary)}
.site-nav .current-menu-item>a,.site-nav .current-cat>a,.site-nav .current-post-ancestor>a,.site-nav .current-menu-parent>a,.site-nav .current_page_item>a{color:var(--site-primary);border-bottom-color:var(--site-primary)}
.site-nav .sub-menu{display:none}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:32px;align-items:start}
.layout-content{min-width:0;display:flex;flex-direction:column;gap:40px}
.sidebar{display:flex;flex-direction:column;gap:24px;position:sticky;top:72px}
.ad-zone{display:flex;justify-content:center;margin:0 0 24px}
.ad-zone:empty{display:none}

/* ---------- Section heads ---------- */
.site-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.site-section-title{font-size:22px;display:flex;align-items:center;gap:12px}
.site-section-title::before{content:"";width:5px;height:22px;border-radius:3px;background:var(--site-primary);flex:none}
.site-section-link{font-size:14px;font-weight:600;color:var(--site-primary)}
.site-section-link:hover{color:var(--site-primary-hover)}

/* ---------- Cards ---------- */
.site-card{background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius);overflow:hidden;box-shadow:var(--site-shadow-xs);display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.site-card:hover{box-shadow:var(--site-shadow-md);transform:translateY(-2px)}
.site-card-media{display:block;aspect-ratio:16/9;background:#e7e5e4;overflow:hidden}
.site-card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.site-card:hover .site-card-media img{transform:scale(1.04)}
.site-card-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.site-kicker{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--site-primary)}
.site-card-title{font-size:20px;line-height:1.3}
.site-card-title a:hover{color:var(--site-primary)}
.site-card-excerpt{color:var(--site-muted);font-size:15px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.site-meta{color:var(--site-muted);font-size:13px;margin-top:auto;padding-top:4px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid-3 .site-card-title{font-size:18px}
.grid-3 .site-card-body{padding:18px}
.grid-3 .site-card-excerpt{display:none}

/* horizontal card (hero side) */
.site-card-horizontal{flex-direction:row}
.site-card-horizontal .site-card-media{aspect-ratio:auto;width:38%;flex:none}
.site-card-horizontal .site-card-body{padding:18px}
.site-card-horizontal .site-card-title{font-size:18px}

/* ---------- Hero ---------- */
.site-hero-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px}
.site-hero{position:relative;border-radius:var(--site-radius);overflow:hidden;min-height:440px;background:#0f2a1a;display:flex;align-items:flex-end;box-shadow:var(--site-shadow-sm)}
.site-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.site-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,25,14,.05) 20%,rgba(5,25,14,.88) 100%)}
.site-hero-body{position:relative;z-index:1;padding:32px 36px;display:flex;flex-direction:column;gap:12px;color:#fff}
.site-hero-body .site-kicker{color:#86efac}
.site-hero-title{font-size:30px;line-height:1.25;color:#fff;max-width:672px}
.site-hero-title a:hover{color:#bbf7d0}
.site-hero-excerpt{color:rgba(255,255,255,.88);font-size:17px;margin:0;max-width:640px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.site-hero-meta{color:rgba(255,255,255,.75);font-size:14px}
.site-hero-side{display:grid;grid-template-rows:1fr 1fr;gap:20px}

/* ---------- Widgets / sidebar boxes ---------- */
.site-box{background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius);padding:22px 24px;box-shadow:var(--site-shadow-xs)}
.site-box .site-section-head{margin-bottom:14px}
.site-box p{color:var(--site-soft);margin:0 0 12px}
.most-read{list-style:none;margin:0;padding:0}
.most-read li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px dashed var(--site-border)}
.most-read li:last-child{border-bottom:0;padding-bottom:0}
.most-read .num{font-family:var(--font-display);font-weight:700;font-size:20px;color:#86c99b;width:18px;flex:none;text-align:center}
.most-read .thumb{width:56px;height:56px;border-radius:8px;overflow:hidden;flex:none;background:#e7e5e4}
.most-read .thumb img{width:100%;height:100%;object-fit:cover}
.most-read a.t{font-size:14px;font-weight:600;line-height:1.35}
.topic-pills{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.topic-pills a{border:1px solid var(--site-border);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--site-soft);background:#fff}
.topic-pills a:hover{border-color:var(--site-primary);color:var(--site-primary)}
.text-link{font-weight:600;color:var(--site-primary)}
.text-link:hover{color:var(--site-primary-hover)}
.widget{margin:0}
.widget-title{font-family:var(--font-display);font-size:20px;margin:0 0 12px}
.widget ul{margin:0;padding-left:18px}

/* ---------- More to read list ---------- */
.more-list{display:flex;flex-direction:column;gap:16px}
.more-item{display:flex;gap:16px;background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius);padding:14px;box-shadow:var(--site-shadow-xs)}
.more-item .thumb{width:120px;aspect-ratio:4/3;border-radius:8px;overflow:hidden;flex:none;background:#e7e5e4}
.more-item .thumb img{width:100%;height:100%;object-fit:cover}
.more-item h3{font-size:17px;margin:4px 0 6px}

/* ---------- Single article ---------- */
.breadcrumbs{font-size:12px;color:var(--site-muted);margin-bottom:18px}
.breadcrumbs a:hover{color:var(--site-primary)}
.breadcrumbs .sep{margin:0 6px}
.entry-header{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.entry-title{font-size:38px;line-height:1.18;letter-spacing:-.02em}
.entry-dek{font-size:18px;color:var(--site-muted);margin:0;line-height:1.6}
.byline{display:flex;align-items:center;gap:12px}
.byline .avatar-initials{width:38px;height:38px;border-radius:50%;background:var(--site-dark);color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.byline .who{font-size:14px;font-weight:600;line-height:1.3}
.byline .when{font-size:13px;color:var(--site-muted)}
.entry-featured{border-radius:var(--site-radius);overflow:hidden;margin:0 0 28px}
.entry-featured img{width:100%;max-height:480px;object-fit:cover}
.entry-featured figcaption{font-size:13px;color:var(--site-muted);padding-top:8px}
.entry-content{font-size:17px;line-height:1.78;color:#292524}
.entry-content>*{margin:0 0 1.25em}
.entry-content h2{font-size:26px;margin:1.8em 0 .6em}
.entry-content h3{font-size:21px;margin:1.6em 0 .5em}
.entry-content a{color:var(--site-primary);text-decoration:underline;text-underline-offset:3px}
.entry-content ul,.entry-content ol{padding-left:1.4em}
.entry-content li{margin:.35em 0}
.entry-content blockquote{margin:1.5em 0;padding:16px 20px;border-left:4px solid var(--site-primary);background:#f0fdf4;border-radius:0 8px 8px 0;color:#14532d}
.entry-content img{border-radius:8px}
.entry-content table{width:100%;border-collapse:collapse;font-size:15px}
.entry-content th,.entry-content td{border:1px solid var(--site-border);padding:10px 12px;text-align:left}
.entry-content th{background:#f5f5f4}
.entry-tags{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.entry-tags a{font-size:13px;background:#f5f5f4;border-radius:999px;padding:5px 12px;color:var(--site-soft)}
.entry-note{margin-top:32px;font-size:14px;color:var(--site-muted);background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius);padding:16px 18px}
.article-card{background:var(--site-surface);border:1px solid var(--site-border);border-radius:var(--site-radius);padding:36px 40px;box-shadow:var(--site-shadow-xs)}

/* ---------- Archive ---------- */
.archive-head{margin-bottom:24px}
.archive-head h1{font-size:34px;display:flex;align-items:center;gap:12px}
.archive-head h1::before{content:"";width:6px;height:30px;border-radius:3px;background:var(--site-primary)}
.archive-head p{color:var(--site-muted);margin:10px 0 0;max-width:640px}
.pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}
.pagination .page-numbers{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--site-border);border-radius:8px;background:#fff;font-weight:600;font-size:14px}
.pagination .current{background:var(--site-primary);border-color:var(--site-primary);color:#fff}
.search-form{display:flex;gap:8px}
.search-form input[type=search]{flex:1;border:1px solid var(--site-border);border-radius:8px;padding:10px 12px;font:inherit}
.search-form button,.btn{background:var(--site-primary);color:#fff;border:0;border-radius:8px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer}
.search-form button:hover,.btn:hover{background:var(--site-primary-hover);color:#fff}

/* ---------- Footer ---------- */
.site-footer{margin-top:48px;border-top:1px solid var(--site-border);background:var(--site-surface)}
.site-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;padding:44px 0 28px}
.site-footer .site-title{font-size:20px}
.site-footer-about{color:var(--site-muted);font-size:14px;margin:12px 0 0;max-width:360px}
.footer-col h4{font-family:var(--font-sans);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--site-muted);margin:0 0 14px}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{font-size:14px;color:var(--site-soft)}
.footer-col a:hover{color:var(--site-primary)}
.site-disclaimer{border-top:1px solid var(--site-border);padding:20px 0;font-size:13px;color:var(--site-muted)}
.site-disclaimer p{margin:0 0 8px}

/* ---------- WP core bits ---------- */
.alignleft{float:left;margin:0 1.5em 1em 0}.alignright{float:right;margin:0 0 1em 1.5em}.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption-text,.wp-element-caption{font-size:13px;color:var(--site-muted);text-align:center}
.sticky,.bypostauthor,.gallery-caption{}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .site-hero-grid{grid-template-columns:1fr}
  .site-hero-side{grid-template-rows:none;grid-template-columns:1fr 1fr}
  .site-footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .site-topbar span:last-child{display:none}
  .site-masthead-inner{min-height:64px}
  .site-title{font-size:20px}
  .nav-toggle{display:block}
  .site-nav-row{display:none}
  .site-nav-row.is-open{display:block}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav a{border-bottom:1px solid var(--site-border);padding:12px 0}
  .grid-2,.grid-3,.site-hero-side{grid-template-columns:1fr}
  .grid-3 .site-card-excerpt{display:-webkit-box}
  .site-hero{min-height:360px}
  .site-hero-body{padding:22px}
  .site-hero-title{font-size:24px}
  .entry-title{font-size:28px}
  .article-card{padding:22px 18px}
  .site-footer-grid{grid-template-columns:1fr}
  .more-item .thumb{width:90px}
}
@media (max-width:767px){
  .site-nav .current-menu-item>a,.site-nav .current-cat>a,.site-nav .current_page_item>a{border-bottom-color:var(--site-border)}
}

/* ---------- Job details ---------- */
.job-line{font-size:13px;font-weight:600;color:var(--site-soft)}
.site-hero .job-line{color:rgba(255,255,255,.85)}
.job-box{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:var(--site-radius);padding:20px 22px;margin:0 0 28px}
.job-box-head{font-family:var(--font-display);font-weight:700;font-size:17px;margin-bottom:14px;color:var(--site-dark)}
.job-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px;margin:0 0 16px}
.job-cell dt{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--site-muted);margin:0 0 3px}
.job-cell dd{margin:0;font-size:15px;font-weight:600;color:var(--site-text)}
.job-apply{display:inline-block;padding:12px 20px}
.job-box.is-closed{background:#fafaf9;border-color:var(--site-border)}
.job-closed-note{margin:0;color:var(--site-muted);font-size:14px}
@media (max-width:767px){.job-grid{grid-template-columns:1fr 1fr}}

/* ---------- v1.2: full 16:9 thumbnails (no cropping of text graphics) ---------- */
.site-hero{display:block;min-height:0;background:#0c2461}
.site-hero::after{display:none}
.site-hero>img,.site-hero>a>img{position:static;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.site-hero-body{padding:22px 26px 26px}
.site-hero-title{font-size:26px}
.site-hero-side{grid-template-rows:none;align-content:start}
.site-card-horizontal{flex-direction:column}
.site-card-horizontal .site-card-media{width:100%;aspect-ratio:16/9}
.site-card-horizontal .site-card-body{padding:14px 16px 16px;gap:6px}
.site-card-horizontal .site-card-title{font-size:16px}
.site-card-horizontal .site-meta{display:none}
.most-read .thumb{width:80px;height:45px;border-radius:6px}
.more-item .thumb{aspect-ratio:16/9}
@media (max-width:1023px){.site-hero-side{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.site-hero-side{grid-template-columns:1fr}.site-hero-title{font-size:22px}}