/* ----------------------------------------------------------------
    Resume demo styles
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: #7B6ED6;
	--cnvs-themecolor-rgb: 123, 110, 214;

	--cnvs-body-font: 'Source Sans Pro', sans-serif;
	--cnvs-primary-font: 'Playfair Display', serif;
}

#header {
	z-index: 299;
	--cnvs-header-border-color: transparent;
}

.menu-container > .menu-item > .menu-link i {
	display: none;
}

.is-expanded-menu .menu-container > .menu-item:not(:first-child) { margin-left: 17px; }

.is-expanded-menu .menu-container > .menu-item > .menu-link {
	width: 50px;
	height: 50px;
	line-height: 50px;
	margin: 18px 0;
	padding: 0;
	color: #FFF;
	font-size: 20px;
	letter-spacing: 0;
	text-align: center;
	border-radius: 50%;
	background-color: #F9F9F9;
	color: #333;
	box-shadow: 0 7px 14px rgba(0,0,0,0.13), 0 5px 5px rgba(0,0,0,0.08);
	transition: all .3s ease;
}

.is-expanded-menu .menu-container > .menu-item > .menu-link div {
	opacity: 0;
	position: absolute;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #FFF;
	font-family: 'Source Sans Pro', sans-serif;
	text-transform: uppercase;
	-webkit-transition-delay: 0.35s;
	transition-delay: 0.35s;
	margin-left: 50%;
	-webkit-transform: translate3d(-50%, -20px, 0);
	transform: translate3d(-50%, -20px, 0);
	-webkit-transition: all 400ms cubic-bezier(0.2, 1, 0.3, 1);
	-moz-transition: all 400ms cubic-bezier(0.2, 1, 0.3, 1);
	-ms-transition: all 400ms cubic-bezier(0.2, 1, 0.3, 1);
	-o-transition: all 400ms cubic-bezier(0.2, 1, 0.3, 1);
	transition: all 400ms cubic-bezier(0.2, 1, 0.3, 1);
	-webkit-backface-visibility: hidden;
	text-shadow: 0 0px 7px rgba(0,0,0,0.4), 0 0px 7px rgba(0,0,0,0.2);
}

.is-expanded-menu .menu-container > .menu-item > .menu-link:hover div {
	opacity: 1 !important;
	-webkit-transition: -webkit-transform 1.2s, opacity 1.2s;
	transition: transform 1.2s, opacity 1.2s;
	-webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
	-webkit-transform: translate3d(-50%, -10px, 0);
	transform: translate3d(-50%, -10px, 0);
}

.is-expanded-menu .menu-container > .menu-item > .menu-link i {
	display: block;
	position: relative;
	font-size: 16px;
	width: 52px;
	height: 52px;
	line-height: 50px;
	text-align: center;
	margin-right: 0;
	vertical-align: middle;
	border-radius: 50%;
}

.is-expanded-menu .menu-container > .menu-item:hover > .menu-link,
.is-expanded-menu .menu-container > .menu-item.current > .menu-link {
	background-color: #7B6ED6;
	color: #FFF !important;
}

@media (min-width: 992px) {

	#header.sticky-header.transparent-header.sticky-transparent #header-wrap {
		background-color: transparent;
		box-shadow: none;
	}

	#header.sticky-header.transparent-header.sticky-transparent #header-wrap .primary-menu ul li > a div { opacity: 0; }

	#logo a {
		color: #FFF;
		font-size: 26px;
		font-weight: 600;
		letter-spacing: -0.5px;
		text-shadow: 0 4px 10px rgba(0,0,0,0.4), 0 4px 4px rgba(0,0,0,0.2);
	}

	.slider-element .slider-caption h2 {
		font-weight: 900;
		font-size: 80px;
	}

}

.slider-element .slider-caption p {
	font-size: 24px;
	color: #AAA;
}

.slider-element .more-link {
	font-size: 22px;
	font-style: normal;
}

.page-section { padding: 120px 0; }

.heading-block h2 {
	font-size: 38px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
}

.demo-resume-works [class^=col-] {
	position: relative;
	margin: 0;
	padding: 0;
}

.demo-resume-works [class^=col-] > a {
	display: block;
	position: relative;
	height: 450px;
	background-color: #EEE;
}

.demo-resume-works .resume-works-overlay {
	position: absolute;
	opacity: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 50px;
	background-color: rgba(0,0,0,0.7);
	-webkit-transition: opacity .3s ease;
	-o-transition: opacity .3s ease;
	transition: opacity .3s ease;
}

.demo-resume-works [class^=col-] > a:hover .resume-works-overlay { opacity: 1; }

.demo-resume-works .resume-works-overlay h3 {
	position: relative;
	top: -30px;
	opacity: 0;
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	-webkit-transition: all .3s .15s ease;
	-o-transition: all .3s .15s ease;
	transition: all .3s .15s ease;
}

.demo-resume-works .resume-works-overlay span {
	position: relative;
	top: -20px;
	opacity: 0;
	text-transform: uppercase;
	margin-top: 5px;
	font-weight: 300;
	font-size: 15px;
	-webkit-transition: all .3s .25s ease;
	-o-transition: all .3s .25s ease;
	transition: all .3s .25s ease;
}

.demo-resume-works [class^=col-] > a:hover .resume-works-overlay h3,
.demo-resume-works [class^=col-] > a:hover .resume-works-overlay span {
	top: 0;
	opacity: 1;
}

.blurred-img {
    -webkit-transform: scale(1.01) translate3d(0,0,0);
    -ms-transform: scale(1.01) translate3d(0,0,0);
    -o-transform: scale(1.01) translate3d(0,0,0);
    transform: scale(1.01) translate3d(0,0,0);
    -webkit-filter: blur(8px);
    filter: blur(8px);
    -webkit-backface-visibility: hidden;
    opacity: 0;
    display: none;
}

.blurred-img.blurred-image-visible { display: block; }

.y-video .icon-play {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 60px;
	color: #FFF;
	margin-top: -45px;
	margin-left: -23px;
	-webkit-transition: transform .3s ease;
	-o-transition: transform .3s ease;
	transition: transform .3s ease;
}

.y-video:hover .icon-play {
	-webkit-transform: scale(1.15);
	-ms-transform: scale(1.15);
	-o-transform: scale(1.15);
	transform: scale(1.15);
}

.mfp-iframe-holder .mfp-content { max-width: 80% !important; }

.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td { padding: 12px 8px; }

.niche-demos-lists { list-style: none; }

.device-xl .niche-demos-lists.lists-2,
.device-lg .niche-demos-lists.lists-2 { margin-left: 30px }

.niche-demos-lists li a {
	font-size: 19px;
	color: #000;
	font-weight: 700;
	line-height: 1.5;
}

.niche-demos-lists li { margin-top: 8px; }

.niche-demos-lists li a img {
	display: inline-block;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	margin-right: 10px;
	border: 2px solid #FFF;
}

.skill-area h4 {
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(255, 255, 255, 0.7);
}

.skill-area .skill-info {
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	padding-left: 25px;
}

.skill-area .skill-info span {
	display: block;
	margin-top: 30px;
	font-size: 17px;
}

.skill-area span:first-child { margin-top: 0; }

.skills li:not(:first-child) { margin-top: 50px; }

.entry-box-shadow { box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.09); }

.entry .entry-title { margin-top: 8px; }

.entry .entry-title { margin-top: 13px; }

.entry::after { display: none; }

.post-grid .entry-image img {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.entry-meta-wrapper {
	background-color: #FFF;
	padding: 30px;
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
}

.dark .skills li > span {
	font-weight: 300;
	color: #FFF;
	letter-spacing: 3px;
	top: -24px;
}

.skills li .progress,
.dark .skills li .progress-percent {
	background-color: #FFF !important;
	color: #333;
	text-shadow: none;
	font-size: 12px;
}

.dark .progress-percent::after,
.dark .progress-percent::before { border-top-color: #FFF !important; }


/* A touch device cannot paint a fixed background attachment, so the pinned
   hero layers scroll with the page there. */
.device-touch .position-fixed { background-attachment: scroll !important; }


/* ----------------------------------------------------------------
	Additive: Resume demo composed surfaces

	The project collection (tiles, project single) and the journal
	pages this demo ships as real WordPress content.
	Demo tokens only, no new colours, no new type families.
-----------------------------------------------------------------*/

/* 3a. Project tiles */
.demo-resume-works .resume-works-overlay h3 {
	font-size: 30px;
	margin-bottom: 0;
}

.demo-resume-works .resume-works-overlay span {
	display: block;
	letter-spacing: 2px;
	color: rgba(255,255,255,0.7);
}

/* 3b. Project single */
.single-resume-work .entry { box-shadow: none; }

.single-resume-work-meta { margin-bottom: 30px; }

.resume-work-category {
	display: inline-block;
	margin-bottom: 20px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--cnvs-themecolor);
}

.resume-work-attributes {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(0,0,0,0.075);
}

.resume-work-attributes li {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0,0,0,0.075);
}

.resume-work-attributes .attr-label {
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #999;
}

.resume-work-attributes .attr-value {
	font-weight: 600;
	text-align: end;
}

.single-resume-work-footer {
	margin-top: 60px;
	padding-top: 50px;
	border-top: 1px solid rgba(0,0,0,0.075);
}

.related-resume-works { margin-top: 50px; }

.related-resume-works-title {
	font-family: var(--cnvs-primary-font);
	font-size: 28px;
	font-weight: 400;
	margin-bottom: 30px;
}

/* 3c. Journal (archive + single) */
.resume-post .single-post .entry,
.resume-archive #posts .entry { box-shadow: none; }

.resume-post .sidebar .widget-title,
.resume-archive .sidebar .widget-title,
.resume .sidebar .widget-title {
	font-family: var(--cnvs-primary-font);
	font-size: 20px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.resume-post .sidebar .tag-cloud-link:hover,
.resume .sidebar .tag-cloud-link:hover {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
	color: #FFF;
}

.resume-post .entry-title h2,
.resume-post .entry-title h1 { font-family: var(--cnvs-primary-font); }

/* 3d. Journal card meta: the card design shows one muted date line at body
   size, not the multi-item post-meta list the theme sizes down by default. */
.entry-meta-wrapper .entry-meta { --cnvs-post-meta-fontsize: var(--cnvs-font-size-body); }

.entry-meta-wrapper .entry-meta ul { margin-bottom: 0; }

.entry-meta-wrapper .entry-meta li {
	margin-bottom: 0;
	color: var(--bs-secondary-color);
}

/* ── Journal sidebar (single + archive) ────────────────────────────
 *
 * The global single.html sidebar ships Recent Posts / Categories / Tag
 * Cloud as core block widgets. Style them in the demo's own voice:
 * Playfair titles with a themecolour accent rule, clean hairline rows,
 * muted dates and pill tags: scoped to this demo's body classes so no
 * other site or demo is touched. Tokens only (see §1).
 */

.resume-post .sidebar .widget,
.resume-archive .sidebar .widget {
	margin-top: 2.5rem;
	padding-top: 0;
	border-top: 0;
}

.resume-post .sidebar .widget:first-child,
.resume-archive .sidebar .widget:first-child {
	margin-top: 0;
}

/* Accent rule under each widget title (the §3c rule sets the type). */
.resume-post .sidebar .widget-title,
.resume-archive .sidebar .widget-title {
	position: relative;
	padding-bottom: 12px;
	margin-bottom: 18px;
}

.resume-post .sidebar .widget-title::after,
.resume-archive .sidebar .widget-title::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: 0;
	width: 36px;
	height: 2px;
	background-color: var(--cnvs-themecolor);
}

.resume-post .sidebar .widget a,
.resume-archive .sidebar .widget a {
	color: var(--cnvs-contrast-700, #555);
	transition: color 0.25s ease;
}

.resume-post .sidebar .widget a:hover,
.resume-archive .sidebar .widget a:hover {
	color: var(--cnvs-themecolor);
}

/* Recent Posts: stacked rows with hairline dividers, muted dates. */
.resume-post .sidebar .wp-block-latest-posts__list,
.resume-archive .sidebar .wp-block-latest-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.resume-post .sidebar .wp-block-latest-posts__list li,
.resume-archive .sidebar .wp-block-latest-posts__list li {
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.resume-post .sidebar .wp-block-latest-posts__list li:first-child,
.resume-archive .sidebar .wp-block-latest-posts__list li:first-child {
	padding-top: 0;
}

.resume-post .sidebar .wp-block-latest-posts__list li:last-child,
.resume-archive .sidebar .wp-block-latest-posts__list li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.resume-post .sidebar .wp-block-latest-posts__post-title,
.resume-archive .sidebar .wp-block-latest-posts__post-title {
	display: block;
	font-family: var(--cnvs-primary-font);
	font-size: 15px;
	line-height: 1.45;
}

.resume-post .sidebar .wp-block-latest-posts__post-date,
.resume-archive .sidebar .wp-block-latest-posts__post-date {
	display: block;
	margin-top: 4px;
	color: var(--cnvs-contrast-500, #999);
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* Categories, matching row rhythm. */
.resume-post .sidebar .wp-block-categories,
.resume-archive .sidebar .wp-block-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.resume-post .sidebar .wp-block-categories li,
.resume-archive .sidebar .wp-block-categories li {
	padding: 10px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	font-size: 14px;
}

.resume-post .sidebar .wp-block-categories li:last-child,
.resume-archive .sidebar .wp-block-categories li:last-child {
	border-bottom: 0;
}

/* Tag Cloud: uniform themecolour-bordered pills (WordPress sets a
   per-tag inline font-size that has to be overridden). */
.resume-post .sidebar .tag-cloud-link,
.resume-archive .sidebar .tag-cloud-link {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 5px 12px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 2px;
	color: var(--cnvs-contrast-700, #555);
	font-size: 12px !important;
	line-height: 1.4;
	transition: all 0.25s ease;
}

/* Work single: featured image fills its column.
 *
 * The image ships with WordPress's intrinsic width/height attributes (600px
 * on a ~880px column), so it rendered short of the content width. Scoped to
 * the article column so the "More Works" cards below keep their own sizing.
 */
.resume-single .single-resume-work-content .wp-block-image img,
.resume-single .single-resume-work-content figure img {
	width: 100%;
	height: auto;
	object-fit: cover;
}