html {
	scroll-behavior: smooth;
}

body {
	padding-top: 80px;
}

/* Dark Mode Styles */
body.dark-mode {
	background-color: #121212;
	color: #f8f9fa;
}

body.dark-mode .navbar {
	background-color: #1f1f1f !important;
}

body.dark-mode footer {
	background-color: #1f1f1f;
}

body.dark-mode .card {
	background-color: #1e1e1e;
	border-color: #333;
	color: #f8f9fa;
}

body.dark-mode .ad-placeholder {
	background-color: #2a2a2a;
	border-color: #555;
	color: #ddd;
}

body.dark-mode .btn-outline-light {
	border-color: #ccc;
	color: #fff;
}

.fixed-header {
	background: #0d6efd;
	transition: all 0.3s ease;
	padding: 15px 0;
}

.fixed-header.shrink {
	padding: 5px 0;
	background: #084298;
}

.navbar-brand {
	font-size: 1.5rem;
	transition: font-size 0.3s ease;
}

.fixed-header.shrink .navbar-brand {
	font-size: 1.2rem;
}

.nav-link.active {
	font-weight: 600;
	color: #ffc107 !important;
}

.icon-list i {
	font-size: 1.2rem;
	margin-right: 8px;
	color: #0d6efd;
}

.card img {
	height: 180px;
	object-fit: cover;
}

footer {
	background: #f8f9fa;
	padding: 15px 0;
	text-align: center;
	margin-top: 20px;
	border-top: 1px solid #dee2e6;
}

section {
	padding: 80px 0;
}

/* Ad spaces */
.ad-space-top,
.ad-space-bottom {
	width: 100%;
	text-align: center;
	padding: 15px 0;
	margin: 15px 0;
}

.ad-placeholder {
	background: #f1f3f5;
	border: 1px dashed #adb5bd;
	padding: 20px;
	font-size: 1rem;
	color: #495057;
}

/* Inline ad styled like card */
.inline-ad.card {
	border: 2px dashed #adb5bd;
}

.inline-ad .card-body {
	background: #f8f9fa;
	text-align: center;
}

.inline-ad .ad-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: #6c757d;
	margin-bottom: 8px;
}

/* Sticky bottom ad (mobile only) */
.sticky-ad-mobile {
	display: none;
}

@media (max-width: 768px) {
	.sticky-ad-mobile {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		border-top: 1px solid #dee2e6;
		box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
		text-align: center;
		padding: 10px;
		z-index: 2000;
	}

	body {
		padding-bottom: 60px;
		/* space for sticky ad */
	}
}

/* Scroll-to-top button */
#scrollTopBtn {
	position: fixed;
	bottom: 90px;
	right: 30px;
	background: #0d6efd;
	color: #fff;
	border: none;
	padding: 12px 15px;
	border-radius: 50%;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
	transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.3s ease;
	z-index: 1050;
	opacity: 0;
	visibility: hidden;
	cursor: pointer;
}

#scrollTopBtn.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

#scrollTopBtn:hover {
	background: #084298;
	transform: translateY(-3px);
}

.logo {
	display: inline-block;
	width: 64px;
	height: 64px;
	background-color: white;
	-webkit-mask: url("../img/logo_512.png") no-repeat center;
	-webkit-mask-size: contain;
	mask: url("../img/logo_512.png") no-repeat center;
	mask-size: contain;
}

.two-line {
  position: relative;
  display: -webkit-box;             /* Chrome, Safari, Edge */
  -webkit-line-clamp: 2;            /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;

  display: -moz-box;                /* Firefox fallback */
  -moz-box-orient: vertical;

  white-space: normal;
  word-break: break-word;
  line-height: 1.4em;               /* tweak based on your design */
  max-height: calc(1.4em * 2);      /* 2 lines only */
  font-size: clamp(0.9rem, 2vw, 1rem);
}

/* Cross-browser ellipsis fade */
.two-line::after {
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: 0.25em;

  /* Fade that adapts to card background */
  background: inherit;
}

a {text-decoration:none;}