/**
 * Granary Site: styles for the markup this plugin prints (shortcodes), which Bricks
 * classes cannot reach. Colours and sizes use the Bricks design tokens (--gb--*).
 * Breakpoints match Bricks: tablet portrait 1024px, mobile landscape 767px.
 */

/* [granary_menu] (inc/granary-menu.php): sections flow in two columns from tablet up,
   never splitting a section; dishes follow the price-list style (Montaga name, dotted
   leader, price, Montserrat description). Small dietary tags and prices use olive-dark
   for contrast (olive is 4.15:1 on white, below AA for text under 24px). */
.granary-menu {
	column-count: 2;
	column-gap: 5rem;
}
.granary-menu__section {
	break-inside: avoid;
	padding-bottom: 3.5rem;
}
.granary-menu__title {
	margin: 0 0 0.375rem;
	font-family: Montaga, serif;
	font-weight: 400;
	font-size: 1.875rem;
	line-height: 1.2;
	color: var(--gb--olive);
}
.granary-menu__note {
	margin: 0 0 0.375rem;
	font-size: var(--gb--text-s);
	line-height: 1.6;
	font-style: italic;
	color: var(--gb--charcoal);
}
.granary-menu__items {
	list-style: none;
	margin: 1.125rem 0 0;
	padding: 0;
}
.granary-menu__item {
	margin: 0 0 1rem;
	padding: 0;
}
.granary-menu__row {
	display: flex;
	align-items: baseline;
	gap: 0.625rem;
}
.granary-menu__name {
	font-family: Montaga, serif;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--gb--charcoal);
}
.granary-menu__diet {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--gb--olive-dark);
	white-space: nowrap;
}
.granary-menu__diet abbr {
	text-decoration: none;
	border: 0;
	cursor: help;
}
.granary-menu__leader {
	flex: 1 1 auto;
	min-width: 1.5rem;
	border-bottom: 2px dotted rgba(118, 129, 92, 0.6);
	transform: translateY(-4px);
}
.granary-menu__price {
	font-family: Montaga, serif;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--gb--olive-dark);
	white-space: nowrap;
}
.granary-menu__desc {
	margin: 0.125rem 0 0;
	max-width: 34em;
	font-size: var(--gb--text-s);
	line-height: 1.6;
	color: var(--gb--charcoal);
}
.granary-menu__row--multi {
	flex-wrap: wrap;
	row-gap: 2px;
}
.granary-menu__row--multi .granary-menu__name {
	flex: 1 1 100%;
}
.granary-menu__row--multi .granary-menu__leader {
	display: none;
}
.granary-menu__row--multi .granary-menu__price {
	font-size: 1.0625rem;
	word-spacing: 2px;
}
@media (max-width: 1024px) {
	.granary-menu {
		column-gap: 3rem;
	}
}
@media (max-width: 767px) {
	.granary-menu {
		column-count: 1;
	}
	.granary-menu__section {
		padding-bottom: 2.5rem;
	}
	.granary-menu__title {
		font-size: 1.625rem;
	}
	.granary-menu__name,
	.granary-menu__price {
		font-size: 1.125rem;
	}
}

/* [granary_leat_form] (LEAT sign-up form, js/leat-form.js): labels stay visible above the
   entry (LEAT's date field always shows dd/mm/yyyy, so a placeholder-only field would be
   unnamed); fields are 50px tall. Desktop and tablet: First name | Email, then Birth date
   + button. Phones: one field per row, the button beside Birth date. LEAT's logo and its
   own heading are hidden (the section has its own); its thank-you message shows. Sits on
   a dark band, so the focus ring is blush. */
.granary-leat-form {
	max-width: 27.3125rem;
	min-height: 6.6875rem;
	margin: 0 auto;
	font-family: Montserrat, sans-serif;
}
.granary-leat-form form {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 3.125rem;
	gap: 7px;
	margin: 0;
}
.granary-leat-form form > div {
	position: relative;
	grid-column: 1 / -1;
}
/* reCAPTCHA's holder (no leat- id) stays out of the grid, so it adds no gap. */
.granary-leat-form form > :not([id^="leat-"]) {
	position: absolute;
}
.granary-leat-form div:has(> img),
.granary-leat-form form:has(input[name="email"]) > div:has(> div > p) {
	display: none;
}
.granary-leat-form #leat-firstname {
	grid-column: 1 / 2;
}
.granary-leat-form #leat-email {
	grid-column: 2 / 4;
}
.granary-leat-form #leat-birthdate {
	grid-column: 1 / 3;
}
.granary-leat-form form > div:has(> button[type="submit"]) {
	grid-column: 3 / 4;
}
.granary-leat-form label {
	position: absolute;
	top: 8px;
	left: 14px;
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 500;
	line-height: 1;
	color: var(--gb--charcoal);
	pointer-events: none;
}
body .granary-leat-form input[type="text"],
body .granary-leat-form input[type="email"],
body .granary-leat-form input[type="date"] {
	display: block;
	width: 100%;
	height: 3.125rem;
	margin: 0;
	padding: 21px 14px 5px;
	border: 0;
	border-radius: 0;
	background: var(--gb--stone);
	box-shadow: none;
	color: var(--gb--charcoal);
	font-family: Montserrat, sans-serif;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.5rem;
	-webkit-appearance: none;
	appearance: none;
}
body .granary-leat-form input:focus {
	outline: 2px solid var(--gb--blush);
	outline-offset: 2px;
}
/* LEAT's button says "Submit"; the word stays for screen readers, the arrow shows. */
body .granary-leat-form button[type="submit"] {
	display: block;
	width: 3.125rem;
	height: 3.125rem;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: var(--gb--charcoal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 21'%3E%3Cpath fill='%23E3E4D9' transform='matrix(0 -1 1 0 0 21)' d='M19.7906 10.1835L11.3548 18.6965V0H9.64475V18.6965L1.20901 10.1835L0 11.4036L10.4998 22L21 11.4036L19.7906 10.1835Z'/%3E%3C/svg%3E") center / 22px 21px no-repeat;
	box-shadow: none;
	color: transparent;
	text-indent: 100%;
	white-space: nowrap;
	cursor: pointer;
}
body .granary-leat-form button[type="submit"]:hover {
	background-color: var(--gb--olive);
}
body .granary-leat-form button[type="submit"]:focus-visible {
	outline: 2px solid var(--gb--blush);
	outline-offset: 2px;
}
body .granary-leat-form button[type="submit"]:disabled {
	opacity: 0.6;
	cursor: progress;
}
.granary-leat-form p {
	margin: 0;
	color: var(--gb--white);
	font-size: 0.9375rem;
	line-height: 1.5625rem;
	text-align: center;
}
/* LEAT sets its thank-you line's size inline (24pt), which only !important outranks. */
.granary-leat-form p span {
	font-size: 1.3125rem !important;
	font-weight: 700;
}
@media (max-width: 767px) {
	.granary-leat-form {
		min-height: 10.25rem;
	}
	.granary-leat-form form {
		grid-template-columns: minmax(0, 1fr) 3.125rem;
	}
	.granary-leat-form #leat-firstname,
	.granary-leat-form #leat-email {
		grid-column: 1 / -1;
	}
	.granary-leat-form #leat-birthdate {
		grid-column: 1 / 2;
	}
	.granary-leat-form form > div:has(> button[type="submit"]) {
		grid-column: 2 / 3;
	}
}

/* [granary_whats_on] (inc/granary-events.php): ticket-style listing with month buttons,
   on the green linen band (the section carries the gwo-section class). Ticket text is
   charcoal on white; the small "extra" line uses olive-dark for contrast. */
.gwo-section {
	background-image:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 3px);
}
.gwo {
	width: 100%;
	max-width: 60rem;
	margin: 0 auto;
}
.gwo-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.75rem;
	margin: 0 0 3.5rem;
}
.gwo-nav__month {
	margin: 0;
	min-width: 13.75rem;
	text-align: center;
	font-family: Montserrat, sans-serif;
	font-size: 1.875rem;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--gb--sand);
}
.gwo-nav__btn {
	padding: 6px 10px;
	border: 0;
	background: transparent;
	color: var(--gb--sand);
	font-size: 1.625rem;
	line-height: 1;
	cursor: pointer;
}
.gwo-nav__btn:hover,
.gwo-nav__btn:focus-visible {
	background: transparent;
	color: var(--gb--white);
}
.gwo-nav__btn[disabled] {
	opacity: 0.3;
	cursor: default;
}
.gwo-list {
	display: flex;
	flex-direction: column;
	gap: 2.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.gwo-ticket {
	display: grid;
	grid-template-columns: 34% 1fr 4.75rem;
	width: 88%;
	min-height: 16.25rem;
	background: var(--gb--white);
	box-shadow: 6px 10px 18px rgba(0, 0, 0, 0.45);
	transform: rotate(0.7deg);
}
.gwo-ticket--shift {
	margin-left: auto;
	transform: rotate(-0.5deg);
}
.gwo-ticket__img {
	position: relative;
	overflow: hidden;
}
.gwo-ticket__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gwo-ticket__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 2.125rem 2.25rem;
	text-align: center;
}
.gwo-ticket__body p {
	margin: 0;
}
.gwo-ticket__title {
	margin: 0;
	font-family: Montaga, serif;
	font-size: 2rem;
	font-weight: 400;
	line-height: 1.15;
	color: var(--gb--charcoal);
}
.gwo-ticket__when {
	font-family: Montserrat, sans-serif;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--gb--charcoal);
}
.gwo-ticket__desc {
	max-width: 27.5rem;
	font-family: Montserrat, sans-serif;
	font-size: var(--gb--text-s);
	line-height: 1.65;
	color: var(--gb--charcoal);
}
.gwo-ticket__extra {
	font-family: Montserrat, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--gb--olive-dark);
}
.gwo-ticket__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 1.125rem 0;
	border-left: 1px dotted var(--gb--charcoal);
	color: var(--gb--charcoal);
	text-decoration: none;
}
.gwo-ticket__cta span:first-child {
	writing-mode: vertical-rl;
	font-family: Montserrat, sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	white-space: nowrap;
}
.gwo-ticket__cta:hover,
.gwo-ticket__cta:focus-visible {
	color: var(--gb--olive-dark);
}
.gwo-ticket__cta:focus-visible {
	outline: 2px solid var(--gb--charcoal);
	outline-offset: -4px;
}
.gwo-empty {
	margin: 0;
	text-align: center;
	font-family: Montserrat, sans-serif;
	font-size: 1.0625rem;
	color: var(--gb--sand);
}
.gwo-empty a {
	color: var(--gb--sand);
	text-decoration: underline;
}
@media (max-width: 767px) {
	.gwo-nav {
		gap: 0.75rem;
		margin-bottom: 2.25rem;
	}
	.gwo-nav__month {
		min-width: 0;
		font-size: 1.375rem;
	}
	.gwo-list {
		gap: 1.75rem;
	}
	.gwo-ticket,
	.gwo-ticket--shift {
		grid-template-columns: 1fr;
		width: 100%;
		margin-left: 0;
		transform: none;
	}
	.gwo-ticket__img {
		aspect-ratio: 16 / 10;
	}
	.gwo-ticket__body {
		padding: 1.625rem 1.375rem 1.125rem;
	}
	.gwo-ticket__title {
		font-size: 1.625rem;
	}
	.gwo-ticket__cta {
		margin: 0 1.375rem 1.375rem;
		padding-top: 1rem;
		border-left: 0;
		border-top: 1px dotted var(--gb--charcoal);
	}
	.gwo-ticket__cta span:first-child {
		writing-mode: horizontal-tb;
	}
}
@media (prefers-reduced-motion: reduce) {
	.gwo-ticket,
	.gwo-ticket--shift {
		transform: none;
	}
}