/*
Theme Name: BHP Services
Theme URI: https://developer.wordpress.com/studio/
Author: WordPress Studio
Description: Block theme for a workplace-safety (BHP) consulting business. Ported from a Next.js/Tailwind marketing site into native WordPress block-theme structure (theme.json, templates, template parts, patterns) with a "Usługi" (Services) custom post type.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
Text Domain: bhp-block-theme
*/

/* Supplemental CSS for things theme.json can't express: decorative markers,
   hover affordances, and small layout helpers used inside patterns. */

/* ---------------------------------------------------------------------------
   Heading scale

   theme.json holds the mobile sizes; these step up at 640px, mirroring the
   original's Tailwind breakpoints (text-3xl -> sm:text-4xl, text-2xl ->
   sm:text-3xl) instead of ramping smoothly between them.

   `:root h1` (0,1,1) is needed to out-rank theme.json's `:root :where(h1)`,
   where :where() contributes no specificity.
   --------------------------------------------------------------------------- */
@media (min-width: 640px) {
	:root h1,
	:root .wp-block-post-title {
		font-size: 2.25rem;
	}
	:root h2 {
		font-size: 1.875rem;
	}
}

/* The homepage hero is the only H1 that goes to 48px (text-3xl/4xl/5xl). */
:root .bhp-hero h1 {
	font-size: 1.875rem;
}
@media (min-width: 640px) {
	:root .bhp-hero h1 {
		font-size: 2.25rem;
	}
}
@media (min-width: 1024px) {
	:root .bhp-hero h1 {
		font-size: 3rem;
	}
}

/* FAQ accordion (core/details) */
.bhp-faq-list > details {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: 1rem;
}
.bhp-faq-list > details:first-child {
	border-top: 1px solid var(--wp--preset--color--border);
}
.bhp-faq-list summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.bhp-faq-list summary::-webkit-details-marker {
	display: none;
}
.bhp-faq-list summary::after {
	content: "+";
	float: inline-end;
	color: var(--wp--preset--color--accent);
	font-size: 1.4em;
	line-height: 1;
}
.bhp-faq-list details[open] summary::after {
	content: "\2212";
}

/* Numbered "steps" list used in service content */
.bhp-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	flex-shrink: 0;
}

/* Checkmark list block style ("Lista z ptaszkami" in the editor) */
.wp-block-list.is-style-checkmarks {
	list-style: none;
	padding-inline-start: 0;
}
.wp-block-list.is-style-checkmarks > li {
	position: relative;
	padding-inline-start: 1.75rem;
}
.wp-block-list.is-style-checkmarks > li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	top: 0.1em;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}

/* Callout aside */
.bhp-callout {
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--muted);
}

/* Trust / service / area cards */
.bhp-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--preset--border-radius--medium, 8px);
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bhp-card:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}

/* ---------------------------------------------------------------------------
   Query-loop card grids (service listing, "Zobacz też")

   Grid items stretch to the row height, but the card *inside* each item does
   not, which is what makes the tiles look ragged. Force the card to fill its
   grid cell, let the excerpt absorb the slack, and pin the CTA to the bottom
   so the links line up across a row.
   --------------------------------------------------------------------------- */
.wp-block-post-template.is-layout-grid {
	/* Equal height across every row, not just within a row. */
	grid-auto-rows: 1fr;
}
.wp-block-post-template.is-layout-grid > li {
	display: flex;
}
.wp-block-post-template.is-layout-grid > li > .bhp-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}
.wp-block-post-template.is-layout-grid .wp-block-post-excerpt {
	flex: 1 1 auto;
}
.wp-block-post-template.is-layout-grid .wp-block-read-more {
	margin-top: auto;
}

/* ---------------------------------------------------------------------------
   Service tile: short label, lead text, price + arrow that slides on hover.
   The read-more block is stretched over the whole card so the entire tile is
   one click target, while still giving screen readers a real link name.
   --------------------------------------------------------------------------- */
.bhp-service-card {
	position: relative;
}
.bhp-service-card .wp-block-post-excerpt__more-text {
	display: none;
}
.bhp-tile-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}
.bhp-tile-cta::after {
	content: "→";
	transition: transform 0.18s ease;
}
.bhp-service-card:hover .bhp-tile-cta::after {
	transform: translateX(5px);
}
.bhp-tile-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Visually hidden, but still a focusable, named link. */
	text-indent: -9999px;
	overflow: hidden;
	white-space: nowrap;
	border-radius: inherit;
}
.bhp-tile-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Header: two-column services dropdown with the price under each label.

   Core's navigation stylesheet is specific and must be out-ranked deliberately:
     .wp-block-navigation .has-child .…__submenu-container > .…item > .…item__content
       { display:flex }                                    (0,4,0)
     .wp-block-navigation .has-child:hover > .…__submenu-container
       { min-width:200px; width:auto }                     (0,4,0)
   Every override below therefore leads with .bhp-header to reach 0,5,0+.
   Sizing is attached to the open (hover/focus-within) state only, so the closed
   panel keeps core's width:0/visibility:hidden and never flashes on load.
   --------------------------------------------------------------------------- */
@media (min-width: 782px) {
	/* Mirrors core's own :not() chain so this lands at 0,7,0 and cannot tie. */
	.bhp-header .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):hover > .wp-block-navigation__submenu-container,
	.bhp-header .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.1rem;
		width: 40rem;
		min-width: 40rem;
		max-width: min(94vw, 44rem);
		padding: 0.6rem;
		background: #fff;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 10px;
		box-shadow: 0 14px 36px rgba(0, 0, 0, 0.13);
	}
}

/* Stack label over price: core makes this anchor a flex row. */
.bhp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 0.5rem 0.7rem;
	border-radius: 6px;
	line-height: 1.35;
}
.bhp-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--muted);
}
.bhp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
	display: block;
	font-weight: 500;
}
.bhp-header .wp-block-navigation__submenu-container .bhp-nav-price {
	display: block;
	margin-top: 1px;
	font-size: 0.74rem;
	font-weight: 400;
	color: var(--wp--preset--color--muted-foreground);
}

/* Labels stay on one line in the wide desktop panel. */
@media (min-width: 782px) {
	.bhp-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label,
	.bhp-header .wp-block-navigation__submenu-container .bhp-nav-price {
		white-space: nowrap;
	}
}

/* Pill badges (client list, service areas) */
.bhp-badge {
	display: inline-flex;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: #fff;
	padding: 0.4rem 0.9rem;
	font-size: 0.875rem;
	font-weight: 500;
}

/* Press / media mention cards */
.bhp-press-card {
	display: grid;
	grid-template-columns: 1fr;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}
.bhp-press-card__media {
	position: relative;
	overflow: hidden;
}
.bhp-press-card figure {
	margin: 0;
	height: 100%;
	aspect-ratio: 16 / 9;
}
.bhp-press-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.bhp-press-badge {
	position: absolute;
	top: 0.75rem;
	inset-inline-start: 0.75rem;
	margin: 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-dark);
	border-radius: 6px;
	padding: 0.25rem 0.7rem;
	font-size: 0.75rem;
	font-weight: 700;
}
@media (min-width: 782px) {
	.bhp-press-card {
		grid-template-columns: 40% 1fr;
	}
	.bhp-press-card figure {
		aspect-ratio: auto;
		min-height: 100%;
	}
}

/* Top utility bar */
.bhp-topbar a {
	color: inherit;
	text-decoration: none;
}
.bhp-topbar a:hover {
	color: var(--wp--preset--color--accent);
}

/* Navigation submenu price hint */
.bhp-nav-price {
	display: block;
	font-size: 0.75rem;
	opacity: 0.65;
	font-weight: 400;
}

/* Breadcrumbs */
.bhp-breadcrumbs {
	font-size: 0.85rem;
}
.bhp-breadcrumbs p {
	margin: 0;
	color: var(--wp--preset--color--muted-foreground);
}
.bhp-breadcrumbs a {
	color: var(--wp--preset--color--muted-foreground);
	text-decoration: none;
}
.bhp-breadcrumbs a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Service hero price card
   --------------------------------------------------------------------------- */
.bhp-service-hero .wp-block-post-title {
	margin: 0;
}
.bhp-price-card {
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 1.75rem;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}
.bhp-price-card__label {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-foreground);
}
.bhp-price-card__price {
	margin: 0.35rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--wp--preset--color--accent);
}
.bhp-price-card__note {
	margin: 0.6rem 0 0;
	font-size: 0.85rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted-foreground);
}
.bhp-price-card__list {
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}
.bhp-price-card__list li {
	position: relative;
	padding-inline-start: 1.6rem;
	font-size: 0.9rem;
	line-height: 1.45;
}
.bhp-price-card__list li::before {
	content: "\2713";
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
}
.bhp-price-card__actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 1.5rem;
}
.bhp-price-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1rem;
	border-radius: 8px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: filter 0.15s ease;
}
.bhp-price-card__cta:hover {
	filter: brightness(1.15);
	color: #fff;
}

/* ---------------------------------------------------------------------------
   Powiązane usługi
   --------------------------------------------------------------------------- */
.bhp-related__heading {
	margin: 0 0 1.5rem;
}
.bhp-related__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 782px) {
	.bhp-related__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.bhp-related__grid .bhp-service-card {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
}
.bhp-related__excerpt {
	flex: 1 1 auto;
	margin: 0.5rem 0 0;
	font-size: 0.92rem;
	line-height: 1.65;
	color: var(--wp--preset--color--muted-foreground);
}
.bhp-related__grid .bhp-tile-cta {
	margin-top: 1rem;
	font-size: 0.92rem;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Page hero (Cennik / O nas / Kontakt)

   A max-width inside a constrained layout gets centred by core's
   `.is-layout-constrained > :where(:not(.alignleft)…)` rule (0,5,0), which
   pushed the lead paragraph ~240px to the right of the H1. Pin it back to the
   start edge instead of relying on the plain `margin:0` that core out-ranks.
   --------------------------------------------------------------------------- */
.bhp-page-hero .wp-block-post-title,
.bhp-service-hero .wp-block-post-title {
	margin: 0;
}
.bhp-page-hero .wp-block-post-excerpt,
.bhp-service-hero .wp-block-post-excerpt {
	max-width: 48rem;
	margin-block: 0;
	margin-inline-start: 0;
	margin-inline-end: auto;
}
.bhp-page-hero .wp-block-post-excerpt__excerpt,
.bhp-service-hero .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Consistent measure for long-form copy.

   Section headings run the full 1200px container while prose is capped for
   readability — but left-aligned, so every element shares one left edge rather
   than each block centring itself at a different width.
   --------------------------------------------------------------------------- */
.bhp-prose > p,
.bhp-prose > ul,
.bhp-prose > ol,
.bhp-prose > .wp-block-list {
	max-width: 48rem;
	margin-inline-end: auto;
}

/* ---------------------------------------------------------------------------
   Cennik price table: light header, orange prices, roomy rows.
   Overrides the dark table header set globally in theme.json.
   --------------------------------------------------------------------------- */
.bhp-price-table table {
	border-collapse: collapse;
}
.bhp-price-table thead {
	background: transparent;
	color: inherit;
}
.bhp-price-table thead th {
	border-bottom: 2px solid var(--wp--preset--color--border);
	font-size: 0.95rem;
	text-align: start;
}
.bhp-price-table tbody tr:nth-child(even) {
	background: transparent;
}
.bhp-price-table tbody td {
	vertical-align: top;
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: 1rem;
}
.bhp-price-table tbody td:nth-child(2) {
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	white-space: nowrap;
}
.bhp-price-table tbody td:nth-child(3) {
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted-foreground);
}
.bhp-price-table tbody td:first-child a {
	color: var(--wp--preset--color--foreground);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--wp--preset--color--accent) 50%, transparent);
	text-underline-offset: 3px;
}
.bhp-price-table tbody td:first-child a:hover {
	text-decoration-color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
   Client recommendations (referencje)

   On a service page the block renders nothing unless a recommendation names
   that service, so the surrounding band must collapse too — otherwise 7 of 9
   service pages would show an empty grey stripe.
   --------------------------------------------------------------------------- */
.bhp-recs-band:not(:has(.bhp-recs)) {
	display: none;
}
.bhp-recs__heading {
	margin: 0 0 1.5rem;
}
.bhp-recs__grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}
@media (min-width: 782px) {
	.bhp-recs--multi.bhp-recs--cols-2 .bhp-recs__grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.bhp-recs--multi.bhp-recs--cols-3 .bhp-recs__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.bhp-recs__card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin: 0;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-inline-start: 4px solid var(--wp--preset--color--accent);
	border-radius: 10px;
}

/* Scan preview: a peek at the signed letter, cropped to its top third so the
   letterhead and opening lines are what's visible. */
.bhp-recs__scan {
	display: block;
	flex: none;
	width: 8.5rem;
	height: 11rem;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--muted);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.bhp-recs__scan:hover {
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.bhp-recs__scan img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: top center;
}
.bhp-recs__content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

/* Side-by-side once there's room; the single-card service page gets it first. */
@media (min-width: 600px) {
	.bhp-recs__card {
		flex-direction: row;
		align-items: flex-start;
	}
}
@media (min-width: 782px) and (max-width: 1100px) {
	.bhp-recs--multi .bhp-recs__card {
		flex-direction: column;
	}
}

.bhp-recs__quote {
	margin: 0;
	flex: 1 1 auto;
	border: 0;
	padding: 0;
}
.bhp-recs__quote p {
	margin: 0;
	font-size: 1.02rem;
	line-height: 1.65;
	color: var(--wp--preset--color--foreground);
}
.bhp-recs__meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-top: 1.25rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted-foreground);
	text-align: start;
}
.bhp-recs__org {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--wp--preset--color--foreground);
}
.bhp-recs__scope {
	margin-top: 0.5rem;
	align-self: flex-start;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--wp--preset--color--muted);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}
.bhp-recs__pdf {
	margin-top: 0.75rem;
	align-self: flex-start;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------------------
   Certificates / documents
   --------------------------------------------------------------------------- */
.bhp-cert-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
	margin-block: 2rem;
}
@media (min-width: 782px) {
	.bhp-cert-grid {
		grid-template-columns: 1fr 1fr;
	}
}
.bhp-cert-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	overflow: hidden;
}
.bhp-cert-card__scan {
	margin: 0;
	background: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.bhp-cert-card__scan img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 22rem;
	object-fit: contain;
	object-position: top center;
	padding: 1rem;
}
.bhp-cert-card__body {
	padding: 1.25rem 1.5rem 1.5rem;
}
.bhp-cert-card__meta {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted-foreground);
}

/* ---------------------------------------------------------------------------
   Footer services list — short labels, tight rhythm.
   --------------------------------------------------------------------------- */
.bhp-service-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	font-size: 0.9rem;
}
.bhp-service-links a {
	color: inherit;
	text-decoration: none;
	opacity: 0.85;
}
.bhp-service-links a:hover {
	opacity: 1;
	color: var(--wp--preset--color--accent);
}

/* Editor-only placeholders for the server-rendered blocks. */
.bhp-editor-placeholder {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.25rem;
	border: 1px dashed var(--wp--preset--color--border);
	border-radius: 8px;
	background: var(--wp--preset--color--muted);
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted-foreground);
}

@media (max-width: 600px) {
	.bhp-topbar {
		display: none;
	}
}