/**
 * Kampanja 2026 — campaign page styles.
 *
 * This file is loaded AFTER the theme's main.css so we can build on top of
 * the existing section.heading / section.content-section / .wrapper / .button
 * rules without duplicating them. Only campaign-specific additions here.
 *
 * Colour: #FF671B (matches theme $color-orange).
 * Fonts:  Maineri (display), Anonymous Pro (body) — loaded by the theme.
 */

/*
@font-face {
    font-family: 'maineri';
    src: url('../fonts/maineri-boldsoft-webfont.woff2') format('woff2'),
         url('../fonts/maineri-boldsoft-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/

section.content-section.lift > .wrapper > .text > .content {
	h2 {
		font-family: 'maineri', 'Roboto Condensed', 'Arial', sans-serif;
		font-size: clamp(1.8rem, 4vw, 3rem);
		line-height: 1em;
		text-transform: uppercase;
		letter-spacing: -0.03em;
		color: #FF671B;
		margin-bottom: 0.5em;
	}
	p {
		&:last-child {
		/* margin-bottom: 0; */
		}
		font-size: 1.25rem; /* 1.5 */
		line-height: 1.34;
	}
}

@media (max-width: 600px) {
	section.content-section.lift > .wrapper > .text > .content {
		p {
			font-size: 0.875rem;
		}
	}
}


/* ============================================================
   HERO
   Reuses section.heading from the theme. We only add a fallback
   background colour for when no image is set.
   ============================================================ */

.root section.kampanja-hero > .wrapper > .content,
.root section.align-top > .wrapper > .content {
	bottom: 5% !important;
    transform: translate(-50%, 0) !important;
    top: auto !important;
	h1 {
		text-align: center;
		color: white;
	}
}
.kampanja-hero .kampanja-hero__bg-fallback {
	position: absolute;
	inset: 0;
	background-color: #FF671B;
}

/* Ensure the image fills the hero the same way the theme does */
.kampanja-hero .background img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}

/* ============================================================
   INTRO (50/50 lift — reuses .content-section.lift)
   Only campaign-specific overrides here.
   ============================================================ */

section.content-section.kampanja-gallery,
section.content-section.kampanja-terms,
section.content-section.kampanja-intro.lift {
	border-bottom: 6px solid #FF671F;
	> .wrapper > .text {
		width: 100% !important;
		> .content {
			max-width: 940px;
			margin-left: auto;
			margin-right: auto;
			h1 {
				text-align: center;
				width: 100%;
			}
			p {
				width: 100%;
			}
		}
	}
}
.kampanja-intro .text .content h1 {
	color: #FF671B;
}

.kampanja-intro__cta {
	margin-top: 2em;
	display: inline-block;
}

/* ============================================================
   FORM SECTION
   ============================================================ */

.kampanja-form-section {
	.screen-reader-text {
		display: none;
	}
}

/* Steps */
.kampanja-form-step {
	width: 100%;
	max-width: 940px;
	margin-left: auto;
	margin-right: auto;
}

.kampanja-form-step__inner {
}

.kampanja-form-step__inner--success {
	text-align: center;
	max-width: 940px;
	margin: 0 auto;
	padding: 3rem 0;
}

/* Headings inside form use Maineri like the rest of the theme */
.kampanja-form-step h2 {
	font-family: 'maineri', 'Roboto Condensed', 'Arial', sans-serif;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: -0.03em;
	color: #FF671B;
	margin-bottom: 0.5em;
}

.kampanja-form-step p {
	font-size: 0.95rem;
	line-height: 1.6;
	margin-bottom: 1.5em;
	color: #333;
}

/* Form layout */
.kampanja-form__row {
	display: flex;
	gap: 1rem;
}

.kampanja-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
	flex: 1;
}

.kampanja-form__field--narrow {
	flex: 0 0 9rem;
}

.kampanja-form__field label {
	font-family: 'maineri', 'Roboto Condensed', 'Arial', sans-serif;
	font-size: 1.125rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #555;
}
section.content-section.kampanja-intro > .wrapper > .text > .content label a {
	margin: 0;
}
.kampanja-form__field label.kampanja-form__terms-label {
	margin-top: 0.5rem;
	margin-bottom: 1.5rem;
}
.kampanja-form__input {
	width: 100%;
	padding: 0.75rem 1rem;
	font-family: 'Anonymous Pro', sans-serif;
	font-size: 1rem;
	border: 2px solid #ccc;
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
	border-radius: 0; /* keep angular like the brand */
}

.kampanja-form__input:focus {
	outline: none;
	border-color: #FF671B;
}

.kampanja-form__input.is-invalid {
	border-color: #c00;
}

.kampanja-form-step--code .kampanja-form__input {
	max-width: 500px;
}

.kampanja-form-step--register {
	border-top: 6px solid #FF671F;
	padding-top: 50px;
}
@media (max-width: 600px) {
	.kampanja-form-step--register {
		border-top: 4px solid #FF671F;
		padding-top: 26px;
	}
}

/* Submit button — mirrors the theme's .button style but filled */
.kampanja-form__btn {
	display: inline-block;
	padding: 0.5rem 1.5rem 0.3rem;
	font-family: 'maineri', 'Roboto Condensed', 'Arial', sans-serif;
	font-size: 1.4rem;
	line-height: 1.75rem;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: #fff;
	background-color: #FF671B;
	border: 2px solid #FF671B;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.kampanja-form__btn:hover,
.kampanja-form__btn:focus {
	background-color: #000;
	border-color: #000;
	color: #fff;
}

.kampanja-form__btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Feedback messages */
.kampanja-form__message {
	margin-top: 0.75rem;
	font-size: 0.9rem;
	line-height: 1.5;
	min-height: 1.5em;
}

.kampanja-form__message.is-error {
	color: #c00;
}

.kampanja-form__message.is-success {
	color: #28a745;
}

/* Success step */
.kampanja-success__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin: 0 auto 1.5rem;
	border-radius: 50%;
	background: #FF671B;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
}

.kampanja-form-step--success h2 {
	color: #222;
	font-size: clamp(1.2rem, 3vw, 1.8rem);
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: 1.5em;
}

/* ============================================================
   GALLERY
   ============================================================ */

section.content-section.kampanja-gallery.lift {
	> .wrapper {
		max-width: 940px;
		margin: 0 auto;
		> .text {
			padding: 0;
			> .content {
				h1,
				h2 {
					text-align: left;
					color: #ffffff;
				}
				p {
					color: #ffffff;
				}
			}
		}
	}
}

.kampanja-gallery {
	padding: 4rem 0;
	background: #FF671F;
}

.kampanja-gallery > .wrapper {
	margin: 0 auto;
}

.kampanja-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

/* First image spans full width */
.kampanja-gallery__item--featured {
	grid-column: 1 / -1;
}

.kampanja-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 600px) {
	.kampanja-form__row {
		flex-direction: column;
		gap: 0;
	}

	.kampanja-form__field--narrow {
		flex: 1;
	}

	.kampanja-gallery__grid {
		grid-template-columns: 1fr;
	}

	.kampanja-gallery__item--featured {
		grid-column: 1;
	}
}

/* ============================================================
   TERMS & CONDITIONS SECTION
   Uses content-section content (same as theme content_block).
   The theme centres .wrapper only on body.page-template-default,
   so we replicate that rule for our template body class.
   ============================================================ */

body.page-template-kampanja-2026-template section.content-section.content > .wrapper {
	max-width: 940px;
	margin: 0 auto;
}

/* ============================================================
   Prize info block (image + description shown after code verify)
   ============================================================ */
section.content-section.kampanja-terms {
    & > .wrapper > .text {
        & > .content {
            h1 {
				text-align: left !important;
			}
			p {
				font-size: 16px;
			}
		}
	}
}

/* section.content-section.kampanja-terms { */
/* 	background: #fff; */
/* } */
/**/
/* section.content-section.kampanja-terms > .wrapper > .text > .content { */
/* 	max-width: 940px; */
/* 	margin-left: auto; */
/* 	margin-right: auto; */
/**/
/* 	h1, */
/* 	h2, */
/* 	h3 { */
/* 		font-family: 'maineri', 'Roboto Condensed', 'Arial', sans-serif; */
/* 		text-transform: uppercase; */
/* 		letter-spacing: -0.03em; */
/* 		color: #FF671B; */
/* 		margin-bottom: 0.4em; */
/* 	} */
/**/
/* 	h1 { font-size: clamp(1.6rem, 3.5vw, 2.8rem); } */
/* 	h2 { font-size: clamp(1.3rem, 2.5vw, 2rem); } */
/* 	h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); } */
/**/
/* 	p, */
/* 	li { */
/* 		font-size: 0.95rem; */
/* 		line-height: 1.7; */
/* 		color: #333; */
/* 	} */
/**/
/* 	ul, */
/* 	ol { */
/* 		padding-left: 1.5em; */
/* 		margin-bottom: 1em; */
/* 	} */
/**/
/* 	a { */
/* 		color: #FF671B; */
/* 		text-decoration: underline; */
/* 	} */
/**/
/* 	a:hover, */
/* 	a:focus { */
/* 		color: #000; */
/* 	} */
/* } */

.kampanja-prize-info {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.kampanja-prize-info__image {
	max-width: 320px;
	height: auto;
	flex-shrink: 0;
	border-radius: 4px;
	object-fit: cover;
}

.kampanja-prize-info__desc p {
	margin: 0 !important;
	flex: 1;
}

@media (max-width: 600px) {
	.kampanja-prize-info {
		flex-direction: column;
	}

	.kampanja-prize-info__image {
		width: 100%;
		max-width: 320px;
	}
}