/*
Theme Name: Bare Canvas
Author: David de Léon
Description: A deliberately minimal one-column theme for building simple, self-contained pages with the block editor. No header or footer by default, an optional per-page header, a per-page background colour, full-width colour bands, media-and-text with vertical alignment, and button rows that link to anchors on the page.
Version: 1.0.0
Requires at least: 6.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bare-canvas
*/

/* -------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background-color: #ffffff;
	-webkit-font-smoothing: antialiased;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Anything with an anchor gets breathing room when jumped to. */
[id] {
	scroll-margin-top: 2rem;
}

body.bc-has-header [id] {
	scroll-margin-top: 5rem;
}

/* -------------------------------------------------------------------
   2. The one column
   -------------------------------------------------------------------
   Top-level blocks are centred at the content width from theme.json.
   .alignwide widens them, .alignfull lets them bleed to the edges.
   ------------------------------------------------------------------- */

.bc-content {
	--bc-gutter: 1.25rem;
	padding: 4rem var( --bc-gutter );
	overflow-x: hidden;
}

.bc-content > * {
	max-width: var( --wp--style--global--content-size, 42rem );
	margin-left: auto;
	margin-right: auto;
}

.bc-content > * + * {
	margin-top: var( --wp--style--global--block-gap, 1.5rem );
}

.bc-content > .alignwide {
	max-width: var( --wp--style--global--wide-size, 64rem );
}

.bc-content > .alignfull {
	max-width: none;
	width: auto;
	margin-left: calc( -1 * var( --bc-gutter ) );
	margin-right: calc( -1 * var( --bc-gutter ) );
}

/* A little more air above headings than between paragraphs. */
.bc-content > h2,
.bc-content > h3,
.bc-content > h4 {
	margin-top: 2.5rem;
}

.bc-content > :first-child {
	margin-top: 0;
}

/* Full-width colour bands sit flush against each other. */
.bc-content > .alignfull + .alignfull {
	margin-top: 0;
}

/* -------------------------------------------------------------------
   3. Optional header
   ------------------------------------------------------------------- */

.bc-header {
	padding: 1.125rem 1.25rem;
}

.bc-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 1.5rem;
	max-width: var( --wp--style--global--wide-size, 64rem );
	margin: 0 auto;
}

.bc-header__title {
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	color: inherit;
}

.bc-header__title:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.bc-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
}

.bc-nav a {
	color: inherit;
	text-decoration: none;
}

.bc-nav a:hover,
.bc-nav .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

body.bc-has-header .bc-content {
	padding-top: 2rem;
}

/* -------------------------------------------------------------------
   4. Small block adjustments
   ------------------------------------------------------------------- */

/* Media & text: keep the image column from stretching oddly when the
   vertical alignment is set to top or bottom. */
.wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media,
.wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media {
	align-self: start;
}

.wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media {
	align-self: end;
}

/* Button rows wrap gracefully on narrow screens. */
.wp-block-buttons {
	row-gap: 0.75rem;
}

.wp-block-button__link {
	text-decoration: none;
}

/* Anything sitting inside a full-width band keeps its own padding. */
.bc-content .alignfull > .wp-block-group__inner-container {
	padding-left: var( --bc-gutter );
	padding-right: var( --bc-gutter );
}

/* -------------------------------------------------------------------
   5. Accessibility helpers
   ------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.bc-skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: 0.6rem 1rem;
	background: #ffffff;
	color: #1a1a1a;
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.2 );
	text-decoration: none;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}