/* =========================================
   Vrije Cloud Custom Styling for Paymenter
   Force Light Mode Only (No Dark Mode)
   ========================================= */

/* Import Self-hosted Fonts */
@import url('../fonts/fonts.css');

/* ─── ROOT VARIABLES ──────────────────── */
:root {
  /* Vrije Cloud Color Palette */
  --vc-bg: #f0ede6;
  --vc-dark: #1a1a1a;
  --vc-green: #4a7c59;
  --vc-green-light: #7eb89a;
  --vc-green-pale: #e8f2ec;
  --vc-border: #d0ccc4;
  --vc-muted: #888;
  --vc-text: #555;
  --vc-warm-white: #faf9f6;

  /* Override Paymenter theme colors - LIGHT MODE ONLY */
  --color-primary: 74, 124, 89; /* #4a7c59 */
  --color-secondary: 126, 184, 154; /* #7eb89a */
  --color-neutral: 208, 204, 196; /* #d0ccc4 */
  --color-base: 26, 26, 26; /* #1a1a1a */
  --color-muted: 136, 136, 136; /* #888 */
  --color-background: 240, 237, 230; /* #f0ede6 */
  --color-background-secondary: 250, 249, 246; /* #faf9f6 */
}

/* FORCE LIGHT MODE - Override dark class */
.dark,
.dark *,
html.dark,
html.dark *,
body.dark,
body.dark * {
  /* Force light mode colors even when dark class is applied */
  --color-primary: 74, 124, 89 !important;
  --color-secondary: 126, 184, 154 !important;
  --color-neutral: 208, 204, 196 !important;
  --color-base: 26, 26, 26 !important;
  --color-muted: 136, 136, 136 !important;
  --color-background: 240, 237, 230 !important;
  --color-background-secondary: 250, 249, 246 !important;
  
  background-color: var(--vc-bg) !important;
  color: var(--vc-dark) !important;
}

/* ─── TYPOGRAPHY ──────────────────────── */
body {
  font-family: var(--font-sans) !important;
  background-color: var(--vc-bg) !important;
  color: var(--vc-dark) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
.font-serif {
  font-family: var(--font-serif) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em;
  color: var(--vc-dark) !important;
}

h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  font-style: italic;
  color: var(--vc-green) !important;
}

/* ─── HEADER / NAVIGATION ─────────────── */
nav, header {
  background: rgba(240, 237, 230, 0.94) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vc-border) !important;
}

/* Logo styling */
.logo, [class*=logo] {
  font-family: var(--font-serif) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  letter-spacing: -0.3px;
  color: var(--vc-dark) !important;
}

/* Navigation links */
nav a:not(.btn):not([class*=button]) {
  color: var(--vc-muted) !important;
  transition: color 0.15s ease;
  text-decoration: none;
}

nav a:not(.btn):not([class*=button]):hover {
  color: var(--vc-dark) !important;
}

/* ─── BUTTONS ─────────────────────────── */
/* Primary buttons - Dark background */
.btn-primary,
[class*=btn][class*=primary],
button[type=submit]:not([class*=secondary]),
.bg-primary,
button[class*=bg-primary] {
  background-color: var(--vc-dark) !important;
  color: var(--vc-bg) !important;
  border: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  transition: background-color 0.2s ease !important;
}

.btn-primary:hover,
[class*=btn][class*=primary]:hover,
button[type=submit]:not([class*=secondary]):hover {
  background-color: var(--vc-green) !important;
  color: var(--vc-bg) !important;
}

/* Secondary/Login buttons - Green border */
.btn-secondary,
.btn-login,
[class*=btn][class*=secondary],
[class*=btn][class*=outline] {
  background: transparent !important;
  color: var(--vc-green) !important;
  border: 1.5px solid var(--vc-green) !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.btn-secondary:hover,
.btn-login:hover,
[class*=btn][class*=secondary]:hover,
[class*=btn][class*=outline]:hover {
  background-color: var(--vc-green) !important;
  color: var(--vc-bg) !important;
}

/* ─── CARDS & CONTAINERS ──────────────── */
.card,
[class*=card],
.bg-background-secondary,
[class*=bg-background] {
  background-color: var(--vc-warm-white) !important;
  border: 1px solid var(--vc-border) !important;
  border-radius: 0 !important;
  color: var(--vc-dark) !important;
}

/* Hover states */
.card:hover,
[class*=card]:hover {
  background-color: var(--vc-green-pale) !important;
  transition: background-color 0.2s ease;
}

/* ─── FORMS ───────────────────────────── */
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=url],
textarea,
select {
  background-color: var(--vc-warm-white) !important;
  border: 1px solid var(--vc-border) !important;
  border-radius: 0 !important;
  color: var(--vc-dark) !important;
  font-family: var(--font-sans) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--vc-green) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--vc-green-pale) !important;
}

/* Labels */
label {
  color: var(--vc-text) !important;
  font-weight: 500 !important;
  font-size: 14px;
}

/* ─── LINKS ───────────────────────────── */
a {
  color: var(--vc-green) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.2s ease;
}

a:hover {
  opacity: 0.85;
}

/* ─── TABLES ──────────────────────────── */
table {
  border-collapse: collapse;
  border: 1px solid var(--vc-border) !important;
}

thead {
  background-color: var(--vc-warm-white) !important;
  border-bottom: 2px solid var(--vc-border) !important;
}

tbody tr {
  border-bottom: 1px solid var(--vc-border) !important;
  transition: background-color 0.15s ease;
  background-color: var(--vc-bg) !important;
}

tbody tr:hover {
  background-color: var(--vc-green-pale) !important;
}

th, td {
  padding: 12px 16px;
  border-right: 1px solid var(--vc-border);
  color: var(--vc-dark) !important;
}

th:last-child, td:last-child {
  border-right: none;
}

/* ─── BADGES & TAGS ───────────────────── */
.badge,
[class*=badge],
.tag,
[class*=tag] {
  background-color: var(--vc-green-pale) !important;
  color: var(--vc-green) !important;
  border: 1px solid var(--vc-green-light) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  padding: 4px 12px !important;
  border-radius: 0 !important;
}

/* ─── SECTION LABELS ──────────────────── */
.section-label,
[class*=label][class*=section] {
  font-size: 11px !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: var(--vc-muted) !important;
  font-weight: 500 !important;
}

/* ─── NOTIFICATION BAR ────────────────── */
.notification-bar,
[class*=notification] {
  background: var(--vc-green) !important;
  color: var(--vc-bg) !important;
  border-bottom: 1px solid var(--vc-border) !important;
  padding: 14px !important;
  text-align: center;
}

.notification-bar a {
  color: var(--vc-bg) !important;
  text-decoration: underline;
  font-weight: 600 !important;
}

/* ─── FOOTER ──────────────────────────── */
footer {
  background: var(--vc-bg) !important;
  border-top: 1px solid var(--vc-border) !important;
  color: var(--vc-muted) !important;
  font-size: 12px;
  padding: 28px 64px !important;
}

footer a {
  color: var(--vc-muted) !important;
  text-decoration: underline;
}

footer a:hover {
  color: var(--vc-dark) !important;
}

/* ─── FORCE LIGHT BACKGROUNDS EVERYWHERE ─── */
div, section, main, aside, article {
  color: var(--vc-dark) !important;
}

[class*=bg-background],
[class*=bg-gray],
[class*=bg-slate],
[class*=bg-zinc] {
  background-color: var(--vc-bg) !important;
}

/* Text color overrides */
[class*=text-white],
[class*=text-gray] {
  color: var(--vc-dark) !important;
}

/* ─── ANIMATIONS ──────────────────────── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeUp {
  animation: fadeUp 0.6s ease both;
}

/* ─── RESPONSIVE ADJUSTMENTS ──────────── */
@media (max-width: 768px) {
  footer {
    padding: 24px !important;
    flex-direction: column;
    text-align: center;
  }
  
  nav, header {
    padding: 20px 24px !important;
  }
}

/* ─── UTILITIES ───────────────────────── */
.bg-vrije {
  background-color: var(--vc-bg) !important;
}

.text-vrije-green {
  color: var(--vc-green) !important;
}

.border-vrije {
  border-color: var(--vc-border) !important;
}

.hover-vrije-green:hover {
  background-color: var(--vc-green-pale) !important;
  transition: background-color 0.2s ease;
}

/* ─── SPECIFIC LOGO STYLING ──────────────── */
/* Target the logo text specifically */
a[href*='mijn.vrije.cloud'] span.text-xl,
span.text-xl.font-bold.leading-none,
.flex.items-center span.text-xl {
  font-family: 'Fraunces', serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.5px !important;
}

/* Make Cloud part bold in Fraunces */
a[href*='mijn.vrije.cloud'] span.text-xl::after {
  font-weight: 700 !important;
}

/* ─── LOGO STYLING - FORCE FRAUNCES ──────────────── */
/* Very specific targeting for logo text */
header span.text-xl,
footer span.text-xl,
nav span.text-xl,
a[wire\:navigate] span.text-xl,
span.text-xl.font-bold,
.text-xl.font-bold.leading-none {
  font-family: 'Fraunces', serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
}

/* ─── SPLIT LOGO STYLING - Vrije (light) Cloud (bold) ──────────────── */
/* Target logo spans and apply lighter weight by default */
header span.text-xl,
footer span.text-xl,
nav span.text-xl,
a[wire\:navigate] span.text-xl {
  font-family: 'Fraunces', serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.5px !important;
}

/* Use CSS to make the word after space bold */
/* This is a workaround - ideally the HTML would have separate spans */
header span.text-xl,
footer span.text-xl,
nav span.text-xl,
a[wire\:navigate] span.text-xl {
  background: linear-gradient(to right, 
    currentColor 0%, 
    currentColor 44%,  /* Vrije is ~44% of total width */
    currentColor 44%,
    currentColor 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
}

/* ─── LOGO STYLING - Vrije (light) Cloud (bold) ──────────────── */
/* Target the parent span */
header span.text-xl.leading-none,
footer span.text-xl.leading-none,
nav span.text-xl.leading-none {
  font-family: 'Fraunces', serif !important;
}

/* Light weight for Vrije */
header span.font-light,
footer span.font-light,
nav span.font-light {
  font-family: 'Fraunces', serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.3px;
}

/* Bold weight for Cloud */
header span.font-bold,
footer span.font-bold,
nav span.font-bold {
  font-family: 'Fraunces', serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px;
}

/* ─── BUTTON TEXT COLOR FIX ──────────────── */
/* Ensure black/dark buttons always have white text */
button[class*="bg-black"],
button[class*="bg-dark"],
.bg-black,
.bg-dark,
[class*="btn"][class*="bg-black"],
[class*="btn"][class*="bg-dark"],
button[style*="background-color: rgb(26, 26, 26)"],
button[style*="background-color: #1a1a1a"],
button[style*="background: rgb(26, 26, 26)"],
button[style*="background: #1a1a1a"] {
  color: var(--vc-bg) !important;
  background-color: var(--vc-dark) !important;
}

/* More specific targeting for dark buttons */
button.bg-base,
.bg-base button,
[class*="bg-base"] {
  color: #ffffff !important;
  background-color: var(--vc-dark) !important;
}

/* Force white text on any dark background */
[style*="background-color: rgb(26"],
[style*="background: rgb(26"],
[style*="background-color: hsl(0, 0%, 10%)"],
[style*="background: hsl(0, 0%, 10%)"] {
  color: #ffffff !important;
}

/* ─── ADD SPACE BETWEEN VRIJE AND CLOUD ──────────────── */
header span.font-light,
footer span.font-light,
nav span.font-light {
  margin-right: 0.25em !important;
}

/* ─── FIX BUTTON TEXT IN DARK MODE ──────────────── */
/* Override dark mode styles that affect button text */
.dark button *,
.dark [class*="btn"] *,
body.dark button *,
body.dark [class*="btn"] * {
  background-color: transparent !important;
  color: inherit !important;
}

/* Ensure button text is always readable */
button span,
button div,
button p,
[class*="btn"] span,
[class*="btn"] div,
[class*="btn"] p {
  background-color: transparent !important;
}

/* Primary/dark buttons must have white text */
button[class*="primary"] *,
button[class*="bg-base"] *,
button[class*="bg-dark"] *,
button[class*="bg-black"] *,
.btn-primary *,
.bg-primary *,
[style*="background-color: rgb(26"] *,
[style*="background: rgb(26"] * {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* More aggressive override for sign in button specifically */
button[type="submit"] span,
button[type="submit"] div,
button[type="submit"] * {
  color: #ffffff !important;
  background-color: transparent !important;
}

/* ─── FIX NAVIGATION BORDER ──────────────── */
nav.border-b,
header.border-b {
  border-bottom: 1px solid var(--vc-border) !important;
}

/* ─── STRONGER HEADING FONT ENFORCEMENT ──────────────── */
/* Make sure ALL headings use Fraunces, even with utility classes */
[class*="text-"] h1,
[class*="text-"] h2,
[class*="text-"] h3,
[class*="text-"] h4,
[class*="text-"] h5,
[class*="text-"] h6,
div h1, div h2, div h3, div h4, div h5, div h6,
section h1, section h2, section h3, section h4, section h5, section h6,
main h1, main h2, main h3, main h4, main h5, main h6,
article h1, article h2, article h3, article h4, article h5, article h6 {
  font-family: 'Fraunces', serif !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em;
}

/* Ensure bold/semibold headings still use Fraunces */
h1.font-bold, h2.font-bold, h3.font-bold, 
h4.font-bold, h5.font-bold, h6.font-bold,
h1.font-semibold, h2.font-semibold, h3.font-semibold,
h4.font-semibold, h5.font-semibold, h6.font-semibold {
  font-family: 'Fraunces', serif !important;
  font-weight: 700 !important;
}