/**
 * Redwood-inspired preview theme.
 *
 * This file intentionally sits on top of the original Kards styles so the
 * visual direction can be reviewed without migrating the site to Oracle JET.
 */
:root {
	--rw-brand: #c74634;
	--rw-brand-strong: #8f2f23;
	--rw-accent-soft: #f8ddd5;
	--rw-canvas: #f7f5f2;
	--rw-surface: #ffffff;
	--rw-surface-warm: #fbf9f8;
	--rw-surface-dark: #312d2a;
	--rw-text: #312d2a;
	--rw-text-muted: #6f6964;
	--rw-text-inverse: #fbf9f8;
	--rw-border: #ded8d1;
	--rw-shadow-sm: 0 2px 8px rgba(49, 45, 42, 0.1);
	--rw-shadow-md: 0 12px 28px rgba(49, 45, 42, 0.14);
	--rw-radius-sm: 4px;
	--rw-radius-md: 8px;
	--rw-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
	background: var(--rw-canvas);
	color: var(--rw-text-muted);
	font-family: var(--rw-font);
}

a,
a:visited {
	color: var(--rw-brand-strong);
}

a:hover,
a:focus,
a:active {
	color: var(--rw-brand);
}

a:focus-visible,
button:focus-visible,
.button:focus-visible {
	outline: 3px solid rgba(199, 70, 52, 0.35);
	outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h01,
.h02,
.h03,
.h04,
.h05,
.h06 {
	color: var(--rw-text);
	font-family: var(--rw-font);
	letter-spacing: 0;
}

p.lead,
em,
i,
strong,
b {
	font-family: var(--rw-font);
}

.grey-section {
	background: var(--rw-canvas);
}

.grey-section p.lead {
	color: var(--rw-text-muted);
}

.section-intro h1 {
	color: var(--rw-text);
	font-family: var(--rw-font);
	letter-spacing: 0;
}

.section-intro h5 {
	color: var(--rw-brand);
	letter-spacing: 0.08rem;
	text-transform: none;
}

.button,
a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	background: var(--rw-brand);
	border: 1px solid var(--rw-brand);
	border-radius: var(--rw-radius-sm);
	box-shadow: var(--rw-shadow-sm);
	color: var(--rw-text-inverse);
	font-family: var(--rw-font);
	letter-spacing: 0.08rem;
	text-transform: none;
}

.button:hover,
a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
	background: var(--rw-brand-strong);
	border-color: var(--rw-brand-strong);
	color: var(--rw-text-inverse);
}

button.stroke,
.button.stroke {
	border-color: var(--rw-brand);
	color: var(--rw-brand);
}

button.stroke:hover,
.button.stroke:hover {
	border-color: var(--rw-brand-strong);
	color: var(--rw-brand-strong);
}

header .top-bar {
	background: rgba(49, 45, 42, 0.94);
	border-radius: 0 0 var(--rw-radius-md) var(--rw-radius-md);
	box-shadow: var(--rw-shadow-md);
	min-height: 60px;
}

.menu-toggle {
	border-radius: var(--rw-radius-sm);
	height: 36px;
	margin-top: 12px;
	width: 42px;
}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
	background-color: var(--rw-brand);
}

.menu-toggle.is-clicked span {
	background-color: rgba(199, 70, 52, 0);
}

.menu-toggle.is-clicked span::before,
.menu-toggle.is-clicked span::after {
	background-color: var(--rw-brand);
}

.main-navigation {
	background: rgba(49, 45, 42, 0.97);
	border-radius: 0 0 var(--rw-radius-md) var(--rw-radius-md);
	box-shadow: var(--rw-shadow-md);
	padding: 18px 28px 28px;
}

.main-navigation li a {
	border-radius: var(--rw-radius-sm);
	color: var(--rw-text-inverse);
	font-family: var(--rw-font);
}

.main-navigation li a:hover,
.main-navigation li.current > a {
	background: rgba(251, 249, 248, 0.08);
	color: #ffd8cf;
	padding-left: 1rem;
}

#intro {
	background-position: center center;
	min-height: 680px;
}

.intro-overlay {
	background:
		linear-gradient(90deg, rgba(49, 45, 42, 0.92), rgba(49, 45, 42, 0.68)),
		rgba(49, 45, 42, 0.72);
	opacity: 1;
}

.intro-content {
	transform: translateY(-1rem);
}

.intro-content h1 {
	color: var(--rw-text-inverse);
	font-family: var(--rw-font);
	letter-spacing: 0;
	text-shadow: none;
}

.intro-content h5 {
	color: #f4b7a8;
	font-family: var(--rw-font);
	letter-spacing: 0.08rem;
	text-shadow: none;
	text-transform: none;
}

.intro-content .intro-position {
	color: rgba(251, 249, 248, 0.86);
	font-family: var(--rw-font);
	letter-spacing: 0.06rem;
	text-shadow: none;
	text-transform: none;
}

.intro-content .intro-position span::before,
.intro-content .intro-position span::after {
	color: rgba(244, 183, 168, 0.56);
}

#intro .intro-content .button.stroke {
	background: var(--rw-brand) !important;
	border-color: var(--rw-brand);
	border-radius: var(--rw-radius-sm);
	box-shadow: var(--rw-shadow-md);
	color: var(--rw-text-inverse) !important;
}

#intro .intro-content .button.stroke:hover,
#intro .intro-content .button.stroke:focus {
	background: var(--rw-brand-strong) !important;
	border-color: var(--rw-brand-strong);
}

#about {
	background: var(--rw-surface-warm);
	padding-bottom: 12rem;
}

.about-content {
	max-width: 960px;
}

.about-content .info-list li {
	border-block-end: 1px solid var(--rw-border);
	margin-bottom: 1.2rem;
	padding-bottom: 1.8rem;
}

.about-content .info-list li strong {
	color: var(--rw-text);
	font-family: var(--rw-font);
	letter-spacing: 0.04rem;
}

.about-content .info-list li span {
	color: var(--rw-text-muted);
	font-family: var(--rw-font);
	line-height: 1.45;
}

#resume {
	background: var(--rw-canvas);
}

#resume .resume-header h2 {
	color: var(--rw-brand);
}

#resume .timeline-wrap::before {
	background: var(--rw-border);
}

#resume .timeline-ico {
	background: var(--rw-surface);
	border: 2px solid var(--rw-brand);
	box-shadow: var(--rw-shadow-sm);
	color: var(--rw-brand);
}

#resume .timeline-header h3,
#resume .timeline-header h4 {
	color: var(--rw-text);
}

#resume .timeline-header p {
	color: var(--rw-text-muted);
	font-family: var(--rw-font);
}

#resume .timeline-content {
	background: var(--rw-surface);
	border: 1px solid var(--rw-border);
	border-radius: var(--rw-radius-md);
	box-shadow: var(--rw-shadow-sm);
	padding: 2.4rem 2.8rem;
}

#resume .timeline-content h4,
#resume .timeline-content h5 {
	color: var(--rw-text);
	font-family: var(--rw-font);
	letter-spacing: 0;
	text-transform: none;
}

#resume .timeline-content h4::after {
	background: var(--rw-accent-soft);
}

#contact {
	background: var(--rw-surface-dark);
}

#contact .section-intro h1 {
	color: var(--rw-text-inverse);
}

#contact .section-intro h5,
.contact-info h5 {
	color: #f4b7a8;
}

#contact .section-intro p,
.contact-info {
	color: rgba(251, 249, 248, 0.78);
}

.contact-info {
	font-family: var(--rw-font);
}

.contact-info .icon i {
	color: var(--rw-text-inverse);
}

footer {
	background: var(--rw-surface-dark);
	color: rgba(251, 249, 248, 0.7);
	font-family: var(--rw-font);
}

footer a,
footer a:visited {
	color: var(--rw-text-inverse);
}

footer a:hover,
footer a:focus {
	color: #f4b7a8;
}

#go-top a {
	background: var(--rw-brand);
}

#go-top a:hover,
#go-top a:focus {
	background: var(--rw-brand-strong);
}

@media only screen and (max-width: 768px) {
	header .top-bar {
		left: 32px;
	}

	#resume .timeline-content {
		margin-left: 7rem;
		padding: 2rem;
	}
}

@media only screen and (max-width: 480px) {
	header .top-bar {
		left: 20px;
		min-width: 190px;
	}

	.main-navigation {
		padding-inline: 22px;
	}

	.intro-content h5,
	.intro-content .intro-position,
	.intro-content .button {
		letter-spacing: 0.04rem;
	}

	#resume .timeline-content {
		margin-left: 5.5rem;
		padding: 1.8rem;
	}
}