/*
Theme Name:   Bricks Child — Saigon Improv House
Theme URI:    https://saigonimprovhouse.com
Description:  Bricks child theme for Saigon Improv House (Kịch ứng tác tại Sài Gòn).
Author:       Saigon Improv House
Version:      1.0.0
Template:     bricks
Text Domain:  bricks-child
*/

:root {
	--navy: #00203f;
	--blue: #01a4cd;
	--green: #98bc64;
	--coral: #e16241;
	--yellow: #fdd855;
	--cream: #fff7e8;
	--paper: #fffdf7;
	--ink: #00203f;
	--muted: #3d5570;
	--display: "Anton", Impact, sans-serif;
	--body: "Be Vietnam Pro", system-ui, sans-serif;
	--hand: "Shantell Sans", cursive;
	--r: 22px;
	--line: 3px solid var(--navy);
	--pop: 6px 6px 0 var(--navy);
}

/* Sticky header (#brx-header): sticky instead of fixed, 0 layout height so the rounded pill bar
   floats over the hero background exactly like demo; no backdrop-filter on header (docs/23). */
#brx-header {
	position: sticky !important;
	top: 14px;
	z-index: 50;
	height: 0;
	overflow: visible;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.si-nav,
#nav {
	position: relative !important;
	top: 0 !important;
	left: auto !important;
	right: auto !important;
	z-index: 50;
	transition: transform 0.3s;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

.si-nav .si-bar,
.nav .bar {
	position: relative;
	z-index: 52;
}

/* Prevent SVG logo from collapsing to 0px or expanding to 100% width inside flex .si-logo (docs/23) */
.si-logo,
.logo {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font: 800 15px/1.02 var(--body);
	letter-spacing: -0.01em;
}

.si-logo img,
.si-logo svg,
.si-logo .brxe-image,
.logo img,
.logo svg {
	width: 48px !important;
	height: 34px !important;
	max-width: none !important;
	flex: none !important;
	display: block;
}

footer .si-logo img,
footer .si-logo svg,
footer .si-logo .brxe-image,
.si-ft .si-logo img,
.si-ft .si-logo svg,
.si-ft .si-logo .brxe-image,
footer .logo img,
footer .logo svg {
	width: 66px !important;
	height: 46px !important;
}

/* SVG icons in buttons, cards, stars, video play badges, and paper tears */
.si-btn svg,
.btn svg {
	width: 18px !important;
	height: 18px !important;
	flex: none;
	display: block;
}

.si-card .si-go svg,
.card .go svg {
	width: 20px !important;
	height: 20px !important;
	display: block;
}

.si-vid .si-th i svg,
.vid .th i svg {
	width: 26px !important;
	height: 26px !important;
	margin-left: 3px;
	display: block;
}

.si-star svg,
.star svg,
.si-rainbow-bg svg,
.rainbow-bg svg {
	width: 100%;
	height: 100%;
	display: block;
}

.si-tear,
.tear {
	display: block;
	width: 100%;
	height: 46px;
	margin-top: -1px;
}

.si-tear-up,
.tear-up {
	margin-top: 0;
	margin-bottom: -1px;
}

/* Bricks nav-menu styling (.brxe-nav-menu.si-menu) */
.brxe-nav-menu.si-menu {
	display: flex;
	align-items: center;
}

.brxe-nav-menu.si-menu .bricks-nav-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 600;
	font-size: 16px;
}

.brxe-nav-menu.si-menu .bricks-nav-menu > .si-mobile-only {
	display: none !important;
}

.brxe-nav-menu.si-menu .bricks-nav-menu > .menu-item > a,
.si-menu a {
	padding: 10px 14px;
	border-radius: 999px;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
	color: var(--ink);
	text-decoration: none;
	display: inline-block;
}

.brxe-nav-menu.si-menu .bricks-nav-menu > .menu-item > a:hover,
.si-menu a:hover {
	background: var(--yellow);
	color: var(--navy);
}

.brxe-nav-menu.si-menu .bricks-nav-menu > .current-menu-item > a,
.brxe-nav-menu.si-menu .bricks-nav-menu > .current-menu-ancestor > a,
.brxe-nav-menu.si-menu .bricks-nav-menu > .current_page_parent > a,
.single-post .brxe-nav-menu.si-menu .bricks-nav-menu > .menu-item > a[href*="/blog"],
.si-menu a.si-on,
.si-menu a.on,
.si-menu a[aria-current="page"] {
	background: var(--navy) !important;
	color: var(--yellow) !important;
}

/* Compact desktop nav between 992px and 1150px so 6 items + CTA never overflow before Bricks' 991px toggle */
@media (max-width: 1150px) and (min-width: 992px) {
	.brxe-nav-menu.si-menu .bricks-nav-menu {
		gap: 2px;
		font-size: 15px;
	}
	.brxe-nav-menu.si-menu .bricks-nav-menu > .menu-item > a,
	.si-menu a {
		padding: 8px 10px;
	}
	.si-nav .si-btn,
	.nav .btn {
		padding: 11px 16px;
		font-size: 14px;
	}
}

/* Full-screen yellow mobile menu at <= 991px (:tablet_portrait) matching demo .mnav */
@media (max-width: 991px) {
	.brxe-nav-menu.si-menu {
		display: flex !important;
		align-items: center;
		margin-left: auto;
	}

	.brxe-nav-menu.si-menu .bricks-mobile-menu-toggle,
	.si-burger,
	.burger {
		display: grid !important;
		place-items: center;
		width: 46px;
		height: 46px;
		border-radius: 50%;
		border: var(--line);
		background: var(--yellow);
		color: var(--navy);
		padding: 0;
		cursor: pointer;
		position: relative;
		z-index: 55;
	}

	.brxe-nav-menu.si-menu.show-mobile-menu .bricks-mobile-menu-toggle,
	body.menu-open .si-burger,
	body.menu-open .burger {
		background: var(--navy) !important;
		color: var(--yellow) !important;
	}

	.brxe-nav-menu.si-menu .bricks-mobile-menu-wrapper {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		max-width: none !important;
		height: 100dvh !important;
		background: var(--yellow) !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: flex-start !important;
		gap: 30px !important;
		padding: 110px 28px 40px !important;
		z-index: 40 !important;
	}

	.brxe-nav-menu.si-menu .bricks-mobile-menu {
		display: grid !important;
		gap: 4px !important;
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100%;
	}

	.brxe-nav-menu.si-menu .bricks-mobile-menu > .menu-item > a {
		font: 400 40px/1.25 var(--display) !important;
		text-transform: uppercase !important;
		color: var(--navy) !important;
		padding: 2px 0 !important;
		border: 0 !important;
		background: transparent !important;
		white-space: normal;
	}

	.brxe-nav-menu.si-menu .bricks-mobile-menu > .current-menu-item > a {
		color: var(--coral) !important;
	}

	.brxe-nav-menu.si-menu .si-mnav-cta {
		align-self: flex-start;
		display: inline-flex !important;
		box-shadow: 4px 4px 0 var(--navy) !important;
		padding: 17px 26px !important;
		font-size: 17px !important;
	}
}

/* Bricks blockquote & figcaption resets to preserve demo look */
.si-rise.in,
.si-rise.si-in,
.rise.in {
	opacity: 1 !important;
	transform: none !important;
}

.si-rv figcaption,
.si-prose figcaption,
.prose figcaption {
	text-align: left;
}

.si-founder blockquote,
.si-chapter blockquote,
.si-prin blockquote,
.si-prose blockquote,
.prose blockquote {
	border-left: var(--line);
}

.si-prin blockquote {
	border: 0;
}

/* Single blog post content (.si-prose / .prose) matching demo/yes-and-la-gi.html */
.si-prose,
.prose {
	max-width: 740px;
	font-size: 19px;
	line-height: 1.75;
	color: var(--ink);
}

.si-prose h2,
.prose h2 {
	font: 400 44px/1.16 var(--display);
	text-transform: uppercase;
	margin: 54px 0 16px;
	color: var(--ink);
}

.si-prose h3,
.prose h3 {
	font: 800 24px/1.3 var(--body);
	margin: 34px 0 10px;
	color: var(--ink);
}

.si-prose p,
.prose p {
	margin-top: 18px;
}

.si-prose > p:first-child,
.prose > p:first-child {
	margin-top: 0;
}

.si-prose ul,
.prose ul {
	margin: 18px 0 0 22px;
	list-style: disc;
}

.si-prose li,
.prose li {
	margin-top: 8px;
}

.si-prose blockquote,
.prose blockquote {
	margin: 34px 0;
	background: var(--yellow);
	border: var(--line);
	border-radius: var(--r);
	padding: 26px 28px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.45;
}

.si-prose figure,
.prose figure {
	margin: 34px 0;
}

.si-prose figure img,
.prose figure img {
	border: var(--line);
	border-radius: var(--r);
	width: 100%;
	height: auto;
}

.si-prose figcaption,
.prose figcaption {
	font-size: 15px;
	color: var(--muted);
	margin-top: 10px;
	font-family: var(--hand);
	font-weight: 600;
}

/* Demo @media (max-width: 1100px) rules preserved verbatim (Bricks has no 1100px breakpoint) */
@media (max-width: 1100px) {
	.si-cards,
	.cards,
	.si-notes,
	.notes,
	.si-minis,
	.minis,
	.si-benefits,
	.benefits,
	.si-steps,
	.steps,
	.si-people,
	.people,
	.si-games,
	.games,
	.si-soldout,
	.soldout,
	.si-benefits.si-b3,
	.benefits.b3 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.si-path,
	.path {
		grid-template-columns: repeat(2, 1fr) !important;
		row-gap: 40px !important;
	}
	.si-path::before,
	.path::before {
		display: none !important;
	}
	.si-path.si-p5,
	.path.p5,
	.si-logo-wall,
	.logo-wall {
		grid-template-columns: repeat(3, 1fr) !important;
	}
	.si-cgroups,
	.cgroups {
		grid-template-columns: 1fr 1fr !important;
	}
	.si-cgroup:first-child,
	.cgroup:first-child {
		grid-column: 1 / -1 !important;
	}
	.si-prin,
	.prin {
		grid-template-columns: 80px 1fr !important;
	}
	.si-prin blockquote,
	.prin blockquote {
		grid-column: 2 !important;
	}
}

/* Demo @media (max-width: 600px) rules between 479px and 600px (Bricks mobile_portrait is <= 478px) */
@media (max-width: 600px) {
	#brx-header {
		top: 10px;
	}
	.si-nav .si-btn:not(.si-mnav-cta),
	.nav .btn:not(.si-mnav-cta) {
		display: none !important;
	}
	.si-notes,
	.notes,
	.si-cards,
	.cards,
	.si-minis,
	.minis,
	.si-benefits,
	.benefits,
	.si-steps,
	.steps,
	.si-people,
	.people,
	.si-vids,
	.vids,
	.si-cases,
	.cases,
	.si-posts,
	.posts,
	.si-press-list,
	.press-list,
	.si-facts,
	.facts,
	.si-path,
	.path,
	.si-path.si-p5,
	.path.p5,
	.si-benefits.si-b3,
	.benefits.b3,
	.si-games,
	.games,
	.si-soldout,
	.soldout,
	.si-portraits,
	.portraits,
	.si-rules,
	.rules,
	.si-cgroups,
	.cgroups,
	.si-minis.si-m3,
	.minis.m3 {
		grid-template-columns: 1fr !important;
	}
	.si-logo-wall,
	.logo-wall {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.si-prose,
	.prose {
		font-size: 17px;
	}
	.si-prose h2,
	.prose h2 {
		font-size: 34px;
	}
	.brxe-nav-menu.si-menu .bricks-mobile-menu > .menu-item > a {
		font-size: 34px !important;
	}
}