/*
Theme Name: Vivian den Hollander
Theme URI: https://www.viviandenhollander.nl
Description: Child theme of the customized UnderStrap base for the Vivian den Hollander website. Inherits all templates and functions from the parent; put site-specific overrides here so the parent can be updated safely.
Author: Scriptonic
Author URI: https://scriptonic.nl
Template: Scriptonic
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: vivian-child
*/

/*
 * The parent theme's compiled CSS is loaded automatically (handle: understrap-styles).
 * Add your own CSS overrides below — they load after the parent stylesheet.
 */

/* =========================================================================
 * Sticky header on all pages — the navbar stays pinned to the top of the
 * viewport while the page scrolls. It has an opaque background
 * (.main-bg-color), so content never shows through. z-index sits above page
 * content (and matches Bootstrap's fixed-navbar layer).
 * ========================================================================= */
#wrapper-navbar {
	position: sticky;
	top: 0;
	z-index: 1030;
}

/* =========================================================================
 * Homepage — "Ken je de nieuwste boeken van Vivian al?" (specials widget)
 * -------------------------------------------------------------------------
 * The section is a WooCommerce "Hand-picked Products" block. The first two
 * products are the newest books and are shown LARGE; the rest are shown
 * smaller below. The cover images only exist up to 300px wide, so the
 * featured covers are capped there to stay sharp.
 *   - Mobile  : 2 big covers stacked full-width, then the rest in a 2-col grid.
 *   - ≥768px  : 2 big covers side by side, then the rest in a 4-col row.
 * ========================================================================= */

/* Stack the mascot above the heading and centre everything. */
#specials-content > .wp-block-group {
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}
#specials-content .wp-block-image {
	margin: 0 auto;
}

#specials-content .wc-block-grid__products {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	width: 100%;
	max-width: 760px;
	margin: 1rem auto 0;
	padding: 0;
	list-style: none;
}

#specials-content .wc-block-grid__product {
	display: flex;
	flex-direction: column;
	margin: 0;
}

#specials-content .wc-block-grid__product-link {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
}

/* White rounded "card" behind each cover, with a gentle playful hover lift. */
#specials-content .wc-block-grid__product-image {
	padding: 10px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#specials-content .wc-block-grid__product-link:hover .wc-block-grid__product-image,
#specials-content .wc-block-grid__product-link:focus-visible .wc-block-grid__product-image {
	transform: translateY(-4px) rotate(-1deg);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}
#specials-content .wc-block-grid__product-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

#specials-content .wc-block-grid__product-title {
	width: 100%;
	margin-top: 0.6rem;
	color: #fff;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.25;
	text-align: center;
}

/* The two newest books: bigger at every screen size. */
#specials-content .wc-block-grid__product:nth-child(-n+2) {
	grid-column: span 2;
}
#specials-content .wc-block-grid__product:nth-child(-n+2) .wc-block-grid__product-image {
	max-width: 300px;
	margin-right: auto;
	margin-left: auto;
	padding: 14px;
}
#specials-content .wc-block-grid__product:nth-child(-n+2) .wc-block-grid__product-title {
	max-width: 300px;
	margin-right: auto;
	margin-left: auto;
	font-size: 1.15rem;
}

@media (min-width: 768px) {
	#specials-content .wc-block-grid__products {
		grid-template-columns: repeat(4, 1fr);
		max-width: 880px;
	}
}

/* =========================================================================
 * Homepage — the three round links (Kleurplaten / Boeken / Liedjes)
 * -------------------------------------------------------------------------
 * The cover block was forced to min-height:700px, leaving a large empty gap
 * below the circles. Remove that, shrink the spacers, make the three circles
 * a uniform size, and add a gentle hover so they feel interactive.
 * ========================================================================= */
[id="3main-content"] .wp-block-cover {
	min-height: 0 !important;
}
[id="3main-content"] .wp-block-spacer {
	height: 24px !important;
}
[id="3main-content"] .wp-block-image.is-style-rounded img {
	width: 240px;
	height: 240px;
	object-fit: cover;
}
[id="3main-content"] .wp-block-image.is-style-rounded {
	transition: transform 0.18s ease;
}
[id="3main-content"] .wp-block-image.is-style-rounded:hover {
	transform: scale(1.05) rotate(-1deg);
}
[id="3main-content"] .wp-block-button__link {
	padding: 0.85rem 1.6rem !important;
}

/* =========================================================================
 * Homepage text sections ("Over Vivian", "Schrijver op bezoek")
 * -------------------------------------------------------------------------
 * Vertically centre the image with its text, lighten the body copy a touch
 * (the section default is a heavy 700) and give it more line-height so it
 * reads comfortably. Hide stray empty paragraphs that add dead vertical gaps.
 * ========================================================================= */
.wp-block-media-text {
	align-items: center;
}
.wp-block-media-text .wp-block-media-text__content p {
	font-weight: 600;
	line-height: 1.6;
}
.site .wrapper p:empty {
	display: none;
}

/* =========================================================================
 * Tighter spacing + right-sized headings on small screens.
 * ========================================================================= */
@media (max-width: 767px) {
	.site .wrapper {
		padding: 2.25rem 0;
	}
	.site .wrapper h2 {
		font-size: 1.9rem !important;
	}
	[id="3main-content"] .wp-block-image.is-style-rounded img {
		width: 200px;
		height: 200px;
	}
}

/* =========================================================================
 * "Over de boeken" page (and any page using the .content-container block)
 * -------------------------------------------------------------------------
 * The content block is a fixed 2-column grid that never collapsed, so on a
 * phone every book section was crammed into two tiny columns. On small
 * screens we switch the container to a single flex column — this also
 * neutralises the items' "grid-column: span 2", which otherwise kept forcing
 * a second column. Desktop keeps the original 2-column grid untouched.
 * ========================================================================= */
@media (max-width: 767px) {
	.content-container {
		display: flex !important;
		flex-direction: column;
		gap: 1.25rem;
	}
	.content-container > * {
		width: 100%;
	}
}

/* Drop the manual spacer heading (an <h2> containing only <br> tags). */
.content-container h2:has(br + br) {
	display: none;
}

/* Soften the book-cover corners to match the rest of the site. */
.content-container .wp-block-image img {
	border-radius: 8px;
}

/* -------------------------------------------------------------------------
 * Turn the six book sections into tidy white "cards" so the page reads as
 * friendly, digestible blocks instead of one long wall of text. They are the
 * 3rd–8th children of the container (after the intro + the Spekkie banner,
 * before the Kaat en Bink / EXTRA blocks). If books are ever added/reordered,
 * adjust the nth-child range.
 * ------------------------------------------------------------------------- */
.content-container > :nth-child(n+3):nth-child(-n+8) {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 1.5rem 1.25rem;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	text-align: center;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.content-container > :nth-child(n+3):nth-child(-n+8):hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.30);
}
.content-container > :nth-child(n+3):nth-child(-n+8) h2 {
	margin: 0 0 0.9rem !important;
	color: #f3835e !important;
	font-size: 1.6rem;
}
.content-container > :nth-child(n+3):nth-child(-n+8) p {
	color: #27384a !important;
	font-weight: 500;
	line-height: 1.55;
}
.content-container > :nth-child(n+3):nth-child(-n+8) a {
	color: #d2603a;
	font-weight: 700;
}
.content-container > :nth-child(n+3):nth-child(-n+8) figure {
	margin: 0 auto 0.8rem;
}
.content-container > :nth-child(n+3):nth-child(-n+8) img {
	max-height: 300px;
	width: auto;
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}