/* WordPress-specific additions for the Vibralizer block theme. */

.site-header.site-header--blog {
  padding: 1rem 0 2.5rem 0;
}

.site-header.site-header--blog .container {
  padding-block: 1.5rem;
}

.blog-header__inner {
  gap: 1rem;
  align-items: center;
}

.blog-header__brand {
  display: inline-flex;
  align-items: center;
}

.blog-header__brand .brand__logo {
  width: clamp(180px, 30vw, 260px);
}

.blog-header__nav {
  font-family: var(--font-body);
  font-size: 1rem;
}

.blog-header__nav .wp-block-navigation__container {
  gap: 0.25rem;
}

.blog-header__nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.15s ease-in-out;
}

.blog-header__nav a:hover,
.blog-header__nav a:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Main layout */

.vibralizer-blog-main {
  background: var(--bg);
  color: var(--ink);
}

.vibralizer-blog-main .container {
  padding-top: 2.5rem;
  padding-bottom: 3.5rem;
}

.blog-page-title,
.single-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0 0 1rem 0;
}

/* Post list */

.blog-post-template {
  margin-top: 1.5rem;
}

.blog-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.blog-title a {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.15;
  text-decoration: none;
}

.blog-title a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

.blog-meta,
.blog-meta * {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.85);
}

.blog-meta a {
  color: var(--accent-yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wp-block-post-excerpt__excerpt {
  margin-top: 0.75rem;
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.7;
}

.wp-block-read-more a {
  display: inline-flex;
  margin-top: 0.75rem;
  font-family: var(--font-ui);
  color: var(--accent-yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wp-block-read-more a:hover {
  color: #ffffff;
}

.wp-block-post-author__avatar img
{
  border-radius: 50%;
}

/* Single post content */

.blog-content,
.wp-block-post-content {
  margin-top: 1.5rem;
}

.wp-block-post-content,
.wp-block-post-content p,
.wp-block-post-content li,
.wp-block-post-content blockquote {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.92);
}

.wp-block-post-content a {
  color: var(--accent-yellow);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wp-block-post-content h2,
.wp-block-post-content h3,
.wp-block-post-content h4,
.wp-block-post-content h5,
.wp-block-post-content h6 {
  font-family: var(--font-display);
  color: var(--ink);
  margin-top: 2.25rem;
}

.blog-post-footer {
  margin-top: 2rem;
}

.blog-post-footer a {
  font-family: var(--font-ui);
  color: var(--accent-yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 404 */

.vibralizer-404 {
  text-align: center;
}

.vibralizer-404 .lead {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.92);
}

.vibralizer-404 .button-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.vibralizer-404 .button-row .button {
  width: 260px;
}

/* Keep the Site Editor canvas readable */
.editor-styles-wrapper {
  background: var(--bg);
  color: var(--ink);
}