/**
 * PBEG Shortcodes — Frontend Styles
 *
 * All shortcode components share a school-aware color system that
 * references CSS custom properties defined in the pbeg-theme.
 *
 * @package PBEG_Shortcodes
 * @since   1.0.0
 */


/*
 * SCHOOL COLOR CASCADE
 * Maps school modifier classes to local custom properties so every
 * component just uses var(--pbeg-sc-primary) etc.
 * ==========================================================================
 */

/*
 * v1.4.1 (2026-04-27): role swap. --pbeg-sc-primary now resolves to
 * --prep-primary-dark (#00696c, 6.49:1 with #fff = AA pass). Was
 * --prep-primary (#00b6bb, 2.38:1 = AA fail). The "primary" role in
 * the plugin is consumed as both component bg AND text color (button
 * solid bg, link text, accordion border, callout border, etc.) — at
 * the v1.4.0 mapping every white-on-button or teal-text-on-white
 * surface failed AA. Mirror change in pbeg-theme v1.4.4 already
 * landed for theme rules; the plugin had been overlooked.
 *
 * --pbeg-sc-primary-dark is now reserved for hover-darker-still
 * (button :hover bg). Was the same as primary in the prior mapping.
 */
.pbeg-sc--pbeg,
.pbeg-sc--prep,
.pbeg-sc--elementary {
	--pbeg-sc-primary: var(--prep-primary-dark, #00696c);
	--pbeg-sc-primary-dark: #004f52;
	--pbeg-sc-accent: var(--prep-accent, #aac740);
}

.pbeg-sc--chs {
	--pbeg-sc-primary: var(--chs-primary, #1b3b6b);
	--pbeg-sc-primary-dark: var(--chs-primary-dark, #152d52);
	--pbeg-sc-accent: var(--chs-accent, #52b748);
}


/*
 * ACCORDION
 * ==========================================================================
 */

.pbeg-sc-accordion {
	border: 1px solid var(--pbeg-border, #e5e5e5);
	border-radius: 8px;
	margin-bottom: 0.75rem;
	overflow: hidden;
}

.pbeg-sc-accordion .pbeg-sc-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 1rem 1.25rem;
	border: 0;
	border-radius: 0;
	background: var(--pbeg-bg, #fff);
	color: var(--pbeg-dark-text, #1a1a1a);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.pbeg-sc-accordion .pbeg-sc-accordion__trigger:hover,
.pbeg-sc-accordion .pbeg-sc-accordion__trigger:focus-visible {
	background: #f4f6f8;
}

.pbeg-sc-accordion .pbeg-sc-accordion__trigger:focus-visible {
	outline: 2px solid var(--pbeg-sc-primary);
	outline-offset: -2px;
}

.pbeg-sc-accordion__icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-left: 1rem;
	transition: transform 0.25s ease;
}

.pbeg-sc-accordion__icon::before {
	content: "";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	margin: 0.25rem auto 0;
	border-right: 2px solid var(--pbeg-sc-primary);
	border-bottom: 2px solid var(--pbeg-sc-primary);
	transform: rotate(-45deg);
	transition: transform 0.25s ease;
}

.pbeg-sc-accordion--open .pbeg-sc-accordion__icon::before {
	transform: rotate(45deg);
	margin-top: 0.375rem;
}

.pbeg-sc-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.pbeg-sc-accordion--open .pbeg-sc-accordion__panel {
	grid-template-rows: 1fr;
}

.pbeg-sc-accordion__content {
	overflow: hidden;
}

.pbeg-sc-accordion--open .pbeg-sc-accordion__content {
	padding: 0 1.25rem 1rem;
}

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

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

/* Left accent border on the active accordion */
.pbeg-sc-accordion--open {
	border-left: 3px solid var(--pbeg-sc-primary);
}


/*
 * TABS
 * ==========================================================================
 */

.pbeg-sc-tabs {
	margin-bottom: 1.5rem;
}

.pbeg-sc-tabs__list {
	display: flex;
	gap: 0;
	border-bottom: 2px solid var(--pbeg-border, #e5e5e5);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.pbeg-sc-tabs__list::-webkit-scrollbar {
	display: none;
}

.pbeg-sc-tabs .pbeg-sc-tabs__tab {
	flex-shrink: 0;
	padding: 0.75rem 1.25rem;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	margin-bottom: -2px;
	background: transparent;
	color: var(--pbeg-subtle-text, #999);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.pbeg-sc-tabs .pbeg-sc-tabs__tab:hover {
	color: var(--pbeg-dark-text, #1a1a1a);
}

.pbeg-sc-tabs .pbeg-sc-tabs__tab[aria-selected="true"] {
	color: var(--pbeg-sc-primary);
	border-bottom-color: var(--pbeg-sc-primary);
}

.pbeg-sc-tabs .pbeg-sc-tabs__tab:focus-visible {
	outline: 2px solid var(--pbeg-sc-primary);
	outline-offset: -2px;
}

.pbeg-sc-tabs__panel {
	padding: 1.25rem 0.5rem;
}

.pbeg-sc-tabs__panel > :first-child {
	margin-top: 0;
}

.pbeg-sc-tabs__panel > :last-child {
	margin-bottom: 0;
}

/*
 * Hide non-active panels — the [hidden] attribute handles this,
 * but we add display:none as a fallback for older browsers.
 */
.pbeg-sc-tabs__panel[hidden] {
	display: none;
}

/* Mobile: horizontal scroll hint */
@media (max-width: 600px) {
	.pbeg-sc-tabs__list {
		gap: 0;
	}

	.pbeg-sc-tabs .pbeg-sc-tabs__tab {
		padding: 0.625rem 1rem;
		font-size: 0.875rem;
	}
}


/*
 * ALERT
 * ==========================================================================
 */

.pbeg-sc-alert {
	display: flex;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-radius: 6px;
	border-left: 4px solid var(--pbeg-sc-primary);
	margin-bottom: 1.5rem;
}

.pbeg-sc-alert__icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	font-size: 1.125rem;
	line-height: 1.25rem;
	text-align: center;
}

.pbeg-sc-alert__body {
	flex: 1;
	min-width: 0;
}

.pbeg-sc-alert__title {
	display: block;
	font-weight: 700;
	margin-bottom: 0.25rem;
	color: var(--pbeg-dark-text, #1a1a1a);
}

.pbeg-sc-alert__content > :first-child {
	margin-top: 0;
}

.pbeg-sc-alert__content > :last-child {
	margin-bottom: 0;
}

/* Info type — uses school primary color */
.pbeg-sc-alert--info {
	background: #f0f9fa;
	border-left-color: var(--pbeg-sc-primary);
}

.pbeg-sc-alert--info .pbeg-sc-alert__icon::before {
	content: "\2139";
	color: var(--pbeg-sc-primary);
}

/* Warning type — amber */
.pbeg-sc-alert--warning {
	background: #fffbeb;
	border-left-color: #d97706;
}

.pbeg-sc-alert--warning .pbeg-sc-alert__icon::before {
	content: "\26A0\FE0F";
	color: #d97706;
}

/* Success type — green */
.pbeg-sc-alert--success {
	background: #f0fdf4;
	border-left-color: #16a34a;
}

.pbeg-sc-alert--success .pbeg-sc-alert__icon::before {
	content: "\2713";
	color: #16a34a;
}

/* CHS info alerts use a navy-tinted background instead of teal-tinted */
.pbeg-sc--chs.pbeg-sc-alert--info {
	background: #f0f2f6;
}


/*
 * CARD
 * ==========================================================================
 */

.pbeg-sc-card {
	display: block;
	background: var(--pbeg-bg, #fff);
	border-radius: 8px;
	border-left: 4px solid var(--pbeg-sc-primary);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	padding: 1.25rem 1.5rem;
	margin-bottom: 1.5rem;
	text-decoration: none;
	color: var(--pbeg-body-text, #546563);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pbeg-sc-card--linked:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.pbeg-sc-card--linked:focus-visible {
	outline: 2px solid var(--pbeg-sc-primary);
	outline-offset: 2px;
}

.pbeg-sc-card__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.pbeg-sc-card__icon {
	color: var(--pbeg-sc-primary);
	font-size: 1.25rem;
	line-height: 1;
}

.pbeg-sc-card__title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--pbeg-dark-text, #1a1a1a);
}

.pbeg-sc-card__body > :first-child {
	margin-top: 0;
}

.pbeg-sc-card__body > :last-child {
	margin-bottom: 0;
}

/*
 * Card body link color — only applies to non-linked cards. Linked cards
 * have their inner anchors stripped at render time, so this rule never
 * fires on them.
 */
.pbeg-sc-card:not(.pbeg-sc-card--linked) .pbeg-sc-card__body a {
	color: var(--pbeg-sc-primary);
	text-decoration: underline;
}

.pbeg-sc-card:not(.pbeg-sc-card--linked) .pbeg-sc-card__body a:hover,
.pbeg-sc-card:not(.pbeg-sc-card--linked) .pbeg-sc-card__body a:focus-visible {
	color: var(--pbeg-sc-primary-dark);
}


/*
 * BUTTON
 * ==========================================================================
 */

.pbeg-sc-button-wrap {
	display: inline-block;
}

/*
 * When wpautop strips the <p> wrapper on a lone button, the span becomes a
 * direct child of .is-layout-constrained where margin:auto resolves to 0 on
 * inline-block. Switch to block so WP core's auto margins center it.
 */
.is-layout-constrained > .pbeg-sc-button-wrap {
	display: block;
}

/*
 * Selectors are scoped under .pbeg-sc-button-wrap to beat Astra's
 * .entry-content a rule — specificity (0,2,1) plus later source
 * order (our CSS enqueues during the_content render).
 */

.pbeg-sc-button-wrap a.pbeg-sc-button {
	display: inline-block;
	padding: 0.625rem 1.5rem;
	border-radius: 4px;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

	/* Solid style (default) */
	background: var(--pbeg-sc-primary);
	color: #fff;
}

.pbeg-sc-button-wrap a.pbeg-sc-button:hover {
	background: var(--pbeg-sc-primary-dark);
	color: #fff;
	text-decoration: none;
}

/*
 * Two-ring focus — inner white outline guarantees a visible separation from
 * the button's own background even when the button sits on a colored or
 * complex page background where the previous accent-colored outline would
 * blend in. The outer box-shadow ring uses primary-dark for a high-contrast
 * outer edge against light card backgrounds.
 */
.pbeg-sc-button-wrap a.pbeg-sc-button:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -1px;
	box-shadow: 0 0 0 4px var(--pbeg-sc-primary-dark);
}

/* Outline variant */
.pbeg-sc-button-wrap a.pbeg-sc-button--outline {
	background: transparent;
	color: var(--pbeg-sc-primary);
	box-shadow: inset 0 0 0 2px var(--pbeg-sc-primary);
}

.pbeg-sc-button-wrap a.pbeg-sc-button--outline:hover {
	background: var(--pbeg-sc-primary);
	color: #fff;
}

/* Size: small */
.pbeg-sc-button-wrap a.pbeg-sc-button--small {
	padding: 0.375rem 1rem;
	font-size: 0.825rem;
}

/* Size: large */
.pbeg-sc-button-wrap a.pbeg-sc-button--large {
	padding: 0.875rem 2rem;
	font-size: 1.1rem;
}


/*
 * TESTIMONIAL
 * ==========================================================================
 */

.pbeg-sc-testimonial {
	position: relative;
	background: var(--pbeg-bg, #fff);
	border-radius: 8px;
	border-left: 4px solid var(--pbeg-sc-primary);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	padding: 2.5rem 1.75rem 1.5rem;
	margin: 0 0 1.5rem;
	color: var(--pbeg-body-text, #546563);
	overflow: hidden;
}

.pbeg-sc-testimonial__mark {
	position: absolute;
	top: -0.75rem;
	left: 0.75rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 6rem;
	line-height: 1;
	font-weight: 700;
	color: var(--pbeg-sc-primary);
	opacity: 0.22;
	pointer-events: none;
	user-select: none;
}

.pbeg-sc-testimonial__quote {
	margin: 0 0 1rem;
	padding: 0;
	border: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	font-style: italic;
	color: var(--pbeg-dark-text, #1a1a1a);
}

.pbeg-sc-testimonial__quote > :first-child {
	margin-top: 0;
}

.pbeg-sc-testimonial__quote > :last-child {
	margin-bottom: 0;
}

.pbeg-sc-testimonial__attribution {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.pbeg-sc-testimonial__image {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.pbeg-sc-testimonial__author-block {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.pbeg-sc-testimonial__author {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--pbeg-dark-text, #1a1a1a);
}

.pbeg-sc-testimonial__role {
	font-size: 0.825rem;
	color: var(--pbeg-body-text, #546563);
}


/*
 * SUBPAGES
 * Auto-detecting child/sibling nav for school sidebars.
 * Uses native <a> elements so keyboard and screen readers work for free.
 * ==========================================================================
 */

.pbeg-sc-subpages {
	width: 100%;
	margin: 0 0 1.5rem;
	color: var(--pbeg-body-text, #546563);
}

.pbeg-sc-subpages__title {
	margin: 0 0 0.5rem;
	padding: 0 0 0.375rem;
	border-bottom: 2px solid var(--pbeg-sc-primary);
	color: var(--pbeg-sc-primary-dark);
	font-size: clamp(0.875rem, 2.5vw, 1rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.pbeg-sc-subpages__list,
.pbeg-sc-subpages__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pbeg-sc-subpages__sublist {
	margin: 0.25rem 0 0.25rem 1rem;
	font-size: 0.925em;
}

.pbeg-sc-subpages__item {
	margin: 0;
	padding: 0;
}

.pbeg-sc-subpages .pbeg-sc-subpages__link {
	display: block;
	color: var(--pbeg-dark-text, #1a1a1a);
	font-size: 0.95rem;
	line-height: 1.4;
	text-decoration: none;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.pbeg-sc-subpages .pbeg-sc-subpages__link:focus-visible {
	outline: 2px solid var(--pbeg-sc-accent);
	outline-offset: 2px;
}


/* Text variant — vertical link list with left accent on current/hover. */

.pbeg-sc-subpages--text .pbeg-sc-subpages__link {
	padding: 0.5rem 0.75rem;
	border-left: 3px solid transparent;
}

@media (prefers-reduced-motion: no-preference) {

	.pbeg-sc-subpages--text .pbeg-sc-subpages__link {
		transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
	}
}

.pbeg-sc-subpages--text .pbeg-sc-subpages__link:hover {
	background: rgba(0, 0, 0, 0.04);
	border-left-color: var(--pbeg-sc-primary);
	color: var(--pbeg-sc-primary-dark);
}

.pbeg-sc-subpages--text .pbeg-sc-subpages__link--current {
	background: rgba(0, 0, 0, 0.05);
	border-left-color: var(--pbeg-sc-primary);
	color: var(--pbeg-sc-primary-dark);
	font-weight: 600;
}


/* Button variant — stacked pills, current filled with school color. */

.pbeg-sc-subpages--button .pbeg-sc-subpages__item {
	margin-bottom: 0.375rem;
}

.pbeg-sc-subpages--button .pbeg-sc-subpages__link {
	padding: 0.625rem 1rem;
	border-radius: 4px;
	background: transparent;
	color: var(--pbeg-sc-primary-dark);
	font-weight: 600;
	box-shadow: inset 0 0 0 2px var(--pbeg-sc-primary);
	text-align: left;
}

@media (prefers-reduced-motion: no-preference) {

	.pbeg-sc-subpages--button .pbeg-sc-subpages__link {
		transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
	}
}

.pbeg-sc-subpages--button .pbeg-sc-subpages__link:hover {
	background: var(--pbeg-sc-primary);
	color: #fff;
}

.pbeg-sc-subpages--button .pbeg-sc-subpages__link--current {
	background: var(--pbeg-sc-primary-dark);
	color: #fff;
	box-shadow: inset 0 0 0 2px var(--pbeg-sc-primary-dark);
}


/* Mobile — bigger tap targets, meets WCAG 2.5.5 / 2.5.8. */

@media (max-width: 768px) {

	.pbeg-sc-subpages .pbeg-sc-subpages__link {
		min-height: 44px;
		padding: 0.75rem 1rem;
		display: flex;
		align-items: center;
		font-size: 1rem;

		/*
		 * Tighter line-height balances the visible glyphs in the 44px tap
		 * target. Default body line-height (~1.5) leaves the rendered text
		 * sitting above geometric center because sans-serif font metrics
		 * distribute leading asymmetrically. 1.2 still allows descenders
		 * (y, g, p, q) to render fully.
		 */
		line-height: 1.2;
	}

	.pbeg-sc-subpages--button .pbeg-sc-subpages__item {
		margin-bottom: 0.5rem;
	}

	.pbeg-sc-subpages__sublist {
		margin-left: 0.75rem;
	}
}


/*
 * SECTION PHOTO  (v1.5.0)
 * ==========================================================================
 *
 * Mobile-only decorative photo inside the content flow. Author drops it
 * between H2 sections to give visual life to long-text pages on phones.
 * Desktop hides it entirely — desktop relies on the gutter-photo pattern
 * (theme-owned) for visual decoration instead, so this is the fallback,
 * not an addition.
 *
 * Default: 4:5 portrait crop, full content-width, biased to keep heads
 * at the top of the source (object-position: center top).
 *
 * Landscape phone (height <=600px in landscape): switches to a centered
 * 16:9 frame at 60% width — keeps the photo visible but stops it from
 * dominating the short viewport.
 *
 * Cross-reference: gutter-photos-design.md (the broader pattern this
 * shortcode is the mobile half of).
 */

.pbeg-sc-section-photo {
	display: block;
	margin: 28px 0;
	padding: 0;
}

.pbeg-sc-section-photo__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

@media (min-width: 1024px) {

	.pbeg-sc-section-photo {
		display: none;
	}
}

@media (orientation: landscape) and (max-height: 600px) {

	.pbeg-sc-section-photo__img {
		width: 60%;
		max-width: 500px;
		aspect-ratio: 16 / 9;
		margin: 0 auto;
	}
}


/*
 * REDUCED MOTION
 * ==========================================================================
 *
 * Respects the user's OS-level "reduce motion" preference. Subpages already
 * self-guard their transitions; this rule covers the other shortcodes
 * (accordion, tabs, card, button) whose transitions were declared
 * unconditionally. We don't disable motion entirely (transitions are still
 * useful for state feedback) — we collapse them to ~0ms so the visual
 * change is instantaneous.
 */

@media (prefers-reduced-motion: reduce) {

	.pbeg-sc-accordion__trigger,
	.pbeg-sc-accordion__icon,
	.pbeg-sc-accordion__icon::before,
	.pbeg-sc-accordion__panel,
	.pbeg-sc-tabs .pbeg-sc-tabs__tab,
	.pbeg-sc-card,
	.pbeg-sc-button-wrap a.pbeg-sc-button {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}
}