/**
 * CSM Corp theme styles.
 *
 * Most styling lives in theme.json. This file covers what theme.json can't express:
 * the overlay header, icon decorations, and the theme's registered block styles.
 */

/* ------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------ */

.csm-header {
	position: relative;
	z-index: 20;
	background: var(--wp--preset--color--white);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}

.csm-header__logo .wp-block-image {
	margin: 0;
}

.csm-header__logo img {
	display: block;
	max-width: min(208px, 40vw);
	height: auto !important;
}

.csm-logo--white {
	display: none;
}

.csm-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--black);
}

.csm-nav .wp-block-navigation-item__content:hover,
.csm-nav .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--red);
}

/* Submenu chevron, matching the Figma "lsicon:down-filled" icon. */
.csm-nav .wp-block-navigation__submenu-icon svg {
	display: none;
}

.csm-nav .wp-block-navigation__submenu-icon {
	width: 16px;
	height: 16px;
	margin-left: 8px;
	background: var(--csm-icon-nav-down-dark) center / 16px no-repeat;
}

.csm-nav .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	padding: 8px 0;
}

.csm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 20px;
}

/* Contact link gets the red square with the diagonal arrow. */
.csm-nav__contact > .wp-block-navigation-item__content {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.csm-nav__contact > .wp-block-navigation-item__content::after {
	content: "";
	width: 19px;
	height: 19px;
	flex: none;
	background: var(--wp--preset--color--red);
}

/* The arrow points up in the source SVG; Figma rotates it 45° inside the square. */
.csm-nav__contact > .wp-block-navigation-item__content::before {
	content: "";
	position: absolute;
	right: 1.5px;
	top: 50%;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background: var(--csm-icon-nav-arrow) center / 16px no-repeat;
	transform: rotate(45deg);
	z-index: 1;
}

/* Search button: icon only, matching the Figma search glyph. */
.csm-nav__search .wp-block-search__button {
	background: transparent !important;
	border: 0 !important;
	padding: 0 !important;
	color: var(--wp--preset--color--black);
	min-width: 0;
}

.csm-nav__search .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.csm-nav__search .wp-block-search__input {
	font-size: var(--wp--preset--font-size--small);
	text-transform: none;
	letter-spacing: 0;
	border: 1px solid var(--wp--preset--color--black);
	padding: 6px 10px;
}

/* Overlay header (homepage): transparent over the hero, white logo and links. */
.wp-block-template-part.is-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
}

.admin-bar .wp-block-template-part.is-overlay {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.is-overlay .csm-header {
	background: transparent;
	box-shadow: none;
}

.is-overlay .csm-logo--color {
	display: none;
}

.is-overlay .csm-logo--white {
	display: block;
}

.is-overlay .csm-nav .wp-block-navigation-item__content,
.is-overlay .csm-nav__search .wp-block-search__button {
	color: var(--wp--preset--color--white);
}

.is-overlay .csm-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
	text-underline-offset: 6px;
}

.is-overlay .csm-nav .wp-block-navigation__submenu-icon {
	background-image: var(--csm-icon-nav-down);
}

.is-overlay .csm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--black);
}

.is-overlay .csm-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--white);
}

.csm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: var(--wp--preset--color--black);
}

/* ------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------ */

.csm-footer .wp-block-image {
	margin-bottom: var(--wp--preset--spacing--30);
}

.csm-footer .wp-block-image img {
	max-width: min(323px, 70vw);
	height: auto !important;
}

.csm-footer__about {
	max-width: 409px;
}

.csm-footer__heading {
	color: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
	text-transform: uppercase;
	margin-bottom: 32px;
}

.csm-footer a {
	text-decoration: none;
}

.csm-footer a:hover {
	text-decoration: underline;
}

.csm-footer__nav .wp-block-navigation-item__content {
	line-height: 1;
}

/* Square social icons: white tile with the red glyph knocked out, as in Figma. */
.csm-social.wp-block-social-links .wp-social-link {
	border-radius: 0;
	width: 32px;
	height: 32px;
}

.csm-social.wp-block-social-links .wp-block-social-link-anchor {
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	padding: 0;
	justify-content: center;
}

.csm-footer-bar p {
	margin: 0;
}

.csm-footer-bar a {
	text-decoration: none;
}

/* Paragraphs with a leading icon (footer contacts). */
.csm-icon {
	position: relative;
	padding-left: 32px;
}

.csm-icon::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	background: center / 24px no-repeat;
}

.csm-icon--location::before {
	background-image: var(--csm-icon-location);
}

.csm-icon--phone::before {
	background-image: var(--csm-icon-phone);
}

/* ------------------------------------------------------------------
 * Block styles
 * ------------------------------------------------------------------ */

/* Heading: "Accent bar" (red vertical rule, e.g. HOTELS / RESIDENTIAL). */
.wp-block-heading.is-style-accent-bar {
	border-left: 4px solid var(--wp--preset--color--red);
	padding: 0.1em 0 0.1em 26px;
}

/* Cover: "Hero" adds the Figma grid texture over the photo. */
.wp-block-cover.is-style-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--csm-texture-grid) top left / 100px 100px repeat;
	mix-blend-mode: multiply;
}

.wp-block-cover.is-style-hero .wp-block-cover__inner-container {
	z-index: 2 !important;
}

/* Cover: "Tinted texture" multiplies the photo into the overlay color at low opacity. */
.wp-block-cover.is-style-tinted {
	isolation: isolate;
}

.wp-block-cover.is-style-tinted .wp-block-cover__background {
	z-index: 0;
	opacity: 1 !important;
}

.wp-block-cover.is-style-tinted .wp-block-cover__image-background {
	z-index: 1;
	mix-blend-mode: multiply;
	opacity: 0.2;
}

.wp-block-cover.is-style-tinted.is-tint-strong .wp-block-cover__image-background {
	opacity: 0.4;
}

.wp-block-cover.is-style-tinted .wp-block-cover__inner-container {
	z-index: 2 !important;
}

/* Image: "Project tile" goes grayscale with the red plus on hover. */
.wp-block-image.is-style-project {
	position: relative;
	overflow: hidden;
}

.wp-block-image.is-style-project img {
	transition: filter 0.25s ease;
}

.wp-block-image.is-style-project::after {
	content: "";
	position: absolute;
	left: 17px;
	top: 50%;
	width: 84px;
	height: 84px;
	background: var(--csm-icon-plus) center / 64px no-repeat, var(--wp--preset--color--red);
	opacity: 0;
	transform: translateY(-10%);
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.wp-block-image.is-style-project:hover img,
.wp-block-image.is-style-project:focus-within img {
	filter: grayscale(1);
}

.wp-block-image.is-style-project:hover::after,
.wp-block-image.is-style-project:focus-within::after {
	opacity: 1;
}

/* Columns: "Dividers" draws the blue rule between stat columns. */
.wp-block-columns.is-style-dividers > .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--wp--preset--color--blue);
	padding-left: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.wp-block-columns.is-style-dividers > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--wp--preset--color--blue);
		padding-left: 0;
		padding-top: var(--wp--preset--spacing--30);
	}
}

/* ------------------------------------------------------------------
 * Section helpers
 * ------------------------------------------------------------------ */

/*
 * Sections whose photo runs to the viewport edge (intro, Development, Careers).
 * The text side lines up with the 1280px content column; the photo side has no padding.
 */
.csm-bleed-left,
.csm-bleed-right {
	--csm-gutter: max(var(--wp--style--root--padding-left), calc((100vw - var(--wp--style--global--content-size)) / 2));
}

.csm-bleed-left {
	padding-left: 0 !important;
	padding-right: var(--csm-gutter) !important;
}

.csm-bleed-right {
	padding-left: var(--csm-gutter) !important;
	padding-right: 0 !important;
}

@media (max-width: 781px) {
	.csm-bleed-left,
	.csm-bleed-right {
		padding-left: var(--wp--style--root--padding-left) !important;
		padding-right: var(--wp--style--root--padding-right) !important;
	}
}

/* Text column fixed at the Figma 630px on desktop; columns stack on mobile. */
@media (min-width: 782px) {
	.csm-text-col {
		flex: 0 1 630px !important;
	}
}

/* Images that should fill their slot regardless of source size. */
.csm-fill img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.csm-fill.wp-block-image {
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
}

/* Value rows on the About section: fixed red tile with a white icon. */
.csm-value-icon {
	flex: none;
	width: 120px;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.csm-value-icon .wp-block-image {
	margin: 0;
}

.csm-value-icon img {
	max-width: 102px;
	max-height: 102px;
	width: auto !important;
	height: auto !important;
}

@media (max-width: 600px) {
	.csm-value-icon {
		width: 80px;
		height: 80px;
	}

	.csm-value-icon img {
		max-width: 64px;
		max-height: 64px;
	}
}

/* Stats band numbers. */
.csm-stat-number {
	line-height: 1 !important;
	margin-bottom: 12px !important;
}

/* Line-length caps for large display text, matching the Figma text boxes. */
.csm-measure {
	max-width: 1005px;
}

.csm-measure-narrow {
	max-width: 727px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.csm-measure-cta {
	max-width: 638px;
}

/* "Owned and Managed by CSM" band: full width, one line on desktop. */
.wp-block-cover .csm-measure-cta.has-display-font-size {
	max-width: none;
	width: 100%;
	text-align: center;
}

@media (min-width: 782px) {
	.wp-block-cover .csm-measure-cta.has-display-font-size {
		white-space: nowrap;
	}
}

/* Bold runs inside light display headings (hero, section titles). */
.wp-block-heading strong {
	font-weight: 700;
}

.wp-block-heading.has-hero-font-size strong {
	font-weight: 800;
}

.wp-block-cover h1,
.wp-block-cover p {
	text-wrap: pretty;
}

/* Full-width sections butt up against each other; no block gap between them. */
.wp-site-blocks > * + *,
.wp-block-post-content > .alignfull + .alignfull,
.wp-block-post-content > .alignfull:first-child {
	margin-block-start: 0;
}

/* Hero: keep the custom top-left position but let the content column span the page. */
.wp-block-cover.is-style-hero.has-custom-content-position .wp-block-cover__inner-container {
	width: 100% !important;
}

.csm-stat-number {
	white-space: nowrap;
}

@media (min-width: 782px) {
	.wp-block-columns.is-style-dividers > .wp-block-column + .wp-block-column {
		padding-left: 32px;
	}
}

.csm-social.wp-block-social-links .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
}

.csm-social.wp-block-social-links .wp-block-social-link-anchor svg {
	width: 22px;
	height: 22px;
}

/* Use the Figma search glyph instead of the core icon. */
.csm-nav__search .wp-block-search__button svg {
	display: none;
}

.csm-nav__search .wp-block-search__button {
	width: 20px;
	height: 20px;
	background: var(--csm-icon-search-dark) center / 18px no-repeat !important;
}

.is-overlay .csm-nav__search .wp-block-search__button {
	background-image: var(--csm-icon-search) !important;
}

/* Anchor targets: leave room for the sticky header when jumping to a section. */
.wp-block-heading[id] {
	scroll-margin-top: 140px;
}

/* In-page section links on the dark "Owned and Managed" band. */
.csm-anchor-links a {
	color: var(--wp--preset--color--white, #fff);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.csm-anchor-links a:hover,
.csm-anchor-links a:focus {
	text-decoration-thickness: 2px;
}

/* Photo captions on sections whose image runs to the page edge. */
.csm-bleed-right .wp-element-caption {
	padding-right: var(--wp--style--root--padding-right);
	text-align: left;
}

/* Mobile menu: flatten the submenu so every item shares one right edge. */
.csm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	position: static;
	width: 100%;
	min-width: 0;
	padding: 0 !important;
	border: 0;
	background: transparent;
	box-shadow: none;
	align-items: flex-end;
}

.csm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding-right: 0;
	text-align: right;
}