/**
 * Highrise global styles.
 *
 * Most of the theme's styling lives in theme.json. This file is for the
 * small amount of CSS that theme.json cannot express, such as sibling
 * selectors, :has(), transforms and transitions.
 *
 * It is loaded on the front end and inside the block editor canvas from
 * functions.php, so the editor matches the live site.
 *
 * CSS that belongs to a single block lives in assets/css/blocks/ instead,
 * one file per block, so it is only loaded on pages that use that block.
 *
 * Wherever possible, use the CSS variables WordPress generates from
 * theme.json (for example var(--wp--preset--color--mint)) rather than
 * hard coded values, so that changes to theme.json flow through here too.
 */

/**
 * Font smoothing.
 *
 * Matches the mockup, which renders text with greyscale antialiasing on
 * macOS. This makes text look slightly thinner and lighter than the
 * browser default. theme.json has no setting for these properties, which
 * is why they live here. They only have an effect on macOS.
 */
body {
	-webkit-font-smoothing: antialiased; /* Safari and Chrome on macOS. */
	-moz-osx-font-smoothing: grayscale; /* Firefox on macOS. */
}

/**
 * Full width sections that sit next to each other.
 *
 * WordPress adds the block gap as a top margin on every block inside a
 * constrained layout. When two full width blocks with a background colour
 * are next to each other, that margin shows as a strip of the page
 * background between them. This removes it so the sections sit flush.
 *
 * The + (adjacent sibling) selector means this only applies when the two
 * sections are directly next to each other.
 */
.alignfull.has-background + .alignfull.has-background {
	margin-block-start: 0;
}

/**
 * Remove the gap above the footer after a full width section.
 *
 * When the last block in the post content is a full width block with a
 * background colour, the footer sits flush against it. Pages that end
 * with normal content keep the gap so text does not run into the footer.
 */
main:has(.wp-block-post-content > .alignfull.has-background:last-child) + footer {
	margin-block-start: 0;
}

/**
 * Section spacing between coloured sections and normal content.
 *
 * Full width blocks with a background colour have their own padding, so
 * they read as sections. Normal content on the page background is not in
 * a section, so on its own it would only get the small block gap where it
 * meets a coloured section. This gives it the same space as the padding
 * inside a section (spacing size 80), either way round:
 * - a coloured section followed by normal content.
 * - normal content followed by a coloured section.
 *
 * Two coloured sections next to each other still sit flush, because
 * neither selector matches that case.
 */
.alignfull.has-background + :not(.alignfull.has-background),
:not(.alignfull.has-background) + .alignfull.has-background {
	margin-block-start: var(--wp--preset--spacing--80);
}

/**
 * Section spacing above the footer.
 *
 * When a page ends with normal content, the footer needs section sized
 * space above it. When a page ends with a coloured section, the more
 * specific :has() rule above removes this so the footer sits flush.
 */
.wp-site-blocks > footer {
	margin-block-start: var(--wp--preset--spacing--80);
}

/**
 * Links and focus outlines on dark backgrounds.
 *
 * theme.json makes links Ink, which is almost invisible on the dark
 * palette colours. Inside a block with a dark background, links are
 * Mint instead, and keyboard focus outlines are Mint so they stay
 * visible.
 *
 * Buttons are left alone (:not(.wp-element-button)) because they have
 * their own colours. Navigation links keep the colour of the text around
 * them, because the Navigation block's own rule is more specific.
 */
:is(
	.has-ink-background-color,
	.has-midnight-background-color,
	.has-navy-background-color,
	.has-navy-light-background-color
) a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--mint);
}

:is(
	.has-ink-background-color,
	.has-midnight-background-color,
	.has-navy-background-color,
	.has-navy-light-background-color
) :focus-visible {
	outline-color: var(--wp--preset--color--mint);
}

/**
 * Headings in dark sections.
 *
 * theme.json colours headings Ink, which would override the white text
 * colour set on a dark section and leave its headings almost invisible.
 * Inside a block with a dark background, headings inherit the section's
 * text colour instead. A heading given its own colour in the editor keeps
 * it, because WordPress's colour classes use !important.
 */
:is(
	.has-ink-background-color,
	.has-midnight-background-color,
	.has-navy-background-color,
	.has-navy-light-background-color
) :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

/**
 * Text colours from the background colour.
 *
 * Picking a background colour on a block sets its text colour too, so
 * editors don't have to pick both. This only applies when no text colour
 * has been picked (WordPress adds the has-text-color class when one is),
 * so a colour chosen in the editor always wins.
 *
 * - Dark backgrounds: body text is halfway between Mist and white, which
 *   reads more clearly than Mist alone, and headings are white.
 * - Mint backgrounds: text is Ink, as Mint is too light for white text.
 * - Paper, White and Mist keep the theme.json defaults (Ink Muted text
 *   and Ink headings).
 */
:is(
	.has-ink-background-color,
	.has-midnight-background-color,
	.has-navy-background-color,
	.has-navy-light-background-color
):not(.has-text-color) {
	color: color-mix(in srgb, var(--wp--preset--color--mist) 50%, var(--wp--preset--color--white));
}

:is(
	.has-ink-background-color,
	.has-midnight-background-color,
	.has-navy-background-color,
	.has-navy-light-background-color
):not(.has-text-color) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--white);
}

/*
 * A block inside the section that has its own text colour passes it on
 * to its headings, as in the rule above for dark sections.
 */
:is(
	.has-ink-background-color,
	.has-midnight-background-color,
	.has-navy-background-color,
	.has-navy-light-background-color
) .has-text-color :is(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

:is(
	.has-mint-background-color,
	.has-mint-bright-background-color
):not(.has-text-color) {
	color: var(--wp--preset--color--ink);
}

/**
 * Sticky header.
 *
 * The header template part is output as a <header> element directly
 * inside .wp-site-blocks. position: sticky keeps it in the normal page
 * flow, so nothing moves underneath it, and then holds it at the top of
 * the screen once the page scrolls.
 *
 * top uses the admin bar height variable WordPress sets when the admin
 * bar is showing, so the header sits below it when logged in and at the
 * very top of the screen when logged out.
 *
 * The background is 90% Paper with a blur, as in the mockup, so content
 * scrolling underneath the header is softened.
 */
:root {
	/* Header height: 74px minimum row height plus 16px padding top and bottom. */
	--highrise-header-height: 106px;
}

.wp-site-blocks > header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	background-color: color-mix(in srgb, var(--wp--preset--color--paper) 90%, transparent); /* Paper at 90% opacity. */
	-webkit-backdrop-filter: blur(12px); /* Older versions of Safari. */
	backdrop-filter: blur(12px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s ease;
}

/**
 * Header border once the page has scrolled.
 *
 * assets/js/header.js adds the is-scrolled class once the page has
 * scrolled a little way. The border is Ink at 12% opacity, matching the
 * mockup. It starts transparent above, so it fades in rather than
 * appearing suddenly and the header height never changes.
 */
.wp-site-blocks > header.is-scrolled {
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--ink) 12%, transparent);
}

/**
 * Anchor links and the sticky header.
 *
 * When following a link to a section on the page (such as /#the-stack),
 * the browser stops the section this far from the top of the screen, so
 * its heading is not hidden behind the sticky header.
 */
html {
	scroll-padding-top: calc(var(--highrise-header-height) + var(--wp-admin--admin-bar--height, 0px));
}

/**
 * Pixel cards.
 *
 * The card look from the mockup: a white box with a thin border and two
 * small square "pixel corners" sitting just outside the top left and
 * bottom right corners. It is shared by several block styles registered
 * in functions.php:
 * - the Note, Warning and Alert paragraph styles (core-paragraph.css).
 * - the Card group style (core-group.css).
 *
 * Each style sets --highrise-note-colour in its block's stylesheet, which
 * colours the pixel corners and, at 40% strength, the border. Mint is the
 * fallback if a style does not set one.
 */
:is(.is-style-note, .is-style-warning, .is-style-alert, .is-style-card) {
	position: relative; /* So the pixel corners can be placed against the box. */
	box-sizing: border-box; /* Keep padding and border inside the width, so notes and cards line up. */
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	border: 1px solid color-mix(in srgb, var(--highrise-note-colour, var(--wp--preset--color--mint)) 40%, transparent);
	border-radius: 2px;
}

/* The two pixel corners, 7px squares in the style's colour. */
:is(.is-style-note, .is-style-warning, .is-style-alert, .is-style-card)::before,
:is(.is-style-note, .is-style-warning, .is-style-alert, .is-style-card)::after {
	content: "";
	position: absolute;
	width: 7px;
	height: 7px;
	background-color: var(--highrise-note-colour, var(--wp--preset--color--mint));
}

/* Top left corner, sitting 3px outside the box. */
:is(.is-style-note, .is-style-warning, .is-style-alert, .is-style-card)::before {
	top: -3px;
	left: -3px;
}

/* Bottom right corner, sitting 3px outside the box. */
:is(.is-style-note, .is-style-warning, .is-style-alert, .is-style-card)::after {
	right: -3px;
	bottom: -3px;
}

/**
 * Eyebrow colour on dark backgrounds.
 *
 * The Eyebrow style (styles/blocks/eyebrow.json) is Ink Muted, which is
 * readable on light backgrounds. Inside a dark section it switches to
 * Mint, as in the mockup, where Mint has plenty of contrast.
 */
:is(
	.has-ink-background-color,
	.has-midnight-background-color,
	.has-navy-background-color,
	.has-navy-light-background-color
) .is-style-eyebrow {
	color: var(--wp--preset--color--mint);
}

/**
 * Eyebrow spacing.
 *
 * An eyebrow belongs to the heading below it, so the heading sits closer
 * to it (spacing size 30) than the normal block gap.
 */
.is-style-eyebrow + :is(h1, h2, h3, h4, h5, h6) {
	margin-block-start: var(--wp--preset--spacing--30);
}

/**
 * Captions.
 *
 * Every caption (image, table, video, audio, embed and gallery) has the
 * wp-element-caption class. Its font and colour are set in theme.json
 * under styles.elements.caption. This adds "// " before the text, like
 * the code-comment labels in the mockup, so editors never type it.
 *
 * The slashes take the caption's own font and colour. The second content
 * value gives them empty alternative text, so screen readers skip them.
 */
.wp-element-caption::before {
	content: "// ";
	content: "// " / "";
}

/**
 * Captions on single images inside a gallery are laid over the photo
 * with a dark fade by WordPress, so they do not get the slashes. The
 * caption for the gallery as a whole still does.
 */
.wp-block-gallery .wp-block-image .wp-element-caption::before {
	content: none;
}

/* On dark backgrounds, captions use Mist so they stay readable. */
:is(
	.has-ink-background-color,
	.has-midnight-background-color,
	.has-navy-background-color,
	.has-navy-light-background-color
) .wp-element-caption {
	color: var(--wp--preset--color--mist);
}