/*
KAKK Design System v0.1.3
Elementor compatibility adapter.

Purpose:
- Keep Elementor as the editing shell.
- Keep KAKK Design System as the design authority.
- Restore KAKK layout, spacing, typography, cards, and buttons inside Elementor pages.
*/

/* ---------------------------------------------------------
   Elementor-safe replacement for .container
   --------------------------------------------------------- */

.kakk-container {
  width: min(100% - calc(var(--container-padding) * 2), var(--container-max));
  margin-inline: auto;
}

/* ---------------------------------------------------------
   Neutralise Elementor container defaults inside KAKK pages
   --------------------------------------------------------- */

.elementor .kakk-page .e-con {
  --container-default-padding-top: 0px;
  --container-default-padding-right: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
  --widgets-spacing: 0px;
  --widgets-spacing-row: 0px;
  --widgets-spacing-column: 0px;
}

/* KAKK page shell: Elementor adapter scope */
.elementor .kakk-page.e-con {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* ---------------------------------------------------------
   KAKK structural containers
   --------------------------------------------------------- */

.elementor .kakk-page .kakk-container {
  width: min(100% - calc(var(--container-padding) * 2), var(--container-max)) !important;
  margin-inline: auto !important;
  padding: 0 !important;
}

.elementor .kakk-page .section,
.elementor .kakk-page .section-sm,
.elementor .kakk-page .section-lg,
.elementor .kakk-page .hero {
  flex-direction: column;
}

.elementor .kakk-page .stack,
.elementor .kakk-page .stack-sm,
.elementor .kakk-page .stack-lg,
.elementor .kakk-page .cluster,
.elementor .kakk-page .cluster-between {
  padding: 0 !important;
}

/* ---------------------------------------------------------
   Restore KAKK grid helpers over Elementor flexbox
   --------------------------------------------------------- */

.elementor .kakk-page .hero-panel {
  display: grid !important;
  gap: var(--space-8) !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr) !important;
  align-items: center !important;
  padding: 0 !important;
}

.elementor .kakk-page .grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--space-6) !important;
  padding: 0 !important;
}

.elementor .kakk-page .grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--space-6) !important;
  padding: 0 !important;
}

.elementor .kakk-page .grid-auto {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) !important;
  gap: var(--space-6) !important;
  padding: 0 !important;
}

/* ---------------------------------------------------------
   Restore KAKK stack and cluster behavior
   --------------------------------------------------------- */

.elementor .kakk-page .stack > * + * {
  margin-top: var(--space-4) !important;
}

.elementor .kakk-page .stack-sm > * + * {
  margin-top: var(--space-2) !important;
}

.elementor .kakk-page .stack-lg > * + * {
  margin-top: var(--space-8) !important;
}

.elementor .kakk-page .cluster {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--space-3) !important;
}

.elementor .kakk-page .cluster-between {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-4) !important;
}

/* ---------------------------------------------------------
   Restore KAKK section spacing
   --------------------------------------------------------- */

.elementor .kakk-page .section {
  padding-block: var(--space-16) !important;
}

.elementor .kakk-page .section-sm {
  padding-block: var(--space-8) !important;
}

.elementor .kakk-page .section-lg {
  padding-block: var(--space-20) !important;
}

.elementor .kakk-page .hero {
  padding-block: var(--space-20) !important;
}

/* ---------------------------------------------------------
   Restore KAKK typography over Hello/Elementor defaults
   --------------------------------------------------------- */

.elementor .kakk-page h1,
.elementor .kakk-page h2,
.elementor .kakk-page h3,
.elementor .kakk-page h4,
.elementor .kakk-page h5,
.elementor .kakk-page h6 {
  color: var(--color-heading) !important;
  font-family: var(--font-display) !important;
  line-height: var(--leading-heading) !important;
}

.elementor .kakk-page h1 {
  font-size: clamp(2.25rem, 4vw, var(--text-4xl)) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
}

.elementor .kakk-page h2 {
  font-size: clamp(1.75rem, 3vw, var(--text-3xl)) !important;
  letter-spacing: -0.025em !important;
}

.elementor .kakk-page h3 {
  font-size: var(--text-2xl) !important;
  letter-spacing: -0.015em !important;
}

.elementor .kakk-page p {
  font-family: var(--font-body);
}

.elementor .kakk-page .lead {
  color: var(--kakk-muted) !important;
  font-size: var(--text-lg) !important;
  line-height: var(--leading-body) !important;
}

.elementor .kakk-page .eyebrow {
  color: var(--kakk-brown) !important;
  font-family: var(--font-display) !important;
  font-size: var(--text-xs) !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  line-height: 1.2 !important;
  margin: 0 0 var(--space-2) !important;
  text-transform: uppercase !important;
}

.elementor .kakk-page .measure {
  max-width: 68ch !important;
}

.elementor .kakk-page .measure-narrow {
  max-width: 55ch !important;
}

/* ---------------------------------------------------------
   Restore KAKK cards over Elementor flexbox defaults
   --------------------------------------------------------- */

.elementor .kakk-page .card {
  background: var(--color-surface) !important;
  border: var(--border-thin) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: var(--space-6) !important;
}

.elementor .kakk-page .card-feature {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-md) !important;
  padding: var(--space-8) !important;
}

.elementor .kakk-page .card-eco {
  border-color: rgba(104, 120, 72, 0.38) !important;
  background: #fffdf4 !important;
}

.elementor .kakk-page .card-brown {
  border-color: rgba(88, 56, 40, 0.32) !important;
  background: #fffaf4 !important;
}

.elementor .kakk-page .card > :last-child {
  margin-bottom: 0 !important;
}

.elementor .kakk-page .card-kicker {
  color: var(--kakk-brown) !important;
  font-family: var(--font-display) !important;
  font-size: var(--text-xs) !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  margin: 0 0 var(--space-2) !important;
  text-transform: uppercase !important;
}

.elementor .kakk-page .card-title {
  color: var(--color-heading) !important;
  font-family: var(--font-display) !important;
  font-size: var(--text-xl) !important;
  font-weight: 800 !important;
  line-height: var(--leading-heading) !important;
  margin: 0 0 var(--space-3) !important;
}

.elementor .kakk-page .card-text {
  color: var(--kakk-muted) !important;
  margin: 0 !important;
}

/* ---------------------------------------------------------
   Restore KAKK buttons over theme link defaults
   --------------------------------------------------------- */

.elementor .kakk-page .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--space-2) !important;
  min-height: 2.75rem !important;
  padding: var(--space-3) var(--space-5) !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display) !important;
  font-size: var(--text-sm) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.elementor .kakk-page .btn-large {
  min-height: 3.25rem !important;
  padding: var(--space-4) var(--space-6) !important;
  font-size: var(--text-base) !important;
}

.elementor .kakk-page .btn-primary,
.elementor .kakk-page .btn-primary:hover {
  background: var(--kakk-navy) !important;
  color: #ffffff !important;
}

.elementor .kakk-page .btn-primary:hover {
  background: var(--kakk-navy-dark) !important;
}

.elementor .kakk-page .btn-ghost {
  background: transparent !important;
  color: var(--kakk-navy-dark) !important;
  border-color: var(--color-border-strong) !important;
}

.elementor .kakk-page .btn-ghost:hover {
  background: rgba(25, 52, 87, 0.06) !important;
  color: var(--kakk-navy-dark) !important;
}

/* ---------------------------------------------------------
   Image behavior
   --------------------------------------------------------- */

.elementor .kakk-page img,
.elementor .kakk-page svg,
.elementor .kakk-page video,
.elementor .kakk-page canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------
   Responsive behavior mirrors KAKK layout.css
   --------------------------------------------------------- */

@media (max-width: 64rem) {
  .elementor .kakk-page .hero-panel {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 48rem) {
  .elementor .kakk-page .section {
    padding-block: var(--space-8) !important;
  }

  .elementor .kakk-page .section-lg,
  .elementor .kakk-page .hero {
    padding-block: var(--space-12) !important;
  }

  .elementor .kakk-page .grid-2,
  .elementor .kakk-page .grid-3 {
    grid-template-columns: 1fr !important;
    gap: var(--space-4) !important;
  }

  .elementor .kakk-page .card,
  .elementor .kakk-page .card-feature {
    padding: var(--space-4) !important;
  }
}

.elementor .kakk-page .logo-mark-card {
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

.elementor .kakk-page .logo-mark {
  display: block !important;
  max-inline-size: 100% !important;
  block-size: auto !important;
  object-fit: contain !important;
}

/* KAKK / Elementor text colour baseline */

.elementor .kakk-page {
  color: var(--color-text) !important;
}

.elementor .kakk-page .elementor-widget-text-editor {
  color: var(--color-text) !important;
}

/* Restore KAKK font-weight system inside Elementor */

.elementor .kakk-page h1,
.elementor .kakk-page h2 {
  font-weight: var(--weight-extrabold) !important;
}

.elementor .kakk-page h3,
.elementor .kakk-page h4,
.elementor .kakk-page h5,
.elementor .kakk-page h6 {
  font-weight: var(--weight-bold) !important;
}

.elementor .kakk-page .eyebrow,
.elementor .kakk-page .card-kicker,
.elementor .kakk-page .btn,
.elementor .kakk-page .badge {
  font-weight: var(--weight-extrabold) !important;
}

.elementor .kakk-page .card-title {
  font-weight: var(--weight-extrabold) !important;
}

/* 1. Restore KAKK body typography inside Elementor text widgets */

.elementor .kakk-page .elementor-widget-text-editor {
  font-family: var(--font-body) !important;
  font-weight: var(--weight-regular, 400) !important;
  line-height: var(--leading-body) !important;
}


/* 2. Scope card-feature centering to the hero only */

.elementor .kakk-page .hero .card-feature {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* KAKK / Elementor — card text lists */

.elementor .kakk-page .card-text ul {
  margin: var(--space-3) 0 0 !important;
  padding-left: 1.25rem !important;
}

.elementor .kakk-page .card-text li + li {
  margin-top: var(--space-2) !important;
}

/* KAKK / Elementor — dark surface typography */

.elementor .kakk-page .surface-navy {
  color: #ffffff !important;
}

.elementor .kakk-page .surface-navy h1,
.elementor .kakk-page .surface-navy h2,
.elementor .kakk-page .surface-navy h3,
.elementor .kakk-page .surface-navy h4,
.elementor .kakk-page .surface-navy h5,
.elementor .kakk-page .surface-navy h6 {
  color: #ffffff !important;
}

.elementor .kakk-page .surface-navy p {
  color: #ffffff !important;
}

.elementor .kakk-page .surface-navy .lead {
  color: rgba(255, 255, 255, 0.9) !important;
}

.elementor .kakk-page .surface-navy .eyebrow {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* KAKK / Elementor — dark surface ghost button */

.elementor .kakk-page .surface-navy .btn-ghost {
  border-color: rgba(255, 255, 255, 0.52) !important;
  color: #ffffff !important;
}

.elementor .kakk-page .surface-navy .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}