/*
 * [cr_about_space] – the property page's "About the Space" tabs (client design, Oct 21 2026;
 * palette, bullets and sizes from the Salty Air Retreat copy kit, Oct 22).
 *
 * One bordered row of caps tabs (it scrolls sideways when it does not fit), 29px in from the
 * panel's sides and 18px above it, over one panel bordered on three sides whose bullets run in
 * two columns of at least 300px. Light palette (Oct 30, 2026): panel and tab row #F8F4EC,
 * text, rules and bullet dots #443B27, selected tab #4A3F2A with white text.
 * Defaults sit on :where() so a site rule always wins.
 */
:where(.cr-about) {
	--cr-about-ink: #443B27;
	--cr-about-soft: #6B604A;
	--cr-about-rule: #443B27;
	--cr-about-panel: #F8F4EC;
	--cr-about-on: #4A3F2A;
	--cr-about-on-ink: #FFFFFF;
	--cr-about-accent: #443B27;
	--cr-about-dot: #443B27;
	--cr-about-inset: 29px; /* the panel's 28px padding + its 1px border */
	--cr-about-gap: 18px;
	--cr-font: var(--e-global-typography-text-font-family, "Work Sans"), system-ui, -apple-system, "Segoe UI", sans-serif;
	--cr-about-max: 1180px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0; /* the Elementor container around the widgets and the tabs carries the spacing */
	color: var(--cr-about-ink);
	font-family: var(--cr-font);
	font-size: 15px;
	line-height: 1.55;
}

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

.cr-about__in {
	max-width: var(--cr-about-max);
	margin: 0 auto;
}

/* ---- tabs ---- */

/* The kit's tab row sits 29px in from the panel's sides with an 18px gap under it. */
.cr-about .cr-about__scroll {
	width: auto;
	margin: 0 var(--cr-about-inset) var(--cr-about-gap);
	overflow-x: auto;
	color-scheme: light;
}

.cr-about .cr-about__tabs {
	display: flex;
	width: max-content;
	min-width: 100%;
	border: 1px solid var(--cr-about-rule);
	background: var(--cr-about-panel);
}

.cr-about .cr-about__tab {
	flex: 1 0 auto;
	min-height: 0; /* the kit's 41px row (11px type + 15px padding), not the 44px hit size */
	margin: 0;
	padding: 15px 16px;
	border: 0;
	border-right: 1px solid var(--cr-about-rule);
	border-radius: 0;
	background-color: transparent;
	color: var(--cr-about-ink);
	font: 600 11px/1 var(--cr-font);
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	cursor: pointer;
	transition: none; /* the kit's tabs switch at once (Hello Elementor fades buttons, "all .3s") */
	/* The tabs are <h3 role="tab"> (Oct 31): margin, font and colour above already override the
	   theme's heading styles (Hello's h3 size / margins, Additional CSS's h1–h6 font family). */
}

.cr-about .cr-about__tab:last-child {
	border-right: 0;
}

/* Every state names its own colours, so no theme hover / focus colour (Hello's magenta) shows. */
.cr-about .cr-about__tab:hover,
.cr-about .cr-about__tab:focus,
.cr-about .cr-about__tab:focus-visible,
.cr-about .cr-about__tab:active {
	background-color: transparent;
	border-color: var(--cr-about-rule);
	color: var(--cr-about-ink);
	text-decoration: none;
}

.cr-about .cr-about__tab[aria-selected="true"],
.cr-about .cr-about__tab[aria-selected="true"]:hover,
.cr-about .cr-about__tab[aria-selected="true"]:focus,
.cr-about .cr-about__tab[aria-selected="true"]:focus-visible,
.cr-about .cr-about__tab[aria-selected="true"]:active {
	background-color: var(--cr-about-on);
	color: var(--cr-about-on-ink);
}

.cr-about .cr-about__tab:focus {
	outline: none;
}

.cr-about .cr-about__tab:focus-visible {
	outline: 2px solid var(--cr-about-accent);
	outline-offset: -4px;
}

/* ---- panel ---- */

.cr-about .cr-about__panel {
	width: 100%;
	border: 1px solid var(--cr-about-rule);
	border-top: 0;
	padding: 22px 28px;
	background: var(--cr-about-panel);
	text-align: left;
}

.cr-about .cr-about__panel[hidden] {
	display: none;
}

.cr-about .cr-about__panel:focus-visible {
	outline: 2px solid var(--cr-about-accent);
	outline-offset: -4px;
}

.cr-about .cr-about__list {
	columns: 2 300px;
	column-gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cr-about .cr-about__list li {
	position: relative;
	break-inside: avoid;
	margin: 0 0 10px;
	padding: 0 0 0 20px;
	color: var(--cr-about-ink);
	font-size: 15px;
	line-height: 1.55;
}

/* The brand bullet: a small solid dot in the dark brown. */
.cr-about .cr-about__list li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--cr-about-dot);
}

.cr-about .cr-about__list strong {
	font-weight: 600;
}

.cr-about .cr-about__note {
	margin: 0;
	font-size: 14px;
	color: var(--cr-about-soft);
}