/* Morris Hsieh — personal site extensions (N5 template) */

/* bootstrap.min.css sets html{font-size:10px} for its own grid math, and
   nearly all "content" text sitewide (paragraphs, meta lines, timeline
   entries, card text, etc.) is sized in rem against that root — so it
   renders ~62% smaller than a normal 16px-root page. Headings and the
   sidebar nav are sized in px and are unaffected by this, which is why
   they look fine while body copy looks tiny. Override the root back up
   to scale every rem-based content size up proportionally. */
html {
	font-size: 14px;
}

:root {
	--nyc-gold: #FFC72C;
	--nyc-blue: #0039A6;
	--accent: #303F9F;
	--michelin-red: #B7141F;
	--award-brown: #863E15; /* Dark Crispy Brown — Award tab's own accent, card + stats only */
	--frame-gutter: #e0e0e0;
	--frame-inset: 21px; /* page-border offset (14px) + border width (7px) */
}

.main-content {
	background-color: var(--frame-gutter);
}

.main-content > .sections {
	position: absolute;
	top: var(--frame-inset);
	left: var(--frame-inset);
	right: var(--frame-inset);
	bottom: var(--frame-inset);
	width: auto;
	height: auto;
}

.section-main {
	background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.55)),
		url('../img/home/hero-skyline.jpg');
	background-size: cover;
	background-position: center;
}

.section-main .intro-text h1,
.section-main .intro-text p {
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.tagline {
	font-size: 1.05rem;
	margin-top: 0.75rem;
	opacity: 0.95;
}

.identity-tags {
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.identity-tags span {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	padding: 0.35rem 0.85rem;
	font-family: 'Roboto Mono', sans-serif;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
}

.nyc-accent .color {
	color: var(--nyc-blue);
}

.nyc-accent .btn-custom.btn-color {
	background: var(--nyc-blue);
}

.nyc-accent .btn-custom.btn-color:hover {
	background: #002b7a;
}

.journal-card {
	background: #fff;
	border-left: 4px solid var(--accent);
	padding: 1.5rem 1.75rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.journal-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.journal-card.nyc-card {
	border-left-color: var(--nyc-blue);
}

.journal-card.dining-card {
	border-left-color: var(--nyc-gold);
}

.journal-card h4 {
	font-family: 'Roboto Mono', sans-serif;
	margin-bottom: 0.35rem;
}

.journal-card .meta {
	font-size: 0.85rem;
	color: #888;
	margin-bottom: 0.75rem;
}

.journal-card .meta i {
	margin-right: 0.35rem;
	color: var(--accent);
}

.journal-card.nyc-card .meta i {
	color: var(--nyc-blue);
}

.journal-card.dining-card .meta i {
	color: #c9a000;
}

.rating {
	color: var(--nyc-gold);
	letter-spacing: 2px;
	font-size: 0.9rem;
}

.nyc-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
}

.nyc-fact {
	flex: 1 1 200px;
	background: #f8f8fc;
	padding: 1.25rem;
	text-align: center;
	border-top: 3px solid var(--nyc-gold);
}

.nyc-fact h5 {
	font-family: 'Roboto Mono', sans-serif;
	color: var(--nyc-blue);
	margin-bottom: 0.5rem;
}

.education-summary {
	background: #fff;
	padding: 1.5rem;
	margin-bottom: 1rem;
	border-left: 4px solid var(--accent);
}

.education-summary h4 {
	font-family: 'Roboto Mono', sans-serif;
	margin-bottom: 0.25rem;
}

.education-summary .gpa {
	font-family: 'Roboto Mono', sans-serif;
	color: var(--accent);
	font-weight: 700;
	margin-top: 0.5rem;
}

.social-links {
	margin-top: 1.5rem;
}

.social-links a {
	display: inline-block;
	margin-right: 1rem;
	font-size: 1.5rem;
	color: var(--accent);
	transition: color 0.2s;
}

.social-links a:hover {
	color: var(--nyc-blue);
}

/*=======================================================
	About — "My Interests" cards
	Bootstrap 3's grid floats columns rather than stretching them, so
	a row's cards default to whatever height their own text happens to
	need. Turning the row into a flex container (scoped to this block
	only, so the rest of the site's Bootstrap grid is untouched) makes
	every card in the same row match the tallest one. A couple of the
	cards are also real links (Food & Dining, Traveling, AI & Data
	link to other sections) — .service switches tag from <div> to <a>
	for those, so it needs underline/color reset to keep looking like
	a plain card rather than a link.
=======================================================*/
.services-block .row {
	display: flex;
	flex-wrap: wrap;
	row-gap: 1.75rem;
}

.services-block .row > [class*="col-"] {
	display: flex;
}

.services-block .service {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.services-block .service:hover,
.services-block .service:focus {
	color: inherit;
	text-decoration: none;
}

/*=======================================================
	Menu — expandable submenu (e.g. Dining → Michelin/Award)
=======================================================*/
.menu-item-has-children > .menu-parent-toggle {
	position: relative;
}

.menu-item-has-children > .menu-parent-toggle:after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 6px;
	border-right: 1px solid rgba(255, 255, 255, 0.6);
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
}

.menu-item-has-children.expanded > .menu-parent-toggle:after {
	transform: rotate(-135deg) translateY(2px);
}

.submenu {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.3s ease, opacity 0.3s ease;
}

.menu-item-has-children.expanded > .submenu {
	max-height: 200px;
	opacity: 1;
}

.submenu > li > a {
	display: block;
	padding: 6px 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
}

.submenu > li > a:hover {
	color: #fff;
}

.verse {
	font-style: italic;
	color: #666;
	font-size: 0.95rem;
	margin-top: 1rem;
	padding-left: 1rem;
	border-left: 2px solid var(--accent);
}