/*
Theme Name: SKNLP
Description: Tema custom pentru sknlabourparty.com, migrata din exportul static al site-ului vechi.
Version: 1.0
Text Domain: sknlabourparty
*/

/*
 * Toate fix-urile noastre (responsive, corectii peste CSS-ul din export)
 * se pun AICI - fisierul se incarca ultimul. Nu se modifica fisierele
 * copiate din export (assets/css/).
 */

/*
 * Formularul CF7 are markup propriu pentru checkbox-uri (.wpcf7-list-item),
 * nu pattern-ul .container-checkbox/.checkmark al platformei vechi -
 * reproducem aici vizualul original (box gri 35x35 + bifa alba rotita)
 * pe structura CF7: label > input + span.wpcf7-list-item-label.
 * Valorile (font, dimensiuni, culori) sunt copiate din skn-*.css,
 * regulile .widget-form .form-disclaimers .container-checkbox.
 */
.form-disclaimers .wpcf7-list-item {
	display: block;
	margin: 0 0 20px;
}
.form-disclaimers .wpcf7-list-item label {
	display: block;
	position: relative;
	padding-left: 55px;
	cursor: pointer;
	font-family: "Barlow Condensed", sans-serif;
	font-style: italic;
	font-weight: 300;
	font-size: 25px;
	line-height: 1.2;
	color: #909090;
	-webkit-user-select: none;
	user-select: none;
	margin-bottom: 0;
}
.section-contact_form .form-disclaimers .wpcf7-list-item label {
	color: #ffffff;
	text-align: left;
}
.form-disclaimers .wpcf7-list-item input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	height: 0;
	width: 0;
}
.form-disclaimers .wpcf7-list-item-label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 35px;
	height: 35px;
	background-color: #eee;
	border: 1px solid #BEBEBE;
}
.form-disclaimers .wpcf7-list-item label:hover .wpcf7-list-item-label::before {
	background-color: #ccc;
}
.form-disclaimers .wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
	background-color: #757575;
}
.form-disclaimers .wpcf7-list-item input:checked + .wpcf7-list-item-label::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 12px;
	width: 10px;
	height: 18px;
	border: solid #ffffff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg);
}
/* wpautop pune <br> intre cele doua acceptance-uri - spacing-ul vine din
   .wpcf7-list-item, br-ul doar dubleaza gap-ul */
.form-disclaimers br {
	display: none;
}

/*
 * Mesajele de validare CF7 (.wpcf7-not-valid-tip) sunt implicit rosii -
 * invizibile pe fundalul rosu al sectiunii de contact. Originalul folosea
 * alb in sectiunea rosie (#fff) si #ea5455 in rest (regulile
 * .section-contact_form ... .error din skn-*.css).
 */
.widget-form .wpcf7-not-valid-tip {
	color: #ea5455;
}
.section-contact_form .wpcf7-not-valid-tip {
	color: #ffffff;
}
.section-contact_form .wpcf7-response-output {
	color: #ffffff;
	border-color: #ffffff;
}

/*
 * Bug mostenit din export: imaginea hero de pe paginile de continut
 * (.section-hero-banner--inner-page - History/Ready/What We Stand For) nu
 * are max-width - platforma veche calcula dimensiunile in JS la runtime
 * (JS-ul respectiv nu a fost migrat). Fara fix, imaginea isi pastreaza
 * latimea nativa (1920px) si depaseste viewportul pe mobil - se vede doar
 * o felie din stanga, la inaltime nativa (arata "trunchiata"/zoomata).
 */
.sknlabourparty .section-hero-banner--inner-page .media-img-container img {
	max-width: 100%;
	height: auto;
}

/*
 * Cardurile de album de pe pagina de listare a galeriilor (/galleries/gallery)
 * folosesc un div/link cu background-image inline (.main-image / .other-item)
 * caruia platforma veche ii calcula inaltimea in JS la runtime (acelasi tipar
 * ca mai sus) - fara fix, cardurile sunt inalte 0 (invizibile). Adaugam
 * inaltime fixa + background-size:cover, echivalent vizual cu originalul.
 */
.sknlabourparty .gallery-list-widget .main-image-wrapper .main-image {
	display: block;
	height: 340px;
	background-size: cover;
	background-position: center;
	border-radius: 10px 10px 0 0;
}
@media (max-width: 768px) {
	.sknlabourparty .gallery-list-widget .main-image-wrapper .main-image {
		height: 220px;
	}
}
.sknlabourparty .gallery-list-widget .other-images .other-item {
	display: block;
	flex: 1;
	height: 90px;
	background-size: cover;
	background-position: center;
	border-radius: 0 0 10px 10px;
}
.sknlabourparty .gallery-list-widget .other-images .other-item.total-items {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	font-weight: 600;
	text-align: center;
}

/*
 * Nici imaginea de hero, nici pozele din grila albumelor foto
 * (.section-gallery-hero, .gallery-items .img-container) nu au max-width in
 * CSS-ul din export - pe site-ul live, wrapper-ul ".container.gallery-page"
 * (vezi page-gallery-album.php) le limiteaza doar in latime pana la marginea
 * coloanei; fara reguli explicite, imaginile raman la dimensiunea nativa a
 * fisierului si depasesc coloana (ex. marimea WP "medium" de 300px afisata
 * intr-o coloana de ~225px). Adaugam responsive standard.
 */
.gallery-page .section-gallery-hero img,
.gallery-page .gallery-items .img-container img {
	max-width: 100%;
	height: auto;
}

/*
 * "Load more" pe albume (vezi page-gallery-album.php) - pozele de dupa
 * prima pagina sunt ascunse pana la click, dezvaluite din JS (elimina
 * clasa, nu afiseaza din CSS un display separat - simplu display:none e
 * suficient aici).
 */
.gallery-page .gallery-items .gallery-item-more {
	display: none;
}

/*
 * "Load more" pe arhivele de categorie /articles/news si /articles/press-releases
 * (vezi category.php) - acelasi tipar ca la galerie.
 */
.article-list .article-item-more {
	display: none;
}

/*
 * Bug mostenit din export: hero-ul de articol (.media-widget-container) e
 * float:left fara width propriu (shrink-to-fit) - un element flotant fara
 * latime definita isi ia latimea din continutul intrinsec (imaginea la
 * dimensiunea nativa), indiferent de max-width; regula CSS din export
 * ".informative-article .media-widget-container {width:100% !important}"
 * nu rezolva asta (verificat - imaginea tot iese din viewport pe mobil).
 * Scoatem float-ul complet, ca elementul sa aiba un containing block real
 * (100% latime de bloc normal), de care se leaga corect width:100% pe img.
 */
.informative-article .media-widget-container {
	float: none;
	max-width: 100%;
}
.informative-article .w-fit-content,
.informative-article .w-fit-content img {
	max-width: 100%;
}

/*
 * Unele articole au imagini simple <img> lipite direct in continut (in
 * afara hero-ului), fara niciun wrapper - verificat pe site-ul live ca
 * afiseaza diferit dupa un singur semnal disponibil in markup, atributul
 * HTML "width":
 * - CU width (ex. 4 poze mici la finalul unui articol, width="324" etc.) -
 *   pe live apar intr-un grid cu spatiu intre ele -> inline-block + margine.
 * - FARA width (o singura poza mare lipita direct langa un text/legenda in
 *   acelasi paragraf, fara linie noua intre ele) - pe live poza ocupa randul
 *   ei, textul de dupa trece pe randul urmator -> block.
 * Nu exista alt semnal in markup ca sa distingem cele doua cazuri; probabil
 * platforma veche facea asta din JS la runtime (nemigrat).
 */
.informative-article .text-widget-container img {
	max-width: 100%;
	height: auto;
}
.informative-article .text-widget-container img[width] {
	display: inline-block;
	margin: 0 10px 10px 0;
}
.informative-article .text-widget-container img:not([width]) {
	display: block;
	margin: 15px 0;
}

/*
 * Homepage (front-page.php).
 */

/*
 * Aceeasi lipsa de max-width ca la hero-ul paginilor de continut (vezi mai
 * sus), de data asta pe imaginea desktop/mobil a hero-ului de homepage.
 */
.sknlabourparty .section-hero-banner--homepage .media-img-container img {
	max-width: 100%;
	height: auto;
}

/*
 * Bloc <style> inline din export (index.html, doar pe homepage): pe mobil
 * titlul hero nu mai sta suprapus peste imagine (absolute + bottom:111px,
 * regula de baza din skn-*.css), ci sub ea, in flux normal, cu textul rosu
 * in loc de alb; iconul de scroll urca putin ca sa nu ajunga sub fold.
 */
@media (max-width: 768px) {
	.sknlabourparty .section-hero-banner.section-hero-banner--homepage .section-hero-banner_title {
		position: relative;
		left: auto;
		bottom: auto;
		transform: none;
	}
	.sknlabourparty .section-hero-banner.section-hero-banner--homepage .section-hero-banner_title h1 {
		color: #ED1C24;
	}
	.sknlabourparty .section-hero-banner.section-hero-banner--homepage .section-hero-banner_scroll-icon {
		bottom: 180px;
	}
}

/*
 * Cele doua carusele "N per view" ale homepage-ului (NEWS - 3/1 + buline,
 * GALLERY thumbs - 4/2 + sageti) folosesc acelasi tipar CSS: track cu
 * scroll-snap orizontal, JS-ul (sknlpCarousel(), vezi front-page.php) doar
 * apeleaza scrollTo() intre "pagini" de N elemente - fara nicio dependenta
 * de Swiper (bundle-ul JS al platformei vechi nu s-a migrat, vezi
 * functions.php).
 */
.sknlp-carousel-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.sknlp-carousel-track::-webkit-scrollbar {
	display: none;
}
.sknlp-carousel-track .sknlp-carousel-item {
	flex: 0 0 33.3333%;
	max-width: 33.3333%;
	scroll-snap-align: start;
	padding: 0 15px;
	box-sizing: border-box;
}
@media (max-width: 768px) {
	.sknlp-carousel-track .sknlp-carousel-item {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/*
 * Placeholder pentru articolele fara imagine reprezentativa (verificat -
 * exista in DB, nu doar teoretic, ex. "St. Kitts-Nevis Labour Party
 * Government Delivers Landmark Pension Reform...") - fara el, cardul din
 * carusel raman fara nicio imagine, dezaliniat fata de restul.
 */
.image-article--placeholder {
	height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f2f2f2;
}
.image-article--placeholder img {
	width: auto !important;
	max-width: 60%;
	max-height: 60%;
}
.sknlp-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 25px;
}
.sknlp-carousel-dots button {
	width: 12px;
	height: 12px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: #c2c2c2;
	cursor: pointer;
}
.sknlp-carousel-dots button.active {
	background-color: #ED1C24;
}

/*
 * Caruselul GALLERY (imagine mare + strip de thumbnail-uri) foloseste
 * clasele originale (.gallery-widget.big-img-with-thumbnails, .big-img,
 * .thumbnail - vezi skn-*.css pentru aspect-ratio-ul de baza), dar fara JS-ul
 * Swiper al platformei vechi - randam toate pozele in DOM si comutam manual
 * clasa .active (front-page.php). Fara acest bloc, toate pozele ar aparea
 * stivuite una sub alta.
 */
.sknlp-home-gallery .gallery-widget-big-img .item {
	display: none;
}
.sknlp-home-gallery .gallery-widget-big-img .item.active {
	display: block;
}
.sknlp-home-gallery .gallery-widget-thumbs .items-wrapper {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.sknlp-home-gallery .gallery-widget-thumbs .items-wrapper::-webkit-scrollbar {
	display: none;
}
.sknlp-home-gallery .gallery-widget-thumbs .items-wrapper .item {
	flex: 0 0 25%;
	max-width: 25%;
	scroll-snap-align: start;
	cursor: pointer;
	opacity: 0.6;
	padding: 0 5px;
	box-sizing: border-box;
}
.sknlp-home-gallery .gallery-widget-thumbs .items-wrapper .item.active {
	opacity: 1;
}
/*
 * Breakpoint-ul CSS trebuie sa coincida cu cel din JS (sknlpCarousel(),
 * implicit 768px) - altfel intre 500-768px CSS-ul mai arata 4/view cat timp
 * JS-ul calculeaza deja pagini de 2, si sagetile sar peste imagini.
 */
@media (max-width: 768px) {
	.sknlp-home-gallery .gallery-widget-thumbs .items-wrapper .item {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/*
 * Search (search.php) - fara referinta in arhiva (/search era zona de
 * membri a platformei vechi, exclusa de la migrare), doar tema nativa WP
 * pentru paginare (the_posts_pagination()) - fara nicio regula CSS in
 * export pentru .page-numbers/.nav-links, ar aparea complet nestilizata
 * (link-uri albastre implicite din browser).
 */
.navigation.pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 30px;
}
.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	color: #000000;
	text-decoration: none;
}
.navigation.pagination .page-numbers.current {
	background-color: #ED1C24;
	border-color: #ED1C24;
	color: #ffffff;
}
.navigation.pagination .page-numbers:not(.current):not(.dots):hover {
	border-color: #ED1C24;
	color: #ED1C24;
}
.navigation.pagination .page-numbers.dots {
	border: none;
}