/*
Theme Name: ImmigralCanada
Theme URI: http://localhost:8888/canadajob
Author: Larry Frank
Description: A Canadian jobs and immigration content platform. Includes a full job board (provinces, industries, sponsorship/work-permit filters), AI-assisted bulk job import, and standalone landing pages — built for Immigral Canada.
Version: 1.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: canadajob
*/

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/inter-var.woff2') format('woff2');
}
:root{
  --white:#FFFFFF;
  --ink:#1A1A1A;
  --gray:#666666;
  --line:#E7E7E7;
  --red:#D3212C;
  --red-tint:#FBEAEA;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--white); color:var(--ink); font-family:'Inter',sans-serif; line-height:1.6;}
h1,h2,h3{font-family:'Inter',sans-serif; font-weight:700; margin:0; letter-spacing:-0.01em;}
.wrap{max-width:1100px; margin:0 auto; padding:0 32px;}
.narrow{max-width:700px; margin:0 auto; padding:0 32px;}
a{color:inherit; text-decoration:none;}
ul{margin:0; padding:0;}
.divider{border:none; border-top:1px solid var(--line); margin:0;}

/* header — shared across all templates */
header{border-bottom:1px solid var(--line); position:relative;}
header .wrap{display:flex; align-items:center; justify-content:space-between; height:84px;}
.logo{font-size:20px; font-weight:700;}
.logo span{color:var(--red);}
nav{display:flex; gap:34px;}
nav a{font-size:14.5px; font-weight:500; color:var(--ink);}
nav a:hover, nav a.active{color:var(--red);}

/* hamburger toggle — hidden on desktop, shown at the mobile breakpoint below */
.menu-toggle{display:none; flex-direction:column; justify-content:center; gap:5px; width:32px; height:32px; padding:0; background:none; border:none; cursor:pointer;}
.menu-toggle span{display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:transform 0.2s ease, opacity 0.2s ease;}
.menu-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.is-active span:nth-child(2){opacity:0;}
.menu-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.btn{display:inline-block; padding:10px 20px; border-radius:4px; font-size:14px; font-weight:600; border:none; cursor:pointer;}
.btn-red{background:var(--red); color:#fff;}
.btn-outline{border:1px solid var(--ink); color:var(--ink); background:none;}

/* eyebrow / page title band — shared by hero + inner page headers */
.eyebrow{font-size:13px; font-weight:600; color:var(--red); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:16px;}
.page-title{padding:64px 0 40px; text-align:center;}
.page-title h1{font-size:38px;}
.page-title p{font-size:16px; color:var(--gray); max-width:520px; margin:16px auto 0;}

/* section rhythm */
section{padding:90px 0;}
.section-head{text-align:center; max-width:560px; margin:0 auto 50px;}
.section-head h2{font-size:30px;}
.section-head p{color:var(--gray); font-size:15px; margin-top:12px;}

/* badges — shared by job board + single job */
.badge{font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:20px; background:var(--red-tint); color:var(--red); display:inline-block;}
.badge.outline{background:none; border:1px solid var(--line); color:var(--gray);}

/* job row — shared by job board list + similar jobs */
.job-row{
  display:flex; align-items:center; gap:20px;
  border:1px solid var(--line); border-radius:6px;
  padding:24px 26px; margin-bottom:14px;
}
.job-row:hover{border-color:var(--red);}
.job-main{flex:1; min-width:0;}
.job-top{display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap;}
.job-title, .job-row-title{font-size:17px; font-weight:600;}
.job-meta{font-size:14px; color:var(--gray);}
.job-meta span{margin-right:14px;}
.job-side{text-align:right; flex:none;}
.job-salary{font-size:14.5px; font-weight:600;}
.job-posted{font-size:12.5px; color:#999; margin-top:4px;}

/* post card — shared by homepage blog teaser, blog archive, related posts */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.post-card{border:1px solid var(--line); border-radius:6px; padding:26px; display:flex; flex-direction:column;}
.post-card:hover{border-color:var(--red);}
.post-tag, .post-card-tag{font-size:11.5px; font-weight:600; color:var(--red); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:12px;}
.post-card h3{font-size:17px; line-height:1.4; margin-bottom:10px;}
.post-card p{font-size:14px; color:var(--gray); margin:0 0 16px; flex:1;}
.post-meta, .post-card-meta{font-size:12.5px; color:#999; border-top:1px solid var(--line); padding-top:14px;}

/* pagination — shared by job board + blog archive */
.pagination{display:flex; justify-content:center; gap:8px; padding-bottom:90px; flex-wrap:wrap;}
.page-btn{width:36px; height:36px; border:1px solid var(--line); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--ink);}
.page-btn.active{background:var(--red); border-color:var(--red); color:#fff;}
.page-btn.wide{width:auto; padding:0 16px;}

/* share icons — shared by single job + single post */
.share-row{display:flex; gap:10px; margin-top:14px;}
.share-icon{width:36px; height:36px; border:1px solid var(--line); border-radius:4px; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--gray);}
.share-icon:hover{border-color:var(--red); color:var(--red);}

/* newsletter — shared by homepage + single post */
.newsletter{background:var(--red-tint); text-align:center;}
.newsletter h2{font-size:26px; margin-bottom:10px;}
.newsletter p{color:var(--gray); font-size:14.5px; margin-bottom:26px;}
.news-form{display:flex; justify-content:center; gap:10px;}
.news-form input{width:280px; padding:12px 16px; border-radius:4px; border:1px solid var(--line); font-size:14px;}
.news-form button{background:var(--red); color:#fff; border:none; padding:12px 22px; border-radius:4px; font-weight:600; font-size:14px; cursor:pointer;}

/* footer — shared across all templates */
footer{padding:60px 0 30px;}
.foot-bottom{border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; font-size:13px; color:#999;}

/* ============ homepage ============ */
.hero{padding:110px 0 100px; text-align:center;}
.hero h1{font-size:52px; line-height:1.15; max-width:720px; margin:0 auto;}
.hero p{font-size:17px; color:var(--gray); max-width:560px; margin:22px auto 36px;}
.hero-actions{display:flex; justify-content:center; gap:14px;}

.paths-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
.path-card{border:1px solid var(--line); border-radius:6px; padding:40px;}
.path-card h3{font-size:22px; margin-bottom:10px;}
.path-card .sub{color:var(--gray); font-size:14.5px; margin-bottom:26px;}
.path-card ul li{list-style:none; padding:14px 0; border-top:1px solid var(--line); font-size:14.5px;}
.path-card ul li:first-child{border-top:none;}
.path-card a.more{display:inline-block; margin-top:22px; font-size:14px; font-weight:600; color:var(--red);}

.provinces{background:#FAFAFA;}
.prov-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.prov{border:1px solid var(--line); border-radius:6px; padding:18px; text-align:center; font-size:14.5px; font-weight:600; background:#fff; display:block;}
.prov:hover{border-color:var(--red); color:var(--red);}

/* ============ job board (archive-job) ============ */
.filter-bar{padding:28px 0;}
.filter-row{display:flex; gap:12px; margin-bottom:12px;}
.filter-row input, .filter-row select{
  border:1px solid var(--line); border-radius:4px; padding:12px 14px; font-size:14px;
  font-family:'Inter',sans-serif; color:var(--ink); background:#fff;
}
.filter-row input{flex:1.6;}
.filter-row select{flex:1;}
.filter-row .btn{flex:none;}

.more-filters{border-top:1px solid var(--line); padding-top:14px;}
.more-filters summary{
  list-style:none; cursor:pointer; font-size:14px; font-weight:600; color:var(--red);
  display:flex; align-items:center; gap:6px; width:fit-content;
}
.more-filters summary::-webkit-details-marker{display:none;}
.more-filters summary .chev{transition:transform 0.15s ease; font-size:12px;}
.more-filters[open] summary .chev{transform:rotate(180deg);}
.more-row{display:flex; gap:12px; margin-top:16px;}
.more-row select, .more-row input{
  border:1px solid var(--line); border-radius:4px; padding:12px 14px; font-size:14px;
  font-family:'Inter',sans-serif; color:var(--ink); background:#fff; flex:1;
}

.results-head{padding:0 0 24px; display:flex; justify-content:space-between; align-items:center;}
.results-count{font-size:14.5px; color:var(--gray);}
.results-count strong{color:var(--ink);}
.sort-row{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--gray);}
.sort-row select{border:1px solid var(--line); border-radius:4px; padding:8px 12px; font-size:14px; font-family:'Inter',sans-serif; color:var(--ink);}

.job-list{padding-bottom:70px;}

/* ============ single job ============ */
.job-header{padding:30px 0;}
.job-head-top{display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;}
.job-title-block h1{font-size:32px; margin-bottom:10px;}
.company-line{font-size:15.5px; color:var(--gray);}
.company-line strong{color:var(--ink); font-weight:600;}
.badge-row{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
.apply-cta{text-align:right; flex:none;}
.apply-cta .btn{width:180px; text-align:center;}

.content-layout{display:grid; grid-template-columns:2fr 1fr; gap:56px; padding-bottom:30px;}
.job-body h2{font-size:19px; margin:30px 0 14px;}
.job-body h2:first-child{margin-top:0;}
.job-body p{font-size:15px; color:var(--ink); margin:0 0 14px;}
.job-body ul{margin:0 0 14px;}
.job-body ul li{list-style:none; font-size:15px; padding:8px 0 8px 20px; position:relative; color:var(--ink);}
.job-body ul li::before{content:"—"; position:absolute; left:0; color:var(--red);}

.side-card{border:1px solid var(--line); border-radius:6px; padding:26px; margin-bottom:20px;}
.side-card h3{font-size:14px; text-transform:uppercase; letter-spacing:0.04em; margin-bottom:16px;}
.overview-row{display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line); font-size:14px;}
.overview-row:first-of-type{border-top:none;}
.overview-row .label{color:var(--gray);}
.overview-row .value{font-weight:600; text-align:right;}
.side-card .btn{width:100%; text-align:center; margin-top:6px;}

.similar{padding:30px 0;}

/* ============ 404 page ============ */
.cj-404-nav{display:flex; justify-content:center; gap:14px; padding:36px 0; flex-wrap:wrap;}
@media (max-width:480px){
  .cj-404-nav{flex-direction:column; align-items:stretch; padding:26px 0;}
  .cj-404-nav .btn{text-align:center;}
}

/* ============ blog archive ============ */
.blog-grid{padding-bottom:70px;}

/* ============ single post ============ */
.post-header{padding:30px 0; text-align:center;}
.post-header h1{font-size:36px; line-height:1.2;}
.post-meta{font-size:14px; color:var(--gray); margin-top:18px;}
.post-meta span{margin:0 8px;}

.article{padding:30px 0 20px;}
.article p{font-size:16.5px; color:var(--ink); margin:0 0 20px;}
.article h2{font-size:22px; margin:30px 0 16px;}
.article ul li{list-style:none; font-size:16.5px; padding:8px 0 8px 20px; position:relative; margin-bottom:4px;}
.article ul li::before{content:"—"; position:absolute; left:0; color:var(--red);}
.pull-quote, .article blockquote{border-left:3px solid var(--red); padding:6px 0 6px 24px; margin:30px 0; font-size:19px; font-weight:600; color:var(--ink);}

/* Mid-content related-jobs / related-posts widget — inserted inside .job-body or .article */
.cj-related-widget{margin:30px 0; padding:22px 24px; border:1px solid var(--line); border-radius:8px; background:#FAFAFA;}
.cj-related-widget-title{font-size:15px; font-weight:700; margin:0 0 14px;}
.cj-related-list{display:flex; flex-direction:column; gap:10px;}
.cj-related-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:#fff; border:1px solid var(--line); border-radius:6px;
  padding:14px 18px;
}
.cj-related-row:hover{border-color:var(--red);}
.cj-related-row-title{font-size:15px; font-weight:600; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cj-related-row-btn{font-size:14px; font-weight:600; color:var(--red); flex:none; white-space:nowrap;}

/* Post widget: no button — just the title, free to wrap across as many lines as it needs. */
.cj-related-row-title-only{display:block;}
.cj-related-row-title-only .cj-related-row-title{
  display:block; white-space:normal; overflow:visible; text-overflow:clip;
  -webkit-line-clamp:unset; -webkit-box-orient:unset;
}

/* Related Posts widget (blog posts only, scoped via .article — the job
   widget inside .job-body is untouched): flush with the article, no card
   frame, red title text. */
.article .cj-related-widget{background:none; border:none; padding:0;}
.article .cj-related-row-title{color:var(--red);}

@media (max-width:480px){
  .cj-related-widget{padding:18px;}
  /* Stays a side-by-side row (not stacked) — the title just wraps onto up
     to 2 lines instead of truncating, with the button centered beside it. */
  .cj-related-row{gap:12px;}
  .cj-related-row-title{
    white-space:normal; text-overflow:clip;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
}

.article-footer{padding:20px 0 30px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;}
.tags-row{display:flex; gap:8px; flex-wrap:wrap;}
.tags-row span{font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:20px; border:1px solid var(--line); color:var(--gray);}

.related{padding:30px 0;}

/* single post + single job share a 30px cap on their section-head bottom margin
   and the newsletter section's padding (scoped to body.single so the homepage's
   own section-head/newsletter spacing is untouched) */
body.single .section-head{margin:0 auto 30px;}
body.single .newsletter{padding:30px 0;}

/* ============ responsive ============ */
@media (max-width:900px){
  .post-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:880px){
  .menu-toggle{display:flex;}
  nav{
    display:none; flex-direction:column; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:var(--white); border-bottom:1px solid var(--line);
    padding:8px 32px; z-index:50;
  }
  nav.is-open{display:flex;}
  nav a{padding:14px 0; border-top:1px solid var(--line);}
  nav a:first-child{border-top:none;}
  .paths-grid{grid-template-columns:1fr;}
  .prov-grid{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:38px;}
  .hero-actions{flex-direction:column; align-items:center;}
  .news-form{flex-direction:column; align-items:center;}
  .news-form input, .news-form button{width:100%; max-width:280px;}

  .page-title{padding:44px 0 32px;}
  .page-title h1{font-size:30px;}
  .filter-bar{padding:20px 0;}
  .filter-row{flex-wrap:wrap;}
  .filter-row input, .filter-row select, .filter-row .btn{flex:1 1 100%;}
  .more-row{flex-wrap:wrap;}
  .more-row select, .more-row input{flex:1 1 100%;}
  .results-head{flex-direction:column; align-items:flex-start; gap:10px;}
  .job-row{flex-wrap:wrap; padding:20px;}
  .job-main{flex:1 1 100%;}
  .job-side{text-align:left; flex:1 1 100%; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); display:flex; justify-content:space-between; align-items:center;}
  .job-top{gap:8px;}

  .content-layout{grid-template-columns:1fr; gap:8px;}
  .job-title-block h1{font-size:26px;}
  .apply-cta{width:100%; text-align:left;}
  .apply-cta .btn{width:100%;}
  .apply-cta.cj-hide-mobile{display:none;}

  .post-header h1{font-size:27px;}
}

@media (max-width:600px){
  .page-title h1{font-size:28px;}
  .post-grid{grid-template-columns:1fr; gap:18px;}
  .pagination{flex-wrap:wrap;}
  .article p, .article ul li, .pull-quote{font-size:15.5px;}
  .article-footer{flex-direction:column; align-items:flex-start;}
  .post-header h1{font-size:23px;}
}

@media (max-width:480px){
  .wrap, .narrow{padding:0 16px;}
  header .wrap{height:64px; gap:10px;}
  .logo{font-size:15px;}
  .logo a{white-space:nowrap;}
  .menu-toggle{width:26px; height:26px; gap:4px; flex:none;}
  header .btn{padding:8px 14px; font-size:13px; flex:none;}
  .page-title h1{font-size:24px;}
  .page-title p{font-size:14.5px;}
  .job-title-block h1{font-size:22px;}
  .job-title{font-size:15.5px;}
  .job-meta span{margin-right:10px; display:inline-block;}
}