/**
 * Resume Layout CSS - Ensures patterns match original Bootstrap 5 template structure
 * 
 * This CSS automatically positions resume sections in the correct two-column layout
 * to match the original resume.html template structure.
 */

/* Resume Container */
.resume-container {
	max-width: 1140px;
}

/* Resume Wrapper */
.resume-wrapper {
	max-width: 100%;
}

/* Auto-wrap content in resume-body structure if not present */
.resume-wrapper:not(:has(.resume-body)) {
	/* Content will be wrapped automatically */
}

/* Resume Body - Two Column Layout (matches original HTML) */
.resume-wrapper .resume-body {
	display: block;
}

.resume-wrapper .resume-body .row,
.resume-wrapper .resume-body .wp-block-columns.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -15px;
	margin-right: -15px;
}

/* Main Content Column (Left) - matches original */
.resume-wrapper .resume-main,
.resume-wrapper .wp-block-column.resume-main {
	flex: 0 0 auto;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

@media (min-width: 992px) {
	.resume-wrapper .resume-main,
	.resume-wrapper .wp-block-column.resume-main {
		flex: 0 0 auto;
		width: 66.66666667%;
		padding-right: 30px;
	}
}

@media (min-width: 1200px) {
	.resume-wrapper .resume-main,
	.resume-wrapper .wp-block-column.resume-main {
		width: 75%;
	}
}

/* Sidebar Column (Right) - matches original */
.resume-wrapper .resume-aside,
.resume-wrapper .wp-block-column.resume-aside {
	flex: 0 0 auto;
	width: 100%;
	padding-left: 15px;
	padding-right: 15px;
}

@media (min-width: 992px) {
	.resume-wrapper .resume-aside,
	.resume-wrapper .wp-block-column.resume-aside {
		flex: 0 0 auto;
		width: 33.33333333%;
		padding-left: 30px;
		padding-right: 15px;
	}
}

@media (min-width: 1200px) {
	.resume-wrapper .resume-aside,
	.resume-wrapper .wp-block-column.resume-aside {
		width: 25%;
	}
}

/* Auto-structure content if resume-body doesn't exist */
.resume-wrapper:not(:has(.resume-body)) {
	/* If no resume-body, we need to wrap content */
}

/* Ensure proper spacing for HR elements */
.resume-wrapper hr {
	margin: 1.5rem 0;
	border-color: rgba(0, 0, 0, 0.08);
}

.dark-mode .resume-wrapper hr {
	border-color: rgba(255, 255, 255, 0.08);
}

/* Resume Section Headings - matches original */
.resume-wrapper .resume-section-heading {
	font-size: 1.150rem;
	letter-spacing: 0.15em;
	font-weight: 625;
	color: #292929;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}

.dark-mode .resume-wrapper .resume-section-heading {
	color: #e0e0e0;
}

/* Resume Items - matches original */
.resume-wrapper .item {
	margin-bottom: 1.5rem;
}

.resume-wrapper .item:last-child {
	margin-bottom: 0;
}

.resume-wrapper .item-title {
	font-size: 1rem;
	font-weight: 600;
	color: #292929;
	margin-bottom: 0.5rem;
}

.dark-mode .resume-wrapper .item-title {
	color: #e0e0e0;
}

.resume-wrapper .item-meta {
	font-size: 0.875rem;
	color: #767676;
}

.dark-mode .resume-wrapper .item-meta {
	color: #a0a0a0;
}

.resume-wrapper .item-content {
	margin-top: 0.5rem;
}

/* Resume Lists - matches original */
.resume-wrapper .resume-list,
.resume-wrapper .resume-skills-list,
.resume-wrapper .resume-education-list,
.resume-wrapper .resume-awards-list,
.resume-wrapper .resume-lang-list,
.resume-wrapper .resume-interests-list {
	margin-top: 0.5rem;
	margin-bottom: 0;
}

.resume-wrapper .resume-list li,
.resume-wrapper .resume-skills-list li,
.resume-wrapper .resume-education-list li,
.resume-wrapper .resume-awards-list li,
.resume-wrapper .resume-lang-list li,
.resume-wrapper .resume-interests-list li {
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Resume Degree - matches original */
.resume-wrapper .resume-degree {
	font-weight: 600;
	color: #292929;
	margin-bottom: 0.25rem;
}

.dark-mode .resume-wrapper .resume-degree {
	color: #e0e0e0;
}

.resume-wrapper .resume-degree-org,
.resume-wrapper .resume-degree-time {
	font-size: 0.875rem;
	color: #767676;
	margin-bottom: 0.25rem;
}

.dark-mode .resume-wrapper .resume-degree-org,
.dark-mode .resume-wrapper .resume-degree-time {
	color: #a0a0a0;
}

/* Resume Profile Image - matches original */
.resume-wrapper .resume-profile-image {
	max-width: 200px;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Resume Footer - matches original */
.resume-wrapper .resume-footer {
	margin-top: 2rem;
	padding-top: 2rem;
	text-align: center;
}

.resume-wrapper .resume-social-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.resume-wrapper .resume-social-list li {
	display: inline-block;
	margin-right: 1rem;
	margin-bottom: 0.5rem;
}

.resume-wrapper .resume-link {
	color: #767676;
	text-decoration: none;
	transition: color 0.15s ease-in-out;
}

.resume-wrapper .resume-link:hover {
	color: #3B7EEB;
	text-decoration: none;
}

.dark-mode .resume-wrapper .resume-link {
	color: #a0a0a0;
}

.dark-mode .resume-wrapper .resume-link:hover {
	color: #5a9eff;
}

/* Resume Header - matches original */
.resume-wrapper .resume-header {
	margin-bottom: 0;
}

.resume-wrapper .resume-name {
	font-size: 2rem;
	font-weight: 700;
	color: #292929;
	margin-bottom: 0.5rem;
}

.dark-mode .resume-wrapper .resume-name {
	color: #e0e0e0;
}

.resume-wrapper .resume-tagline {
	font-size: 1.125rem;
	color: #767676;
	margin-bottom: 1rem;
}

.dark-mode .resume-wrapper .resume-tagline {
	color: #a0a0a0;
}

.resume-wrapper .resume-contact {
	margin-top: 0;
}

.resume-wrapper .resume-contact ul {
	margin-bottom: 0;
}

.resume-wrapper .resume-contact li {
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
}

/* Resume Intro - matches original */
.resume-wrapper .resume-intro {
	padding: 1.5rem 0;
}

.resume-wrapper .resume-intro p {
	margin-bottom: 0;
	line-height: 1.6;
}

/* Work Section - matches original */
.resume-wrapper .work-section {
	padding: 1.5rem 0;
}

/* Project Section - matches original */
.resume-wrapper .project-section {
	padding: 1.5rem 0;
}

/* Skills Section - matches original */
.resume-wrapper .skills-section {
	padding: 1.5rem 0;
}

/* Education Section - matches original */
.resume-wrapper .education-section {
	padding: 1.5rem 0;
}

/* Ensure WordPress block editor patterns don't break layout */
.resume-wrapper .wp-block-group {
	margin-bottom: 0;
}

.resume-wrapper .wp-block-columns {
	margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 991px) {
	.resume-wrapper .resume-main,
	.resume-wrapper .resume-aside {
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.resume-wrapper .resume-main {
		margin-bottom: 2rem;
	}
}