/*
Theme Name: CIKH — Canada Immigration Knowledge Hub
Theme URI: https://cikh.ca
Author: CIKH Editorial Team
Description: Fast, lightweight, server-rendered WordPress theme built for CIKH.CA. No page-builder, no bloated REST-API homepage loading, fully editable via Customizer, Menus and Widgets. Editorial "policy-desk" design language with a live Pathway Navigator and Policy Ticker. AdSense-layout ready.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cikh
*/

/* ==========================================================
   Design tokens
   Palette idea: "Federal Desk" — deep Canadian navy + maple
   red used sparingly as an alert/accent color + a muted gold
   used only for "official / verified update" marks. This is
   NOT a maple-leaf-plastered tourist theme — it reads like a
   policy desk / newsroom, which is what builds AdSense trust.
   ========================================================== */
:root{
  --navy:#0B2340;         /* primary deep navy */
  --navy-2:#122C4E;        /* card / panel navy */
  --navy-3:#1C3A61;        /* hover / border navy */
  --red:#C8232D;           /* Canada red — alerts, badges only */
  --red-dark:#A11B23;
  --gold:#B8912F;          /* "verified update" accent, used sparingly */
  --surface:#F5F6F8;       /* page background */
  --white:#FFFFFF;
  --text:#1B2430;
  --muted:#5B6472;
  --text-invert:#F2F4F7;
  --muted-invert:#AEB9C9;
  --border:#E2E5EA;
  --border-dark:#25406A;
  --radius:10px;
  --maxw:1180px;
  --heading-font:'Source Serif 4',Georgia,'Times New Roman',serif;
  --body-font:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ==========================================================
   Reset
   ========================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; color:var(--text); background:var(--surface);
  font-family:var(--body-font);
  font-size:16px; line-height:1.65; overflow-x:hidden;
}
h1,h2,h3,h4{
  font-family:var(--heading-font); font-weight:600; line-height:1.2; margin:0 0 .5em;
  color:var(--navy);
}
p{margin:0 0 1em;}
a{color:var(--navy); text-decoration:none;}
a:hover{color:var(--red);}
img{max-width:100%; height:auto; display:block;}
ul{padding-left:1.2em;}
.container{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--red); margin-bottom:12px;
}
.eyebrow::before{content:""; width:16px; height:2px; background:var(--red); display:inline-block;}
.btn{
  display:inline-block; padding:12px 24px; background:var(--navy); color:var(--text-invert);
  border-radius:6px; font-weight:600; font-size:14.5px; border:1px solid var(--navy); cursor:pointer;
  transition:background .15s ease, color .15s ease, transform .1s ease;
}
.btn:hover{background:var(--navy-3); color:var(--white); transform:translateY(-1px);}
.btn-outline{background:transparent; color:var(--navy); border:1px solid var(--navy);}
.btn-outline:hover{background:var(--navy); color:var(--white);}
.btn-red{background:var(--red); border-color:var(--red);}
.btn-red:hover{background:var(--red-dark);}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; z-index:9999;}
.skip-link:focus{left:10px; top:10px;}

/* ==========================================================
   Header
   ========================================================== */
.site-header{background:var(--white); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:500;}
.site-header-inner{display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding:16px 20px;}
.site-logo{display:flex; align-items:center; gap:10px; font-family:var(--heading-font); font-weight:700; font-size:22px; color:var(--navy);}
.site-logo .mark{
  width:36px; height:36px; border-radius:8px; background:linear-gradient(155deg,var(--navy),var(--navy-3));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:800; flex:none;
}
.site-logo .mark-img{width:auto; height:auto; max-height:44px; background:none; border-radius:0;}
.site-logo .mark-img img{max-height:44px; width:auto; display:block;}
.site-logo .site-name{white-space:nowrap;}
@media(max-width:420px){.site-logo{font-size:18px;} .site-logo .mark{width:30px;height:30px;}}
.main-nav ul{display:flex; list-style:none; gap:28px; margin:0; padding:0;}
.main-nav a{font-size:14.5px; font-weight:600; color:var(--text); padding:6px 0; border-bottom:2px solid transparent;}
.main-nav a:hover{border-bottom-color:var(--red); color:var(--navy);}
.header-actions{display:flex; align-items:center; gap:14px;}
.header-search-toggle,.nav-toggle{background:none; border:1px solid var(--border); border-radius:6px; width:38px; height:38px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--navy);}
.nav-toggle{display:none;}
.header-search-panel{display:none; border-top:1px solid var(--border); background:var(--surface);}
.header-search-panel.is-open{display:block;}
.header-search-panel form{max-width:var(--maxw); margin:0 auto; padding:14px 20px; display:flex; gap:10px;}
.header-search-panel input[type=search]{flex:1; padding:10px 14px; border:1px solid var(--border); border-radius:6px; font-size:15px;}

@media(max-width:880px){
  .main-nav{position:fixed; inset:0 0 0 auto; width:78%; max-width:320px; background:var(--navy); padding:90px 24px 24px; transform:translateX(100%); transition:transform .25s ease; z-index:600; overflow-y:auto;}
  .main-nav.is-open{transform:translateX(0);}
  .main-nav ul{flex-direction:column; gap:4px;}
  .main-nav a{color:var(--text-invert); display:block; padding:12px 4px; border-bottom:1px solid var(--border-dark);}
  .nav-toggle{display:flex;}
  .nav-overlay{display:none; position:fixed; inset:0; background:rgba(11,35,64,.5); z-index:590;}
  .nav-overlay.is-open{display:block;}
}

/* ==========================================================
   Hero
   ========================================================== */
.hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%); padding:56px 0 64px; color:var(--text-invert); position:relative;}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:linear-gradient(90deg,var(--red),var(--gold));}
.hero-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:start;}
.hero h1{color:#fff; font-size:clamp(28px,4vw,42px); margin-bottom:14px;}
.hero p.lead{color:var(--muted-invert); font-size:17px; max-width:52ch; margin-bottom:22px;}
.hero-badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
.hero-badge{display:flex; align-items:center; gap:7px; background:rgba(255,255,255,.06); border:1px solid var(--border-dark); padding:8px 14px; border-radius:30px; font-size:13px; color:var(--muted-invert);}
.hero-featured{background:var(--white); border-radius:var(--radius); padding:18px; color:var(--text);}
.hero-featured .eyebrow{margin-bottom:8px;}
.hero-featured h3{font-size:18px; margin-bottom:8px;}
.hero-featured ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px;}
.hero-featured li a{display:flex; gap:10px; font-size:14px; color:var(--text); font-weight:600; align-items:flex-start;}
.hero-featured li a .num{flex:none; width:22px; height:22px; border-radius:50%; background:var(--surface); color:var(--navy); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center;}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr;}}

/* ==========================================================
   Content layout
   ========================================================== */
.content-wrap{max-width:var(--maxw); margin:0 auto; padding:48px 20px 64px; display:grid; grid-template-columns:1fr 320px; gap:40px; align-items:start;}
.content-wrap.no-sidebar{grid-template-columns:1fr; max-width:820px;}
@media(max-width:960px){.content-wrap{grid-template-columns:1fr;}}

.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:20px; border-bottom:2px solid var(--navy); padding-bottom:10px;}
.section-head h2{font-size:20px; margin:0;}
.section-head a{font-size:13px; font-weight:700; color:var(--red);}

/* Category chip colors — assigned via functions.php helper */
.chip{display:inline-block; font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:2px 7px; border-radius:10px; color:#fff; background:var(--navy);}
.chip-express{background:#1C3A61;}
.chip-pnp{background:#2E6E4E;}
.chip-study{background:#A15C1C;}
.chip-work{background:#5B3A99;}
.chip-family{background:#C8232D;}
.chip-citizenship{background:#B8912F;}
.chip-news{background:#3A4552;}

.post-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}
@media(max-width:640px){.post-grid{grid-template-columns:1fr;}}

.post-grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:880px){.post-grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.post-grid-3{grid-template-columns:1fr;}}
.post-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .15s ease, transform .15s ease;}
.post-card:hover{box-shadow:0 12px 28px rgba(11,35,64,.1); transform:translateY(-2px);}
.post-card .thumb{aspect-ratio:16/9; background:var(--surface) center/cover no-repeat; position:relative;}
.post-card .thumb .chip{position:absolute; top:12px; left:12px;}
.post-card .body{padding:16px 18px 20px;}
.post-card h3{font-size:16.5px; margin:8px 0 8px; line-height:1.35;}
.post-card h3 a{color:var(--text);}
.post-card h3 a:hover{color:var(--red);}
.post-card .excerpt{font-size:13.5px; color:var(--muted); margin-bottom:10px;}
.meta{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--muted);}
.meta .verified{display:inline-flex; align-items:center; gap:4px; color:var(--gold); font-weight:700;}

.list-row{display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--border);}
.list-row:last-child{border-bottom:none;}
.list-row .thumb{flex:none; width:120px; aspect-ratio:4/3; background:var(--surface) center/cover no-repeat; border-radius:6px;}
.list-row .body{flex:1;}
.list-row h3{font-size:15.5px; margin:6px 0 6px;}

/* ==========================================================
   Sidebar
   ========================================================== */
.widget{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:24px;}
.widget h3{font-size:15px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px; padding-bottom:10px; border-bottom:2px solid var(--navy);}
.widget ul{list-style:none; padding:0; margin:0;}
.widget li{padding:10px 0; border-bottom:1px solid var(--border); font-size:13.5px;}
.widget li:last-child{border-bottom:none;}
.newsletter-widget{background:var(--navy); color:var(--text-invert); border-color:var(--navy);}
.newsletter-widget h3{color:#fff; border-color:var(--border-dark);}
.newsletter-widget p{font-size:13px; color:var(--muted-invert);}
.newsletter-widget input[type=email]{width:100%; padding:10px 12px; border-radius:6px; border:1px solid var(--border-dark); margin-bottom:10px; font-size:13.5px;}
.pnp-tracker li{display:flex; justify-content:space-between; align-items:center;}
.pnp-tracker .status{font-size:11px; font-weight:700; padding:3px 9px; border-radius:12px; background:#EAF4EC; color:#2E6E4E;}

/* ==========================================================
   Single post
   ========================================================== */
.post-header{background:var(--navy); color:var(--text-invert); padding:40px 0 32px;}
.post-header .container{max-width:820px;}
.post-header h1{color:#fff; font-size:clamp(24px,3.6vw,36px); margin-bottom:14px;}
.post-header .meta{color:var(--muted-invert);}
.post-header .meta .verified{color:var(--gold);}
.entry-content{max-width:820px; margin:0 auto; font-size:17px; line-height:1.75;}
.entry-content h2{font-size:24px; margin-top:1.6em;}
.entry-content h3{font-size:19px; margin-top:1.4em;}
.entry-content img{border-radius:8px; margin:1.2em 0;}
.entry-content a{color:var(--red); text-decoration:underline;}
.entry-content blockquote{border:1px solid var(--border); border-left:4px solid var(--navy); margin:1.6em 0; padding:16px 20px; color:#1B2430; background:#F4F6F9; border-radius:8px; font-style:normal;}
.entry-content blockquote p{margin:0;}
.entry-content blockquote p:not(:last-child){margin-bottom:.6em;}
.entry-content pre{border:1px solid var(--border); border-left:4px solid var(--navy); margin:1.6em 0; padding:16px 20px; color:#1B2430; background:#F4F6F9; border-radius:8px; white-space:pre-wrap; font-family:var(--body-font); font-size:.95em;}
.entry-content table{width:100%; border-collapse:collapse; margin:1.6em 0; font-size:14.5px;}
.entry-content table th{background:var(--navy); color:#fff; text-align:left; padding:10px 12px;}
.entry-content table td{padding:10px 12px; border-bottom:1px solid var(--border);}
.disclosure-box{max-width:820px; margin:32px auto 0; background:#FBF7EC; border:1px solid #E7D9A8; border-radius:8px; padding:16px 18px; font-size:13.5px; color:#7A6320;}
.author-box{max-width:820px; margin:36px auto 0; display:flex; gap:18px; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:22px; align-items:flex-start;}
.author-box .avatar{width:96px; height:96px; border-radius:10px; background:var(--navy); flex:none; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; overflow:hidden;}
.author-box .avatar img{width:100%; height:100%; object-fit:cover; border-radius:10px; display:block;}
.author-box h4{font-size:16px; margin-bottom:6px;}
.author-box p{font-size:13.5px; color:var(--muted); margin:0; line-height:1.6;}
@media(max-width:560px){.author-box{flex-direction:row; align-items:flex-start;} .author-box .avatar{width:72px;height:72px;}}
.tags-row{max-width:820px; margin:24px auto 0; display:flex; flex-wrap:wrap; gap:8px;}
.tags-row a{font-size:12px; background:var(--surface); border:1px solid var(--border); padding:5px 12px; border-radius:20px; color:var(--muted);}

/* ==========================================================
   Trust / footer
   ========================================================== */
.site-footer{background:var(--navy); color:var(--muted-invert); padding:52px 0 24px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:36px;}
.footer-grid h4{color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:16px;}
.footer-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
.footer-grid a{color:var(--muted-invert); font-size:13.5px;}
.footer-grid a:hover{color:#fff;}
.footer-about p{font-size:13.5px; color:var(--muted-invert); max-width:34ch;}
.footer-contact li{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--muted-invert);}
.footer-social{display:flex; gap:10px; margin-top:14px;}
.footer-social a{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid var(--border-dark); display:flex; align-items:center; justify-content:center; transition:background .15s ease;}
.footer-social a:hover{background:var(--red); border-color:var(--red);}
.footer-social svg{width:17px; height:17px; fill:#fff;}
.footer-bottom{border-top:1px solid var(--border-dark); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color:#8593A8;}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* ==========================================================
   Misc
   ========================================================== */
.pagination{display:flex; gap:8px; justify-content:center; margin-top:32px;}
.pagination a,.pagination span{padding:8px 14px; border:1px solid var(--border); border-radius:6px; font-size:13.5px; color:var(--navy); background:var(--white);}
.pagination .current{background:var(--navy); color:#fff; border-color:var(--navy);}
.breadcrumb{font-size:12.5px; color:var(--muted); margin-bottom:14px;}
.breadcrumb a{color:var(--muted);}
.search-results-head{margin-bottom:24px;}
.no-results{padding:60px 20px; text-align:center; color:var(--muted);}
.comments-area{max-width:820px; margin:40px auto 0;}
.comment-list{list-style:none; padding:0; margin:0;}
.comment-body{background:var(--white); border:1px solid var(--border); border-radius:8px; padding:16px 18px; margin-bottom:14px;}
.comment-form input,.comment-form textarea{width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:6px; margin-bottom:12px; font-family:inherit; font-size:14.5px;}

/* ==========================================================
   About This Site (homepage) — centered editorial band
   ========================================================== */
.about-section{background:var(--surface); padding:64px 20px; text-align:center;}
.about-section .about-inner{max-width:760px; margin:0 auto;}
.about-section .eyebrow{justify-content:center; color:#2E6EE0;}
.about-section .eyebrow::before{display:none;}
.about-section h2{font-size:30px; margin-bottom:26px;}
.about-section p{font-size:15.5px; color:var(--muted); line-height:1.8; margin:0 0 18px;}
.about-section p:last-child{margin-bottom:0;}
@media(max-width:640px){.about-section{padding:44px 20px;} .about-section h2{font-size:24px;}}

/* ==========================================================
   FAQ accordion — native <details>/<summary>, no JS needed
   ========================================================== */
.faq-section{max-width:var(--maxw); margin:44px auto 0; padding:0 20px 20px;}
.faq-section > h2{font-size:22px; margin-bottom:18px;}
.faq-list{display:flex; flex-direction:column; gap:10px;}
.faq-item{background:var(--white); border:1px solid var(--border); border-radius:8px; overflow:hidden;}
.faq-item summary{list-style:none; cursor:pointer; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; gap:12px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::marker{content:"";}
.faq-item summary h3,.faq-item summary h4{margin:0; font-size:15px; font-family:var(--body-font); font-weight:700; color:var(--navy);}
.faq-toggle{flex:none; width:22px; height:22px; border-radius:50%; background:var(--surface); position:relative;}
.faq-toggle::before,.faq-toggle::after{content:""; position:absolute; background:var(--navy); top:50%; left:50%; transform:translate(-50%,-50%);}
.faq-toggle::before{width:10px; height:2px;}
.faq-toggle::after{width:2px; height:10px; transition:opacity .15s ease;}
.faq-item[open] .faq-toggle::after{opacity:0;}
.faq-item[open] summary{border-bottom:1px solid var(--border);}
.faq-answer{padding:4px 20px 18px;}
.faq-answer p{font-size:14px; color:var(--muted); margin:0; line-height:1.7;}

/* ==========================================================
   Category / archive description
   ========================================================== */
.archive-description{max-width:820px; font-size:14.5px; color:var(--muted); line-height:1.7; margin:-6px 0 26px; background:var(--white); border:1px solid var(--border); border-radius:8px; padding:16px 18px;}

/* ==========================================================
   Single post — "Published By" meta line
   ========================================================== */
.published-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:13px; color:var(--muted-invert); margin-top:6px;}
.published-meta strong{color:#fff; font-weight:600;}