/**
 * Component: page sidebar (template-parts/components/sidebar/).
 *
 * Each module is a card inset over a colored band (accent or primary), as
 * in Figma. Mobile-first: smaller type and insets; from laptop (64em) the
 * desktop sizes. The sidebar never sticks (it's taller than the viewport).
 *
 * Sidebar titles use primary and the office title border divider; a design
 * value outside the palette maps to the nearest token (log it in the
 * client's design notes).
 *
 * Colors read the sidebar.* hooks (theme.json settings.custom.sidebar.*,
 * see CLAUDE-starter.md → Design tokens → Component color hooks) with
 * today's slugs as fallbacks: this "framed" style is the default; the
 * "solid" style at the end of the file switches on custom.sidebar.style.
 */

.sidebar {
	display: grid;
	/* One track that can shrink below its content's min-content width:
	   an implicit auto track grew to the widest module and overflowed the
	   sidebar column on laptops. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-content: start;
}

.sidebar-module {
	position: relative;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) 0;
}

/* The colored band behind the top of the card. */
.sidebar-module::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	block-size: calc(var(--wp--preset--spacing--90) + var(--wp--preset--spacing--60));
	background: var(--firm-sidebar-band, var(--wp--preset--color--primary));
}

.sidebar-module--accent {
	--firm-sidebar-band: var(--wp--custom--sidebar--band-accent, var(--wp--preset--color--accent));
}

.sidebar-module--primary {
	--firm-sidebar-band: var(--wp--custom--sidebar--band-primary, var(--wp--preset--color--primary));
}

.sidebar-module > .firm-pending {
	position: relative;
	background: var(--wp--custom--sidebar--card, var(--wp--preset--color--base));
}

.sidebar-module__card {
	position: relative;
	background: var(--wp--custom--sidebar--card, var(--wp--preset--color--base));
	box-shadow: var(--wp--preset--shadow--sm);
}

.sidebar-module__title {
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
	border-block-end: var(--wp--custom--border-width--thin) solid var(--wp--preset--color--surface);
	color: var(--wp--custom--sidebar--title, var(--wp--preset--color--primary));
	text-align: center;
}

.sidebar-module__title--divided {
	border-block-end-color: var(--wp--preset--color--divider);
}

/* Practice areas */
.sidebar-practice-areas__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar-practice-areas__link {
	display: block;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	border: var(--wp--custom--border-width--thin) solid var(--wp--custom--sidebar--divider, var(--wp--preset--color--surface-alt));
	border-block-start-width: 0;
	color: var(--wp--custom--sidebar--text, var(--wp--preset--color--foreground));
	text-decoration: none;
}

.sidebar-practice-areas__link[aria-current="page"] {
	color: var(--wp--custom--sidebar--link-current, var(--wp--preset--color--primary));
}

/* Links, buttons and icons turn accent on hover and keyboard focus (client
   request; contrast per background in the client's design notes). */
.sidebar-practice-areas__link:is(:hover, :focus-visible) {
	color: var(--wp--custom--sidebar--link-hover, var(--wp--preset--color--accent));
}

.sidebar-practice-areas__link:hover {
	text-decoration: underline;
}

.sidebar-practice-areas__link:focus-visible {
	outline: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--primary);
	outline-offset: calc(var(--wp--custom--border-width--thick) * -1);
}

.sidebar-practice-areas__link--all {
	border-color: var(--wp--preset--color--muted);
	background: var(--wp--custom--sidebar--all-background, var(--wp--preset--color--primary));
	color: var(--wp--custom--sidebar--all-text, var(--wp--preset--color--base));
}

.sidebar-practice-areas__link--all:is(:hover, :focus-visible) {
	background: var(--wp--custom--sidebar--all-hover, var(--wp--preset--color--accent));
	color: var(--wp--custom--sidebar--all-hover-text, var(--wp--custom--sidebar--all-text, var(--wp--preset--color--base)));
}

.sidebar-practice-areas__link--all:focus-visible {
	outline-color: var(--wp--preset--color--base);
	outline-offset: calc(var(--wp--custom--border-width--thick) * -2);
}

.sidebar-practice-areas__pending {
	inline-size: 100%;
	border-radius: 0;
}

/* Follow us */
.sidebar-follow-us__card {
	display: grid;
	justify-items: center;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--70);
	background: var(--wp--preset--color--primary);
	color: var(--wp--custom--text--on-primary, var(--wp--preset--color--base));
}

.sidebar-follow-us__title {
	padding: 0 var(--wp--preset--spacing--50);
	border: 0;
	color: inherit;
}

.social-links--sidebar {
	justify-content: center;
	gap: var(--wp--preset--spacing--30);
}

/* Hover and focus come from the shared component (main.css, on-dark variant). */

/* Search (blog): a primary card; the button is primary-dark so it shows
   on primary. */
.sidebar-search__card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--primary);
	color: var(--wp--custom--text--on-primary, var(--wp--preset--color--base));
}

.sidebar-search__title {
	padding: 0;
	border: 0;
	color: inherit;
}

.sidebar-search__form {
	display: flex;
	min-inline-size: 0;
}

.sidebar-search__input {
	flex: 1;
	min-inline-size: 0;
	block-size: var(--wp--custom--control--size);
	padding-inline: var(--wp--preset--spacing--40);
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-sm);
}

.sidebar-search__input::placeholder {
	color: var(--wp--custom--text--subtle, var(--wp--preset--color--muted));
}

.sidebar-search__button {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: var(--wp--custom--control--size);
	block-size: var(--wp--custom--control--size);
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}

.sidebar-search__button:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--accent);
	color: var(--wp--custom--text--on-accent, var(--wp--preset--color--base));
}

.sidebar-search__input:focus-visible,
.sidebar-search__button:focus-visible {
	outline: var(--wp--custom--border-width--thick) solid var(--wp--preset--color--base);
	outline-offset: var(--wp--custom--border-width--thick);
}

.sidebar-search__icon {
	--firm-icon-size: var(--wp--custom--icon--md);
}

/* Offices */
.sidebar-office__body {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.sidebar-office__office,
.sidebar-office__phone {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.sidebar-office__label {
	color: var(--wp--custom--sidebar--title, var(--wp--preset--color--primary));
}

.sidebar-office__hours {
	margin: 0;
}

.sidebar-office__address,
.sidebar-office__hours {
	font-size: var(--wp--preset--font-size--body-sm);
	font-style: normal;
	line-height: var(--wp--custom--line-height--body-sm);
}

.sidebar-office__map {
	aspect-ratio: 3 / 2;
}

.firm-phone--sidebar,
.firm-phone--sidebar-office {
	color: var(--wp--custom--sidebar--text, var(--wp--preset--color--foreground));
}

.firm-phone--sidebar:is(:hover, :focus-visible),
.firm-phone--sidebar-office:is(:hover, :focus-visible) {
	color: var(--wp--custom--sidebar--link-hover, var(--wp--preset--color--accent));
}

.sidebar-office__button {
	display: flex;
	inline-size: 100%;
	text-decoration: none;
}

/* Form */
.sidebar-form__form {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
}

.sidebar-form .firm-pending,
.sidebar-module > .firm-pending {
	margin: 0;
}

/* laptop: desktop insets, larger office body, square maps. */
@media (min-width: 64em) {
	.sidebar {
		gap: var(--wp--preset--spacing--60);
	}

	.sidebar-module {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0;
	}

	.social-links--sidebar .social-links__icon {
		--firm-icon-size: calc(var(--wp--custom--icon--lg) + var(--wp--preset--spacing--20));
	}

	.sidebar-office__body {
		gap: var(--wp--preset--spacing--50);
		padding: var(--wp--preset--spacing--50);
	}

	.sidebar-office__address,
	.sidebar-office__hours {
		line-height: var(--wp--custom--line-height--body);
	}

	.sidebar-office__map {
		aspect-ratio: 1;
	}
}

/* Solid style (theme.json custom.sidebar.style = "solid", class on the
   <aside> from firm_component_style_class()): no band, every module is one
   solid card (primary) with light text, thin translucent dividers and the
   "View all" link on accent. The same sidebar.* hooks apply with these
   defaults. :where() keeps the specificity of the framed rules above, so
   the hover, focus and current-page rules still win. */
:where(.sidebar--solid) .sidebar-module {
	padding: 0;
}

:where(.sidebar--solid) .sidebar-module::before {
	display: none;
}

:where(.sidebar--solid) .sidebar-module__card,
:where(.sidebar--solid) .sidebar-module > .firm-pending {
	background: var(--wp--custom--sidebar--card, var(--wp--preset--color--primary));
}

:where(.sidebar--solid) .sidebar-module__title,
:where(.sidebar--solid) .sidebar-module__title--divided {
	border-block-end-color: var(--wp--custom--sidebar--divider, color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent));
	color: var(--wp--custom--sidebar--title, var(--wp--preset--color--base));
}

:where(.sidebar--solid) .sidebar-practice-areas__link {
	border-color: var(--wp--custom--sidebar--divider, color-mix(in srgb, var(--wp--preset--color--base) 30%, transparent));
	border-inline-width: 0;
	color: var(--wp--custom--sidebar--text, var(--wp--preset--color--base));
}

:where(.sidebar--solid) .sidebar-practice-areas__link[aria-current="page"] {
	color: var(--wp--custom--sidebar--link-current, var(--wp--preset--color--accent));
}

:where(.sidebar--solid) .sidebar-practice-areas__link:focus-visible {
	outline-color: var(--wp--custom--sidebar--text, var(--wp--preset--color--base));
}

:where(.sidebar--solid) .sidebar-practice-areas__link--all {
	border-color: transparent;
	background: var(--wp--custom--sidebar--all-background, var(--wp--preset--color--accent));
	color: var(--wp--custom--sidebar--all-text, var(--wp--custom--text--on-accent, var(--wp--preset--color--base)));
}

:where(.sidebar--solid) .sidebar-practice-areas__link--all:is(:hover, :focus-visible) {
	background: var(--wp--custom--sidebar--all-hover, var(--wp--preset--color--primary-dark));
}

:where(.sidebar--solid) .sidebar-office__body {
	color: var(--wp--custom--sidebar--text, var(--wp--preset--color--base));
}

:where(.sidebar--solid) .sidebar-office__label {
	color: var(--wp--custom--sidebar--title, var(--wp--preset--color--base));
}

:where(.sidebar--solid) .firm-phone--sidebar,
:where(.sidebar--solid) .firm-phone--sidebar-office {
	color: var(--wp--custom--sidebar--text, var(--wp--preset--color--base));
}