/* Tarcutta Collective - child overrides
 * Polish layered on top of theme.json. Keep this file lean.
 */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5.5rem;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────────────────────────────────
 * Job application modal
 * ───────────────────────────────────────────────────────────────────────── */

.tc-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	align-items: flex-start;
	justify-content: center;
	padding: 2rem 1rem;
	overflow-y: auto;
}

.tc-modal.is-open {
	display: flex;
}

.tc-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	cursor: pointer;
}

.tc-modal__panel {
	position: relative;
	background: var(--wp--preset--color--white);
	border-radius: 6px;
	width: 100%;
	max-width: 640px;
	padding: 3rem 2.5rem 2.5rem;
	margin: auto;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}

.tc-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0.5rem;
	color: var(--wp--preset--color--charcoal);
	line-height: 0;
	border-radius: 50%;
	transition: color 160ms ease, background 160ms ease;
}

.tc-modal__close:hover,
.tc-modal__close:focus {
	color: var(--wp--preset--color--terracotta);
	background: var(--wp--preset--color--bone);
	outline: none;
}

.tc-modal__title {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.75rem;
	font-weight: 500;
	color: var(--wp--preset--color--charcoal);
	margin: 0 0 1.75rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

body.tc-modal-open {
	overflow: hidden;
}

/* Fluent Forms inside the modal — brand styling overrides */
.tc-modal__body .fluentform input[type="text"],
.tc-modal__body .fluentform input[type="email"],
.tc-modal__body .fluentform input[type="tel"],
.tc-modal__body .fluentform input[type="date"],
.tc-modal__body .fluentform input[type="number"],
.tc-modal__body .fluentform input[type="url"],
.tc-modal__body .fluentform textarea,
.tc-modal__body .fluentform select {
	border: 1px solid var(--wp--preset--color--stone) !important;
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--charcoal) !important;
	border-radius: 2px !important;
	padding: 0.75rem 1rem !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 1rem !important;
	min-height: 44px;
	width: 100%;
	box-sizing: border-box;
}

.tc-modal__body .fluentform textarea {
	min-height: 6rem;
}

.tc-modal__body .fluentform input:focus,
.tc-modal__body .fluentform textarea:focus,
.tc-modal__body .fluentform select:focus {
	outline: 2px solid var(--wp--preset--color--terracotta) !important;
	outline-offset: 1px !important;
}

.tc-modal__body .fluentform label,
.tc-modal__body .fluentform .ff-el-input--label label {
	color: var(--wp--preset--color--terracotta) !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	margin-bottom: 0.4rem !important;
	display: block !important;
}

/* Radio buttons (Right to work in Australia) */
.tc-modal__body .fluentform .ff-el-form-check label {
	color: var(--wp--preset--color--charcoal) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
}

/* Submit + file-upload buttons — brand terracotta */
.tc-modal__body .fluentform button[type="submit"],
.tc-modal__body .fluentform .ff_upload_btn,
.tc-modal__body .fluentform .ff-uploader-holder .ff_upload_btn,
.tc-modal__body .fluentform .ff-btn-secondary,
.tc-modal__body .fluentform .ff-upload-preview-area .ff_btn_close {
	background: var(--wp--preset--color--terracotta) !important;
	color: var(--wp--preset--color--cream) !important;
	border: 0 !important;
	padding: 0.875rem 1.75rem !important;
	font-family: var(--wp--preset--font-family--sans) !important;
	font-size: 0.9375rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
	border-radius: 3px !important;
	cursor: pointer !important;
	transition: background 160ms ease;
}

.tc-modal__body .fluentform button[type="submit"]:hover,
.tc-modal__body .fluentform .ff_upload_btn:hover,
.tc-modal__body .fluentform .ff-btn-secondary:hover {
	background: var(--wp--preset--color--terracotta-dark) !important;
}

/* File upload drop area */
.tc-modal__body .fluentform .ff-uploader-holder {
	border: 1px dashed var(--wp--preset--color--stone) !important;
	background: var(--wp--preset--color--bone) !important;
	padding: 1.5rem !important;
	text-align: center !important;
	border-radius: 3px !important;
}

/* Confirmation message styling — after the form is replaced */
.tc-modal__body .ff-message-success,
.tc-modal__body .ff_form_success {
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.125rem;
	line-height: 1.6;
	padding: 1rem 0;
}

/* Mobile */
@media (max-width: 600px) {
	.tc-modal {
		padding: 1rem 0.5rem;
	}
	.tc-modal__panel {
		padding: 2.5rem 1.25rem 1.5rem;
		max-width: 95vw;
	}
	.tc-modal__title {
		font-size: 1.375rem;
	}
	.tc-modal__body .fluentform button[type="submit"] {
		width: 100% !important;
	}
}

/* Hero text — subtle soft shadows for legibility against the warm image.
 * Studio-lighting feel rather than hard graphic shadows. */
#top h1 {
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

#top .wp-block-cover__inner-container p.has-sans-font-family {
	/* eyebrow — Inter sans-serif, smaller drop */
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

#top .wp-block-cover__inner-container p:not(.has-sans-font-family):not(.wp-element-button) {
	/* subhead — default body font, mid drop */
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* Sticky header */
.tarcutta-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--wp--preset--color--white) !important;
}

.tarcutta-header .wp-block-navigation a:where(:not(.wp-element-button)) {
	text-decoration: none;
	transition: color 160ms ease;
}

.tarcutta-header .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--terracotta-dark);
}

.tarcutta-wordmark a:hover {
	color: var(--wp--preset--color--terracotta-dark) !important;
}

/* Logo */
.tarcutta-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.tarcutta-logo {
	display: block;
	height: 44px;
	width: auto;
	max-width: 100%;
}

@media (max-width: 600px) {
	.tarcutta-logo {
		height: 32px;
	}
}

/* Flush layout: zero block-gap between header → main → footer, and between sections inside main.
 * Each section's own padding carries the visual rhythm. */
.wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}

main.wp-block-group > * {
	margin-block-start: 0 !important;
}

/* Section rhythm - default for venues / jobs */
.tarcutta-section {
	padding-block: clamp(60px, 8vw, 100px);
}

/* Per-section padding overrides */
#about {
	padding-block: clamp(200px, calc(15vw + 100px), 300px) !important;
}

#planting {
	padding-block: clamp(200px, calc(15vw + 100px), 300px) !important;
}

/* Planting: push the image down so its top aligns with the heading (skipping past the eyebrow line).
 * Only on desktop layout - when media-text stacks on mobile the image is full-width below the text. */
@media (min-width: 782px) {
	#planting .wp-block-media-text__media {
		margin-top: calc(14px * 1.6 + var(--wp--preset--spacing--sm));
	}

	/* Narrow only the TEXT in the left column to match the About heading column width (~45% of 1080 = 486px).
	 * Switch the left grid track from `auto` to `1fr` so the track holds its width regardless of content -
	 * keeps the image (right track) at its original 52% position. The content sits left-aligned inside the
	 * wider track with whitespace to its right, before the image. */
	#planting .wp-block-media-text {
		grid-template-columns: 1fr 52% !important;
	}

	#planting .wp-block-media-text__content > * {
		max-width: 486px;
	}
}

/* All paragraphs to 14px per design directive */
p {
	font-size: 14px !important;
}

/* Wordmark exception - refined serif at 1.1rem, beats the global 14px rule */
.tarcutta-wordmark {
	font-size: 1.1rem !important;
}

/* Job cards: centred content */
.tarcutta-job-card {
	text-align: center;
}

.tarcutta-job-card .wp-block-buttons {
	justify-content: center;
}

.tarcutta-eyebrow {
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
	margin-bottom: var(--wp--preset--spacing--sm);
}

/* Venue cards - equal heights, image top, content fills */
.tarcutta-venues-grid {
	align-items: stretch !important;
}

.tarcutta-venues-grid > .wp-block-column,
.tarcutta-venue-card {
	display: flex !important;
	flex-direction: column;
}

.tarcutta-venue-card > .wp-block-group {
	flex: 1;
}

.tarcutta-venue-card {
	transition: transform 280ms ease;
}

.tarcutta-venue-card:hover {
	transform: translateY(-4px);
}

.tarcutta-venue-card .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.tarcutta-venue-card .tarcutta-venue-accent {
	display: inline-block;
	width: 2.5rem;
	height: 2px;
	background: currentColor;
	margin-bottom: 0;
}

/* Venue card header (divider → name → address) reads as one tight unit;
 * description sits below with clear breathing room. */
.tarcutta-venue-card > .wp-block-group > :first-child {
	/* divider */
	margin-top: 0 !important;
	margin-bottom: 0.25rem !important;
}

.tarcutta-venue-card > .wp-block-group > :nth-child(2) {
	/* venue name */
	margin-top: 0.25rem !important;
	margin-bottom: 0.25rem !important;
}

.tarcutta-venue-card > .wp-block-group > :nth-child(3) {
	/* address eyebrow */
	margin-top: 0.25rem !important;
	margin-bottom: 0 !important;
}

.tarcutta-venue-card > .wp-block-group > :nth-child(4) {
	/* description */
	margin-top: 1rem !important;
}

/* Job cards - equal heights, Apply pinned to bottom of every card
 *
 * Chain: .tarcutta-jobs-grid stretches columns to equal row height (1).
 *        Each column is a flex column (2) whose sole child is the card.
 *        The card claims height: 100% of the column (3) and is itself a
 *        flex column (4) so margin-top: auto on .wp-block-buttons (5)
 *        pushes the Apply button to the very bottom regardless of how
 *        much (or little) description sits above. */
.tarcutta-jobs-grid {
	align-items: stretch !important;       /* 1 */
}

.tarcutta-jobs-grid > .wp-block-column {
	display: flex !important;              /* 2 */
	flex-direction: column !important;
	align-self: stretch !important;
}

.tarcutta-jobs-grid > .wp-block-column > .tarcutta-job-card {
	border: 1px solid var(--wp--preset--color--cream);
	border-radius: 4px;
	background: var(--wp--preset--color--white);
	height: 100% !important;               /* 3 */
	display: flex !important;              /* 4 */
	flex-direction: column !important;
	padding-bottom: 50px !important;       /* 6 - fixed gap below button */
}

.tarcutta-job-card .wp-block-buttons {
	margin-top: auto !important;           /* 5 - push button block to bottom of flex card */
	padding-top: 100px !important;         /* 7 - minimum gap above the button */
	justify-content: center;
}

/* Apply buttons - fixed identical dimensions across all three cards.
 * Higher specificity beats the global wp-element-button styles from theme.json. */
.tarcutta-job-card .wp-block-button__link.wp-block-button__link {
	box-sizing: border-box;
	width: 200px;
	padding: 14px 28px;
	text-align: center;
	display: inline-block;
}

/* Contact form */
.tarcutta-form label {
	display: block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
	margin-bottom: 0.4rem;
}

.tarcutta-form input,
.tarcutta-form textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--stone);
	background: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1rem;
	color: var(--wp--preset--color--charcoal);
	border-radius: 2px;
}

.tarcutta-form input:focus,
.tarcutta-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--terracotta);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--terracotta);
}

.tarcutta-form .tarcutta-form-field {
	margin-bottom: var(--wp--preset--spacing--md);
}

.tarcutta-form button {
	background: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--cream);
	border: 0;
	padding: 0.875rem 1.75rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 3px;
	transition: background 160ms ease;
	margin-top: var(--wp--preset--spacing--sm);
}

.tarcutta-form button:hover {
	background: var(--wp--preset--color--terracotta-dark);
	color: var(--wp--preset--color--cream);
}

/* Venues: 4-wide on desktop, 2x2 on tablet, stacked on mobile */
@media (min-width: 600px) and (max-width: 991px) {
	.tarcutta-venues-grid {
		flex-wrap: wrap !important;
	}
	.tarcutta-venues-grid > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--md)) !important;
	}
}

/* Jobs: 3-wide on desktop, stacked at and below 781px */
@media (max-width: 781px) {
	.tarcutta-jobs-grid {
		flex-direction: column !important;
		gap: var(--wp--preset--spacing--md);
	}
	.tarcutta-jobs-grid > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
}

/* Tighten media-text on small screens */
@media (max-width: 781px) {
	.wp-block-media-text.is-stacked-on-mobile {
		grid-template-columns: 100% !important;
	}
}

/* Stack about / contact / footer columns at tablet+ to prevent cramped 2-col headings */
@media (max-width: 781px) {
	#about > .wp-block-columns,
	#contact > .wp-block-columns,
	.tarcutta-footer > .wp-block-columns {
		flex-direction: column !important;
	}
	#about > .wp-block-columns > .wp-block-column,
	#contact > .wp-block-columns > .wp-block-column,
	.tarcutta-footer > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
		width: 100% !important;
	}
	#about > .wp-block-columns,
	#contact > .wp-block-columns {
		gap: var(--wp--preset--spacing--lg);
	}
}

/* Apply buttons go full-width inside the card on narrow mobile (<480px) */
@media (max-width: 480px) {
	.tarcutta-job-card .wp-block-buttons {
		width: 100%;
	}
	.tarcutta-job-card .wp-block-buttons .wp-block-button {
		width: 100%;
	}
	.tarcutta-job-card .wp-block-button__link.wp-block-button__link {
		display: block;
		width: 100%;
	}
}

/* Mobile */
@media (max-width: 600px) {
	html {
		scroll-padding-top: 4rem;
	}
	.tarcutta-header .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--wp--preset--color--white);
	}
	/* Contact Send: full-width on mobile, still confident */
	.tarcutta-form button {
		width: 100%;
		padding-block: 1rem;
	}
}