/* ============================================================
   Captino Builder — Core Stylesheet
   Hosted on CDN: https://cdn.captino.io/files/core-grapes.css

   This stylesheet provides default styles for all Captino
   builder components. Deployed funnel pages and the editor
   canvas both load this via <link>, so updates here propagate
   globally without requiring users to re-save their funnels.

   Theme variables (--accent-*, --font-*, --border-radius-*)
   are set per-funnel as :root overrides. The defaults below
   are sensible fallbacks for when no overrides are present.
============================================================ */

/* ── Fonts ──────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@400;500;700&family=Lora:wght@400;500;700&family=Manrope:wght@400;500;700&family=Merriweather:wght@400;500;700&family=Montserrat:wght@400;500;700&family=Nunito:wght@400;500;700&family=Open+Sans:wght@400;500;700&family=Outfit:wght@400;500;700&family=Playfair+Display:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;700&family=Poppins:wght@400;500;700&family=Roboto:wght@400;500;700&family=Work+Sans:wght@400;500;700&display=swap");

/* ── Theme defaults ─────────────────────────────────── */

:root {
  --accent-primary: #7581f0;
  --accent-secondary: #1d1a18;
  --accent-foreground: #ffffff;
  --page-bg: #ffffff;

  --font-family: "Inter", "Outfit", system-ui, sans-serif;
  /* Heading font falls through to body font unless overridden by the
     Body → Heading font trait. */
  --heading-font-family: var(--font-family);
  --font-size-small: 14px;
  --font-size-base: 16px;
  --font-size-medium: 24px;
  --font-size-large: 40px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --border-radius-small: 8px;
  --border-radius-medium: 16px;
  --border-radius-large: 999px;

  /* Section spacing — overridden by Body → Section spacing preset. */
  --section-padding-y: 48px;
  --section-padding-x: 24px;

  /* Button base — overridden by Body → Button style preset. */
  --button-bg: var(--accent-primary);
  --button-color: var(--accent-foreground);
  --button-border-color: transparent;
  --button-border-width: 0px;
}

/* ── Page base ──────────────────────────────────────── */

body {
  margin: 0;
  padding: 0;
  background-color: var(--page-bg);
  font-family: var(--font-family);
  color: var(--accent-secondary);
  line-height: 1.4;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Section (top-level layout wrapper) ────────────── */

.cap-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: var(--section-padding-y) var(--section-padding-x);
}

/* Content max-width variants */
.cap-section--max-sm { max-width: 640px; margin-left: auto; margin-right: auto; }
.cap-section--max-md { max-width: 768px; margin-left: auto; margin-right: auto; }
.cap-section--max-lg { max-width: 960px; margin-left: auto; margin-right: auto; }
.cap-section--max-xl { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* Children of a section stretch to fill */
.cap-section > * {
  width: 100%;
}

/* ── Stack (layout container) ───────────────────────── */

.cap-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: start;
  gap: 16px;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* Tablet+: collapsible rows become vertical */
@media (max-width: 992px) {
  .cap-stack--collapse {
    flex-direction: column !important;
  }
}

/* ── Button ─────────────────────────────────────────── */

.cap-button {
  display: inline-block;
  padding: 12px 32px;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s;
  background-color: var(--button-bg);
  color: var(--button-color);
  border: var(--button-border-width) solid var(--button-border-color);
  border-radius: var(--border-radius-large);
}

.cap-button:hover {
  opacity: 0.85;
}

.cap-button--secondary {
  background-color: var(--accent-secondary);
  color: var(--accent-foreground);
}

.cap-button--outline {
  background-color: transparent;
  color: var(--accent-primary);
  border: 2px solid var(--accent-primary);
}

.cap-button--ghost {
  background-color: transparent;
  color: var(--accent-secondary);
  padding: 12px 16px;
}

.cap-button--ghost:hover {
  opacity: 0.6;
}

/* Corner overrides */

.cap-button--rounded {
  border-radius: var(--border-radius-small);
}

.cap-button--square {
  border-radius: 0;
}

/* ── Text ───────────────────────────────────────────── */

.cap-text {
  margin: 0;
  padding: 0;
  color: var(--accent-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: 1.6;
  letter-spacing: 0;
}

.cap-text--title {
  font-family: var(--heading-font-family);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.cap-text--subtitle {
  font-family: var(--heading-font-family);
  font-size: var(--font-size-medium);
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.cap-text--small {
  font-size: var(--font-size-small);
  line-height: 1.5;
}

.cap-text--quote {
  font-size: calc(var(--font-size-base) + 4px);
  font-style: italic;
  line-height: 1.6;
  border-left: 4px solid var(--accent-primary);
  padding-left: 16px;
}

/* ── Image ──────────────────────────────────────────── */

.cap-image {
  width: 100%;
  line-height: 0;
}

.cap-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.cap-image--rounded {
  border-radius: var(--border-radius-medium);
  overflow: hidden;
}

.cap-image--round-lg {
  border-radius: var(--border-radius-large);
  overflow: hidden;
}

.cap-image--circle {
  border-radius: 50%;
  overflow: hidden;
}

/* Sizing */
.cap-image--fill img {
  object-fit: fill;
}

.cap-image--contain img {
  object-fit: contain;
}

.cap-image--fixed img {
  width: auto;
  height: auto;
  max-width: 100%;
}

/* ── Video ──────────────────────────────────────────── */

.cap-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  background-color: #000;
  border-radius: var(--border-radius-small);
  overflow: hidden;
}

.cap-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.cap-video--4-3 {
  padding-bottom: 75%;
}

.cap-video--1-1 {
  padding-bottom: 100%;
}

/* ── Bullet list ────────────────────────────────────── */

.cap-bullet-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--accent-secondary);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.6;
}

.cap-bullet-item {
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
}

.cap-bullet-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-primary);
}

/* Checkmark marker */
.cap-bullet-list--check .cap-bullet-item::before {
  content: "\2713";
  width: auto;
  height: auto;
  top: 0;
  border-radius: 0;
  background: none;
  color: var(--accent-primary);
  font-weight: var(--font-weight-bold);
  font-size: 1em;
  line-height: 1.6;
}

/* Arrow marker */
.cap-bullet-list--arrow .cap-bullet-item::before {
  content: "\2192";
  width: auto;
  height: auto;
  top: 0;
  border-radius: 0;
  background: none;
  color: var(--accent-primary);
  font-weight: var(--font-weight-medium);
  font-size: 1em;
  line-height: 1.6;
}

/* ── Input ──────────────────────────────────────────── */

.cap-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-family);
  width: 100%;
}

.cap-input__label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-medium);
  color: var(--accent-secondary);
}

.cap-input__field {
  padding: 10px 14px;
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--accent-secondary);
  background-color: #ffffff;
  border: 1px solid #d4d4d4;
  border-radius: var(--border-radius-small);
  outline: none;
  transition: border-color 0.15s;
}

.cap-input__field::placeholder {
  color: #a3a3a3;
}

.cap-input__field:focus {
  border-color: var(--accent-primary);
}

/* ── Checkbox ───────────────────────────────────────── */

.cap-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--accent-secondary);
  cursor: pointer;
  line-height: 1.4;
}

.cap-checkbox__input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.cap-checkbox__label {
  user-select: none;
}

/* ── Modal ──────────────────────────────────────────── */

.cap-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.cap-modal.cap-modal--open {
  display: flex;
}

.cap-modal__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 32px;
  background-color: var(--page-bg, #ffffff);
  border-radius: var(--border-radius-medium);
  font-family: var(--font-family);
  color: var(--accent-secondary);
  box-sizing: border-box;
}

.cap-modal__content--wide {
  max-width: 720px;
}

.cap-modal__content--narrow {
  max-width: 380px;
}

.cap-modal__content--bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 50vh;
  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
}

.cap-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--accent-secondary);
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  opacity: 0.6;
  transition: opacity 0.15s;
  z-index: 1;
}

.cap-modal__close:hover {
  opacity: 1;
}

/* Tablet */
@media (max-width: 992px) {
  .cap-modal__content {
    max-width: 90vw;
    padding: 24px;
  }

  .cap-modal__content--wide {
    max-width: 90vw;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .cap-modal__content {
    max-width: 100vw;
    margin: 8px;
    padding: 20px;
    border-radius: var(--border-radius-small);
  }

  .cap-modal__content--narrow {
    max-width: 100vw;
  }

  .cap-modal__content--bottom {
    margin: 0;
    border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
  }
}

/* ── Map ───────────────────────────────────────────── */

.cap-map {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 default */
  border-radius: var(--border-radius-small);
  overflow: hidden;
  background-color: #e5e5e5;
}

.cap-map__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.cap-map--4-3  { padding-bottom: 75%; }
.cap-map--1-1  { padding-bottom: 100%; }
.cap-map--21-9 { padding-bottom: 42.86%; }
.cap-map--16-9 { padding-bottom: 56.25%; }

/* ── Columns ───────────────────────────────────────── */

.cap-columns {
  display: flex;
  flex-direction: row;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.cap-column {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Collapse on tablet + mobile (≤ 992px) */
@media (max-width: 992px) {
  .cap-columns--collapse-tablet {
    flex-direction: column;
  }

  .cap-columns--collapse-tablet > .cap-column {
    flex: none;
    width: 100%;
  }
}

/* Collapse on mobile only (≤ 480px) */
@media (max-width: 480px) {
  .cap-columns--collapse-mobile {
    flex-direction: column;
  }

  .cap-columns--collapse-mobile > .cap-column {
    flex: none;
    width: 100%;
  }
}

/* ── Opt-in Form ───────────────────────────────────── */

.cap-optin-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  font-family: var(--font-family);
}

.cap-optin-form__terms {
  font-size: var(--font-size-small);
}

/* Policy links sit on their own line below the submit button, de-emphasised in
   a light color rather than the accent. */
.cap-optin-form__terms-links {
  margin-top: 4px;
  font-size: var(--font-size-small);
}

.cap-optin-form__terms-text a,
.cap-optin-form__terms-links a {
  color: #9ca3af;
  text-decoration: underline;
}

.cap-optin-form__terms-text a:hover,
.cap-optin-form__terms-links a:hover {
  opacity: 0.8;
}

.cap-optin-form__submit {
  width: 100%;
  box-sizing: border-box;
}

.cap-optin-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cap-optin-form__error {
  color: #dc2626;
  font-size: var(--font-size-small);
  display: none;
}

.cap-optin-form__error--visible {
  display: block;
}

/* ── Global responsive overrides ────────────────────── */

/* Tablet (≤ 992px) */
@media (max-width: 992px) {
  :root {
    --font-size-large: 32px;
    --font-size-medium: 20px;
    --border-radius-medium: 12px;
  }

  .cap-section {
    padding: 32px 16px;
  }

  .cap-stack {
    padding: 12px;
    gap: 12px;
  }

  .cap-button {
    padding: 10px 24px;
  }

  .cap-text {
    padding: 6px 0;
  }

  .cap-text--quote {
    padding-left: 12px;
  }

  .cap-bullet-item {
    padding-left: 24px;
  }

  .cap-input__field {
    padding: 9px 12px;
  }

  .cap-video {
    border-radius: var(--border-radius-small);
  }
}

/* Mobile (≤ 480px) */
@media (max-width: 480px) {
  :root {
    --font-size-large: 26px;
    --font-size-medium: 18px;
    --font-size-base: 15px;
    --font-size-small: 13px;
    --border-radius-medium: 8px;
  }

  .cap-section {
    padding: 24px 12px;
  }

  .cap-stack {
    padding: 10px;
    gap: 10px;
  }

  .cap-button {
    padding: 10px 20px;
    font-size: var(--font-size-base);
    width: 100%;
    box-sizing: border-box;
  }

  .cap-text {
    padding: 4px 0;
  }

  .cap-text--quote {
    font-size: var(--font-size-base);
    padding-left: 10px;
    border-left-width: 3px;
  }

  .cap-bullet-list {
    font-size: var(--font-size-base);
  }

  .cap-bullet-item {
    padding-left: 22px;
    margin-bottom: 6px;
  }

  .cap-input {
    gap: 4px;
  }

  .cap-input__field {
    padding: 8px 10px;
    font-size: var(--font-size-base);
  }

  .cap-checkbox {
    gap: 8px;
    font-size: var(--font-size-base);
  }

  .cap-checkbox__input {
    width: 16px;
    height: 16px;
  }

  .cap-image--rounded {
    border-radius: var(--border-radius-small);
  }

  .cap-video {
    border-radius: 4px;
  }
}