/*
Theme Name: Brodos Werbenet
Theme URI: 
Description: Custom theme for Brodos Werbenet
Author: Brodos
Author URI: 
Version: 1.0.0
Text Domain: brodos-werbenet
*/

:root {
	--wp--preset--color--primary: #0069B4;
	--wp--preset--color--secondary: #003d3d;
	--wp--preset--color--base: #ffffff;
	--wp--preset--color--contrast: #000000;
	--wp--preset--color--gray: #DDDDDD;
	--wp--preset--font-family--heading: 'Montserrat', sans-serif;
	--wp--preset--font-family--body: 'Montserrat', sans-serif;
	--border-radius: 4px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 20px;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	margin-top: 0;
	line-height: 1.2;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

/* Layout Utilities */
.container {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.bg-primary {
	background-color: var(--wp--preset--color--primary);
}

.bg-gray {
	background-color: var(--wp--preset--color--gray);
}

.text-white {
	color: #fff;
}

.text-error {
	color: #E00000;
}

/* Footer */
footer.site-footer {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.footer-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	color: #fff;
}

/* Header */
header.site-header {
	border-bottom: 2px solid #000;
}

.header-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	color: #fff;
}

.site-logo {
	display: flex;
	gap: 8px;
	flex-direction: row;
	align-items: flex-end;

	img {
		height: 40px;
		width: auto;
		display: block;
	}

	span {
		font-size: 28px;
		line-height: 24px;
		color: #000;
		font-weight: 500;
	}
}

nav.site-nav {
	height: 60px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color: #000;

	.links-container {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	a {
		height: 100%;
		padding: 0 20px;
		display: flex;
		align-items: center;
		text-decoration: none;
		color: var(--text-color);

		&:hover {
			background-color: var(--accent-color);
		}

		.home-link {
			margin-right: auto;
		}

		svg {
			fill: var(--text-color);
		}
	}

	#sidebar-active {
		display: none;
	}

	.open-sidebar-button,
	.close-sidebar-button {
		display: none;
	}

	.main-menu {
		display: flex;
		list-style: none;
		margin: 0;
		padding: 0;
		height: 100%;
	}

	.main-menu>li {
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.main-menu>li>a {
		height: 100%;
		padding: 0 15px;
		display: flex;
		align-items: center;
		text-decoration: none;
		color: inherit;
		/* Inherit from nav.site-nav a */
		position: relative;
	}

	.main-menu>li>a:hover {
		background-color: var(--accent-color);
	}

	.main-menu .material-symbols-outlined {
		font-size: 24px;
		line-height: 1;
	}

	.wishlist-counter {
		position: absolute;
		top: 8px;
		right: 8px;
		background-color: #E00000;
		color: #fff;
		font-size: 14px;
		font-weight: 600;
		border-radius: 50%;
		width: 20px;
		text-align: center;
		line-height: 20px;
		height: 20px;
		display: block;
	}

	.sub-menu {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		background-color: #fff;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
		min-width: 150px;
		list-style: none;
		margin: 0;
		padding: 0;
		z-index: 20;
		border-top: 2px solid #000;
		border-radius: 0 0 var(--border-radius) var(--border-radius);
	}

	.menu-item-has-children:hover>.sub-menu {
		display: block;
	}

	.sub-menu li a {
		display: block;
		padding: 10px 15px;
		color: var(--text-color);
		text-decoration: none;
		white-space: nowrap;
	}

	.sub-menu li a:hover {
		background-color: var(--accent-color);
	}

	.main-menu {
		a {
			svg {
				width: 32px;
				height: 32px;
			}
		}
	}
}

.site-search-inner {}

.button {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
	border-radius: var(--border-radius);
	border: 2px solid;
	padding: 8px 24px;
	cursor: pointer;
	transition: all 0.3s ease-out;
}

.button.primary {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

.button.secondary {
	background-color: #fff;
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.button.outline {
	background-color: #fff;
	font-size: 20px;
	line-height: 1;
	padding: 12px 24px;
}

.button.outline.primary {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.button.outline.secondary {
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

.button:hover {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: #fff;
}

/* Home Page */
.campaigns-overview-link a {
	display: inline-block;
}


section.home-hero-wrapper {
	padding: 60px 0;
}

.home-hero-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 30px;

	.home-hero-left-wrap {
		display: flex;
		gap: 16px;
		flex-direction: column;
		align-items: flex-start;

		h1 {
			font-size: 36px;
			line-height: 1.2;
			margin: 0;
		}

		p {
			font-size: 24px;
			line-height: 1.4;
			margin: 0;
		}

		a {
			width: auto;
		}
	}

	.home-hero-right-wrap {
		.home-hero-image {
			width: 100%;
			height: auto;
		}

		img {
			border-radius: var(--border-radius);
		}
	}
}

section.campaigns-category-wrapper {
	padding: 60px 0;
	text-align: center;
}

.campaigns-category-wrap {
	.section-title {
		font-size: 36px;
		line-height: 1.2;
		margin-bottom: 16px;
	}

	.section-subtitle {
		font-size: 24px;
		line-height: 1.4;
		margin-top: 0;
		margin-bottom: 32px;
	}
}

.campaigns-category-list {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	gap: 30px;
	flex-direction: row;
	justify-content: center;
	flex-wrap: nowrap;

	.category-card {
		display: flex;
		gap: 16px;
		flex-direction: column;
		align-items: center;

		a {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10px;
		}

		.category-image {
			img {
				display: block;
				width: 120px;
				height: 120px;
				aspect-ratio: 1;
				object-fit: cover;
				border-radius: var(--border-radius);
			}
		}

		.category-name {
			font-size: 24px;
			line-height: 1;
		}
	}
}

section.campaigns-wrapper {
	padding: 60px 0;
	text-align: center;
}

.campaigns-wrap {
	.section-title {
		font-size: 36px;
		line-height: 1.2;
		margin-bottom: 16px;
	}

	.section-subtitle {
		font-size: 24px;
		line-height: 1.4;
		margin-top: 0;
		margin-bottom: 32px;
	}
}

.campaigns-list {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	gap: 16px;

	.campaign-card {
		display: flex;
		border: 1px solid #000;
		border-radius: var(--border-radius);
		flex-direction: column;
		text-align: left;
		overflow: hidden;
		background-color: #fff;
	}

	.campaign-image-wrapper {
		position: relative;

		.campaign-image {

			img {
				aspect-ratio: 4 / 3;
				object-fit: cover;
				display: block;
			}
		}

		.favorite-btn {
			position: absolute;
			right: 16px;
			top: 16px;
			border: none;
			background-color: transparent;
			padding: 0;
			cursor: pointer;

			span[data-favorite] {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 0;
				-webkit-transition: all 0.3s ease-out;
				-moz-transition: all 0.3s ease-out;
				-o-transition: all 0.3s ease-out;
				transition: all 0.3s ease-out;

			}

			svg {
				width: 30px;
				height: 30px;

				path {
					fill: var(--wp--preset--color--primary);
				}
			}

			&[data-favorite="false"] span[data-favorite="true"] {
				opacity: 0;
			}

			&[data-favorite="true"] span[data-favorite="true"] {
				opacity: 1;
			}
		}

		.new-badge {
			position: absolute;
			top: 16px;
			left: 16px;
			background-color: #05FD3B;
			color: #000;
			font-size: 12px;
			font-weight: 500;
			border-radius: 8px;
			width: 48px;
			height: 24px;
			line-height: 24px;
			text-align: center;
		}
	}

	.campaign-details-wrapper {
		padding: 16px;
		display: flex;
		flex-direction: column;
		flex: 1;

		.campaign-meta-wrap {
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			margin-bottom: 12px;
			gap: 8px;
			flex: 1;
		}

		.campaign-category {
			font-size: 16px;
			line-height: 1.4;
			display: block;
			font-weight: 500;
		}

		.campaign-name {
			font-size: 20px;
			line-height: 1.4;
			margin: 0;
			font-weight: 500;
		}

		.campaign-description {
			font-size: 14px;
			line-height: 1.4;
			margin: 0;
		}
	}

	.campaign-button {
		width: 100%;
		text-align: center;
	}

	.campaign-price-wrap {
		display: flex;
		flex-direction: column;
		margin-bottom: 8px;
		/* gap: 4px; */

		.campaign-price {
			font-size: 20px;
			line-height: 1.4;
			margin: 0;
			font-weight: 500;
		}

		.campaign-availability {
			font-size: 12px;
			line-height: 1.4;
			margin: 0;
			font-weight: 400;

			strong {
				font-weight: 500;
			}
		}
	}
}

.campaigns-overview-link {
	margin-top: 40px;
}

.primary-outline-button {}

















































































































































@media(max-width: 767px) {


	nav.site-nav {
		.links-container {
			flex-direction: column;
			align-items: flex-start;

			position: fixed;
			top: 0;
			right: -100%;
			z-index: 10;
			width: 300px;

			background-color: var(--color-1);
			box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);
			transition: 0.75s ease-out;
		}

		a {
			box-sizing: border-box;
			height: auto;
			width: 100%;
			padding: 20px 30px;
			justify-content: flex-start;
		}

		.open-sidebar-button,
		.close-sidebar-button {
			padding: 20px;
			display: block;
		}

		#sidebar-active:checked~.links-container {
			right: 0;
		}

		#sidebar-active:checked~#overlay {
			height: 100%;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}
	}
}