/*
	Custom Portfolio Styles for Isha Narkhede
	Extends the Future Imperfect template by HTML5 UP
*/

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

/* Full-width layout — theme used width: 90em + max-width 100%, which leaves gray side gutters on large screens */
#wrapper {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

@media screen and (min-width: 1681px) {
	#wrapper {
		padding: 4.5em 1em !important;
	}
}

@media screen and (max-width: 1680px) and (min-width: 737px) {
	#wrapper {
		padding: 3em 1em !important;
	}
}

@media screen and (max-width: 736px) {
	#wrapper {
		padding: 1.5em 0.75rem !important;
	}
}

/* Sidebar intro: hex logo removed — light top padding where the mark was */
#intro {
	padding-top: 0.35em;
}

/* ---- Section Headings ---- */

.section-heading {
	padding: 2.5em 3em 1em 3em;
	text-align: center;
	scroll-margin-top: 3.5em;
}

.section-heading h2 {
	font-family: "Raleway", Helvetica, sans-serif;
	font-weight: 900;
	font-size: 1.25em;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #3c3b3b;
	display: inline-block;
	padding-bottom: 0.75em;
	border-bottom: 3px solid #f56a6a;
}

.section-heading h2 .icon {
	margin-right: 0.5em;
	color: #f56a6a;
}

/* Scroll margin for anchor targets */
#about,
#experience,
#projects,
#skills-section,
#contact {
	scroll-margin-top: 3.5em;
}

/* ---- Experience Lists ---- */

.experience-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2em 0;
}

.experience-list li {
	position: relative;
	padding: 0.65em 0 0.65em 1.75em;
	line-height: 1.65;
	font-size: 0.95em;
}

.experience-list li:before {
	content: "\f00c";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	left: 0;
	top: 0.75em;
	color: #f56a6a;
	font-size: 0.8em;
}

.experience-list li strong {
	color: #3c3b3b;
}

/* ---- Skill Tags (in .stats footer) ---- */

.tag {
	display: inline-block;
	font-family: "Raleway", Helvetica, sans-serif;
	font-size: 0.6em;
	font-weight: 800;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: #787878;
}

/* ---- Skills Grid ---- */

.skills-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2em;
	padding: 1.5em 0;
}

.skill-category h3 {
	font-family: "Raleway", Helvetica, sans-serif;
	font-weight: 800;
	font-size: 0.75em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #3c3b3b;
	margin-bottom: 1em;
	padding-bottom: 0.5em;
	border-bottom: 2px solid rgba(160, 160, 160, 0.2);
}

.skill-category h3 .icon {
	color: #f56a6a;
	margin-right: 0.4em;
}

.skill-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.skill-tag {
	display: inline-block;
	padding: 0.4em 0.9em;
	background: #f5f5f5;
	border: 1px solid rgba(160, 160, 160, 0.25);
	border-radius: 4px;
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-size: 0.85em;
	color: #646464;
	transition: all 0.2s ease;
}

.skill-tag:hover {
	background: #f56a6a;
	color: #ffffff;
	border-color: #f56a6a;
	transform: translateY(-1px);
}

.skill-tag.accent {
	background: #f56a6a;
	color: #ffffff;
	border-color: #f56a6a;
	font-weight: 600;
}

.skill-tag.accent:hover {
	background: #e45a5a;
	border-color: #e45a5a;
}

@media screen and (max-width: 736px) {
	.skills-grid {
		grid-template-columns: 1fr;
		gap: 1.5em;
	}
}

/* ---- Contact Info ---- */

.contact-info {
	margin: 0 0 2em 0;
}

.contact-item {
	display: flex;
	align-items: center;
	padding: 0.75em 0;
	font-size: 1em;
	border-bottom: 1px solid rgba(160, 160, 160, 0.15);
}

.contact-item:last-child {
	border-bottom: none;
}

.contact-item .icon {
	width: 2.5em;
	color: #f56a6a;
	font-size: 1.1em;
	flex-shrink: 0;
}

.contact-item a {
	color: #3c3b3b;
	text-decoration: none;
	border-bottom: 1px dotted rgba(160, 160, 160, 0.4);
	transition: color 0.2s ease;
}

.contact-item a:hover {
	color: #f56a6a;
}

/* ---- Sidebar Enhancements ---- */

.sidebar-heading {
	font-family: "Raleway", Helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: 900;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 1.5em;
}

/* Certification list */
.cert-list {
	list-style: none;
	padding: 0;
	margin: 0 0 2em 0;
}

.cert-list li {
	padding: 0.6em 0;
	font-size: 0.9em;
	line-height: 1.5;
	border-bottom: 1px solid rgba(160, 160, 160, 0.15);
}

.cert-list li:last-child {
	border-bottom: none;
}

.cert-list li .icon {
	color: #f56a6a;
	margin-right: 0.5em;
	font-size: 0.85em;
}

.cert-list li a {
	text-decoration: none;
	border-bottom: 1px dotted rgba(160, 160, 160, 0.4);
}

.cert-list li a:hover {
	color: #f56a6a;
}

/* Mini-post highlights (no images) */
.mini-post header {
	padding-right: 1.25em !important;
}

/* ---- Post Card Enhancements ---- */

.post > header .meta .author .name {
	font-size: 0.7em;
}

/* Stats/tags in footer */
.post > footer .stats .tag {
	padding: 0;
}

/* About: headshot as a profile photo (not a full-bleed project banner) */
#about > a.image.featured {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: 2.25em;
}

#about > a.image.featured img {
	width: min(100%, 20rem);
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* Keep hair/head inside the circle (center crop was clipping the top) */
	object-position: center 12%;
	border-radius: 50%;
	box-shadow:
		0 0 0 1px rgba(160, 160, 160, 0.35),
		0 0.35em 1.25em rgba(60, 59, 59, 0.12);
}

@media screen and (max-width: 480px) {
	#about > .image.featured {
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 0 !important;
		width: 100% !important;
	}
}

/* ---- Hero About Section ---- */

#about p {
	font-size: 1.05em;
	line-height: 1.8;
}

#about p:first-of-type {
	font-size: 1.1em;
}

/* ---- Responsive Adjustments ---- */

@media screen and (max-width: 1280px) {
	.section-heading {
		padding: 2em 2em 0.5em 2em;
	}

	.mini-posts {
		display: block !important;
	}

	.mini-posts > * {
		width: 100% !important;
	}
}

@media screen and (max-width: 736px) {
	.section-heading {
		padding: 1.5em 1.5em 0.5em 1.5em;
	}

	.section-heading h2 {
		font-size: 1em;
	}

	.contact-item {
		font-size: 0.9em;
	}
}

@media screen and (max-width: 480px) {
	.section-heading {
		padding: 1em 1em 0.5em 1em;
	}
}

/* ---- Print Styles ---- */

@media print {
	#header, #menu, #footer, .actions {
		display: none !important;
	}

	.post {
		page-break-inside: avoid;
		box-shadow: none !important;
		border: 1px solid #ddd;
	}
}