/*
Theme Name: PPSU Blog
Theme URI: http://localhost/ppsu/blog
Author: PPSU
Description: Blog theme for P P Savani University that matches the main site's header, footer and styling by reusing the site's stylesheet.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ppsu-blog
*/

/* ============================================================
   Blog-specific tweaks layered on top of the main site's
   styles.css. Keep this minimal — the shared look comes from
   the parent site stylesheet enqueued in functions.php.
   ============================================================ */

/* Post listing grid reuses the site's .blog-events / .be-card system */
.blog-list { padding: 3.5rem 0; background: var(--color-surface-container-low); }
.blog-list__grid {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: 1fr; gap: 1.5rem;
}
@media (min-width: 640px)  { .blog-list__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-list__grid { grid-template-columns: repeat(3, 1fr); } }

/* Single post / page article body */
.post-single { padding: 3.5rem 0; background: var(--color-white); }
.post-single__wrap { max-width: 820px; margin: 0 auto; }
.post-single__meta {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  margin-bottom: 1.5rem; color: var(--color-on-surface-variant); font-weight: 600;
}
.post-single__meta .material-symbols-outlined { font-size: 1.1rem; vertical-align: -3px; color: var(--color-secondary); }
.post-single__feature { margin: 0 0 2rem; border-radius: var(--radius-xl); overflow: hidden; }
.post-single__feature img { width: 100%; height: auto; display: block; }
.post-content { color: var(--color-on-surface); line-height: 1.75; font-size: 1.05rem; }
.post-content > * + * { margin-top: 1.15rem; }
.post-content h2 { font-family: var(--font-headline); font-weight: 800; color: var(--color-primary); margin-top: 2.25rem; }
.post-content h3 { font-family: var(--font-headline); font-weight: 700; color: var(--color-primary); margin-top: 1.75rem; }
.post-content a { color: var(--color-secondary); text-decoration: underline; }
.post-content img { max-width: 100%; height: auto; border-radius: var(--radius-lg); }
.post-content blockquote {
  border-left: 4px solid var(--color-secondary); padding: 0.5rem 1.25rem;
  color: var(--color-on-surface-variant); font-style: italic; background: var(--color-surface-container-low);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.post-content ul, .post-content ol { padding-left: 1.5rem; }
.post-content li + li { margin-top: 0.4rem; }

/* Breadcrumb: current page stays orange even when it's a link */
.breadcrumb [aria-current="page"] a { color: var(--color-secondary); }

/* Orange bullet dots for unordered lists inside post/page content */
.post-content ul { list-style: none; padding-left: 1.5rem; }
.post-content ul li { position: relative; padding-left: 1.25rem; }
.post-content ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-secondary);
}

/* Title inside the content column (hero banner removed) */
.post-single__title { color: var(--color-primary); line-height: 1.15; margin: 0 0 1.75rem; }
.post-single__feature { margin-top: 1.75rem; }

/* Listing heading (banner removed) */
.blog-list__head { margin-bottom: 1.75rem; }
.blog-list__title { color: var(--color-primary); line-height: 1.15; margin: 0 0 0.4rem; }
.blog-list__desc { color: var(--color-on-surface-variant); max-width: 48rem; }

/* Pagination */
.blog-pagination { margin-top: 3rem; display: flex; justify-content: center; }
.blog-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 0.75rem; margin: 0 0.25rem;
  border-radius: var(--radius-md); border: 1px solid var(--color-outline-variant);
  background: var(--color-white); color: var(--color-primary); font-weight: 700;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.blog-pagination .page-numbers.current,
.blog-pagination .page-numbers:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }

/* Sidebar-free single: keep it centred. Empty state. */
.blog-empty { padding: 4rem 0; text-align: center; }
.blog-empty h2 { font-family: var(--font-headline); color: var(--color-primary); }

/* Back link on single */
.post-back { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 2.5rem; font-weight: 700; color: var(--color-secondary); }
.post-back .material-symbols-outlined { transition: transform 0.2s ease; }
.post-back:hover .material-symbols-outlined { transform: translateX(-3px); }

/* ============================================================
   Two-column layout: content + sidebar
   ============================================================ */
.blog-layout { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
@media (min-width: 992px) { .blog-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.blog-layout__main { min-width: 0; }
.post-single .post-single__wrap { max-width: none; margin: 0; }

/* News tag colour (Blog=navy, Event=red already in main stylesheet) */
.be-card__tag--news { font-size: 80%; background: rgba(232, 93, 4, 0.94); color: var(--color-white); }

/* Sidebar shell */
.sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 1.5rem; }
@media (max-width: 991px) { .sidebar { position: static; } }

/* Widgets */
.widget { background: var(--color-surface-container-lowest); border: 1px solid var(--color-outline-variant); border-radius: var(--radius-xl); padding: 1.4rem 1.4rem 1.5rem; box-shadow: 0 8px 22px rgba(0, 10, 30, 0.05); }
.widget__title { font-family: var(--font-headline); font-weight: 800; color: var(--color-primary); margin: 0 0 1rem; padding-bottom: 0.6rem; position: relative; }
.widget__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; border-radius: 3px; background: var(--color-secondary); }

/* Search widget */
.widget-search { display: flex; border: 1px solid var(--color-outline-variant); border-radius: 100vw; overflow: hidden; background: var(--color-white); }
.widget-search__input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0.7rem 1.1rem; font-family: var(--font-body); background: transparent; color: var(--color-on-surface); }
.widget-search__btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 46px; border: 0; cursor: pointer; background: var(--color-primary); color: var(--color-white); transition: background 0.2s ease; }
.widget-search__btn:hover { background: var(--color-secondary); }

/* Categories */
.widget-cats { list-style: none; margin: 0; padding: 0; }
.widget-cats li + li { margin-top: 0.25rem; }
.widget-cats a { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.75rem; border-radius: var(--radius-md); color: var(--color-on-surface); font-weight: 600; transition: background 0.2s ease, color 0.2s ease; }
.widget-cats a:hover { background: var(--color-surface-container-low); color: var(--color-secondary); }
.widget-cats__count { flex-shrink: 0; min-width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.5rem; font-size: 78%; font-weight: 700; border-radius: 100vw; background: rgba(0, 33, 71, 0.08); color: var(--color-primary); }

/* Recent posts */
.widget-posts { list-style: none; margin: 0; padding: 0; }
.widget-post { display: flex; gap: 0.85rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-outline-variant); }
.widget-post:last-child { border-bottom: 0; padding-bottom: 0; }
.widget-post:first-child { padding-top: 0; }
.widget-post__thumb { flex-shrink: 0; width: 68px; height: 60px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-container); }
.widget-post__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.widget-post__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.widget-post__title { font-family: var(--font-headline); font-weight: 700; color: var(--color-primary); line-height: 1.3; font-size: 0.95rem; transition: color 0.2s ease; }
.widget-post__title:hover { color: var(--color-secondary); }
.widget-post__date { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 78%; font-weight: 600; color: var(--color-on-surface-variant); }
.widget-post__date .material-symbols-outlined { font-size: 1rem; color: var(--color-secondary); }

/* Events */
.widget-events { list-style: none; margin: 0; padding: 0; }
.widget-event { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.75rem 0; border-bottom: 1px solid var(--color-outline-variant); }
.widget-event:last-child { border-bottom: 0; padding-bottom: 0; }
.widget-event:first-child { padding-top: 0; }
.widget-event__date { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 52px; padding: 0.4rem 0.35rem; border-radius: var(--radius-md); background: var(--color-primary); color: var(--color-white); line-height: 1.1; }
.widget-event__date strong { font-family: var(--font-headline); font-size: 1.25rem; font-weight: 800; }
.widget-event__date span { font-size: 68%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.85); }
.widget-event__body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.widget-event__title { font-family: var(--font-headline); font-weight: 700; color: var(--color-primary); line-height: 1.3; font-size: 0.95rem; transition: color 0.2s ease; }
.widget-event__title:hover { color: var(--color-secondary); }
.widget-event__venue { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 78%; font-weight: 600; color: var(--color-on-surface-variant); }
.widget-event__venue .material-symbols-outlined { font-size: 1rem; color: var(--color-secondary); }
.widget-event__all { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 1rem; font-weight: 700; color: var(--color-secondary); }
.widget-event__all .material-symbols-outlined { transition: transform 0.2s ease; }
.widget-event__all:hover .material-symbols-outlined { transform: translateX(3px); }

/* Tags */
.widget-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.widget-tag { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; border-radius: 100vw; background: var(--color-surface-container-low); border: 1px solid var(--color-outline-variant); font-size: 82%; font-weight: 600; color: var(--color-on-surface-variant); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.widget-tag:hover { background: var(--color-primary); color: var(--color-white); border-color: var(--color-primary); }