/*
 * Level Up Learning: styles theme.json can't express.
 * Loaded on the front end and in the editor (see functions.php).
 */

/* Keyboard focus is always visible. */
:where(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* On sage and slate backgrounds sage links disappear; use the section's text color. The footer sets its own link color. */
:where(.has-primary-background-color, .has-contrast-background-color) a:where(:not(.wp-element-button)) {
	color: inherit;
}

/* On sage and slate backgrounds a sage outline disappears; use off-white there. */
:where(.has-primary-background-color, .has-contrast-background-color) :where(a, button, input, select, textarea, .wp-element-button):focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Block style: ridge horizon (core/group). Soft ridges along the bottom edge; the front ridge matches a surface-colored section below. */
.wp-block-group.is-style-ridge-horizon {
	padding-bottom: calc(90px + 2rem);
	background-image: url("../images/horizon.svg");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% 90px;
}

@media (max-width: 599px) {
	.wp-block-group.is-style-ridge-horizon {
		padding-bottom: calc(48px + 1.5rem);
		background-size: 100% 48px;
	}
}

/* The front page's first section sits right under the header. */
.levelup-main-flush {
	margin-block-start: 0;
}

/* Full-width sections meet edge to edge; the default block gap would show a strip of page color between them. */
.wp-block-post-content > .alignfull.levelup-section {
	margin-block: 0;
}

/* The footer sits flush only under a page that ends with a full-width section; other pages keep the gap. */
.wp-site-blocks > main:has(> .wp-block-post-content > .alignfull:last-child) + footer {
	margin-block-start: 0;
}

/* Sections: consistent vertical rhythm. */
.levelup-section {
	padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
}

/* Header and footer. */
.levelup-header {
	padding-block: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.levelup-brand__logo {
	margin: 0;
}

/* Core makes the link inline-block, which leaves descender space under the logo. */
.levelup-brand__logo a {
	display: block;
}

/* max-height too: the editor puts an inline height: auto on the image, which beats a plain height. */
.levelup-brand__logo img {
	display: block;
	width: auto;
	height: 58px;
	max-height: 58px;
}

/* Reversed logo, for the slate footer. */
.levelup-brand--reverse .levelup-brand__logo img {
	height: 64px;
	max-height: 64px;
}

@media (max-width: 599px) {
	.levelup-brand__logo img {
		height: 48px;
		max-height: 48px;
	}

	.levelup-brand--reverse .levelup-brand__logo img {
		height: 56px;
		max-height: 56px;
	}
}

.levelup-header .wp-block-navigation {
	font-weight: 600;
}

.levelup-header .wp-block-navigation a {
	color: var(--wp--preset--color--contrast);
}

.levelup-footer {
	padding-block: 3rem;
	font-size: var(--wp--preset--font-size--small);
}

.levelup-footer a {
	color: var(--wp--preset--color--primary-soft);
}

.levelup-footer__about > .wp-block-site-tagline,
.levelup-footer__about > .levelup-contact,
.levelup-footer__about > p {
	margin: 0;
}

/* The privacy link sits under the owners' menu and looks like one of its links. */
.levelup-footer__links > p {
	margin: 0;
}

.levelup-footer__links > p a {
	color: inherit;
	text-decoration: none;
}

/* Outline button. */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Closing call to action. */
.levelup-cta .wp-block-buttons {
	margin-top: 2rem;
}

/* Home page draft. */
.levelup-draft-hero h1 {
	max-width: 16em;
	font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem);
}

.levelup-draft-hero .wp-block-buttons {
	margin-top: 2rem;
}

/* "At a glance" panel beside the hero headline. */
.levelup-glance {
	padding: 1.25rem 1.5rem;
	border-radius: 12px;
	background: var(--wp--preset--color--surface);
}

.levelup-glance > .levelup-glance__label {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.levelup-glance > .levelup-glance__row {
	gap: 0.75rem;
	margin: 0;
	padding-block: 0.6rem;
	border-top: 1px solid var(--wp--preset--color--primary-soft);
}

.levelup-glance > .levelup-glance__label + .levelup-glance__row {
	border-top: 0;
}

.levelup-glance__row p {
	margin: 0;
	line-height: 1.45;
}

/* Icon tiles: a small line icon centered in a rounded square. */
.wp-block-image.levelup-tile {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0;
	border-radius: 8px;
	background: #fff;
}

.wp-block-image.levelup-tile img {
	width: 16px;
	height: 16px;
}

.wp-block-image.levelup-tile--wash {
	width: 34px;
	height: 34px;
	margin-bottom: 0.75rem;
	border-radius: 9px;
	background: var(--wp--preset--color--surface);
}

.wp-block-image.levelup-tile--wash img {
	width: 20px;
	height: 20px;
}

/* Cards: subjects and the tutor. */
.levelup-card {
	box-sizing: border-box;
	height: 100%;
	padding: 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: #fff;
}

.levelup-card h3 {
	margin: 0 0 0.25rem;
}

.levelup-card .levelup-card__meta {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--secondary);
}

/* Lists in cards: sage dots, like the tutor's credentials. */
.levelup-card .wp-block-list:not(.levelup-creds) {
	margin-top: 0.75rem;
	padding: 0;
	list-style: none;
}

.levelup-card .wp-block-list:not(.levelup-creds) li {
	position: relative;
	padding: 0.2rem 0 0.2rem 1.25rem;
}

.levelup-card .wp-block-list:not(.levelup-creds) li::before {
	content: "";
	position: absolute;
	top: 0.85em;
	left: 0;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

/* Block style: card price (core/paragraph). A sage-wash strip across the bottom of a card, level across a row of cards. */
.levelup-card:has(> .is-style-card-price) {
	display: flex;
	flex-direction: column;
	padding-bottom: 0;
	overflow: hidden;
}

.levelup-card:has(> .is-style-card-price) > :nth-last-child(2) {
	margin-bottom: 1.25rem;
}

.levelup-card > .is-style-card-price {
	margin: auto -1.25rem 0;
	padding: 0.85rem 1.25rem;
	background: var(--wp--preset--color--surface);
}

.is-style-card-price strong {
	color: var(--wp--preset--color--primary);
}

/* Tutor card: spans the 1200px section like the subject cards, even if it's set to full width in the editor. */
.levelup-section > .levelup-tutor.wp-block-columns {
	box-sizing: border-box;
	width: auto;
	max-width: 1200px !important;
	height: auto;
	margin-right: auto !important;
	margin-left: auto !important;
	padding: 1.75rem;
	gap: 2.5rem;
}

/* The photo column's width is the owners' to set (Column → Width). When the columns stack on small screens, keep the photo from filling the card. */
@media (max-width: 781px) {
	.levelup-tutor .levelup-portrait {
		max-width: 280px;
	}
}

/* Keep the bio at a comfortable line length in the wider card. */
.levelup-tutor > .wp-block-column:last-child > p:not(.levelup-card__meta) {
	max-width: 65ch;
}

.levelup-portrait img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 12px;
}

/* Credentials: one bullet style, so owners can add or remove items freely. */
.levelup-creds {
	padding: 0;
	list-style: none;
}

.levelup-creds li {
	position: relative;
	padding: 0.45rem 0 0.45rem 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.levelup-creds li:first-child {
	border-top: 0;
}

.levelup-creds li::before {
	content: "";
	position: absolute;
	top: 0.95em;
	left: 0;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

/* Service-area picture, framed like a card. */
.wp-block-image.levelup-map-frame {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: #fff;
}

.levelup-map-frame img {
	display: block;
	width: 100%;
	height: auto;
}

/* Contact form (Jetpack): brand corners, and a ridge-blue border that keeps 3:1 contrast on white. */
.levelup-contact-form :where(input:not([type="hidden"], [type="checkbox"], [type="radio"]), textarea, select) {
	border: 1px solid var(--wp--preset--color--secondary);
	border-radius: 6px;
	font: inherit;
}