/* ==========================================================================
   Burgess 2025 — custom theme styles
   Child of Twenty Twenty-Five. Palette/typography/spacing live in theme.json;
   this file holds the layout + component CSS that theme.json can't express.

   Note on the cascade: every override here is written to win by SPECIFICITY
   (not source order), so it does not matter that core block styles may load
   after this file. The stylesheet is enqueued with "global-styles" as a
   dependency (see functions.php) so it also follows theme.json's generated CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell — sticky footer
   .wp-site-blocks wraps header + main + footer. Make it a full-height flex
   column so the footer sits at the bottom of the viewport on short pages.
   -------------------------------------------------------------------------- */
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks > main { flex: 1 0 auto; }
.wp-site-blocks > footer { margin-block-start: 0; } /* kill core block-gap above footer */

/* main on page/single templates is itself a flex column so the columns row
   can grow to fill it (lets the grey sidebar reach the footer). */
main.jpb-main { display: flex; flex-direction: column; }
main.jpb-main > .wp-block-columns { flex: 1 0 auto; }

/* --------------------------------------------------------------------------
   2. Header photo band
   -------------------------------------------------------------------------- */
.burgess-header-band img {
	display: block;
	width: 100%;
	height: clamp(90px, 13vw, 170px);
	object-fit: cover;
}

/* Header site title links */
header a:hover { text-decoration: none; }
header .wp-block-site-title a { text-decoration: none; }
header .wp-block-site-title a:hover { color: var(--wp--preset--color--pale-blue); }

/* --------------------------------------------------------------------------
   3. Two-column page layout (nav sidebar + content)
   -------------------------------------------------------------------------- */
.jpb-sidebar-col {
	background: var(--wp--preset--color--base-2);
	border-right: 1px solid #e2e6ea;
}
.jpb-sidebar { position: sticky; top: 0; padding: 1.5rem 1.5rem; }

.jpb-content-col {
	max-width: 58rem;
	padding: 1.8rem clamp(1.25rem, 4vw, 3.5rem) 3rem;
}
.jpb-content-col .wp-block-post-title { margin-bottom: 1.2em; font-size: var(--wp--preset--font-size--x-large); }

/* Neutralise root padding + constrained centering that WP adds to the
   constrained item groups, so list content aligns flush-left with the title
   and the hairlines don't overhang into the gutters. */
.jpb-content-col .has-global-padding { padding-left: 0; padding-right: 0; }
.jpb-content-col .jpb-item > *,
.jpb-content-col .jpb-note > * { max-width: none; margin-left: 0; margin-right: 0; }

/* --------------------------------------------------------------------------
   4. Section list pages (Publications, Talks, etc.) — jump-nav + items
   -------------------------------------------------------------------------- */
.jpb-jumpnav {
	font-size: .95rem;
	border-bottom: 2px solid var(--wp--preset--color--navy);
	padding-bottom: .6em;
	margin-bottom: 1.6em;
}
.jpb-jumpnav a { margin-right: .5em; white-space: nowrap; }
h2 .jpb-count { font-weight: 400; color: var(--wp--preset--color--steel-soft); font-size: .6em; }

.jpb-item {
	overflow: hidden;
	border-bottom: 1px solid #ececec;
	padding-bottom: 1.1em;
	margin-bottom: 1.3em;
}
.jpb-item img.alignleft { float: left; margin: .15em 1.1em .3em 0; max-width: 92px; height: auto; }
.jpb-item p { margin: .25em 0; }

/* Search results — summary list (title + date + excerpt, no images) */
.jpb-search-list .jpb-result {
	border-bottom: 1px solid #ececec;
	padding-bottom: 1.1em;
	margin-bottom: 1.3em;
}
.jpb-result .wp-block-post-title { font-size: 1.25rem; margin: 0 0 .15em; }
.jpb-result .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.jpb-result .wp-block-post-title a:hover { color: var(--wp--preset--color--oxblood); }
.jpb-result-date {
	color: var(--wp--preset--color--steel-soft);
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin: 0 0 .4em;
}
.jpb-result .wp-block-post-excerpt { margin: 0; }

/* --------------------------------------------------------------------------
   5. Sidebar section nav (.jpb-sectionnav) + always-open submenu
   -------------------------------------------------------------------------- */
/* Search box at the top of the nav column */
.jpb-search { margin: 0 0 1.2rem; }
.jpb-search .wp-block-search__inside-wrapper {
	border: 1px solid #cdd6dd;
	border-radius: 4px;
	background: #fff;
	overflow: hidden;
}
.jpb-search .wp-block-search__input {
	border: 0;
	background: transparent;
	font-size: .9rem;
	padding: .45em .6em;
}
.jpb-search .wp-block-search__input:focus { outline: 0; }
.jpb-search .wp-block-search__button {
	margin: 0;
	padding: 0 .65em;
	background: var(--wp--preset--color--pale-blue);
	color: var(--wp--preset--color--steel);
	border: 0;
}
.jpb-search .wp-block-search__button svg { fill: var(--wp--preset--color--steel); }
.jpb-search .wp-block-search__button:hover { background: var(--wp--preset--color--steel-soft); }
.jpb-search .wp-block-search__button:hover svg { fill: #fff; }

.jpb-sectionnav { width: 100%; }
.jpb-sectionnav .wp-block-navigation__container { display: block; width: 100%; }
.jpb-sectionnav .wp-block-navigation-item { display: block; border-top: 1px solid rgba(210,215,217,.7); }
.jpb-sectionnav .wp-block-navigation-item:first-child { border-top: 0; }
.jpb-sectionnav .wp-block-navigation-item__content {
	display: block;
	padding: .6em 0;
	color: var(--wp--preset--color--navy);
	font-weight: 600;
	text-decoration: none;
}
.jpb-sectionnav .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--oxblood); }
/* No focus box on mouse click; keep it for keyboard users (:focus-visible). */
.jpb-sectionnav .wp-block-navigation-item__content:focus:not(:focus-visible) { outline: none; }
.jpb-sectionnav .wp-block-navigation__submenu-icon { display: none; }
.jpb-sectionnav .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { cursor: default; }

/* Submenu uses WP's built-in "open-always" class (permanently expanded).
   Override open-always's 2em block-gap defaults; style sub-items like the
   top-level items but smaller and indented, with no dividers between them
   and a gap below the group. */
.wp-block-navigation.jpb-sectionnav .has-child.open-always { gap: 0; }
.wp-block-navigation.jpb-sectionnav .has-child.open-always .wp-block-navigation__submenu-container {
	gap: 0;
	padding: 0 0 .9em;
	background: transparent;
}
.wp-block-navigation.jpb-sectionnav .has-child.open-always .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: .28em 0 .28em 1.6em;
	font-size: .92em;
}
.jpb-sectionnav .wp-block-navigation__submenu-container .wp-block-navigation-item { border-top: 0; }

/* --------------------------------------------------------------------------
   6. Mobile off-canvas sidebar (hamburger toggle + backdrop)
   -------------------------------------------------------------------------- */
.jpb-sidebar-toggle,
.jpb-sidebar-close { display: none; }
.jpb-sidebar-toggle { background: none; border: 0; cursor: pointer; padding: .4em; width: 2.6em; height: 2.6em; }
.jpb-burger { position: relative; display: block; width: 22px; height: 2px; background: #fff; margin: auto; }
.jpb-burger::before,
.jpb-burger::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: #fff; }
.jpb-burger::before { top: -7px; }
.jpb-burger::after { top: 7px; }
.jpb-backdrop { display: none; }

@media (max-width: 781px) {
	/* media-text (About page) stacks on mobile: core insets the text side by 8%
	   and leaves no gap. Align the text to the image width + add space under it. */
	.jpb-content-col .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
		padding-left: 0;
		padding-right: 0;
	}
	.jpb-content-col .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media {
		margin-bottom: 1.1em;
	}

	.jpb-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.jpb-sidebar-col { background: none; border-right: 0; }
	.jpb-sidebar {
		position: fixed; top: 0; left: 0; height: 100%;
		width: min(82vw, 18em);
		transform: translateX(-100%);
		transition: transform .3s ease;
		z-index: 1000;
		background: var(--wp--preset--color--base);
		box-shadow: 0 0 30px rgba(0,0,0,.25);
		overflow-y: auto;
		padding: 1.2rem 1.4rem;
	}
	body.is-sidebar-open .jpb-sidebar { transform: none; }
	.jpb-sidebar-close {
		display: block; margin-left: auto;
		font-size: 1.9rem; line-height: 1;
		background: none; border: 0;
		color: var(--wp--preset--color--navy); cursor: pointer;
	}
	.jpb-backdrop {
		display: block; position: fixed; inset: 0;
		background: rgba(11,17,24,.5);
		opacity: 0; visibility: hidden;
		transition: opacity .3s, visibility .3s;
		z-index: 999;
	}
	body.is-sidebar-open .jpb-backdrop { opacity: 1; visibility: visible; }
}

/* --------------------------------------------------------------------------
   7. Blog index (Notes) — date-box column, body column, tag-cloud aside
   -------------------------------------------------------------------------- */
.jpb-note {
	display: flex;
	gap: 1.1em;
	align-items: flex-start;
	border-bottom: 1px solid #ececec;
	padding-bottom: 1.2em;
	margin-bottom: 1.4em;
}
.jpb-note-body { flex: 1 1 auto; min-width: 0; margin-block-start: 0; }

.jpb-datebox {
	flex: 0 0 auto;
	width: 64px;
	background: var(--wp--preset--color--navy);
	border-radius: 4px;
	overflow: hidden;
	line-height: 1.05;
}
.jpb-datebox .wp-block-post-date { margin: 0; }
.jpb-datebox time { color: #fff; text-decoration: none; }
.jpb-day { display:none; font-size: 1.5rem; font-weight: 700; text-align: right; padding: .12em .34em .06em; }
.jpb-my { margin-block-start: 0; background: var(--wp--preset--color--navy-deep); padding: .3em 0; text-align: center }
.jpb-mon { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.jpb-yr { font-size: .8rem; opacity: .85; }

.jpb-note .wp-block-post-title { margin: .05em 0 .35em; font-size: 1.3rem; }
.jpb-note .wp-block-post-title a { color: var(--wp--preset--color--navy); text-decoration: none; }
.jpb-note .wp-block-post-title a:hover { color: var(--wp--preset--color--oxblood); }

.jpb-pagination {
	margin-top: 2em;
	border-top: 2px solid var(--wp--preset--color--navy);
	padding-top: .8em;
}

/* Tag-cloud aside */
.jpb-blog-aside { font-size: .9rem; }
.jpb-aside-title {
	font-size: .95rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	border-bottom: 2px solid var(--wp--preset--color--navy);
	padding-bottom: .35em;
	margin-bottom: .7em;
}
.jpb-tagcloud { line-height: 1.95; }
.jpb-tagcloud a { color: var(--wp--preset--color--steel); text-decoration: none; }
.jpb-tagcloud a:hover { color: var(--wp--preset--color--oxblood); text-decoration: underline; }

/* --------------------------------------------------------------------------
   8. Single post
   -------------------------------------------------------------------------- */
.jpb-single-date {
	color: var(--wp--preset--color--steel-soft);
	font-size: .85rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 1.6em;
}
.jpb-postnav a { text-decoration: none; }

/* Post footer meta: tags + back link */
.jpb-postmeta {
	font-size: .9rem;
	color: var(--wp--preset--color--steel-soft);
}
.jpb-post-tags {
	color: var(--wp--preset--color--steel-soft);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .8rem;
}
.jpb-post-tags a {
	color: var(--wp--preset--color--steel);
	text-decoration: none;
}
.jpb-post-tags a:hover { color: var(--wp--preset--color--oxblood); text-decoration: underline; }

/* Archive (tag / category) intro description */
.jpb-archive-desc {
	color: var(--wp--preset--color--steel-soft);
	margin-bottom: 1.6em;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */
.jpb-footer-inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: .6rem 1rem;
}
.jpb-copyright {
	grid-column: 2;
	justify-self: center;
	text-align: center;
	margin: 0;
	font-size: .82rem;
	color: rgba(255,255,255,.7);
}
.jpb-social { grid-column: 3; justify-self: end; margin: 0; }
.jpb-social a { color: #fff; }

@media (max-width: 781px) {
	.jpb-footer-inner { grid-template-columns: 1fr; justify-items: center; }
	.jpb-copyright { grid-column: 1; order: 2; }
	.jpb-social { grid-column: 1; order: 1; }
}