/*
Theme Name: Mike Trello's Tech
Theme URI: https://miketrellosblog.arcadecab.com/
Author: ArcadeCab / Mike Trello
Description: Lightweight block theme for Mike Trello's Technology Musings archive and new articles.
Version: 2.2.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: miketrellos-tech
*/


/* Migration-era content helpers */
.historical-note { margin: 1.5rem 0 2rem; padding: 14px 16px; background:#f2f7fb; border-left:4px solid #0878c9; border-radius:4px; }
.hardware-mentioned { margin-top:2.5rem; padding:20px 22px; background:#f6f7f8; border-radius:6px; }
.topics-panel { border-radius:6px; }
.wp-block-post-content img { height:auto; max-width:100%; }
@media (max-width: 781px) { .topics-panel { margin-top:18px; } }


/* v0.4 readability and true mobile gutters */
html, body { overflow-x: hidden; }
.wp-site-blocks { overflow-x: clip; }

/* Comfortable article reading size. */
.wp-block-post-content {
  font-size: 19px;
  line-height: 1.72;
}
.wp-block-post-content p,
.wp-block-post-content li { font-size: inherit; line-height: inherit; }

/* Old article images must never widen the viewport. */
.wp-block-post-content img,
.wp-block-post-content figure,
.wp-block-image,
.wp-block-image img {
  max-width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
}

@media (max-width: 781px) {
  /* These are intentionally applied to the actual template regions, not
     just the constrained inner blocks. This creates real whitespace at
     the viewport edges on phones. */
  .wp-site-blocks main,
  .wp-site-blocks header > .wp-block-group,
  .wp-site-blocks footer > .wp-block-group {
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }

  /* Imported Classic content can contain width attributes and old markup. */
  .wp-block-post-content,
  .wp-block-post-content > *,
  .wp-block-post-content .wp-caption,
  .wp-block-post-content table {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .wp-block-post-content {
    font-size: 22px;
    line-height: 1.62;
    overflow-wrap: break-word;
    word-break: normal;
  }
  .wp-block-post-title {
    font-size: clamp(2rem, 8vw, 2.35rem) !important;
    line-height: 1.12 !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }
  .wp-block-post-content table {
    display: block;
    overflow-x: auto;
  }
  .topics-panel { margin-top:18px; }
}


/* v0.5 comments */
.wp-block-comments {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid #dfe5e9;
}
.wp-block-comments .wp-block-comments-title {
  margin-bottom: 1.5rem;
}
.wp-block-comment-template {
  margin: 0;
  padding: 0;
}
.wp-block-comment-template > li {
  list-style: none;
  margin: 0 0 1.4rem 0;
  padding: 1rem 0 1.25rem;
  border-bottom: 1px solid #e7ecef;
}
.wp-block-comment-template .wp-block-comment-template {
  margin: 1rem 0 0 1.5rem;
  padding-left: 1rem;
  border-left: 3px solid #edf2f5;
}
.wp-block-comment-author-name {
  font-weight: 650;
}
.wp-block-comment-date,
.wp-block-comment-reply-link,
.wp-block-comment-edit-link {
  font-size: 0.84rem;
  color: #637381;
}
.wp-block-comment-content {
  margin-top: 0.55rem;
  line-height: 1.6;
}
.wp-block-post-comments-form {
  margin-top: 2rem;
  padding: 1.25rem 1.35rem;
  background: #f6f7f8;
  border-radius: 6px;
}
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 781px) {
  .wp-block-comments { margin-top: 2.25rem; }
  .wp-block-comment-template .wp-block-comment-template {
    margin-left: 0.65rem;
    padding-left: 0.8rem;
  }
  .wp-block-comments .wp-block-columns {
    flex-wrap: nowrap !important;
    gap: 12px;
  }
}


/* v0.9 mobile article proportions */
@media (max-width: 781px) {
  .wp-site-blocks main { padding-top: 26px !important; }
  .wp-block-post-content { font-size: 22px; line-height: 1.58; }
  .wp-block-post-content blockquote {
    margin: 1.45em 0 !important;
    padding: 0 0 0 16px !important;
    border-left: 3px solid #dfe7ec;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .wp-block-post-content p { margin-top: 0; margin-bottom: 1.25em; }
}

/* v1.0: mobile spacing and archive/listing proportions */
@media (max-width: 781px) {
  body.single main.wp-block-group,
  body.page main.wp-block-group,
  body.archive main.wp-block-group,
  body.search main.wp-block-group,
  body.blog main.wp-block-group,
  body.home main.wp-block-group {
    padding-top: 22px !important;
  }

  body.single main > .wp-block-post-title,
  body.page main > .wp-block-post-title {
    font-size: clamp(2.05rem, 8.4vw, 2.45rem) !important;
    line-height: 1.10 !important;
  }

  body.archive .wp-block-post-template .wp-block-post-title,
  body.search .wp-block-post-template .wp-block-post-title,
  body.blog .wp-block-post-template .wp-block-post-title,
  body.home .wp-block-post-template .wp-block-post-title {
    font-size: 30px !important;
    line-height: 1.15 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

  body.archive .wp-block-post-excerpt,
  body.search .wp-block-post-excerpt,
  body.blog .wp-block-post-excerpt,
  body.home .wp-block-post-excerpt {
    font-size: 19px !important;
    line-height: 1.55 !important;
  }

  body.archive .wp-block-query-title,
  body.search .wp-block-query-title {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }

  body.archive .wp-block-post-template > li,
  body.search .wp-block-post-template > li {
    margin-bottom: 28px !important;
  }
}


/* v1.1: bring forward the useful parts of the old Azul/mobile experience */
.article-card .wp-block-post-title {
  margin-bottom: 8px;
}
.article-meta {
  gap: 7px 14px !important;
  margin-bottom: 10px;
}
.article-meta .wp-block-post-comments-link a::before {
  content: "💬 ";
}
.article-card .wp-block-post-excerpt {
  margin-top: 0;
}
.blog-sidebar .wp-block-latest-posts,
.blog-sidebar .wp-block-archives {
  padding-left: 0;
  list-style: none;
}
.blog-sidebar .wp-block-latest-posts li,
.blog-sidebar .wp-block-archives li {
  margin-bottom: 9px;
}
.tech-main-nav .wp-block-search {
  min-width: 210px;
}

@media (max-width: 781px) {
  /* Compact, scannable article cards like the old mobile site, but modern. */
  .article-card {
    padding-top: 14px !important;
    padding-bottom: 22px !important;
  }
  .article-card .wp-block-post-title {
    font-size: 30px !important;
    line-height: 1.14 !important;
    margin-bottom: 8px !important;
  }
  .article-card .article-meta {
    font-size: 15px !important;
    line-height: 1.4 !important;
    gap: 5px 10px !important;
  }
  .article-card .wp-block-post-excerpt {
    font-size: 19px !important;
    line-height: 1.52 !important;
  }
  .article-card .wp-block-post-excerpt__more-link {
    display: inline-block;
    margin-top: 6px;
    font-weight: 650;
  }

  /* Sidebar content becomes a useful mobile discovery panel after articles. */
  .blog-sidebar {
    margin-top: 28px !important;
  }
  .topics-panel {
    margin-top: 0 !important;
  }

  /* Make the responsive nav overlay function as the old mobile utility menu did. */
  .tech-main-nav .wp-block-navigation__responsive-container.is-menu-open {
    padding: 28px 22px !important;
  }
  .tech-main-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content {
    align-items: stretch !important;
    gap: 14px !important;
  }
  .tech-main-nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
    font-size: 22px;
    font-weight: 650;
    padding: 7px 0;
  }
  .tech-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-search {
    width: 100%;
    min-width: 0;
    margin-top: 8px;
  }
  .tech-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-search__inside-wrapper {
    width: 100% !important;
  }
}


/* v1.2: automatic archive notice for older articles */
.archive-article-notice {
  margin: 0 0 28px 0;
  padding: 14px 16px;
  background: #f2f7fb;
  border-left: 4px solid #0878c9;
  border-radius: 4px;
  color: #44515c;
  font-size: 0.94em;
  line-height: 1.5;
}
.archive-article-notice strong { color: #24313b; }
@media (max-width: 781px) {
  .archive-article-notice {
    margin-bottom: 24px;
    padding: 13px 15px;
    font-size: 18px;
    line-height: 1.5;
  }
}


/* v1.3: make the archive notice clearly visible */
body.single .wp-block-post-content .archive-article-notice,
body.single .archive-article-notice {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 0 30px 0 !important;
  padding: 16px 18px !important;
  background: #eef6fc !important;
  border: 1px solid #cfe3f3 !important;
  border-left: 5px solid #0878c9 !important;
  border-radius: 5px !important;
  color: #3d4b56 !important;
  font-size: 0.95em !important;
  line-height: 1.55 !important;
}

body.single .wp-block-post-content .archive-article-notice strong,
body.single .archive-article-notice strong {
  color: #24313b !important;
  font-weight: 700 !important;
}

@media (max-width: 781px) {
  body.single .wp-block-post-content .archive-article-notice,
  body.single .archive-article-notice {
    margin-bottom: 26px !important;
    padding: 15px 16px !important;
    font-size: 18px !important;
    line-height: 1.5 !important;
  }
}


/* v1.4: archive note — informational, not a warning */
.archive-article-notice {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  background: #eef6fc !important;
  border: 1px solid #cfe3f3 !important;
  border-left: 5px solid #0878c9 !important;
  border-radius: 5px !important;
  padding: 16px 18px !important;
  margin: 24px 0 30px 0 !important;
  color: inherit !important;
}

.archive-article-notice strong {
  color: inherit !important;
  font-weight: 700 !important;
}

@media (max-width: 781px) {
  .archive-article-notice {
    padding: 15px 16px !important;
    margin: 20px 0 26px 0 !important;
  }
}


/* v1.7 typography reset now that style.css is actually loading */
@media (max-width: 781px) {
  /* Single article reading text: back down from the earlier experimental 22px. */
  body.single .wp-block-post-content,
  body.single .wp-block-post-content p,
  body.single .wp-block-post-content li {
    font-size: 19px !important;
    line-height: 1.58 !important;
  }

  /* Archive notice should read like an editorial note, not another body paragraph. */
  body.single .archive-article-notice {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }

  /* Keep single-post headline strong but less oversized on phones. */
  body.single .wp-block-post-title {
    font-size: clamp(2rem, 8vw, 2.35rem) !important;
    line-height: 1.10 !important;
  }

  /* Topic/category/search listing cards need to be compact and scannable. */
  .article-card .wp-block-post-title,
  body.archive .wp-block-post-template .wp-block-post-title,
  body.search .wp-block-post-template .wp-block-post-title {
    font-size: 27px !important;
    line-height: 1.15 !important;
  }

  .article-card .wp-block-post-excerpt,
  body.archive .wp-block-post-excerpt,
  body.search .wp-block-post-excerpt {
    font-size: 17px !important;
    line-height: 1.52 !important;
  }

  .article-card .article-meta,
  body.archive .article-meta,
  body.search .article-meta {
    font-size: 14px !important;
  }
}

/* Slightly calmer desktop reading size while keeping the current layout. */
@media (min-width: 782px) {
  body.single .wp-block-post-content,
  body.single .wp-block-post-content p,
  body.single .wp-block-post-content li {
    font-size: 17px !important;
    line-height: 1.62 !important;
  }

  body.single .archive-article-notice {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }
}


/* v1.8: desktop-only article sidebar (Categories + Archives) */
.single-sidebar {
  font-size: 15px;
  line-height: 1.5;
}

.single-sidebar-panel {
  border: 1px solid #e4e9ed;
  border-radius: 5px;
}

.single-sidebar .wp-block-categories-list,
.single-sidebar .wp-block-archives-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.single-sidebar .wp-block-categories-list li,
.single-sidebar .wp-block-archives-list li {
  margin-bottom: 7px;
}

.single-sidebar h3 {
  margin-top: 0;
  margin-bottom: 12px;
}

/* Keep the article's readable line length inside the wider desktop layout. */
@media (min-width: 782px) {
  .single-article-column .wp-block-post-content > *,
  .single-article-column > .wp-block-post-title,
  .single-article-column > .wp-block-group,
  .single-article-column > .wp-block-separator,
  .single-article-column > .wp-block-comments {
    max-width: 760px;
  }
}

/* The sidebar is desktop-only; mobile remains exactly the v1.7 article layout. */
@media (max-width: 781px) {
  .single-with-sidebar {
    display: block !important;
  }

  .single-sidebar {
    display: none !important;
  }

  .single-article-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}


/* v1.9: use the v1.8 desktop sidebar on category/tag/date archive pages. */
@media (min-width: 782px) {
  .archive-list-column {
    min-width: 0;
  }
}

@media (max-width: 781px) {
  .archive-with-sidebar {
    display: block !important;
  }

  .archive-sidebar {
    display: none !important;
  }

  .archive-list-column {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}


/* v2.0: Recent Articles below single posts, before comments */
.single-recent-articles h3 {
  margin-top: 0;
  margin-bottom: 16px;
}

.recent-articles-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 28px;
}

.recent-article-item {
  min-width: 0;
}

.recent-article-title {
  display: block;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.35;
}

.recent-article-date {
  margin-top: 4px;
  color: #637381;
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 781px) {
  .single-recent-articles {
    margin-top: 30px !important;
    margin-bottom: 26px !important;
    padding-top: 22px !important;
  }

  .recent-articles-list {
    display: block;
  }

  .recent-article-item {
    margin-bottom: 20px;
  }

  .recent-article-item:last-child {
    margin-bottom: 0;
  }

  .recent-article-title {
    font-size: 18px;
    line-height: 1.4;
  }

  .recent-article-date {
    font-size: 14px;
  }
}


/* v2.1: static pages show content + Recent Articles only */
.page-recent-articles h3 {
  margin-top: 0;
  margin-bottom: 16px;
}

@media (max-width: 781px) {
  .page-recent-articles {
    margin-top: 34px !important;
    padding-top: 22px !important;
  }
}


/* v2.2: normalize new Gutenberg posts to the same reading width as imported posts. */
@media (max-width: 781px) {
  body.single .wp-block-post-content,
  body.single .wp-block-post-content.is-layout-constrained,
  body.single .wp-block-post-content > *,
  body.single .wp-block-post-content .is-layout-constrained,
  body.single .wp-block-post-content .wp-block-group,
  body.single .wp-block-post-content .wp-block-group > * {
    max-width: 100% !important;
  }

  body.single .wp-block-post-content > *,
  body.single .wp-block-post-content .is-layout-constrained,
  body.single .wp-block-post-content .wp-block-group {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Preserve intentional list indentation, but remove Gutenberg/group side padding. */
  body.single .wp-block-post-content .wp-block-group,
  body.single .wp-block-post-content .wp-block-columns,
  body.single .wp-block-post-content .wp-block-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Extendify can append a generated blog/recommendation pattern to newly written posts.
   The theme already supplies Topics + Recent Articles, so suppress that duplicate block. */
body.single #extendify-blog {
  display: none !important;
}