/**
 * Core block styling.
 *
 * Loaded on the front end and, via add_editor_style(), inside the block editor
 * canvas — so what an editor sees is what the page renders.
 *
 * theme.json already supplies colours, typography, the 1100px content width and
 * the spacing scale. This file covers the structural bits theme.json cannot
 * express, and the few places the old Bridge layout needs matching exactly.
 */

/* Columns -----------------------------------------------------------------
 * WPBakery rows had 15px inner gutters either side; core uses blockGap. Match
 * the old 30px total so converted three-column rows keep their rhythm.
 * ---------------------------------------------------------------------- */

.wp-block-columns {
	margin-bottom: 0;
	gap: 30px;
}

.wp-block-column {
	min-width: 0;
}

.wp-block-column > *:last-child {
	margin-bottom: 0;
}

/* Bridge stacked columns below 1000px, not core's 782px default. */
@media (max-width: 1000px) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Headings and text -------------------------------------------------------- */

.wp-block-heading {
	margin: 0 0 10px;
}

/* A heading directly after a spacer should not add its own top margin. */
.wp-block-spacer + .wp-block-heading {
	margin-top: 0;
}

/* Images ------------------------------------------------------------------- */

.wp-block-image {
	margin: 0 0 20px;
}

.wp-block-image img {
	display: block;
	height: auto;
}

.wp-block-image.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* Cover — replaces the old q_image_with_text_over tiles ---------------------
 * The original was a permanent 50% black shader with the caption always
 * visible, both intensifying to brand blue on hover.
 * ---------------------------------------------------------------------- */

.wp-block-cover {
	min-height: 320px;
	padding: 20px;
}

.wp-block-cover .wp-block-cover__background {
	transition: background-color 0.4s ease-in-out;
}

.wp-block-cover:hover .wp-block-cover__background {
	background-color: rgba(4, 124, 184, 0.55) !important;
	opacity: 1 !important;
}

.wp-block-cover img.wp-block-cover__image-background {
	transition: transform 0.4s ease;
}

.wp-block-cover:hover img.wp-block-cover__image-background {
	transform: scale(1.04);
}

.wp-block-cover .wp-block-cover__inner-container {
	text-align: center;
}

.wp-block-cover .wp-block-heading {
	margin: 0;
	color: var(--wp--preset--color--white);
}

.wp-block-cover p {
	margin: 4px 0 0;
	color: var(--wp--preset--color--white);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Buttons ------------------------------------------------------------------ */

.wp-block-buttons {
	margin: 0;
}

.wp-block-button__link {
	display: inline-block;
	height: 39px;
	white-space: nowrap;
	transition: color 0.1s linear, background-color 0.1s linear, border-color 0.1s linear;
}

/* The call-to-action band uses a white button on brand blue. */
.is-style-light .wp-block-button__link,
.wp-block-button.is-style-light .wp-block-button__link {
	border-color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--white);
	color: #000;
}

.is-style-light .wp-block-button__link:hover,
.wp-block-button.is-style-light .wp-block-button__link:hover {
	border-color: #f9f9f9;
	background-color: #f9f9f9;
	color: #000;
}

/* Groups used as full-width bands ------------------------------------------ */

.wp-block-group.has-background {
	padding: 50px 20px;
}

/* Light text when a band sits on the brand colour or a dark background. */
.wp-block-group.has-brand-background-color,
.wp-block-group.has-footer-background-color {
	color: var(--wp--preset--color--white);
}

.wp-block-group.has-brand-background-color :where(h1, h2, h3, h4, h5, h6),
.wp-block-group.has-footer-background-color :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--white);
}

/* Embeds ------------------------------------------------------------------- */

.wp-block-embed {
	margin: 0 0 20px;
}

.wp-block-embed__wrapper {
	position: relative;
}

.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
	padding-top: 56.25%;
}

.wp-block-embed iframe {
	width: 100%;
	border: 0;
}

/* Lists -------------------------------------------------------------------- */

.wp-block-list {
	margin: 0 0 20px;
	padding-left: 18px;
}

/* Social icons ------------------------------------------------------------- */

.wp-block-social-links {
	gap: 14px;
}

.wp-block-social-links.is-style-logos-only .wp-social-link {
	color: var(--wp--preset--color--heading);
}

.wp-block-social-links.is-style-logos-only .wp-social-link:hover {
	color: var(--wp--preset--color--brand);
}

/* Separator ---------------------------------------------------------------- */

.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	opacity: 1;
}

/* Editor-only ---------------------------------------------------------------
 * Give the editor canvas the page background, so contrast in the editor
 * matches the front end rather than sitting on plain white.
 * ---------------------------------------------------------------------- */

.editor-styles-wrapper {
	background-color: var(--wp--preset--color--page);
}

/* =========================================================================
 * Dark bands and icon boxes
 *
 * A row with a dark background needs light text. The original left body copy
 * at #818181 on #363636 — 3.1:1, well below readable — so this lifts it to
 * #b8b8b8, which scores 6.09:1 while staying subdued.
 * ====================================================================== */

.dragons-band--dark {
	color: #b8b8b8;
}

.dragons-band--dark :where(p, li, td) {
	color: #b8b8b8;
}

.dragons-band--dark :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--white);
}

.dragons-band--dark a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.dragons-band--dark a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--brand);
}

/* Icon boxes: Bridge centred the icon above a centred title and centred copy. */
.dragons-icon-box {
	padding: 30px 20px;
	text-align: center;
}

.dragons-icon-box .dragons-icon {
	display: block;
	margin: 0 auto 12px;
	color: var(--wp--preset--color--brand);
	line-height: 0;
}

.dragons-band--dark .dragons-icon-box .dragons-icon {
	color: var(--wp--preset--color--white);
}

.dragons-icon-box .wp-block-heading {
	margin-bottom: 14px;
}

.dragons-icon-box p:last-child {
	margin-bottom: 0;
}