/**
 * Seedling Systems — Theme & product colors
 *
 * Edit this file (resources/css/theme.css) to change site colors or add new products.
 * It is copied as-is to public/css/theme.css when you run the build (not minified).
 * Run: npm run dev  or  npm run prod  to apply changes.
 *
 * To add a new product:
 * 1. Add a block below (e.g. --myproduct-bg, --myproduct-accent, --myproduct-header).
 * 2. In tailwind.config.js, add under theme.extend.colors:
 *    myproduct: { bg: 'var(--myproduct-bg)', accent: 'var(--myproduct-accent)', header: 'var(--myproduct-header)' }
 * 3. Use in HTML: bg-myproduct-bg text-myproduct-header
 */

:root {
  /* Brand */
  --primary-green: #59A96A;
  --primary-light-bg: #FFF3D6;
  --dark-green: #152614;
  --secondary: #8D5B4C;
  --accent-bg: #E4BB97;
  --section-alt-bg: #f5efe6;
  --section-bg: var(--primary-light-bg);
  --section-heading-color: var(--dark-green);
  --section-intro-color: var(--secondary);

  /* Seedling CRM */
  --seedling-crm-primary: #59A96A;
  --seedling-crm-bg: #ffeed6;
  --seedling-crm-accent: #f05d23;
  --seedling-crm-header-text: #fff;

  /* Praxora */
  --praxora-primary: #5e60ce;
  --praxora-bg: #000000;
  --praxora-accent: #7b4bb3;
  --praxora-header-text: #fff;

  /* SafeNode (formerly Ordinex) */
  --safenode-primary: #AFFC41;
  --safenode-bg: #192127;
  --safenode-accent: #B10FBD;
  --safenode-header-text: #000;

  /* Plotwell */
  --plotwell-primary: #6366f1;
  --plotwell-primary-focus: #4f46e5;
  --plotwell-primary-content: #ffffff;
  --plotwell-bg: #e0e7ff;
  --plotwell-header-text: #ffffff;

  /* Prismatik */
  --prismatik-primary: #5b21f5;
  --prismatik-primary-content: #ffffff;
  --prismatik-bg: #ede9fe;
  --prismatik-secondary: #e91e9b;
  --prismatik-header-text: #ffffff;

  /* Peak Web Engine */
  --peak-primary: #7c3aed;
  --peak-primary-content: #f5f3ff;
  --peak-bg: #f3e8ff;
  --peak-secondary: #22c9c9;
  --peak-header-text: #ffffff;
  /* Homepage product card strip only (warm orange, distinct from purple brand) */
  --peak-home-strip-from: #fed7aa;
  --peak-home-strip-mid: #f97316;
  --peak-home-strip-to: #9a3412;
}

/*
 * Homepage “What we build” cards — same strip height for every card; logo aspect presets.
 */
.home-product-card-strip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 9.5rem;
  padding: 0.75rem 1rem;
  box-sizing: border-box;
}

@media (min-width: 640px) {
  .home-product-card-strip {
    height: 10rem;
    padding: 1rem 1.25rem;
  }
}

.home-product-card-strip--peak {
  background: linear-gradient(
    148deg,
    var(--peak-home-strip-from) 0%,
    var(--peak-home-strip-mid) 45%,
    var(--peak-home-strip-to) 100%
  );
  color: #fff;
}

/* Wide wordmarks — limit by width of strip; can use most of the height */
.home-product-logo--landscape {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Square / tall marks — cap height so they don’t dominate vs landscape peers */
.home-product-logo--square {
  display: block;
  max-height: 4.5rem;
  max-width: min(10.5rem, 78%);
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (min-width: 640px) {
  .home-product-logo--square {
    max-height: 5.25rem;
    max-width: min(11.5rem, 72%);
  }
}

/*
 * /products page — logos inside .product-image-shell-inner (taller tile than homepage strip)
 */
.product-image-shell-inner img.product-shell-logo--landscape {
  display: block;
  max-width: 100%;
  max-height: 9rem;
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 2px 6px rgba(21, 38, 20, 0.2));
}

@media (min-width: 768px) {
  .product-image-shell-inner img.product-shell-logo--landscape {
    max-height: 11rem;
  }
}

.product-image-shell-inner img.product-shell-logo--square {
  display: block;
  max-height: 6.5rem;
  max-width: min(13rem, 88%);
  width: auto;
  height: auto;
  object-fit: contain;
  margin-bottom: 0.75rem;
  filter: drop-shadow(0 2px 6px rgba(21, 38, 20, 0.2));
}

@media (min-width: 768px) {
  .product-image-shell-inner img.product-shell-logo--square {
    max-height: 7.75rem;
    max-width: min(14rem, 82%);
  }
}