/* ==========================================================================
   SR Sousa e Rocha — custom layer on top of Divi
   Only what Divi cannot do natively. No auto-generated Divi IDs targeted.
   ========================================================================== */

:root {
	--sr-dark-900: #0e0e0e;
	--sr-dark-800: #1a1a1a;
	--sr-dark-700: #242424;
	--sr-white: #ffffff;
	--sr-offwhite: #f6f6f4;
	--sr-grey-100: #ededed;
	--sr-grey-500: #6f6f6f;
	--sr-grey-on-dark: #9ca3af;
	--sr-text: #111111;
	--sr-whatsapp: #25d366;
	--sr-orange: #f59e0b;
	--sr-blue: #3b82f6;
	--sr-radius-card: 14px;
	--sr-radius-btn: 999px;
	--sr-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.06);
}

/* --------------------------------------------------------------------------
   Header: rounded active menu item (Divi menu module can't pill the active item)
   -------------------------------------------------------------------------- */
.sr-header .et_pb_menu__menu li.current-menu-item > a,
.sr-header .et_pb_menu__menu li.current_page_item > a {
	background: var(--sr-dark-700);
	border-radius: var(--sr-radius-btn);
	padding: 8px 18px !important;
	color: var(--sr-white) !important;
}

.sr-header .et_pb_menu__menu li > a {
	padding: 8px 18px;
	border-radius: var(--sr-radius-btn);
	transition: background-color 0.2s ease;
}

.sr-header .et_pb_menu__menu li > a:hover {
	background: rgba(255, 255, 255, 0.08);
	opacity: 1 !important;
}

/* Keyboard focus visibility across the site */
a:focus-visible,
button:focus-visible,
.sr-filter__btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--sr-blue);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Portfolio filter bar
   -------------------------------------------------------------------------- */
.sr-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sr-filter__btn {
	background: var(--sr-white);
	border: 1px solid var(--sr-grey-100);
	border-radius: var(--sr-radius-btn);
	padding: 10px 20px;
	font-size: 14px;
	color: var(--sr-text);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
	min-height: 44px; /* tap target */
}

.sr-filter__btn:hover {
	background: var(--sr-grey-100);
}

.sr-filter__btn.is-active {
	background: var(--sr-dark-900);
	border-color: var(--sr-dark-900);
	color: var(--sr-white);
}

/* --------------------------------------------------------------------------
   Portfolio grid + cards ([sr_projetos] shortcode)
   -------------------------------------------------------------------------- */
.sr-project-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.sr-project-card {
	background: var(--sr-white);
	border: 1px solid var(--sr-grey-100);
	border-radius: var(--sr-radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.sr-project-card.is-hidden {
	display: none;
}

.sr-project-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.sr-project-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sr-project-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var(--sr-dark-900);
	color: var(--sr-white);
	font-size: 12px;
	padding: 6px 12px;
	border-radius: var(--sr-radius-btn);
}

.sr-project-card__body {
	padding: 20px 22px 24px;
}

.sr-project-card__title {
	font-size: 18px;
	margin: 0 0 8px;
	padding: 0;
}

.sr-project-card__desc {
	font-size: 14px;
	color: var(--sr-grey-500);
	margin: 0 0 10px;
	padding: 0;
}

.sr-project-card__location {
	font-size: 14px;
	text-decoration: underline;
	color: var(--sr-text);
}

@media (max-width: 980px) {
	.sr-project-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.sr-project-grid {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   CTA section decorative circle (Divi handles gradient natively)
   -------------------------------------------------------------------------- */
.sr-cta-section {
	position: relative;
	overflow: hidden;
}

.sr-cta-section::before {
	content: "";
	position: absolute;
	left: -80px;
	bottom: -120px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Floating buttons (markup from inc/floating-buttons.php)
   -------------------------------------------------------------------------- */
.sr-floating-whatsapp {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9990;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sr-whatsapp);
	color: var(--sr-white);
	border-radius: 50%;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease;
}

.sr-floating-whatsapp:hover {
	transform: scale(1.06);
	color: var(--sr-white);
}

.sr-back-to-top {
	position: fixed;
	right: 28px;
	bottom: 92px; /* stacked above WhatsApp, no overlap */
	z-index: 9990;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sr-dark-800);
	color: var(--sr-white);
	border: 1px solid var(--sr-dark-700);
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.sr-back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Fluent Forms skin (.sr-form added to the form's container class)
   -------------------------------------------------------------------------- */
.sr-form .ff-el-form-control {
	border: 1px solid var(--sr-grey-100);
	border-radius: 10px;
	padding: 12px 16px;
	background: var(--sr-white);
	font-size: 15px;
}

.sr-form .ff-el-form-control:focus {
	border-color: var(--sr-dark-900);
	box-shadow: none;
}

.sr-form .ff-el-input--label label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sr-text);
}

.sr-form .ff-btn-submit {
	width: 100%;
	background: var(--sr-dark-900) !important;
	color: var(--sr-white) !important;
	border: none;
	border-radius: 12px;
	padding: 16px 24px;
	font-weight: 600;
	min-height: 48px;
}

.sr-form .ff-btn-submit:hover {
	background: var(--sr-dark-700) !important;
}

.sr-form .ff-el-is-error .ff-el-form-control {
	border-color: #dc2626;
}

.sr-form .error,
.sr-form .ff-el-error-message {
	color: #dc2626;
	font-size: 13px;
}

/* Large WhatsApp button on the Contact page (apply class to a Divi Button) */
.sr-btn-whatsapp,
.sr-btn-whatsapp.et_pb_button {
	background: var(--sr-whatsapp) !important;
	color: var(--sr-white) !important;
	border: none !important;
	border-radius: 12px !important;
	width: 100%;
	text-align: center;
	font-weight: 600 !important;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Guard against horizontal overflow on mobile
   -------------------------------------------------------------------------- */
html,
body {
	overflow-x: clip;
}