@charset "utf-8";
/* Layout glue for the party public site.
   Kept separate from custom.css so the supplied design files stay untouched. */

/* ---------- Fixed header ---------- */
.site-header {
	background: #fff;
	height: 60px;
	position: fixed;
	z-index: 9999;
	width: 100%;
	left: 0;
	top: 0;
}
.site-header-logo {
	padding-left: 0;
}
.site-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 60px;
	text-decoration: none;
}
.site-brand:hover,
.site-brand:focus {
	text-decoration: none;
}
.site-brand img {
	flex: 0 0 auto;
	max-height: 46px;
	max-width: 100%;
	width: auto;
}
.site-brand-text {
	font-size: 22px;
	font-weight: bold;
	color: #008C87;
	line-height: 1.15;
}
.site-header-right {
	float: right;
	padding-top: 7px;
}
.lang-switch {
	float: right;
	margin-top: 3px;
	padding-left: 30px;
	clear: both;
}
.lang-switch a {
	color: #333;
}
.lang-switch a.active {
	color: #008C87;
	font-weight: bold;
}

/* ---------- Fixed nav ---------- */
.nav-wrapper {
	height: 40px;
	position: fixed;
	z-index: 99999;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-top: 60px;
	left: 0;
	top: 0;
}

/* ---------- News ticker ---------- */
.news-ticker-wrapper {
	position: relative;
	margin-top: 100px;
	background: #004C55;
	color: #fff;
	overflow: hidden;
}
.news-ticker-inner {
	display: flex;
	align-items: center;
	height: 34px;
}
.news-ticker-label {
	flex: 0 0 auto;
	background: #E1691E;
	color: #fff;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: bold;
}
.news-ticker-text {
	flex: 1 1 auto;
	color: #fff;
	font-weight: bold;
	padding: 0 10px;
}

.flash-wrapper {
	padding-top: 8px;
}

/* ---------- Homepage sections ---------- */
.section-heading {
	margin-bottom: 20px;
}
.section-heading h1,
.section-heading h2 {
	margin: 0;
}
.section-heading a,
.section-heading a:hover {
	text-decoration: none;
}
.heading-red a { color: #881518; }
.heading-teal a { color: #008c87; }
.heading-white a { color: #fff; }

.featured-news img {
	width: 100%;
}
.featured-news h4 {
	margin-top: 0;
}

/* ---------- Featured news styling ---------- */
.featured-media {
	overflow: hidden;
	border-radius: 14px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
}
.featured-media img {
	border-radius: 14px;
	transition: transform .6s ease;
}
.featured-news:hover .featured-media img {
	transform: scale(1.03);
}
.featured-body h4 {
	display: inline-block;
	background: var(--brand-yellow);
	color: #111;
	font-size: 14px;
	font-weight: bold;
	padding: 3px 14px;
	border-radius: 100px;
	margin-bottom: 10px;
}
.featured-body h2 {
	border-left: 5px solid var(--brand-red);
	padding-left: 14px;
	line-height: 1.35;
}
.featured-body h2 a {
	text-decoration: none;
}
.featured-body h2 a:hover {
	color: var(--brand-red);
}

/* Left image and right text stretched to the same height. Bootstrap 3 columns
   are floated, so the row is switched to flex and the image is cropped to fill
   whichever side ends up taller. */
@media all and (min-width: 768px) {
	.featured-news {
		display: flex;
		align-items: stretch;
		min-height: 380px;
	}
	.featured-news > [class*='col-'] {
		display: flex;
		flex-direction: column;
		float: none;
	}
	.featured-media img {
		display: block;
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: cover;
	}
	.featured-body {
		justify-content: center;
		padding-left: 30px;
	}
}

.committee-card {
	background: #fff;
	padding: 20px;
	margin-bottom: 20px;
	border-bottom: 7px solid #008c87;
	height: 100%;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	transition: box-shadow .3s ease, transform .3s ease;
}
.committee-card:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
	transform: translateY(-3px);
}
.committee-card h3 {
	margin-top: 0;
	color: #004c55;
}
.committee-card .committee-level {
	display: inline-block;
	background: #008c87;
	color: #fff;
	font-size: 13px;
	padding: 2px 10px;
	margin-bottom: 10px;
}

.latest-div h3 {
	font-size: 20px;
	margin-top: 10px;
}

/* Latest-news card look — rounded, soft shadow, lifts on hover */
.latest-div {
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
	transition: box-shadow .3s ease, transform .3s ease;
}
.latest-div:hover {
	box-shadow: 0 8px 22px rgba(0, 0, 0, .14);
	transform: translateY(-3px);
}
.latest-div img {
	display: block;
	width: 100%;
}

/* Clearance for the 100px fixed header (60px bar + 40px nav). Without this the
   first section heading sits underneath the header. The responsive block below
   zeroes these out on mobile, where the header is shorter and sections scroll
   normally. */
.section-top-pad {
	padding-top: 120px;
}
.section-heading-spaced {
	margin-top: 110px;
}
.latest-more {
	margin-top: 24px;
	padding-bottom: 30px;
}
.latest-div a {
	color: #333;
	text-decoration: none;
}
.latest-div a:hover h3 {
	color: #008c87;
}

.empty-state {
	background: rgba(255, 255, 255, .65);
	border: 1px dashed #999;
	padding: 30px;
	text-align: center;
	color: #555;
}

.join-intro p {
	margin-bottom: 16px;
}

/* ---------- Footer ---------- */
.footer {
	padding-bottom: 20px;
}
.footer h3,
.footer h4 {
	margin-top: 0;
}
.footer dl {
	margin-bottom: 18px;
}
.footer dt {
	margin-bottom: 4px;
}
.footer dd {
	margin-bottom: 2px;
}
.footer address {
	color: #fff;
}

/* ---------- Responsive ---------- */
/* fullPage.js is only initialized on viewports wider than 768px. Below that the
   sections stack and scroll normally, so the offsets are neutralised here. */
@media all and (max-width: 768px) {
	.site-header {
		height: 50px;
	}
	.site-header-logo {
		padding-left: 10px;
	}
	.site-brand {
		height: 50px;
		gap: 8px;
		overflow: hidden;
	}
	.site-brand img {
		max-height: 36px;
	}
	.site-brand-text {
		font-size: 15px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.site-header-right {
		display: none;
	}
	.nav-wrapper {
		margin-top: 50px;
	}
	.news-ticker-wrapper {
		margin-top: 90px;
	}
	#fullpage,
	#fullpage .section {
		height: auto !important;
		min-height: 0 !important;
	}
	.content {
		position: static !important;
		top: auto !important;
		transform: none !important;
		padding-top: 110px;
		padding-bottom: 30px;
	}
	.committee-card {
		height: auto;
	}
	.footer {
		padding-top: 20px;
	}
}

/* ---------- Bangla font ----------
   Local copy of SolaimanLipi. Declared here (after custom.css) so the
   @font-face in custom.css resolves to these files. */
@font-face {
	font-family: "solaimanlipi";
	src: url("font/solaimanlipi-normal-v1.0.woff2") format("woff2"),
	     url("font/solaimanlipi-normal-v1.0.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "solaimanlipi";
	src: url("font/solaimanlipi-bold-v1.0.woff2") format("woff2"),
	     url("font/solaimanlipi-bold-v1.0.ttf") format("truetype");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

/* ---------- fullPage layout ---------- */
html.fullpage-enabled,
.fullpage-enabled body {
	height: 100%;
}
.fullpage-enabled .fullpage-container {
	height: 100vh;
	position: relative;
	transition: transform .7s cubic-bezier(.645, .045, .355, 1);
	will-change: transform;
}
.fullpage-enabled .fullpage-section {
	height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Compact sections (join CTA, footer) size to their own content instead of
   taking a full viewport. The fullPage script reads real geometry, so these
   can be any height. */
.fullpage-enabled .fullpage-section.section-compact {
	height: auto;
	min-height: 0;
	overflow-y: visible;
}

/* Active item in the top navigation */
nav ul.menu li > a.active-menu {
	background-color: #fff;
	color: var(--brand-green);
}

/* ---------- Back to top ---------- */
#back-top {
	position: fixed;
	right: 20px;
	bottom: 7%;
	z-index: 999999;
}
#back-top .scroll-to-top {
	background: var(--brand-red);
	color: #fff;
	padding: 10px;
	cursor: pointer;
}

/* ---------- Compact sections (join CTA, footer) ----------
   These size to their own content instead of a full viewport. The selector
   deliberately does not require .fullpage-enabled, so the same padding applies
   on mobile where the fullPage script is not running. */
.section-compact .content {
	position: static;
	top: auto;
	transform: none;
	padding: 45px 0 35px;
}
.section-compact#section9 .section-heading h1 {
	color: var(--brand-green);
	margin-bottom: 18px;
}
.join-intro p {
	font-size: 19px;
}
.join-actions {
	text-align: center;
	padding-top: 6px;
}
.join-actions .btn {
	margin: 4px;
}
.join-note {
	margin-top: 16px;
	color: #555;
	font-size: 17px;
}
.footer-social {
	text-align: center;
	margin-bottom: 6px;
}
.footer h4 {
	color: #fff;
	margin-top: 0;
}
.footer address {
	margin-bottom: 0;
}
.footer-bottom {
	text-align: center;
	color: #fff;
	margin-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .25);
	padding-top: 14px;
}
.footer-brand img {
	max-height: 52px;
	width: auto;
	margin-bottom: 10px;
}
.footer-brand h3 {
	color: #fff;
	margin-top: 0;
}
.footer-brand p {
	color: #fff;
}

/* ==========================================================================
   Responsive overrides
   The supplied design files are desktop-first (custom.css forces 22px body
   text, the news row is 3-across at every width, and .row gutters overflow the
   viewport). Everything below re-fits the page for narrow screens.
   ========================================================================== */

@media all and (max-width: 768px) {

	/* custom.css sets this with !important — same specificity, later wins */
	html,
	body {
		overflow-x: hidden;
		max-width: 100%;
	}
	body {
		font-size: 17px !important;
	}

	h1 { font-size: 24px; }
	h2 { font-size: 21px; }
	h3 { font-size: 19px; }
	h4 { font-size: 17px; }
	h5 { font-size: 15px; }

	/* Bootstrap rows use -15px gutters; without neutralising them the page
	   scrolls sideways on phones. */
	#fullpage .row {
		margin-left: 0;
		margin-right: 0;
	}

	/* .no-padding strips the gutters entirely, so sections get their own inset */
	#fullpage .section {
		padding-left: 12px;
		padding-right: 12px;
	}
	#section0 {
		padding-left: 0;
		padding-right: 0;
	}
	#section0 .content {
		padding-top: 100px;
		padding-bottom: 0;
	}
	.content {
		padding-top: 30px;
		padding-bottom: 30px;
	}

	/* The desktop offset trick would push content off-screen */
	.col-sm-offset-1 {
		margin-left: 0;
	}
	.col-sm-10,
	.col-sm-12,
	.col-sm-7,
	.col-sm-5,
	.col-sm-4 {
		width: 100%;
	}

	/* Inline 120px top padding on the featured row is far too much here */
	.section-top-pad {
		padding-top: 0 !important;
	}
	.section-heading {
		margin-top: 0 !important;
		margin-bottom: 14px;
	}
	.section-heading h1,
	.section-heading h2 {
		font-size: 22px;
	}

	/* Hero slider — caption sits below the image instead of overlapping it */
	.carousel-caption {
		position: relative;
		bottom: auto !important;
		left: auto !important;
		right: auto !important;
		padding: 10px 14px;
	}
	.carousel-caption h3 {
		font-size: 18px;
		margin: 4px 0;
	}
	.carousel-caption p {
		font-size: 14px;
		margin: 0;
	}
	#main-slider .carousel-control {
		width: 8%;
	}

	/* Featured news */
	.featured-news img {
		margin-bottom: 14px;
	}
	.featured-news h2 {
		font-size: 20px;
	}
	.featured-news p {
		font-size: 16px;
	}

	/* News cards */
	.latest-div {
		margin-bottom: 14px;
	}
	.latest-div h3 {
		font-size: 17px;
		margin-top: 8px;
	}

	/* Committees */
	.committee-card {
		padding: 14px;
		margin-bottom: 14px;
	}

	/* Join CTA — buttons stack full width instead of overflowing */
	.join-intro p {
		font-size: 16px;
	}
	.join-actions {
		padding-top: 0;
		margin-top: 14px;
	}
	.join-actions .btn {
		display: block;
		width: 100%;
		margin: 6px 0;
		font-size: 16px;
	}
	.join-note {
		font-size: 14px;
	}

	/* Footer */
	.footer-brand {
		text-align: center;
		margin-bottom: 10px;
	}
	.footer-brand img {
		display: block;
		margin: 0 auto 10px;
	}
	.footer dl {
		margin-bottom: 12px;
	}
	.social-bottom {
		font-size: 26px;
	}
	.social-bottom a {
		display: inline-block;
		margin: 0 4px;
	}
	.footer-bottom {
		font-size: 13px;
	}
}

@media all and (max-width: 480px) {
	body {
		font-size: 16px !important;
	}
	h1 { font-size: 21px; }
	.section-heading h1,
	.section-heading h2 {
		font-size: 19px;
	}
	.site-brand-text {
		font-size: 14px;
	}
	.latest-div h3 {
		font-size: 16px;
	}
	.committee-card h3 {
		font-size: 17px;
	}
	.footer-brand img {
		max-height: 42px;
	}
	.social-bottom {
		font-size: 22px;
	}
}

/* ---------- Bangla font ----------
   The homepage renders Bangla and Latin in one font (the supplied custom.css
   pins SolaimanLipi on body), so "Li Ador Noirrit" takes over that role. The
   !important matches custom.css, which would otherwise win on order. See
   bangla-font.css for the @font-face and the --font-bangla stack. */
body {
	font-family: var(--font-bangla) !important;
}