/* assets/style.css
   Custom overrides and incremental styles for KindOfArtsy theme (Phase 1)
*/

/* Example: smooth transition for color scheme changes */
html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Site background colors */
body { background-color: #E1EAED; }
html.dark body { background-color: #2B394C; color: #f3f4f6; }

/* Meta text color */
.entry-title a { color: #1f2937; transition: color 0.3s ease; }
html.dark .entry-title a { color: #f3f4f6; }

/* Link hover color for dark mode for better contrast */
html.dark a:hover, html.dark a:focus {
  color: #38bdf8; /* Tailwind sky-400 */
}
html.dark .entry-title a:hover {
  color: #38bdf8;
}

/* Meta text color */
.entry-meta { color: #6b7280; }
html.dark .entry-meta, html.dark .entry-meta a { color: #d1d5db; }

/* Subtle footer attribution */
.site-info { font-size: 0.75rem; font-weight: 200; color: #9ca3af; }
html.dark .site-info { color: #6b7280; }

/* Sticky header shadow for visual elevation */
.site-header {
  transition: background-color 0.3s ease;
}

/*--------------------------------------------------------------
# Featured Image on List Pages
--------------------------------------------------------------*/
.blog .post-thumbnail img,
.archive .post-thumbnail img,
.search .post-thumbnail img {
    width: 100%;
    height: auto;
    max-width: none;
}

/*--------------------------------------------------------------
# Responsive Multi-column Grid for List Pages
--------------------------------------------------------------*/
/* Lift the intrinsic 768px cap applied in main style.css so list pages can widen */
.blog #primary,
.archive #primary,
.search #primary {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Page header (e.g., search results, category title) should sit above grid full-width */
.archive .page-header,
.search, .search-results .page-header {
    grid-column: 1 / -1;
    width: 100%;
    margin-bottom: 1.5rem;
}

/* Small-screen padding for list grids */
@media screen and (max-width:640px){
  #primary{ float:none; width:100%; box-sizing:border-box; }

  .blog #primary,
  .archive #primary,
  .search #primary{ padding:0 0.25rem; }
  .blog #primary>article,
  .archive #primary>article,
  .search #primary>article{ padding:0 0.25rem; margin-bottom:1rem; }
}

/* Hide meta footer on single posts */
.single .entry-footer { display:none; }

/* Pagination nav should sit below full grid */
.blog .posts-navigation,
.archive .posts-navigation,
.search .posts-navigation {
    grid-column: 1 / -1;
    margin-top: 2rem;
    width: 100%;
}

/* Flex layout inside nav */
.blog .posts-navigation .nav-links,
.archive .posts-navigation .nav-links,
.search .posts-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

/* prevent label wrapping */
.posts-navigation .nav-links a { white-space: nowrap; }

/* right-align newer posts */
.posts-navigation .nav-next { text-align: right; }

.blog #primary,
.archive #primary,
.search #primary {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    column-gap: 0.5rem;
    row-gap: 1rem;
}

.blog #primary > article,
.archive #primary > article,
.search #primary > article {
    width: 100%;
    padding: 0 0.25rem; /* inner breathing space */
    margin-bottom: 1rem;
}


/*--------------------------------------------------------------
# Search results card tweaks */
.search #primary > article {
    display: flex;
    flex-direction: column;
}
.search #primary > article .post-thumbnail { order: 1; }
.search #primary > article .entry-header { order: 2; }
.search #primary > article .entry-summary,
.search #primary > article .entry-footer { display: none; }

/*--------------------------------------------------------------
# Normalize search list entry titles
--------------------------------------------------------------*/
.search .entry-title { font-size: 1rem; font-weight: 600; line-height: 1.2; }

/*--------------------------------------------------------------
# Post Header on List Pages
--------------------------------------------------------------*/
.blog .entry-header,
.archive .entry-header,
.search .entry-header,
.koa-card .entry-header {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:0.5rem;
  padding-top:0.5rem;
}

.blog .entry-header .entry-title,
.archive .entry-header .entry-title,
.search .entry-header .entry-title,
.koa-card .entry-title {
    flex-grow: 1;
    margin-right: 0;
    overflow-wrap: anywhere; /* ensure long words wrap */
}

.blog .entry-header .entry-meta,
.archive .entry-header .entry-meta,
.search .entry-header .entry-meta,
.koa-card .entry-header .entry-meta {
    flex-shrink: 0;
    text-align: right;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}