/*
    Theme Name:Apliiq Theme
    Version:1.0
*/


body {
    font-family: "Questrial", sans-serif;
}

h1,
h2,
h3,
h4 {
    font-weight: 700;
    color: #000;
}

.site-header {
    padding: 10px 10px;
}

.blog-title h2 {
    font-size: 38px;
    font-weight: 700;
    line-height: 44px;
    text-align: left;

}

.home-blog-post-image {
    width: 350px;
    height: 200px;
    margin-bottom: 20px;
}

.home-blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-title {
    padding: 40px 0px;
}

.homepage-blog-post-grid-item h4 {
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0em;
    text-align: left;
}

.blog-post-author {
    color: #FFA500;
    font-size: 16px;
    font-weight: 400;
}

.col-md-8 a{
	color: #007bff;
    text-decoration: none;
    background-color: transparent;
    font-size: 1rem;
    text-decoration: underline;
}

.by-author {
    color: #777;
    font-size: 16px;
    font-weight: 400;
}

.post-date {
    color: #777;
    font-size: 16px;
    font-weight: 400;
    line-height: 40px;
}

.blog-container {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.homepage-blog-post-wrapper {
    margin-bottom: 40px;
}

.footer-first-row {
    background-color: #F5F5F5;
    padding: 100px 0px;
}

.footer-second-row {
    background-color: #252525;
    padding: 20px 0px;
}

.copyright-bar {
    text-align: center;
    color: #fff;
}

#slider-id {
    list-style-image: url('/wp-content/uploads/2022/08/single-latest-article.png');
    padding-inline-start: 0px;
    padding-left: 20px;
    position: relative;
    margin-top: 50px;
}

#slider-id hr {
    position: absolute;
    left: 0;
    top: -40px;
    border-top: 1px solid #000;
    width: 100%;

}

#slider-id a {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 23px;
    letter-spacing: 0em;
    text-align: left;

}

#slider-id a:hover {
    color: #FFA500;
    text-decoration: none;
}


.categories {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
}

.categories {
    list-style: none;
}

.categories-list {
    margin-bottom: 120px;
}

.navbar-expand-md {
    justify-content: flex-end !important;
}

.menu-header-menu-container li {
    margin-left: 30px;
}

.menu-header-menu-container a {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;
}

.menu-header-menu-container a:hover {
    color: #FFA500;
    text-decoration: none;
}

.breadcrumb-row {
    padding: 15px 0px;
    background-color: #F8F8F8;
}

.sidebar-container {
    padding-left: 20px;
}

.single-blog-header {
	margin-bottom:5px;
}

.single-blog-header h1 {
    color: #000;
    font-size: 38px;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 20px;
}

.single-post-image {
    width: 100%;
    height: 450px;
    margin-bottom: 30px;
}

.single-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

}
.breadcrumb-row {
	padding:30px 0px;
}
#content {
	margin:50px;
}
#secondary {
	margin:50px;
}
.breadcrumb {
    background-color: transparent !important;
    margin-bottom: 0px !important;
}

.breadcrumb a {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
    text-align: left;

}

.breadcrumb a:hover {
    color: #FFA500;
    text-decoration: none;
}
.single-post-container {
    margin-bottom: 80px;
}

.recent-post-list img{
	margin-right:10px;
}
.separator-home {
	display:none;
}
.item-cat {
	display:none;
}

/* ===== APLIIQ BLOG CATEGORY ENHANCEMENTS ===== */

:root {
  --apl-text: #222222;
  --apl-text-muted: #5a5a5a;
  --apl-bg: #ffffff;
  --apl-primary: #00b798;
  --apl-accent: #ffb600;
  --apl-red: #ff0000;
  --apl-card-bg: #ffffff;
  --apl-card-border: #eee;
  --apl-shadow: 0 6px 18px rgba(0,0,0,0.06);
  --apl-radius: 16px;
}

/* tighten global content gutters on this template only */
.category-archive .category-content {
  margin: 40px auto;
  padding: 0 20px;
  max-width: 1160px;
}

/* HERO */
.category-hero {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}
.category-title {
  font-size: 44px;
  line-height: 1.15;
  margin: 0 0 10px;
  color: var(--apl-text);
}
.category-intro {
  color: var(--apl-text-muted);
  font-size: 18px;
  line-height: 1.65;
}

/* GRID */
.post-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 28px;
  margin-top: 28px;
}

/* Card spans (3 per row desktop) */
.post-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  background: var(--apl-card-bg);
  border: 1px solid var(--apl-card-border);
  border-radius: var(--apl-radius);
  overflow: hidden;
  box-shadow: var(--apl-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}

/* Thumbnail */
.post-card__thumb,
.post-card__thumb img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.post-card__thumb--placeholder {
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, #f2f2f2 0%, #eaeaea 100%);
}

/* Body */
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
}

.post-card__title {
  font-size: 22px;
  line-height: 1.3;
  margin: 0;
}
.post-card__title a {
  color: var(--apl-text);
  text-decoration: none;
}
.post-card__title a:hover {
  color: var(--apl-primary);
  text-decoration: underline;
}

.post-card__meta {
  font-size: 14px;
  color: var(--apl-text-muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.post-card__excerpt {
  color: var(--apl-text);
  font-size: 16px;
  line-height: 1.6;
}

/* Footer (button + badges) */
.post-card__footer {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  line-height: 1;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  will-change: transform;
}
.btn:focus-visible {
  outline: 3px solid rgba(0,183,152,0.35);
  outline-offset: 2px;
}
.btn--accent {
  background: var(--apl-primary);
  color: #fff;
}
.btn--accent:hover {
  background: #04c9a6;
  transform: translateY(-1px);
}

.post-card__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.badge {
  display: inline-block;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 10px;
  color: #222;
  background: rgba(255, 182, 0, .18); /* gold tint */
  border: 1px solid rgba(255, 182, 0, .35);
}

/* Pagination */
.pagination-wrap {
  margin: 36px 0 10px;
  display: flex;
  justify-content: center;
}
.pagination a, .pagination span, .page-numbers {
  display: inline-block;
  margin: 0 6px;
  padding: 10px 14px;
  border: 1px solid #e2e2e2;
  border-radius: 999px;
  text-decoration: none !important;
  color: var(--apl-text);
  font-weight: 600;
}
.page-numbers.current {
  background: var(--apl-accent);
  border-color: var(--apl-accent);
  color: #000;
}
.pagination a:hover {
  border-color: var(--apl-primary);
  color: var(--apl-primary);
}

/* SIDEBAR tidy (optional) */
#secondary {
  margin: 40px 20px;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .post-card { grid-column: span 6; } /* 2 per row */
}
@media (max-width: 700px) {
  .category-title { font-size: 34px; }
  .post-grid { gap: 20px; }
  .post-card { grid-column: span 12; } /* 1 per row */
  .post-card__thumb,
  .post-card__thumb img,
  .post-card__thumb--placeholder { height: 200px; }
}

/* ACCESSIBILITY / PREFERS REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .post-card,
  .btn { transition: none; }
}

/* ===== Apliiq Blog Sidebar (Right Rail) ===== */
:root {
  --apl-ink: #222222;
  --apl-text: #5a5a5a;
  --apl-green: #00b798;
  --apl-gold: #ffb600;
  --apl-red: #ff0000;
  --apl-white: #ffffff;
  --apl-border: #e8e8e8;
  --apl-bg-soft: #fafafa;
}

.single-sidebar .sidebar-container {
  position: sticky;
  top: 24px;
}

.single-sidebar .sidebar-section {
  background: var(--apl-white);
  border: 1px solid var(--apl-border);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.single-sidebar .sidebar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--apl-ink);
  letter-spacing: .2px;
}

.single-sidebar .sidebar-title-icon {
  display: inline-block;
  flex: 0 0 auto;
  transform: translateY(1px);
}

.single-sidebar .sidebar-list,
.single-sidebar .sidebar-categories {
  list-style: none;
  padding: 0;
  margin: 0;
}

.single-sidebar .sidebar-item,
.single-sidebar .sidebar-categories > li {
  border-top: 1px solid var(--apl-border);
}

.single-sidebar .sidebar-item:first-child,
.single-sidebar .sidebar-categories > li:first-child {
  border-top: 0;
}

.single-sidebar .sidebar-link,
.single-sidebar .sidebar-categories a {
  display: block;
  padding: 10px 4px;
  text-decoration: none;
  color: var(--apl-ink);
  font-size: 15px;
  line-height: 1.35;
  transition: color .15s ease, text-underline-offset .15s ease;
  text-underline-offset: 3px;
}

.single-sidebar .sidebar-link:hover,
.single-sidebar .sidebar-link:focus,
.single-sidebar .sidebar-categories a:hover,
.single-sidebar .sidebar-categories a:focus {
  color: var(--apl-green);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.single-sidebar .sidebar-link:active,
.single-sidebar .sidebar-categories a:active {
  color: var(--apl-red);
}

/* Category count badge */
.single-sidebar .sidebar-categories .cat-item a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.single-sidebar .sidebar-categories .cat-item .count {
  /* wp_list_categories prints counts inside parentheses; style via pseudo: */
}

.single-sidebar .sidebar-categories .cat-item a::after {
  content: attr(data-count);
}

/* Transform "(12)" counts to pill badges */
.single-sidebar .sidebar-categories .cat-item {
  position: relative;
}
.single-sidebar .sidebar-categories .cat-item > a {
  position: relative;
  padding-right: 38px;
}
.single-sidebar .sidebar-categories .cat-item > a::after {
  /* Read the text node containing count by targeting sibling text; if your theme prints as "(12)",
     you can switch to the 'show_count' filter for custom markup—otherwise simulate a pill on the right: */
  content: attr(data-count);
  display: inline-block;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 26px;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  padding: 5px 6px;
  border-radius: 999px;
  background: var(--apl-bg-soft);
  color: var(--apl-text);
  border: 1px solid var(--apl-border);
}

/* Divider alternative for sections, if needed */
.single-sidebar .sidebar-section + .sidebar-section {
  /* subtle spacing rhythm already; add accent top border if you like */
}

/* Compact mode on small screens */
@media (max-width: 991px) {
  .single-sidebar .sidebar-container {
    position: static;
  }
  .single-sidebar .sidebar-section {
    border-radius: 12px;
    padding: 14px 16px;
  }
  .single-sidebar .sidebar-title {
    font-size: 15px;
    margin-bottom: 8px;
  }
  .single-sidebar .sidebar-link,
  .single-sidebar .sidebar-categories a {
    font-size: 14.5px;
    padding: 9px 2px;
  }
}

/* Optional: highlight the section that matches current taxonomy context */
body.category .sidebar-title,
body.single-post .related-by-tags + .single-sidebar .sidebar-title { /* example hook if you add body classes */
  /* color: var(--apl-gold); */
}

/* Accessibility: focus ring for keyboard users */
.single-sidebar .sidebar-link:focus-visible,
.single-sidebar .sidebar-categories a:focus-visible {
  outline: 2px solid var(--apl-gold);
  outline-offset: 2px;
  border-radius: 6px;
}
/* ===== Apliiq Single Post Layout Widening ===== */
body.single-post .single-blog-header .blog-container,
body.single-post .single-post-container {
  max-width: 95% !important;
  width: 95% !important;
}

/* Keep rail stickiness */
#sticky-toc, #sticky-sidebar { position: sticky; top: 24px; }

/* ===== Shared widget look (matches right rail) ===== */
:root {
  --apl-ink:#222222; --apl-text:#5a5a5a; --apl-green:#00b798;
  --apl-gold:#ffb600; --apl-red:#ff0000; --apl-white:#ffffff;
  --apl-border:#e8e8e8; --apl-bg-soft:#fafafa;
}

.sidebar-section{
  background:var(--apl-white); border:1px solid var(--apl-border);
  border-radius:16px; padding:16px 18px; margin-bottom:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.sidebar-title{
  display:flex; align-items:center; gap:10px; margin:0 0 10px 0;
  font-size:16px; line-height:1.25; font-weight:700; color:var(--apl-ink);
  letter-spacing:.2px;
}
.sidebar-title::after{
  content:""; display:block; width:36px; height:3px; margin-top:8px;
  border-radius:2px; background:var(--apl-green);
}
.sidebar-title-icon{ flex:0 0 auto; transform:translateY(1px); }
.sidebar-list{ list-style:none; padding:0; margin:0; }
.sidebar-item{ border-top:1px solid var(--apl-border); }
.sidebar-item:first-child{ border-top:0; }
.sidebar-link{
  display:block; padding:10px 4px; text-decoration:none; color:var(--apl-ink);
  font-size:15px; line-height:1.35; transition:color .15s, text-underline-offset .15s;
  text-underline-offset:3px;
}
.sidebar-link:hover,.sidebar-link:focus{ color:var(--apl-green); text-decoration:underline; text-underline-offset:4px; }
.sidebar-link:active{ color:var(--apl-red); }

/* ===== TOC specifics ===== */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; } /* avoid heading under sticky header */

.toc-section .toc-list > .toc-item > .toc-link { font-weight:600; }

/* Nested levels */
.toc-sublist{ list-style:none; padding-left:14px; margin:0; }
.toc-sublist .toc-item{ border-top:0; }

/* Clamp long headings (Fix #3) */
.toc-link{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  white-space:normal;
  word-break:break-word;
}

/* Responsive tweaks */
@media (max-width: 991px){
  #sticky-toc { position: static; margin-bottom:16px; }
  .sidebar-section{ border-radius:12px; padding:14px 16px; }
  .sidebar-title{ font-size:15px; margin-bottom:8px; }
  .sidebar-link{ font-size:14.5px; padding:9px 2px; }
}
/* ===== Layout width: widen single posts to 95% ===== */
body.single-post .single-post-fluid .single-post-container,
body.single-post .single-blog-header .blog-container {
  width: 95vw !important;
  max-width: 95vw !important;
}

/* If your theme caps .container with a strong max-width, force our “wide” container */
body.single-post .single-post-container.single-post-wide {
  width: 95vw !important;
  max-width: 1600px !important; /* tune if you want a hard ceiling */
}

/* Ensure the row doesn’t collapse spacing */
body.single-post .single-post-container .row {
  margin-left: -12px;
  margin-right: -12px;
}
body.single-post .single-post-container [class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
}

/* ===== Make rails sticky and keep room to breathe ===== */
#sticky-toc, #sticky-sidebar { position: sticky; top: 24px; }

/* ===== Shared widget look (right and left) ===== */
:root {
  --apl-ink:#222222; --apl-text:#5a5a5a; --apl-green:#00b798;
  --apl-gold:#ffb600; --apl-red:#ff0000; --apl-white:#ffffff;
  --apl-border:#e8e8e8; --apl-bg-soft:#fafafa;
}
.sidebar-section{
  background:var(--apl-white); border:1px solid var(--apl-border);
  border-radius:16px; padding:16px 18px; margin-bottom:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.sidebar-title{
  display:flex; align-items:center; gap:10px; margin:0 0 10px 0;
  font-size:16px; line-height:1.25; font-weight:700; color:var(--apl-ink);
}
.sidebar-title::after{
  content:""; display:block; width:36px; height:3px; margin-top:8px;
  border-radius:2px; background:var(--apl-green);
}
.sidebar-list{ list-style:none; padding:0; margin:0; }
.sidebar-item{ border-top:1px solid var(--apl-border); }
.sidebar-item:first-child{ border-top:0; }
.sidebar-link{
  display:block; padding:10px 4px; text-decoration:none; color:var(--apl-ink);
  font-size:15px; line-height:1.35; transition:color .15s, text-underline-offset .15s;
  text-underline-offset:3px;
}
.sidebar-link:hover,.sidebar-link:focus{ color:var(--apl-green); text-decoration:underline; text-underline-offset:4px; }
.sidebar-link:active{ color:var(--apl-red); }

/* ===== TOC polish ===== */
html { scroll-behavior: smooth; }
:target { scroll-margin-top: 90px; }

.toc-section .toc-list > .toc-item > .toc-link { font-weight:600; }
.toc-sublist{ list-style:none; padding-left:14px; margin:0; }
.toc-sublist .toc-item{ border-top:0; }

/* Clamp TOC text to 2 lines, with ellipsis */
.toc-link{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}

/* Don’t let images overflow the narrower main column */
.single-post-content img { max-width: 100%; height: auto; }

/* Medium and below: stack rails */
@media (max-width: 991.98px){
  #sticky-toc { position: static; margin-bottom:16px; }
  .sidebar-section{ border-radius:12px; padding:14px 16px; }
  .sidebar-title{ font-size:15px; margin-bottom:8px; }
  .sidebar-link{ font-size:14.5px; padding:9px 2px; }
}
/* ===== Widen header + body containers just on single posts ===== */
body.single-post .single-blog-header .blog-container,
body.single-post .single-post-fluid .single-post-container {
  /* Wider, but capped for ultra-wide monitors */
  width: min(96vw, 1500px) !important;
  max-width: min(96vw, 1500px) !important;
}

/* Add a little edge padding so content doesn’t smack the browser chrome */
body.single-post .single-post-fluid .single-post-container {
  padding-left: 16px;
  padding-right: 16px;
}

/* ===== Turn the 3-column row into a grid with real gaps ===== */
body.single-post .single-post-container .row.three-col {
  /* kill Bootstrap's negative row margins so grid aligns cleanly */
  margin-left: 0 !important;
  margin-right: 0 !important;

  display: grid;
  grid-template-columns: 2fr 7fr 3fr;   /* left TOC / main / right rail */
  column-gap: 40px;                      /* space between columns */
  align-items: start;
}

/* Remove Bootstrap column padding inside our grid so gap is the only spacer */
body.single-post .row.three-col > [class*="col-"] {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep both rails sticky with a little top offset */
#sticky-toc, #sticky-sidebar { position: sticky; top: 24px; }

/* The center column often needs a tad more breathing room on each side */
body.single-post main.col-lg-7 {
  /* optional micro padding if you want a softer feel */
  padding-left: 4px;
  padding-right: 4px;
}

/* ===== TOC readability: clamp long items to 2 lines with ellipsis ===== */
.toc-link{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}

/* Keep headings visible after anchor jump (if you have sticky header) */
:target { scroll-margin-top: 90px; }

/* ===== Responsive fallbacks ===== */
@media (max-width: 1199.98px){ /* below lg, stack or reduce gap */
  body.single-post .single-post-container .row.three-col {
    grid-template-columns: 1fr;   /* stack */
    row-gap: 24px;
  }
  /* give the side blocks some separation when stacked */
  #sticky-toc, #sticky-sidebar { position: static; }
}

/* If your theme enforces strong container max-width elsewhere, these ensure we still get breathing room */
@media (min-width: 1200px){
  body.single-post .single-blog-header .blog-container,
  body.single-post .single-post-fluid .single-post-container {
    max-width: 1500px !important;
  }
}
/* ===== Meta row layout (same line) ===== */
.post-meta-row{
  display:flex;
  align-items:center;                 /* vertical centering */
  justify-content:space-between;      /* left/right balance */
  gap:1rem;
  flex-wrap:wrap;                     /* graceful wrap on small screens */
  padding:.5rem 0;
  border-bottom:1px solid #e2e8f0;    /* optional divider */
}

/* Left: breadcrumbs take flexible room */
.post-crumbs{
  flex:1 1 auto;    /* expand/shrink as needed */
  min-width:0;      /* allow ellipsis/truncation inside */
  line-height:1.4;
  display:flex; 
  flex-wrap:wrap;   /* wrap crumbs onto the next line if needed */
  column-gap:.5rem; 
  row-gap:.25rem;
}

/* Generic crumb styles (works whether $crumbs_clean prints links, spans, etc.) */
.post-crumbs > * { white-space:nowrap; }
.post-crumbs a{
  color:#334155; text-decoration:none; font-weight:500;
}
.post-crumbs a:hover{ text-decoration:underline; }
.post-crumbs .sep, .post-crumbs .post-crumbs-sep{ color:#94a3b8; }

/* Optional subtle fade when crumbs overflow on single-line layouts */
@supports (mask-image: linear-gradient(black, black)){
  .post-crumbs{ mask-image: linear-gradient(to right, #000 90%, transparent); }
}

/* Right: author/date stay tight on the right */
.post-meta-right{
  flex:0 0 auto; 
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#475569;
  font-size:.9rem;
  white-space:nowrap;   /* keep it on one line */
}
.post-meta-right .by-author{ opacity:.85; }
.post-meta-right .meta-sep{ opacity:.6; }

/* Dark mode polish (optional) */
@media (prefers-color-scheme: dark){
  .post-meta-row{ border-bottom-color:#1f2937; }
  .post-crumbs a{ color:#cbd5e1; }
  .post-crumbs a:hover{ color:#fff; }
  .post-crumbs .sep, .post-crumbs .post-crumbs-sep{ color:#64748b; }
  .post-meta-right{ color:#cbd5e1; }
}

/* Stack on narrow screens */
@media (max-width: 640px){
  .post-meta-row{
    flex-direction:column;
    align-items:flex-start;
    gap:.4rem;
  }
  .post-meta-right{ white-space:normal; }
}
/* Core layout */
.category-template .container {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

/* Hero */
.category-template .category-title {
  font-size: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
  line-height: 1.1;
  font-weight: 800;
  margin: 0 0 .5rem;
}
.category-template .category-intro {
  color: #5a5a5a;
  margin-bottom: 1.25rem;
}

/* Toolbar */
.category-template .category-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: .75rem;
  margin: 1rem 0 1.25rem;
}
.category-template .toolbar-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}
@media (min-width: 720px) {
  .category-template .toolbar-row {
    grid-template-columns: 1fr 240px 160px auto;
    align-items: center;
  }
}
.category-template .input,
.category-template .select {
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: .6rem .7rem;
  font-size: .95rem;
}
.category-template .btn {
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  padding: .55rem .9rem;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
}
.category-template .btn--accent {
  background: #00b798; /* Apliiq teal */
  color: #fff;
  border-color: #00b798;
}
.category-template .btn--accent:hover { filter: brightness(.95); }

/* Grid */
.category-template .post-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  align-items: stretch;
}

/* Card */
.category-template .post-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover:hover) {
  .category-template .post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border-color: rgba(0,0,0,.1);
  }
}

/* Thumb */
.category-template .post-card__thumb,
.category-template .post-card__thumb--placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: #f6f6f6;
}
.category-template .post-card__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Body */
.category-template .post-card__body { padding: 1rem; }
.category-template .post-card__title { 
  margin: 0 0 .4rem; font-weight: 800; font-size: 1.1rem; line-height: 1.25;
}
.category-template .post-card__title a { color: #222222; text-decoration: none; }
.category-template .post-card__title a:hover { text-decoration: underline; }
.category-template .post-card__meta { color: #6b7280; font-size: .85rem; margin-bottom: .5rem; }
.category-template .post-card__excerpt { color: #374151; }

/* Footer */
.category-template .post-card__footer {
  display: flex; gap: .5rem; align-items: center; justify-content: space-between;
  padding-top: .75rem;
}
.category-template .post-card__badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.category-template .badge {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: .25rem .55rem;
  font-size: .8rem;
  color: #5a5a5a;
}
.category-template .badge--primary {
  background: #ffb600; /* Apliiq yellow */
  border-color: #ffb600;
  color: #222222;
}

/* Pagination */
.category-template .pagination-wrap {
  display: flex; justify-content: center; gap: .5rem; margin: 1.5rem 0 0;
}
.category-template .pagination a,
.category-template .pagination span {
  border: 1px solid rgba(0,0,0,.08);
  padding: .5rem .75rem; border-radius: 999px; font-weight: 700; text-decoration: none;
}
.category-template .pagination .current { background:#222222; color:#fff; border-color:#222222; }

• Utilities */
.category-template .sr-only {
  position: absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* =========================
   CATEGORY TEMPLATE POLISH
   Scope: only this template
   ========================= */

.category-template--v2 {
  /* brand tokens */
  --ink: #222222;
  --muted: #5a5a5a;
  --muted-2: #6b7280;
  --bg: #ffffff;
  --line: rgba(0,0,0,.08);
  --card-shadow: 0 8px 24px rgba(0,0,0,.08);

  /* brand colors from Apliiq */
  --brand: #00b798;   /* teal */
  --accent: #ffb600;  /* yellow */
  --danger: #ff0000;  /* red */

  /* type scale (locks sizes) */
  --fs-xxl: clamp(28px, 3.2vw, 40px);
  --fs-xl:  clamp(20px, 2.2vw, 24px);
  --fs-lg:  18px;
  --fs-md:  16px;
  --fs-sm:  14px;
  --fs-xs:  12.5px;

  --radius: 14px;
  --pad: 1rem;
}

/* container limits */
.category-template--v2 .container{
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
  color: var(--ink);
}

/* ===== HERO (title + intro) */
.category-template--v2 .category-title{
  font: 800 var(--fs-xxl)/1.1 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 0 0 .5rem;
}
.category-template--v2 .category-intro{
  color: var(--muted);
  font-size: var(--fs-md);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* ===== TOOLBAR (if present) */
.category-template--v2 .category-toolbar{
  position: sticky; top: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem;
  margin: 1rem 0 1.25rem;
}
.category-template--v2 .toolbar-row{
  display: grid; gap: .5rem; grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .category-template--v2 .toolbar-row{ grid-template-columns: 1fr 240px 160px auto; align-items: center; }
}
.category-template--v2 .input,
.category-template--v2 .select{
  width: 100%; border:1px solid rgba(0,0,0,.12); border-radius:10px; padding:.6rem .7rem; font-size: var(--fs-md);
}
.category-template--v2 .btn{
  border-radius:999px; border:1px solid rgba(0,0,0,.12); padding:.55rem .9rem; font-weight:700; line-height:1; text-decoration:none;
}
.category-template--v2 .btn--accent{ background:var(--brand); color:#fff; border-color:var(--brand); }
.category-template--v2 .btn--accent:hover{ filter:brightness(.95); }

/* ===== GRID */
.category-template--v2 .post-grid{
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-items: stretch;
}

/* ===== CARD COMPOSITION */
.category-template--v2 .post-card{
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display:flex; flex-direction:column; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover:hover){
  .category-template--v2 .post-card:hover{ transform: translateY(-2px); box-shadow: var(--card-shadow); border-color: rgba(0,0,0,.1); }
}

/* Thumb: force identical height via 16:9 (uses 'apliiq-card' size) */
.category-template--v2 .post-card__thumb,
.category-template--v2 .post-card__thumb--placeholder{
  display:block; width:100%; aspect-ratio:16/9; background:#f6f6f6;
}
.category-template--v2 .post-card__thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Body */
.category-template--v2 .post-card__body{ padding: var(--pad); display:flex; flex-direction:column; gap:.5rem; }

/* Title: single style everywhere */
.category-template--v2 .post-card__title{
  font: 800 var(--fs-xl)/1.25 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
}
.category-template--v2 .post-card__title a{ color: var(--ink); text-decoration:none; }
.category-template--v2 .post-card__title a:hover{ text-decoration: underline; }

/* Meta: one style, one color */
.category-template--v2 .post-card__meta{
  color: var(--muted-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
}
.category-template--v2 .post-card__meta .post-date{ white-space:nowrap; }

/* Excerpt: clamp to 3 lines to kill uneven heights */
.category-template--v2 .post-card__excerpt p{ margin:0; }
.category-template--v2 .post-card__excerpt{
  color:#374151; font-size: var(--fs-md); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Footer zone */
.category-template--v2 .post-card__footer{
  margin-top: auto; /* pushes footer to bottom for even cards */
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-top:.5rem;
}
.category-template--v2 .post-card__footer .btn--accent{
  font-size: var(--fs-sm);
}

/* Badges: uniform chip style; primary = the matched category */
.category-template--v2 .post-card__badges{ display:flex; gap:.4rem; flex-wrap:wrap; }
.category-template--v2 .badge{
  border:1px solid var(--line); border-radius:999px; padding:.25rem .55rem;
  font-size: var(--fs-xs); color: var(--muted); font-weight:700;
}
.category-template--v2 .badge--primary{ background: var(--accent); border-color: var(--accent); color: var(--ink); }

/* Pagination */
.category-template--v2 .pagination-wrap{
  display:flex; justify-content:center; gap:.5rem; margin:1.5rem 0 0;
}
.category-template--v2 .pagination a,
.category-template--v2 .pagination span{
  border:1px solid var(--line); padding:.5rem .75rem; border-radius:999px; font-weight:700; text-decoration:none;
}
.category-template--v2 .pagination .current{ background: var(--ink); color:#fff; border-color: var(--ink); }

/* ===== GLOBAL NORMALIZATION inside the template ===== */

/* kill theme weight/size inconsistencies within cards */
.category-template--v2 .post-card *{
  letter-spacing: normal;
}
.category-template--v2 .post-card h1,
.category-template--v2 .post-card h2,
.category-template--v2 .post-card h3,
.category-template--v2 .post-card h4,
.category-template--v2 .post-card h5,
.category-template--v2 .post-card h6{
  font-weight: 800 !important;
  font-size: inherit !important; /* titles already set above */
  line-height: inherit !important;
  margin: 0;
}

/* unify link color treatment inside cards */
.category-template--v2 .post-card a{ color: var(--ink); }
.category-template--v2 .post-card a:hover{ color: var(--ink); text-decoration: underline; }

/* ensure no rogue margins blow up spacing */
.category-template--v2 .post-card p + p{ margin-top:.5rem; }
.category-template--v2 .post-card ul{ margin: .5rem 0 0 1rem; }

/* defensive: neutralize theme floats/widths just in case */
.category-template--v2 .post-card{ width:auto !important; max-width:none !important; float:none !important; }

/* crisp images on high dpi */
.category-template--v2 img{ image-rendering:-webkit-optimize-contrast; }

/* ===== Apliiq Blog Header CTA (mobile-first, no JS) ===== */
:root {
  --apl-primary: #00b798;
  --apl-dark: #222222;
  --apl-text: #5a5a5a;
  --apl-accent: #ffb600;
  --apl-white: #ffffff;
  --apl-red: #ff0000; /* not used, reserved for future alert state */
}

/* Ensure header lays out nicely; these selectors are safe defaults. */
.site-header, .navbar, header[role="banner"] {
  display: flex;
  align-items: center;
  justify-content: space-between; /* pushes CTA to the right */
  gap: 1rem;
}

/* CTA base */
.header-cta {
  --btn-bg: var(--apl-primary);
  --btn-text: var(--apl-white);
  --btn-border: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1rem;            /* 10px 16px */
  border-radius: 999px;               /* pill */
  border: 2px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-weight: 700;
  font-size: 0.9375rem;              /* 15px */
  line-height: 1;
  text-decoration: none;
  letter-spacing: .01em;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Label (kept for future icon variants) */
.header-cta__label { display: inline-block; }

/* Hover/Focus/Active states */
.header-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
.header-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.header-cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--apl-accent) 60%, white 40%);
  outline-offset: 2px;
}

/* High-contrast variant for dark headers */
header.dark .header-cta,
.site-header.dark .header-cta,
.navbar.dark .header-cta {
  --btn-bg: var(--apl-accent);
  --btn-text: var(--apl-dark);
}

/* Ghost (outline) variant — optional utility class */
.header-cta.is-ghost {
  --btn-bg: transparent;
  --btn-text: var(--apl-primary);
  --btn-border: var(--apl-primary);
  box-shadow: none;
}
.header-cta.is-ghost:hover {
  background: color-mix(in srgb, var(--apl-primary) 12%, white 88%);
}

/* Size utilities (optional) */
.header-cta.is-sm { padding: 0.5rem 0.875rem; font-size: 0.875rem; }
.header-cta.is-lg { padding: 0.75rem 1.125rem; font-size: 1rem; }

/* Responsive alignment helpers — only apply if your header stacks on small screens */
@media (max-width: 767px) {
  .site-header, .navbar, header[role="banner"] {
    flex-wrap: wrap;
  }
  /* If your logo/nav consumes full width, the CTA will wrap below; force it right when possible */
  .header-cta { margin-left: auto; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .header-cta { transition: none; }
}
.post-card__thumb {
  display: block;
  width: 100%;
  min-height: 450px; /* adjust to your design */
  overflow: hidden;
  border-radius: 8px; /* matches your cards, optional */
  background: #f7f7f7; /* placeholder look for no-thumbnail cases */
}

.post-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}