/*
  Styles for the plugin's blocks (Upcoming fixtures, Club contact form).
  They use the Newport IBC theme's colours when it is active, with fallbacks so the
  blocks still look tidy with another theme.
*/

.nibc-fixtures,
.nibc-contact {
	--nibc-b-amber: var(--wp--preset--color--amber, #ffad00);
	--nibc-b-amber-soft: var(--wp--preset--color--amber-soft, #fff4d6);
	--nibc-b-ink: var(--wp--preset--color--ink, #121212);
	--nibc-b-rink: var(--wp--preset--color--rink, #275994);
	--nibc-b-mist: var(--wp--preset--color--mist, #edf2f8);
	--nibc-b-slate: var(--wp--preset--color--slate, #4b5563);
	--nibc-b-border: rgba(18, 18, 18, 0.14);
}

/* ---------- Upcoming fixtures ---------- */
.nibc-fixtures .nibc-fixtures-month {
	margin: 2em 0 0.75em;
	font-size: 1.25rem;
}

.nibc-fixtures > .nibc-fixtures-month:first-child {
	margin-top: 0;
}

.nibc-fixtures-list {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nibc-fixture {
	display: grid;
	grid-template-columns: 72px 1fr auto;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid var(--nibc-b-border);
	border-radius: 12px;
	background: #fff;
}

.nibc-fixture-date {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 4px;
	border-radius: 10px;
	background: var(--nibc-b-ink);
	color: #fff;
	line-height: 1.1;
	text-align: center;
}

.nibc-fixture-day {
	color: var(--nibc-b-amber);
	font-size: 0.8125rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.nibc-fixture-num {
	font-size: 1.625rem;
	font-weight: 800;
}

.nibc-fixture-time {
	font-size: 0.8125rem;
	font-variant-numeric: tabular-nums;
}

.nibc-fixture-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.nibc-fixture-team {
	color: var(--nibc-b-rink);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.nibc-fixture-title {
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.3;
}

.nibc-fixture-meta,
.nibc-fixture-notes {
	color: var(--nibc-b-slate);
	font-size: 0.9375rem;
}

.nibc-fixture-venue {
	padding: 6px 14px;
	border: 2px solid var(--nibc-b-ink);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 800;
	white-space: nowrap;
}

.nibc-fixture-venue.is-home {
	background: var(--nibc-b-amber);
	color: var(--nibc-b-ink);
}

.nibc-fixture-venue.is-away {
	background: #fff;
	color: var(--nibc-b-ink);
}

.nibc-fixture-venue.is-neutral {
	background: var(--nibc-b-mist);
	color: var(--nibc-b-ink);
}

@media (max-width: 540px) {
	.nibc-fixture {
		grid-template-columns: 64px 1fr;
	}

	.nibc-fixture-venue {
		grid-column: 2;
		justify-self: start;
	}
}

.nibc-fixtures-empty {
	padding: 20px;
	border-radius: 12px;
	background: var(--nibc-b-mist);
}

/* ---------- Contact form ---------- */
.nibc-contact-form {
	display: grid;
	gap: 20px;
}

.nibc-contact-form p {
	margin: 0;
}

.nibc-contact-required,
.nibc-help,
.nibc-privacy {
	color: var(--nibc-b-slate);
	font-size: 0.9375rem;
}

.nibc-field {
	display: grid;
	gap: 6px;
}

.nibc-field label {
	font-weight: 700;
}

.nibc-field input,
.nibc-field select,
.nibc-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 14px;
	border: 2px solid rgba(18, 18, 18, 0.35);
	border-radius: 10px;
	background: #fff;
	color: var(--nibc-b-ink);
	font: inherit;
}

.nibc-field textarea {
	min-height: 160px;
	resize: vertical;
}

.nibc-field input:focus,
.nibc-field select:focus,
.nibc-field textarea:focus {
	border-color: var(--nibc-b-rink);
	outline: 3px solid var(--nibc-b-rink);
	outline-offset: 1px;
}

/* Honeypot: hidden from people and screen readers, visible to simple bots. */
.nibc-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nibc-submit .wp-block-button__link {
	cursor: pointer;
}

.nibc-contact-status {
	margin-bottom: 20px;
	padding: 16px 20px;
	border-radius: 12px;
	border-left: 6px solid;
	font-weight: 600;
}

.nibc-contact-status p {
	margin: 0;
}

.nibc-contact-status.is-success {
	border-color: #1e7a3c;
	background: #e7f5ec;
	color: #0f3d1e;
}

.nibc-contact-status.is-error {
	border-color: #b3261e;
	background: #fdecea;
	color: #5c1410;
}