/*
Theme Name: Wanderlost Society
Theme URI: https://wanderlostsociety.com
Author: Austin Cunningham
Description: Custom theme for Wanderlost Society. Vintage maps for modern explorers.
Version: 1.3.1
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: wanderlost
*/

/* Map graticule behind the whole site */
body {
	background-image:
		linear-gradient(rgba(29, 59, 44, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(29, 59, 44, .06) 1px, transparent 1px);
	background-size: 64px 64px;
}

.wl-caps {
	font-family: var(--wp--preset--font-family--caps);
	text-transform: uppercase;
	letter-spacing: .18em;
	font-weight: 600;
	font-size: .8rem;
}

/* Header */
.wl-header a { text-decoration: none; }
.wl-header .wl-nav a:hover { text-decoration: underline; }

/* Hero badge */
.wl-badge img { width: 100%; max-width: 360px; height: auto; margin-inline: auto; display: block; }

/* Buttons */
.wp-block-button__link {
	font-family: var(--wp--preset--font-family--caps);
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 700;
	font-size: .82rem;
}

/* Offerings: ruled three-up */
.wl-offer { border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.wl-offer > .wp-block-column + .wp-block-column { border-left: 1px solid rgba(29, 59, 44, .22); }
.wl-offer > .wp-block-column { padding: 1.8rem 1.5rem; }
@media (max-width: 781px) {
	.wl-offer > .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid rgba(29, 59, 44, .22); }
}

/* Roman-numeral steps */
.wl-steps { counter-reset: s; }
.wl-steps > .wp-block-column { counter-increment: s; }
.wl-steps > .wp-block-column::before {
	content: counter(s, upper-roman) ".";
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.4rem;
	line-height: 1;
	display: block;
}

/* Gallery captions */
.wl-collection figcaption { font-family: var(--wp--preset--font-family--body); font-style: italic; }

/* Market card */
.wl-market dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; margin: 0; }
.wl-market dt { opacity: .65; font-family: var(--wp--preset--font-family--caps); text-transform: uppercase; letter-spacing: .16em; font-size: .78rem; padding-top: .2rem; }
.wl-market dd { margin: 0; }
.wl-market-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.wl-market-list li { border-top: 1px solid rgba(239, 230, 210, .3); padding-top: 1rem; }

/* Request form */
.wl-form { display: grid; gap: 1.1rem; max-width: 38rem; }
.wl-form label { display: block; font-family: var(--wp--preset--font-family--caps); text-transform: uppercase; letter-spacing: .14em; font-weight: 600; font-size: .78rem; margin-bottom: .35rem; }
.wl-form input, .wl-form textarea, .wl-form select {
	width: 100%; padding: .75rem .85rem; font: inherit; color: inherit;
	background: #fbf7ee; border: 1.5px solid rgba(29, 59, 44, .4); border-radius: 0;
}
.wl-form input:focus, .wl-form textarea:focus, .wl-form select:focus { outline: 2px solid #1d3b2c; outline-offset: 1px; }
.wl-form .wl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .wl-form .wl-row { grid-template-columns: 1fr; } }
.wl-form button {
	justify-self: start; cursor: pointer; padding: .95rem 1.5rem; border: 2px solid #1d3b2c; background: #1d3b2c; color: #f3ecdc;
	font-family: var(--wp--preset--font-family--caps); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .82rem;
}
.wl-form button:hover { background: transparent; color: #1d3b2c; }
.wl-hp { position: absolute !important; left: -9999px !important; }
.wl-notice { padding: 1.1rem 1.3rem; border: 2px solid #1d3b2c; background: #fbf7ee; max-width: 38rem; }
.wl-notice.is-error { border-color: #8a2f1d; color: #8a2f1d; }

/* Section rhythm */
.wl-section { padding-block: 5rem; }
.wl-section.wl-tight-top { padding-top: 0; }
.wl-hero { padding-block: 4.5rem; }
.wl-hero p { opacity: .92; }
.wl-hero .wp-block-button.is-style-outline .wp-block-button__link { color: #f3ecdc; border-color: #f3ecdc; }
.wl-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: #f3ecdc; color: #1d3b2c; border-color: #f3ecdc; }
.wl-lead { color: #4a5e50; }
.has-forest-background-color .wl-lead { color: inherit; opacity: .7; }
.wl-signoff { font-style: italic; font-size: 1.3rem; }
.wl-tags { display: flex; flex-wrap: wrap; gap: .6rem; }
.wl-tags p { margin: 0; border: 1px solid rgba(29, 59, 44, .22); padding: .35rem .8rem; background: #e9e0cb; font-size: .95rem; }
@media (max-width: 781px) {
	.wl-section { padding-block: 3.5rem; }
	.wl-hero { padding-block: 3rem; }
	.wl-hero .wl-badge img { max-width: 240px; }
	.wl-hero .wp-block-columns { flex-direction: column-reverse; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* v1.0.2 polish */
.wl-hero .wp-block-buttons { align-items: stretch; }
.wl-hero .wp-block-button__link,
.wl-hero .wp-block-button.is-style-outline .wp-block-button__link {
	padding: .9rem 1.4rem; border-width: 2px; line-height: 1.4; height: 100%; display: inline-flex; align-items: center;
}
.wl-steps { margin-top: 2rem !important; }
.wl-steps h3 { margin-top: .6rem; }
.wl-tags { margin-top: 1.5rem; }
.wl-tags p {
	background: transparent; border: 0; border-bottom: 1px dotted rgba(29, 59, 44, .45); padding: .15rem 0;
	font-family: var(--wp--preset--font-family--caps); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: #4a5e50;
}
.wl-tags { gap: .9rem 1.4rem; }
.wl-market-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem 4rem; align-items: end; }
.wl-market-main, .wl-market-side { min-width: 0; }
.wl-market-side { border-left: 1px solid rgba(239, 230, 210, .3); padding-left: 2.5rem; }
@media (max-width: 781px) {
	.wl-market-grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.wl-market-side { border-left: 0; padding-left: 0; border-top: 1px solid rgba(239, 230, 210, .3); padding-top: 1.5rem; }
}

/* v1.0.3 */
.wl-form, .wl-form * { box-sizing: border-box; }
.wl-form { margin-top: 2rem; }
.wl-form .wl-row > p { min-width: 0; }
.wl-steps > .wp-block-column > h3:first-child { margin-top: 1rem !important; }