/* Override theme styles to use variables from assets/css/colors.css */

/* Base */
body {
	background-color: var(--twg-cream);
	color: var(--twg-charcoal);
}

a {
	color: var(--twg-sage);
}

a:hover,
a:focus {
	color: var(--twg-sage-hover);
}

/* Buttons */
.btn,
.btn-primary,
.btn--primary {
	background-color: var(--twg-sage);
	border-color: var(--twg-sage);
	color: #ffffff;
}

.btn:hover,
.btn-primary:hover,
.btn--primary:hover,
.btn:focus,
.btn-primary:focus,
.btn--primary:focus {
	background-color: var(--twg-sage-hover);
	border-color: var(--twg-sage-hover);
	color: #ffffff;
}

.btn--alternative {
	background-color: var(--twg-green);
	border-color: var(--twg-green);
	color: #ffffff;
}

.btn--alternative:hover,
.btn--alternative:focus {
	background-color: var(--twg-sage-hover);
	border-color: var(--twg-sage-hover);
	color: #ffffff;
}

/* Sections */
.section,
section {
	background-color: var(--twg-cream);
}

.section.bg-accent,
.bg-accent {
	background-color: var(--twg-beige) !important;
}

/* Header & Nav */
.header,
.navbar,
.navbar-nav .nav-link {
	color: var(--twg-charcoal);
}

.navbar a:hover,
.navbar a:focus {
	color: var(--twg-sage);
}

/* Footer */
.footer,
.footer-1,
.footer-bottom {
	background-color: var(--twg-charcoal);
	color: var(--twg-cream);
}

.footer a {
	color: var(--twg-cream);
}

.footer a:hover,
.footer a:focus {
	color: var(--twg-beige);
}

/* About Section Gradient */
.about-2 {
	background: linear-gradient(135deg, var(--twg-cream) 0%, var(--twg-beige) 50%, var(--twg-sage) 100%);
}

/* Utilities */
.text-primary-brand { color: var(--twg-green) !important; }
.text-secondary-brand { color: var(--twg-sage) !important; }
.bg-primary-brand { background-color: var(--twg-green) !important; }
.bg-secondary-brand { background-color: var(--twg-sage) !important; }
.bg-surface { background-color: var(--twg-cream) !important; }
.bg-accent-brand { background-color: var(--twg-beige) !important; }

/* Mobile Bottom Nav */
.mobile-bottom-nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030; /* above header */
	display: none;
	background-color: var(--twg-cream); /* #F4F1EA */
	border-top: 1px solid rgba(0,0,0,0.08);
	padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bottom-nav__item {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px 6px;
	font-size: 12px;
	text-decoration: none;
	color: var(--twg-charcoal);
}

.mobile-bottom-nav__item .icon { font-size: 18px; line-height: 1; color: #68738f; }

.mobile-bottom-nav__item.active .icon,
.mobile-bottom-nav__item:hover .icon,
.mobile-bottom-nav__item:focus .icon { color: var(--twg-green); }

.mobile-bottom-nav__item.active .label,
.mobile-bottom-nav__item:hover .label,
.mobile-bottom-nav__item:focus .label { color: var(--twg-charcoal); }

.mobile-bottom-nav__item:hover,
.mobile-bottom-nav__item:focus { background-color: rgba(0,0,0,0.035); }

/* Mobile Services Dropdown */
.mobile-bottom-nav__dropdown {
  position: relative;
  cursor: pointer;
}

.mobile-services-dropdown {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--twg-cream);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 200px;
  max-width: 280px;
  padding: 8px 0;
  margin-bottom: 8px;
  display: none;
  z-index: 1040;
}

.mobile-services-dropdown a {
  display: block;
  padding: 10px 16px;
  color: var(--twg-charcoal);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.mobile-services-dropdown a:last-child {
  border-bottom: none;
}

.mobile-services-dropdown .dropdown-main {
  font-weight: 600;
  background-color: var(--twg-beige);
  margin-bottom: 4px;
}

.mobile-services-dropdown a:hover {
  background-color: rgba(0,0,0,0.05);
  color: var(--twg-green);
}

.mobile-services-dropdown.show {
  display: block;
  animation: slideUp 0.2s ease-out;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Only show on small screens */
@media (max-width: 991.98px) {
	.mobile-bottom-nav { display: flex; }
	body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
	/* Hide top header/nav on mobile */
	.header { display: none; }
}