/*
Theme Name:		Astra Child
Author:			Roger Meier
Template: 		astra
Version: 		1.0.0
*/

/* Base (mobile first) */
p {
	font-size: 1.125rem;
	line-height: 1.6 !important;
}

li {
	font-size: 1.125rem !important;
}

h1 {
	font-size: 2rem !important;
	line-height: 1.2 !important;
}
h2 {
	font-size: 1.75rem !important;
	line-height: 1.3 !important;
}
h3 {
	font-size: 1.5rem !important;
	line-height: 1.3 !important;
}
h4 {
	font-size: 1.375rem !important;
	line-height: 1.4 !important;
}
h5 {
	font-size: 1.25rem !important;
	line-height: 1.4 !important;
}
h6 {
	font-size: 1.125rem !important;
	line-height: 1.4 !important;
}

.hero-box {
	align-items: center !important;
}

.hero-box-text {
	text-align: center !important;
}

/* ≥768px (Tablet) */
@media (min-width: 768px) {
	p {
		font-size: 1.125rem !important;
	}

	h1 {
		font-size: 2.125rem !important;
	}
	h2 {
		font-size: 1.6rem !important;
	}
	h3 {
		font-size: 1.75rem !important;
	}
	h4 {
		font-size: 1.5rem !important;
	}
	h5 {
		font-size: 1.375rem;
	}
	h6 {
		font-size: 1.25rem !important;
	}

	.hero-box {
		align-items: flex-end !important;
	}

	.hero-box-text {
		text-align: right !important;
	}
}

/* ≥1024px (Small desktop) */
@media (min-width: 1024px) {
	p {
		font-size: 1.25rem !important;
	}
	h1 {
		font-size: 3rem !important;
	}
	h2 {
		font-size: 2.25rem !important;
	}
	h3 {
		font-size: 2rem !important;
	}
	h4 {
		font-size: 1.75rem !important;
	}
	h5 {
		font-size: 1.5rem !important;
	}
	h6 {
		font-size: 1.25rem !important;
	}

	.hero-box {
		align-items: flex-end !important;
	}

	.hero-box-text {
		text-align: right !important;
	}
}

/* ≥1440px (Large desktop) */
@media (min-width: 1440px) {
	p {
		font-size: 1.25rem !important;
	}

	h1 {
		font-size: 3.5rem !important;
	}
	h2 {
		font-size: 2.25rem !important;
	}
	h3 {
		font-size: 2.25rem !important;
	}
	h4 {
		font-size: 2rem !important;
	}
	h5 {
		font-size: 1.75rem !important;
	}
	h6 {
		font-size: 1.375rem !important;
	}

	.hero-box {
		align-items: flex-end !important;
	}

	.hero-box-text {
		text-align: right !important;
	}
}

/* Simple Contact Form */
.contact-form {
	max-width: 600px;
	margin: 2rem auto;
	padding: 1.5rem;
	border: 1px solid #e5e7eb;
	border-radius: 0.5rem;
	background: #eeeeee;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	font-family: sans-serif;
}

.contact-form .form-group {
	margin-bottom: 1rem;
}

.contact-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.5rem;
	color: #374151;
}

.contact-form .required {
	color: #dc2626; /* red */
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid #d1d5db;
	border-radius: 0.375rem;
	font-size: 1rem;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: #2563eb; /* blue */
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

.contact-form textarea {
	resize: vertical;
}

.contact-form .btn-submit {
	background: #ffbe26;
	color: #1e293b;
	padding: 0.75rem 1.25rem;
	border: none;
	border-radius: 0.375rem;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.contact-form .btn-submit:hover {
	background: #fdb40a;
	color: #1e293b;
}

/* -----------------------------------------------------------
   FIX: Misaligned scroll-to-top arrow after enabling Tailwind
   -----------------------------------------------------------
   Tailwind’s base “Preflight” styles set all <svg> elements to:
     display: block;
     vertical-align: middle;
   This overrides Astra’s original inline layout for the scroll-to-top
   icon, causing the arrow to appear off-center inside the button.

   Restoring inline-block display realigns the icon correctly.
----------------------------------------------------------- */
#ast-scroll-top svg {
	display: inline-block !important;
	vertical-align: middle !important;
}