/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 * Version: 1.2.1
 */

/* -------------------------------------------------------------------------
   Single post hero - featured image banner with the title below it
   -------------------------------------------------------------------------

   Blocksy's "type-2" hero overlays the title on the featured image: the
   <figure> is absolutely positioned behind <header class="entry-header">,
   and a 76% black scrim sits over the photo so the white title stays legible.
   The result reads as a flat dark band rather than a photo.

   Returning the figure to normal flow turns it into a banner, and the title
   block drops below it. The scrim is then no longer needed.

   This is deliberately CSS only. A child single.php does NOT work here:
   Blocksy includes the template file before it emits the document, so
   anything a template echoes at top level lands ahead of <head> and ends up
   above the site header.
   ------------------------------------------------------------------------- */

.single-post .hero-section[data-type="type-2"] {
	display: flex;
	flex-direction: column;
	row-gap: 0;

	/* The band and the H1 are full-width children, so they need to reproduce
	   the narrow container's gutters themselves. */
	--bc-band-inline: max(20px, calc((100% - var(--theme-narrow-container-max-width, 750px)) / 2));

	/* Page background, not green - the green now belongs to the band only,
	   and this also paints the strip behind the transparent header. */
	background-color: var(--theme-palette-color-5, #edeff2);

	/*
	 * The site header is transparent and absolutely positioned, so it floats
	 * over the top of the hero instead of taking up space. Reserve room for
	 * it or the nav lands on top of the photo.
	 *
	 * The extra 20px covers the logo rendering the header row taller than the
	 * configured --header-height (130px configured vs 150px actual on
	 * desktop). Overshooting is safe - it just shows as a little more of the
	 * green background - while undershooting would tuck the photo under the
	 * nav, so do not trim this.
	 */
	padding-top: calc(var(--header-height, 130px) + 20px);
}

/* --- Banner ------------------------------------------------------------- */

/* Out of the absolute layer, into the flow. */
.single-post .hero-section[data-type="type-2"] > figure {
	position: static;
	width: 100%;
	height: auto;
	margin: 0;
	overflow: hidden;
}

.single-post .hero-section[data-type="type-2"] > figure .ct-media-container {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Blocksy sets height:100% on this image at equal specificity, so including
 * .ct-media-container in the selector is what wins the height back. Do not
 * shorten this selector.
 */
.single-post .hero-section[data-type="type-2"] > figure .ct-media-container img {
	display: block;
	width: 100%;
	height: clamp(220px, 40vw, 520px);
	object-fit: cover;
	object-position: center;
}

/* The dark scrim existed to make the overlaid title readable. The title is
   on its own band now, so let the photo show at full brightness. */
.single-post .hero-section[data-type="type-2"] > figure .ct-media-container::after {
	display: none;
}

/* --- Title band and H1 ---------------------------------------------------

   The breadcrumbs and meta stay on the green band; the H1 drops below it onto
   the page background. `display: contents` lifts the header's three children
   into the hero's own flex column so the H1 can be ordered past the band - it
   cannot escape the green otherwise, since the background is painted by the
   element that contains it.

   Because these are flex items, their arrangement follows DOM order unless
   `order` says otherwise - and Blocksy's Customizer controls that DOM order
   (Post Structure -> hero elements). So `order` is pinned on all three below.
   Without it, reordering Title / Meta / Breadcrumbs in the Customizer silently
   moves the band's top and bottom padding onto the wrong elements.

   Visual order is breadcrumbs -> meta -> H1. To put the meta above the
   breadcrumbs instead, swap their two `order` values AND their two padding
   rules, so the band keeps its padding on the outer edges.

   Tab order still matches the screen: the H1 is not focusable, so the only
   focusable things in here are the breadcrumb and meta links, which stay in
   DOM order.
   ------------------------------------------------------------------------- */

.single-post .hero-section[data-type="type-2"] > .entry-header {
	display: contents;
}

/* Pinned so the layout does not depend on the Customizer's element order. */
.single-post .hero-section[data-type="type-2"] > .entry-header > .ct-breadcrumbs {
	order: 0;
}

.single-post .hero-section[data-type="type-2"] > .entry-header > .entry-meta {
	order: 1;
}

.single-post .hero-section[data-type="type-2"] > .entry-header > .page-title {
	order: 2;
}

/* Green band. These two are adjacent with no row-gap, so they read as one. */
.single-post .hero-section[data-type="type-2"] > .entry-header > .entry-meta,
.single-post .hero-section[data-type="type-2"] > .entry-header > .ct-breadcrumbs {
	width: 100%;
	max-width: none;
	margin: 0;
	padding-inline: var(--bc-band-inline);
	background-color: var(--theme-palette-color-1, #405639);
	text-align: center;
	justify-content: center;
}

/* Top of the band: full padding above, a small gap down to the meta. */
.single-post .hero-section[data-type="type-2"] > .entry-header > .ct-breadcrumbs {
	padding-top: clamp(32px, 5vw, 64px);
	padding-bottom: 14px;
}

/* Bottom of the band: no padding above (the 14px gap already sits there),
   full padding below. */
.single-post .hero-section[data-type="type-2"] > .entry-header > .entry-meta {
	padding-top: 0;
	padding-bottom: clamp(32px, 5vw, 64px);
}

/*
 * The H1, below the band on the page background.
 *
 * No padding-bottom: the content container below already carries 60px of top
 * padding, and adding more here would double the gap.
 */
.single-post .hero-section[data-type="type-2"] > .entry-header > .page-title {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp(28px, 4vw, 48px) var(--bc-band-inline) 0;
	background-color: var(--theme-palette-color-5, #edeff2);
	color: var(--theme-headings-color, #111518);
	text-align: center;
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 689px) {
	.single-post .hero-section[data-type="type-2"] > figure .ct-media-container img {
		height: clamp(180px, 56vw, 300px);
	}
}