/* Fonts are loaded by HumeConsulting theme - no need to import here */

:root {
  /* Use existing variables from HumeConsulting's app.css which is injected inline */
  /* Only define plugin-specific variables that aren't in the theme's app.css */
  
  /* Legacy variable mapping for backward compatibility */
  --primary: var(--brand-primary);
  --primary-dark: var(--brand-dark);
  --primary-light: var(--brand-light);
  
  /* Plugin-specific colors not in theme */
  --secondary: #B8D4B8;
  --secondary-light: #D4E6D4;
  --secondary-dark: #9BC49B;
  
  /* Additional colors if not defined in theme */
  --cream: #FAF9F7;
  --text-primary: #2C2C2C;
  --text-secondary: var(--brand-neutral);
  
  /* Plugin-specific typography - use theme fonts */
  --font-heading: var(--font-sans, 'Inter', sans-serif);
  --font-body: var(--font-sans, 'Inter', sans-serif);
  --font-primary: var(--font-heading);
  --font-seconday: var(--font-body);
  
  /* Layout - plugin specific */
  --page-padding-top: 80px;
  --header-height: 80px;
  --header-height-mobile: 80px;
  --sticky-nav-offset: 80px;
  --sticky-scroll-margin: 140px;
}

/* Use theme's CMS classes (cms-bg-primary, cms-text-primary, etc) instead of custom ones */
/* Only define plugin-specific utility classes that don't exist in theme */

.bg-secondary { background-color: var(--secondary); }
.bg-secondary-light { background-color: var(--secondary-light); }
.bg-secondary-dark { background-color: var(--secondary-dark); }
.bg-cream { background-color: var(--cream); }

.text-sage { color: var(--brand-primary); }

.border-secondary { border-color: var(--secondary); }

.font-primary { font-family: var(--font-primary); }
.font-seconday { font-family: var(--font-seconday); }

.bg-accent {
    background-color: var(--primary);
}

.plugin-page {
  padding-top: 80px;
  font-family: var(--font-body);
  background: white;
}

.plugin-page .content-body p {
  font-size: 1.125rem;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 1.5rem;
}


.choices__inner {
    border: 2px solid var(--light-gray) !important;
    border-radius: 0.75rem !important;
    padding: 0.75rem !important;
    min-height: auto !important;
    background-color: var(--white) !important;
}

.choices__inner:focus {
    border-color: var(--primary) !important;
}

.choices__list--multiple .choices__item {
    background-color: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    border-radius: 0.5rem !important;
}

.choices__list--dropdown {
    border: 2px solid var(--light-gray) !important;
    border-radius: 0.75rem !important;
    margin-top: 0.25rem !important;
}

.choices__item--choice {
    padding: 0.75rem !important;
}

.choices__item--choice.is-highlighted {
    background-color: var(--light-gray) !important;
}

.choices[data-type*=select-multiple] .choices__button {
    border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
}

.booking-form {
  background-color: var(--white);
  border: 1px solid var(--light-gray);
  font-family: var(--font-sans);
}

.btn-primary {
  background-color: var(--primary);
  color: var(--white);
  font-family: var(--font-sans);
}

.btn-primary:hover {
  background-color: var(--primary-dark);
}

.btn-secondary {
  background-color: var(--secondary);
  color: var(--primary);
  font-family: var(--font-sans);
}

.btn-secondary:hover {
  background-color: var(--secondary-dark);
}


/* Plugin-specific styles only - CMS classes are loaded from theme */

/* HumeConsulting CMS Classes */
.cms-bg-primary { background-color: var(--brand-primary); }
.cms-text-primary { color: var(--brand-primary); }
.cms-btn {
  background-color: var(--brand-primary);
  color: var(--white);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.2s;
}
.cms-btn:hover {
  background-color: var(--brand-dark);
  color: var(--white);
}
.cms-card {
  background: var(--white);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.cms-h1 {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
}
.cms-h2 {
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}
.cms-h3 {
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

[x-cloak] { display: none !important; }