/* =====================================================================
   KeramikaOutlet Design System — COMPONENTS (ko-components.css)  [DRAFT]
   Tokenised, reusable components. Enqueue AFTER ko-tokens.css.
   Components are opt-in `ko-*` classes — they only style elements that carry
   the class, so there is no global leakage (css-conventions §1 intent).
   STATUS: draft — not deployed. Starts with the button system (Phase 2 pilot).
   ===================================================================== */

/* =========================================================
   Button — .ko-btn (base + variants)
   Unifies the scattered buttons: enquiry (#enquiryButton, #E92727 uppercase),
   pdf (.pdf_dwn), catalog submit, ko-button-animate (#E04141 pill),
   ko-so__btn--*, add-to-list ghost (#242424 underline), popup dark (#111/#222).
   ========================================================= */
.ko-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;                 /* touch target */
  padding: 12px 24px;
  font-family: var(--ko-font-family-body);
  font-size: var(--ko-font-size-sm);
  font-weight: var(--ko-font-weight-semibold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--ko-radius-sm);   /* 3px — matches the live send-inquiry button */
  cursor: pointer;
  transition:
    background-color var(--ko-duration-normal) var(--ko-easing-standard),
    color var(--ko-duration-normal) var(--ko-easing-standard),
    border-color var(--ko-duration-normal) var(--ko-easing-standard),
    box-shadow var(--ko-duration-normal) var(--ko-easing-standard),
    transform var(--ko-duration-normal) var(--ko-easing-standard);
}
.ko-btn:focus-visible {
  outline: 2px solid var(--ko-color-focus-ring) !important;  /* sanctioned exception */
  outline-offset: 2px;
}
.ko-btn--block { width: 100%; }

/* Primary — commerce action red, uppercase (enquiry / submit / pdf) */
.ko-btn--primary {
  background: var(--ko-color-action-primary);
  color: var(--ko-color-text-inverse);
  border-color: var(--ko-color-action-primary);
  font-weight: var(--ko-font-weight-medium);   /* 500 — matches #enquiryButton */
  text-transform: uppercase;
  letter-spacing: var(--ko-letter-spacing-wide);
}
.ko-btn--primary:hover {                        /* invert, like the live enquiry hover */
  background: var(--ko-color-surface-page);
  color: var(--ko-color-action-primary);
}
.ko-btn--primary:active { background: var(--ko-color-surface-subtle); }

/* Primary outline — the enquiry hover style (invert) as a static variant */
.ko-btn--primary-outline {
  background: var(--ko-color-surface-page);
  color: var(--ko-color-action-primary);
  border-color: var(--ko-color-action-primary);
  text-transform: uppercase;
  letter-spacing: var(--ko-letter-spacing-wide);
}
.ko-btn--primary-outline:hover {
  background: var(--ko-color-action-primary);
  color: var(--ko-color-text-inverse);
}

/* Brand — marketing pill (ko-button-animate / ko-hb CTA) */
.ko-btn--brand {
  background: var(--ko-color-brand-primary);
  color: var(--ko-color-text-inverse);
  font-weight: var(--ko-font-weight-bold);      /* sharp corners (base 3px), no pill */
}
.ko-btn--brand:hover {
  background: var(--ko-color-brand-primary-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(224, 65, 65, .28);
}
.ko-btn--brand:active { transform: translateY(0); background: var(--ko-color-brand-primary-active); }

/* Ghost — ink, subtle (add-to-list) */
.ko-btn--ghost {
  background: transparent;
  color: var(--ko-color-text-primary);
  border-color: var(--ko-color-border-strong);
}
.ko-btn--ghost:hover {
  border-color: var(--ko-color-text-primary);
  background: var(--ko-color-surface-subtle);
}

/* Dark — flat ink (replaces popup gradients) */
.ko-btn--dark {
  background: var(--ko-color-text-primary);
  color: var(--ko-color-text-inverse);
}
.ko-btn--dark:hover { background: #000; }

/* Sizes */
.ko-btn--sm { min-height: 38px; padding: 8px 16px; font-size: var(--ko-font-size-xs); }
.ko-btn--lg { min-height: 52px; padding: 16px 32px; font-size: var(--ko-font-size-md); }

@media (prefers-reduced-motion: reduce) {
  .ko-btn { transition: none; }
  .ko-btn--brand:hover { transform: none; }
}

/* =====================================================================
   /o-nas/ + homepage benefits — migrated OUT of Customizer Additional CSS.
   Tokenised + sharpened. Scoped under .ko-about-page / .ko-home-benefits.
   On deploy: remove the equivalent "ABOUT PAGE + HOMEPAGE BENEFITS" block
   (sections 1-8) from Customizer -> Additional CSS so this file is the
   single source. Card-radius overrides are 2-class, so they beat the
   per-block custom CSS regardless of load order.
   ===================================================================== */

/* Radii → sharp */
.ko-about-page .ko-about-stat-card,
.ko-about-page .ko-about-benefit-card,
.ko-about-page .ko-about-model-card,
.ko-home-benefits .ko-about-benefit-card { border-radius: var(--ko-radius-md); }
.ko-about-page .ko-about-hero-image,
.ko-about-page .ko-about-location-cta { border-radius: var(--ko-radius-lg); }

/* Contact / heading links */
.ko-about-page .ko-location-contact-lines a { color: var(--ko-color-text-primary); text-decoration: none; font-weight: var(--ko-font-weight-semibold); transition: color var(--ko-duration-normal) var(--ko-easing-standard); }
.ko-about-page .ko-location-contact-lines a:hover { color: var(--ko-color-brand-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ko-about-page .ko-location-heading-link a { color: var(--ko-color-text-primary); text-decoration: none; transition: color var(--ko-duration-normal) var(--ko-easing-standard); }
.ko-about-page .ko-location-heading-link a:hover { color: var(--ko-color-brand-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* Brand button (ko-button-animate) → sharp */
.ko-about-page .ko-button-animate .wp-block-button__link,
.ko-about-page .wp-block-button.ko-button-animate .wp-block-button__link,
.ko-home-benefits .wp-block-button.ko-button-animate .wp-block-button__link {
  background: var(--ko-color-brand-primary);
  color: var(--ko-color-text-inverse);
  border-radius: var(--ko-radius-sm);
  box-shadow: none;
  transition: background-color var(--ko-duration-normal) var(--ko-easing-standard), transform var(--ko-duration-normal) var(--ko-easing-standard);
}
.ko-about-page .ko-button-animate .wp-block-button__link:hover,
.ko-about-page .wp-block-button.ko-button-animate .wp-block-button__link:hover,
.ko-home-benefits .wp-block-button.ko-button-animate .wp-block-button__link:hover { background: var(--ko-color-brand-primary-hover); transform: translateY(-1px); }
.ko-about-page .ko-button-animate .wp-block-button__link:active,
.ko-home-benefits .wp-block-button.ko-button-animate .wp-block-button__link:active { transform: translateY(0); }

/* Card hovers */
.ko-about-page .ko-about-stat-card,
.ko-about-page .ko-about-benefit-card,
.ko-about-page .ko-about-model-card,
.ko-home-benefits .ko-about-benefit-card {
  transition: transform var(--ko-duration-normal) var(--ko-easing-standard), box-shadow var(--ko-duration-normal) var(--ko-easing-standard), border-color var(--ko-duration-normal) var(--ko-easing-standard);
}
.ko-about-page .ko-about-benefit-card:hover,
.ko-home-benefits .ko-about-benefit-card:hover { transform: translateY(-4px); box-shadow: var(--ko-shadow-lg); border-color: var(--ko-color-brand-tint); }
.ko-about-page .ko-about-stat-card:hover { transform: translateY(-4px); box-shadow: var(--ko-shadow-lg); border-top-color: var(--ko-color-brand-primary); border-left-color: var(--ko-color-brand-primary); }
.ko-about-page .ko-about-model-card:hover { transform: translateY(-3px); box-shadow: var(--ko-shadow-lg); border-left-color: var(--ko-color-brand-primary); }

/* Model number badge — kept circular */
.ko-about-page .ko-about-model-badge { background: var(--ko-color-brand-primary); color: var(--ko-color-text-inverse); border-radius: var(--ko-radius-pill); font-weight: var(--ko-font-weight-bold); }

/* Google review badge — flat, sharp, tokenised */
.ko-about-page .ko-google-review-badge { background: var(--ko-color-surface-page); border: 1px solid var(--ko-color-brand-tint); border-left: 4px solid var(--ko-color-brand-primary); border-radius: var(--ko-radius-md); box-shadow: var(--ko-shadow-md); transition: transform var(--ko-duration-normal) var(--ko-easing-standard), box-shadow var(--ko-duration-normal) var(--ko-easing-standard); }
.ko-about-page .ko-google-review-badge:hover { transform: translateY(-3px); box-shadow: var(--ko-shadow-lg); }
.ko-about-page .ko-google-rating { color: var(--ko-color-text-primary); }
.ko-about-page .ko-google-divider { color: var(--ko-color-border-strong); }
.ko-about-page .ko-google-review-count { color: var(--ko-color-text-muted); }
.ko-about-page .ko-google-stars .full { color: #F4B400; } /* Google gold — external, literal */
.ko-google-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 20px; height: 20px; }
.ko-google-svg { display: block; width: 20px; height: 20px; }
.ko-google-review-inner { display: flex; align-items: center; gap: 8px; }