/**
 * Service request form styles.
 */
/* The form fills the space the theme gives it, rather than capping its own
   width. */
.wfu-sr-form { max-width: none; }
.wfu-sr-form fieldset { border: 1px solid #d2d2d2; margin: 0 0 1.5rem; padding: 1rem 1.25rem; }
.wfu-sr-form legend { font-weight: 700; padding: 0 0.5rem; }
.wfu-sr-legend { font-size: 1.15rem; margin: 1.5rem 0 0.75rem; }
.wfu-sr-field { margin: 0 0 1rem; }
.wfu-sr-field label { display: block; font-weight: 600; margin: 0 0 0.25rem; }
/* Set explicitly rather than inherited: the network theme styles form controls
   as full-width blocks, which is right for text inputs and wrong for anything
   that sits beside a label. */
.wfu-sr-field input,
.wfu-sr-field select,
.wfu-sr-field textarea {
	box-sizing: border-box;
	display: block;
	width: 100%;
	padding: 0.5rem;
	border: 1px solid var(--wp--custom--color--neutral-600, #767676);
	border-radius: 6px;
	background: #fff;
	font-size: 1rem;
}
/* A date input is styled by the browser unless it is told otherwise, which is
   why it arrived with a different corner and edge from every field above it. */
.wfu-sr-field input[type="date"] {
	border: 1px solid var(--wp--custom--color--neutral-200, #ddd);
	border-radius: 6px;
	box-shadow: none;
}
.wfu-sr-field input:focus,
.wfu-sr-field select:focus,
.wfu-sr-field textarea:focus { outline: 2px solid var(--wp--custom--color--official-gold, #9e7e38); outline-offset: 1px; }
.wfu-sr-field [aria-invalid="true"] { border-color: #b32d2e; }
.wfu-sr-required { color: #b32d2e; }
.wfu-sr-help { color: #555; font-size: 0.9rem; margin: 0.25rem 0 0; }
.wfu-sr-error { color: #b32d2e; font-size: 0.9rem; margin: 0.25rem 0 0; }
/* Chevron on every select, because a select with the browser's arrow suppressed
   and nothing in its place reads as a text field. Drawn as a background image so
   it costs no markup, with room made on the right so a long option cannot run
   underneath it. */
.wfu-sr-field select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpolygon points='0,0 32,0 16,24' fill='%238a8a8a'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.5rem center !important;
	background-size: 9px 6px;
}
.wfu-sr-type-chooser { margin-bottom: 1.5rem; }
.wfu-sr-messages:empty { display: none; }
.wfu-sr-messages { margin: 0 0 1rem; padding: 0.75rem 1rem; border-left: 4px solid var(--wp--custom--color--official-gold, #9e7e38); background: #f6f6f6; }
.wfu-sr-messages.is-error { border-left-color: #b32d2e; }
/* The theme owns the buttons. `.container .button` is the network theme's own
   rule and carries the gold, the radius, the type and the hover and focus
   states, so both actions take that class and this stylesheet says nothing
   about how they look.

   The color argument that justified the old hardcoded value was wrong. It
   compared against var(--wp--custom--color--official-gold, #9e7e38), which is not the theme's button gold. The theme
   uses old-gold var(--wp--preset--color--old-gold, #8C6D2C), and white on that measures 4.84:1, over the 4.5:1
   that WCAG 2.2 AA asks for normal text. The hover color is darker still. */
.wfu-sr-submit:disabled,
.wfu-sr-continue:disabled { opacity: 0.6; cursor: default; }

/* Outcome modal. The form is long, so a message at the top of it is off screen
   by the time anyone presses submit; a failure there looked like nothing
   happening at all. */
.wfu-sr-modal-backdrop {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.55);
	z-index: 100000;
}
.wfu-sr-modal-backdrop[hidden] { display: none; }
.wfu-sr-modal {
	box-sizing: border-box;
	max-width: 30rem;
	width: 100%;
	padding: 1.75rem;
	background: #fff;
	border-top: 6px solid var(--wp--custom--color--official-gold, #9e7e38);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.wfu-sr-modal-backdrop.is-error .wfu-sr-modal { border-top-color: #b32d2e; }
.wfu-sr-modal-title { margin: 0 0 0.75rem; font-size: 1.35rem; line-height: 1.25; }
.wfu-sr-modal-body { margin: 0 0 1.5rem; }
/* The theme paints this one too, through `.container .button`. Only the layout
   that the theme cannot know about stays here. */
.wfu-sr-modal-close {
	cursor: pointer;
}
.wfu-sr-modal-close:focus { outline: 3px solid #000; outline-offset: 2px; }

/**
 * Attachment picker.
 *
 * Scoped under both intake containers rather than styled on the bare class,
 * because the network theme reaches form controls through descendant selectors
 * like `.entry-content input` and would otherwise out-specify every rule here.
 */
.wfu-sr-uploads .wfu-up,
.wfu-iv .wfu-up {
	margin: 1.5rem 0 0;
}
.wfu-sr-uploads .wfu-up-label,
.wfu-iv .wfu-up-label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}
.wfu-sr-uploads .wfu-up-label.is-full,
.wfu-iv .wfu-up-label.is-full {
	color: #666;
}
.wfu-sr-uploads input.wfu-up-input,
.wfu-iv input.wfu-up-input {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 0;
	background: none;
	border: 0;
}
.wfu-sr-uploads input.wfu-up-input:disabled,
.wfu-iv input.wfu-up-input:disabled {
	opacity: 0.5;
	cursor: default;
}
.wfu-sr-uploads .wfu-up-help,
.wfu-iv .wfu-up-help {
	margin: 0.25rem 0 0;
	color: #555;
	font-size: 0.85rem;
	line-height: 1.5;
}
.wfu-sr-uploads .wfu-up-list,
.wfu-iv .wfu-up-list {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}
.wfu-sr-uploads .wfu-up-item,
.wfu-iv .wfu-up-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	margin: 0 0 0.4rem;
	background: #f4f4f4;
	border-left: 3px solid var(--wp--custom--color--official-gold, #9e7e38);
}
.wfu-sr-uploads .wfu-up-name,
.wfu-iv .wfu-up-name {
	flex: 1 1 auto;
	overflow-wrap: anywhere;
}
.wfu-sr-uploads .wfu-up-size,
.wfu-iv .wfu-up-size {
	flex: 0 0 auto;
	color: #555;
	font-size: 0.85rem;
	white-space: nowrap;
}
.wfu-sr-uploads .wfu-up-remove,
.wfu-iv .wfu-up-remove {
	flex: 0 0 auto;
	background: none;
	border: 0;
	color: #7a2b2b;
	cursor: pointer;
	font-size: 0.85rem;
	padding: 0.2rem 0.4rem;
	text-decoration: underline;
}
.wfu-sr-uploads .wfu-up-remove:focus,
.wfu-iv .wfu-up-remove:focus,
.wfu-sr-uploads input.wfu-up-input:focus,
.wfu-iv input.wfu-up-input:focus {
	outline: 3px solid #000;
	outline-offset: 2px;
}
.wfu-sr-uploads .wfu-up-status,
.wfu-iv .wfu-up-status {
	margin: 0.5rem 0 0;
	font-size: 0.9rem;
	min-height: 1.2em;
	color: #333;
}
.wfu-sr-uploads .wfu-up-status.is-error,
.wfu-iv .wfu-up-status.is-error {
	color: #b32d2e;
	font-weight: 600;
}

/* See the note in interview.css: the remove control needs 24 by 24 CSS pixels
   to satisfy WCAG 2.2 AA 2.5.8 without leaning on the spacing exception. */
.wfu-sr-uploads .wfu-up-remove {
	min-height: 24px;
	min-width: 24px;
	padding: 0.35rem 0.5rem;
}

/* Both ways of asking, on one page. The form is the default for everyone and
   stays where people expect it; the conversation is offered above it. */
.wfu-sr-request .wfu-sr-panel[hidden] { display: none !important; }
.wfu-sr-request .wfu-sr-invite[hidden] { display: none !important; }

/* An offer, not an announcement. Quiet enough that somebody who came to fill in
   the form can read past it, visible enough to be worth reading once. */
.wfu-sr-invite {
	/* Room above it. Sitting under the form, with no top margin it butted
	   straight into the submit button and the two read as one broken control. */
	margin: 2rem 0 1.5rem;
	padding: 1rem 1.25rem;
	background: #faf9f6;
	border-left: 5px solid var(--wp--custom--color--hover-color, #755a23);
}
.wfu-sr-invite p { margin: 0 0 0.6rem; line-height: 1.6; }
.wfu-sr-invite p:last-child { margin: 0; }
.wfu-sr-invite-text { color: #333; }
.wfu-sr-invite-try {
	background: none;
	border: 1px solid var(--wp--custom--color--neutral-900, #2b2b2b);
	border-radius: 6px;
	color: var(--wp--custom--color--neutral-900, #2b2b2b);
	cursor: pointer;
	font-size: 0.95rem;
	min-height: 24px;
	padding: 0.6rem 1.1rem;
}
.wfu-sr-invite-link { color: var(--wp--custom--color--neutral-900, #2b2b2b); font-weight: 600; }
.wfu-sr-invite-link:focus { outline: 3px solid #000; outline-offset: 2px; }
.wfu-sr-invite-try:focus, .wfu-sr-invite-try:hover { color: #fff; background: var(--wp--custom--color--neutral-900, #2b2b2b); }

/* The way out of the conversation, which switches panels rather than navigating. */
.wfu-sr-switch-to-form {
	background: none;
	border: 0;
	color: #5c4719;
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-decoration: underline;
}
.wfu-sr-switch-to-form:focus { outline: 3px solid #000; outline-offset: 2px; }

/*
 * Request type guidance.
 *
 * Structure only. The first version of this set a font size on the block and a
 * size and weight on its title, which was a mistake twice over: the title is an
 * h3, so it took the theme's display face at a body size it was never drawn
 * for, and the size on the container compounded with the theme's own relative
 * list rule to render bullets larger than the paragraphs around them.
 *
 * The theme owns type. Nothing here sets a family, a size, a weight, or a line
 * height.
 *
 * There is no background tint either, and that is an accessibility decision
 * rather than a stylistic one: the tint dropped the contrast of the gold links
 * inside these blocks from 4.84:1 to 4.44:1, under the 4.5:1 minimum. Several
 * of these blocks exist to send somebody to one of those links.
 */
.wfu-sr-guidance {
	margin: 0 0 1.5rem;
	padding-left: 1rem;
	border-left: 4px solid var(--wp--custom--color--official-gold, #9e7e38);
}

.wfu-sr-guidance-block > *:last-child {
	margin-bottom: 0;
}

/*
 * Progressive disclosure.
 *
 * The fields below the chooser are hidden until somebody has picked a type and
 * pressed Continue, which restores what the live form does deliberately: it
 * gives a person room to read the guidance and decide whether the option is the
 * right one before the form asks them for anything.
 *
 * Structure only, and nothing here fires without scripting, where the whole
 * form stays visible and submits as it always has.
 */
.wfu-sr-rest:focus {
	outline: none;
}

.wfu-sr-continue-wrap {
	margin: 0 0 1.5rem;
}

/*
 * The offer to use the conversation instead. One line rather than the block it
 * started as, which competed with the form for attention on a page that was
 * already busy.
 */

/* One box, not three.

   The request section, the chosen type, and each list field were all fieldsets,
   so a plugin request drew a box inside a box inside a box. The middle one earns
   the least: its legend repeats the request type that the chooser states
   directly above it, and it groups fields that are already the only ones on
   screen.

   The element and its legend stay for anything reading the page rather than
   looking at it, which is what makes a set of fields a named group. Only the
   drawing goes.
*/
/* Deliberately specific, for the same reason the controls above are: the theme
   styles fieldsets with descendant selectors that out-specify a single class,
   so a lone .wfu-sr-type-fields rule was written, shipped, and did nothing. */
.wfu-sr-form fieldset.wfu-sr-type-fields {
	border: 0;
	margin: 0;
	padding: 0;
}

.wfu-sr-form fieldset.wfu-sr-type-fields > legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}