/*

Theme Name: Profitability Partners

Theme URI: https://profitabilitypartners.io

Description: Custom child theme for Profitability Partners - Fractional CFO for Home Services. Matches the V7 homepage design with full SEO optimization.

Author: Profitability Partners

Author URI: https://profitabilitypartners.io

Template: bb-theme

Version: 1.0.0

Text Domain: pp-theme

*/



/* ═══════ VARIABLES ═══════ */

:root {

  --navy: #0B1B2B;

  --navy-mid: #142840;

  --navy-light: #1C3554;

  --slate: #3A4F68;

  --steel: #5E7286;

  --mist: #8D9DAE;

  --cloud: #D5DCE4;

  --snow: #F2F4F7;

  --white: #FFFFFF;

  --gold: #C9A84C;

  --gold-light: #E0C56A;

  --gold-glow: rgba(201, 168, 76, 0.12);

  --gold-glow2: rgba(201, 168, 76, 0.06);

  --green: #22A558;

  --serif: 'DM Serif Display', Georgia, serif;

  --sans: 'Plus Jakarta Sans', -apple-system, sans-serif;

}



/* ═══════ RESET & BASE ═══════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {

  font-family: var(--sans);

  color: var(--navy);

  background: var(--white);

  -webkit-font-smoothing: antialiased;

  overflow-x: hidden;

}



/* ═══════ NAV ═══════ */

.pp-nav {

  position: fixed; top: 0; left: 0; right: 0; z-index: 100;

  padding: 18px 60px !important;

  display: flex !important; align-items: center !important; justify-content: space-between !important;

  background: var(--navy) !important;

  border-bottom: 1px solid rgba(255,255,255,0.06);

  transition: all 0.3s;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  flex-wrap: nowrap !important;

}

.pp-nav.scrolled {

  padding: 12px 60px;

  box-shadow: 0 4px 30px rgba(0,0,0,0.3);

  background: rgba(11,27,43,0.97);

  backdrop-filter: blur(16px);

}

.pp-nav .nav-logo img {

  height: 44px;

  background: rgba(255,255,255,0.95);

  padding: 8px 16px;

  border-radius: 8px;

}

.pp-nav .nav-links {

  display: flex !important; gap: 32px !important; align-items: center !important;

}

.pp-nav .nav-links a {

  font-size: 13.5px !important; font-weight: 500 !important;

  color: rgba(255,255,255,0.6) !important;

  text-decoration: none !important; letter-spacing: 0.3px;

  transition: color 0.2s;

  background: none !important;

  border: none !important;

  box-shadow: none !important;

}

.pp-nav .nav-links a:hover { color: var(--white) !important; background: none !important; }

.pp-nav .nav-cta {

  background: var(--gold) !important;

  color: var(--navy) !important;

  padding: 10px 24px !important;

  border-radius: 8px !important;

  font-weight: 700 !important;

  font-size: 13px !important;

  letter-spacing: 0.3px;

  transition: all 0.25s !important;

}

.pp-nav .nav-cta:hover {

  background: var(--gold-light) !important;

  transform: translateY(-1px);

}



/* ═══════ MOBILE NAV ═══════ */

.pp-nav .mobile-toggle {

  display: none;

  background: none; border: none;

  cursor: pointer; padding: 8px;

}

.pp-nav .mobile-toggle span {

  display: block; width: 24px; height: 2px;

  background: rgba(255,255,255,0.8);

  margin: 5px 0; transition: all 0.3s;

}



/* ═══════ FOOTER ═══════ */

.pp-footer {

  padding: 40px 60px;

  background: var(--navy);

  border-top: 1px solid rgba(255,255,255,0.06);

  color: rgba(255,255,255,0.35);

  font-size: 13px;

}

.pp-footer .footer-inner {

  max-width: 1280px; margin: 0 auto;

  display: flex; justify-content: space-between; align-items: center;

}

.pp-footer .footer-logo img {

  height: 34px;

  background: rgba(255,255,255,0.95);

  padding: 6px 14px;

  border-radius: 6px;

}

.pp-footer a {

  color: rgba(255,255,255,0.35);

  text-decoration: none; transition: color 0.2s;

}

.pp-footer a:hover { color: rgba(255,255,255,0.7); }

.pp-footer .footer-links {

  display: flex; gap: 24px;

}

.pp-footer .footer-address {

  text-align: right; line-height: 1.5;

}



/* ═══════ BLOG LISTING ═══════ */

.pp-blog-header {

  background: var(--navy);

  padding: 140px 60px 80px;

  text-align: center;

  color: var(--white);

}

.pp-blog-header h1 {

  font-family: var(--serif);

  font-size: clamp(36px, 4vw, 52px);

  letter-spacing: -1px;

  margin-bottom: 16px;

}

.pp-blog-header p {

  font-size: 17px;

  color: rgba(255,255,255,0.5);

  max-width: 600px;

  margin: 0 auto;

  line-height: 1.7;

}



.pp-blog-grid {

  max-width: 1280px;

  margin: 0 auto;

  padding: 60px 60px 100px;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 32px;

}



.pp-post-card {

  background: var(--white);

  border: 1px solid var(--cloud);

  border-radius: 16px;

  overflow: hidden;

  transition: all 0.35s;

}

.pp-post-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 16px 48px rgba(11,27,43,0.08);

  border-color: transparent;

}

.pp-post-card .card-image {

  width: 100%;

  aspect-ratio: 16/10;

  overflow: hidden;

}

.pp-post-card .card-image img {

  width: 100%; height: 100%;

  object-fit: cover;

  transition: transform 0.4s;

}

.pp-post-card:hover .card-image img {

  transform: scale(1.03);

}

.pp-post-card .card-body {

  padding: 24px;

}

.pp-post-card .card-category {

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color: var(--gold);

  margin-bottom: 10px;

}

.pp-post-card .card-title {

  font-family: var(--serif);

  font-size: 20px;

  line-height: 1.25;

  letter-spacing: -0.3px;

  margin-bottom: 10px;

}

.pp-post-card .card-title a {

  color: var(--navy);

  text-decoration: none;

  transition: color 0.2s;

}

.pp-post-card .card-title a:hover { color: var(--gold); }

.pp-post-card .card-excerpt {

  font-size: 14px;

  line-height: 1.7;

  color: var(--steel);

  margin-bottom: 16px;

}

.pp-post-card .card-meta {

  font-size: 12px;

  color: var(--mist);

  display: flex;

  gap: 16px;

}

.pp-post-card .card-meta span {

  display: flex;

  align-items: center;

  gap: 4px;

}



/* No featured image fallback */

.pp-post-card .card-image.no-image {

  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);

  display: flex;

  align-items: center;

  justify-content: center;

}

.pp-post-card .card-image.no-image::after {

  content: 'PP';

  font-family: var(--serif);

  font-size: 48px;

  color: var(--gold);

  opacity: 0.3;

}



/* ═══════ SINGLE BLOG POST ═══════ */

.pp-article-header {

  background: var(--navy);

  padding: 140px 60px 70px;

  color: var(--white);

}

.pp-article-header-inner {

  max-width: 780px;

  margin: 0 auto;

}

.pp-article-header .breadcrumbs {

  font-size: 13px;

  color: rgba(255,255,255,0.4);

  margin-bottom: 24px;

}

.pp-article-header .breadcrumbs a {

  color: rgba(255,255,255,0.4);

  text-decoration: none;

  transition: color 0.2s;

}

.pp-article-header .breadcrumbs a:hover { color: var(--gold); }

.pp-article-header .breadcrumbs .sep { margin: 0 8px; }

.pp-article-category {

  display: inline-block;

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 1.5px;

  color: var(--gold);

  margin-bottom: 16px;

}

.pp-article-header h1 {

  font-family: var(--serif);

  font-size: clamp(32px, 3.5vw, 48px);

  line-height: 1.12;

  letter-spacing: -1px;

  margin-bottom: 20px;

}

.pp-article-meta {

  font-size: 14px;

  color: rgba(255,255,255,0.45);

  display: flex;

  gap: 20px;

  align-items: center;

  flex-wrap: wrap;

}

.pp-article-meta .author-name { font-weight: 600; color: rgba(255,255,255,0.7); }



/* Article content */

.pp-article-content {

  max-width: 780px;

  margin: 0 auto;

  padding: 56px 60px 80px;

}

.pp-article-content h2 {

  font-family: var(--serif);

  font-size: 30px;

  letter-spacing: -0.5px;

  margin: 48px 0 20px;

  line-height: 1.2;

}

.pp-article-content h3 {

  font-family: var(--serif);

  font-size: 22px;

  letter-spacing: -0.3px;

  margin: 36px 0 14px;

  line-height: 1.25;

}

.pp-article-content p {

  font-size: 16.5px;

  line-height: 1.85;

  color: var(--slate);

  margin-bottom: 24px;

}

.pp-article-content ul,

.pp-article-content ol {

  margin: 0 0 24px 24px;

  color: var(--slate);

}

.pp-article-content li {

  font-size: 16px;

  line-height: 1.8;

  margin-bottom: 8px;

}

.pp-article-content blockquote {

  border-left: 3px solid var(--gold);

  background: var(--gold-glow);

  padding: 20px 24px;

  margin: 32px 0;

  border-radius: 0 12px 12px 0;

  font-size: 16px;

  line-height: 1.75;

  color: var(--navy);

  font-weight: 500;

}

.pp-article-content img {

  max-width: 100%;

  height: auto;

  border-radius: 12px;

  margin: 32px 0;

}

.pp-article-content table {

  width: 100%;

  border-collapse: collapse;

  margin: 32px 0;

  font-size: 15px;

}

.pp-article-content table th {

  background: var(--navy);

  color: var(--white);

  padding: 12px 16px;

  text-align: left;

  font-weight: 700;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}

.pp-article-content table td {

  padding: 12px 16px;

  border-bottom: 1px solid var(--cloud);

  color: var(--slate);

}

.pp-article-content table tr:hover td {

  background: var(--snow);

}

.pp-article-content a {

  color: var(--gold);

  text-decoration: underline;

  text-underline-offset: 3px;

  transition: color 0.2s;

}

.pp-article-content a:hover { color: #b8932e; }



/* Article highlight box (for key takeaways, benchmarks) */

.pp-highlight-box {

  background: var(--snow);

  border: 1px solid var(--cloud);

  border-radius: 14px;

  padding: 28px;

  margin: 36px 0;

}

.pp-highlight-box h4 {

  font-family: var(--serif);

  font-size: 18px;

  margin-bottom: 12px;

  color: var(--navy);

}

.pp-highlight-box p {

  font-size: 15px;

  margin-bottom: 12px;

}

.pp-highlight-box p:last-child { margin-bottom: 0; }



/* Article CTA box at bottom of post */

.pp-article-cta {

  background: var(--navy);

  border-radius: 18px;

  padding: 48px;

  margin: 56px 0 0;

  text-align: center;

  color: var(--white);

}

.pp-article-cta h3 {

  font-family: var(--serif);

  font-size: 26px;

  letter-spacing: -0.5px;

  margin-bottom: 12px;

  color: var(--white);

}

.pp-article-cta p {

  font-size: 15px;

  color: rgba(255,255,255,0.5);

  margin-bottom: 28px;

  max-width: 500px;

  margin-left: auto;

  margin-right: auto;

}

.pp-article-cta .btn-gold {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  background: var(--gold);

  color: var(--navy);

  padding: 16px 32px;

  border-radius: 10px;

  font-size: 15px;

  font-weight: 700;

  text-decoration: none;

  transition: all 0.3s;

  box-shadow: 0 4px 24px rgba(201,168,76,0.3);

}

.pp-article-cta .btn-gold:hover {

  background: var(--gold-light);

  transform: translateY(-2px);

  box-shadow: 0 8px 32px rgba(201,168,76,0.4);

}



/* Author bio box */

.pp-author-box {

  display: flex;

  gap: 24px;

  align-items: flex-start;

  background: var(--snow);

  border: 1px solid var(--cloud);

  border-radius: 16px;

  padding: 28px;

  margin: 48px 0 0;

}

.pp-author-box img {

  width: 72px; height: 72px;

  border-radius: 12px;

  object-fit: cover;

  margin: 0;

}

.pp-author-box h4 {

  font-size: 16px;

  font-weight: 700;

  margin-bottom: 4px;

}

.pp-author-box .author-role {

  font-size: 13px;

  color: var(--gold);

  font-weight: 600;

  margin-bottom: 8px;

}

.pp-author-box p {

  font-size: 14px;

  line-height: 1.7;

  color: var(--steel);

  margin-bottom: 0;

}



/* ═══════ PAGINATION ═══════ */

.pp-pagination {

  max-width: 1280px;

  margin: 0 auto;

  padding: 0 60px 80px;

  display: flex;

  justify-content: center;

  gap: 8px;

}

.pp-pagination a,

.pp-pagination span {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 40px; height: 40px;

  border-radius: 8px;

  font-size: 14px;

  font-weight: 600;

  text-decoration: none;

  transition: all 0.2s;

}

.pp-pagination a {

  background: var(--snow);

  color: var(--steel);

  border: 1px solid var(--cloud);

}

.pp-pagination a:hover {

  background: var(--navy);

  color: var(--white);

  border-color: var(--navy);

}

.pp-pagination span.current {

  background: var(--navy);

  color: var(--white);

}



/* ═══════ FLOATING CTA BUTTON ═══════ */

.pp-floating-cta {

  position: fixed !important;

  bottom: 28px !important;

  right: 28px !important;

  z-index: 99 !important;

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  background: var(--gold) !important;

  color: var(--navy) !important;

  padding: 14px 24px !important;

  border-radius: 12px !important;

  font-family: var(--sans) !important;

  font-size: 14px !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  box-shadow: 0 8px 32px rgba(201,168,76,0.35), 0 2px 8px rgba(0,0,0,0.15) !important;

  transition: all 0.3s;

  animation: floatCta 0.6s ease both;

  animation-delay: 2s;

  opacity: 0;

}

.pp-floating-cta:hover {

  background: var(--gold-light) !important;

  transform: translateY(-3px);

  box-shadow: 0 12px 40px rgba(201,168,76,0.45), 0 4px 12px rgba(0,0,0,0.2) !important;

}

.pp-floating-cta svg {

  flex-shrink: 0;

}

@keyframes floatCta {

  from { opacity: 0; transform: translateY(20px); }

  to { opacity: 1; transform: translateY(0); }

}

@media (max-width: 768px) {

  .pp-floating-cta {

    bottom: 20px !important;

    right: 16px !important;

    left: 16px !important;

    justify-content: center !important;

    font-size: 13px !important;

    padding: 14px 20px !important;

  }

}



/* ═══════ 404 PAGE ═══════ */

.pp-404 {

  min-height: 80vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 140px 60px 100px;

}

.pp-404 h1 {

  font-family: var(--serif);

  font-size: 120px;

  color: var(--cloud);

  letter-spacing: -4px;

  margin-bottom: 16px;

}

.pp-404 h2 {

  font-family: var(--serif);

  font-size: 32px;

  letter-spacing: -0.5px;

  margin-bottom: 16px;

}

.pp-404 p {

  font-size: 16px;

  color: var(--steel);

  margin-bottom: 32px;

}

.pp-404 .btn-gold {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  background: var(--gold);

  color: var(--navy);

  padding: 14px 28px;

  border-radius: 10px;

  font-size: 15px;

  font-weight: 700;

  text-decoration: none;

  transition: all 0.3s;

}

.pp-404 .btn-gold:hover {

  background: var(--gold-light);

  transform: translateY(-2px);

}



/* ═══════ RESPONSIVE ═══════ */

@media (max-width: 1024px) {

  .pp-nav { padding: 14px 28px; }

  .pp-blog-header { padding: 120px 28px 60px; }

  .pp-blog-grid { grid-template-columns: repeat(2, 1fr); padding: 48px 28px 80px; }

  .pp-article-header { padding: 120px 28px 60px; }

  .pp-article-content { padding: 40px 28px 60px; }

  .pp-footer { padding: 32px 28px; }

}



@media (max-width: 768px) {

  nav.pp-nav .nav-links { display: none !important; }

  .pp-nav .nav-links.open {

    display: flex !important;

    flex-direction: column;

    position: absolute;

    top: 100%; left: 0; right: 0;

    background: var(--navy);

    padding: 20px 28px;

    border-top: 1px solid rgba(255,255,255,0.06);

    gap: 16px;

  }

  .pp-nav .mobile-toggle { display: block; }

  .pp-blog-grid { grid-template-columns: 1fr; gap: 24px; }

  .pp-article-header h1 { font-size: 28px; }

  .pp-article-cta { padding: 32px 24px; }

  .pp-author-box { flex-direction: column; }

  .pp-footer .footer-inner {

    flex-direction: column;

    gap: 16px; text-align: center;

  }

  .pp-footer .footer-links {

    flex-wrap: wrap; justify-content: center;

  }

  .pp-footer .footer-address { text-align: center; }

}



/* ======= BLOG REDESIGN (2026-03-25) ======= */



.pp-blog-hero {

  background: var(--navy);

  padding: 64px 60px 48px;

  text-align: center;

}

.pp-blog-hero h1 {

  font-family: var(--serif);

  color: var(--white);

  font-size: 42px;

  margin-bottom: 12px;

}

.pp-blog-hero p {

  color: var(--mist);

  font-size: 16px;

  max-width: 640px;

  margin: 0 auto;

  line-height: 1.6;

}



.pp-tabs-bar {

  background: var(--navy);

  padding: 0 60px 32px;

  display: flex;

  justify-content: center;

  gap: 8px;

  flex-wrap: wrap;

}

.pp-tab {

  padding: 8px 20px;

  border-radius: 100px;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s;

  border: 1.5px solid transparent;

  text-decoration: none;

  font-family: var(--sans);

}

.pp-tab.active {

  background: var(--gold);

  color: var(--navy);

  border-color: var(--gold);

}

.pp-tab:not(.active) {

  background: rgba(255,255,255,0.06);

  color: var(--mist);

  border-color: rgba(255,255,255,0.12);

}

.pp-tab:not(.active):hover {

  background: rgba(255,255,255,0.1);

  color: var(--white);

}



.pp-blog-content {

  max-width: 1240px;

  margin: 0 auto;

  padding: 40px 24px 80px;

}



.pp-featured-card {

  display: grid;

  grid-template-columns: 1.1fr 0.9fr;

  gap: 0;

  margin-bottom: 48px;

  background: var(--white);

  border-radius: 16px;

  overflow: hidden;

  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);

  transition: box-shadow 0.3s, transform 0.3s;

  cursor: pointer;

  text-decoration: none;

  color: inherit;

}

.pp-featured-card:hover {

  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 16px 40px rgba(0,0,0,0.08);

  transform: translateY(-2px);

  text-decoration: none;

  color: inherit;

}

.pp-featured-img {

  width: 100%;

  height: 100%;

  min-height: 340px;

  object-fit: cover;

  display: block;

}

.pp-featured-body {

  padding: 40px 44px;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.pp-featured-body h2 {

  font-family: var(--serif);

  font-size: 28px;

  line-height: 1.3;

  margin-bottom: 14px;

  color: var(--navy);

}

.pp-featured-body .pp-excerpt {

  color: var(--steel);

  font-size: 15px;

  line-height: 1.65;

  margin-bottom: 20px;

  display: -webkit-box;

  -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.pp-read-more {

  display: inline-flex;

  align-items: center;

  gap: 6px;

  color: var(--gold);

  font-weight: 600;

  font-size: 14px;

  margin-top: 20px;

  text-decoration: none;

  transition: gap 0.2s;

}

.pp-featured-card:hover .pp-read-more {

  gap: 10px;

}



.pp-cat-label {

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1.2px;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 12px;

  display: block;

}

.pp-meta {

  display: flex;

  align-items: center;

  gap: 12px;

  color: var(--mist);

  font-size: 13px;

}

.pp-dot {

  width: 3px;

  height: 3px;

  background: var(--cloud);

  border-radius: 50%;

  display: inline-block;

}

.pp-section-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 24px;

}

.pp-section-header h3 {

  font-family: var(--serif);

  font-size: 24px;

  color: var(--navy);

}



.pp-card-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 28px;

  margin-bottom: 56px;

}



.pp-card {

  background: var(--white);

  border-radius: 14px;

  overflow: hidden;

  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.03);

  transition: box-shadow 0.3s, transform 0.3s;

  cursor: pointer;

  display: flex;

  flex-direction: column;

}

.pp-card:hover {

  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 12px 32px rgba(0,0,0,0.06);

  transform: translateY(-4px);

}

.pp-card-link {

  text-decoration: none;

  color: inherit;

  display: flex;

  flex-direction: column;

  height: 100%;

}

.pp-card-link:hover {

  text-decoration: none;

  color: inherit;

}

.pp-card-img-wrap {

  position: relative;

  padding-top: 56.25%;

  overflow: hidden;

}

.pp-card-img-wrap img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

}

.pp-card:hover .pp-card-img-wrap img {

  transform: scale(1.04);

}

.pp-card-no-img {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: var(--snow);

}

.pp-card-body {

  padding: 22px 24px 26px;

  flex: 1;

  display: flex;

  flex-direction: column;

}

.pp-card-body h3 {

  font-family: var(--serif);

  font-size: 18px;

  line-height: 1.35;

  margin-bottom: 10px;

  color: var(--navy);

}

.pp-card-body .pp-excerpt {

  color: var(--steel);

  font-size: 14px;

  line-height: 1.6;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  margin-bottom: 16px;

  flex: 1;

}

.pp-card-body .pp-meta {

  font-size: 12px;

  margin-top: auto;

}



.pp-guides-strip {

  background: var(--navy);

  border-radius: 16px;

  padding: 36px 40px;

  margin-bottom: 56px;

}

.pp-guides-strip h3 {

  font-family: var(--serif);

  font-size: 22px;

  color: var(--white);

  margin-bottom: 6px;

}

.pp-guides-strip > p {

  color: var(--mist);

  font-size: 14px;

  margin-bottom: 24px;

}

.pp-guides-row {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 14px;

}

.pp-guide-chip {

  background: rgba(255,255,255,0.06);

  border: 1px solid rgba(255,255,255,0.1);

  border-radius: 10px;

  padding: 16px 18px;

  text-decoration: none;

  transition: all 0.2s;

  display: block;

}

.pp-guide-chip:hover {

  background: rgba(201,168,76,0.12);

  border-color: rgba(201,168,76,0.3);

  text-decoration: none;

}

.pp-guide-icon {

  font-size: 20px;

  margin-bottom: 8px;

}

.pp-guide-title {

  font-size: 13px;

  font-weight: 600;

  color: var(--white);

  line-height: 1.4;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

.pp-guide-type {

  font-size: 11px;

  color: var(--gold);

  font-weight: 600;

  margin-top: 6px;

  letter-spacing: 0.5px;

}



/* -- Pagination (Redesigned) -- */

.pp-pagination {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 16px;

}

.pp-pagination a,

.pp-pagination span {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  font-size: 14px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s;

  text-decoration: none;

}

.pp-pagination .current {

  background: var(--gold);

  color: var(--navy);

}

.pp-pagination a {

  background: var(--white);

  color: var(--steel);

  border: 1px solid var(--cloud);

}

.pp-pagination a:hover {

  background: var(--navy);

  color: var(--white);

  border-color: var(--navy);

  text-decoration: none;

}

.pp-pagination .dots {

  background: transparent;

  border: none;

  color: var(--mist);

  cursor: default;

}



/* -- Blog Redesign Responsive -- */

@media (max-width: 900px) {

  .pp-featured-card { grid-template-columns: 1fr; }

  .pp-featured-img { min-height: 220px; max-height: 280px; }

  .pp-featured-body { padding: 28px 28px 32px; }

  .pp-featured-body h2 { font-size: 24px; }

  .pp-card-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

  .pp-guides-row { grid-template-columns: repeat(2, 1fr); }

  .pp-blog-hero { padding: 48px 24px 32px; }

  .pp-blog-hero h1 { font-size: 32px; }

  .pp-tabs-bar { padding: 0 24px 24px; }

  .pp-blog-content { padding: 28px 16px 60px; }

  .pp-guides-strip { padding: 28px 24px; }

}

@media (max-width: 600px) {

  .pp-card-grid { grid-template-columns: 1fr; gap: 20px; }

  .pp-guides-row { grid-template-columns: 1fr; }

  .pp-blog-hero h1 { font-size: 26px; }

  .pp-blog-hero p { font-size: 14px; }

  .pp-featured-body h2 { font-size: 22px; }

  .pp-tab { padding: 7px 14px; font-size: 12px; }

}


/* ── Breadcrumbs ── */
.pp-breadcrumbs {
  max-width: 1240px;
  margin: 0 auto;
  padding: 12px 20px 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--mist);
}
.pp-breadcrumbs a {
  color: var(--steel);
  text-decoration: none;
}
.pp-breadcrumbs a:hover {
  color: var(--gold);
}
.pp-bc-sep {
  margin: 0 6px;
  color: var(--mist);
}