/**
 * Community News Roles Page Styles
 * Created: October 28, 2025
 */

 #cnn_content h2.wp-block-heading {
	padding-bottom: 0;
	margin-top: 5rem !important;
 }

/* ==========================================================================
   Hero Section
   ========================================================================== */

.cnn-roles-hero {
	margin: 0 0 6rem 0;
	text-align: center;
}

/* Desktop: Hide mobile images, show desktop image, visually hide headings */
@media (min-width: 768px) {
	.cnn-roles-hero__mobile-top,
	.cnn-roles-hero__mobile-bottom {
		display: none;
	}

	.cnn-roles-hero__desktop {
		display: block;
	}

	/* Visually hidden but accessible for screen readers and SEO */
	.cnn-roles-hero__headings {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
}

/* Mobile: Hide desktop image, show mobile images and headings */
@media (max-width: 767px) {
	.cnn-roles-hero__desktop {
		display: none;
	}

	.cnn-roles-hero__mobile-top,
	.cnn-roles-hero__mobile-bottom {
		display: block;
		margin-bottom: 2rem;
	}

	.cnn-roles-hero__headings {
		display: block;
		margin: 2rem 0;
		padding: 0 1rem;
	}

	body.community-section h1.cnn-roles-hero__title {
		font-family: 'gt-pressura-mono-bold', monospace;
		font-size: 1.5rem;
		line-height: 1.2;
		color: #dcf500; /* Yellow */
		text-transform: uppercase;
		margin-bottom: 1rem;
		padding-bottom: 0.5rem;
		/* border-bottom: 4px solid #dcf500; */
		display: inline-block;
	}

	.cnn-roles-hero__subtitle {
		font-family: 'gt-sectra-bold', serif;
		font-size: 1.5rem;
		line-height: 1.4;
		color: #ffffff;
		margin-top: 1rem;
	}
}

/* All images responsive */
.cnn-roles-hero img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Jump Menu (Flat Version Only)
   ========================================================================== */

.cnn-roles-jump-menu {
	margin: 3rem 0 2rem;
	padding: 0;
	background-color: transparent;
	text-align: center;
}

.cnn-roles-jump-menu__inner {
	/* max-width: 1200px; */
	margin: 0 auto;
}

.cnn-roles-jump-menu__label {
	font-family: 'gt-pressura-mono-bold', monospace;
	font-size: 1.3rem !important;
	text-transform: uppercase;
	color: #ffffff;
	margin-bottom: 1.5rem;
}

.cnn-roles-jump-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}

ul.cnn-roles-jump-menu__list li:first-child {margin-top: .625em !important; }
li.cnn-roles-jump-menu__item {
	margin: 0 !important;
	background-image:none !important;
	font-size: 1.3rem;
	/* text-align:center; */
	padding: 0;
}

.cnn-roles-jump-menu__link {
	font-family: 'gt-pressura-mono-bold', monospace;
	font-size: 1.3rem !important;
	text-transform: uppercase;
	color: #dcf500;
	text-decoration: none;
	transition: all 0.3s ease;
	display: inline-block;
	position: relative;
	text-decoration-thickness: 3px;
}

.cnn-roles-jump-menu__link:hover {
	color: #ffffff;
	text-decoration: underline;
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

/* Smooth scroll behavior */
html {
	scroll-behavior: smooth;
}

/* Add scroll offset for anchor links */
.role-card {
	scroll-margin-top: 2rem;
}

/* Responsive adjustments for jump menu */
@media (max-width: 767px) {
	.cnn-roles-jump-menu {
		margin: 2rem 0 1.5rem;
	}

	.cnn-roles-jump-menu__label {
		font-size: 0.85rem;
		margin-bottom: 1rem;
	}

	.cnn-roles-jump-menu__list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 2rem; /* gutter between columns */
		row-gap: 30px; /* vertical spacing between rows */
	}

	/* Reset first-child margin on mobile */
	ul.cnn-roles-jump-menu__list li:first-child {
		margin-top: 0 !important;
	}

	/* Left column items: flush right */
	.cnn-roles-jump-menu__item:nth-child(odd) {
		text-align: right;
		padding: 0 !important;
	}

	/* Right column items: flush left */
	.cnn-roles-jump-menu__item:nth-child(even) {
		text-align: left;
		padding: 0 !important;
	}

	.cnn-roles-jump-menu__link {
		font-size: 0.95rem;
		padding: 0;
	}
}

/* ==========================================================================
   Role Cards Section
   ========================================================================== */

.cnn-roles-cards {
	margin: 4rem 0;
}

.role-card {
	margin-bottom: 4rem;
	align-items: start;
}

/* Left Column: Graphic */
.role-card__graphic {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 1rem;
	top: 2rem;
}

.role-card__graphic img {
	max-width: 100%;
	height: auto;
}

/* Right Column: Content */
.role-card__content {
	padding-left: 2rem;
}

.role-card__title {
	font-family: 'gt-pressura-mono-bold', monospace;
	font-size: 2.5rem;
	line-height: 1.2;
	color: #dcf500; /* Yellow */
	text-transform: uppercase;
	margin-bottom: 1.5rem;
	padding-bottom: 0.75rem;
	display: inline-block;
	margin-top: 1em !important;
}

.role-card__description {
	font-family: 'gt-sectra-regular', serif;
	font-size: 1.25rem;
	line-height: 1.6;
	color: #ffffff;
}
.role-card__description h2 {
	margin-bottom:2rem;
}
.role-card__description p {
	margin-bottom: 1rem;
}

.role-card__description p:last-child {
	margin-bottom: 0;
}

/* Examples Section */
.role-card__examples {
	position: relative;
	margin-top: 1rem;
	border-top: 3px solid #fff;
	padding-top: 2rem;
	padding-bottom: 3rem;
	overflow: visible;
}

.role-card__examples-title {
	font-family: 'gt-pressura-mono-bold', monospace;
	font-size: 1.25rem;
	line-height: 1.2;
	color: #dcf500;
	text-transform: uppercase;
	text-align: center;
	margin-top: 1em;
	margin-bottom: 0;
	letter-spacing: 0.05em;
	margin-top:.5em;
}

/* ==========================================================================
   Bootstrap Carousel Customization
   ========================================================================== */

.role-card__carousel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	border-bottom: 3px solid #fff;
	position: relative;
	overflow: hidden;
}

.role-card__carousel .carousel-inner {
	flex: 1;
	border-radius: 0;
	min-height: 250px;
	position: relative;
	overflow: visible;
	display: flex;
	flex-wrap: nowrap;
	transition: transform 0.6s ease-in-out;
	z-index: 1;
}

/* Filmstrip pattern - all items laid out horizontally, no individual transforms */
.role-card__carousel .carousel-item {
	flex: 0 0 100%;
	width: 100%;
	position: relative;
	text-align: center;
	display: block !important;
	padding: 2rem 5rem;
	box-sizing: border-box;
}

/* Example Content */
.example-content {
	color: #ffffff;
	text-align: center;
}

.example-title {
	font-family: 'gt-pressura-mono-bold', monospace;
	font-size: 1rem;
	line-height: 1.3;
	color: #fff !important; 
	text-transform: uppercase;
	margin-bottom: 1.5rem;
}

.example-description {
	font-family: 'gt-sectra-regular', serif;
	font-size: 1.1rem;
	line-height: 1.6;
	color: #ffffff;
}

.example-description p {
	margin-bottom: 1rem;
}

.example-description p:last-child {
	margin-bottom: 0;
}

/* Carousel Controls (Arrows) - Flex items flanking the carousel */
.role-card__carousel .carousel-control-prev,
.role-card__carousel .carousel-control-next {
	position: relative;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background-color: transparent;
	border: none;
	opacity: 1;
	transform: none;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
}

.role-card__carousel .carousel-control-prev {
	order: -1; /* Position before carousel-inner */
}

.role-card__carousel .carousel-control-next {
	order: 1; /* Position after carousel-inner */
}

/* Custom arrow icons using SVG images */
.role-card__carousel .carousel-control-prev-icon,
.role-card__carousel .carousel-control-next-icon {
	display: block;
	width: 40px;
	height: 40px;
	background-color: transparent;
	background-size: contain;
	background-repeat: no-repeat;
	transition: opacity 0.3s ease;
}

.role-card__carousel .carousel-control-prev-icon {
	background-image: url('../images/arrow_left_yellow.svg');
	background-position: left center;
}

.role-card__carousel .carousel-control-next-icon {
	background-image: url('../images/arrow_right_yellow.svg');
	background-position: right center;
}

.role-card__carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.role-card__carousel .carousel-control-next:hover .carousel-control-next-icon {
	opacity: 0.7; /* Slight fade on hover */
}

/* Hide the "Previous"/"Next" text */
.role-card__carousel .visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Carousel Indicators (Dots) - Inside carousel, positioned absolutely below */
.role-card__carousel .carousel-indicators {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 0 1em 0;
	padding: 0;
	list-style: none;
	z-index: 5;
}

.role-card__carousel .carousel-indicators button {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: #666;
	border: none;
	margin: 0 6px;
	opacity: 1;
	transition: background-color 0.3s ease;
	padding: 0;
}

.role-card__carousel .carousel-indicators button.active {
	background-color: #dcf500;
}

.role-card__carousel .carousel-indicators button:hover {
	background-color: #50f5f0;
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 767px) {
	.cnn-roles-cards {
		margin: 2rem 0;
	}

	.role-card {
		margin-bottom: 3rem;
		display: flex;
		flex-direction: column;
	}

	.role-card__graphic {
		position: static;
		margin-bottom: 2rem;
	}

	.role-card__content {
		padding-left: 0;
	}

	.role-card__title {
		font-size: 1.75rem;
	}

	.role-card__description {
		font-size: 1rem;
	}

	.role-card__examples {
		margin-top: 2.5rem;
		padding: 0 0 3rem 0;
		max-width: 100%;
		overflow: hidden;
	}

	.role-card__examples-title {
		font-size: 1.3rem;
		margin-bottom: 0;
	}

	.role-card__carousel {
		gap: 10px;
		flex-direction: column;
		width: 100%;
		max-width: 100%;
	}

	.role-card__carousel .carousel-inner {
		order: 0;
		width: 100%;
		max-width: 100%;
	}

	.role-card__carousel .carousel-item {
		padding: 2rem 2.5rem 4rem 2.5rem;
		text-align: center;
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.role-card__carousel .carousel-control-prev,
	.role-card__carousel .carousel-control-next {
		width: 40px;
		height: 40px;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.role-card__carousel .carousel-control-prev {
		left: -5px;
		order: unset;
	}

	.role-card__carousel .carousel-control-next {
		right: -5px;
		order: unset;
	}

	.role-card__carousel .carousel-control-prev-icon,
	.role-card__carousel .carousel-control-next-icon {
		width: 40px;
		height: 40px;
	}

	.role-card__carousel .carousel-indicators {
		bottom: 20px;
	}

	.example-title {
		font-size: 1rem;
		margin-bottom: 1rem;
	}

	.example-description {
		font-size: 1rem;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.role-card__title {
		font-size: 2rem;
	}

	.role-card__description {
		font-size: 1.1rem;
	}

	.role-card__carousel .carousel-item {
		padding: 2.5rem 1.5rem;
	}

	.example-title {
		font-size: 1.35rem;
	}
}

/* ==========================================================================
   Tabbed Interface (for page-community-news-roles-tabbed.php)
   ========================================================================== */

.cnn-roles-tabbed {
	margin: 4rem 0;
}

/* Desktop-only: Tabbed interface styles */
@media (min-width: 768px) {
	/* Hide jump menu on desktop (only show on mobile) */
	.cnn-roles-tabbed .cnn-roles-jump-menu {
		display: none;
	}

	/* Tab Navigation */
	.role-tabs {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		margin-bottom: 2rem;
		padding: 0;
		border-bottom: 2px solid #373737;
	}

	.role-tab {
		font-family: 'gt-pressura-mono-bold', monospace;
		font-size: 1rem;
		text-transform: uppercase;
		background-color: transparent;
		color: #e1e1e1;
		border: none;
		border-bottom: 4px solid transparent;
		padding: 0.75rem 1.25rem;
		cursor: pointer;
		transition: all 0.3s ease;
		position: relative;
		margin-bottom: -2px;
	}

	.role-tab:hover {
		color: #50f5f0;
		background-color: rgba(80, 245, 240, 0.1);
	}

	.role-tab.active {
		color: #dcf500;
		border-bottom-color: #dcf500;
		background-color: rgba(220, 245, 0, 0.1);
	}

	.role-tab:focus {
		outline: 2px solid #50f5f0;
		outline-offset: 2px;
	}

	/* Tab Content */
	.role-tabs-content {
		position: relative;
		min-height: 400px;
	}

	.role-content {
		display: none;
	}

	.role-content.active {
		display: block;
		animation: fadeIn 0.3s ease-in;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Single role card (tabbed version) */
	.role-card--single {
		/* max-width: 1200px; */
		margin: 0 auto;
		align-items: start;
	}

	/* Tabbed version: Graphic positioning */
	.role-card--single .role-card__graphic {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		padding: 1rem;
	}

	.role-card--single .role-card__graphic img {
		max-width: 100%;
		height: auto;
	}

	/* Tabbed version: Content positioning */
	.role-card--single .role-card__content {
		padding-left: 2rem;
	}
}

/* Mobile: flat layout (no tabs) */
@media (max-width: 767px) {
	.cnn-roles-tabbed {
		margin: 2rem 0;
	}

	/* Hide tab navigation on mobile */
	.role-tabs {
		display: none !important;
	}

	/* Show all role content on mobile (flat layout) */
	.role-content {
		display: block !important;
	}

	/* Add separators between role cards on mobile */
	.role-content + .role-content {
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: 2px solid #373737;
	}

	/* Mobile stacking for role cards */
	.role-card--single {
		display: flex;
		flex-direction: column;
	}

	.role-card--single .role-card__graphic {
		position: static;
		margin-bottom: 1rem;
		padding: 0;
	}

	.role-card--single .role-card__content {
		padding-left: 0;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	.role-tab {
		font-size: 0.8rem;
		padding: 0.65rem 1rem;
	}
}

/* ==========================================================================
   Callout Section Styling
   ========================================================================== */

.callout a.btn {
	background-color: #dcf500;
	color: #373737;
	padding: 20px 50px;
}

.callout h3 {
	color: #373737;
}

.community-section .callout.g-col-12  { padding: 100px 200px !important;}