/* Paleta do cliente aplicada via CSS variables */
:root {
	--color-primary: #185D96; /* CTA azul */
	--color-light-blue: #CDDFED;
	--color-dark: #080C17;
	--color-pale: #EAF1F7;
	--color-black: #00040D;

	--text-on-dark: #EAF1F7;
	--text-on-lightblue: #00040D;

	--text-color: var(--color-dark);
	--muted: #6c757d;
}

/* Forçar Arial em todo o site para consistência com a identidade visual */
body { font-family: Arial, Helvetica, sans-serif; background: var(--color-pale); color: var(--text-color); }

/* Garantir que elementos de formulário e botões também usem Arial */
input, button, select, textarea { font-family: Arial, Helvetica, sans-serif; }
.lead { color: var(--muted); }

/* Header: use the justice-scale photo as full header background (cover) */

header.bg-primary {
	/* fallback color while image loads */
	background-color: var(--color-light-blue);
	color: var(--text-on-lightblue);
	position: relative;
	overflow: hidden;
	/* Make header taller to give more visual presence */
	padding-top: 5.5rem;
	padding-bottom: 5.5rem;
	min-height: 520px;
	display: flex;
	align-items: center; /* vertical center */
}

/* Image layer: use ::after so we can animate the photo from bottom-to-top */
header.bg-primary::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../img/header-1.jpg');
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	z-index: 0;
	transform: translateY(30%);
	animation: headerRevealUp 900ms cubic-bezier(.2,.9,.2,1) forwards;
}

/* Ensure hero content sits above image and overlay */
header.bg-primary .container { position: relative; z-index: 3; }
header.bg-primary::before {
	/* overlay to guarantee text legibility on top of the photo */
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(rgba(8,12,23,0.35), rgba(234,241,247,0.18));
	z-index: 2;
	pointer-events: none;
}

/* Hero text should sit above the header overlay */
.hero-text { position: relative; z-index: 4; padding-right: 2rem; }

@media (max-width: 991px) {
	.hero-text { padding-right: 0; }
}

@media (max-width: 767px) {
	header.bg-primary { padding-top: 3.5rem; padding-bottom: 3.5rem; min-height: 360px; }
}

/* On very small screens keep content slightly higher for visual balance */
@media (max-width: 480px) {
	header.bg-primary { align-items: flex-start; padding-top: 3rem; padding-bottom: 3rem; }
	.hero-text { margin-top: 0.5rem; }
}

/* Reveal animation: move image from below into place */
@keyframes headerRevealUp {
	from { transform: translateY(30%); }
	to { transform: translateY(0%); }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	header.bg-primary::after { transform: translateY(0); animation: none; }
}

/* Make the hero lead paragraph white for better contrast on the header photo */
header.bg-primary .hero-text .lead { color: #ffffff !important; }

/* Utility backgrounds following the 60/30/10 intent */
.bg-dark-custom { background-color: var(--color-dark) !important; color: var(--text-on-dark) !important; }
.bg-lightblue-custom { background-color: var(--color-light-blue) !important; color: var(--text-on-lightblue) !important; }

.card { border: none; background: #fff; }

/* Navbar and brand */
.navbar { background: #fff; }
.navbar-brand { color: var(--color-primary) !important; }
.nav-link { color: var(--text-color); }
.nav-link.active { font-weight: 600; }

/* Navbar component styles: sticky, colors and scroll effect */
/* Targets both .site-navbar wrapper and #site-navbar placeholder */
#site-navbar .navbar, .site-navbar .navbar {
	position: fixed !important;
	top: 0 !important;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1100 !important;
	background-color: var(--color-dark); /* #080C17 */
	padding: 1rem 0;
	transition: padding 200ms ease, box-shadow 200ms ease, background-color 200ms ease, transform 180ms ease;
}

/* ensure container inside fixed navbar keeps content centered */
.site-navbar .container, #site-navbar .container { max-width: 1140px; }

#site-navbar .navbar .navbar-brand,
#site-navbar .navbar .nav-link,
#site-navbar .navbar .navbar-toggler,
.site-navbar .navbar .navbar-brand,
.site-navbar .navbar .nav-link,
.site-navbar .navbar .navbar-toggler { color: var(--text-on-dark) !important; }

/* Navbar logo sizing and alignment */
.navbar-logo { width: 40px; height: 40px; object-fit: contain; display: inline-block; }
.navbar-brand span { line-height: 1; }

#site-navbar .navbar .nav-link, .site-navbar .navbar .nav-link { margin-right: .5rem; }
#site-navbar .navbar .dropdown-menu, .site-navbar .navbar .dropdown-menu { min-width: 12rem; }
#site-navbar .navbar .btn-outline-light, .site-navbar .navbar .btn-outline-light { color: var(--text-on-dark); border-color: rgba(234,241,247,0.15); }

/* Scrolled state: smaller, shadowed */
#site-navbar .navbar.navbar-scrolled, .site-navbar .navbar.navbar-scrolled {
	padding: .45rem 0;
	box-shadow: 0 8px 30px rgba(0,0,0,0.35);
	background-color: rgba(8,12,23,0.98);
}

/* Toggler icon visibility on dark bg */
#site-navbar .navbar-toggler, .site-navbar .navbar-toggler { border-color: rgba(234,241,247,0.12); }
#site-navbar .navbar-toggler-icon, .site-navbar .navbar-toggler-icon { filter: invert(1) brightness(2) contrast(1.2); }

/* CTA buttons use primary color */
.btn-primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
	background-color: #12466b;
	border-color: #12466b;
}

/* Background utility for primary blocks */
.bg-primary { background-color: var(--color-primary) !important; color: #fff !important; }

footer.bg-light { background: var(--color-black); color: var(--color-pale); }
footer a { color: var(--color-light-blue); }

/* Skip link - visible on focus for keyboard users */
.skip-link {
	position: absolute;
	left: -999px;
	top: -999px;
	background: #fff;
	color: var(--color-dark);
	padding: .5rem .75rem;
	z-index: 2000;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
	border-radius: 4px;
}

/* Area cards on index */
.area-card { color: inherit; }
.area-card .card-body { min-height: 96px; display:flex; align-items:flex-start; gap:1rem; }
.area-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.08); transform: translateY(-4px); transition: all 180ms ease; }

@media (max-width: 767px) {
	.area-card .card-body { min-height: 72px; }
}

.area-card-icon { width: 36px; height: 36px; flex: 0 0 36px; color: var(--color-primary); }
.area-card .card-body svg { display: block; }

/* Icon wrapper for homepage area cards: match footer background color */
.icon-wrapper {
	width: 56px;
	height: 56px;
	background-color: #ffffff; /* match .card background */
	border-radius: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 56px;
	box-shadow: none;
	border: none;
}
.icon-wrapper img {
	width: 36px;
	height: 36px;
	object-fit: contain; /* preserve original icon color and aspect */
	display: block;
}

/* Reviews (homepage) */
.review-card { border: 1px solid rgba(0,0,0,0.04); }
.review-stars { color: #F5A623; font-size: 1rem; line-height: 1; }
.review-text { color: var(--color-dark); }
.reviewer { font-weight: 600; }

@media (max-width: 767px) {
	.review-stars { font-size: 0.95rem; }
}

/* Reviews iframe styling */
.ratio iframe { border: 0; }

.cookie-consent {
    background: rgba(8,12,23,0.98);
    color: var(--color-pale);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
}
/* Make the cookie text slightly lighter for better contrast on dark background */
.cookie-consent .cookie-text { color: rgba(234,241,247,0.98); }
/* More specific rule to override Bootstrap's .text-muted and ensure higher contrast */
.cookie-consent .cookie-text.small.text-muted { color: rgba(234,241,247,0.98) !important; }
.cookie-consent .cookie-text a { color: var(--color-light-blue); text-decoration: underline; }
.cookie-consent .cookie-actions { display: flex; gap: .5rem; }
@media (max-width: 767px) {
	.cookie-consent .container { padding-left: .75rem; padding-right: .75rem; }
	.cookie-consent { font-size: 0.95rem; }
}

/* Close button inside cookie bar */
.cookie-close {
	color: var(--color-pale);
	font-size: 1.1rem;
	line-height: 1;
	text-decoration: none;
	border-radius: 6px;
	background: transparent;
	border: 1px solid rgba(234,241,247,0.06);
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cookie-close:hover, .cookie-close:focus {
	color: #fff;
	text-decoration: none;
	background: rgba(255,255,255,0.02);
}

@media (max-width: 480px) {
	.cookie-close { width: 28px; height: 28px; font-size: 1rem; }
}

/* Privacy modal: small, low-contrast text to avoid high visual weight */
.privacy-modal .modal-content { background: #ffffff; }
.privacy-modal .modal-body { font-size: 0.85rem; color: #2b2b2b; line-height: 1.45; }
.privacy-modal .modal-title { font-size: 1rem; font-weight: 700; }
.privacy-modal .modal-footer .btn-secondary { background: #e9ecef; border-color: #dee2e6; color: #212529; }

/* Small components */
.contact-bar { position: fixed; right: 16px; bottom: 16px; z-index: 1050; }

/* Developer credit styling: make the footer credit low-contrast gray */
.developer-credit small { color: #7f878b; }
.developer-credit a { color: #7f878b; text-decoration: none; }
.developer-credit a:hover, .developer-credit a:focus { color: #bfc6c9; text-decoration: underline; }

/* Contact icon and lines styling */
.contact-lines { margin-top: .35rem; }
.contact-line { margin-top: .25rem; display: flex; align-items: center; }
.contact-icon {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	display: inline-block;
	vertical-align: middle;
	margin-right: .5rem;
	color: #7f878b;
	flex: 0 0 18px;
}
.contact-line a { color: inherit; text-decoration: none; }
.contact-line a:hover, .contact-line a:focus { text-decoration: underline; }

/* Inline contact (email • whatsapp) */
.contact-inline { display: inline-flex; align-items: center; gap: .5rem; }

/* Styles for lawyer contact lines on contato.html */
.adv-contact-lines { margin-top: .35rem; margin-bottom: 1rem; }
.adv-contact-lines .contact-item { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.adv-contact-lines .contact-item .contact-icon { width: 16px; height: 16px; color: #7f878b; flex: 0 0 16px; }
.adv-contact-lines .contact-link { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; }
.adv-contact-lines .contact-link:hover, .adv-contact-lines .contact-link:focus { text-decoration: underline; }

/* Make contact items wrap on small screens to avoid horizontal overflow */
.adv-contact-lines .contact-item {
	flex-wrap: wrap;
}
.adv-contact-lines .contact-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.adv-contact-lines .contact-link span {
	word-break: break-word;
}
.contact-icon { flex-shrink: 0; }

/* WhatsApp icon hover: subtle green on hover/focus */
.adv-contact-lines .contact-link.whatsapp .contact-icon { color: #7f878b; transition: transform 160ms ease; }

/* Biography text styling (used for attorney bios) */
.bio-text {
	text-align: justify;
	line-height: 1.6;
}

.bio-text h6 {
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 0.5rem;
}

/* About page image: let image 'embrace' the text on larger screens */
.about-image {
	max-width: 420px;
	width: 100%;
	margin-left: -24px;
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

@media (max-width: 991px) {
	.about-image { margin-left: 0; max-width: 100%; }
	.about-text-column { padding-left: 0.75rem; padding-right: 0.75rem; }
}

/* Title and text adjustments for About page */
.about-title {
	font-size: 2.6rem;
	line-height: 1.04;
	font-weight: 700;
	margin-bottom: 1.2rem; /* provide clear space below the title */
	position: relative;
	z-index: 6;
}

/* About card: constrain width for improved reading rhythm and center on large screens */
.about-card {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.about-card .card-body .btn { min-width: 140px; }

/* Spacing for section headings inside about page */
.about-card h4 { margin-bottom: .6rem; margin-top: 1rem; }

@media (max-width: 767px) {
	.about-title { font-size: 1.6rem; }
	.about-card { padding-left: .75rem; padding-right: .75rem; }
	.about-card .card-body .btn { width: 100%; display: block; margin-bottom: .5rem; }
}

.about-text-column p,
.about-text-column .lead,
.about-text-column ul,
.about-text-column li {
	text-align: justify;
}

/* Justify the lead paragraph placed between the title and the content image */
.about-card .lead {
	text-align: justify;
}

@media (max-width: 991px) {
	.about-title { font-size: 1.75rem; margin-bottom: 0.75rem; }
}

/* Desktop: increase inner padding of the about card for better reading comfort */
@media (min-width: 992px) {
	.about-card .card-body {
		padding: 2.5rem;
	}
}

/* Increase padding for cards on corpo.html specifically (desktop) */
@media (min-width: 992px) {
	.corpo-card .card-body {
		padding: 2.5rem; /* match content-card desktop spacing */
	}
}

/* Generic content card to match about page spacing and responsiveness */
.content-card .lead,
.content-card p,
.content-card ul,
.content-card li {
	text-align: justify;
}

@media (min-width: 992px) {
	.content-card .card-body {
		padding: 2.5rem;
	}
	.content-card h1 {
		font-size: 2.2rem;
		line-height: 1.06;
		margin-bottom: 1rem;
		font-weight: 700;
	}
}

/* Match lawyer names in corpo.html to the about page title sizing */
@media (min-width: 992px) {
	.corpo-card .card-title {
		font-size: 2.6rem;
		line-height: 1.04;
		font-weight: 700;
		margin-bottom: 1rem;
	}
}

/* Surname styling: allow wrapping to avoid layout overflow and ensure flexible shrinking */
.surname {
	white-space: normal;
	display: block;
}

/* Allow the left column (name block) to shrink within the flex row so buttons do not overflow */
.corpo-card .card-body > .d-flex.justify-content-between > .flex-grow-1 {
	min-width: 0;
	overflow-wrap: anywhere;
}

@media (max-width: 991px) {
	.surname { font-size: 1.1rem; }
}

@media (max-width: 991px) {
	.corpo-card .card-title {
		font-size: 1.75rem;
		margin-bottom: 0.5rem;
	}
}

@media (max-width: 991px) {
	.content-card .card-body {
		padding: 1rem;
	}
	.content-card h1 { font-size: 1.5rem; margin-bottom: 0.75rem; }
}

/* Ensure comfortable padding on smaller screens for corpo cards */
@media (max-width: 991px) {
	.corpo-card .card-body {
		padding: 1rem; /* match content-card mobile spacing */
	}
}
/* Cropped header image used on area pages (e.g., civil.html) */

.hero-crop {
	overflow: visible; /* allow full image to show */
	height: auto; /* let image define height */
	margin: .75rem auto; /* center the crop */
	display: block;
	max-width: 720px; /* constrain width for better reading rhythm */
}
.hero-crop__img {
	width: 100%;
	height: auto; /* preserve aspect ratio and show entire image */
	object-fit: contain; /* show whole image within the box */
	object-position: center center;
	display: block;
}

@media (max-width: 991px) {
	.hero-crop { /* mobile: allow a slightly taller visual but still full image */ }
}

/* If JS is disabled, allow the image to remain full-width as a graceful fallback */
.content-card .hero-crop { max-width: 100%; }

/* Responsive tweaks for corpo.html: keep buttons aligned with the first name on desktop,
   but stack content on narrow screens to avoid overflow and preserve readability. */
@media (max-width: 767px) {
	.corpo-card .card-body > .d-flex.justify-content-between {
		flex-direction: column;
		gap: .5rem;
		align-items: flex-start;
	}

	.corpo-card .card-body .d-flex[role="group"] {
		margin-top: .25rem;
		align-self: flex-start;
	}

	/* Allow surnames to wrap on very small screens if necessary */
	.surname { white-space: normal; font-size: 1rem; }

	/* Slightly reduce top-line title size on very small screens */
	.corpo-card .card-title { font-size: 1.35rem; }
}

/* Mobile: make hero CTAs full-width and spaced for easier tapping */
@media (max-width: 767px) {
	.hero-crop + p .btn,
	.hero-crop ~ p .btn {
		display: block;
		width: 100%;
		margin-right: 0 !important;
		margin-bottom: .5rem;
	}
	.hero-crop + p .btn:last-child,
	.hero-crop ~ p .btn:last-child {
		margin-bottom: 0.25rem;
	}
}

/* Mobile-specific layout for corpo.html: larger, more prominent names and stacked full-width contact buttons */
@media (max-width: 767px) {
	.corpo-card .card-title {
		font-size: 1.8rem; /* larger on mobile for emphasis */
		line-height: 1.02;
		font-weight: 800;
	}

	.corpo-card .card-body > .d-flex.justify-content-between {
		flex-direction: column;
		gap: .25rem;
		align-items: stretch;
	}

	.corpo-card .card-body > .d-flex.justify-content-between .flex-grow-1 {
		order: 1;
	}

	.corpo-card .card-body > .d-flex.justify-content-between .d-flex[role="group"] {
		order: 2;
		width: 100%;
		margin-top: .5rem;
		display: flex;
		gap: .5rem;
		align-items: stretch;
	}

	.corpo-card .card-body > .d-flex.justify-content-between .d-flex[role="group"] .btn {
		width: 100%;
		display: block;
		white-space: normal;
	}
}