/* Base reset — without this, padding/border on cards and boxes adds to
   their set width instead of being included in it, which is what let
   headings and long words push past the edge of narrow cards on phones
   even after the grid itself started collapsing to fewer columns. */

*,
*::before,
*::after {
	box-sizing: border-box;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Layout */

.section {
	padding-block: var(--wp--custom--space--section, clamp(64px, 8vw, 120px));
}

/* Back-to-back sections would otherwise stack two padding-blocks into one
   oversized gap. Each floating-box already reads as its own card via its
   shadow and internal padding, so consecutive sections only need one
   section's worth of tan gap between them, not two. */
.section + .section {
	padding-top: 0;
}

/* WordPress core puts a margin-top (--wp--style--block-gap, 24px here)
   between every top-level block in .wp-site-blocks. Where the hero and a
   .section sit back-to-back and both use the tan background, that margin
   shows the ivory page background through a thin seam between two bands
   that are meant to read as one continuous tan run. Zero it specifically
   between adjacent tan-backed top-level blocks — this doesn't touch the
   gap into the footer or any differently-colored neighbor. */
.wp-site-blocks > .has-app-tan-background-color + .has-app-tan-background-color {
	margin-top: 0;
}

.section-tight {
	padding-block: var(--wp--preset--spacing--50, 2.5rem);
}

/* Buttons */

.wp-block-button__link,
.wp-element-button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--navy);
	border: 1px solid currentColor;
}

/* Focus states */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Mountain/ridge motif moved to assets/css/decorative-patterns.css as
   .pattern-ridge — seamless tile (no visible seam at any viewport width)
   and recolorable via a CSS custom property, replacing this class. See
   DECISIONS.md for why. */

/* Aspect-ratio image containers */

.ratio {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--navy-light);
}

.ratio img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
.ratio-3-4 { aspect-ratio: 3 / 4; }

.placeholder-media {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: linear-gradient(135deg, var(--wp--preset--color--navy-light), var(--wp--preset--color--navy));
}

/* Card grid */

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--40, 1.5rem);
}

/* For a fixed-count sequence (a 4-step process, say) where auto-fit's
   "however many 260px columns happen to fit" can strand the last item
   alone on its own row with a large empty gap beside it at in-between
   viewport widths. Pinned to a divisor of the item count instead, so it
   always wraps evenly. */
.card-grid--4up {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
	.card-grid--4up { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
	.card-grid--4up { grid-template-columns: 1fr; }
}

.card {
	border: 1px solid #ddd3bd;
	padding: 1.75rem;
}

/* Site header */

.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40, 1.5rem);
	padding-block: 1.25rem;
}

.site-logo-link {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.4rem;
	text-decoration: none;
}

/* Eyebrow label — small caps gold label used above headings, matching the
   reference PDF's "REFERENCE DESIGN SYSTEM / CORPORATE DIRECTION" treatment */

.eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--app-brass);
}

/* Bordered fact box, matching the "CORE DIRECTION" box on the reference cover */

.fact-box {
	border: 1px solid var(--wp--preset--color--gold);
	padding: 1.75rem 2rem;
}

/* Form notices */

.form-notice {
	padding: 0.9rem 1.1rem;
	border-radius: var(--wp--custom--radius--sm, 2px);
	margin-bottom: 1rem;
	text-align: center;
}

.form-notice.success { background: #e3ece6; color: #1e4a33; }
.form-notice.error { background: #f3e3df; color: #7a3220; }

.form-field {
	margin-bottom: 1.25rem;
}

.form-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.form-field input,
.form-field textarea,
.form-field select {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid #ccc0a3;
	border-radius: var(--wp--custom--radius--sm, 2px);
	font: inherit;
	background: #fff;
}

.form-hint {
	margin-top: -0.75rem;
	margin-bottom: 1.25rem;
	font-size: 0.9rem;
	opacity: 0.75;
}

.form-field-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

.checkbox-option {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

.checkbox-option input {
	width: auto;
}

/* AI writing assist */

.bbco-ai-assist {
	/* ai-assist.js inserts this immediately after the <textarea> itself
	   (insertAdjacentElement('afterend', ...)), so it always lands INSIDE
	   whichever field wrapper div holds that textarea — not as a sibling
	   after the wrapper. A negative top margin here only makes sense in
	   the latter position (it used to assume the .form-hint convention:
	   pulling up to cancel a .form-field's own 1.25rem bottom margin);
	   inside the wrapper there's nothing to cancel, so it just left an
	   inconsistent gap depending on each page's own field-wrapper CSS.
	   Plain positive spacing here renders the same everywhere. */
	margin: 0.5rem 0 0;
}

.bbco-ai-assist-button {
	background: none;
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--gold);
	border-radius: var(--wp--custom--radius--sm, 2px);
	padding: 0.35rem 0.75rem;
	font-size: 0.8125rem;
	font-family: inherit;
	cursor: pointer;
}

.bbco-ai-assist-button:hover {
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--navy);
}

.bbco-ai-assist-button:disabled {
	opacity: 0.6;
	cursor: default;
}

.bbco-ai-assist-panel {
	margin-top: 0.5rem;
	padding: 0.9rem 1.1rem;
	background: var(--wp--preset--color--ivory);
	border: 1px solid #ddd3bd;
	border-radius: var(--wp--custom--radius--sm, 2px);
}

.bbco-ai-assist-suggestion {
	margin: 0 0 0.75rem;
	white-space: pre-wrap;
}

.bbco-ai-assist-actions {
	display: flex;
	gap: 0.6rem;
}

.bbco-ai-assist-accept,
.bbco-ai-assist-discard {
	border-radius: var(--wp--custom--radius--sm, 2px);
	padding: 0.4rem 0.9rem;
	font-size: 0.8125rem;
	font-family: inherit;
	cursor: pointer;
}

.bbco-ai-assist-accept {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--ivory);
	border: 1px solid var(--wp--preset--color--navy);
}

.bbco-ai-assist-discard {
	background: none;
	border: 1px solid #ccc0a3;
	color: var(--wp--preset--color--ink);
}

/* Maintenance assistant */

.bbco-maintenance-assistant .ma-answer {
	background: #fff;
	border: 1px solid #ddd3bd;
	border-radius: 4px;
	padding: 1.25rem;
	margin: 1.5rem 0;
	white-space: pre-wrap;
}

.bbco-maintenance-assistant .ma-sources {
	margin: 1rem 0 0;
	padding-left: 1.2rem;
}

.bbco-maintenance-assistant .ma-loading {
	color: var(--wp--preset--color--muted, #5B5A52);
	font-style: italic;
}

/* Portal */

.portal-notice {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--cream);
	padding: 2rem;
	text-align: center;
}

.portal-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.portal-list li {
	border-bottom: 1px solid #ddd3bd;
	padding: 1rem 0;
}

.portal-list li:first-child {
	border-top: 1px solid #ddd3bd;
}

/* Dashboard (Staff + Property) */

.dash-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.dash-header h2 {
	margin: 0;
}

.dash-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	margin-top: 1.5rem;
}

.dash-card {
	background: #fff;
	border: 1px solid #ddd3bd;
	border-radius: 4px;
	padding: 1.5rem;
}

.dash-card h3 {
	margin: 0 0 0.75rem;
	font-size: 1.05rem;
}

.dash-card form {
	margin: 0 0 0.5rem;
}

.dash-card > p:not(.dash-note) {
	margin: 0.5rem 0 0;
}

.dash-card-placeholder {
	background: var(--wp--preset--color--ivory);
	border-style: dashed;
}

.dash-stat {
	margin: 0 0 0.4rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	color: var(--wp--preset--color--navy);
}

.dash-stat span {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted, #5B5A52);
	margin-left: 0.35rem;
}

.dash-note {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--muted, #5B5A52);
	font-style: italic;
	margin-top: 0.75rem;
	margin-bottom: 0;
}

.dash-note.dash-overdue {
	color: #7a3220;
	font-style: normal;
	font-weight: 600;
}

/* Responsive container padding */

@media (max-width: 767px) {
	:where(.wp-site-blocks) {
		--wp--style--root--padding-left: 24px;
		--wp--style--root--padding-right: 24px;
	}
}