/* ==========================================================================
   PlBlog — front-office stylesheet
   Mobile-first, .pl- prefix, primary accent #25b9d7
   ========================================================================== */

/* --------------------------------------------------------------------------
   Custom properties
   -------------------------------------------------------------------------- */
:root {
  --pl-primary:    #25b9d7;
  --pl-primary-dk: #1a96b0;
  --pl-text:       #142126;
  --pl-muted:      #666666;
  --pl-border:     #e0e0e0;
  --pl-bg-light:   #f7f8fa;
  --pl-radius:     4px;
  --pl-gap:        1.25rem;
  --pl-max-post:   800px;
}

/* --------------------------------------------------------------------------
   Post card
   -------------------------------------------------------------------------- */
.pl-post-card__image-link {
  display: block;
  overflow: hidden;
  border-top-left-radius: var(--pl-radius);
  border-top-right-radius: var(--pl-radius);
  aspect-ratio: 21 / 9 !important;
  background: #f3f4f6;
}

.pl-post-card__image {
  width: 100%;
  height: 100%;
  aspect-ratio: 21 / 9 !important;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.pl-post-card:hover .pl-post-card__image {
  transform: scale(1.03);
}

.pl-post__hero {
  margin: 0 0 1.5rem;
  border-radius: var(--pl-radius);
  overflow: hidden;
  aspect-ratio: 21 / 9 !important;
  background: #f3f4f6;
}

.pl-post__hero-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 21 / 9 !important;
  object-fit: cover;
  display: block;
}

.pl-post-card {
  background: #fff;
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}

.pl-post-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

/* Avatar inline with meta */
.pl-post-card__avatar-link {
  display: inline-flex;
  flex-shrink: 0;
}

.pl-post-card__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

.pl-post-card__header {
  padding: 1rem 1rem 0;
}

.pl-post-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  line-height: 1.3;
}

.pl-post-card__title a {
  color: var(--pl-text);
  text-decoration: none;
}

.pl-post-card__title a:hover {
  color: var(--pl-primary);
}

.pl-post-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--pl-muted);
  margin-bottom: 0.5rem;
}

.pl-post-card__author {
  font-style: normal;
  text-decoration: none;
  color: var(--pl-text);
  font-weight: 600;
}

.pl-post-card__author:hover {
  color: var(--pl-primary);
}

.pl-post-card__meta-sep {
  color: var(--pl-border);
}

.pl-post-card__date {
  font-style: normal;
}

.pl-post-card__excerpt {
  padding: 0 1rem;
  font-size: 0.9rem;
  color: var(--pl-muted);
  line-height: 1.5;
  margin: 0 0 0.75rem;
}

.pl-post-card__footer {
  padding: 0.5rem 1rem 0.75rem;
  border-top: 1px solid var(--pl-border);
}

.pl-post-card__category {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pl-primary) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.pl-post-card__category:hover {
  color: var(--pl-primary-dk) !important;
}

/* --------------------------------------------------------------------------
   Blog listing & grids
   -------------------------------------------------------------------------- */
.pl-blog__section-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--pl-text);
}

.pl-blog__featured-grid,
.pl-blog__featured-grid,
.pl-blog__listing,
.pl-category__grid,
.pl-tag__grid,
.pl-author__grid,
.pl-related__grid,
.pl-archive__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--pl-gap);
}

.pl-blog__featured {
  margin-bottom: calc(var(--pl-gap) * 2);
}

.pl-blog__empty {
  color: var(--pl-muted);
  font-style: italic;
  padding: 2rem 0;
}

/* --------------------------------------------------------------------------
   Category page
   -------------------------------------------------------------------------- */
.pl-category__description {
  color: var(--pl-muted);
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Author page
   -------------------------------------------------------------------------- */
.pl-author__header {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.pl-author__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.pl-author__expertise {
  font-size: 0.9rem;
  color: var(--pl-primary);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.pl-author__bio {
  font-size: 0.95rem;
  color: var(--pl-muted);
  line-height: 1.6;
  margin: 0 0 0.75rem;
}

.pl-author__job-title {
  font-size: 0.95rem;
  color: var(--pl-muted);
  font-weight: 500;
  margin: 0 0 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pl-author__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 24px;
  height: 24px;
  color: var(--pl-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.pl-author__icon:hover {
  color: var(--pl-primary);
}

.pl-author__posts-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--pl-text);
}

/* --------------------------------------------------------------------------
   Single post
   -------------------------------------------------------------------------- */
.pl-post {
  width: 100%;
}

.pl-post__header {
  margin-bottom: 1.5rem;
}

.pl-post__title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: var(--pl-text);
}

.pl-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--pl-muted);
}

.pl-post__category a {
  color: var(--pl-primary);
  text-decoration: none;
  font-weight: 600;
}

.pl-post__author {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  margin: 0;
}

.pl-post__author a {
  color: var(--pl-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.pl-post__author a:hover {
  color: var(--pl-primary);
}

.pl-post__author strong {
  font-weight: 700;
}

.pl-post__meta-avatar img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.pl-post__meta-sep {
  color: var(--pl-border);
  user-select: none;
}

.pl-post__date {
  color: var(--pl-muted);
}

/* Content area — handles GrapesJS output with inline styles */
.pl-post__content {
  font-size: 1rem;
  line-height: 1.4rem;
  color: var(--pl-text);
}

/* Hero section with background image — dark overlay + white text */
.pl-post__content .pl-section--hero,
.pl-post__content [style*="background-image"] {
  position: relative;
  color: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.pl-post__content .pl-section--hero h2,
.pl-post__content .pl-section--hero h3,
.pl-post__content .pl-section--hero p,
.pl-post__content [style*="background-image"] h2,
.pl-post__content [style*="background-image"] h3,
.pl-post__content [style*="background-image"] p {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

/* Dark overlay for readability on background images */
.pl-post__content .pl-section--hero::before,
.pl-post__content [style*="background-image"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.55));
  z-index: 0;
  border-radius: inherit;
}

.pl-post__content .pl-section--hero > *,
.pl-post__content [style*="background-image"] > * {
  position: relative;
  z-index: 1;
}

/* Strip GrapesJS body wrapper and reset styles */
.pl-post__content > style {
  display: none;
}

/* GrapesJS inline column layouts */
.pl-post__content [style*="display: flex"],
.pl-post__content [style*="display:flex"] {
  gap: 1.5rem;
}

/* CTA buttons in content */
.pl-post__content .pl-cta__button,
.pl-post__content a[class*="pl-cta__button"] {
  display: inline-block;
  padding: 10px 24px;
  border-radius: var(--pl-radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
}

.pl-post__content a.pl-cta__button--primary {
  background: var(--pl-primary);
  color: #fff !important;
}

.pl-post__content a.pl-cta__button--secondary {
  background: #333;
  color: #fff !important;
}

/* Product cards in content */
.pl-post__content .pl-products__card {
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  overflow: hidden;
}

.pl-post__content .pl-products__info {
  padding: 12px;
}

.pl-post__content .pl-products__name {
  margin: 0 0 4px;
  font-size: 1rem;
}

.pl-post__content .pl-products__price {
  font-weight: 600;
  color: var(--pl-primary);
}

.pl-post__content h2,
.pl-post__content h3,
.pl-post__content h4 {
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.pl-post__content p {
  margin-bottom: 1.25rem;
}

.pl-post__content a {
  color: #14191f;
}

.pl-post__content a[class*="pl-cta__button"] {
  color: #fff !important;
}

.pl-post__content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--pl-radius);
}

/* --------------------------------------------------------------------------
   Content blocks
   -------------------------------------------------------------------------- */

/* Image block */
.pl-image {
  margin: 1.5rem 0;
  text-align: left;
}

.pl-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--pl-radius);
}

.pl-image figcaption {
  font-size: 0.8rem;
  color: var(--pl-muted);
  margin-top: 0.4rem;
}

/* Gallery block */
.pl-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 1.5rem 0;
}

@media (min-width: 600px) {
  .pl-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pl-gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--pl-radius);
  display: block;
}

/* Video block — click-to-load */
.pl-video {
  margin: 1.5rem 0;
}

.pl-video__wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  background: #000;
  border-radius: var(--pl-radius);
  cursor: pointer;
}

.pl-video__wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.pl-video__thumbnail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pl-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.65);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: none;
  transition: background 0.2s;
}

.pl-video__wrapper:hover .pl-video__play {
  background: var(--pl-primary);
}

.pl-video__play::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 20px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}

/* Columns block */
.pl-columns {
  display: grid;
  gap: var(--pl-gap);
  margin: 1.5rem 0;
}

.pl-columns--2 {
  grid-template-columns: 1fr;
}

.pl-columns--3 {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .pl-columns--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .pl-columns--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pl-columns__col {
  min-width: 0;
}

/* Spacer block */
.pl-spacer {
  display: block;
  /* Height set via inline style by the block renderer */
}

/* CTA block */
.pl-cta {
  background: var(--pl-bg-light);
  border: 1px solid var(--pl-border);
  border-left: 4px solid var(--pl-primary);
  border-radius: var(--pl-radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  text-align: left;
}

.pl-cta__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.pl-cta__text {
  color: var(--pl-muted);
  margin: 0 0 1rem;
}

.pl-cta__button {
  display: inline-block;
  padding: 0.65rem 1.5rem;
  background: var(--pl-primary);
  color: #fff;
  text-decoration: none;
  border-radius: var(--pl-radius);
  font-weight: 700;
  transition: background 0.2s;
}

.pl-cta__button:hover {
  background: var(--pl-primary-dk);
  color: #fff;
}

/* Products block */
.pl-products {
  display: grid;
  gap: var(--pl-gap);
  margin: 1.5rem 0;
}

@media (min-width: 480px) {
  .pl-products {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .pl-products {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Article footer (tags, category, related products)
   -------------------------------------------------------------------------- */
.pl-post__footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pl-border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pl-post__category {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pl-post__category-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pl-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pl-post__category a {
  color: var(--pl-primary);
  text-decoration: none;
  font-weight: 600;
}

.pl-post__category a:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Tags
   -------------------------------------------------------------------------- */
.pl-post__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pl-post__tags-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pl-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pl-post__tags-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pl-post__tag a {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  background: var(--pl-bg-light);
  border: 1px solid var(--pl-border);
  border-radius: 2rem;
  font-size: 0.78rem;
  color: var(--pl-text);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.pl-post__tag a:hover {
  background: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Author box (on single post)
   -------------------------------------------------------------------------- */
.pl-post__author-box {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--pl-bg-light);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  padding: 1.25rem;
  margin-top: 2.5rem;
}

/* Legacy: also support .pl-author-box used in the existing template */
.pl-author-box {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: var(--pl-bg-light);
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  padding: 1.25rem;
  margin-top: 2.5rem;
}

.pl-post__author-avatar,
.pl-author-box__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.pl-post__author-info,
.pl-author-box__body {
  min-width: 0;
}

.pl-author-box__name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.pl-author-box__name a {
  color: var(--pl-text);
  text-decoration: none;
}

.pl-author-box__name a:hover {
  color: var(--pl-primary);
}

.pl-author-box__expertise {
  font-size: 0.85rem;
  color: var(--pl-primary);
  font-weight: 600;
  margin: 0 0 0.4rem;
}

.pl-author-box__bio {
  font-size: 0.875rem;
  color: var(--pl-muted);
  line-height: 1.55;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Author archive page
   -------------------------------------------------------------------------- */
.pl-author__header {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.pl-author__avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.pl-author__info {
  min-width: 0;
}

.pl-author__name {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
  color: var(--pl-text);
}

.pl-author__expertise {
  font-size: 0.9rem;
  color: var(--pl-primary);
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.pl-author__bio {
  font-size: 0.9rem;
  color: var(--pl-muted);
  line-height: 1.6;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Related posts
   -------------------------------------------------------------------------- */
.pl-related {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--pl-border);
  margin-left: auto;
  margin-right: auto;
}

.pl-related__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--pl-text);
}

.pl-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--pl-gap);
}

/* Related posts: match the related-products card sizing */
.pl-related__grid .pl-post-card__title {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}
.pl-related__grid .pl-post-card__excerpt {
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pl-pagination {
  display: flex;
  justify-content: flex-start;
  margin: 2rem 0;
}

.pl-pagination__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pl-pagination__link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.6rem;
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  color: var(--pl-text);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.pl-pagination__link:hover {
  background: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
}

.pl-pagination__link--current {
  background: var(--pl-primary);
  border-color: var(--pl-primary);
  color: #fff;
  font-weight: 700;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Related products grid (post page)
   -------------------------------------------------------------------------- */
.pl-related-products {
  margin-top: 2rem;
}

.pl-related-products__title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.pl-related-products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

.pl-related-products__card {
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.pl-related-products__image {
  width: 100%;
  height: 160px;
  object-fit: contain;
}

.pl-related-products__info {
  padding: 10px;
}

.pl-related-products__name {
  font-size: 0.9rem;
  margin: 0 0 4px;
  font-weight: 600;
}

.pl-related-products__price {
  color: var(--pl-primary);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Product page — related articles hook
   -------------------------------------------------------------------------- */
.pl-product-articles {
  margin-top: 1.5rem;
}

.pl-product-articles__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.pl-product-articles__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pl-product-articles__item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--pl-border);
}

.pl-product-articles__item:last-child {
  border-bottom: 0;
}

.pl-product-articles__link {
  color: var(--pl-text);
  text-decoration: none;
  font-weight: 600;
}

.pl-product-articles__link:hover {
  color: var(--pl-primary);
}

.pl-product-articles__date {
  font-size: 0.8rem;
  color: var(--pl-muted);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Archive listing page
   -------------------------------------------------------------------------- */
.pl-archive__heading {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Table of Contents (foldable)
   -------------------------------------------------------------------------- */
.pl-toc { background: var(--pl-bg-light); border: 1px solid var(--pl-border); border-radius: var(--pl-radius); padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: 0.9rem; }
.pl-toc__title { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--pl-text); cursor: pointer; }
.pl-toc__title::after { content: '\25BE'; float: right; transition: transform 0.2s ease; }
.pl-toc__title.collapsed::after { transform: rotate(-90deg); }
.pl-toc__panel { margin-top: 0.5rem; }
.pl-toc__list { margin: 0; padding-left: 1.25rem; }
.pl-toc__item { margin-bottom: 0.35rem; font-size: 0.9rem; }
.pl-toc__item a { color: var(--pl-text); text-decoration: none; }
.pl-toc__item a:hover { color: var(--pl-primary); }
.pl-toc__item--sub { margin-left: 1.25rem; }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */
.pl-breadcrumb { margin-bottom: 1rem; font-size: 0.85rem; }
.pl-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0; }
.pl-breadcrumb__item { display: flex; align-items: center; color: var(--pl-muted); }
.pl-breadcrumb__item:not(:last-child)::after { content: '›'; margin: 0 0.5rem; color: var(--pl-border); }
.pl-breadcrumb__item a { color: var(--pl-muted); text-decoration: none; }
.pl-breadcrumb__item a:hover { color: var(--pl-primary); }
.pl-breadcrumb__item:last-child { color: var(--pl-text); font-weight: 600; }

/* --------------------------------------------------------------------------
   Page Headings
   -------------------------------------------------------------------------- */
.pl-blog__heading,
.pl-category__heading,
.pl-tag__heading,
.pl-author__heading,
.pl-archive__heading {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--pl-text);
}
.pl-tag__name { color: var(--pl-primary); }

/* --------------------------------------------------------------------------
   Section Wrappers
   -------------------------------------------------------------------------- */
.pl-blog__featured,
.pl-blog__latest,
.pl-category__listing,
.pl-tag__listing,
.pl-author__posts,
.pl-archive { margin-bottom: 2rem; }

.pl-blog__featured .pl-blog__section-title,
.pl-blog__latest .pl-blog__section-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem; }

/* --------------------------------------------------------------------------
   Empty States
   -------------------------------------------------------------------------- */
.pl-author__empty,
.pl-category__empty,
.pl-tag__empty,
.pl-archive__empty {
  padding: 2rem;
  text-align: left;
  color: var(--pl-muted);
  font-size: 0.95rem;
  background: var(--pl-bg-light);
  border-radius: var(--pl-radius);
}

/* --------------------------------------------------------------------------
   Pagination Item Modifiers
   -------------------------------------------------------------------------- */
.pl-pagination__item { display: inline-block; }
.pl-pagination__item--prev,
.pl-pagination__item--next { font-weight: 600; }
.pl-pagination__item--current .pl-pagination__link {
  background: var(--pl-primary);
  color: #fff;
  border-color: var(--pl-primary);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Comments
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Comments section
   -------------------------------------------------------------------------- */
.pl-comments {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--pl-border);
}
.pl-comments__title {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
}

/* Alerts */
.pl-comments__alert {
  padding: 12px 16px;
  border-radius: var(--pl-radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.pl-comments__alert--success { background: #e8f5e9; color: #2e7d32; }
.pl-comments__alert--error { background: #fbe9e7; color: #c62828; }

/* Comment list */
.pl-comments__list { margin-bottom: 2rem; }
.pl-comments__item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--pl-border);
}
.pl-comments__item--reply {
  margin-left: 2rem;
  padding-left: 1rem;
  border-left: 2px solid var(--pl-border);
}
.pl-comments__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.pl-comments__author { font-size: 0.95rem; }
.pl-comments__author a { color: var(--pl-text); text-decoration: none; }
.pl-comments__author a:hover { color: var(--pl-primary); }
.pl-comments__date { color: var(--pl-muted); }
.pl-comments__body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--pl-text);
}

/* Comment form — collapsible via <details> */
.pl-comments__form-wrapper {
  margin-top: 2rem;
}
.pl-comments__form-toggle {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  background: var(--pl-primary, #2563eb);
  color: #fff;
  border-radius: var(--pl-radius);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.15s ease;
}
.pl-comments__form-toggle::-webkit-details-marker { display: none; }
.pl-comments__form-toggle::marker { content: ""; }
.pl-comments__form-toggle:hover {
  background: var(--pl-primary-hover, #1d4ed8);
}
.pl-comments__form-wrapper[open] .pl-comments__form-toggle {
  margin-bottom: 1rem;
}

/* Comment form — override PS Classic theme form styles */
.pl-comments__form {
  background: var(--pl-bg-light);
  padding: 1.5rem;
  border-radius: var(--pl-radius);
  border: 1px solid var(--pl-border);
}
.pl-comments__form-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
}
.pl-comments__field {
  margin-bottom: 1rem;
}
/* Force labels to be block + left-aligned — PS theme floats them right */
.pl-comments .pl-comments__field label {
  display: block !important;
  float: none !important;
  text-align: left !important;
  width: 100% !important;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--pl-text);
  padding: 0;
}
/* Force inputs to be full-width block */
.pl-comments .pl-comments__field input[type="text"],
.pl-comments .pl-comments__field input[type="email"],
.pl-comments .pl-comments__field input[type="url"],
.pl-comments .pl-comments__field textarea {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 10px 12px;
  border: 1px solid var(--pl-border);
  border-radius: var(--pl-radius);
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
  background: #fff;
}
.pl-comments .pl-comments__field input:focus,
.pl-comments .pl-comments__field textarea:focus {
  border-color: var(--pl-primary);
  outline: none;
}
.pl-comments .pl-comments__field small {
  display: block;
  font-size: 0.8rem;
  color: var(--pl-muted);
  margin-top: 4px;
}

/* GDPR consent — checkbox inline with text */
.pl-comments .pl-comments__field--consent label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 400 !important;
  line-height: 1.5;
  cursor: pointer;
}
.pl-comments .pl-comments__field--consent input[type="checkbox"] {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Submit button */
.pl-comments__submit {
  display: inline-block;
  background: var(--pl-primary);
  color: #fff !important;
  border: none;
  padding: 12px 28px;
  border-radius: var(--pl-radius);
  font-weight: 600;
  cursor: pointer;
  font-size: 0.95rem;
  margin-top: 0.5rem;
  transition: background 0.2s;
}
.pl-comments__submit:hover {
  background: var(--pl-primary-dk);
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Filter bar (blog home + category page) — Task PLBLOG_FILTERS_ENABLED
   -------------------------------------------------------------------------- */

.pl-filter-bar {
  margin: 0 0 1.5rem;
  padding: 1rem;
  background: #f6f7f9;
  border: 1px solid var(--pl-border);
  border-radius: 8px;
}
.pl-filter-bar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.pl-filter-bar__select {
  flex: 1 1 180px;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--pl-border);
  border-radius: 6px;
  background: #fff;
  font-size: 0.95rem;
  color: var(--pl-text);
}
.pl-filter-bar__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1 auto;
  justify-content: flex-end;
}
.pl-filter-bar__apply {
  padding: 0.55rem 1.25rem;
  border: 0;
  border-radius: 6px;
  background: var(--pl-primary);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.pl-filter-bar__apply:hover {
  filter: brightness(1.05);
}
.pl-filter-bar__clear {
  color: var(--pl-text);
  text-decoration: underline;
  font-size: 0.9rem;
}
@media (max-width: 767px) {
  .pl-filter-bar__row {
    flex-direction: column;
    align-items: stretch;
  }
  .pl-filter-bar__select {
    flex-basis: auto;
    width: 100%;
  }
  .pl-filter-bar__actions {
    justify-content: space-between;
  }
  .pl-filter-bar__apply {
    flex: 1;
  }
}

/* --------------------------------------------------------------------------
   Theme H1 suppression on blog pages (added 2026-05-11)
   -------------------------------------------------------------------------- */
/*
 * Warehouse theme renders an `<h1 class="page-title">` near the top of every
 * page that's keyed off $page.title. Our blog post / category / tag / author
 * / archive controllers leave $page.title blank (the post's own
 * `<h1 class="pl-post__title">` lives inside <article>), which produces an
 * empty theme h1 — a duplicate-h1 SEO penalty.
 *
 * The selector `:empty` doesn't match the span because Warehouse renders it
 * with whitespace inside ("<span>\n  </span>"). Matching by ancestor
 * (.pl-post, .pl-listing, etc.) is the reliable signal that we're on a
 * plblog page.
 */
html.has-pl-blog-page h1.page-title,
html.has-pl-blog-page .h1.page-title,
body.has-pl-blog-page h1.page-title,
body.has-pl-blog-page .h1.page-title {
  display: none;
}

/* ============================================================
   v1.8.29 — GrapesJS block styles, single source of truth.
   This file is loaded in BOTH the BO GrapesJS canvas (via the
   editor's canvas.styles config in grapesjs-init.js) AND on the
   public post page (registered via hookActionFrontControllerSetMedia
   in plblog.php). Keeps the editor preview pixel-for-pixel identical
   to what the visitor sees, and keeps the saved content_html free
   of inline style="" attributes that HtmlSanitizer used to strip.
   ============================================================ */

/* CTA Banner — used to live inline in grapesjs-init.js as
   `<div style="padding:40px 20px;text-align:center;background:#25b9d7;color:white;border-radius:8px">`.
   That inline blue background survived inside the GrapesJS iframe
   preview (canvas CSS context) but got wiped on Save because
   HtmlSanitizer's HTMLPurifier default config strips inline styles.
   v1.8.28 widened the property whitelist as a band-aid; v1.8.29
   moves the styling out of the saved markup entirely. */
.pl-cta-banner {
  padding: 40px 20px;
  text-align: left;
  border-radius: 8px;
  margin: 1.5rem 0;
}
.pl-cta-banner--primary {
  background: #25b9d7;
  color: #fff;
}
.pl-cta-banner--primary .pl-cta-banner__title,
.pl-cta-banner--primary .pl-cta-banner__text {
  color: #fff;
}
.pl-cta-banner__title {
  margin-bottom: 12px;
  font-weight: 700;
}
.pl-cta-banner__text {
  margin-bottom: 20px;
  opacity: .9;
}
.pl-cta-banner__action.pl-cta__button {
  background: #fff;
  color: #25b9d7;
}
.pl-cta-banner__action.pl-cta__button:hover {
  background: rgba(255, 255, 255, .9);
  color: #1c8fa6;
  text-decoration: none;
}

/* v1.8.31 — boost specificity so the CTA banner's blue background and
   white text win against `.pl-post__content p { color: var(--pl-text); }`
   and any other theme rules scoped under `.pl-post__content`. Without
   this the banner showed a thin blue strip with white text + button
   overflowing onto the white body background underneath (specificity
   of `.pl-cta-banner__text { color: #fff }` lost to `.pl-post__content p
   { color: ... }` 0-1-1 vs 0-1-0, so theme p-colour won inside posts). */
.pl-post__content .pl-cta-banner--primary {
  background: #25b9d7;
  color: #fff;
}
.pl-post__content .pl-cta-banner--primary .pl-cta-banner__title,
.pl-post__content .pl-cta-banner--primary .pl-cta-banner__text,
.pl-post__content .pl-cta-banner--primary h2,
.pl-post__content .pl-cta-banner--primary h3,
.pl-post__content .pl-cta-banner--primary p {
  color: #fff;
}
.pl-post__content .pl-cta-banner__action.pl-cta__button,
.pl-post__content a.pl-cta-banner__action,
.pl-post__content .pl-cta-banner a.pl-cta__button {
  /* v1.8.33 — extra selector forms to win against theme `.pl-post__content a`
     rules which were making the "Learn More" button text invisible.
     v1.8.35 — added !important because the theme's `.pl-post__content a` has
     same-or-greater specificity AND uses !important in some PrestaShop themes;
     button text + bg now win unconditionally. text-decoration also forced
     because some themes underline post anchors which looks ugly on a button. */
  background: #fff !important;
  color: #25b9d7 !important;
  text-decoration: none !important;
}
.pl-post__content .pl-cta-banner__action.pl-cta__button:hover,
.pl-post__content a.pl-cta-banner__action:hover,
.pl-post__content .pl-cta-banner a.pl-cta__button:hover {
  background: rgba(255, 255, 255, .9);
  color: #1c8fa6;
}

/* Hero Section block (v1.8.30) — class-based replacement for the old
   inline-styled <div style="padding:60px 30px;background:#2c3e50;color:#fff;...">.
   .pl-section--dark provides the navy background + white text combo. */
.pl-section {
  border-radius: 8px;
  margin: 1.5rem 0;
}
.pl-section--hero {
  padding: 60px 30px;
  text-align: left;
  background-size: cover;
  background-position: center;
  /* v1.8.31 — make .pl-section--hero dark by default so posts saved
     before v1.8.30 (markup is just <div class="pl-section pl-section--hero">
     without the --dark modifier) still render with the navy bg + white
     text exactly like the GrapesJS canvas preview. .pl-section--dark
     modifier kept below so future variants (light/coloured hero) still
     have a clean opt-in. */
  background: #2c3e50;
  color: #fff;
}
.pl-section--hero .pl-section__title,
.pl-section--hero .pl-section__subtitle,
.pl-section--hero h2,
.pl-section--hero p {
  color: #fff;
}
.pl-section--dark {
  background: #2c3e50;
  color: #fff;
}
.pl-section--dark .pl-section__title,
.pl-section--dark .pl-section__subtitle,
.pl-section--dark h2,
.pl-section--dark p {
  color: #fff;
}
.pl-section__title {
  font-size: 2em;
  margin-bottom: 16px;
  font-weight: 700;
}
.pl-section__subtitle {
  font-size: 1.2em;
  margin-bottom: 24px;
  opacity: .85;
}

/* Feature Grid (v1.8.30 + v1.8.31 backfill) — Both the explicit modifier
   class AND the bare 3-column container get centered text + 20px col
   padding. v1.8.31 widens this to cover posts saved before v1.8.30 which
   only have `<div class="pl-columns pl-columns--3">`. Safe because
   2-column product card layouts use `.pl-columns--2` and aren't matched
   by either selector here. */
.pl-columns--feature-grid,
.pl-columns--3 {
  gap: 30px;
}
.pl-columns--feature-grid .pl-columns__col,
.pl-columns--3 .pl-columns__col {
  text-align: left;
  padding: 20px;
}

/* Spacer block (v1.8.30 + v1.8.31 backfill) — modifiers for sm/md/lg AND
   a default height on bare `.pl-spacer` so posts saved before v1.8.30
   (markup is just `<div class="pl-spacer"></div>` without the inline
   `style="height:40px"` that the sanitizer stripped) still produce a
   visible space rather than collapsing to 0. The earlier `/* Height set
   via inline style by the block renderer */` rule at .pl-spacer block
   above is now superseded by this default. */
.pl-spacer    { height: 40px; }
.pl-spacer--sm { height: 20px; }
.pl-spacer--md { height: 40px; }
.pl-spacer--lg { height: 80px; }

/* v1.8.31 — same specificity boost for Hero + Feature Grid inside posts.
   Theme's `.pl-post__content p/h2 { color: var(--pl-text) }` would otherwise
   override the block's white-on-navy / centered styling. */
.pl-post__content .pl-section--hero {
  background: #2c3e50;
  color: #fff;
  padding: 60px 30px;
  text-align: left;
  border-radius: 8px;
  margin: 1.5rem 0;
}
.pl-post__content .pl-section--hero .pl-section__title,
.pl-post__content .pl-section--hero .pl-section__subtitle,
.pl-post__content .pl-section--hero h2,
.pl-post__content .pl-section--hero h3,
.pl-post__content .pl-section--hero p {
  color: #fff;
}
.pl-post__content .pl-section--hero .pl-section__title {
  font-size: 2em;
  margin-bottom: 16px;
  font-weight: 700;
}
.pl-post__content .pl-section--hero .pl-section__subtitle {
  font-size: 1.2em;
  margin-bottom: 24px;
  opacity: .85;
}

.pl-post__content .pl-columns--3 .pl-columns__col,
.pl-post__content .pl-columns--feature-grid .pl-columns__col {
  text-align: left;
  padding: 20px;
}
/* ============================================================
   Blog FAQ accordion — SELF-CONTAINED. No shop/category selector,
   no custom.css dependency. All blog styling stays in plblog.css.
   No important-flags. (Replaces the category-clone approach, 2026-07.)
   ============================================================ */
.pl-post__content .pl-faq { margin: 1.5rem 0 0; }

.pl-post__content .pl-faq__item {
  margin-bottom: 10px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 10px 0 #2E263D33;
}

.pl-post__content .pl-faq__question { margin: 0; }

.pl-post__content .pl-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  padding: 15px 20px;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #000;
  text-align: left;
  cursor: pointer;
}

.pl-post__content .pl-faq__answer { padding: 15px 20px; color: #000; }
/* ============================================================
   Blog typography — SELF-CONTAINED, values matched to product
   long-description (.product-description). No shop selector, no
   custom.css dependency. Mobile = base; desktop via min-width:768px.
   No !important.
   ============================================================ */

/* body copy */
.pl-post__content p {
  font-size: 15px;
  line-height: 1.65;
  color: #3a3a3a;
  margin: 0 0 1rem;
}

/* headings — mobile base */
.pl-post__content h2 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  color: #142126;
  margin: 2.5rem 0 1rem;
}

.pl-post__content h3 {
  font-size: 19px;
  line-height: 1.35;
  font-weight: 600;
  color: #142126;
  margin: 1.75rem 0 0.75rem;
}

/* desktop */
@media (min-width: 768px) {
  .pl-post__content p  { font-size: 16px; line-height: 1.7; }
  .pl-post__content h2 { font-size: 30px; }
  .pl-post__content h3 { font-size: 22px; }
}