/* Tomatillo Design ~ DHM Staff Contact
 *
 * Two treatments on purpose.
 *
 * On a single person's page the contact button is the primary action, so it
 * looks like a button. In dense lists — the staff directory renders 19 cards,
 * key-contact blocks render several — a row of solid buttons replaces quiet
 * grey text with a wall of loud rectangles. There the same element is styled as
 * a restrained link. Same markup, same behaviour, appropriate weight.
 *
 * Colours are inherited (currentColor) rather than declared, so this sits inside
 * whatever the theme is already doing instead of introducing a second palette.
 * The theme imports Bootstrap into @layer bootstrap; these rules are unlayered
 * and therefore win, which is what we want for the button but is also why the
 * modal below only adjusts spacing and leaves Bootstrap's own modal chrome be.
 */

/* ---- default: a real button (person single pages) ---- */

.tddc-contact-wrapper {
	margin: 0.5em 0;
}

.tddc-contact-button {
	display: inline-block;
	padding: 0.45em 1.1em;
	border: 1px solid currentColor;
	border-radius: 3px;
	font-size: 0.95em;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.tddc-contact-button:hover,
.tddc-contact-button:focus {
	text-decoration: underline;
}

.tddc-contact-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---- dense contexts: quieter, so a directory does not shout ---- */

.clb-single-key-contact-wrapper .tddc-contact-button,
.clb-custom-staff-card .tddc-contact-button,
.tddc-contact-inline .tddc-contact-button {
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.clb-single-key-contact-wrapper .tddc-contact-button:hover,
.clb-custom-staff-card .tddc-contact-button:hover,
.tddc-contact-inline .tddc-contact-button:hover {
	text-decoration-thickness: 2px;
}

.tddc-contact-wrapper.tddc-contact-inline {
	display: inline;
	margin: 0;
}

/* ---- person single: the no-photo case ----------------------------------
 *
 * The theme styles .clb-staff-metabox-wrapper as a beige card, max-width 400px,
 * float:right, designed around a photo with the contact details beneath it
 * (css/clb-custom-ironwood-styles.css:183).
 *
 * That card is right when there is a photo. Without one it collapses to a small
 * beige box floated into the middle of the bio containing only a button, which
 * reads as an orphaned callout rather than a contact detail. Two of the 23
 * people have no featured image set.
 *
 * So: photo present, keep the theme's card exactly as it is. Photo absent, drop
 * out of the float and sit in normal flow — which is also much closer to what
 * those pages do today, keeping the change to "the address became a button"
 * rather than "the whole page reflowed".
 *
 * HOW THIS WINS — and it is not specificity. The theme's entire stylesheet
 * (css/clb-custom-ironwood-styles.css) is wrapped in `@layer theme-overrides`,
 * and unlayered CSS beats layered CSS outright no matter how specific the
 * layered rule is. This file is unlayered, so it wins.
 *
 * Two consequences worth knowing before editing:
 *   - do NOT wrap this file in a @layer to be tidy; it would drop below the
 *     theme and these rules would silently stop applying;
 *   - the modifier class is here for clarity, not because it is needed to win
 *     the cascade. Keep it anyway — it is what makes the intent readable.
 */

.single-people .clb-staff-metabox-wrapper.tddc-no-photo {
	float: none;
	display: block;
	max-width: none;
	margin-left: 0;
	margin-bottom: 1.25rem;
	background: transparent;
}

.single-people .clb-staff-metabox-wrapper.tddc-no-photo .clb-metabox-text-wrapper {
	padding: 0;
}

/* Give the button a little more presence when it is not sitting inside the
   beige card, so it does not read as loose text under the title. */
.single-people .clb-staff-metabox-wrapper.tddc-no-photo .tddc-contact-button {
	margin-top: 0.25rem;
}

/* ---- the contact modal ---------------------------------------------------
 *
 * Bootstrap lives in @layer bootstrap on this site and this file is unlayered,
 * so these win without !important. See the note above about never wrapping this
 * stylesheet in a layer.
 *
 * Everything is scoped to .tddc-modal, or to body.tddc-modal-open for the
 * backdrop, so the theme's search modal and the resource download gate are
 * untouched. Restyling .modal-backdrop globally would change both of those.
 */

/* Backdrop: darker and blurred, only while OUR modal is open. */
body.tddc-modal-open .modal-backdrop,
body.tddc-modal-open .modal-backdrop.show {
	opacity: 1;
	background-color: rgba(18, 14, 15, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.tddc-modal .modal-dialog {
	max-width: 33rem;
}

.tddc-modal .modal-content {
	border: 0;
	border-radius: 8px;
	box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.5);
	overflow: hidden;
}

.tddc-modal .modal-header {
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 1.5rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

.tddc-modal .modal-title {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* The theme's global button styling was leaking into Bootstrap's close control
   and rendering it as a pale filled rectangle. Put it back to a plain glyph. */
.tddc-modal .btn-close {
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	font-size: 1.5rem;
	line-height: 1;
	color: inherit;
	opacity: 0.55;
	cursor: pointer;
}

.tddc-modal .btn-close:hover,
.tddc-modal .btn-close:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, 0.06);
}

.tddc-modal .modal-body {
	padding: 1.15rem 1.5rem 1.25rem;
}

.tddc-modal .tddc-modal-intro {
	margin: 0 0 1rem;
	font-size: 0.95em;
	line-height: 1.5;
	opacity: 0.8;
}

/* ---- the form inside the modal ---- */

.tddc-modal .tddc-form-wrapper .gform_wrapper {
	margin: 0;
}

/* GF's default field spacing is generous for a full page and wasteful in a
   dialog, where the whole point is to keep the submit button in view. */
.tddc-modal .tddc-form-wrapper .gform_fields {
	row-gap: 0.8rem;
}

.tddc-modal .tddc-form-wrapper .gfield_label {
	margin-bottom: 0.25rem;
	font-size: 0.92em;
}

/* Inquiry/Comment: GF ships this tall enough to push the submit button off-screen
   on a laptop. Sized to four lines of text.

   line-height is pinned rather than inherited so the calc actually means four
   lines — otherwise a theme change to line-height would silently make this four
   lines or six while the comment still claimed five. The +1rem is GF's vertical
   padding. Still drag-resizable for anyone writing more. */
.tddc-modal .tddc-form-wrapper textarea,
.tddc-modal .tddc-form-wrapper textarea.large,
.tddc-modal .tddc-form-wrapper textarea.medium,
.tddc-modal .tddc-form-wrapper textarea.small {
	line-height: 1.5;
	height: calc((4 * 1.5em) + 1rem);
	min-height: calc((4 * 1.5em) + 1rem);
	resize: vertical;
}

.tddc-modal .tddc-form-wrapper .gform_footer {
	margin: 0.9rem 0 0;
	padding: 0;
}

/* Turnstile sits directly above the button; give it a little air without the
   full GF field gap. */
.tddc-modal .tddc-form-wrapper .cf-turnstile {
	margin-top: 0.25rem;
}

/* SCROLL ONLY WHEN THERE IS GENUINELY NO ROOM.
 *
 * The previous rule capped the body at 72vh unconditionally, so the form scrolled
 * on a 1080p display even though the whole thing would have fitted — the submit
 * button sat just below a scroll line for no reason. The goal is the opposite:
 * on a large screen the entire modal, submit button included, should be visible
 * without scrolling.
 *
 * Bootstrap already makes .modal-content a flex column. Capping the CONTENT to
 * the viewport and letting the BODY be the flexible child means the modal sizes
 * to its content and only introduces a scrollbar once it would otherwise run off
 * the screen. min-height:0 is what allows a flex child to shrink below its
 * content size — without it the body refuses to scroll and the dialog overflows
 * instead.
 *
 * 3.5rem accounts for Bootstrap's 1.75rem dialog margin top and bottom. The dvh
 * line is a progressive upgrade for mobile browsers whose chrome makes vh lie;
 * browsers that do not understand it keep the vh value above. */
.tddc-modal .modal-content {
	max-height: calc(100vh - 3.5rem);
	max-height: calc(100dvh - 3.5rem);
}

.tddc-modal .modal-body {
	min-height: 0;
	overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
	.tddc-modal.fade {
		transition: none;
	}
}