/*
Theme Name: Devlog
Theme URI: https://example.com/devlog
Author: Devlog
Author URI: https://example.com
Description: Quiet Terminal — an editorial, typography-forward WordPress block theme for a developer and technical blog. Newsreader serif meets JetBrains Mono, a muted sage-teal accent, and generous reading rhythm.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: devlog
*/

:root {
  /* Palette is aliased from the theme.json presets, which are editable in
     wp-admin at Site Editor → Styles → Colors → Palette. Change a colour there
     and it cascades through every .dl-* rule below — no CSS editing needed. */
  --dl-cream: var(--wp--preset--color--cream);
  --dl-ink: var(--wp--preset--color--ink);
  --dl-ink-soft: var(--wp--preset--color--ink-soft);
  --dl-accent: var(--wp--preset--color--accent);
  --dl-accent-deep: var(--wp--preset--color--accent-deep);
  --dl-surface: var(--wp--preset--color--surface);
  --dl-border: var(--wp--preset--color--border);

  /* Translucent tints derived from the palette via relative-colour syntax, so
     they also track palette edits (modern browsers: Chrome 119+, Safari 16.4+,
     Firefox 128+). */
  --dl-hairline: rgb(from var(--dl-ink) r g b / 0.12);
  --dl-header-bg: rgb(from var(--dl-cream) r g b / 0.82);
  --dl-panel-bg: rgb(from var(--dl-cream) r g b / 0.78);
  --dl-panel-border: rgb(from var(--dl-border) r g b / 0.6);
  --dl-accent-tint: rgb(from var(--dl-accent) r g b / 0.12);

  --dl-serif: "Newsreader", Georgia, serif;
  --dl-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(74, 124, 116, 0.020) 0, transparent 45%),
    radial-gradient(circle at 82% 70%, rgba(28, 27, 25, 0.020) 0, transparent 40%);
  background-attachment: fixed;
  overflow-x: hidden;
}

.wp-site-blocks > footer {
  margin-block-start: 0;
}

/* ---------- Header ---------- */
.dl-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background-color: var(--dl-header-bg);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--dl-hairline);
}
/* backdrop-filter makes the header the containing block for position:fixed
   descendants, which clips the mobile nav overlay to the header's height.
   Drop it while the overlay is open (the overlay covers the page anyway). */
.dl-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dl-brand .wp-block-site-title {
  font-family: var(--dl-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}
.dl-brand .wp-block-site-title a {
  color: var(--dl-ink);
  text-decoration: none;
}

/* mono nav with animated underline */
.dl-nav .wp-block-navigation-item__content {
  font-family: var(--dl-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--dl-ink-soft);
  text-decoration: none;
  position: relative;
  padding-bottom: 0.2rem;
  transition: color 0.35s ease;
}
.dl-nav .wp-block-navigation-item__content::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--dl-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dl-nav .wp-block-navigation-item__content:hover,
.dl-nav .wp-block-navigation-item__content:focus-visible {
  color: var(--dl-ink);
  outline: none;
}
.dl-nav .wp-block-navigation-item__content:hover::before,
.dl-nav .wp-block-navigation-item__content:focus-visible::before {
  transform: scaleX(1);
}

/* ---------- Mono kicker / section labels ---------- */
.dl-kicker {
  font-family: var(--dl-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--dl-accent);
  margin-bottom: 0;
}

.dl-section-label {
  font-family: var(--dl-mono);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--dl-accent);
  margin: 0 0 0.6rem;
}

/* ---------- Hero ---------- */
.dl-hero {
  position: relative;
}
.dl-hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent 0, var(--dl-hairline) 12%, var(--dl-hairline) 88%, transparent 100%);
  animation: dlLineGrow 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.dl-hero-title {
  font-family: var(--dl-serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 15ch;
}
.dl-hero-title em {
  font-style: italic;
  color: var(--dl-accent-deep);
}
.dl-hero-title em::before {
  content: "[";
  margin-right: 0.12em;
  color: var(--dl-accent);
  font-style: normal;
  opacity: 0.55;
}
.dl-hero-title em::after {
  content: "]";
  margin-left: 0.12em;
  color: var(--dl-accent);
  font-style: normal;
  opacity: 0.55;
}
.dl-lede {
  font-family: var(--dl-serif);
  line-height: 1.65;
  color: var(--dl-ink-soft);
  max-width: 46ch;
}
.dl-lede .dl-underline {
  background-image: linear-gradient(var(--dl-accent), var(--dl-accent));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 1.5px;
  color: var(--dl-ink);
  padding-bottom: 0.05em;
}

.dl-hero-meta {
  font-family: var(--dl-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--dl-ink-soft);
}
.dl-hero-meta .dl-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--dl-accent);
  margin-right: 0.5rem;
  vertical-align: middle;
  animation: dlPulse 3.2s ease-in-out infinite;
}

/* ---------- Post cards / query grid ---------- */
.dl-grid .wp-block-post {
  height: 100%;
}
/* .dl-grid ancestor bumps specificity to defeat core's has-global-padding */
.dl-grid .dl-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--dl-surface);
  border: 1px solid var(--dl-border);
  border-radius: 3px;
  padding: 0;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.dl-grid .dl-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(28, 27, 25, 0.08);
  border-color: var(--dl-accent);
}

/* featured image: full-bleed at top, uniform crop regardless of source aspect ratio */
.dl-grid .dl-card-image {
  margin: 0;
  display: block;
}
.dl-grid .dl-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
  border-bottom: 1px solid var(--dl-border);
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dl-grid .dl-card:hover .dl-card-image img {
  transform: scale(1.03);
}

/* padded content area below the bleed image */
.dl-grid .dl-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 1.75rem 1.75rem 2rem;
  text-align: left;
}
/* cancel constrained-layout auto margins so flex children stretch full width
   (otherwise short, non-wrapping titles shrink-to-content and center).
   Core declares these with !important, so we must match it. */
.dl-grid .dl-card-body > * {
  text-align: left;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  align-self: stretch;
}

.dl-grid .dl-card-meta {
  font-family: var(--dl-mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--dl-accent);
  margin-bottom: 0.9rem;
  justify-content: flex-start;
  text-align: left;
}
.dl-grid .dl-card-title,
.dl-grid .dl-card-excerpt {
  text-align: left;
}
.dl-card-meta .wp-block-post-date,
.dl-card-meta .wp-block-post-terms {
  font-family: var(--dl-mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--dl-ink-soft);
}
.dl-card-meta .wp-block-post-terms a {
  color: var(--dl-accent);
  text-decoration: none;
}
.dl-card-title {
  font-family: var(--dl-serif);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 0.8rem;
}
.dl-card-title a {
  color: var(--dl-ink);
  text-decoration: none;
  transition: color 0.3s ease;
}
.dl-card-title a:hover {
  color: var(--dl-accent-deep);
}
.dl-card-excerpt {
  color: var(--dl-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}
.dl-card-excerpt p { margin: 0; }

/* mono "view all" link with arrow */
.dl-viewall a {
  font-family: var(--dl-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--dl-ink);
  text-decoration: none;
  position: relative;
  padding-bottom: 0.2rem;
}
.dl-viewall a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--dl-accent);
  transform: scaleX(0.35);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dl-viewall a:hover::after { transform: scaleX(1); }

/* ---------- Equal-height cards ---------- */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}
.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* ---------- Panels ---------- */
.dl-panel-head {
  text-align: left;
}
.dl-panel-head .dl-section-label {
  margin-bottom: 0.4rem;
}
.dl-panel-heading {
  font-family: var(--dl-serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: left;
}
.dl-viewall { text-align: left; }

/* ---------- Colophon / about strip ---------- */
.dl-colophon {
  border-top: 1px solid var(--dl-hairline);
  border-bottom: 1px solid var(--dl-hairline);
}
.dl-colophon .dl-colophon-text {
  font-family: var(--dl-serif);
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--dl-ink);
  max-width: 52ch;
}

/* ---------- Subscribe CTA ---------- */
.dl-cta {
  background-color: var(--dl-accent);
  color: var(--dl-cream);
  border-radius: 4px;
}
.dl-cta .dl-cta-kicker {
  font-family: var(--dl-mono);
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: rgb(from var(--dl-cream) r g b / 0.75);
  margin: 0 0 0.8rem;
}
.dl-cta .dl-cta-heading {
  font-family: var(--dl-serif);
  font-weight: 400;
  color: var(--dl-cream);
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.dl-cta .dl-cta-text {
  font-family: var(--dl-serif);
  color: rgb(from var(--dl-cream) r g b / 0.85);
  max-width: 44ch;
  margin: 0 0 1.6rem;
}
.dl-cta .wp-block-button__link {
  background-color: var(--dl-cream);
  color: var(--dl-ink);
}
.dl-cta .wp-block-button__link:hover {
  background-color: var(--dl-ink);
  color: var(--dl-cream);
}

/* ---------- Single post: featured-image hero ---------- */
.dl-post-hero {
  color: var(--dl-cream);
}
.dl-post-hero .wp-block-cover__image-background {
  object-fit: cover;
}
/* near-opaque panel keeps meta + title legible over any image */
/* scope through the cover inner container to outrank core's
   .has-global-padding rule, which otherwise overrides the side padding */
.dl-post-hero .wp-block-cover__inner-container .dl-post-hero-panel {
  background-color: var(--dl-panel-bg);
  border: 1px solid var(--dl-panel-border);
  border-radius: 3px;
  padding: 2.2rem 2.6rem 2.4rem;
  max-width: min(720px, 100%);
  margin-left: 0 !important;
  margin-right: auto !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 40px rgba(28, 27, 25, 0.18);
}
.dl-post-hero-panel .wp-block-post-title {
  font-family: var(--dl-serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--dl-ink);
  margin: 0;
}
.dl-post-hero-panel .dl-post-meta {
  margin-bottom: 0.4rem;
}

/* ---------- Single / archive post header ---------- */
.dl-post-header .wp-block-post-title {
  font-family: var(--dl-serif);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.dl-post-meta {
  font-family: var(--dl-mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--dl-ink-soft);
}
.dl-post-meta .wp-block-post-terms a { color: var(--dl-accent); text-decoration: none; }
.dl-post-meta .wp-block-post-date { color: var(--dl-ink-soft); }

.dl-archive-title .wp-block-query-title,
.dl-archive-title .wp-block-term-description {
  font-family: var(--dl-serif);
}
.dl-archive-title .wp-block-query-title {
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ---------- Footer ---------- */
.dl-footer {
  border-top: 1px solid var(--dl-hairline);
}
.dl-footer .dl-footer-mark {
  font-family: var(--dl-mono);
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--dl-accent);
}
.dl-footer .dl-footer-copy,
.dl-footer .dl-footer-end {
  font-family: var(--dl-mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--dl-ink-soft);
}
.dl-footer .dl-footer-links a {
  font-family: var(--dl-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--dl-ink-soft);
  text-decoration: none;
  transition: color 0.3s ease;
}
.dl-footer .dl-footer-links a:hover { color: var(--dl-accent); }

/* ---------- Post content reading rhythm ---------- */
.dl-content p { line-height: 1.7; }
.dl-content h2 { margin-top: 2.4rem; }

/* ---------- Code blocks (terminal-style) ---------- */
.wp-block-code {
  font-family: var(--dl-mono);
  font-size: 0.82rem;
  line-height: 1.65;
  background-color: #201f1d;
  color: #e8e5dd;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--dl-accent);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  margin: 1.9rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 10px 24px rgba(28, 27, 25, 0.10);
  tab-size: 2;
}
.wp-block-code code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  padding: 0;
  white-space: pre;
}

/* inline code within prose */
.dl-content :not(pre) > code {
  font-family: var(--dl-mono);
  font-size: 0.86em;
  background-color: var(--dl-accent-tint);
  color: var(--dl-accent-deep);
  padding: 0.12em 0.4em;
  border-radius: 3px;
}

/* single post: left-align content + back link to the container's left edge
   (at a reading measure) so it lines up with the header/footer content */
.dl-single .dl-post-header,
.dl-single .dl-content,
.dl-single .dl-viewall {
  max-width: 720px;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* front page: content keeps the 720px reading measure, but wide-aligned
   blocks (e.g. the latest-posts card grids) span the full 1280px column */
.dl-single.dl-home .dl-content,
.dl-home .dl-content > .wp-block-post-content {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.dl-home .dl-content .wp-block-post-content > :not(.alignwide):not(.alignfull) {
  max-width: 720px;
  margin-left: 0 !important;
  margin-right: auto !important;
}
.dl-home .dl-content .wp-block-post-content > .alignwide {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---------- Pagination ---------- */
.wp-block-query-pagination {
  font-family: var(--dl-mono);
  font-size: 0.82rem;
}

/* ================= Motion ================= */
.fade-up {
  opacity: 0;
  transform: translateY(1.2em);
  animation: dlFadeUp 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.hover-lift {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(28, 27, 25, 0.08);
}

@keyframes dlFadeUp {
  from { opacity: 0; transform: translateY(1.2em); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes dlLineGrow {
  from { transform: scaleY(0); transform-origin: top; }
  to   { transform: scaleY(1); transform-origin: top; }
}
@keyframes dlPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
  .dl-hero::before { display: none; }

  /* larger type for small screens: the mono labels/meta are tiny at desktop sizes */
  .dl-grid .dl-card-meta,
  .dl-card-meta .wp-block-post-date,
  .dl-card-meta .wp-block-post-terms,
  .dl-footer .dl-footer-copy,
  .dl-footer .dl-footer-end,
  .dl-section-label,
  .dl-kicker,
  .dl-post-meta,
  .wp-block-query-pagination {
    font-size: 0.875rem;
  }
  .dl-card-excerpt {
    font-size: 1.0625rem;
  }
  .dl-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    font-size: 1.125rem;
  }
}

/* ================= Editor visibility ================= */
.editor-styles-wrapper .fade-up,
.editor-styles-wrapper .animate-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .fade-up,
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
  .dl-hero-meta .dl-dot { opacity: 0.8; }
}