/*
Theme Name: Studio Ernie Starter
Theme URI: https://ersaavedra.dev
Author: Ernesto Rivera-Saavedra
Author URI: https://ersaavedra.dev
Description: A barebones starter theme for WordPress projects.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studio-ernie-starter
Tags: block-editor, starter-theme
*/

@import 'css/reset.css';
@import 'css/setup.css';
@import 'css/typography.css';

.marquee {
  overflow: hidden;
  white-space: nowrap;
  background: black;
  color: white;
  font-size: 2rem;
  font-weight: 900;
  padding-block: 2rem;
}

.marquee-inner {
  display: inline-block;
  max-width: 100vw;
  animation: scroll-left 100s linear infinite;
}

.marquee-inner span {
  display: inline-block;
  margin-right: 2rem; 
}

.marquee:hover .marquee-inner {
  animation-play-state: paused;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}

.site-header {
	position: fixed;
	width: 100%;
	top: 24px;
	right: 24px;
	z-index: 99999;
 	.menu {
 		padding-inline: 24px;

 		ul,
 		li,
 		a {
 			width: 100%;
 			@media (width >= 600px) {
 				width: fit-content;
 			}
 		}

 		li:last-of-type{
 			a {
 				border: 1px solid black;
 				border-radius: 50px;
 				padding: 6px 12px;
 				text-align: center;
 			}
 		}
 	}


 	.menu{
 		display: flex;
 		flex-wrap: wrap;
 		align-items: center;
 		justify-content: end;
 		gap: 12px;

 		button {
 			svg {
 				width: 50px;
 				height: 50px;
 			}
 		}

 		@media (width >= 1024px) {
 			gap: 128px;
 		}

 		li:last-of-type{
 			a {
 				border: 1px solid black;
 				border-radius: 50px;
 				padding: 6px 12px;

 			}
 		}
 	}
 	@media (width >= 600px) {
 		
 	}
	

}

section + section,
main + footer {
	margin-top: 180px;
}

.hero {
	position: relative;

	.flower-1,
	.flower-2 {
		position: absolute;
	}

	.flower-1 {
		bottom: 25%;
		left: 12px;
		width: 175px;
		height: 175px;

		@media (width >= 1024px) {
			width: 200px;
			height: 200px;
			left: 180px;
			bottom: 26%;
		}

	}

	.flower-2 {
		bottom: 15%;
		right: 12px;
		width: 180px;
		height: 180px;

		@media (width >= 1024px) {
			width: 300px;
			height: 300px;
			right: 96px;
			bottom: 5%;
		}
	}

	.hero-header {
		background-color: var(--green);
		padding-block: 204px;
		svg {
			width: 77px;
			height: 77px;

			@media (width >= 1024px) {
				width: 167px;
				height: 167px;
			}
		}

		.logo {
			max-width: 1200px;
			margin-inline: auto;
			padding: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-inline: auto;
			flex-wrap: wrap;
		}
	}

	.hero-text {
		padding-top: 180px;

		@media (width >= 1024px) {
			padding-top: 222px;
		}

		h2 + p {
			margin-top: 6px;

			@media (width >= 1024px) {
				margin-top: 12px;
			}
		}

		p {
			max-width: 50ch;
		}
	}
}

.work {
	.marquee + .work-cards {
		margin-top: 48px;

		@media (width >= 1024px) {
			margin-top: 128px;
		}
	}

	
	.work-cards {
		display: grid;
		gap: 48px;

		@media (width >= 1024px) {
			grid-template-columns: repeat(6, 1fr);
			gap: 128px;
		} 
	}

	.work-card {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 24px;

		@media (width >= 1024px) {
			grid-column: span 3;
		}

		h2 + p {
			margin-top: 6px;

			@media(width>=1024px) {
				margin-top: 24px;
			}
		}
	}	
}

.services {
	.marquee + .service-cards {
		margin-top: 48px;

		@media (width >= 1024px) {
			margin-top: 128px;
		}
	}

	.service-cards {
		display: grid;
		gap: 24px;

		@media ( width >= 1024px ) {
			grid-template-columns: repeat(6, 1fr);
		}
		.service-card:nth-of-type(1) {
			background-color: var(--red);

			@media ( width >= 1024px ) {
				grid-column: span 3;
				grid-row: 1;
			}
		}
		.service-card:nth-of-type(2) {
			background-color: var(--yellow);

			@media ( width >= 1024px ) {
				grid-column: span 3;
				grid-row: 1;
			}
		}
		.service-card:nth-of-type(3) {
			background-color: var(--blue);

			@media ( width >= 1024px ) {
				grid-column: 2/5;
				grid-row: 2;
				
			}
		}

		.service-card{
			padding: 20px;
			border-radius: 10px;

			h2 + p {
				margin-top: 12px;
			}

			p {
				max-width: 35ch;
			}
		}
	}	
}

.about {
	.marquee + header {
		margin-top: 48px;

		@media (width >= 1024px) {
			margin-top: 128px;
		}
	}

	header + .about-card {
		margin-top: 24px;
	}

	header {
		p {
			max-width: 45ch;
		}
	}

	.about-card {
		display: grid;

		@media (width >= 1024px) {
			grid-template-columns: repeat(6, 1fr);
			gap: 24px;

			figure {
				grid-column: span 3;
			}

			.about-card-text {
				grid-column: span 3;
			}
		}


		figure + .about-card-text {
			margin-top: 12px;

			@media(width >= 1024px) {
				margin-top: 0;
			}
		}

		h3 + .about-card-links {
			margin-top: 6px;
		}

		.about-card-links {
			display: flex;
			align-items: center;
			gap: 6px;
			.about-card-link {
				display: flex;
				align-items: center;
				
				width: fit-content;
				a {
					border: 1px solid black;
					border-radius: 50px;
					padding: 3px 12px;
					text-decoration: none;
					width: 100%;
					height: 100%;
				}

				svg {
					width: 12px;
					height: 12px;
				}
			}
		}
	}
}

.contact {
	@media (width >= 1024px) {
		h2 {
			text-align: center;
		}
	}
}