/* ======================================== */
/* CSS VARIABLES FOR THEME COLORS          */
/* ======================================== */
:root {
	/* Light Mode Colors */
	--bg-primary: #ffffff;
	--bg-secondary: #f8f9fa;
	--bg-footer: #f8f9fa;
	--bg-maps: #ffffff;
	--bg-contacts: #f8f9fa;
	--bg-copyright: rgba(70, 137, 73, 0.2);
	
	--text-primary: #000000;
	--text-secondary: #333333;
	--text-muted: #3333339e;
	--text-light: #666666;
	
	--nav-bg: #f8f9fa;
	--nav-text: #000000;
	--nav-link-hover: rgba(0, 0, 0, 0.1);
	
	--card-bg: #ffffff;
	--card-shadow: rgba(0, 0, 0, 0.15);
	
	--border-color: #dee2e6;
	
	/* Brand Colors - mantém sempre */
	--color-phone: #000000;
	--color-facebook: #4267B2;
	--color-whatsapp: #4AC959;
	--color-email: #DB4437;
	--color-map-marker: #DB4437;
}

[data-theme='dark'] {
	/* Dark Mode Colors */
	--bg-primary: #1a1a1a;
	--bg-secondary: #2d2d2d;
	--bg-footer: #2d2d2d;
	--bg-maps: #1a1a1a;
	--bg-contacts: #2d2d2d;
	--bg-copyright: #1a1a1a;
	
	--text-primary: #e8e8e8;
	--text-secondary: #d0d0d0;
	--text-muted: #a0a0a0;
	--text-light: #b0b0b0;
	
	--nav-bg: #2d2d2d;
	--nav-text: #e8e8e8;
	--nav-link-hover: rgba(255, 255, 255, 0.1);
	
	--card-bg: #2d2d2d;
	--card-shadow: rgba(0, 0, 0, 0.5);
	
	--border-color: #404040;
	
	/* Brand Colors for Dark Mode */
	--color-phone: #e8e8e8;
}

/* Global Transitions */
* {
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Apply theme colors */
html, body {
	background-color: var(--bg-primary);
	color: var(--text-primary);
}

html {
  scroll-behavior: smooth;
}

h1 {
	text-align: center;
	padding-bottom: 0.5em;
}

.lead {
	font-size: 1rem;
}

/* Header Section */
section#header {
	background-color: var(--bg-primary);
	color: var(--text-primary);
}

/* Services Section */
section#servicos {
	background-color: var(--bg-secondary);
}

#servicos h1 {
	letter-spacing: 0.1rem;			
	font-family: 'Krona One', sans-serif;
}

#servicos h2 {
	color: var(--text-muted);
	padding-bottom: 0.8rem;
}

#servicos h3 {
	font-weight: 400;
}

/* Maps Section Styles */
section#maps {
	background-color: var(--bg-maps);
	color: var(--text-primary);
}

section#maps h5 {
	color: var(--text-primary);
}

section#maps h6 {
	color: var(--text-primary);
}

section#maps p {
	color: var(--text-secondary);
}

section#maps .fas.fa-map-marker-alt {
	color: var(--color-map-marker);
}

section#maps h1 {
	letter-spacing: 0rem;
	font-family: 'Krona One', sans-serif;
	padding-top: 1em;
	padding-bottom: 1.5em;
}

/* Contacts Section Styles */
section#contatos {
	background-color: var(--bg-contacts);
	color: var(--text-primary);
}

section#contatos h1 {
	letter-spacing: 0.1rem;
	font-family: 'Krona One', sans-serif;
	padding-top: 1em;
	padding-bottom: 1.5em;
}

section#contatos h5 {
	color: var(--text-primary);
}

section#contatos h6 {
	color: var(--text-primary);
}

section#contatos p {
	color: var(--text-secondary);
}

section#contatos .fas.fa-phone-alt {
	color: var(--color-phone);
}

section#contatos .fab.fa-whatsapp {
	color: var(--color-whatsapp);
}

section#contatos .far.fa-envelope {
	color: var(--color-email);
}

section#contatos .fab.fa-instagram {
	color: var(--color-email);
}

section#contatos .fab.fa-facebook-square {
	color: var(--color-facebook);
}

.figure-caption {
	font-size: .875em;
	text-align: center;
}

.mt-0 {
	margin-top: 0 !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

i {
	font-size: 2rem;
}

/* Theme Toggle Button */
#theme-toggle {
	color: var(--nav-text);
	padding: 0.5rem;
	border: none;
	background: transparent;
	cursor: pointer;
}

#theme-toggle:hover {
	background-color: var(--nav-link-hover);
	border-radius: 0.25rem;
}

#theme-icon {
	font-size: 1.2rem;
}

/* Navbar Styles */
.navbar {
	background-color: var(--nav-bg) !important;
}

.navbar-toggler {
	border-color: var(--nav-text);
}

.navbar-toggler-icon {
	background-image: none;
}

.navbar-toggler .fa-bars {
	color: var(--nav-text);
}

.navbar-brand {
	letter-spacing: 0.2rem;
	font-size: 1.3rem;
	color: var(--nav-text) !important;
}

.nav-link {
	color: var(--nav-text) !important;
}

.dropdown-menu {
	background-color: var(--bg-secondary) !important;
	min-width: 0;
}

.dropdown-item {
	font-size: 1rem;
	text-align: left;
	padding-left: 0.5rem;
	color: var(--text-primary) !important;
}

.dropdown-item:hover {
	background-color: var(--nav-link-hover);
}

/* Mobile Navigation - Center alignment when collapsed */
@media (max-width: 991px) {
	.navbar-collapse {
		text-align: center;
	}
	
	.navbar-nav {
		align-items: center;
	}
	
	.nav-link {
		text-align: center;
		font-size: 2rem;
	}
	
	.dropdown {
		display: flex;
		justify-content: center;
	}
	
	.dropdown-toggle {
		font-size: 2rem;
	}
}

/* Header Styles */
#header {
	background-color: var(--bg-primary);
}

#header h1, #header h2 {
	color: var(--text-primary);
	font-family: 'Krona One', sans-serif;
}

#header h1 {
	letter-spacing: 1.6vw;
	padding-bottom: 0;
}

#header h2 {
	letter-spacing: 0.6rem;
}

/* Section Headers */
#acerca h2, h2 {
	color: var(--text-primary);
}

#servicos h2 {
	color: var(--text-muted);
	padding-bottom: 0.8rem;
}

#servicos h3.service-item {
	font-weight: 400;
}

/* Footer Styles */
footer {
	background-color: var(--bg-footer) !important;
}

.copyright-bar {
	background-color: var(--bg-copyright);
	color: var(--text-primary);
	padding-top: 3em;
	padding-bottom: 1.5em;
}

.copyright-bar a {
	color: var(--text-primary);
	text-decoration: none;
}

.copyright-bar a:hover {
	color: var(--text-secondary);
	text-decoration: underline;
}

/* Social Media Icons */
.fa-phone-alt {
	color: var(--color-phone);
}

.fa-whatsapp {
	color: var(--color-whatsapp);
}

.fa-envelope {
	color: var(--color-email);
}

.fa-facebook-square {
	color: var(--color-facebook);
}

.fa-map-marker-alt {
	transform: rotate(-20deg);
	color: var(--color-map-marker);
}

/* Google Maps iframes */
iframe {
	border: 0;
}

/* Images and Shadows */
.shadow-3 {
	box-shadow: 0 0.5rem 1rem var(--card-shadow) !important;
}

[data-theme='dark'] img {
	opacity: 0.9;
}

[data-theme='dark'] .shadow-3 {
	box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.7) !important;
}

#insta {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size: 2rem;
}

/* ------------------------------------------------------------ *\
|* ------------------------------------------------------------ *|
|* ----------------------MEDIA QUERIES----------------------------
|* ------------------------------------------------------------ *|
\* ------------------------------------------------------------ */

/* --------------------------------------------------------- */
/* ---------Smartphones (portrait and landscape) ----------- */
/* --------------------------------------------------------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
	#header h1 {font-size:10vw;}
	#header h2 {font-size:6vw;}
}

/* ------------------------------------------------ */
/* -------------Smartphones (landscape) ----------- */
/* ------------------------------------------------ */
@media only screen
and (min-width : 321px) {
	#header h1 {font-size:10vw;}
	#header h2 {font-size:6vw;}
}

/* ---------------------------------- */
/* Smartphones (portrait) ----------- */
/* ---------------------------------- */
@media only screen
and (max-width : 320px){
	#header h1 {font-size:10vw;}
	#header h2 {font-size:6vw;}
}

/* ------------------------------------------------- */
/* ------------- Samsung Galaxy S5 ----landscape---- */
/* ------------------------------------------------- */
@media only screen and (min-device-width: 360px) 
and (max-device-height: 640px) and (orientation : landscape) 
and (-webkit-device-pixel-ratio: 3)	{
}

/* --------------------------------------------------- */
/* -------------- Samsung Galaxy S5 -----portrait--- - */
/* --------------------------------------------------- */
@media only screen and (min-device-width: 360px) 
and (max-device-height: 640px) and (orientation : portrait) 
and (-webkit-device-pixel-ratio: 3){
}

/* ---------------------------------------------- */ 
/* ------ iPads (portrait and landscape) -------- */
/* ---------------------------------------------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
	#header h1 {font-size:10vw;}
	#header h2 {font-size:5vw;}
}

/* ------------------------------------------- */ 
/* ------------iPads (landscape) ------------- */
/* ------------------------------------------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
	#header h2 {font-size:4vw;}
}

/* ------------------------------------------- */ 
/* ----------- iPads (portrait) -------------- */
/* ------------------------------------------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
}

/* ------------------------------------------- */ 
/* ---------- Desktops and laptops ----------- */
/* ------------------------------------------- */
@media only screen
and (min-width : 1224px){
	#header h1 {font-size:7vw;}
	#header h2 {font-size:3.5vw;}
	
	.container-fluid {max-width:1224px}

	.lead {
		font-size: 1.4rem;
	}
	
	.figure-caption {
		font-size: 1.4em;
	}
	
	.px-4 {
		padding-top: 2.2rem;
		padding-bottom: 2.2rem;
	}
	
	.px-6 {
		padding-left: 3.2rem;
		padding-right: 3.2rem;
	}
	
	#acerca h2 {
		margin-bottom: 1.5rem;
	}
	
	#servicos.container.py-3 {
		padding-bottom: 4rem !important;
	}
	
	#servicos h1 {
		padding-top: 1em;
		padding-bottom: 1.5em;
	}
	
	#servicos h3 {
		font-size: 1.5rem;
	}
}

/* ------------------------------------------- */
/* -------------Large screens ---------------- */
/* ------------------------------------------- */
@media only screen
and (min-width : 1824px){
	.lead {
		font-size: 1.4rem;
	}
	
	.figure-caption {
		font-size: 1.4em;
	}
}