/* Additions on top of the untouched Arlo stylesheets. Keep this file small. */

/* language switch in the main menu */
.anchor_nav li.lang_switch a {
	font-weight: 700;
	letter-spacing: 1px;
}
.arlo_tm_topbar .menu ul li.lang_switch {
	border-left: 1px solid rgba(0, 0, 0, .12);
	padding-left: 20px;
	margin-left: 10px;
}

/* the hamburger is a <button> now, not an <a> */
.arlo_tm_mobile_menu .my_trigger .hamburger {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
}

/* the contact submit is a real <button>; mirror .arlo_tm_button a from style.css/colors.css */
.arlo_tm_button button {
	border: none;
	font: inherit;
	text-decoration: none;
	color: #fff;
	background-color: #e65f78;
	display: inline-block;
	padding: 12px 45px;
	font-family: "Poppins";
	position: relative;
	overflow: hidden;
	cursor: pointer;
}
.arlo_tm_all_wrap[data-color="green"] .arlo_tm_button button {
	background-color: #7CC144;
}
.arlo_tm_button button:before {
	position: absolute;
	content: "";
	top: 0px;
	height: 100%;
	left: -25%;
	width: 0%;
	background-color: rgba(255, 255, 255, .1);
	transform: skew(50deg);
	transition-duration: .6s;
	z-index: 1;
}
.arlo_tm_button button:hover:before {
	width: 150%;
}
.arlo_tm_button button[disabled] {
	opacity: .6;
	cursor: default;
}

/* contact form feedback */
.contact_form .contact_error {
	color: #c0392b;
	margin-top: 15px;
}
.contact_form .contact_success {
	color: #2e7d32;
}
.contact_form .form-check .control-label {
	font-weight: 400;
}
.contact_form .form-check input[type="checkbox"] {
	width: auto;
	margin-right: 6px;
}

/* home hero claim: sentence case, smaller, explicit line break between the two sentences */
.arlo_tm_hero.claim .name_holder h3 {
	text-transform: none;
	font-size: 26px;
	font-weight: 700;
	white-space: pre-line;
}
@media (max-width: 768px) {
	.arlo_tm_hero.claim .name_holder h3 { font-size: 21px; }
}
@media (max-width: 480px) {
	.arlo_tm_hero.claim .name_holder h3 { font-size: 17px; }
}

/* home hero on mobile: side padding, two equal-width buttons side by side */
@media (max-width: 768px) {
	.arlo_tm_hero.claim .content {
		padding: 0 20px;
		box-sizing: border-box;
	}
	.arlo_tm_hero.claim .image_wrap {
		width: 120px;
		height: 120px;
		margin-bottom: 15px;
	}
	.arlo_tm_hero.claim .arlo_tm_button {
		display: flex;
		gap: 12px;
	}
	.arlo_tm_hero.claim .arlo_tm_button a {
		flex: 1 1 0;
		margin-right: 0;
		padding: 10px 8px;
		font-size: 14px;
	}
}