/*
  blog.css — Digi Tale Craft Blog theme
  ----------------------------------------------------------------
  Scoped entirely to this WordPress blog. Loaded AFTER the main
  site's stylesheet (digitalecraft.com/css/style.css), so it reuses
  the same design tokens (--bg, --bg-panel, --border, --accent1,
  --accent2, --text, --text-soft, --grad, --radius, fonts) without
  redefining anything or touching the main site's file.
  ----------------------------------------------------------------
*/

/* ==========================================================
   1. TOOLBAR — search box (left) + social icons (right)
   ========================================================== */
.blog-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}

.blog-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 440px;
}

.blog-search input {
  width: 100%;
  background: var(--bg-panel);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 15px 54px 15px 22px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  transition: border-color .2s, box-shadow .2s;
}

.blog-search input::placeholder {
  color: var(--text-soft);
}

.blog-search input:focus {
  outline: none;
  border-color: var(--accent1);
  box-shadow: 0 0 0 4px rgba(124, 92, 255, .15);
}

.blog-search button {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: var(--grad);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

.blog-search button:hover {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 4px 16px rgba(124, 92, 255, .4);
}

.blog-search button svg {
  width: 16px;
  height: 16px;
  stroke: #0A0D12;
}

.blog-social {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.blog-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s, background .2s;
}

.blog-social a svg {
  width: 17px;
  height: 17px;
  color: var(--text);
  transition: color .2s;
}

.blog-social a:hover {
  border-color: var(--accent2);
  background: var(--bg-panel-2);
}

.blog-social a:hover svg {
  color: var(--accent2);
}

/* Empty state (no posts / no search matches) */
.blog-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 70px 30px;
  text-align: center;
  color: var(--text-soft);
}

/* ==========================================================
   2. POST THUMBNAILS — card grid + single post
   ========================================================== */
.blog-thumb {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  margin-bottom: 18px;
  aspect-ratio: 16 / 10;
}

.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.blog-card:hover .blog-thumb img {
  transform: scale(1.05);
}

.blog-single-wrap .blog-thumb {
  aspect-ratio: 21 / 9;
  margin-bottom: 40px;
}

/* ==========================================================
   3. PAGINATION — modern pill style, WordPress's own
      paginate_links() markup (.page-numbers / .current / .dots)
   ========================================================== */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 56px;
}

.blog-pagination .page-numbers {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  border: 1.5px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-soft);
  transition: border-color .2s, background .2s, color .2s, transform .2s;
}

a.page-numbers:hover {
  border-color: var(--accent2);
  color: var(--text);
  transform: translateY(-2px);
}

.blog-pagination .page-numbers.current {
  background: var(--grad);
  border-color: transparent;
  color: #0A0D12;
  font-weight: 700;
}

.blog-pagination .page-numbers.dots {
  border: none;
  background: none;
  color: var(--text-soft);
}

.blog-pagination .prev.page-numbers,
.blog-pagination .next.page-numbers {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  transition: transform .2s ease;
}

.blog-pagination .prev.page-numbers:hover,
.blog-pagination .next.page-numbers:hover {
  transform: translateY(-2px);
  background: none;
  border: none;
  color: inherit;
}

.blog-pagination .prev.page-numbers:active,
.blog-pagination .next.page-numbers:active {
  transform: translateY(0) scale(.9);
}

/* circular "face" of the arrow — same bloom/glow treatment as the
   portfolio page's category-tab scroll arrows */
.page-arrow-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-soft);
  box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .65);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .25s ease, color .25s ease, box-shadow .3s ease;
}

/* gradient fill that blooms outward from the centre on hover */
.page-arrow-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--grad);
  opacity: 0;
  transform: scale(.35);
  transition: opacity .3s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}

.blog-pagination .prev.page-numbers:hover .page-arrow-face,
.blog-pagination .next.page-numbers:hover .page-arrow-face {
  border-color: transparent;
  color: #0A0D12;
  box-shadow: 0 14px 30px -10px rgba(124, 92, 255, .7), 0 0 0 5px rgba(0, 217, 192, .12);
}

.blog-pagination .prev.page-numbers:hover .page-arrow-face::before,
.blog-pagination .next.page-numbers:hover .page-arrow-face::before {
  opacity: 1;
  transform: scale(1);
}

.page-arrow-face svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* chevron glides in its direction while hovered — identical timing
   to the portfolio tab arrows (pf-arrow-right / pf-arrow-left) */
.blog-pagination .next.page-numbers:hover .page-arrow-face svg { animation: pageArrowRight .85s ease-in-out infinite; }
.blog-pagination .prev.page-numbers:hover .page-arrow-face svg { animation: pageArrowLeft  .85s ease-in-out infinite; }

@keyframes pageArrowRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes pageArrowLeft  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }

@media (max-width: 600px) {
  .blog-pagination .page-numbers {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 0.8rem;
  }
  .blog-pagination .prev.page-numbers,
  .blog-pagination .next.page-numbers {
    width: 38px;
    height: 38px;
  }
}

/* ==========================================================
   4. SINGLE POST — article typography
   ========================================================== */
.blog-content {
  color: var(--text-soft);
  line-height: 1.85;
  font-size: 1.02rem;
}

.blog-content::after {
  content: "";
  display: block;
  clear: both;
}

.blog-content > *:first-child {
  margin-top: 0;
}

.blog-content p {
  margin: 0 0 22px;
}

.blog-content h2 {
  color: var(--text);
  font-size: 1.5rem;
  margin: 44px 0 18px;
  line-height: 1.3;
}

.blog-content h3 {
  color: var(--text);
  font-size: 1.2rem;
  margin: 34px 0 14px;
}

.blog-content h4 {
  color: var(--text);
  font-size: 1.05rem;
  margin: 28px 0 12px;
}

.blog-content ul,
.blog-content ol {
  margin: 0 0 22px;
  padding-left: 22px;
}

.blog-content li {
  margin-bottom: 8px;
}

.blog-content a {
  color: var(--accent2);
  text-decoration: underline;
  text-decoration-color: rgba(0, 217, 192, .4);
  text-underline-offset: 3px;
}

.blog-content a:hover {
  text-decoration-color: var(--accent2);
}

.blog-content strong {
  color: var(--text);
}

.blog-content blockquote {
  margin: 30px 0;
  padding: 20px 26px;
  border-left: 3px solid var(--accent2);
  background: var(--bg-panel);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text);
  font-style: italic;
}

.blog-content blockquote p:last-child {
  margin-bottom: 0;
}

.blog-content code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent2);
}

.blog-content pre {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  overflow-x: auto;
  margin: 0 0 24px;
}

.blog-content pre code {
  border: none;
  background: none;
  padding: 0;
}

.blog-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 40px 0;
}

/* ==========================================================
   5. INLINE ARTICLE IMAGES — automatic left/right alternation
   ----------------------------------------------------------
   A non-technical editor just inserts a normal WordPress "Image"
   block between paragraphs the usual way in the block editor —
   no settings to configure. Every image alternates side
   automatically. To keep an image full width instead, the editor
   only needs to pick "Wide width" or "Full width" from the image
   block's alignment options — those are left untouched here.
   ========================================================== */
.blog-content .wp-block-image {
  margin: 8px 0 28px;
}

.blog-content .wp-block-image img {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  width: 100%;
}

.blog-content .wp-block-image figcaption {
  color: var(--text-soft);
  font-size: 0.82rem;
  font-style: italic;
  margin-top: 8px;
  text-align: center;
}

@media (min-width: 700px) {
  .blog-content .wp-block-image:not(.alignfull):not(.alignwide):nth-of-type(odd) {
    float: left;
    width: 44%;
    margin: 8px 28px 22px 0;
  }
  .blog-content .wp-block-image:not(.alignfull):not(.alignwide):nth-of-type(even) {
    float: right;
    width: 44%;
    margin: 8px 0 22px 28px;
  }
}

.blog-content .wp-block-image.alignfull,
.blog-content .wp-block-image.alignwide {
  width: 100%;
}

.blog-content .wp-block-gallery {
  clear: both;
}

/* ==========================================================
   6. RESPONSIVE
   ========================================================== */
@media (max-width: 640px) {
  .blog-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .blog-search {
    max-width: none;
  }
  .blog-social {
    justify-content: center;
  }
}