/* =========================
   Vermeer design tokens
   ========================= */

.page-vermeer {
  /* Core brand */
  --v-green: #00703C;     /* Vermeer Green (accent only) */
  --v-black: #000000;
  --v-white: #ffffff;

  /* Secondary / UI palette */
  --v-yellow: #FFC425;   /* Vermeer Yellow (primary CTA / highlight) */
  --v-slate: #5F6062;    /* Slate */
  --v-concrete: #C4C6C8; /* Concrete */

  /* Text */
  --v-text-main: #1f2933;        /* neutral dark text */
  --v-text-muted: #6b7280;       /* secondary text */

  /* Surfaces */
  --v-surface: var(--v-white);
  --v-surface-muted: #f7f7f8;

  /* Borders */
  --v-border: #e3e5e8;
  --v-border-strong: var(--v-concrete);

  /* Radius */
  --v-radius-sm: 6px;
  --v-radius: 10px;

  /* Shadows (subtle, Refactoring UI–style) */
  --v-shadow-sm: 0 4px 12px rgba(0,0,0,.08);
  --v-shadow: 0 10px 28px rgba(0,0,0,.10);

  /* Spacing scale */
  --v-space-1: 6px;
  --v-space-2: 10px;
  --v-space-3: 16px;
  --v-space-4: 24px;
  --v-space-5: 32px;
  --v-space-6: 48px;
}

.page-vermeer .v-hero {
  background: var(--v-surface);
  border: 1px solid var(--v-border);
  border-radius: var(--v-radius);
  box-shadow: var(--v-shadow-sm);
  padding: var(--v-space-5);
}

.page-vermeer .v-hero__kicker {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--v-green);
  font-weight: 600;
  margin-bottom: var(--v-space-2);
}

/* ======================
   IMAGES and MEDIA 
   ====================== */

.page-vermeer .v-media {
  max-width: 100%;
}

.page-vermeer .v-media img,
.page-vermeer .v-media video,
.page-vermeer .v-media iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

.page-vermeer .v-media--card img { 
  border-radius: var(--v-radius-sm);
  box-shadow: var(--v-shadow-sm);
  background: var(--v-surface);
}

.page-vermeer .v-media--center {
  display: flex;
  justify-content: center;
}

/* When to use contain vs cover

contain → product images, machines (no cropping)
cover → lifestyle/action images (cropping acceptable) */

.page-vermeer .v-media--ratio {
  aspect-ratio: 4 / 3;     /* or 16 / 9 */
  overflow: hidden;
}

.page-vermeer .v-media--ratio img {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* use 'cover' only if intentional */
}

/* Refined Vermeer buttons — calmer, more solid */

.page-vermeer .v-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 20px;          /* more breathing room */
  line-height: 1.1;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.14);
  transition: background-color .12s ease,
              box-shadow .12s ease,
              transform .08s ease;
}

/* Primary (Vermeer Yellow) */
.page-vermeer .v-btn--primary {
  background: #FFC425;
  color: #000;
  box-shadow: 0 2px 0 rgba(0,0,0,.18);  /* subtle “pressable” feel */
}

/* Hover: gentle, not jumpy */
.page-vermeer .v-btn--primary:hover {
  box-shadow: 0 3px 0 rgba(0,0,0,.22);
}

/* Active: pressed */
.page-vermeer .v-btn--primary:active {
  box-shadow: 0 1px 0 rgba(0,0,0,.18);
  transform: translateY(1px);
}

/* Secondary: calm outline */
.page-vermeer .v-btn--secondary {
  background: #fff;
  color: #000;
  border-color: rgba(0,0,0,.22);
  box-shadow: none;
}

.page-vermeer .v-btn--secondary:hover {
  background: #f9fafb;
  border-color: rgba(0,0,0,.35);
}

/* Focus (Vermeer Green accent) */
.page-vermeer .v-btn:focus { outline: none; }

.page-vermeer .v-btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(0,112,60,.25);
}

/* Button group spacing */
.page-vermeer .v-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;                 /* space between buttons */
  margin-top: 28px;          /* space from bullets above */
  margin-bottom: 24px;       /* space from content below */
}

/* Fix headings */

.page-vermeer h1,
.page-vermeer h2,
.page-vermeer h3,
.page-vermeer h4 {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f1f1f;
  margin-top: 0;
}

.page-vermeer h2 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 16px;
}

.page-vermeer h3 {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-transform: none;
  margin: 0 0 10px;
}

/* If Porto/theme is forcing uppercase via feature-box styles, override just there */
.page-vermeer .feature-box-info h3,
.page-vermeer .feature-box-info h4 {
  text-transform: none;
  letter-spacing: normal;
}

/* Table button: smaller + no shadow */
.page-vermeer .v-btn--sm {
  padding: 8px 12px;
  font-size: 13px;
}

/* Table button hover: calm + clear */
.page-vermeer .v-btn--table {
  font-weight: 600;
  background: #FFC425;
  color: #000;
  border-color: rgba(0,0,0,.16);
  box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease;
}

.page-vermeer .v-btn--table:hover {
  background: #F2B91F;              /* ~5–7% darker yellow */
  border-color: rgba(0,0,0,.28);
}

.page-vermeer .v-btn--table:active {
  background: #E9AF18;
}

.page-vermeer section.page-header h1.vermeeryellow {
  font-size: 2.8rem;
  font-weight: 600;
  line-height: 1.25;
  max-width: 90%;
  color: #EDEEEF;
  border: none;
  padding-bottom: 10px;
  margin-top: 5px;
}