/* main.css — WordPress theme main styles
   Page hero, listing grid, post styles, provider page, etc. */

/* ─── PAGE HERO (inner pages) ───────────────────────────────────────── */
.listing-hero {
  padding-block: var(--space-16) var(--space-12);
}

.page-hero {
  padding-block: var(--space-16) var(--space-12);
}

.page-hero-inner {
  max-width: var(--max-width-text);
}

.page-hero-title {
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  color: var(--color-text-inverse);
  margin-top: var(--space-3);
  line-height: var(--lh-heading);
}

.page-hero-sub {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,.8);
  margin-top: var(--space-4);
  line-height: var(--lh-body);
}

/* ─── LISTING GRID ─────────────────────────────────────────────────── */
.posts-grid, .listing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

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

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

/* ─── LISTING BADGE ────────────────────────────────────────────────── */
.listing-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: rgba(0,0,0,.6);
  color: white;
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.listing-badge--inline {
  position: static;
  background: var(--color-bg-navy);
  color: white;
  display: inline-block;
}

/* ─── PROVIDER RATING ──────────────────────────────────────────────── */
.provider-rating { margin-top: var(--space-3); }
.provider-rating-inline { display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); }

/* ─── PROVIDER PAGE ────────────────────────────────────────────────── */
.provider-header { padding-block: var(--space-16) var(--space-12); }
.provider-header-inner { display: flex; gap: var(--space-8); align-items: flex-start; flex-wrap: wrap; }
.provider-logo-wrap { flex-shrink: 0; }
.provider-logo { max-width: 160px; max-height: 80px; object-fit: contain; }
.provider-header-content { flex: 1; min-width: 280px; }
.provider-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }

.provider-body { padding-block: var(--space-12); }
.provider-grid { max-width: var(--max-width-text); margin: 0 auto; }

.provider-sw-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-top: var(--space-10);
}
@media (min-width: 768px) { .provider-sw-grid { grid-template-columns: 1fr 1fr; } }

.provider-sw-block h3 {
  font-size: var(--text-h3);
  margin-bottom: var(--space-4);
}

.provider-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.provider-list li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); }
.provider-list li::before { content: '✓'; color: #22c55e; font-weight: 700; flex-shrink: 0; }
.provider-list--warn li::before { content: '⚠'; color: #f59e0b; }

.provider-how-section, .provider-faq-section { margin-top: var(--space-10); }
.provider-how-section h3, .provider-faq-section h3 { font-size: var(--text-h3); margin-bottom: var(--space-6); }

.provider-steps { display: flex; flex-direction: column; gap: var(--space-6); }
.provider-step { display: flex; align-items: flex-start; gap: var(--space-4); }
.provider-step-num {
  background: var(--color-bg-navy);
  color: white;
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.provider-faq { display: flex; flex-direction: column; gap: var(--space-2); }
.provider-faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6);
}
.provider-faq-q { cursor: pointer; font-weight: var(--fw-semibold); list-style: none; }
.provider-faq-q::-webkit-details-marker { display: none; }
.provider-faq-a { margin-top: var(--space-3); color: var(--color-text-secondary); line-height: var(--lh-body); }

/* ─── TOOL PAGE ─────────────────────────────────────────────────────── */
.tool-cover-image { max-height: 400px; overflow: hidden; }
.tool-cover-img { width: 100%; height: 400px; object-fit: cover; }
.tool-header { padding-block: var(--space-10) var(--space-8); }
.tool-meta-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; align-items: center; }
.tool-time { font-size: var(--text-sm); color: var(--color-text-muted); }
.tool-body { padding-block: var(--space-10); }

/* ─── POST STYLES ───────────────────────────────────────────────────── */
.post-cover {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (min-width: 768px) { .post-cover { height: 420px; } }

.post-cover-emoji { font-size: 5rem; }

.post-header { padding-block: var(--space-10) var(--space-8); border-bottom: 1px solid var(--color-border); }
.post-breadcrumb { margin-bottom: var(--space-6); }
.post-breadcrumb a { font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none; }
.post-breadcrumb a:hover { color: var(--color-accent); }

.post-meta-row { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-6); }
.post-category { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-accent); text-transform: uppercase; letter-spacing: .06em; }
.post-date, .post-rt { font-size: var(--text-sm); color: var(--color-text-muted); }
.post-dot { color: var(--color-text-muted); }
.post-title { font-size: var(--text-h1); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: -.02em; }
.post-excerpt { font-size: var(--text-body-lg); color: var(--color-text-muted); margin-top: var(--space-4); line-height: var(--lh-body); max-width: var(--max-width-text); }
.post-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.post-tag { font-size: var(--text-caption); font-weight: var(--fw-medium); background: var(--color-bg-alt); color: var(--color-text-muted); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); }

.post-body { padding-block: var(--space-12); }
.post-content { max-width: var(--max-width-text); margin: 0 auto; line-height: var(--lh-body); }
.post-content h2 { font-size: var(--text-h2); margin-top: var(--space-10); margin-bottom: var(--space-4); }
.post-content h3 { font-size: var(--text-h3); margin-top: var(--space-8); margin-bottom: var(--space-3); }
.post-content p { margin-bottom: var(--space-6); }
.post-content ul, .post-content ol { padding-left: var(--space-6); margin-bottom: var(--space-6); }
.post-content li { margin-bottom: var(--space-2); }
.post-content blockquote { border-left: 4px solid var(--color-accent); padding-left: var(--space-6); margin: var(--space-8) 0; font-size: var(--text-body-lg); color: var(--color-text-secondary); font-style: italic; }
.post-content img { border-radius: var(--radius-lg); margin-block: var(--space-8); }
.post-content strong { font-weight: var(--fw-semibold); }
.post-content a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.post-content code { background: var(--color-bg-alt); padding: 2px 6px; border-radius: var(--radius-sm); font-size: .875em; }
.post-content pre { background: var(--color-bg-dark); color: white; padding: var(--space-6); border-radius: var(--radius-md); overflow-x: auto; margin-block: var(--space-6); }
.post-content pre code { background: none; padding: 0; }

.post-author-box {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  max-width: var(--max-width-text);
  margin: var(--space-12) auto 0;
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.post-author-avatar img { width: 56px; height: 56px; border-radius: var(--radius-full); object-fit: cover; }
.post-author-info strong { display: block; font-weight: var(--fw-semibold); margin-bottom: var(--space-2); }
.post-author-info p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--lh-body); }

.post-share {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  max-width: var(--max-width-text);
  margin: var(--space-8) auto 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.post-share a { color: var(--color-accent); font-weight: var(--fw-semibold); text-decoration: none; }
.post-share a:hover { text-decoration: underline; }

.post-related { padding-block: var(--space-12); }

/* ─── PAGE CONTENT ──────────────────────────────────────────────────── */
.page-content { max-width: var(--max-width-text); margin: 0 auto; }
.page-content h2 { font-size: var(--text-h2); margin-top: var(--space-10); margin-bottom: var(--space-4); }
.page-content p { margin-bottom: var(--space-6); line-height: var(--lh-body); }
.page-content ul { padding-left: var(--space-6); margin-bottom: var(--space-6); }
.page-content li { margin-bottom: var(--space-2); }