@charset "UTF-8";

/* =============================================
   Tailwind v3 + CSS vars opacity workaround
   ============================================= */

/* --- Responsive display --- */
@media (min-width: 640px) {
  .sm\:inline-flex { display: inline-flex !important; }
  .sm\:hidden { display: none !important; }
}
@media (min-width: 768px) {
  .md\:hidden { display: none !important; }
  .md\:grid { display: grid !important; }
}
@media (min-width: 1024px) {
  .lg\:inline-flex { display: inline-flex !important; }
  .lg\:hidden { display: none !important; }
  .lg\:grid { display: grid !important; }
  .lg\:block { display: block !important; }
  .lg\:flex-row { flex-direction: row !important; }
  .lg\:items-center { align-items: center !important; }
}

/* --- bg-foreground opacity --- */
.bg-foreground\/5,
.hover\:bg-foreground\/5:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }

/* --- bg-muted opacity --- */
.bg-muted\/40 { background: color-mix(in oklab, var(--muted) 40%, transparent); }

/* --- border-border opacity --- */
.border-border\/60 { border-color: color-mix(in oklab, var(--border) 60%, transparent); }

/* --- border-primary opacity --- */
.border-primary\/60,
.hover\:border-primary\/60:hover { border-color: color-mix(in oklab, var(--primary) 60%, transparent); }
.border-primary\/50,
.hover\:border-primary\/50:hover { border-color: color-mix(in oklab, var(--primary) 50%, transparent); }
.border-primary\/40 { border-color: color-mix(in oklab, var(--primary) 40%, transparent); }
.border-primary\/30 { border-color: color-mix(in oklab, var(--primary) 30%, transparent); }
.ring-primary\/40 { --tw-ring-color: color-mix(in oklab, var(--primary) 40%, transparent); }

/* --- text/background accent opacity --- */
.text-accent\/30 { color: color-mix(in oklab, var(--accent) 30%, transparent); }
.group:hover .group-hover\:text-accent\/60 { color: color-mix(in oklab, var(--accent) 60%, transparent); }
.text-background\/90 { color: color-mix(in oklab, var(--background) 90%, transparent); }
.text-background\/60 { color: color-mix(in oklab, var(--background) 60%, transparent); }
.ring-accent\/40 { --tw-ring-color: color-mix(in oklab, var(--accent) 40%, transparent); }

/* --- hover background light --- */
.hover-bg-foreground-5:hover,
.hover\:bg-foreground-5:hover { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
.bg-foreground-5 { background: color-mix(in oklab, var(--foreground) 5%, transparent); }

/* --- bg-background with opacity --- */
.bg-background\/80 { background: color-mix(in oklab, var(--background) 80%, transparent); }
.bg-background\/70 { background: color-mix(in oklab, var(--background) 70%, transparent); }
.bg-background\/60 { background: color-mix(in oklab, var(--background) 60%, transparent); }
.bg-background\/40 { background: color-mix(in oklab, var(--background) 40%, transparent); }
.bg-surface\/40 { background: color-mix(in oklab, var(--surface) 40%, transparent); }
.bg-background\/\[0\.07\] { background: color-mix(in oklab, var(--background) 7%, transparent); }
.hover\:bg-background\/\[0\.07\]:hover { background: color-mix(in oklab, var(--background) 7%, transparent); }
.hover\:border-accent\/40:hover { border-color: color-mix(in oklab, var(--accent) 40%, transparent); }

/* --- white opacity --- */
.border-white\/20 { border-color: color-mix(in srgb, white 20%, transparent); }

/* --- group hover --- */
.group:hover .group-hover\:text-primary { color: var(--primary); }

/* --- translate hover --- */
.hover\:-translate-y-1:hover { --tw-translate-y: -0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }

/* ============================
   Tailwind JIT strips these from main CSS
   ============================ */
  margin: 1rem 0;
}

  align-items: center;
}

  content: '';
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

  color: var(--primary);
  font-weight: 600;
}

/* ============================
   ============================ */
  margin: 1rem 0;
}

  align-items: center;
}

  content: '';
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

  color: var(--primary);
  font-weight: 600;
}

/* ============================
   CKEditor list styling (Lovable check)
   ============================ */
ul:not([class]),
ol:not([class]) {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 1rem 0;
}

ul:not([class]) li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0;
}

ul:not([class]) li::before {
  content: '';
  display: inline-flex;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  background-color: var(--primary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

ol:not([class]) li::marker {
  color: var(--primary);
  font-weight: 600;
}

/* ============================
   Theme-aware text colors
   ============================ */
.text-white-black {
  color: #fff;
}

html.light .text-white-black {
  color: #000;
}

/* ============================
   Iconify Field - Icon centering & sizing
   ============================ */
.iconify-field {
  display: inline-block;
  width: 1.25em !important;
  height: 1.25em !important;
  vertical-align: middle;
  flex-shrink: 0;
}

.iconify-field svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Ensure icon containers center icons properly */
.paragraph--type--icon-contact-link-component .flex.items-center {
  align-items: center;
}

.paragraph--type--icon-contact-link-component .flex.items-center > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
}

/* Card paragraph icon alignment */
.paragraph--type--card .field--name-field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}