/* =========================================================
   HomeCrowd Overrides v1.1
   ---------------------------------------------------------
   - Post-cleanup, production-ready
   - Appever treated as immutable vendor theme
   - Zero visual regressions
   ========================================================= */

/* =========================================================
   FONT IMPORT
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300..900&display=swap');

/* =========================================================
   BRAND TOKENS (SOURCE OF TRUTH)
   ========================================================= */

:root {
  --hc-green: #00984A;
  --hc-green-dark: #007E3D;

  --hc-text-dark: #0f172a;
  --hc-text-light: #ffffff;
}

/* =========================================================
   TAILWIND v4 COLOR TOKEN REMAP (RED → GREEN)
   ========================================================= */

:root {
  --color-red-500: var(--hc-green);
}

@media (hover: hover) {
  :root {
    --color-red-600: var(--hc-green-dark);
  }
}

/* =========================================================
   TYPOGRAPHY — TEMPORARY FORCE (REMOVE WHEN IN CONFIG)
   ========================================================= */

:root,
:host {
  --font-sans: 'Rubik', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, 'Noto Sans', sans-serif !important;

  --default-font-family: var(--font-sans) !important;
}

body,
h1, h2, h3, h4, h5, h6,
.navbar, .navbar a, .nav-link,
button, .btn, a, input, textarea, select {
  font-family: var(--font-sans) !important;
}

/* =========================================================
   GLOBAL COLOR NORMALISATION
   ---------------------------------------------------------
   Slate → Stone (remove blue cast entirely)
   ========================================================= */

/* Backgrounds */
.bg-slate-50,
.bg-slate-50\/50 {
  background-color: #fafaf9 !important; /* stone-50 */
}

.dark .dark\:bg-slate-800,
.dark .dark\:bg-slate-800\/20 {
  background-color: rgba(41, 37, 36, 0.35) !important; /* stone-800 */
}

.dark .dark\:bg-slate-900 {
  background-color: #1c1917 !important; /* stone-900 */
}

footer.bg-slate-800 {
  background-color: #0c0a09 !important; /* stone-950 */
}

/* Text */
.text-slate-400 {
  color: #a8a29e !important; /* stone-400 */
}

.dark .text-slate-400 {
  color: #d6d3d1 !important; /* stone-300 */
}

.text-slate-500 {
  color: #bbb1aa !important; /* stone-500 */
}

/* Borders */
.border-gray-100 {
  border-color: #e7e5e4 !important; /* stone-200 */
}

.dark .dark\:border-gray-800 {
  border-color: rgba(231, 229, 228, 0.08) !important;
}

/* Shadows */
.shadow-md,
.shadow-xl,
.shadow-slate-100,
.hover\:shadow-slate-100:hover,
.dark .dark\:shadow-slate-800,
.dark .dark\:hover\:shadow-slate-800:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important;
}

/* =========================================================
   NAVBAR — CANONICAL RULESET (ALL MODES & BREAKPOINTS)
   ========================================================= */

/* Navbar surface */
html:not(.dark) nav.navbar {
  background-color: #ffffff !important;
}

html.dark nav.navbar {
  background-color: #1c1917 !important; /* stone-900 */
}

/* Sticky should not introduce a second surface */
nav.navbar.is-sticky {
  background-color: unset !important;
}

/* ---------------------------------------------------------
   Navigation container
   - Transparent on desktop
   - Solid surface only when collapsed (mobile)
   --------------------------------------------------------- */

.navigation {
  background-color: transparent !important;
}

@media (max-width: 991px) {
  html:not(.dark) .navigation {
    background-color: #ffffff !important;
  }

  html.dark .navigation {
    background-color: #1c1917 !important; /* stone-900 */
  }
}

/* ---------------------------------------------------------
   Nav link colors
   --------------------------------------------------------- */

/* Base */
html:not(.dark) .navbar-nav .nav-link {
  color: var(--hc-text-dark) !important;
}

html.dark .navbar-nav .nav-link {
  color: #ffffff !important;
}

/* Hover + active (correct specificity for Appever) */
nav.navbar .navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active {
  color: var(--hc-green) !important;
}

/* Active + hover underline */
.navbar-nav .nav-link.active::after,
nav.navbar .navbar-nav .nav-item .nav-link:hover::after {
  background-color: var(--hc-green) !important;
}

/* Force transparent item backgrounds */
nav.navbar .navbar-nav .nav-link,
nav.navbar .navbar-nav .nav-link:hover,
nav.navbar .navbar-nav .nav-link.active {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Icon buttons */
.navbar a:hover svg {
  stroke: #ffffff !important;
}

/* =========================================================
   LINKS & BUTTONS
   ========================================================= */

a.hover\:text-red-500:hover,
html.dark a.dark\:hover\:text-red-500:hover {
  color: var(--hc-green) !important;
}

button.bg-red-500,
a.bg-red-500,
a.bg-red-500.lightbox {
  background-color: var(--hc-green) !important;
  color: #ffffff !important;
}

button.bg-red-500:hover,
a.bg-red-500:hover {
  background-color: var(--hc-green-dark) !important;
}

/* =========================================================
   FORMS
   ========================================================= */

.form-input:focus {
  border-color: var(--hc-green) !important;
}

html.dark .form-input {
  background-color: #ffffff !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}

html.dark .form-input::placeholder {
  color: #6b7280 !important;
}

/* =========================================================
   ACCORDION / ACTIVE STATES
   ========================================================= */

button[aria-expanded="true"] {
  color: var(--hc-green) !important;
  background-color: rgba(0, 152, 74, 0.08);
}

button[aria-expanded="true"] svg {
  color: var(--hc-green) !important;
}

/* =========================================================
   FEATURE CARDS
   ========================================================= */

.group.hover\:bg-red-500:hover,
.group.dark\:hover\:bg-red-500:hover {
  background-color: var(--hc-green) !important;
}

.group:hover > span.text-red-500,
.group:hover > span.text-red-500 svg {
  color: #ffffff !important;
}

/* =========================================================
   SLIDERS / CAROUSELS (Tiny Slider)
   ========================================================= */

.tns-nav button {
  background-color: rgba(0, 152, 74, 0.25) !important;
}

.tns-nav button:hover {
  background-color: rgba(0, 152, 74, 0.5) !important;
}

.tns-nav button.tns-nav-active {
  background-color: var(--hc-green) !important;
}

.tns-controls button {
  color: var(--hc-green) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3) !important;
}

.tns-controls button:hover {
  color: #ffffff !important;
}

/* =========================================================
   TOBII LIGHTBOX
   ========================================================= */

.tobii,
.tobii__overlay {
  background-color: rgba(28, 25, 23, 0.94) !important; /* stone-900 */
}

.tobii__slider,
.tobii__slider-slide {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6) !important;
}

.group:hover .group-hover\:text-white\/50 {
  color: rgba(255, 255, 255, 0.8) !important;
}

.group:hover .group-hover\:text-white {
  color: #ffffff !important;
}