/* ======================================
   FONT
====================================== */
@font-face{
  font-family:'Just Sans';
  src:url('/wp-content/uploads/fonts/just-sans/JustSans-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Hector';
  src:url('/wp-content/uploads/fonts/hector/Hector-Regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

html{
  scroll-behavior:smooth;
}
body{
  font-family:'Just Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:#0f2c4c;
  background:#fff;
}

/* ======================================
   TOKENS
====================================== */
:root{
  --cm-ink:#0F2C4C;
  --cm-muted:#6A7B90;
  --cm-accent:#E0A528;
  --cm-bg:#F6F7F9;
  --cm-white:#FFFFFF;
  --cm-card:#F5F5F5;
  --cm-r-xl:22px;
  --cm-r-md:14px;
  --cm-shadow:0 18px 60px rgba(10,40,71,.10);
  --deep:#021D35;
  --light-color:#ffffff;
}

/* ======================================
   LAYOUT
====================================== */
.cm-container{
  max-width:1600px;
  margin:0 auto;
  padding:28px 16px;
}
.cm-grid{
  display:grid;
  grid-template-columns:1fr 400px;
  gap:28px;
}
@media (max-width:992px){
  .cm-grid{grid-template-columns:1fr;}
}

/* ======================================
   HERO — image with overlay + big white/yellow headline
   Background is set inline or via --cm-hero
====================================== */
.cm-hero.cm-hero-image{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:17em 0;
  min-height:420px;
  background-image:var(--cm-hero);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.cm-hero-image .cm-hero-overlay{
  position:absolute; inset:0;
  background:rgba(6,18,30,0.70);
  pointer-events:none;
}
.cm-hero-image .cm-hero-inner{
  position:relative; z-index:1; width:100%;
  text-align:center;
}
.cm-hero-h1{
  margin:0;
  line-height:1.05;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-weight:600;
  font-size:5.25em; /* 84px */
}
.cm-hero-line1{display:block; color:#fff;}
.cm-hero-line2{display:block; color:var(--cm-accent);}
.cm-hero *::marker{content:'';}
.cm-hero .swiper-pagination{display:none;}
.sticky-wrapper.sticky{background:transparent!important; position:static!important;}

@media (max-width:768px){
  .cm-hero.cm-hero-image{padding:8em 0;}
  .cm-hero-h1{font-size:3.5em;}
}
@media (max-width:480px){
  .cm-hero-h1{font-size:2.2em;}
}

/* ======================================
   INTRO (between hero and posts)
====================================== */
.cm-intro{
  background:#fff;
  padding:56px 0 44px;
}
.cm-intro-inner{
  text-align:center;
}
.cm-intro-kicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px; margin-bottom:12px;
}
.cm-intro-kicker-text{
  font-family:'Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1em;
  line-height:1.2;
  color:#0f2c4c;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
}
.cm-intro-rule{
  display:inline-block; width:56px; height:3px;
  background:#E0A528; border-radius:3px;
}
.cm-intro-title{
  margin:0 0 10px;
  font-family:'Hector','Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:400; font-size:3.125em; line-height:1.1; color:#0f2c4c;
  text-transform:uppercase;
}
.cm-intro-copy{
  max-width:760px; margin:0 auto; color:#0f2c4c;
  font-family:'Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:1.125em; line-height:1.6;
}
.cm-intro-copy strong{font-weight:700; color:#0f2c4c;}
@media (max-width:768px){
  .cm-intro{padding:44px 0 36px;}
  .cm-intro-title{font-size:2.2em;}
}

/* ======================================
   POSTS GRID (archive)
====================================== */
p.blog-text {
    font-family: 'JUST sans', 'sans serif'!important;
    color:#0f2c4c!important;
}
blockquote:after, .wp-block-quote:after {
    background-color:#0f2c4c!important;
}
.cm-post-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}
@media (max-width:900px){
  .cm-post-grid{grid-template-columns:1fr;}
}
.cm-card{
  background:var(--cm-card);
  border-radius:22px;
  padding:18px 18px 20px;
}
.cm-card-thumb{
  display:block; overflow:hidden; border-radius:18px; margin-bottom:14px;
}
.cm-card-thumb img{
  display:block; width:100%; height:auto; transform:scale(1.001);
  transition:transform .25s ease;
}
.cm-card:hover .cm-card-thumb img{ transform:scale(1.03); }
.cm-card-meta{
  display:flex; align-items:center; gap:14px;
  margin:4px 0 10px; color:#6a7b90; font-weight:800; font-size:.92rem;
  text-transform:uppercase; letter-spacing:.04em;
}
.cm-card-cat{ color:#0f2c4c; letter-spacing:.06em; font-weight:500; }
.cm-readtime{ opacity:.9; text-transform:lowercase; font-weight:400; }
.cm-card-title{
  font-size:24.42px; line-height:1.22; margin:6px 0 8px;
  font-weight:400; font-family:'Hector','Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  letter-spacing:1px; color:#0f2c4c;
}
.cm-card-title a{ color:inherit; text-decoration:none; }
.cm-card-title a:hover{opacity:.85;}
.cm-card-excerpt{ color:#3a4f66; font-size:1rem; line-height:1.55; margin:0 0 16px; }
.blog-single{ margin-bottom:0!important; }
.cm-card-more{
  display:inline-flex; align-items:center; gap:10px;
  padding:0 18px; border-radius:14px;
  border:3px solid #0f2c4c; color:#0f2c4c; font-weight:800;
  text-decoration:none; text-transform:uppercase; letter-spacing:.02em;
}
.cm-card-more::after{
  content:""; display:inline-block; width:36px; height:36px; border-radius:999px; border:2px solid currentColor;
  -webkit-mask:url('https://creomortgage.com/wp-content/uploads/2025/08/right-arrow.svg') no-repeat center / 60%;
  mask:url('https://creomortgage.com/wp-content/uploads/2025/08/right-arrow.svg') no-repeat center / 60%;
  background-color: currentColor;
}
.cm-card-more:hover{
  background:#0f2c4c; color:#fff; border-color:#0f2c4c;
}

/* clock icon for meta */
.cm-readtime{
  display:inline-flex; align-items:center; gap:8px;
}
.cm-readtime::before{
  content:""; display:inline-block; width:18px; height:18px; background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></g></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></g></svg>") no-repeat center / contain;
}
@media screen and (max-width: 768px) {
    .cm-readtime {font-size:12px;}
}
/* ======================================
   SIDEBAR — wrapper + order
====================================== */
.cm-sidebar{
  display:flex;
  flex-direction:column;
  gap:18px;
}
@media (max-width:768px){
  .cm-sidebar{display:none!important;}
}
.cm-widget{
  background:transparent;
  border-radius:0;
  padding:0;
}
.cm-widget-title{
  margin:0 0 14px;
  color:#0f2c4c;
  font-size:26.1px;
  font-weight:400;
  line-height:1.1;
  letter-spacing:1px;
  font-family:'Hector','Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* Enforce order: Search → Categories → Recent → Tags */
.cm-widget-search{ order:1; }
.cm-widget-cats{ order:2; }
.cm-widget-recent{ order:3; }
.cm-widget-tags{ order:4; }

/* Search widget */
.cm-widget.cm-widget-search{
  background:#f5f5f5; border-radius:22px; padding:20px; box-shadow:none;
}
.cm-widget-search .cm-searchform{
  display:flex; align-items:center; gap:10px; padding:8px;
  background:#fff; border-radius:16px; box-shadow:none;
}
.cm-search-input{
  flex:1 1 auto; height:48px; border:0; outline:0;
  border-radius:12px; padding:0 14px; font-size:.96rem; color:#0f2c4c; background:#fff;
}
select:focus, .form-control:focus, .form-select:focus, textarea:focus, input:focus{
  background-color:#FFFFFF!important;
}
.cm-search-input::placeholder{ color:#8A96A6; }
.cm-search-btn{
  width:48px; height:48px; border:0; border-radius:14px; background:#2e4663; color:transparent;
  display:grid; place-items:center; padding:0; line-height:0; box-shadow:none; cursor:pointer;
}
.cm-search-btn::before{
  content:""; width:22px; height:22px; margin-top:9px; margin-left:-4px;
  background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-4-4'/></g></svg>");
}
.cm-search-btn:hover{ background:#1e324b; }

/* Categories */
.cm-widget.cm-widget-cats{
  background:#f5f5f5; border-radius:22px; padding:20px;
}
.cm-catlist{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px;
}
.cm-catlist li a{
  display:block; padding:14px 16px; border-radius:14px; background:#fff;
  border:1px solid #E5ECF3; color:#0f2c4c; text-decoration:none; font-weight:400; font-size:17.4px;
}
.cm-catlist li a:hover{
  border-color:#D7E3EE; background:#2e4663; color:#fff;
}
.cm-catlist li.current-cat > a,
.cm-catlist li.current-cat-parent > a,
.cm-catlist li a.is-active{
  background:#2e4663; border-color:#2e4663; color:#fff;
}

/* Recent Posts */
.cm-widget.cm-widget-recent{
  background:#f5f5f5; border-radius:22px; padding:20px; box-shadow:none;
}
.cm-widget-recent .cm-widget-title::after{
  content:""; display:block; height:1px; background:#E5ECF3; margin-top:12px;
}
.cm-recent-list{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px;
}
.cm-recent-item{
  display:grid; grid-template-columns:92px 1fr; gap:16px; align-items:start;
}
.cm-recent-thumb img{
  width:92px; height:72px; object-fit:cover; border-radius:14px;
}
.cm-recent-date{
  display:inline-flex; align-items:center; gap:10px; font-size:1rem; color:#6A7B90; line-height:1.2; margin:0 0 6px;
}
.cm-recent-date::before{
  content:""; display:inline-block; width:18px; height:18px;
  background-image:url('https://creomortgage.com/wp-content/uploads/2025/08/calendar-Icon.svg');
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.cm-recent-title{
  margin:0; color:#0f2c4c; font-family:'Hector','Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:400; font-size:1.25rem; line-height:1.25; text-decoration:none;
}
.cm-recent-title:hover{ text-decoration:underline; }

/* Popular Tags */
.cm-widget.cm-widget-tags{
  background:#f5f5f5; border-radius:22px; padding:20px; box-shadow:none;
}
.cm-widget-tags .cm-widget-title::after{
  content:""; display:block; height:1px; background:#E5ECF3; margin-top:12px;
}
.cm-tagcloud{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; align-content:start; margin:0; padding:0;
}
.cm-tagcloud a{
  display:flex; align-items:center; justify-content:center; padding:14px 16px; border-radius:14px;
  background:#fff; border:1px solid #E5ECF3; color:#2c3f55; text-decoration:none; font-weight:400; font-size:15.22px!important; line-height:1.1; box-shadow:none;
}
.cm-tagcloud a:hover{
  border-color:#D7E3EE; background:#2e4663; color:#fff; font-weight:700;
}
.cm-tagcloud a.is-active,
.cm-tagcloud a.current,
.cm-tagcloud a[aria-current="page"]{
  background:#2e4663; border-color:#2e4663; color:#fff;
}
@media (max-width:520px){
  .cm-tagcloud{ grid-template-columns:1fr; }
}

/* ======================================
   PAGINATION
====================================== */
.cm-pagination{
  display:flex; justify-content:center; margin:22px 0 8px;
}
.cm-pagination .page-numbers{
  display:inline-flex; min-width:36px; height:36px; align-items:center; justify-content:center;
  margin:0 4px; border-radius:8px; background:#fff; box-shadow:var(--cm-shadow); text-decoration:none; color:#1a314f;
}
.cm-pagination .page-numbers.current, .cm-pagination .page-numbers:hover{
  background:var(--cm-accent); color:#1d2b3a;
}

/* ======================================
   SINGLE — EXACT PDF LAYOUT
====================================== */
.cm-single-wrap{
  background:#fff;
  padding:40px 0px 0px 0px;
}
.cm-single-grid{
  max-width:1600px; margin:0 auto; padding:0 16px;
  display:grid; grid-template-columns:minmax(0, 1fr) 400px; gap:40px;
}
@media (max-width:992px){
  .cm-single-grid{ grid-template-columns:1fr; gap:28px; }
}

/* main article column */
.cm-article-col{ min-width:0; }

/* article card */
.cm-article{
  background:#f5f5f5;padding: 25px; border-radius: 22px;
}
.cm-article-media{ margin:0 0 18px; }
.cm-article-media img{
  display:block; width:100%; height:auto; border-radius:22px;
}

/* header (category + read time, then title, then date) */
.cm-article-header{ padding:0 2px 2px; }
.cm-article-kicker{
  display:flex; align-items:center; gap:10px;
  color:var(--cm-muted); text-transform:uppercase; letter-spacing:.06em; font-weight:800; font-size:.95rem;
}
.cm-article-cat{ color:#0f2c4c; }
.cm-dot{ opacity:.6; }
.cm-article-title{
  margin:8px 6px 30px 6px;
  font-family:'Hector','Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:400; font-size:clamp(2rem, 3.6vw, 3.25rem); line-height:1.12; color:#0f2c4c;
}
.cm-article-meta{
  color:#6a7b90; font-weight:700; margin-bottom:6px;
}
.cm-readtime{ color:#6a7b90; font-weight:700; }
.cm-readtime .cm-clock{
  width:18px; height:18px; display:inline-block; background-color:currentColor; margin-right:0;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23021D35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></g></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%23021D35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 2'/></g></svg>") center/contain no-repeat;
}

/* body */
.cm-article-body{
  color:#0f2c4c!important;
  font-family:'Just Sans',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.cm-article-body p{
  margin:0 0 16px; font-size:1.0625rem; line-height:1.7; color:#0f2c4c!important;font-family:'JUST sans';
}
.cm-article-body h2,
.cm-article-body h3{
  color:#0f2c4c; font-weight:900; margin:24px 0 10px;
}
.cm-article-body img{
  border-radius:18px;
}
.checklist ul li {
    color:#0f2c4c!important;
}
.checklist {
    border-top: 1px solid #E6EDF3;
    padding-top: 20px;
}
.blog-single .blog-title {
    font-family:'Hector Regular';
    font-weight:400;
    letter-spacing:1px;
}
/* pull quote (blockquote) */
.cm-article-body blockquote{
  margin:40px 0; padding: 16px 30px 16px 60px; border-radius:16px;
  background:#F5f5f5; border-left:4px solid #0f2c4c; position:relative; color:#0f2c4c; font-weight:700;
}
.cm-article-body blockquote::before{
  content:""; position:absolute;padding:20px; top:-15px; font-size:56px; line-height:1; color:#FFFFFF;background-color:#f5f5f5;
}
blockquote.wp-block-quote {
    border: 1px solid #0F2C4C!important;
}
blockquote cite, .wp-block-quote cite {
    border-radius:10px!important;
    background-color: #0F2C4C!important;
    font-family:'Hector Regular';
    font-weight:400;
    font-size:15.53px;
    padding:10px 45px;
    letter-spacing: 1px;
}

/* footer: tags + share */
.cm-article-footer{
  margin-top:18px; padding-top:14px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
}
.cm-article-tags{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
}
.cm-tags-label{ font-weight:400; letter-spacing:1px; color:#0f2c4c; margin-right:4px;  font-family:'Hector';font-size:18.8px;}
.cm-tag{
  display:inline-block; padding:10px 20px; border-radius:10px; border: 1px solid #E0E0E0; font-family:'JUST sans'; font-size: 13.16px; color:#4d5765;
}
.cm-tag:hover{ background:var(--cm-accent); color:#1d2b3a; }

.cm-article-share{
  display:flex; align-items:center; gap:10px;
}
.cm-share-label{ font-weight:400; letter-spacing:1px; color:#0f2c4c; font-family:'Hector';font-size:18.8px;}
.cm-share{
  width:38px; height:38px; border-radius:10px; background:#2e4663; display:inline-block;
  position:relative;
}
.cm-share::after{
  content:""; position:absolute; inset:0; margin:auto; width:20px; height:20px; background:#fff;
}
/* simple brand masks */
.cm-share--fb::after{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M14 9h3V6h-3c-1.7 0-3 1.3-3 3v2H8v3h3v6h3v-6h2.5l.5-3H14V9z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M14 9h3V6h-3c-1.7 0-3 1.3-3 3v2H8v3h3v6h3v-6h2.5l.5-3H14V9z'/></svg>") center/contain no-repeat;
}
.cm-share--x::after{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M3 3l8.5 9L3 21h3.5L12 14l5.5 7H21l-8.5-9L21 3h-3.5L12 10 6.5 3H3z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M3 3l8.5 9L3 21h3.5L12 14l5.5 7H21l-8.5-9L21 3h-3.5L12 10 6.5 3H3z'/></svg>") center/contain no-repeat;
}
.cm-share--ig::after{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm5 5a5 5 0 100 10 5 5 0 000-10zm6.5 1a1 1 0 10-.001-2.001A1 1 0 0018.5 8zM12 9a3 3 0 110 6 3 3 0 010-6z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M7 2h10a5 5 0 015 5v10a5 5 0 01-5 5H7a5 5 0 01-5-5V7a5 5 0 015-5zm5 5a5 5 0 100 10 5 5 0 000-10zm6.5 1a1 1 0 10-.001-2.001A1 1 0 0018.5 8zM12 9a3 3 0 110 6 3 3 0 010-6z'/></svg>") center/contain no-repeat;
}
.cm-share--ln::after{
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M4 3a2 2 0 110 4 2 2 0 010-4zM3 8h3v13H3V8zm7 0h3v1.8c.4-.8 1.4-2 3.4-2 3 0 3.6 2 3.6 4.7V21h-3v-6c0-1.4 0-3.2-2-3.2s-2.3 1.5-2.3 3.1V21h-3V8z'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000' d='M4 3a2 2 0 110 4 2 2 0 010-4zM3 8h3v13H3V8zm7 0h3v1.8c.4-.8 1.4-2 3.4-2 3 0 3.6 2 3.6 4.7V21h-3v-6c0-1.4 0-3.2-2-3.2s-2.3 1.5-2.3 3.1V21h-3V8z'/></svg>") center/contain no-repeat;
}

/* sidebar column */
.cm-article-sidebar{
  display:flex; flex-direction:column; gap:18px;
}

/* keep hero snug to content */
.cm-hero.cm-hero-image{ margin-bottom:8px; }