/*
Theme Name: Golden Goblet Guild: Nonprofit
Description: The Golden Goblet Guild nonprofit site. Same parchment, ink and gold as the faire theme (gg-child), with a nonprofit front page and About page. Activate "Golden Goblet Guild: Faire" to bring the faire site back.
Author: Golden Goblet Guild
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gg-guild
*/

/*
 * The shared rules (footer dots, weights, header rhythm, hero divider) come
 * from gg-child's style.css, which functions.php loads first. This file only
 * carries what the nonprofit pages add.
 */

/* Text wordmark in the header: the logo artwork still reads "Faire". */
.gg-guild-title a {
	color: var(--wp--preset--color--accent-2);
	text-decoration: none;
}

.gg-guild-title a:hover,
.gg-guild-title a:focus-visible {
	color: var(--wp--preset--color--contrast);
}

/* Purpose text: a readable measure, a touch larger than body copy. */
.gg-guild-purpose {
	max-width: 40rem;
	margin-inline: auto;
	line-height: 1.6;
}

/*
 * Planned gatherings: a numbered programme, like the running order on a
 * playbill. No boxes: gold hairlines between entries and a large Roman
 * numeral hanging in the margin. One column on phones, two from tablets up.
 */
.wp-block-group.gg-guild-plans {
	--gg-plan-rule: color-mix(in srgb, var(--wp--preset--color--accent-1, #b8860b) 55%, transparent);
	counter-reset: gg-plan;
	display: grid;
	grid-template-columns: 1fr;
	column-gap: clamp(2rem, 6vw, 5rem);
	max-width: 60rem;
	margin-top: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--gg-plan-rule);
}

.gg-guild-plans > .wp-block-group {
	counter-increment: gg-plan;
	display: grid;
	grid-template-columns: 3rem 1fr;
	grid-template-rows: auto 1fr;
	column-gap: 1.1rem;
	align-content: start;
	margin: 0;
	padding-block: 1.4rem 1.5rem;
	border-bottom: 1px solid var(--gg-plan-rule);
}

.gg-guild-plans > .wp-block-group::before {
	content: counter(gg-plan, upper-roman);
	content: counter(gg-plan, upper-roman) / "";
	grid-row: 1 / span 2;
	justify-self: end;
	font-family: var(--wp--preset--font-family--new-rocker), serif;
	font-size: 2.1rem;
	line-height: 1;
	color: var(--wp--preset--color--accent-1, #b8860b);
}

.gg-guild-plans h3 {
	grid-column: 2;
	margin: 0 0 .3rem;
	font-size: 1.35rem;
	line-height: 1.2;
}

.gg-guild-plans p {
	grid-column: 2;
	margin: 0;
	color: var(--wp--preset--color--accent-4, #5f5a50);
	line-height: 1.55;
}

@media (min-width: 48rem) {
	.wp-block-group.gg-guild-plans {
		grid-template-columns: 1fr 1fr;
		border-top: 0;
	}

	/* Two columns: the first row carries the top rule so each column is ruled on its own. */
	.gg-guild-plans > .wp-block-group:nth-child(-n + 2) {
		border-top: 1px solid var(--gg-plan-rule);
	}

	.gg-guild-plans > .wp-block-group {
		grid-template-columns: 3.5rem 1fr;
		padding-block: 1.6rem 1.75rem;
	}

	.gg-guild-plans > .wp-block-group::before {
		font-size: 2.6rem;
	}
}

/* Header Donate button: compact, sits after the links, stays beside the hamburger on phones. */
.gg-header-donate .wp-block-button__link {
	padding: .45rem 1rem;
	white-space: nowrap;
}

@media (max-width: 599px) {
	.gg-header-donate .wp-block-button__link {
		padding: .4rem .75rem;
	}
}

/* Footer social icons: Old Gold, Ink on hover, generous tap targets for phones. */
.gg-footer-social .wp-social-link a {
	padding: .35rem;
}

.gg-footer-social .wp-social-link a:hover,
.gg-footer-social .wp-social-link a:focus-visible {
	color: var(--wp--preset--color--contrast);
}

/*
 * Homepage email sign-up: the first thing under the name. One row (email +
 * button) from 600px up, stacked on phones; 48px tall for thumbs.
 */
.gg-signup {
	max-width: 34rem;
	margin-inline: auto;
}

.gg-signup > * {
	margin-block: 0;
}

.gg-signup > * + * {
	margin-block-start: .75rem;
}

.gg-signup-title {
	font-size: clamp(1.5rem, 4vw, 2rem);
}

.gg-form--signup {
	--wpforms-field-size-input-height: 48px;
	--wpforms-button-size-height: 48px;
	--wpforms-button-size-margin-top: 0px;
	--wpforms-field-size-font-size: 17px;
}

.gg-form--signup div.wpforms-container-full {
	margin: 0;
}

.gg-form--signup div.wpforms-container-full .wpforms-form .wpforms-field {
	padding: 0;
}

.gg-form--signup div.wpforms-container-full .wpforms-form .wpforms-field input[type="email"] {
	max-width: none;
	text-align: center;
}

.gg-form--signup div.wpforms-container-full .wpforms-form .wpforms-submit-container {
	margin-top: .6rem;
	padding: 0;
}

.gg-form--signup div.wpforms-container-full .wpforms-form button[type="submit"] {
	width: 100%;
	padding-inline: 1.75rem;
	font-weight: 700;
}

@media (min-width: 600px) {
	.gg-form--signup div.wpforms-container-full .wpforms-form {
		display: flex;
		align-items: flex-start;
		gap: .5rem;
	}

	.gg-form--signup div.wpforms-container-full .wpforms-form .wpforms-field-container {
		flex: 1;
		min-width: 0;
	}

	.gg-form--signup div.wpforms-container-full .wpforms-form .wpforms-field input[type="email"] {
		text-align: start;
	}

	.gg-form--signup div.wpforms-container-full .wpforms-form .wpforms-submit-container {
		margin-top: 0;
	}

	.gg-form--signup div.wpforms-container-full .wpforms-form button[type="submit"] {
		width: auto;
	}
}

/* Thank-you messages in parchment and gold instead of WPForms' green. */
.gg-form div.wpforms-container-full .wpforms-confirmation-container-full,
.gg-form .wpforms-confirmation-container-full {
	background: var(--wp--preset--color--accent-5, #efece5);
	border: 1px solid var(--wp--preset--color--accent-1, #b8860b);
	border-radius: 6px;
	color: var(--wp--preset--color--contrast, #1b1a17);
	text-align: center;
}

/* Get involved: three open columns, no boxes; one column on phones. */
.gg-involve {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
}

.wp-block-group.gg-involve > .gg-involve-item {
	margin: 0;
	gap: .6rem;
}

.gg-involve-item h3,
.gg-involve-item p {
	margin: 0;
}

.gg-involve-item p {
	max-width: 22rem;
}

/* Columns stretch to the tallest; the button sits at the bottom so all three line up. */
.wp-block-group.gg-involve > .gg-involve-item {
	height: 100%;
}

.gg-involve-item > .wp-block-buttons {
	margin-top: auto;
	padding-top: .4rem;
}

@media (min-width: 48rem) {
	.gg-involve {
		grid-template-columns: repeat(3, 1fr);
	}

	.wp-block-group.gg-involve > .gg-involve-item + .gg-involve-item {
		border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1, #b8860b) 55%, transparent);
	}
}

/* Guild ranks: the standing card, the ladder and the ways to earn. */
.gg-rank-card {
	margin-block: var(--wp--preset--spacing--40);
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wp--preset--color--accent-1, #b8860b);
	border-radius: 6px;
	background: var(--wp--preset--color--accent-5, #efece5);
}

.gg-rank-card p {
	margin: 0;
}

.gg-rank-card__label {
	color: var(--wp--preset--color--accent-4, #5f5a50);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.gg-rank-card__title {
	margin-top: .2rem !important;
	color: var(--wp--preset--color--accent-2, #7a5c14);
	font-family: var(--wp--preset--font-family--new-rocker), serif;
	font-size: clamp(1.75rem, 5vw, 2.25rem);
	line-height: 1.1;
}

.gg-rank-card__line {
	margin-top: .35rem !important;
}

.gg-rank-card--guest .wp-element-button {
	margin-top: .75rem;
}

.gg-rank-card__bar {
	height: .5rem;
	margin-top: .75rem;
	overflow: hidden;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-3, #d6d2c6);
}

.gg-rank-card__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--wp--preset--color--accent-1, #b8860b);
}

.gg-ranks__ladder,
.gg-ranks__ways {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1, #b8860b) 55%, transparent);
}

.gg-ranks__ladder li,
.gg-ranks__ways li {
	display: grid;
	gap: .15rem 1rem;
	padding-block: .9rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1, #b8860b) 55%, transparent);
}

.gg-ranks__ladder li {
	grid-template-columns: 1fr auto;
}

.gg-ranks__name {
	color: var(--wp--preset--color--accent-2, #7a5c14);
	font-family: var(--wp--preset--font-family--new-rocker), serif;
	font-size: 1.4rem;
	line-height: 1.2;
}

.gg-ranks__needed {
	align-self: center;
	color: var(--wp--preset--color--accent-4, #5f5a50);
	font-size: var(--wp--preset--font-size--small);
	white-space: nowrap;
}

.gg-ranks__about {
	grid-column: 1 / -1;
}

.gg-ranks__ways li {
	grid-template-columns: 3rem 1fr;
	align-items: baseline;
}

.gg-ranks__points {
	color: var(--wp--preset--color--accent-1, #b8860b);
	font-family: var(--wp--preset--font-family--new-rocker), serif;
	font-size: 1.5rem;
	line-height: 1;
	text-align: end;
}

/* Event check-in: one big field and a button, thumb-sized. */
.gg-checkin__message {
	padding: .75rem 1rem;
	border-left: 3px solid var(--wp--preset--color--accent-1, #b8860b);
	background: var(--wp--preset--color--accent-5, #efece5);
}

.gg-checkin__message--error {
	border-left-color: #9b3b3b;
}

.gg-checkin__label {
	display: block;
	margin-bottom: .35rem;
	font-weight: 700;
}

.gg-checkin__row {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.gg-checkin__row input {
	flex: 1 1 12rem;
	min-height: 48px;
	padding: 0 .9rem;
	border: 1px solid var(--wp--preset--color--accent-1, #b8860b);
	border-radius: 6px;
	background: var(--wp--preset--color--accent-5, #efece5);
	color: var(--wp--preset--color--contrast, #1b1a17);
	font-size: 1.15rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.gg-checkin__row .wp-element-button {
	min-height: 48px;
}