/* modern.css — 2026 enhancements for alexandrastan.com
   Layered on top of existing default.css without breaking the original theme.
   SEO-friendly, mobile-optimized, performance-focused. */

/* --- Performance: reduce layout thrash from transition:all on * --- */
*, *:before, *:after {
	transition: color .2s ease, background-color .2s ease, opacity .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* --- Smooth scrolling --- */
html {
	scroll-behavior: smooth;
	-webkit-tap-highlight-color: transparent;
}

/* --- Better text rendering --- */
body {
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --- Fluid container instead of fixed 1100px --- */
.inside {
	width: 100%;
	max-width: 1100px;
	padding-left: 20px;
	padding-right: 20px;
}

/* --- Image lazy loading fade-in --- */
img[loading="lazy"] {
	opacity: 0;
	transition: opacity .4s ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"][src] {
	opacity: 1;
}

/* --- Modern focus styles for accessibility --- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid #e74c3c;
	outline-offset: 2px;
}

/* --- Touch-friendly tap targets (48px minimum) --- */
@media (pointer: coarse) {
	.header ul li a {
		min-height: 48px;
		display: inline-flex;
		align-items: center;
	}
	footer a {
		min-width: 48px;
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* --- Responsive images --- */
img {
	max-width: 100%;
	height: auto;
}

/* --- Better news grid for modern screens --- */
@media (min-width: 1400px) {
	.inside {
		max-width: 1280px;
	}
}

/* --- Fix video embeds for modern aspect ratio --- */
.video-fundal {
	position: relative;
}
.video-fundal iframe {
	border: 0;
}

/* --- Newsletter form modernization --- */
.newsletter input[type="text"],
.newsletter input[type="email"] {
	font-size: 16px; /* prevents iOS zoom */
	border-radius: 8px;
	border: 2px solid #ddd;
	padding: 14px 16px;
	transition: border-color .2s ease;
}
.newsletter input[type="text"]:focus,
.newsletter input[type="email"]:focus {
	border-color: #e74c3c;
	outline: none;
}
.newsletter input[type="button"],
.newsletter input[type="submit"] {
	font-size: 16px;
	padding: 14px 32px;
	border-radius: 8px;
	cursor: pointer;
	border: none;
	background: #e74c3c;
	color: #fff;
	font-weight: 500;
	transition: background-color .2s ease, transform .1s ease;
}
.newsletter input[type="button"]:hover,
.newsletter input[type="submit"]:hover {
	background: #c0392b;
}
.newsletter input[type="button"]:active,
.newsletter input[type="submit"]:active {
	transform: scale(0.98);
}

/* --- Better booking section --- */
.booking {
	padding: 30px 20px;
	font-size: 16px;
}
.booking a {
	word-break: break-all;
}

/* --- Footer improvements --- */
footer .copyright {
	font-size: 13px;
	opacity: 0.7;
	padding: 20px 0;
}

/* --- Smooth page entry animation --- */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.module {
	animation: fadeInUp 0.6s ease both;
}
.module:nth-child(2) { animation-delay: 0.1s; }
.module:nth-child(3) { animation-delay: 0.2s; }
.module:nth-child(4) { animation-delay: 0.3s; }

/* --- News/photo item hover lift effect --- */
.news .item,
.photo .item {
	transition: transform .2s ease, box-shadow .2s ease;
}
.news .item:hover,
.photo .item:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* --- Music item hover --- */
.music .item:hover .poza {
	transform: scale(1.03);
	box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* --- Better mobile nav at small sizes --- */
@media (max-width: 767px) {
	/* Ensure content doesn't hide behind fixed bottom nav */
	.main-container {
		padding-bottom: 60px;
	}

	/* News items full width on small phones */
	.news .item {
		width: 48% !important;
		margin-right: 2% !important;
	}

	/* Music grid 2 columns on mobile */
	.music .item {
		width: 48% !important;
		margin-right: 2% !important;
	}

	/* Photo grid 2 columns on mobile */
	.photo .item {
		width: 48% !important;
		margin-right: 2% !important;
	}
}

@media (max-width: 420px) {
	.news .item,
	.music .item {
		width: 100% !important;
		margin-right: 0 !important;
	}

	/* Bigger touch targets for article links */
	.news .item h2 {
		font-size: 15px;
		line-height: 1.4;
	}
}

/* --- Prefers reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	*, *:before, *:after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	html {
		scroll-behavior: auto;
	}
}

/* Dark mode removed — site stays light theme only */

/* --- Fix empty sidebar space when Facebook/Twitter embeds don't load --- */
.article .c2 .fb-page,
.article .c2 .twitter-timeline,
.article .c2 .fb-xfbml-parse-ignore {
	min-height: 0;
}
.article .c2 .boxie:empty,
.article .c2 .boxie:has(> .fb-page:empty),
.article .c2 .boxie:has(> iframe[src*="facebook"]:not([height])) {
	display: none;
}
/* Collapse empty sidebar boxes that have no rendered content */
.article .c2 .boxie {
	min-height: 0;
}
/* If sidebar has only dead embeds, hide it and let content go full width */
.article .c2:has(.boxie:only-child .fb-page) {
	display: none;
}
.article .c2:has(.boxie:only-child .fb-page) ~ .c1,
.article .c1:only-child {
	width: 100%;
}

/* --- Print styles --- */
@media print {
	.header, .deschidere, .newsletter, .booking, footer,
	.listen, .listen-buy, .banner, #__gallery {
		display: none !important;
	}
	.inside {
		width: 100%;
		max-width: none;
	}
	body {
		font-size: 12pt;
		color: #000;
	}
}