/**
 * CFUL 2026 — Homepage
 *
 * Styles for front-page.php template parts: hero statement,
 * plus the reusable .cful-section-label eyebrow used by the
 * upcoming-events / recent-publications sections.
 */

/* -------------------------------------------------------------------- */
/* Hero (Figma node 421:1694)                                           */
/* -------------------------------------------------------------------- */

.cful-hero {
	padding-block: var(--space-12) var(--space-8);
	border-bottom: 1px solid var(--cful-black);
}

.cful-hero__copy {
	display: flex;
	justify-content: flex-end;
}

.cful-hero__statement {
	color: var(--cful-black-rich);
	font-family: var(--font-sans);
	font-feature-settings: "ss03" 1;
	font-size: var(--text-xl);
	font-weight: var(--fw-semibold);
	line-height: var(--leading-snug);
	max-width: 480px;
	text-align: left;
}

/* -------------------------------------------------------------------- */
/* Section label (cful_section_title() in inc/template-tags.php)        */
/* -------------------------------------------------------------------- */

.cful-publications {
	background-color: var(--cful-gray);
}

.cful-section-label {
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: var(--text-lg);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin-bottom: var(--space-6);
}

/* -------------------------------------------------------------------- */
/* Subsite upcoming-events accent list (Figma node 604:396)             */
/* Replaces Recent Publications on department subsites; --color-primary  */
/* is that department's accent color.                                    */
/* -------------------------------------------------------------------- */

.cful-events-accent {
	background-color: var(--color-primary);
	color: var(--cful-white-alt); /* #f2f0ef — Figma text color */
}

.cful-events-accent .cful-section-label {
	color: var(--cful-white-alt);
}

.cful-event-lines {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.cful-event-lines__item {
	font-family: var(--font-sans);
	font-size: var(--text-2xl);
	font-weight: var(--fw-regular);
	line-height: var(--leading-snug);
}

.cful-event-lines__title {
	color: inherit;
	font-weight: var(--fw-semibold);
	text-decoration: none;
}

a.cful-event-lines__title:hover,
a.cful-event-lines__title:focus-visible {
	text-decoration: underline;
}

.cful-event-lines__sep {
	font-weight: var(--fw-semibold);
}

/* -------------------------------------------------------------------- */
/* Subsite hero statement — serif + department accent (Figma 604:307)   */
/* Only added on department subsites (--accent modifier from hero.php).  */
/* -------------------------------------------------------------------- */

/* Subsite: the copy spans the full row, left-aligned, and the hero sits
 * closer to the accent bar (main site keeps the short right-half statement
 * and its taller top padding). The full-width bottom divider is dropped on
 * desktop — there the accordion list's top border divides in the right half —
 * and restored on mobile where everything stacks full width. */
.cful-hero--dept {
	border-bottom: 0;
	padding-block-start: var(--space-8);
}

@media (max-width: 56.25em) {
	.cful-hero--dept {
		border-bottom: 1px solid var(--cful-black);
	}
}

.cful-hero__copy--wide {
	justify-content: flex-start;
}

.cful-hero__statement--accent {
	color: var(--color-primary);
	font-family: var(--font-serif);
	font-feature-settings: "dlig" 1; /* discretionary ligatures (Figma) */
	font-size: var(--text-3xl); /* Figma 35px → nearest token */
	font-weight: var(--fw-medium);
	line-height: var(--leading-snug);
	max-width: none; /* the grid column bounds the measure, not a fixed max */
}

/* -------------------------------------------------------------------- */
/* Subsite homepage accordions (Figma 604:307 / states 1226:437)        */
/* Native <details> disclosure — opens/closes without JS.               */
/* -------------------------------------------------------------------- */

.cful-accordions {
	padding-block: 0;
}

/* Top divider only from --bp-md up, where the list sits in the right half;
 * on mobile the (full-width) hero bottom border already divides the two. */
@media (max-width: 56.25em) {
	.cful-accordions__list {
		padding-top: var(--space-5);
	}
}

/* The summary is the clickable header row: title left, plus/minus right. */
.cful-accordion__summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	gap: var(--space-5);
	justify-content: space-between;
	list-style: none; /* hide the default disclosure triangle (Firefox) */
	padding-block: var(--space-3);
}

.cful-accordion__summary::-webkit-details-marker {
	display: none; /* hide the default disclosure triangle (WebKit) */
}

.cful-accordion__summary:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Header: accent color, Inter Medium, capitalized (Figma 1226:437). */
.cful-accordion__title {
	color: var(--color-primary);
	font-family: var(--font-sans);
	font-size: var(--text-2xl); /* Figma 27px → nearest token */
	font-weight: var(--fw-medium);
	letter-spacing: -0.02em;
	line-height: var(--leading-tight);
	text-transform: capitalize;
}

/*
 * Plus (closed) / minus (open) toggle, drawn from two bars in the accent color
 * via currentColor so each department tints it automatically. The vertical bar
 * fades out when the box opens, leaving the horizontal minus.
 */
.cful-accordion__icon {
	color: var(--color-primary);
	flex: 0 0 auto;
	height: 1.125rem; /* Figma icon 18px */
	position: relative;
	width: 1.125rem;
}

.cful-accordion__icon::before,
.cful-accordion__icon::after {
	background: currentColor;
	border-radius: 1px;
	content: "";
	inset: 0;
	margin: auto;
	position: absolute;
}

.cful-accordion__icon::before {
	height: 2px; /* horizontal bar — the minus */
	width: 100%;
}

.cful-accordion__icon::after {
	height: 100%; /* vertical bar — completes the plus */
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
	width: 2px;
}

.cful-accordion[open] .cful-accordion__icon::after {
	opacity: 0;
	transform: rotate(90deg);
}

/* Body: large STIX Two Text serif in the standard text ink. */
.cful-accordion__content {
	color: var(--color-text);
	font-family: var(--font-serif);
	font-size: var(--text-2xl); /* Figma 27px → nearest token */
	font-weight: var(--fw-regular);
	letter-spacing: -0.02em;
	line-height: var(--leading-snug);
	padding-bottom: var(--space-6);
}

.cful-accordion__content > :first-child {
	margin-top: 0;
}

.cful-accordion__content > :last-child {
	margin-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
	.cful-accordion__icon::after {
		transition: none;
	}
}