/* WordPress, Gutenberg and Elementor compatibility additions. */

body.admin-bar .site-header { top: 32px; }

.vds-content-area {
  min-height: 60vh;
  padding: 72px 0;
  background: #f8fbff;
}

.vds-elementor-content { min-height: 40vh; }
.content-shell { max-width: 980px; }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
.content-layout.has-sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
.content-primary { min-width: 0; }
.content-sidebar { min-width: 0; }

.content-article,
.no-results,
.comments-area {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 48px);
}

.entry-header { margin-bottom: 28px; }
.entry-title {
  color: var(--color-heading);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.entry-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 14px; color: var(--color-muted); font-size: 0.87rem; }
.entry-meta a:hover { color: var(--color-primary); }
.entry-featured-image { margin: 0 0 32px; overflow: hidden; border-radius: var(--radius-medium); }
.entry-featured-image img { width: 100%; }

.entry-content { color: var(--color-text); }
.entry-content > * + * { margin-top: 1.35em; }
.entry-content h2,
.entry-content h3,
.entry-content h4 { color: var(--color-heading); line-height: 1.25; margin-top: 1.8em; }
.entry-content h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); }
.entry-content h3 { font-size: clamp(1.25rem, 2.5vw, 1.65rem); }
.entry-content p,
.entry-content li { line-height: 1.8; }
.entry-content ul { list-style: disc; padding-left: 1.4rem; }
.entry-content ol { list-style: decimal; padding-left: 1.4rem; }
.entry-content a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.entry-content blockquote { margin-left: 0; padding: 18px 22px; border-left: 4px solid var(--color-primary); background: var(--color-light); border-radius: 0 var(--radius-small) var(--radius-small) 0; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th,
.entry-content td { padding: 12px; border: 1px solid var(--color-border); text-align: left; }
.entry-content pre { overflow-x: auto; padding: 18px; border-radius: var(--radius-small); background: var(--color-navy); color: #fff; }
.entry-content img { border-radius: var(--radius-small); }
.entry-footer { margin-top: 32px; }
.tag-links { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-links a { padding: 6px 10px; border-radius: var(--radius-pill); background: var(--color-light); color: var(--color-primary); font-size: 0.82rem; }

.archive-header { max-width: 760px; margin-bottom: 34px; }
.archive-description { margin-top: 12px; color: var(--color-muted); }
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.post-card { overflow: hidden; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-medium); box-shadow: var(--shadow-card); transition: transform var(--transition), box-shadow var(--transition); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.post-card-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.post-card:hover .post-card-image img { transform: scale(1.04); }
.post-card-body { padding: 24px; }
.post-card-title { color: var(--color-heading); font-size: 1.25rem; line-height: 1.3; margin: 8px 0 12px; }
.post-card-title a:hover { color: var(--color-primary); }
.post-card-excerpt { margin-bottom: 18px; color: var(--color-muted); }
.post-card-excerpt p { margin: 0; }

.navigation.pagination { margin-top: 38px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.page-numbers { display: grid; place-items: center; min-width: 42px; min-height: 42px; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; }
.page-numbers.current,
.page-numbers:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.post-navigation { margin-top: 28px; }
.post-navigation .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.post-navigation a { display: block; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-small); background: #fff; }
.nav-subtitle { display: block; color: var(--color-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.nav-title { display: block; margin-top: 4px; color: var(--color-heading); font-weight: 700; }

.widget { padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: #fff; box-shadow: var(--shadow-card); }
.widget + .widget { margin-top: 22px; }
.widget-title { color: var(--color-heading); font-size: 1.1rem; margin-bottom: 14px; }
.widget ul { display: grid; gap: 8px; }
.widget a:hover { color: var(--color-primary); }

.search-form { display: flex; gap: 10px; margin-top: 24px; }
.search-form label { flex: 1; }
.search-field { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid #cfd9e7; border-radius: var(--radius-small); font: inherit; }
.search-field:focus { outline: 3px solid rgba(17, 189, 227, 0.3); border-color: var(--color-primary); }
.error-404 { max-width: 760px; text-align: center; }
.error-404 .search-form { margin: 26px auto; max-width: 560px; }
.error-code { color: var(--color-primary); font-size: clamp(5rem, 15vw, 10rem); font-weight: 800; line-height: 0.9; opacity: 0.12; }

.comment-list { display: grid; gap: 18px; margin: 24px 0; }
.comment-body { padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-small); }
.comment-meta { margin-bottom: 10px; }
.comment-author { display: flex; align-items: center; gap: 10px; }
.comment-author img { border-radius: 50%; }
.comment-form > p { margin-top: 16px; }
.comment-form input:not([type="submit"]),
.comment-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #cfd9e7; border-radius: var(--radius-small); font: inherit; }
.form-submit .submit { display: inline-flex; min-height: 44px; padding: 12px 22px; border-radius: var(--radius-small); background: var(--color-primary); color: #fff; font-weight: 600; }

.footer-widget-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-bottom: 36px; }

.alignwide { width: min(1180px, calc(100vw - 40px)); max-width: none; margin-left: 50%; transform: translateX(-50%); }
.alignfull { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); }

/* Elementor content should retain list formatting inside text widgets. */
.elementor-widget-text-editor ul { list-style: disc; padding-left: 1.4rem; }
.elementor-widget-text-editor ol { list-style: decimal; padding-left: 1.4rem; }
.elementor-widget-text-editor p + p { margin-top: 1em; }
.vds-elementor-page .vds-content-area { padding: 0; background: transparent; }

@media (max-width: 992px) {
  .content-layout.has-sidebar { grid-template-columns: 1fr; }
  .post-grid { grid-template-columns: 1fr; }
  .footer-widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

@media (max-width: 576px) {
  .vds-content-area { padding: 48px 0; }
  .content-article { padding: 22px 18px; }
  .post-navigation .nav-links { grid-template-columns: 1fr; }
  .search-form { flex-direction: column; }
  .footer-widget-grid { grid-template-columns: 1fr; }
}