/*
Theme Name: Golden Goblet Guild: Faire
Description: The Golden Goblet Guild faire site (houses, passes, Town Hall). Child theme of Twenty Twenty-Five. Parchment and ink palette, gold accents, New Rocker display type.
Author: Golden Goblet Guild
Template: twentytwentyfive
Version: 0.2.1
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-child
*/

/*
 * Everything visual lives in theme.json. This file only carries the few rules
 * theme.json cannot express. It is also loaded in the block editor.
 */

/* Footer menu: Privacy · Contact · Terms. The margin mirrors the nav's flex gap. */
.gg-footer-nav .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: "\00B7";
	margin-inline-end: var(--wp--style--block-gap, 0.5em);
	color: var(--wp--preset--color--accent-4);
}

/* Manrope: body is 400 (theme.json), emphasis is a real 700 from the variable font. */
strong,
b {
	font-weight: 700;
}

/* New Rocker ships a single weight (400). Never let it faux-bold. */
.has-new-rocker-font-family,
.has-new-rocker-font-family strong,
.has-new-rocker-font-family b,
.wp-block-site-title strong,
.wp-block-site-title b,
h1 strong,
h1 b,
h2 strong,
h2 b,
h3 strong,
h3 b,
h4 strong,
h4 b,
h5 strong,
h5 b,
h6 strong,
h6 b {
	font-weight: 400;
}

/*
 * Brand logo (core/site-logo). Core sizes the default logo at 120px via
 * .wp-block-site-logo.is-default-size img; these rules match that specificity
 * and load later, so the wide mark scales with the viewport instead.
 */
.wp-block-site-logo.gg-header-logo img {
	width: clamp(150px, 30vw, 230px);
	height: auto;
	display: block;
}

/* Front-page hero logo. */
.wp-block-site-logo.gg-hero-logo img {
	width: min(100%, 520px);
	height: auto;
}

/* Hero divider between the date and "Free Entry": a short gold rule. */
.wp-block-separator.gg-hero-divider {
	width: min(12rem, 40%);
	height: 2px;
	margin-inline: auto;
	border: 0;
	opacity: 1;
}

/*
 * Hero prices: what a wristband costs, said where people look first.
 *
 * Gold ink on the parchment misses 4.5:1, so the band is drawn with a gold rule
 * and the figures are left in the body colour. The prices never wrap mid-phrase.
 */
.gg-hero-prices {
	max-width: 36rem;
	margin-inline: auto;
	padding: .55rem .9rem;
	border-top: 2px solid color-mix(in srgb, var(--wp--preset--color--accent-1, #b8860b) 55%, transparent);
	border-bottom: 2px solid color-mix(in srgb, var(--wp--preset--color--accent-1, #b8860b) 55%, transparent);
}
.gg-hero-prices strong {
	white-space: nowrap;
}

/*
 * Header rhythm.
 *
 * One flex row: the logo, the nav, then WooCommerce's hooked account and cart
 * icons. Left alone they crowd each other, the block gap the header group asked
 * for named a spacing preset this theme does not define, and the two icons read
 * as separate items rather than one pair. The row is tightened so the icons sit
 * together, with a gold rule marking them off from the links.
 */
.gg-header-tools {
	gap: .4rem;
	align-items: center;
}

/* Breathing room between the links themselves. */
.gg-header-tools .wp-block-navigation {
	--wp--style--block-gap: clamp(1rem, 2vw, 1.75rem);
	margin-right: clamp(.75rem, 2vw, 1.5rem);
}

.gg-header-tools .wp-block-navigation__container {
	gap: clamp(1rem, 2vw, 1.75rem);
}

/* The account and cart icons: one pair, ruled off from the links. */
.gg-header-tools .wp-block-woocommerce-customer-account,
.gg-header-tools .wp-block-woocommerce-mini-cart {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.gg-header-tools .wp-block-woocommerce-customer-account {
	padding-left: clamp(.75rem, 2vw, 1.25rem);
	border-left: 2px solid color-mix(in srgb, var(--wp--preset--color--accent-1, #b8860b) 55%, transparent);
}

.gg-header-tools .wc-block-customer-account__link,
.gg-header-tools .wc-block-mini-cart__button {
	display: flex;
	align-items: center;
	gap: .3rem;
	padding: .35rem .4rem;
}

.gg-header-tools .wc-block-customer-account__account-icon svg,
.gg-header-tools .wc-block-mini-cart__icon {
	width: 24px;
	height: 24px;
}

/* Keep the cart count off the icon itself. */
.gg-header-tools .wc-block-mini-cart__badge {
	margin-left: .3rem;
	padding: 0 .45em;
	border-radius: 999px;
	background: var(--wp--preset--color--accent-1, #b8860b);
	color: var(--wp--preset--color--contrast, #1b1a17);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.6;
}

/* On phones the nav collapses to a hamburger; the icons stay beside it. */
@media (max-width: 599px) {
	.gg-header-tools .wp-block-navigation {
		margin-right: .5rem;
	}

	.gg-header-tools .wp-block-woocommerce-customer-account {
		padding-left: .6rem;
	}
}

/*
 * Wristband codes on an order page.
 *
 * Each band on a Player or Family Pass gets a code the buyer shows at their
 * house camp, so the table has to stay readable on a phone at the field.
 */
.gg-bands {
	width: 100%;
	margin: .5rem 0 1.5rem;
	border-collapse: collapse;
}

.gg-bands th,
.gg-bands td {
	padding: .6rem .5rem;
	border-bottom: 1px solid var(--wp--preset--color--accent-3, #d6d2c6);
	text-align: left;
}

.gg-bands th {
	font-family: var(--wp--preset--font-family--new-rocker, Georgia, serif);
	font-weight: 400;
}

.gg-bands__code {
	padding: .25rem .5rem;
	border: 1px solid var(--wp--preset--color--accent-1, #b8860b);
	border-radius: .35rem;
	background: var(--wp--preset--color--accent-5, #efece5);
	font-family: var(--wp--preset--font-family--fira-code, monospace);
	font-size: 1rem;
	letter-spacing: .06em;
	white-space: nowrap;
}

.gg-bands__intro {
	font-size: .9375rem;
}

/*
 * Donation notice: the Guild is not yet a 501(c)(3), so gifts are not
 * tax-deductible. Printed by gg-faire on the Donate page, above the pay
 * button and on the order-received page. A gold rule, body-colour text.
 */
.gg-donation-notice {
	max-width: 40rem;
	margin: 1.25rem auto;
	padding: .85rem 1rem;
	border-left: 4px solid var(--wp--preset--color--accent-1, #b8860b);
	background: var(--wp--preset--color--accent-5, #efece5);
	color: var(--wp--preset--color--contrast, #1b1a17);
}

.gg-donation-notice p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
}