/* =========================================
   1. Tokens
   Desktop values as base
   Tablet and mobile override inside media queries
========================================= */

:root {
  /* Spacing tokens */
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 40px;
  --space-7: 60px;
  --space-8: 80px;

  /* Content width */
  --ck-content-max-width: 1360px;

  /* Heading sizes desktop */
  --heading-hero-size: 48px;
  --heading-page-size: 40px;
  --heading-section-size: 32px;
  --heading-subsection-size: 24px;
  --heading-label-size: 16px;

  /* Script accent desktop */
  --heading-script-size: 34px;

  /* Radius tokens */
  --radius-none: 0;
  --radius-xs: 3px;
  --radius-sm: 10px;
  --radius-md: 24px;
  --radius-lg: 50px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --radius-input: 30px;

  /* Border tokens */
  --border-width-hairline: 1px;
  --border-width-strong: 2px;

  --border-color-subtle: rgb(224, 224, 224);
  --border-color-accent: rgb(223, 175, 38);
  --border-color-success: rgb(73, 178, 88);
  --border-color-error: #cc0000; /* adjust to theme */

   /* Surfaces */
  --ck-surface-soft: rgb(250, 247, 242); /* warm neutral for soft cards */
}

/* Tablet: 768–1024px */
@media (max-width: 1024px) {
  :root {
    --space-1: 6px;
    --space-2: 9px;
    --space-3: 12px;
    --space-4: 18px;
    --space-5: 24px;
    --space-6: 30px;
    --space-7: 45px;
    --space-8: 60px;

    --heading-hero-size: 38px;
    --heading-page-size: 34px;
    --heading-section-size: 28px;
    --heading-subsection-size: 22px;
    --heading-label-size: 14px;

    --heading-script-size: 28px;
  }
}

/* Mobile: up to 767px */
@media (max-width: 767px) {
  :root {
    --space-1: 4px;
    --space-2: 6px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 20px;
    --space-7: 30px;
    --space-8: 40px;

    --heading-hero-size: 30px;
    --heading-page-size: 26px;
    --heading-section-size: 22px;
    --heading-subsection-size: 18px;
    --heading-label-size: 13px;

    --heading-script-size: 24px;
  }
}

/* =========================================
   2. Page container and gutters
========================================= */

/* Wrap main content inside this container when needed */
.ck-page-inner {
  max-width: var(--ck-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* Header and footer inner wrappers follow same side padding */
.ck-header-inner,
.ck-footer-inner {
  max-width: var(--ck-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* Tablet */
@media (max-width: 1024px) {
  .ck-page-inner,
  .ck-header-inner,
  .ck-footer-inner {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .ck-page-inner,
  .ck-header-inner,
  .ck-footer-inner {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* =========================================
   3. Section helpers
   Apply to outer Elementor sections or containers
========================================= */

/* Base section */
.ck-section {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

/* Hero section: more presence */
.ck-section-hero {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

/* Standard section */
.ck-section-standard {
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

/* Compact section, for logos or slim callouts */
.ck-section-compact {
  padding-top: var(--space-5);
  padding-bottom: var(--space-5);
}

/* Inner content to keep alignment with header/footer */
.ck-section-inner {
  max-width: var(--ck-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* Tablet adjustments */
@media (max-width: 1024px) {
  .ck-section-hero {
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
  }

  .ck-section-standard {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .ck-section-compact {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }

  .ck-section-inner {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .ck-section-hero {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .ck-section-standard {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .ck-section-compact {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
  }

  .ck-section-inner {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* =========================================
   4. Grids and column gaps
========================================= */

/* Generic flex grid */
.ck-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
}

/* Two columns on desktop, wrap on smaller screens */
.ck-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-5);
  row-gap: var(--space-5);
}

/* Three columns on desktop */
.ck-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-5);
  row-gap: var(--space-5);
}

/* Logo grid, more compact gaps */
.ck-logo-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--space-4);
  row-gap: var(--space-3);
  align-items: center;
}

/* Tablet grid adjustments */
@media (max-width: 1024px) {
  .ck-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-4);
  }

  .ck-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-4);
  }

  .ck-logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--space-3);
    row-gap: var(--space-3);
  }
}

/* Mobile grid adjustments */
@media (max-width: 767px) {
  .ck-grid-2,
  .ck-grid-3 {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: var(--space-4);
  }

  .ck-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-3);
    row-gap: var(--space-2);
  }
}

/* =========================================
   5. Typography helpers
========================================= */

/* Long-form body text */
.ck-body,
.ck-calm-body {
  font-family: "Merriweather", "Georgia", serif;
  font-size: 16px;
  line-height: 1.7;
}

/* Text block spacing */
.ck-text-block p {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.ck-text-block p:last-child {
  margin-bottom: 0;
}

/* Headings by role */

/* Hero title */
.ck-hero-title {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: var(--heading-hero-size);
  line-height: 1.1;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* Page title, used for main page heading */
.ck-page-title {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: var(--heading-page-size);
  line-height: 1.2;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* Section title */
.ck-section-title {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: var(--heading-section-size);
  line-height: 1.3;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* Subsection title, inside cards or inner groups */
.ck-subsection-title {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: var(--heading-subsection-size);
  line-height: 1.3;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* Eyebrow or label above a heading */
.ck-heading-label {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: var(--heading-label-size);
  line-height: 1.4;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0;
  margin-bottom: var(--space-2);
}

/* Script accent heading */
.ck-heading-script {
  font-family: "Allison", "Brush Script MT", cursive;
  font-size: var(--heading-script-size);
  line-height: 1.3;
  font-weight: 400;
  margin-top: 0;
  margin-bottom: var(--space-2);
}

/* =========================================
   6. Card helpers
========================================= */

.ck-card {
   border-radius: var(--radius-md);
  background-color: #ffffff;
  padding: var(--space-4);
}

/* Soft card for feature content on B2B and front page */
/* Soft card for feature content on B2B and front page */
.ck-card-soft {
  border-radius: var(--radius-md);
  background-color: var(--ck-surface-soft);
  padding: var(--space-5);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

/* Hero card on contact and B2B intro */
.ck-card-hero {
  border-radius: var(--radius-lg);
  background-color: #ffffff;
  padding: var(--space-6);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.09);
}

/* Card inner structure */
.ck-card-header {
  margin-bottom: var(--space-3);
}

.ck-card-body {
  margin-bottom: var(--space-4);
}

.ck-card-body:last-child {
  margin-bottom: 0;
}

/* Button spacing inside cards */
.ck-card .elementor-button,
.ck-card-soft .elementor-button,
.ck-card-hero .elementor-button {
  margin-top: var(--space-4);
}

/* Tablet card padding */
@media (max-width: 1024px) {
  .ck-card {
    padding: var(--space-4);
  }

  .ck-card-soft {
    padding: var(--space-4);
  }

  .ck-card-hero {
    padding: var(--space-5);
  }
}

/* Mobile card padding */
@media (max-width: 767px) {
  .ck-card {
    padding: var(--space-3);
  }

  .ck-card-soft {
    padding: var(--space-3);
  }

  .ck-card-hero {
    padding: var(--space-4);
  }
}

/* =========================================
   7. Media blocks
========================================= */

/* Generic media wrapper to keep rounded visuals consistent */
.ck-media-rounded {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Square ratio media (for videos or images) */
.ck-media-square {
  position: relative;
  width: 100%;
  padding-top: 100%;
}

.ck-media-square > iframe,
.ck-media-square > video,
.ck-media-square > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
   8. Utility spacing helpers
========================================= */

/* Vertical margin utilities */

.ck-mb-1 { margin-bottom: var(--space-1); }
.ck-mb-2 { margin-bottom: var(--space-2); }
.ck-mb-3 { margin-bottom: var(--space-3); }
.ck-mb-4 { margin-bottom: var(--space-4); }
.ck-mb-5 { margin-bottom: var(--space-5); }
.ck-mb-6 { margin-bottom: var(--space-6); }
.ck-mb-7 { margin-bottom: var(--space-7); }
.ck-mb-8 { margin-bottom: var(--space-8); }

/* Horizontal padding utilities */

.ck-px-4 {
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.ck-px-5 {
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.ck-px-6 {
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* Form wrapper */
.ck-form {
  width: 100%;
  max-width: 480px; /* adjust per context */
}

/* Single field group */
.ck-form-field {
  margin-bottom: var(--space-3);
}

/* Mobile: slightly tighter spacing between fields */
@media (max-width: 767px) {
  .ck-form-field {
    margin-bottom: var(--space-2);
  }
}

/* Label */
.ck-form-label {
  display: block;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--space-1);
}

/* Text inputs and selects */
.ck-form-input,
.ck-form-select {
  width: 100%;
  padding: 10px var(--space-3);
  border-radius: var(--radius-input);
  border: var(--border-width-hairline) solid var(--border-color-subtle);
  background-color: #ffffff;
  font-size: 16px;
  line-height: 1.4;
}

/* Textarea */
.ck-form-textarea {
  width: 100%;
  padding: 10px var(--space-3);
  border-radius: var(--radius-input);
  border: var(--border-width-hairline) solid var(--border-color-subtle);
  background-color: #ffffff;
  font-size: 16px;
  line-height: 1.4;
  min-height: 120px;
  resize: vertical;
}

/* Focus state */
.ck-form-input:focus,
.ck-form-select:focus,
.ck-form-textarea:focus {
  outline: none;
  border-color: var(--border-color-accent);
  box-shadow: 0 0 0 1px rgba(223, 175, 38, 0.3);
}

/* Help text */
.ck-form-help {
  margin-top: var(--space-1);
  font-size: 14px;
  line-height: 1.4;
  color: #666666;
}

/* Error message */
.ck-form-error {
  margin-top: var(--space-1);
  font-size: 14px;
  line-height: 1.4;
  color: var(--border-color-error);
}

/* Success message block */
.ck-form-success {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: var(--border-width-hairline) solid var(--border-color-success);
  background-color: rgba(73, 178, 88, 0.08);
  font-size: 14px;
  line-height: 1.4;
}

/* Two fields in one row */
.ck-form-row-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-4);
}

/* Tablet and below: stack fields */
@media (max-width: 1024px) {
  .ck-form-row-2 {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-3);
  }
}

/* =========================================
   9. Contact Form 7 x Chocokoo
   Apply when the CF7 form tag has class="ck-form"
========================================= */

/* Form wrapper */
.wpcf7 form.ck-form {
  width: 100%;
  max-width: 480px; /* adjust per context if needed */
}

/* Reset default CF7 paragraph spacing inside design system forms */
.wpcf7 form.ck-form p {
  margin: 0;
}

/* Field group spacing */
.wpcf7 form.ck-form .ck-form-field {
  margin-bottom: var(--space-3);
}

@media (max-width: 767px) {
  .wpcf7 form.ck-form .ck-form-field {
    margin-bottom: var(--space-2);
  }
}

/* Label */
.wpcf7 form.ck-form .ck-form-label,
.wpcf7 form.ck-form label {
  display: block;
  font-family: "Montserrat", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--space-1);
}

/* Text inputs and selects */
.wpcf7 form.ck-form input[type="text"],
.wpcf7 form.ck-form input[type="email"],
.wpcf7 form.ck-form input[type="tel"],
.wpcf7 form.ck-form input[type="url"],
.wpcf7 form.ck-form select {
  width: 100%;
  padding: 10px var(--space-3);
  border-radius: var(--radius-input);
  border: var(--border-width-hairline) solid var(--border-color-subtle);
  background-color: #ffffff;
  font-size: 16px;
  line-height: 1.4;
  box-sizing: border-box;
}

/* Textarea */
.wpcf7 form.ck-form textarea {
  width: 100%;
  padding: 10px var(--space-3);
  border-radius: var(--radius-input);
  border: var(--border-width-hairline) solid var(--border-color-subtle);
  background-color: #ffffff;
  font-size: 16px;
  line-height: 1.4;
  min-height: 120px;
  resize: vertical;
  box-sizing: border-box;
}

/* Focus state */
.wpcf7 form.ck-form input[type="text"]:focus,
.wpcf7 form.ck-form input[type="email"]:focus,
.wpcf7 form.ck-form input[type="tel"]:focus,
.wpcf7 form.ck-form input[type="url"]:focus,
.wpcf7 form.ck-form select:focus,
.wpcf7 form.ck-form textarea:focus {
  outline: none;
  border-color: var(--border-color-accent);
  box-shadow: 0 0 0 1px rgba(223, 175, 38, 0.3);
}

/* Help text (optional span under field) */
.wpcf7 form.ck-form .ck-form-help {
  margin-top: var(--space-1);
  font-size: 14px;
  line-height: 1.4;
  color: #666666;
}

/* Field error text from CF7 (under invalid field) */
.wpcf7 form.ck-form .wpcf7-not-valid-tip,
.wpcf7 form.ck-form .ck-form-error {
  margin-top: var(--space-1);
  font-size: 14px;
  line-height: 1.4;
  color: var(--border-color-error);
}

/* Global response message (success or error) */
.wpcf7 form.ck-form .wpcf7-response-output {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.4;
}

/* Success state hint */
.wpcf7 form.ck-form .wpcf7-mail-sent-ok {
  border: var(--border-width-hairline) solid var(--border-color-success);
  background-color: rgba(73, 178, 88, 0.08);
}

/* Error state hint */
.wpcf7 form.ck-form .wpcf7-validation-errors,
.wpcf7 form.ck-form .wpcf7-acceptance-missing {
  border: var(--border-width-hairline) solid var(--border-color-error);
  background-color: rgba(204, 0, 0, 0.05);
}

/* =========================================
   Chocokoo Design System x Elementor compatibility
   Supports traditional Elementor widgets and Atomic elements.
========================================= */

/* Keep Atomic base neutral. Component classes define real layout and spacing. */
.elementor .e-flexbox-base {
  box-sizing: border-box;
}

/* Sections */
.elementor .ck-section-standard.e-con,
.elementor .ck-section-standard.e-flexbox-base,
.elementor .ck-section-standard {
  width: 100%;
  padding-top: var(--space-7);
  padding-bottom: var(--space-7);
}

/* Inner section wrapper */
.elementor .ck-section-inner.e-con,
.elementor .ck-section-inner.e-flexbox-base,
.elementor .ck-section-inner {
  width: 100%;
  max-width: var(--ck-content-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* Three-column grid */
.elementor .ck-grid-3.e-con,
.elementor .ck-grid-3.e-flexbox-base,
.elementor .ck-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-5);
  row-gap: var(--space-5);
  padding: 0;
}

/* Soft cards */
.elementor .ck-card-soft.e-con,
.elementor .ck-card-soft.e-flexbox-base,
.elementor .ck-card-soft {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: var(--radius-md);
  background-color: var(--ck-surface-soft);
  padding: var(--space-5);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
}

/* Section headings, Atomic and traditional */
.elementor .ck-section-title.e-heading-base,
.elementor .ck-section-title .elementor-heading-title {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: var(--heading-section-size);
  line-height: 1.3;
  font-weight: 500;
  margin: 0 0 var(--space-3);
}

/* Subsection headings, Atomic and traditional */
.elementor .ck-subsection-title.e-heading-base,
.elementor .ck-subsection-title .elementor-heading-title {
  font-family: "Montserrat", Arial, sans-serif;
  font-size: var(--heading-subsection-size);
  line-height: 1.3;
  font-weight: 500;
  margin: 0 0 var(--space-3);
}

/* Body text, Atomic and traditional */
.elementor .ck-body,
.elementor .ck-body .elementor-widget-container,
.elementor .ck-body.e-paragraph-base {
  font-family: "Merriweather", Georgia, serif;
  font-size: 16px;
  line-height: 1.7;
}

/* Text block spacing, traditional text editor and Atomic paragraph */
.elementor .ck-text-block p,
.elementor p.ck-text-block,
.elementor .e-paragraph-base.ck-text-block {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

.elementor .ck-text-block p:last-child,
.elementor p.ck-text-block:last-child,
.elementor .e-paragraph-base.ck-text-block:last-child {
  margin-bottom: 0;
}

/* Card button spacing */
.elementor .ck-card .elementor-button,
.elementor .ck-card-soft .elementor-button,
.elementor .ck-card-hero .elementor-button {
  margin-top: var(--space-4);
}

/* Tablet */
@media (max-width: 1024px) {
  .elementor .ck-section-standard.e-con,
  .elementor .ck-section-standard.e-flexbox-base,
  .elementor .ck-section-standard {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .elementor .ck-section-inner.e-con,
  .elementor .ck-section-inner.e-flexbox-base,
  .elementor .ck-section-inner {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  .elementor .ck-grid-3.e-con,
  .elementor .ck-grid-3.e-flexbox-base,
  .elementor .ck-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-4);
  }

  .elementor .ck-card-soft.e-con,
  .elementor .ck-card-soft.e-flexbox-base,
  .elementor .ck-card-soft {
    padding: var(--space-4);
  }
}

/* Mobile */
@media (max-width: 767px) {
  .elementor .ck-section-standard.e-con,
  .elementor .ck-section-standard.e-flexbox-base,
  .elementor .ck-section-standard {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }

  .elementor .ck-section-inner.e-con,
  .elementor .ck-section-inner.e-flexbox-base,
  .elementor .ck-section-inner {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .elementor .ck-grid-3.e-con,
  .elementor .ck-grid-3.e-flexbox-base,
  .elementor .ck-grid-3 {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: var(--space-4);
  }

  .elementor .ck-card-soft.e-con,
  .elementor .ck-card-soft.e-flexbox-base,
  .elementor .ck-card-soft {
    padding: var(--space-3);
  }
}