/*
Theme Name: JPL Blog
Theme URI: https://jean-pierre.lambelet.net
Description: Minimal dev-blog child theme of GeneratePress. Single column, system fonts, restrained palette inspired by GitHub.
Author: Jean-Pierre Lambelet
Author URI: https://jean-pierre.lambelet.net
Template: generatepress
Version: 0.2.3
Text Domain: jpl-blog
*/

:root {
  --color-bg: #faf8f3;
  --color-card: #ffffff;
  --color-fg: #1a1814;
  --color-muted: #6b6358;
  --color-border: #e6e0d4;
  --color-accent: #0969da;
  --color-accent-hover: #0550ae;
  --color-code-bg: #f1ece1;
  --color-tag-bg: #ede7d7;
  --color-tag-fg: #5c5240;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;

  --width-content: 1080px;
  --width-content-archive: 1080px;
  --width-page: 1080px;
  --width-prose: 760px;
}

html {
  font-size: 17px;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-fg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page container — explicit centering (GP loses margin auto when we override max-width) */
.site.grid-container,
.inside-header,
.inside-navigation,
.inside-site-info {
  max-width: var(--width-page);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* === Header === */
.site-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: 0;
}

.inside-header {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.site-branding {
  text-align: left;
  padding: 0;
}

.main-title {
  font-size: 1.875rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0;
  line-height: 1.1;
}

.main-title a {
  color: var(--color-fg);
  text-decoration: none;
}

.main-title a:hover {
  color: var(--color-accent);
}

/* Tagline shown below the site title in the header */
.site-description {
  font-size: 1rem;
  color: var(--color-muted);
  font-style: italic;
  margin: 0.375rem 0 0;
  font-weight: 400;
  line-height: 1.3;
}

/* === Navigation === */
.main-navigation {
  background: transparent;
  min-height: 0;
  /* Constrain to page width so it doesn't overflow when GP sets flex-basis: 100% */
  max-width: 100%;
  width: auto;
}

.main-navigation .inside-navigation {
  padding: 0;
  max-width: 100%;
  margin: 0;
}

.main-navigation ul.menu {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.main-navigation .main-nav ul li a {
  color: var(--color-fg);
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.5rem 0.75rem;
  line-height: 1;
}

/* Mobile toggle button — hidden on desktop, visible on small screens */
.main-navigation .menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--color-fg);
  font-size: 1.25rem;
}

.main-navigation .menu-toggle:hover {
  color: var(--color-accent);
  background: transparent;
}

/* Hide the toggle that's inside the mobile-menu-control-wrapper on desktop */
#mobile-menu-control-wrapper {
  display: none;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a {
  color: var(--color-accent);
  background: transparent;
}

/* Hide home icon */
.home-page-link,
.menu-item-home-icon,
.main-navigation .main-nav .home-link {
  display: none !important;
}

/* === Language switcher: segmented EN | FR toggle (swingplaylist style) === */
.pll-parent-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
}

/* Hide the parent <a> entirely — the sub-menu items ARE the toggle */
.pll-parent-menu-item > a {
  display: none !important;
}

/* Sub-menu becomes the inline pill group — beat GP's hover-only visibility hide */
.main-navigation .pll-parent-menu-item ul.sub-menu,
.main-navigation .main-nav .pll-parent-menu-item ul.sub-menu,
.main-navigation .main-nav ul .pll-parent-menu-item > ul.sub-menu {
  position: static !important;
  display: flex !important;
  flex-direction: row !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 999px !important;
  padding: 2px !important;
  width: auto !important;
  min-width: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  gap: 0 !important;
}

.main-navigation .pll-parent-menu-item ul.sub-menu li {
  width: auto !important;
  display: block !important;
  margin: 0 !important;
}

.main-navigation .pll-parent-menu-item ul.sub-menu li a {
  padding: 0.25rem 0.625rem !important;
  border-radius: 999px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  text-align: center !important;
  min-width: 0 !important;
  display: block !important;
  color: var(--color-fg);
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.main-navigation .pll-parent-menu-item ul.sub-menu li.current-lang a,
.main-navigation .pll-parent-menu-item ul.sub-menu li[class*="current-lang"] a {
  background: var(--color-fg) !important;
  color: var(--color-card) !important;
}

.main-navigation .pll-parent-menu-item ul.sub-menu li:not(.current-lang) a:hover {
  background: var(--color-tag-bg) !important;
  color: var(--color-fg) !important;
}

/* === Layout, single column, no sidebar === */
.site-content {
  padding: 2.5rem 0 4rem;
}

/* Section heading above the article grid (small, label-style). */
.home-articles-heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1.5rem 0 0.25rem;
  color: var(--color-muted);
}

/* Search form on the homepage, between hero and article grid. */
.home-search {
  display: flex;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
}

.home-search__input {
  flex: 1;
  padding: 0.625rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-fg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-search__input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
}

.home-search__submit {
  padding: 0.625rem 1.25rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-fg);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.home-search__submit:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-bg);
}

/* Hero tags: small pills under the bio. */
.home-hero__tags {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.home-hero__tag {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-tag-fg);
  background: var(--color-tag-bg);
  border-radius: 999px;
  letter-spacing: 0;
}

.home-hero__tag a,
.home-hero__tag span {
  display: block;
  padding: 0.125rem 0.625rem;
  color: inherit;
  text-decoration: none;
}

.home-hero__tag a:hover {
  background: var(--color-border);
  border-radius: 999px;
}

/* === Mini hero on the homepage (page 1 only). Sits above the article grid. === */
.home-hero {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(31, 35, 40, 0.04);
}

.home-hero__photo {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
}

.home-hero__body {
  flex: 1;
  min-width: 0;
}

.home-hero__bio {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--color-fg);
}

.home-hero__cta {
  margin: 0;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.home-hero__link {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-fg);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.home-hero__link:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-bg);
}

@media (max-width: 600px) {
  .home-hero {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.25rem;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
  }
  .home-hero__body {
    width: 100%;
  }
  .home-hero__photo {
    width: 72px;
    height: 72px;
  }
  .home-hero__bio {
    overflow-wrap: anywhere;
  }

  /* Search form: stack vertically on narrow viewports so the submit button
     doesn't get pushed past the card edge. */
  .home-search {
    flex-direction: column;
  }
  .home-search__input {
    min-width: 0;
  }
}

/* On single posts/pages, wrap everything in a white card. The card itself is
   capped near the prose width so there's no awkward whitespace between the
   card padding and the prose. The featured image still breaks out via negative
   margins to fill the card edge-to-edge. */
.single .site-main > article > .inside-article,
.page .site-main > article > .inside-article {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 2.5rem 3rem;
  box-shadow: 0 1px 3px rgba(31, 35, 40, 0.04);
}

/* Comments-area as a sibling card to the article (same width, same look) */
.single .comments-area,
.page .comments-area {
  max-width: 880px;
  margin: 1.5rem auto 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 2.5rem 3rem;
  box-shadow: 0 1px 3px rgba(31, 35, 40, 0.04);
}

/* Inside the comments card, narrow the form/list to prose width for readability */
.single .comments-area .comments-title,
.single .comments-area .comment-list,
.single .comments-area .comment-respond,
.page .comments-area .comments-title,
.page .comments-area .comment-list,
.page .comments-area .comment-respond {
  max-width: var(--width-prose);
  margin-left: auto;
  margin-right: auto;
}

/* The featured image breaks out of the prose-narrow constraint to fill the card */
.single .post-image,
.page .post-image {
  max-width: none;
  margin-left: -3rem;
  margin-right: -3rem;
  margin-top: -2.5rem;
  margin-bottom: 2rem;
  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.single .post-image img,
.page .post-image img {
  border-radius: 0;
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

/* Photo credit caption under the featured image on single posts/pages */
.single .featured-image-caption,
.page .featured-image-caption {
  margin: -1.5rem 0 2rem;
  font-size: 0.75rem;
  color: var(--color-muted);
  font-style: italic;
  text-align: right;
  line-height: 1.4;
}

.single .featured-image-caption a,
.page .featured-image-caption a {
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.single .featured-image-caption a:hover,
.page .featured-image-caption a:hover {
  color: var(--color-accent);
}

.content-area {
  width: 100%;
  float: none;
  margin: 0;
}

.sidebar,
.widget-area,
.is-right-sidebar,
.is-left-sidebar,
#right-sidebar,
#left-sidebar {
  display: none !important;
}

/* Force the site-content to a single column (override GP's flex layout) */
.site-content {
  display: block;
}

.content-area {
  width: 100% !important;
  float: none !important;
  margin: 0 auto;
}

.separate-containers .inside-article,
.separate-containers .site-content {
  padding: 0;
  background: transparent;
}

article.post,
article.page {
  margin-bottom: 0;
  background: transparent;
}

/* === Post listing (home, archives) === */
.home .site-main > article,
.archive .site-main > article,
.search .site-main > article {
  border-bottom: 1px solid var(--color-border);
  padding: 1.75rem 0;
  background: transparent;
}

.home .site-main > article:first-of-type,
.archive .site-main > article:first-of-type,
.search .site-main > article:first-of-type {
  padding-top: 0;
}

/* Show excerpt on listings (short preview under each title) */
.home .entry-content,
.archive .entry-content,
.search .entry-content {
  display: none;
}

.home .entry-summary,
.archive .entry-summary,
.search .entry-summary {
  font-size: 0.9375rem;
  color: var(--color-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home .entry-summary p,
.archive .entry-summary p,
.search .entry-summary p {
  margin: 0;
}

/* === Listing as a 2-column grid with full-width "feature" rows ===
   Default: each article is half-width with image on top.
   Every 5th article (positions 1, 6, 11...) spans both columns with image on the left.
   Pattern: 1 full, 2 half, 2 half, 1 full, 2 half, ... */
.home .site-main,
.archive .site-main,
.search .site-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

/* The whole row (page-header, pagination, etc.) keeps spanning full width */
.home .site-main > :not(article),
.archive .site-main > :not(article),
.search .site-main > :not(article) {
  grid-column: 1 / -1;
}

.home .site-main > article,
.archive .site-main > article,
.search .site-main > article {
  border-bottom: none;
  padding: 0;
  margin: 0;
  transition: transform 0.18s ease;
  grid-column: span 1;
}

.home .site-main > article:hover,
.archive .site-main > article:hover,
.search .site-main > article:hover {
  transform: translateY(-2px);
}

/* === DEFAULT (half-width) card: image on top, content below === */
.home .site-main > article > .inside-article,
.archive .site-main > article > .inside-article,
.search .site-main > article > .inside-article {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  row-gap: 0.5rem;
  align-items: start;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  height: 100%;
}

.home .site-main > article:hover > .inside-article,
.archive .site-main > article:hover > .inside-article,
.search .site-main > article:hover > .inside-article {
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(31, 35, 40, 0.08);
}

.home .post-image,
.archive .post-image,
.search .post-image {
  margin: 0 0 0.5rem;
  grid-column: 1;
  grid-row: 1;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid var(--color-border);
}

.home .post-image img,
.archive .post-image img,
.search .post-image img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 0;
  border: 0;
  transition: transform 0.25s ease;
}

.home .site-main > article:hover .post-image img,
.archive .site-main > article:hover .post-image img,
.search .site-main > article:hover .post-image img {
  transform: scale(1.04);
}

.home .entry-header,
.archive .entry-header,
.search .entry-header {
  grid-column: 1;
  grid-row: 2;
}

.home .entry-summary,
.archive .entry-summary,
.search .entry-summary {
  grid-column: 1;
  grid-row: 3;
}

/* === FULL-WIDTH (feature) card: every 5th, image on the left === */
.home .site-main > article:nth-of-type(5n),
.archive .site-main > article:nth-of-type(5n),
.search .site-main > article:nth-of-type(5n) {
  grid-column: 1 / -1;
}

.home .site-main > article:nth-of-type(5n).has-post-thumbnail > .inside-article,
.archive .site-main > article:nth-of-type(5n).has-post-thumbnail > .inside-article,
.search .site-main > article:nth-of-type(5n).has-post-thumbnail > .inside-article {
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  padding: 1.25rem;
}

.home .site-main > article:nth-of-type(5n).has-post-thumbnail .post-image,
.archive .site-main > article:nth-of-type(5n).has-post-thumbnail .post-image,
.search .site-main > article:nth-of-type(5n).has-post-thumbnail .post-image {
  grid-column: 1;
  grid-row: 1 / span 3;
  margin: 0;
}

.home .site-main > article:nth-of-type(5n).has-post-thumbnail .post-image img,
.archive .site-main > article:nth-of-type(5n).has-post-thumbnail .post-image img,
.search .site-main > article:nth-of-type(5n).has-post-thumbnail .post-image img {
  width: 100%;
  height: 180px;
}

.home .site-main > article:nth-of-type(5n).has-post-thumbnail .entry-header,
.archive .site-main > article:nth-of-type(5n).has-post-thumbnail .entry-header,
.search .site-main > article:nth-of-type(5n).has-post-thumbnail .entry-header {
  grid-column: 2;
  grid-row: 1;
}

.home .site-main > article:nth-of-type(5n).has-post-thumbnail .entry-summary,
.archive .site-main > article:nth-of-type(5n).has-post-thumbnail .entry-summary,
.search .site-main > article:nth-of-type(5n).has-post-thumbnail .entry-summary {
  grid-column: 2;
  grid-row: 2;
}

.home .site-main > article:nth-of-type(5n).has-post-thumbnail footer.entry-meta,
.archive .site-main > article:nth-of-type(5n).has-post-thumbnail footer.entry-meta,
.search .site-main > article:nth-of-type(5n).has-post-thumbnail footer.entry-meta {
  grid-column: 2;
  grid-row: 3;
}

/* The feature article's title is a touch larger to feel hero-ish */
.home .site-main > article:nth-of-type(5n) .entry-title,
.archive .site-main > article:nth-of-type(5n) .entry-title,
.search .site-main > article:nth-of-type(5n) .entry-title {
  font-size: 1.5rem;
}

/* GP's footer (categories + comment link) — placed at the bottom of the card.
   Default (half-width card): row 4 of the single-column grid.
   Feature card override (5n+1): explicitly placed in row 3 / column 2 below. */
.home footer.entry-meta,
.archive footer.entry-meta,
.search footer.entry-meta {
  grid-column: 1;
  grid-row: 4;
  font-size: 0.75rem;
  color: var(--color-muted);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 0;
  align-items: center;
}

/* Hide the folder/comment icons GP injects via CSS pseudo-elements */
.home footer.entry-meta .cat-links::before,
.archive footer.entry-meta .cat-links::before,
.search footer.entry-meta .cat-links::before,
.home footer.entry-meta .comments-link::before,
.archive footer.entry-meta .comments-link::before,
.search footer.entry-meta .comments-link::before {
  display: none;
}

/* Hide "Leave a comment" link on listing cards (kept on single posts) */
.home footer.entry-meta .comments-link,
.archive footer.entry-meta .comments-link,
.search footer.entry-meta .comments-link {
  display: none;
}

/* Category links as colored pill badges */
.home footer.entry-meta .cat-links a,
.archive footer.entry-meta .cat-links a,
.search footer.entry-meta .cat-links a {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  background: var(--color-tag-bg);
  color: var(--color-tag-fg);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: 0;
}

.home footer.entry-meta .cat-links a:hover,
.archive footer.entry-meta .cat-links a:hover,
.search footer.entry-meta .cat-links a:hover {
  background: var(--color-accent);
  color: #fff;
}

.home footer.entry-meta .comments-link a,
.archive footer.entry-meta .comments-link a,
.search footer.entry-meta .comments-link a {
  color: var(--color-muted);
  text-decoration: none;
  font-size: 0.75rem;
}

.home footer.entry-meta .comments-link a:hover,
.archive footer.entry-meta .comments-link a:hover,
.search footer.entry-meta .comments-link a:hover {
  color: var(--color-accent);
}

/* No featured image? Article content spans the full width */
.home .site-main > article:not(.has-post-thumbnail) > .inside-article,
.archive .site-main > article:not(.has-post-thumbnail) > .inside-article,
.search .site-main > article:not(.has-post-thumbnail) > .inside-article {
  grid-template-columns: 1fr;
}

.home .site-main > article:not(.has-post-thumbnail) .entry-header,
.archive .site-main > article:not(.has-post-thumbnail) .entry-header,
.search .site-main > article:not(.has-post-thumbnail) .entry-header,
.home .site-main > article:not(.has-post-thumbnail) .entry-summary,
.archive .site-main > article:not(.has-post-thumbnail) .entry-summary,
.search .site-main > article:not(.has-post-thumbnail) .entry-summary,
.home .site-main > article:not(.has-post-thumbnail) footer.entry-meta,
.archive .site-main > article:not(.has-post-thumbnail) footer.entry-meta,
.search .site-main > article:not(.has-post-thumbnail) footer.entry-meta {
  grid-column: 1;
}

.home .entry-title,
.archive .entry-title,
.search .entry-title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

.home .entry-title a,
.archive .entry-title a,
.search .entry-title a {
  color: var(--color-fg);
  text-decoration: none;
}

.home .entry-title a:hover,
.archive .entry-title a:hover,
.search .entry-title a:hover {
  color: var(--color-accent);
}

.home .entry-meta,
.archive .entry-meta,
.search .entry-meta {
  font-size: 0.8125rem;
  color: var(--color-muted);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.home .entry-meta a,
.archive .entry-meta a,
.search .entry-meta a {
  color: var(--color-muted);
}

.home .entry-meta a:hover,
.archive .entry-meta a:hover,
.search .entry-meta a:hover {
  color: var(--color-accent);
}

.home .entry-meta .byline,
.archive .entry-meta .byline,
.search .entry-meta .byline {
  display: none;
}

/* === Single post === */
.single .entry-header,
.page .entry-header {
  margin-bottom: 1.5rem;
}

.single .entry-title,
.page .entry-title {
  font-size: 2.125rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 0.75rem;
}

.single .entry-meta,
.page .entry-meta {
  font-size: 0.875rem;
  color: var(--color-muted);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.single .entry-meta a,
.page .entry-meta a {
  color: var(--color-muted);
}


/* === Body content === */
.entry-content {
  font-size: 1.0625rem;
  line-height: 1.75;
}

.entry-content > * + * {
  margin-top: 1.25rem;
}

.entry-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.entry-content h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.entry-content a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.entry-content a:hover {
  color: var(--color-accent-hover);
  text-decoration-thickness: 2px;
}

.entry-content blockquote {
  border-left: 3px solid var(--color-border);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: var(--color-muted);
  font-style: italic;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.25rem;
}

.entry-content li {
  margin-bottom: 0.5rem;
  line-height: 1.55;
}

.entry-content li::marker {
  color: var(--color-muted);
}

/* Hand-placed In-Article ad (functions.php). The min-height reserves room so the
   fluid unit does not push the text down when it fills; an unfilled slot collapses.
   Room is only reserved once AdSense has picked the slot up, so visitors with an ad
   blocker, where adsbygoogle.js never runs, get no blank gap. */
.entry-content .jpl-ad:has(ins[data-adsbygoogle-status]) {
  margin: 2rem 0;
  min-height: 250px;
}

.entry-content .jpl-ad:has(ins[data-ad-status="unfilled"]),
.entry-content .jpl-ad.jpl-ad--stalled:not(:has(ins[data-ad-status])) {
  display: none;
}

/* === Code === */
.entry-content code,
.entry-content kbd {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.125rem 0.375rem;
  background: var(--color-code-bg);
  border-radius: 4px;
  word-break: break-word;
}

.entry-content pre {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.55;
  padding: 1rem 1.25rem;
  background: var(--color-code-bg);
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5rem 0;
}

.entry-content pre code {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: inherit;
}

/* Tame Enlighter syntax highlighter to match palette */
.entry-content .enlighter-default,
.entry-content .EnlighterJSWrapper {
  border-radius: 8px !important;
  margin: 1.5rem 0 !important;
}

/* === Pagination === */
.paging-navigation,
.posts-navigation,
nav.pagination {
  margin-top: 3rem;
  padding: 0;
  background: transparent;
  border: 0;
}

.paging-navigation .nav-links,
.posts-navigation .nav-links,
nav.pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-fg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-decoration: none;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

a.page-numbers:hover {
  background: var(--color-bg);
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.page-numbers.current {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.page-numbers.dots {
  border: 0;
  background: transparent;
  color: var(--color-muted);
}

.page-numbers.next,
.page-numbers.prev {
  padding: 0 1rem;
  gap: 0.375rem;
}

/* Hide GP's SVG icons in entry meta/footer only (folder, chat bubble) — keep
   functional icons elsewhere (hamburger, dropdown arrow). */
.entry-meta .gp-icon,
footer.entry-meta .gp-icon {
  display: none !important;
}

/* === Make the whole listing card clickable via the title's anchor === */
.home .site-main > article > .inside-article,
.archive .site-main > article > .inside-article,
.search .site-main > article > .inside-article {
  position: relative;
}

.home .entry-title a::after,
.archive .entry-title a::after,
.search .entry-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Real links inside the card stay above the overlay so they remain clickable */
.home footer.entry-meta a,
.archive footer.entry-meta a,
.search footer.entry-meta a,
.home .post-image a,
.archive .post-image a,
.search .post-image a {
  position: relative;
  z-index: 2;
}

/* === Comments — keep simple === */
.comments-area {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-author {
  font-weight: 600;
}

/* === Comment form (logged-out + logged-in) === */
.comment-respond .comments-title,
.comment-reply-title {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 0.5rem;
}

.comment-form .comment-notes,
.logged-in-as,
.comment-form .comment-form-cookies-consent label {
  font-size: 0.875rem;
  color: var(--color-muted);
}

.comment-form p {
  margin: 0 0 1rem;
}

.comment-form label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-fg);
  margin: 0 0 0.375rem;
}

/* Inputs + textarea — match the card aesthetic (rounded, accent focus ring) */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.625rem 0.875rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-fg);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.15);
}

.comment-form textarea {
  min-height: 9rem;
  line-height: 1.55;
  resize: vertical;
}

/* Side-by-side author / email / url on wide screens */
.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url {
  display: inline-block;
  width: calc((100% - 2rem) / 3);
  vertical-align: top;
}

.comment-form .comment-form-author,
.comment-form .comment-form-email {
  margin-right: 1rem;
}

/* Cookies consent — align checkbox neatly with the label, single line if it fits */
.comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.comment-form .comment-form-cookies-consent input[type="checkbox"] {
  margin: 0.25rem 0 0;
  flex-shrink: 0;
}

.comment-form .comment-form-cookies-consent label {
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}

/* Submit button — accent-colored, matches links */
.comment-form .form-submit {
  margin-top: 0.5rem;
}

.comment-form input[type="submit"],
#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.comment-form input[type="submit"]:hover,
#submit:hover {
  background: var(--color-accent-hover);
}

.comment-form input[type="submit"]:focus,
#submit:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.3);
}

/* Mobile — stack the three meta inputs */
@media (max-width: 640px) {
  .comment-form .comment-form-author,
  .comment-form .comment-form-email,
  .comment-form .comment-form-url {
    display: block;
    width: 100%;
    margin-right: 0;
  }
}

/* === Footer === */
.site-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: 2rem 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.site-footer a {
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer a:hover {
  color: var(--color-accent);
}

/* === Mobile === */
@media (max-width: 768px) {
  /* Reduce the inside-article + comments-area padding on small screens
     so the card doesn't eat half the viewport in white space. */
  .single .site-main > article > .inside-article,
  .page .site-main > article > .inside-article,
  .single .comments-area,
  .page .comments-area {
    padding: 1.5rem 1.25rem;
  }

  /* The featured image's negative margins were calibrated for the desktop
     padding (3rem / 2.5rem); recalibrate to match the mobile padding above. */
  .single .post-image,
  .page .post-image {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    margin-top: -1.5rem;
  }

  .single .featured-image-caption,
  .page .featured-image-caption {
    margin: -1rem 0 1.5rem;
  }

  .inside-header {
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
  }

  /* Show mobile hamburger toggle, hide desktop nav until toggled */
  #mobile-menu-control-wrapper {
    display: block;
    margin-left: auto;
  }

  .main-navigation .menu-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Hide the close icon when menu is closed (and vice versa) */
  .main-navigation .menu-toggle[aria-expanded="false"] .icon-menu-bars svg:nth-of-type(2),
  .main-navigation .menu-toggle[aria-expanded="true"] .icon-menu-bars svg:nth-of-type(1) {
    display: none;
  }

  /* Hide #site-navigation by default; show as a stacked dropdown when toggled */
  #site-navigation {
    flex-basis: 100%;
    display: none;
  }

  #site-navigation.toggled {
    display: block;
  }

  #site-navigation.toggled .main-nav ul.menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0;
    border-top: 1px solid var(--color-border);
    margin-top: 0.5rem;
  }

  #site-navigation.toggled .main-nav ul li a {
    padding: 0.75rem 0;
  }

  /* Language toggle on mobile — same pill design as desktop, just sits in the menu
     column. The desktop rules already use display: flex inline, so we mostly need
     to ensure visibility (beat GP's mobile `display: none` on submenus). */
  body .main-navigation .pll-parent-menu-item {
    margin-left: 0;
    margin-top: 0.5rem;
  }

  body .main-navigation .pll-parent-menu-item > ul.sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
  }

  .single .entry-title,
  .page .entry-title {
    font-size: 1.625rem;
  }

  .entry-content h2 {
    font-size: 1.3125rem;
  }

  /* Single-column listing on small screens — collapse 2-col grid + feature row */
  .home .site-main,
  .archive .site-main,
  .search .site-main {
    grid-template-columns: 1fr;
  }

  .home .site-main > article:nth-of-type(5n),
  .archive .site-main > article:nth-of-type(5n),
  .search .site-main > article:nth-of-type(5n) {
    grid-column: 1;
  }

  .home .site-main > article:nth-of-type(5n).has-post-thumbnail > .inside-article,
  .archive .site-main > article:nth-of-type(5n).has-post-thumbnail > .inside-article,
  .search .site-main > article:nth-of-type(5n).has-post-thumbnail > .inside-article {
    grid-template-columns: 1fr;
  }

  .home .site-main > article:nth-of-type(5n).has-post-thumbnail .post-image,
  .archive .site-main > article:nth-of-type(5n).has-post-thumbnail .post-image,
  .search .site-main > article:nth-of-type(5n).has-post-thumbnail .post-image {
    grid-column: 1;
    grid-row: 1;
  }

  .home .site-main > article:nth-of-type(5n).has-post-thumbnail .entry-header,
  .archive .site-main > article:nth-of-type(5n).has-post-thumbnail .entry-header,
  .search .site-main > article:nth-of-type(5n).has-post-thumbnail .entry-header {
    grid-column: 1;
    grid-row: 2;
  }

  .home .site-main > article:nth-of-type(5n).has-post-thumbnail .entry-summary,
  .archive .site-main > article:nth-of-type(5n).has-post-thumbnail .entry-summary,
  .search .site-main > article:nth-of-type(5n).has-post-thumbnail .entry-summary {
    grid-column: 1;
    grid-row: 3;
  }

  .home .site-main > article:nth-of-type(5n).has-post-thumbnail footer.entry-meta,
  .archive .site-main > article:nth-of-type(5n).has-post-thumbnail footer.entry-meta,
  .search .site-main > article:nth-of-type(5n).has-post-thumbnail footer.entry-meta {
    grid-column: 1;
    grid-row: 4;
  }
}

/* Consent re-entry button in the footer credit bar: a button for accessibility,
   styled to sit inline with the surrounding footer links. */
.jpl-consent-reopen {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.jpl-consent-reopen:hover,
.jpl-consent-reopen:focus-visible {
  color: var(--color-fg);
}