/*!
Theme Name: Skeleton
Author: Redlab
Author URI: https://redlab.bz/
Description:
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: skeleton
*/

.admin-bar .header {
	margin-top: 32px;
}

/* Keep the active navigation mark teal on light headers, as in the design.
   The layout bundle otherwise overrides it with the header text colour. */
@media (min-width: 1101px) {
	.wrapper .header.header--light:not(.search-open):not(.menu-opened) .menu .header__nav > ul > li.current-menu-item > .menu__opener::before,
	.wrapper .header.header--light:not(.search-open):not(.menu-opened) .menu .header__nav > ul > li.current-menu-item > a::before,
	.wrapper .header.header--light:not(.search-open):not(.menu-opened) .menu .header__nav > ul > li.current-menu-parent > .menu__opener::before,
	.wrapper .header.header--light:not(.search-open):not(.menu-opened) .menu .header__nav > ul > li.current-menu-parent > a::before {
		background-color: var(--accent-teal-300);
	}
}

/* Listing empty states: show "nothing found" when filters return 0 results */
.resources-listing__empty.is-visible,
.news-listing__empty.is-visible,
.events-listing__empty.is-visible,
.case-studies-listing__empty.is-visible {
	display: block;
}

/*
 * About hero: the static reference uses the icon as a sibling of the title,
 * while the ACF block nests a section icon inside the title wrapper.
 * Keep both DOM shapes aligned and prevent the legacy 300px icon from
 * squeezing the 375px heading into a vertical column.
 */
.about-page h1.first-screen__title,
.about-page .first-screen__title h1 {
	margin: 0;
	word-break: normal;
}

.about-page .first-screen__icon {
	position: absolute;
	top: .875rem;
	left: 0;
	width: 1.5rem;
	height: 1.5rem;
}

.about-page .first-screen__icon .icon,
.about-page .first-screen__title .section-icon .icon {
	width: 100%;
	height: 100%;
	fill: var(--neutral-100);
}

.about-page .first-screen__title .section-icon {
	width: 1.5rem;
	height: 1.5rem;
}

@media (max-width: 1100px) {
	.about-page .first-screen__inner:has(> .first-screen__icon) {
		flex-direction: column;
		align-items: flex-start;
	}

	.about-page .first-screen__icon {
		position: static;
		flex: 0 0 1.5rem;
		width: 1.5rem;
		height: 1.5rem;
		margin-bottom: 1.25rem;
	}

	.about-page .first-screen__inner > .first-screen__title {
		width: 100%;
		margin: 0;
	}

	.about-page .first-screen__title .section-icon {
		width: 1.5rem;
		height: 1.5rem;
	}
}

/* Case Studies: 10 initial cards on desktop, 4 on mobile.
 * Driven only by data-desktop-more / data-mobile-more (no data-visible). */
.case-studies-page .people[data-domain] .person-card__name {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.case-studies-page .people[data-domain] .people__more {
	width: 100%;
	display: none;
}

.case-studies-page .people[data-domain].is-expanded .people__more {
	display: none;
}

.case-study-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--neutral-100);
	background: linear-gradient(135deg, var(--accent-blue-500), var(--accent-teal-300));
}

.case-study-card__placeholder .icon {
	width: 5rem;
	height: 5rem;
	fill: currentColor;
}

@media (min-width: 641px) {
	.case-studies-page .people[data-domain]:not(.is-expanded)[data-desktop-more="1"] .people__item:nth-child(n+11) {
		display: none;
	}

	.case-studies-page .people[data-domain]:not(.is-expanded)[data-desktop-more="1"] .people__more {
		display: block;
	}
}

@media (max-width: 640px) {
	.case-studies-page .people[data-domain]:not(.is-expanded)[data-mobile-more="1"] .people__item:nth-child(n+5) {
		display: none;
	}

	.case-studies-page .people[data-domain]:not(.is-expanded)[data-mobile-more="1"] .people__more {
		display: block;
	}
}

/* Header search: Figma match highlight (bold white) */
.search-result__title strong,
.search-result__text p strong {
	font-weight: 700;
	color: var(--neutral-100);
}

/*
 * Section top dividers (frontend: .page-content > section::before).
 * People blocks wrap sections in .affiliates-people, so the child combinator
 * misses them — restore dividers for nested people + Explore more.
 * Explore more also uses overflow:hidden which can clip the 1px ::before;
 * paint the line on the section background instead.
 */
.page-content > .affiliates-people > section {
	position: relative;
}

.page-content > .affiliates-people > section::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--container-padding-x);
	right: var(--container-padding-x);
	height: 1px;
	background-color: var(--neutral-700);
}

.page-content .explore-more {
	background-image: linear-gradient(var(--neutral-700), var(--neutral-700));
	background-repeat: no-repeat;
	background-size: calc(100% - (var(--container-padding-x) * 2)) 1px;
	background-position: var(--container-padding-x) 0;
}

.page-content .explore-more::before {
	content: none;
}

/* About: sections in .page-content miss the direct-child section divider. */
.about-page .page-content > section {
	position: relative;
}

.about-page .page-content > section::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--container-padding-x);
	right: var(--container-padding-x);
	height: 1px;
	background-color: var(--neutral-700);
}

/* People listing: load-more after grid (news-listing__pagination pattern). */
.page-content > .affiliates-people .people__more {
	margin-top: 3rem;
}

@media (max-width: 1100px) {
	.page-content > .affiliates-people .people__more {
		margin-top: 2rem;
	}
}

/* People listing (affiliates/.js-people only): mobile load-more + collapsed rows.
 * Do NOT target bare `.people` — Case Studies uses data-desktop/mobile-more instead.
 * Unscoped data-visible rules were hiding Case Studies cards while View All
 * stayed tied to data-mobile-more, so filters looked chaotic. */
@media (max-width: 640px) {
	.page-content > .affiliates-people .people__more,
	.js-people .people__more {
		display: block;
	}

	.js-people:not(.is-expanded)[data-visible="2"] .people__item:nth-child(n+3),
	.js-people:not(.is-expanded)[data-visible="3"] .people__item:nth-child(n+4),
	.js-people:not(.is-expanded)[data-visible="4"] .people__item:nth-child(n+5),
	.js-people:not(.is-expanded)[data-visible="5"] .people__item:nth-child(n+6),
	.js-people:not(.is-expanded)[data-visible="6"] .people__item:nth-child(n+7) {
		display: none;
	}

	.page-content > .affiliates-people .people.is-expanded .people__more,
	.js-people.is-expanded .people__more {
		display: none;
	}
}

/* Subscribe form: success state on validated email field. */
.subscribe-form__field .label.success .error-text {
	display: block;
	color: var(--accent-teal-300);
}

.subscribe-form__field .label.success input {
	border-color: var(--accent-teal-300);
	box-shadow: 0 .25rem .25rem rgba(0, 0, 0, .25);
}

/* Get In Touch: keep headings and accordion copy on readable lines. */
.contact-card--connected .contact-card__body > h2 {
	white-space: nowrap;
}

.accordion[data-accordion="getting-to-caltech"] .accordion__title-text {
	text-wrap: balance;
}

@media (max-width: 1100px) {
	.accordion[data-accordion="getting-to-caltech"] .accordion__title-text {
		max-width: none;
	}
}

.accordion[data-accordion="getting-to-caltech"] .accordion__content {
	hyphens: none;
	overflow-wrap: normal;
	text-wrap: pretty;
	word-break: normal;
}

/* Privacy / Terms: outline button + mobile spacing on light legal pages. */
.legal-page .legal-content__action .btn.btn--outline-dark {
	align-self: flex-start;
}

@media (max-width: 640px) {
	.legal-page .legal-content {
		padding-bottom: 5rem;
	}
}

/* A person card with nowhere to go is rendered as a div; it should not
   pretend to be clickable. The component sets cursor:pointer on the class
   itself, so the tag name is what tells the two apart. */
div.person-card {
	cursor: auto;
}

/* A linked card keeps the role inside the stage, whose flex gap would add
   to the role's own margin. */
.person-card__stage > .person-card__role {
	margin-top: -1rem;
}

@media (max-width: 1100px) {
	.person-card__stage > .person-card__role {
		margin-top: -.75rem;
	}
}

.sa-wysiwyg p img {
	max-width: 100% !important;
}
/* Nested <ul> inside a wysiwyg <ol>: the layout bundle scopes its list rules
   with descendant selectors (`.sa-wysiwyg ol li`), so the sub-items increment
   the `sa-ol` counter (breaking the outer numbering) and get the ordered
   ::before — which keeps height/background from the ul rule and renders as a
   dash instead of a bullet. Re-scope to direct children. */
.sa-wysiwyg ol li > ul {
	margin-top: .25rem;
}

.sa-wysiwyg ol ul > li {
	padding-left: 1.875rem;
	counter-increment: none;
}

.sa-wysiwyg ol ul > li::before {
	content: "";
	position: absolute;
	left: calc(.9375rem - 2px);
	top: calc(1.0625rem - 2px);
	width: 4px;
	height: 4px;
	text-align: left;
	background-color: var(--neutral-900);
}

@media (max-width: 640px) {
	.sa-wysiwyg ol ul > li {
		padding-left: 1.6875rem;
	}

	.sa-wysiwyg ol ul > li::before {
		left: calc(.875rem - 2px);
		top: calc(1rem - 2px);
		width: 4px;
	}
}

/* The layout bundle's reset paints every link with --neutral-100 (the cream used
   on dark sections): `a{text-decoration:none;color:var(--neutral-100)}`.
   Components sitting on the light background re-declare their own link color,
   but the interview header's detail list never did — so a personal-website link
   there renders cream on cream and is invisible. Match the wysiwyg treatment. */
.sa-interview-header__detail a {
	color: var(--accent-blue-500);
	text-decoration: underline;
	text-decoration-thickness: 8%;
	text-underline-offset: .125rem;
}

/* Images imported from the old site come in every shape, and the layout
   bundle crops them to the frame with object-fit: cover (heads and slide text
   get cut off). Show them whole. Video posters sit deeper
   (.video-block > .video-poster > picture) and keep cover.
   Same as the containMediaImage mixin in the front repo; the extra
   `> picture` step outweighs the bundle, which loads after this file. */
.sa-media-carousel__media > picture img,
.sa-media-carousel__media > img,
.sabs > .sab--full:first-child .sa-media-carousel--single .sa-media-carousel__media > picture img,
.sabs > .sab--full:first-child .sa-media-carousel--single .sa-media-carousel__media > img,
.sa-media-grid__media--image > picture img,
.sa-media-grid__media--image > img,
.single-article-hero-media__media > picture img,
.single-article-hero-media__media > img {
	object-fit: contain;
}

/* Person cards with a profile link: the name and the portrait link to it.
   The layout bundle's reset paints every link cream (--neutral-100), which
   would make the name vanish on the light background — keep the name's own
   color and use the email link's hover. */
.sa-contact-person__link {
	color: inherit;
	text-decoration: none;
}

.sa-contact-person__link:focus-visible {
	outline: 2px solid var(--accent-blue-500);
	outline-offset: .125rem;
}

.sa-contact-person__media-link {
	position: absolute;
	inset: 0;
	display: block;
}

@media (any-hover: hover) {
	.sa-contact-person__link:hover {
		color: var(--accent-blue-500);
	}
}