/*
Theme Name:   Ideabianka
Theme URI:    https://ideabianka.wini.app
Description:  Standalone block theme for IDEA bianka Real Estate. No parent theme. Design tokens live in theme.json; utilities are compiled with Tailwind (npm run build:css). See README.md.
Author:       mth
Version:      1.0.0
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.0
License:      GPL-2.0-or-later
Text Domain:  ideabianka
*/

/* Intentionally near-empty. Design tokens belong in theme.json, not here. */

/*
 * The cover block's inner container is position:relative in core, so anything
 * absolutely positioned inside it anchors to the text block rather than to the
 * hero. Making it static for the hero lets the scroll indicator sit against the
 * bottom of the image instead.
 *
 * Going static costs the inner container its place in the positioned paint
 * layer, though, so the absolutely positioned image and overlay siblings paint
 * straight over the hero text. Core's own z-index rules skip this case: they
 * are guarded by :not(:has(.wp-block-cover__background +
 * .wp-block-cover__inner-container)) and this hero has exactly that adjacency.
 * Dropping the two background layers to z-index:-1 puts them back underneath.
 * The isolation scopes that negative index to the hero rather than letting the
 * layers slide behind the page; .ib-hero paints no background of its own, so
 * nothing of it is left covering them.
 */
.ib-hero {
	isolation: isolate;
}

.ib-hero .wp-block-cover__inner-container {
	position: static;
}

.ib-hero > .wp-block-cover__image-background,
.ib-hero > .wp-block-cover__background {
	z-index: -1;
}

.ib-hero .ib-scroll {
	transition: opacity .2s ease, transform .2s ease;
	/* The chevron itself is 32px; the padding lifts the tap area to 44. */
	padding: 6px;
}

.ib-hero .ib-scroll:hover,
.ib-hero .ib-scroll:focus-visible {
	opacity: 1;
	transform: translateX(-50%) translateY(3px);
}

@media (prefers-reduced-motion: reduce) {
	.ib-hero .ib-scroll {
		transition: none;
	}
}

/*
 * Tailwind's preflight is deliberately not imported (see src/tailwind.css), so
 * the user agent's 40px indent on <dd> survives. Every definition list on the
 * site is a card or a spec row where the description belongs flush under its
 * term; the indent was quietly pushing that text right of its own heading.
 * Utilities that set `margin: 0` already cleared it, which is why only some
 * lists looked wrong.
 */
/*
 * box-sizing. Tailwind's preflight is deliberately not imported (it would
 * flatten core block styles), and this is the one thing in it the theme cannot
 * do without: every w-* / h-* utility is written assuming padding and borders
 * sit inside the box. Without it a `w-full` element with padding measured wider
 * than its container - which is how the mobile menu ended up hanging off the
 * left edge of the screen.
 */
*,
::before,
::after {
	box-sizing: border-box;
}

dd {
	margin-inline-start: 0;
}

/*
 * Core's pagination renders each page as a bare digit, which on a phone is a
 * 7x18px tap target. Give every link and the current-page marker a real hit
 * area so the numbers stay usable with a thumb.
 */
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: .35rem;
}

/*
 * Same reason: the UA's `[hidden] { display: none }` and a Tailwind display
 * utility have equal specificity, and the utilities are printed later, so any
 * element carrying both `hidden` and something like `inline-flex` stays
 * visible. Preflight settles this with !important; without it, the attribute
 * silently stops working.
 */
[hidden]:where(:not([hidden='until-found'])) {
	display: none !important;
}

/*
 * Design constants that are not user-selectable colours, so they belong here
 * rather than in the theme.json palette. The radius scale that used to live
 * here went with the pre-Tailwind card rules; radii now come from utilities.
 */
:root {
	--ib-rule-dark: #333;
	--ib-status-rent: #eab308;
}

/* --- Infinite scroll ----------------------------------------------------- */
.ib-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
}

.ib-more__button {
	cursor: pointer;
	border: 1px solid var(--wp--preset--color--contrast);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	padding: .85rem 2.25rem;
	border-radius: 0;
	font-size: .95rem;
}

.ib-more__button:hover:not(:disabled) {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.ib-more__button:disabled { opacity: .6; cursor: default; }

.ib-more__status {
	margin: 0;
	font-size: .9rem;
	color: var(--wp--preset--color--contrast-3);
	min-height: 1.2em;
}

/* --- Footer details ------------------------------------------------------ */
.ib-hours__row {
	border-bottom: 1px dashed var(--ib-rule-dark);
}

.ib-contact {
	align-items: center;
	min-height: 44px;
}

.ib-contact__icon {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	flex: 0 0 auto;
	color: var(--wp--preset--color--on-dark);
}

.ib-contact p { margin: 0; }

/* Tap height lives on the link so it is the actual target, and the row centres
 * both children so the icon shares a centre line with the text. */
.ib-contact a,
.ib-footer__bar a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.ib-contact a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Keep the dashed rule reading as a divider, not a link underline. */
.ib-footer__bar {
	border-top: 1px solid var(--ib-rule-dark);
}

/*
 * Core adds margin-block-start between top-level blocks:
 *   :where(.wp-site-blocks) > * { margin-block-start: var(--wp--preset--spacing--30) }
 * That put a gap between the header and <main>. Header, main and footer each
 * manage their own padding, so the root gap is removed here rather than by
 * zeroing blockGap in theme.json, which would also collapse gaps inside blocks.
 */
:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

/* --- Read more ----------------------------------------------------------
 * The collapsed state and its fade are applied by readmore.js, so a visitor
 * without JavaScript simply sees the whole description.
 * ---------------------------------------------------------------------- */
.ib-readmore--collapsed {
	position: relative;
	overflow: hidden;
}

.ib-readmore--collapsed { cursor: pointer; }

.ib-readmore--collapsed::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 6rem;
	background: linear-gradient(to bottom, transparent, var(--wp--preset--color--base));
	pointer-events: none;
}

.ib-readmore__toggle {
	margin-top: 1rem;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1.25rem;
	border: 1px solid var(--wp--preset--color--base-3);
	border-radius: 6px;
	background: transparent;
	color: var(--wp--preset--color--accent);
	font-size: .95rem;
	font-weight: 600;
	cursor: pointer;
}

.ib-readmore__toggle:hover {
	background: var(--wp--preset--color--base-2);
}

/*
 * Print.
 *
 * The sheet carries exactly what an agent needs in front of a client: title,
 * address, price, the lead photo in colour, the details table, and the broker's
 * name and phone. Everything else is screen-only - site chrome, badges,
 * reference number, description, unit table, video, and the actions themselves.
 * Elements that opt out carry .ib-no-print.
 */
@media print {
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.ib-no-print,
	.ib-readmore,
	.ib-readmore__toggle,
	.wp-block-ideabianka-property-units,
	.wp-block-ideabianka-property-media,
	.lg-outer,
	.lg-backdrop {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	main {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/*
	 * One representative photo, kept in colour. print-color-adjust is the only
	 * way to say that a picture is content rather than decoration; the
	 * thumbnail column beside it is noise on paper.
	 */
	[data-ib-gallery] {
		display: block !important;
		height: auto !important;
		break-inside: avoid;
	}

	[data-ib-gallery] > div + div {
		display: none !important;
	}

	[data-ib-gallery] > div:first-child a {
		height: auto !important;
		aspect-ratio: 16 / 10;
	}

	[data-ib-gallery] img {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* A sticky sidebar repeats itself on every printed page. */
	.wp-block-ideabianka-property-broker,
	.wp-block-ideabianka-property-broker * {
		position: static !important;
	}

	/*
	 * The phone is a filled button on screen. Print drops background colours by
	 * default, so left as-is it would be white text on white paper; on paper it
	 * only has to read as a line of text anyway.
	 */
	.wp-block-ideabianka-property-broker a[href] {
		background: none !important;
		border: 0 !important;
		color: #000 !important;
		justify-content: flex-start !important;
		min-height: 0 !important;
		padding: 0 !important;
	}

	tr,
	.wp-block-column {
		break-inside: avoid;
	}

	a[href] {
		text-decoration: none;
		color: #000;
	}
}