/**
 * This file contains much of the global, layout-focused theme settings.
 * Not available in the editor.
 */

:root {
	scroll-behavior: smooth;
	scroll-padding-top: 40px;
}

:focus-visible {
	outline: 2px solid purple !important;
}

.post-thumbnail {
	display: block;
	position: relative;
}

.post-thumbnail img {
	display: block;
	height: auto;
	max-width: 100%;
}

/********************************************
 * Content dimensions.
 ********************************************/

.entry-content > * {
	padding-left: var(--wp--custom--primitive--padding--medium);
	padding-right: var(--wp--custom--primitive--padding--medium);
}

.entry-content > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wp--custom--layout-sizes--content);
}

.entry-content > .alignwide {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wp--custom--layout-sizes--wide);
}

/********************************************
 * Site header.
 ********************************************/

.site-header {
	align-items: center;
	background-color: var(--wp--custom--color--header-surface);
	border-width: 3px 0 0;
    border-image: var(--wp--preset--gradient--marigold-yellow-repeat) 1;
    border-style: solid;
	display: flex;
	justify-content: space-between;
	padding-bottom: var(--wp--custom--primitive--padding--small);
	padding-right: calc(var(--wp--custom--primitive--padding--medium) - var(--wp--custom--primitive--padding--small));
	padding-top: calc(var(--wp--custom--primitive--padding--small) * .8);
	position: relative;
	z-index: 2;
}

/**
 * Branding
 */

.site-branding {
	width: 50%;
	max-width: 170px;
}

.custom-logo-link {
	display: block;
	padding-left: var(--wp--custom--primitive--padding--medium);
	padding-right: var(--wp--custom--primitive--padding--medium);
}

.custom-logo {
	display: block;
	height: auto;
	width: 100%;
}

/********************************************
 * Site global contact at footer.
 ********************************************/
.site-contact-global-footer {
	background-color: var(--wp--custom--color--surface-tertiary);
	color: var(--wp--custom--color--text-secondary);
	padding: var(--wp--custom--primitive--padding--medium);
	text-align: center;
}

/********************************************
 * Site footer.
 ********************************************/

.site-footer {
	background-color: var(--wp--custom--color--footer-surface);
	color: var(--wp--custom--color--white);
	padding-bottom: var(--wp--custom--primitive--padding--medium);
	padding-top: var(--wp--custom--primitive--padding--medium);
}

.site-footer-wrap-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
	justify-content: space-between;
}

.site-footer .c-social-icons {
	padding-left: calc(var(--wp--custom--primitive--padding--medium) - var(--wp--custom--primitive--padding--small));
	padding-right: calc(var(--wp--custom--primitive--padding--medium) - var(--wp--custom--primitive--padding--small));
}

.site-footer .site-info {
	border-top: 1px solid var(--wp--custom--color--white);
	font-size: 1rem;
	margin-left: var(--wp--custom--primitive--padding--medium);
	margin-right: var(--wp--custom--primitive--padding--medium);
	margin-top: var(--wp--custom--primitive--padding--medium);
	padding-top: var(--wp--custom--primitive--padding--medium);
}

.site-footer .c-footermenu {
	margin-left: calc(var(--wp--custom--primitive--padding--medium) / 2);
}

.site-footer .site-info .c-footermenu {
	margin-left: calc((var(--wp--custom--primitive--padding--medium) / 2) * -1);
}

.site-footer .site-legal {
	margin-top: calc(var(--wp--custom--primitive--padding--medium) * 2);
}

/********************************************
 * Page.
 ********************************************/

body.page .site-main > article > .entry-header {
	margin: var(--wp--custom--primitive--padding--medium) auto;
	max-width: var(--wp--style--global--content-size);
	padding-left: var(--wp--custom--primitive--padding--medium);
	padding-right: var(--wp--custom--primitive--padding--medium);
}

body.page .site-main > article > .entry-footer {
	margin: 50px auto;
	max-width: var(--wp--custom--layout-sizes--wide);
	padding-left: var(--wp--custom--primitive--padding--medium);
	padding-right: var(--wp--custom--primitive--padding--medium);
}

body.page .site-main > article > .entry-footer::before {
	background-color: var(--wp--preset--color--red-brand);
	content: '';
	display: block;
	height: 2px;
	margin-bottom: 50px;
}


/********************************************
 * Navigation: Pagination.
 ********************************************/

.navigation.pagination .nav-links {
	display: flex;
	justify-content: center;
}

.navigation.pagination a,
.navigation.pagination span {
	align-items: center;
	display: inline-flex;
	justify-content: center;
	min-height: var(--wp--custom--dimensions--min-hit);
	padding-left: calc(var(--wp--custom--dimensions--min-hit) / 2.5);
	padding-right: calc(var(--wp--custom--dimensions--min-hit) / 2.5);
}

/********************************************
 * 404.
 ********************************************/

.error-404 {
	margin-bottom: var(--wp--custom--primitive--padding--large);
}

.error-404 > * {
	padding-left: var(--wp--custom--primitive--padding--medium);
	padding-right: var(--wp--custom--primitive--padding--medium);
	margin-left: auto;
	margin-right: auto;
	max-width: var(--wp--custom--layout-sizes--content);
}

/********************************************
 * Misc.
 ********************************************/

/**
 * Default paddings for lists are messed up as a consequence of how 
 * block elements are laid out, so we need to re-adjust.
 */
.entry-content > ul,
.entry-content > ol {
	padding-inline-start: calc(var(--wp--custom--primitive--padding--medium) * 2.5);
}