/*
Theme Name: Skuteczne Na Zaparcia
Author: emedia Łukasz Widz
Author URI: https://emedia.pl

*/

* { border: none; margin: 0px; padding: 0px;  }

:root {
  --white: #fff;
  --txt: #2F4D4D;
  --orange: #D26F34;
  --green: #042C2C;
  --yellow: #625327;
  --yellowmedium: #E7E0CC;
  --yellowlight: #F9F7F2;
  
}

body {
	background: var(--white);
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 100vh;
	font-family: "Lexend Deca", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--txt);
	overflow-x: hidden;
	position: relative;
}

	body.overflow {
		overflow: hidden;
	}
	
	
.wp-block-buttons {
	gap: 15px;
}

.button a,
.wp-block-button__link {
	display: inline-block;
	background: var(--orangelight);
	outline: 2px solid var(--orangelight);
	border: 0;
	color: var(--green);
	border-radius: 0px;
	padding: 12px 30px;
	box-sizing: border-box;
	font-size: 16px;
	outline-offset: -2px;
	font-weight: 600;
	transition: all 0.3s ease;
}
	.button a:hover,
	.wp-block-button__link:hover {
		background: var(--orangedark);
		outline: 2px solid var(--orangedark);
		color: var(--black);
		transition: all 0.3s ease;
	}
	
.hide-on-desktop {
	display: none !important;
}

.hide-on-mobile {
	
}
	
*:focus {
	outline: 0;
}	

a {
	color: var(--black);
	text-decoration: none;
	transition: all .2s ease;
	-webkit-transition: all .2s ease;
	
	cursor: pointer;
}

	a:hover {
		color: var(--orange);
		text-decoration: none;
		
		transition: all .2s ease;
		-webkit-transition: all .2s ease;
		cursor: pointer;
	}


h1 {
	color: var(--green);
	font-weight: 500;
	font-size: clamp(36px, 4.5vw, 60px);
	line-height: 1.2;
}

h2 {
	color: var(--green);
	font-size: clamp(26px, 3.5vw, 36px);
	font-weight: 500;
	line-height: 1.2;
}

h3 {
	color: var(--green);
	font-size: clamp(22px, 3.5vw, 32px);
	font-weight: 500;
	line-height: 1.1;
}

h1 strong,
h2 strong,
h3 strong {
	font-weight: 700;
}


header {
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 25px 0;
	background: #fff;
	box-shadow: 0px 20px 30px 0px #042C2C14;
	transition: all 0.2s ease;
}

body.home header {
	background: transparent;
	border-bottom: 1px solid #005555;
	box-shadow: unset;
}

	header .headerContent {
		display: flex;
		align-items: center;
	}
	
	#logo {
		display: block;
	}
	
		#logo a,
		#logo a img {
			display: block;
			width: 320px;
			height: auto;
			transition: all 0.2s ease;
		}
		
		body.home #logo a,
		body.home #logo a img {
			filter: brightness(0) invert(1);
		}

	#menu {
		margin-left: auto;
	}
	
		#menu ul {
			display: flex;
			list-style: none;
			gap: 30px;
			align-items: center;
		}
	
			#menu ul li a {
				font-size: 18px;
			}
			
			body.home #menu ul li a {
				color: #fff;
			}
	
			#menu ul li a:hover,
			body.home #menu ul li a:hover {
				color: #007878;
			}
				
header.fixed,
body.home header.fixed {
	background: #fff;
	padding: 15px 0;
	box-shadow: 0px 20px 30px 0px #042C2C14;
	border-bottom: 0;
	transition: all 0.2s ease;
}
		
	header.fixed #logo a,
	header.fixed #logo a img {
		filter: brightness(1) invert(0);
		transition: all 0.2s ease;
	}
	
	header.fixed #menu ul li a {
		font-size: 18px;
		color: var(--green);
	}

	header.fixed  #menu ul li a:hover {
		color: #007878;
	}

/* Przycisk menu mobilnego — ukryty na desktopie */
#show_menu {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--green);
	-webkit-tap-highlight-color: transparent;
}

#menu_toggle {
	position: relative;
	display: block;
	width: 26px;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: background 0.25s ease;
}

#menu_toggle::before,
#menu_toggle::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 1px;
	transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}

#menu_toggle::before {
	top: -8px;
}

#menu_toggle::after {
	bottom: -8px;
}

#show_menu.on #menu_toggle {
	background: transparent;
}

#show_menu.on #menu_toggle::before {
	top: 50%;
	transform: translateY(-50%) rotate(45deg);
}

#show_menu.on #menu_toggle::after {
	bottom: auto;
	top: 50%;
	transform: translateY(-50%) rotate(-45deg);
}

body.home #show_menu {
	color: #fff;
}

body.home header.fixed #show_menu,
body.home header.on #show_menu {
	color: var(--green);
}

@media screen and (max-width: 768px) {
	header .headerContent {
		position: relative;
		flex-wrap: wrap;
	}

	#logo a,
	#logo a img {
		width: min(250px, 60vw);
	}

	#show_menu {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: auto;
		width: 44px;
		height: 44px;
		z-index: 1001;
	}

	#menu {
		flex: 0 0 100%;
		order: 3;
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		width: 100%;
		max-width: 100vw;
		margin: 0 0;
		display: grid;
		grid-template-rows: 0fr;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition:
			grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1),
			opacity 0.3s ease,
			visibility 0.3s ease;
	}

	#menu > nav {
		overflow: hidden;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
		border-top: 1px solid rgba(4, 44, 44, 0.12);
		max-width: 1500px;
		width: 100%;
		margin: 0 auto;
		padding: 0 0;
		box-sizing: border-box;
	}

	body.home #menu > nav {
		border-top-color: rgba(255, 255, 255, 0.25);
	}

	body.home header.fixed #menu > nav,
	body.home header.on #menu > nav {
		border-top-color: rgba(4, 44, 44, 0.12);
	}

	#menu.on {
		grid-template-rows: 1fr;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	#menu ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0;
	}

	#menu ul li {
		border-bottom: 1px solid rgba(47, 77, 77, 0.18);
	}

	#menu ul li:last-child {
		border-bottom: none;
	}

	#menu ul li a {
		display: block;
		padding: 20px 0;
		font-size: 17px;
		text-align: right;
		color: var(--green);
		transition: color 0.2s ease, background 0.2s ease;
	}

	#menu ul li a:hover {
		color: #007878;
		background: rgba(0, 120, 120, 0.06);
	}

	body.home #menu ul li a,
	body.home header.fixed #menu ul li a,
	body.home header.on #menu ul li a {
		color: var(--green);
		font-size: 16px;
	}

	body.home header.on {
		background: #fff;
		border-bottom: 0;
		box-shadow: 0px 20px 30px 0px #042c2c14;
	}

	body.home header.on #logo a,
	body.home header.on #logo a img {
		filter: brightness(1) invert(0);
	}

	header {
		padding: 16px 0;
	}

	header.fixed {
		padding: 12px 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	#menu_toggle,
	#menu_toggle::before,
	#menu_toggle::after,
	#menu {
		transition: none;
	}
}
	
#hero {
	width: 100%;
	padding-top: 200px;
	padding-bottom: 180px;
	
	background-image: url(../graf/heroBg.webp);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	
	color: #fff;
}

	#hero h1 {
		color: #fff;
		margin-bottom: 15px;
	}
	
	#hero mark,
	body.home #content mark,
	body.front-page #content mark {
		position: relative;
		isolation: isolate;
		display: inline-block;
		font-weight: 600;
		color: #fff !important;
		padding: 2px 5px;
		box-sizing: border-box;
		background: none !important;
		background-color: transparent !important;
	}

	#hero mark::before,
	body.home #content mark::before,
	body.front-page #content mark::before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #d26f34;
		border-radius: 2px;
		transform: scaleX(0);
		transform-origin: left center;
		animation: skutecznenazaparcia-hero-mark-reveal 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.85s forwards;
	}

	@keyframes skutecznenazaparcia-hero-mark-reveal {
		to {
			transform: scaleX(1);
		}
	}

	@media (prefers-reduced-motion: reduce) {
		#hero mark::before,
		body.home #content mark::before,
		body.front-page #content mark::before {
			animation: none;
			transform: scaleX(1);
		}
	}
	
	#hero .wp-block-columns {
		margin-top: 40px;
	}

		#hero .wp-block-columns .wp-block-column {
			
		}

			#hero .wp-block-columns .wp-block-column figure img {
				width: auto;
				height: 60px;
				margin-bottom: 5px;
			}


@media screen and (max-width: 768px) {
	#hero {
		padding-top: 120px;
		padding-bottom: 125px;
		background-position: 90% 100%;
	}
	
	#hero .wp-block-columns {
		gap: 15px;
		margin-top: 25px;
	}
	
	#hero .wp-block-columns .wp-block-column figure img {
		height: 50px;
	}
	
	#hero mark,
	body.home #content mark,
	body.front-page #content mark {
		padding: 0px 3px;
	}
	
}
			
			
#breadcrumbs {
	
}

	#breadcrumbs .breadcrumb_last {
		font-weight: 700;
		color: #007878;
	}
			
#content.txt {
	padding-top: 100px;
	width: 100%;
	max-width: 1200px;
}
			
	#content.txt h1 {
		padding-top: 15px;
		padding-bottom: 15px;
		font-size: clamp(28px, 3.5vw, 40px);
	}
	
	#content.txt h2 {
		padding-top: 30px;
		padding-bottom: 10px;
		font-size: clamp(22px, 3vw, 30px);
	}
	
	#content.txt h3 {
		padding-top: 30px;
		padding-bottom: 10px;
		font-size: clamp(18px, 2.5vw, 25px);
	}
	
	#content.txt p {
		margin: 10px 0;
	}
	
	#content.txt ul,
	#content.txt ol {
		margin: 20px 0 20px 25px;
	}
		
		#content.txt ul li,
		#content.txt ol li {
			margin: 8px 0;
		}
					
			
/* Footer (odwzorowanie #site-footer ze skuteczne-na-zaparcia) */
#site-footer {
	margin-top: 56px;
	background-color: #F9F7F2;
	color: #2F4D4D;
	font-weight: 400;
}

	#site-footer .footer-heading {
		font-weight: 700;
		color: #007878;
		margin-bottom: 24px;
	}

	#site-footer .footer-top {
		padding-top: 60px;
		padding-bottom: 80px;
		box-sizing: border-box;
	}
	
		#site-footer .footer-top .wp-block-columns {
			gap: 60px;
		}
	
			#site-footer .footer-top .wp-block-column:nth-child(1) {
				flex-basis: 30%;
			}
			
				#site-footer .footer-top .wp-block-column:nth-child(1) figure {
					margin-bottom: 15px;
				}
			
				#site-footer .footer-top .wp-block-column:nth-child(1) p[style="font-size:12px"] {
					font-weight: 300;
					line-height: 2;
				}
			
			#site-footer .footer-top .wp-block-column:nth-child(2) {
				flex-basis: 30%;
			}
			
				#site-footer .footer-top .wp-block-column:nth-child(2) figure {
					margin-bottom: 25px;
				}
		
				#site-footer .footer-top .wp-block-column:nth-child(2) p[style="font-size:12px"] {
					font-weight: 300;
					line-height: 2;
				}
			
			#site-footer .footer-top .wp-block-column:nth-child(3) {
				flex-basis: 20%;
				min-width: 170px;
			}
				
				#site-footer .footer-top .wp-block-column:nth-child(3) strong {
					display: block;
					margin-bottom: 20px;
					color: #007878;
				}
				
				#site-footer .footer-top .wp-block-column:nth-child(3) .wp-block-media-text {
					grid-template-columns: 15px auto !important;
					gap: 10px;
					margin: 0 0 12px 0;
				}
				
					#site-footer .footer-top .wp-block-column:nth-child(3) .wp-block-media-text .wp-block-media-text__content {
						padding: 0 0;
					}
			
			#site-footer .footer-top .wp-block-column:nth-child(4) {
				flex-basis: 20%;
			}
				
				#site-footer .footer-top .wp-block-column:nth-child(4) strong {
					display: block;
					margin-bottom: 20px;
					color: #007878;
				}
			
				#site-footer .footer-top .wp-block-column:nth-child(4) ul {
					list-style: none;
				}
					
					#site-footer .footer-top .wp-block-column:nth-child(4) ul li {
						margin-bottom: 12px;
					}
					
	#site-footer .footer-bottom {
		display: flex;
		gap: 10px;
		flex-wrap: wrap;
		justify-content: space-between;
		position: relative;
		z-index: 0;
		padding-top: 20px;
		padding-bottom: 20px;
		box-sizing: border-box;
	}

	#site-footer .footer-bottom::after {
		content: "";
		background-color: #FDFDFD;
		width: 100vw;
		height: 100%;
		position: absolute;
		left: 50%;
		top: 0;
		transform: translateX(-50%);
		z-index: -1;
	}

	#site-footer .footer-bottom a {
		color: #2F4D4D;
		text-decoration: none;
	}

	#site-footer .footer-bottom a:hover {
		color: #007878;
	}

.footer-social {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 25px 0 30px 0;
}

	.footer-social__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 0;
	}

	.footer-social__icon {
		display: block;
		width: 32px;
		height: 32px;
	}

	.footer-social__icon rect {
		fill: #007878;
		transition: fill 0.2s ease;
	}

	#site-footer .footer-social__link:hover .footer-social__icon rect {
		fill: #055;
	}

@media screen and (max-width: 1000px) {
	#breadcrumbs {
		display: none;
	}
	
	#site-footer {
		margin-top: 50px;
	}
	
	#site-footer .footer-top {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	
	#site-footer .footer-top .wp-block-columns {
		gap: 20px;
	}
	
	#site-footer .footer-top .wp-block-column:nth-child(1) figure {
		width: 100%;
		max-width: 260px;
	}
	
	#site-footer .footer-bottom {
		padding: 30px 3%;
	}
}