/*
Theme Name: SING!BASEL
Theme URI: https://www.singbasel.com
Author: Permi Jhooti
Description: One-page SING!BASEL site with sliding Events / Info / News panels. Content is edited in the "SING!BASEL" admin menu (ACF Pro options pages, EN + DE).
Version: 1.0.0
Requires PHP: 7.4
Text Domain: singbasel
*/

/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face { font-family: 'Amina'; src: url('assets/fonts/Amina-Regular.woff2') format('woff2'), url('assets/fonts/Amina-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Amina'; src: url('assets/fonts/Amina-Medium.woff2') format('woff2'), url('assets/fonts/Amina-Medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Amina'; src: url('assets/fonts/Amina-Bold.woff2') format('woff2'), url('assets/fonts/Amina-Bold.woff') format('woff'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Amina'; src: url('assets/fonts/Amina-Black.woff2') format('woff2'), url('assets/fonts/Amina-Black.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Amina'; src: url('assets/fonts/Amina-Italic.woff2') format('woff2'), url('assets/fonts/Amina-Italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }

/* ==========================================================================
   Colours & sizes
   ========================================================================== */

:root {
	--blue: #5b69af;
	--blue-light: #838fc2;
	--green: #c8d530;
	--pink: #ec638a;
	--pink-button: #f08ba7;
	--pink-button-hover: #f5b1c6;
	--news-bg: #eef0f1;
	--ink: #1e1d14;
	--header-h: 80px;
	--footer-h: 67px;
	--slide: 0.5s ease-in-out;
}

/* ==========================================================================
   Base (reset + typography, as the old Tailwind preflight + fonts.css)
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }

html { -webkit-text-size-adjust: 100%; }

body {
	font-family: 'Amina', sans-serif;
	font-weight: 400;
	color: var(--ink);
	line-height: 1.6;
	background: #f3f4f6;
}

h1, h2 { font-size: 1.875rem; font-weight: 600; line-height: 1.3; }
h3 { font-size: 1.5rem; font-weight: 500; line-height: 1.4; }
h4 { font-size: 1.25rem; font-weight: 500; line-height: 1.5; }
h5 { font-size: 1.125rem; font-weight: 400; line-height: 1.5; }
h6 { font-size: 1rem; font-weight: 400; line-height: 1.5; }
p { font-size: 1.25rem; font-weight: 400; line-height: 1.5; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { font-size: 1rem; margin-left: 20px; list-style: none; }
li { margin-bottom: 8px; }
blockquote { font-size: 1.125rem; font-style: italic; border-left: 4px solid #ccc; padding-left: 16px; margin: 16px 0; color: #555; }

a { color: var(--ink); text-decoration: none; transition: color 0.2s ease-in-out; }

button { font: inherit; color: inherit; background: none; cursor: pointer; text-align: inherit; }

.icon { width: 1em; height: 1em; }

/* Only the chosen language is visible. */
html[data-lang="en"] .lang-de,
html[data-lang="de"] .lang-en { display: none !important; }

/* ==========================================================================
   One-page layout (front page)
   ========================================================================== */

.home { overflow: hidden; height: 100%; overscroll-behavior: none; }

/* Header: blue bar over the left 80% */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	width: 80%;
	height: var(--header-h);
	padding: 0 24px;
	display: flex;
	align-items: center;
	background: var(--blue);
	color: #fff;
}
.logo-button { flex-grow: 1; }
.logo { height: 60px; width: auto; }
.menu-button { display: none; font-size: 2.25rem; line-height: 1; color: #fff; }

.mobile-menu { display: none; }

/* Hero: main image/video slideshow */
.hero { overflow: hidden; background: #fff; }
.hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}
.hero-slide.is-active { opacity: 1; }

/* Optional overlay image (Main image → Overlay image) */
.hero-overlay { position: absolute; z-index: 10; }
.hero-overlay img { width: auto; max-width: 100%; }
.hero-overlay-corner { top: 16px; right: 16px; }
.hero-overlay-corner img { height: 60px; }
.hero-overlay-centre {
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.hero-overlay-centre a { pointer-events: auto; }
.hero-overlay-centre img { max-height: 100%; height: auto; object-fit: contain; }

.hero-desktop {
	position: fixed;
	top: var(--header-h);
	bottom: var(--footer-h);
	left: 0;
	width: 80%;
}

.mobile-scroll, .scroll-top { display: none; }

/* News column: right 20%, widens to 60% */
.news-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: var(--footer-h);
	z-index: 10;
	width: 20%;
	padding: 24px;
	background: var(--news-bg);
	cursor: pointer;
	transition: width var(--slide);
}
body[data-open="news"] .news-panel { width: 60%; }

.news-panel .news-section { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.news-section { padding: 20px; color: var(--ink); font-size: 1.25rem; }
.news-title { text-transform: uppercase; margin-bottom: 15px; }
.news-list-wrapper { flex-grow: 1; overflow-y: auto; max-width: 800px; }
.news-item { margin-top: 20px; padding-bottom: 15px; border-bottom: 1px solid #ddd; }
.news-item:last-child { margin-bottom: 50px; }
.news-item-title { font-weight: 500; text-transform: uppercase; }
.news-item-info { margin-top: 10px; font-size: 1.25rem; font-weight: 400; line-height: 1.3; }
.news-item-info p { line-height: 1.3; }
.news-more { font-style: italic; font-weight: 400; }

/* Collapsed column shows teasers, open column shows the full text. */
.news-panel .news-full { display: none; }
body[data-open="news"] .news-panel .news-full { display: block; }
body[data-open="news"] .news-panel .news-excerpt { display: none; }

/* Events / Info panels: slide up from below the footer */
.slide-panel {
	position: fixed;
	top: var(--header-h);
	bottom: var(--footer-h);
	left: 0;
	z-index: 50;
	width: 40%;
	transform: translateY(120%);
	pointer-events: none;
	transition: transform var(--slide);
}
.panel-info { left: 40%; }
body[data-open="events"] .panel-events,
body[data-open="info"] .panel-info { transform: translateY(0); pointer-events: auto; }

.slide-panel-scroll {
	height: 100%;
	overflow-y: auto;
	padding: 24px;
	color: #fff;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 700;
}
.panel-events .slide-panel-scroll { background: var(--green); }
.panel-info .slide-panel-scroll { background: var(--pink); }

/* Footer: EVENTS 40% | INFO 40% | language + social 20% */
.site-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 9999;
	width: 100%;
	height: var(--footer-h);
	display: flex;
}
.footer-section {
	height: 100%;
	display: flex;
	align-items: center;
	padding-left: 20px;
	font-size: 1.5rem;
	color: #fff;
}
.footer-section h2 { text-transform: uppercase; }
.footer-events { width: 40%; background: var(--green); }
.footer-info { width: 40%; background: var(--pink); }
.footer-right { width: 20%; background: var(--pink); gap: 24px; }

.language-switcher { display: flex; align-items: center; gap: 6px; }
.lang-option { transition: 0.2s ease; }
html[data-lang="en"] .lang-option[data-set-lang="en"],
html[data-lang="de"] .lang-option[data-set-lang="de"] { font-weight: 700; text-decoration: underline; }

.social-icons { display: flex; align-items: center; gap: 10px; }
.social-icon { font-size: 18px; color: inherit; }
.social-icon:hover { color: #0077ff; }

/* ==========================================================================
   Panel content
   ========================================================================== */

/* Events */
.events-image-wrapper img { width: 300px; height: auto; margin-bottom: 3rem; }
.events-introduction { margin-bottom: 20px; font-size: 1.5rem; font-weight: 500; line-height: 1.3; }
.events-list { margin-top: 50px; }
.event-item { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--ink); }
.event-title { font-size: 1.5rem; font-weight: bold; }
.event-subtitle { font-size: 1.2rem; margin-top: 0.25rem; }
.event-meta, .event-duration { color: var(--ink); font-style: italic; margin-top: 0.5rem; }
.event-description { margin-top: 1rem; font-weight: 400; color: var(--ink); }

/* Info */
.about-introduction {
	margin-bottom: 50px;
	padding-bottom: 20px;
	border-bottom: 1px solid #fff;
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.3;
}
.contact-introduction { margin-bottom: 20px; font-size: 1.5rem; font-weight: 500; line-height: 1.3; }
.contact-link { margin: 50px 0; padding-bottom: 20px; border-bottom: 1px solid #fff; }
.contact-link a {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: 9999px;
	background: var(--pink-button);
	color: inherit;
	transition: background-color 0.3s ease;
}
.contact-link a:hover { background: var(--pink-button-hover); }

/* Info sections (Who's involved, partners, ...): image left, title + subtitle beside it */
.info-block { margin-top: 50px; }
.info-block-title { margin-bottom: 15px; text-transform: uppercase; }
.info-item {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--ink);
}
.info-item-image { flex: 0 0 120px; }
.info-item-image img { width: 120px; height: auto; }
.info-item-text { min-width: 0; text-align: left; }
.info-item-title { font-weight: bold; }
.info-item-title a { color: inherit; text-decoration: underline; }
.info-item-subtitle { font-style: italic; color: var(--ink); }

/* ==========================================================================
   Mobile (< 1024px)
   ========================================================================== */

@media (max-width: 1023px) {
	.site-header { width: 100%; padding-right: 64px; }
	.logo { height: 50px; }
	.menu-button { display: block; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }

	.mobile-menu:not([hidden]) {
		display: block;
		position: fixed;
		top: var(--header-h);
		left: 0;
		z-index: 70;
		width: 100%;
		padding: 16px;
		background: var(--blue-light);
		color: #fff;
	}
	.mobile-menu-inner { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
	.mobile-menu .social-icon { font-size: 1.25rem; }

	.hero-desktop, .news-panel { display: none; }

	.mobile-scroll {
		display: block;
		position: fixed;
		top: var(--header-h);
		bottom: var(--footer-h);
		left: 0;
		right: 0;
		overflow-y: auto;
		overscroll-behavior: none;
		background: #fff;
	}
	.hero-mobile { position: relative; height: 40vh; }
	.hero-overlay-corner img { height: 32px; }
	.mobile-news { padding: 16px; background: var(--news-bg); }

	.scroll-top {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		bottom: 80px;
		right: 16px;
		z-index: 50;
		width: 48px;
		height: 48px;
		border-radius: 9999px;
		background: var(--blue);
		color: #fff;
		font-size: 1.875rem;
		transition: background-color 0.2s;
	}
	.scroll-top:hover { background: var(--blue-light); }

	.slide-panel, .panel-info { left: 0; width: 100%; }

	.footer-events, .footer-info { width: 50%; }
	.footer-right { display: none; }
}