/*
	Tropical-elegant theme layer for cervasio.tech
	Loaded after main.css — overrides the Strata template.
	Palette: deep palm green / warm sand / terracotta / gold.
*/

:root {
	--deep: #10332c;
	--deep-2: #0b241f;
	--deep-soft: #1d4a3f;
	--sand: #faf6ed;
	--sand-2: #f2ecdd;
	--ink: #33413b;
	--ink-soft: #5c6b64;
	--coral: #d95d3f;
	--coral-soft: #e2654a;
	--gold: #c9922e;
	--mint: #8fd4b8;
	--cream: #f4ead7;
}

/* ---------- Base ---------- */

body, input, select, textarea {
	font-family: "Inter", "Source Sans Pro", Helvetica, sans-serif;
	color: var(--ink);
}

body {
	background: var(--sand);
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Fraunces", Georgia, serif;
	font-weight: 500;
	color: var(--deep);
}

strong, b {
	color: var(--deep);
}

a {
	color: #1d6a54;
	border-bottom-color: rgba(29, 106, 84, 0.35);
}

a:hover {
	color: var(--coral) !important;
	border-bottom-color: transparent;
}

/* ---------- Section headings: short gradient rule underneath ---------- */

#main section > h2,
#main section > header.major > h2 {
	position: relative;
	padding-bottom: 0.55em;
	margin-bottom: 1.2em;
}

#main section > h2::after,
#main section > header.major > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3.2em;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--coral), var(--gold));
}

/* ---------- Header / sidebar ---------- */

#header {
	background-color: var(--deep-2);
	background-image: linear-gradient(160deg, rgba(16, 51, 44, 0.94), rgba(8, 27, 22, 0.97)), url("../../images/bg.jpg");
	background-size: auto, cover;
	background-position: top left, center;
	color: rgba(244, 234, 215, 0.75);
}

#header h1 {
	color: var(--cream);
	line-height: 1.65;
}

#header strong, #header b {
	color: #ffffff;
}

#header .image.avatar {
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid rgba(244, 234, 215, 0.25);
	outline: 3px solid transparent;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	transition: border-color 0.25s ease;
}

#header .image.avatar:hover {
	border-color: var(--coral-soft);
}

/* ---------- Buttons ---------- */

input[type="submit"],
input[type="reset"],
input[type="button"],
.button {
	background-color: var(--deep);
	color: var(--cream) !important;
	box-shadow: none;
	border-radius: 6px;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	letter-spacing: 0.18em;
	transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:hover {
	background-color: var(--coral);
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(217, 93, 63, 0.28);
}

input[type="submit"]:active,
.button:active {
	transform: translateY(0);
	background-color: #c14f33;
}

/* Header button (dark background context) */
#header .button, #header .button:hover {
	color: var(--cream) !important;
}

/* ---------- Work items ---------- */

.work-item .image.thumb {
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(16, 51, 44, 0.14);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.work-item .image.thumb:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(16, 51, 44, 0.22);
}

.work-item .image.thumb img {
	transition: transform 0.35s ease;
}

.work-item .image.thumb:hover img {
	transform: scale(1.03);
}

.work-item h3 {
	font-size: 1em;
	margin-bottom: 0.4em;
}

.work-item h3 a {
	color: var(--deep);
	border-bottom: none;
}

.work-item p {
	color: var(--ink-soft);
	font-size: 0.9em;
	line-height: 1.75;
}

/* ---------- Forms ---------- */

input[type="text"],
input[type="email"],
select,
textarea {
	background: #ffffff;
	border: 1px solid #e0d8c6;
	border-radius: 6px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
	border-color: var(--coral);
	box-shadow: 0 0 0 3px rgba(217, 93, 63, 0.15);
}

::-webkit-input-placeholder { color: #9aa69f !important; }
::-moz-placeholder { color: #9aa69f !important; }

/* ---------- Contact info ---------- */

.labeled-icons h3 {
	font-family: "Inter", sans-serif;
}

.labeled-icons .icon:before {
	color: var(--coral);
}

/* ---------- Footer ---------- */

#footer .icons a {
	color: rgba(244, 234, 215, 0.6);
	transition: color 0.2s ease;
}

#footer .icons a:hover {
	color: var(--coral-soft) !important;
}

#footer .copyright {
	color: rgba(244, 234, 215, 0.35);
}

#footer .copyright a {
	color: rgba(244, 234, 215, 0.5);
}

/* On small screens the footer sits on the sand background, not the dark sidebar */
@media screen and (max-width: 1280px) {
	#footer {
		background: var(--deep-2);
		color: rgba(244, 234, 215, 0.65);
	}
}

/* ---------- Selection & scrollbar accents ---------- */

::selection {
	background: var(--coral);
	color: #fff;
}