/**
 * NetWise Bookings — front-end styles.
 *
 * See PRD section 9. Two rules govern everything in this file:
 *
 * 1. Everything lives under a `.nwb` root and its own `nwb-` prefixed
 *    classes. No bare element selectors, no global resets — a
 *    third-party theme's CSS must never leak in, and this file must
 *    never leak out.
 *
 * 2. Colours resolve through three layers: an admin-configured colour
 *    (added inline by a later milestone, not this one) falls back to
 *    the NetWise theme's own --nw-* tokens, which fall back to a
 *    neutral default. That means this file looks correct on all eight
 *    NetWise colour schemes, and still presentable with no NetWise
 *    theme at all — it never reads a theme option or calls a theme
 *    function to find out which situation it's in.
 *
 * Sizing responds to the container the calendar is placed in
 * (`@container`), not the browser viewport (`@media`). A calendar
 * dropped into a narrow sidebar and one dropped full-width need
 * different layouts regardless of how wide the browser window is —
 * see the PRD's note on why this is the single most valuable decision
 * for working on themes NetWise did not build.
 */

.nwb {
	--nwb-accent:       var(--nw-brass, #8a6d3b);
	--nwb-accent-dark:  var(--nw-brass-dark, #6b5228);
	--nwb-ink:          var(--nw-charcoal, #22262b);
	--nwb-ink-muted:    var(--nw-slate, #5b6570);
	--nwb-line:         var(--nw-navy-line, #d5d8dc);
	--nwb-surface:      var(--nw-parchment, #f7f5f0);
	--nwb-surface-alt:  #ffffff;
	--nwb-confirmed:    var(--nw-moss, #46614b);
	--nwb-pending:      var(--nwb-accent);

	container-type: inline-size;
	color: var(--nwb-ink);
	font-family: inherit;
}

.nwb-calendar {
	display: block;
}

/* --- Navigation ---------------------------------------------------- */

.nwb-calendar__nav {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	margin-bottom: 1em;
}

.nwb-calendar__heading {
	margin: 0;
	font-size: 1.25em;
	text-align: center;
	flex: 1 1 auto;
	order: 2;
}

.nwb-calendar__nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.5em 0.75em;
	min-height: 44px;
	min-width: 44px;
	text-decoration: underline;
	color: var(--nwb-accent-dark);
	border-radius: 3px;
}

.nwb-calendar__nav-link:focus-visible {
	outline: 3px solid var(--nwb-accent-dark);
	outline-offset: 2px;
}

.nwb-calendar__nav-link--prev {
	order: 1;
}

.nwb-calendar__nav-link--next {
	order: 3;
}

/* --- Grid ------------------------------------------------------------
   A plain table: <caption>, scoped <th>, and every date a real,
   focusable link. No JavaScript is required for this to be fully
   readable and navigable — see the class-level notes in
   NWB_Calendar_View. */

.nwb-calendar__grid {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5em;
}

.nwb-calendar__grid th,
.nwb-calendar__grid td {
	border: 1px solid var(--nwb-line);
	text-align: center;
	padding: 0.25em;
}

.nwb-calendar__grid th {
	background: var(--nwb-surface);
	font-weight: 600;
	padding-block: 0.5em;
}

.nwb-calendar__day {
	background: var(--nwb-surface-alt);
	vertical-align: top;
}

.nwb-calendar__day--outside {
	background: transparent;
	border-color: transparent;
}

.nwb-calendar__day a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.5em;
	color: var(--nwb-ink);
	text-decoration: none;
}

.nwb-calendar__day a:focus-visible {
	outline: 3px solid var(--nwb-accent-dark);
	outline-offset: -3px;
}

/* Status is never colour alone — every state also has a dot with
   accessible text via .screen-reader-text in the markup, and the
   colour contrast on both states meets 3:1 against the cell
   background at minimum. */

.nwb-calendar__day--confirmed a::after,
.nwb-calendar__day--pending-only a::after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-top: 0.25em;
}

.nwb-calendar__day--confirmed a::after {
	background: var(--nwb-confirmed);
}

.nwb-calendar__day--pending-only a::after {
	background: var(--nwb-pending);
	border: 1px solid var(--nwb-accent-dark);
}

/* --- List --------------------------------------------------------------
   Always rendered below the grid, never behind a toggle. */

.nwb-calendar__list h3 {
	margin-top: 0;
}

.nwb-calendar__list h4 {
	margin-bottom: 0.25em;
	padding-top: 0.75em;
	border-top: 1px solid var(--nwb-line);
}

.nwb-calendar__list ul {
	margin: 0 0 0.5em;
	padding-left: 1.25em;
}

.nwb-calendar__list li {
	margin-bottom: 0.35em;
}

.nwb-calendar__error {
	padding: 1em;
	background: var(--nwb-surface);
	border: 1px solid var(--nwb-line);
	border-radius: 3px;
}

/* --- Container-responsive layout ------------------------------------ */

@container (min-width: 32em) {
	.nwb-calendar__grid th,
	.nwb-calendar__grid td {
		padding: 0.5em;
	}
}

@container (max-width: 24em) {
	.nwb-calendar__nav {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	.nwb-calendar__heading {
		order: 1;
	}

	.nwb-calendar__nav-link--prev {
		order: 2;
	}

	.nwb-calendar__nav-link--next {
		order: 3;
	}
}

/* Screen-reader-only text, matching the theme's own .screen-reader-text
   convention so it inherits correctly if the active theme already
   defines one, and still works standalone if it doesn't. */
.nwb .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* --- Request form (M6) ----------------------------------------------
   See NWB_Request_Form_View. Fields stack on their own line by
   default and move into a two-column grid once the container is wide
   enough — same container-query approach as the calendar, so the form
   looks right in a narrow sidebar and a full-width page alike. */

.nwb-request-form__heading {
	margin-top: 0;
}

.nwb-request-form__status {
	margin-bottom: 1em;
}

.nwb-request-form__status:empty {
	display: none;
}

.nwb-request-form__status--success {
	padding: 0.75em 1em;
	background: var(--nwb-surface);
	border: 1px solid var(--nwb-confirmed);
	border-radius: 3px;
}

.nwb-request-form__status--error {
	padding: 0.75em 1em;
	background: var(--nwb-surface);
	border: 1px solid var(--nwb-accent-dark);
	border-radius: 3px;
}

.nwb-request-form__manage-link {
	display: inline-block;
	margin-top: 0.5em;
	font-weight: 600;
	color: var(--nwb-accent-dark);
}

/* The honeypot: invisible to sighted users and, via aria-hidden on its
   wrapper plus tabindex="-1" on the field itself, invisible to
   assistive technology and skipped in tab order too. Off-screen
   rather than display:none — some automated form-fillers skip fields
   hidden that way, which would defeat the point. */
.nwb-request-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nwb-request-form__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 1.5em;
}

.nwb-request-form__field {
	margin: 0 0 1em;
}

.nwb-request-form__field--wide {
	grid-column: 1 / -1;
}

.nwb-request-form__field label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
}

.nwb-request-form__field input:not([type="checkbox"]):not([type="radio"]),
.nwb-request-form__field select,
.nwb-request-form__field textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.5em 0.6em;
	border: 1px solid var(--nwb-line);
	border-radius: 3px;
	font: inherit;
	color: var(--nwb-ink);
	background: var(--nwb-surface-alt);
	box-sizing: border-box;
}

.nwb-request-form__field textarea {
	min-height: 6em;
	resize: vertical;
}

.nwb-request-form__field input:focus-visible,
.nwb-request-form__field select:focus-visible,
.nwb-request-form__field textarea:focus-visible {
	outline: 3px solid var(--nwb-accent-dark);
	outline-offset: 1px;
}

/* The terms-of-hire checkbox: a normal-sized box, inline with its own
   label text rather than stretched full-width by the rule above. The
   44px tap target still exists — it is the whole <label>, text
   included, that is clickable, per the pattern this field already
   uses (see NWB_Request_Form_View::render_terms_field()). */
.nwb-request-form__field--wide label {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
	font-weight: 400;
	cursor: pointer;
}

.nwb-request-form__field--wide input[type="checkbox"] {
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	margin: 0.15em 0 0;
}

.nwb-request-form__note {
	color: var(--nwb-ink-muted);
	font-size: 0.9em;
}

.nwb-request-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6em 1.5em;
	border: 0;
	border-radius: 3px;
	background: var(--nwb-accent-dark);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.nwb-request-form__submit:hover {
	background: var(--nwb-accent);
}

.nwb-request-form__submit:focus-visible {
	outline: 3px solid var(--nwb-accent-dark);
	outline-offset: 2px;
}

.nwb-request-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

@container (min-width: 32em) {
	.nwb-request-form__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* --- Manage booking (M6) ---------------------------------------------
   See NWB_Manage_Booking_View. Reached only via a hirer's own magic
   link — deliberately plain, since a visitor lands here having just
   clicked a link in an email, not browsed to it. */

.nwb-manage-booking__notice {
	padding: 0.75em 1em;
	border-radius: 3px;
	margin-bottom: 1em;
}

.nwb-manage-booking__notice--success {
	background: var(--nwb-surface);
	border: 1px solid var(--nwb-confirmed);
}

.nwb-manage-booking__notice--error {
	background: var(--nwb-surface);
	border: 1px solid var(--nwb-accent-dark);
}

.nwb-manage-booking__heading {
	margin-top: 0;
}

.nwb-manage-booking__details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.35em 1em;
	margin: 0 0 1.5em;
}

.nwb-manage-booking__details dt {
	font-weight: 600;
}

.nwb-manage-booking__details dd {
	margin: 0;
}

.nwb-manage-booking__cancel-note {
	color: var(--nwb-ink-muted);
	font-size: 0.9em;
}

.nwb-manage-booking__cancel-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6em 1.5em;
	border: 1px solid var(--nwb-accent-dark);
	border-radius: 3px;
	background: transparent;
	color: var(--nwb-accent-dark);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.nwb-manage-booking__cancel-button:hover {
	background: var(--nwb-surface);
}

.nwb-manage-booking__cancel-button:focus-visible {
	outline: 3px solid var(--nwb-accent-dark);
	outline-offset: 2px;
}