/* Homepage layout from published Layout CMS document */
.kt-layout-home-mount:not([hidden]) {
  display: block;
}

/* Keep `.hero` flex + grid from styles.css (do not force display:block). */
.hero.kt-lc-hero-canvas .kt-lc-canvas-inner {
  position: relative;
  width: 100%;
  max-width: var(--hero-content-max-width, 1400px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  /* Match legacy hero horizontal rhythm so %/centered nodes do not hug the viewport edge differently per width */
  padding-left: max(1rem, min(3rem, 5vw));
  padding-right: max(1rem, min(3rem, 5vw));
}

.kt-lc-canvas-inner {
  position: relative;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: kt-lc-canvas;
  min-width: 0;
}

.kt-lc-node-abs {
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
  max-width: 100%;
}

/* Canvas text blocks use the width you set in the editor — do not cap inner type at 900px or it ignores the box */
.hero.kt-lc-hero-canvas .kt-lc-hero-title-wrap,
.hero.kt-lc-hero-canvas .kt-lc-hero-highlight-wrap,
.hero.kt-lc-hero-canvas .kt-lc-hero-subtitle-wrap {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* Typography matches theme CSS variables like the legacy hero */
.hero.kt-lc-hero-canvas .kt-lc-hero-title-wrap h1 {
  font-family: 'Crimson Pro', serif;
  font-size: var(--hero-title-size, clamp(2.2rem, 5vw, 3.5rem));
  color: var(--hero-title-color, #ffffff);
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  letter-spacing: -0.02em;
}

/*
 * TinyMCE stores copy in <p>. Global `.hero p:not(h1 p)` in styles.css sets subtitle font-size and large
 * margins, which overrides the parent h1/span typography and ignores CMS inspector font-size.
 */
.hero.kt-lc-hero-canvas .kt-lc-canvas-inner .cms-prose p {
  font-size: inherit;
  color: inherit;
  line-height: inherit;
  max-width: none;
  margin: 0 0 0.75em;
}
.hero.kt-lc-hero-canvas .kt-lc-canvas-inner .cms-prose p:last-child {
  margin-bottom: 0;
}

.hero.kt-lc-hero-canvas .kt-lc-hero-highlight-wrap .hero-highlight {
  display: block;
  font-family: 'Crimson Pro', serif;
  font-size: var(--hero-highlight-size, clamp(2.5rem, 5.5vw, 4rem));
  color: var(--hero-highlight-color, var(--accent));
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: pre-line;
  overflow-wrap: break-word;
}

/* Rich HTML in CMS often carries inline white; force children to use the theme highlight color */
.hero.kt-lc-hero-canvas .kt-lc-hero-highlight-wrap .hero-highlight * {
  color: inherit !important;
}

/* Use a block wrapper (not <p>) so CMS HTML can include <p> without breaking the DOM; inner <p> inherits size */
.hero.kt-lc-hero-canvas .kt-lc-hero-subtitle-wrap > .cms-prose {
  font-size: 1.15rem;
  color: var(--hero-subtitle-color, rgba(255, 255, 255, 0.75));
  max-width: 100%;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  line-height: 1.8;
}

.hero.kt-lc-hero-canvas .kt-lc-hero-subtitle-wrap .cms-prose p {
  font-size: inherit;
  color: inherit;
}

/* Center hero copy vs full-bleed background art (TinyMCE often saves inline text-align:left on <p>). */
.hero.kt-lc-hero-canvas .kt-lc-hero-title-wrap .cms-prose,
.hero.kt-lc-hero-canvas .kt-lc-hero-title-wrap .cms-prose *:not(a),
.hero.kt-lc-hero-canvas .kt-lc-hero-highlight-wrap .cms-prose,
.hero.kt-lc-hero-canvas .kt-lc-hero-highlight-wrap .cms-prose *:not(a),
.hero.kt-lc-hero-canvas .kt-lc-hero-highlight-wrap .hero-highlight,
.hero.kt-lc-hero-canvas .kt-lc-hero-subtitle-wrap .cms-prose,
.hero.kt-lc-hero-canvas .kt-lc-hero-subtitle-wrap .cms-prose *:not(a) {
  text-align: center !important;
}

/* Each hero CTA is its own absolutely positioned wrapper; match theme row alignment like `.hero-buttons` */
.hero.kt-lc-hero-canvas .kt-lc-canvas-inner > .kt-lc-node-abs > a.primary-button,
.hero.kt-lc-hero-canvas .kt-lc-canvas-inner > .kt-lc-node-abs > a.secondary-button {
  display: inline-flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
}

.kt-lc-section {
  box-sizing: border-box;
}

/*
 * Skills header blocks are plain .cms-prose flow nodes (no .section-title class); force light text on dark section.
 * Live site: #kt-layout-home-mount. Layout CMS preview: #lc-preview-root (same subtree, different wrapper id).
 */
#kt-layout-home-mount .skills-section > .kt-lc-flow-node:not(.skills-grid) .cms-prose,
#lc-preview-root .skills-section > .kt-lc-flow-node:not(.skills-grid) .cms-prose {
  color: #ffffff !important;
}
#kt-layout-home-mount .skills-section > .kt-lc-flow-node:not(.skills-grid) .cms-prose *:not(a),
#lc-preview-root .skills-section > .kt-lc-flow-node:not(.skills-grid) .cms-prose *:not(a) {
  color: inherit !important;
}
#kt-layout-home-mount .skills-section > .kt-lc-flow-node:not(.skills-grid) .cms-prose a,
#lc-preview-root .skills-section > .kt-lc-flow-node:not(.skills-grid) .cms-prose a {
  color: #93c5fd !important;
}

/*
 * Legacy HTML wraps skills in .skills-container (max-width + margin auto). Layout CMS flow sections
 * append label/title/body/grid as direct children — constrain and center that column on desktop.
 */
#kt-layout-home-mount .skills-section > .kt-lc-flow-node,
#lc-preview-root .skills-section > .kt-lc-flow-node {
  width: 100%;
  max-width: var(--content-max-width, 1400px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/*
 * Canvas homepage sections (trust, services, skills, process) use .kt-lc-section + abs nodes with
 * left:50% + translateX(-50%). That often renders off-center under RTL / layout mount; margin-auto is reliable.
 * Hero uses .hero.kt-lc-hero-canvas without .kt-lc-section — not affected.
 */
#kt-layout-home-mount .kt-lc-section .kt-lc-canvas-inner > .kt-lc-node-abs,
#lc-preview-root .kt-lc-section .kt-lc-canvas-inner > .kt-lc-node-abs {
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

/* Inner pages (/page/:slug) when driven by Layout CMS */
.kt-layout-page-mount:not([hidden]) {
  display: block;
  width: 100%;
}

/* Contact / CTA canvas — absolute blocks inside #contact (public + Layout CMS preview) */
#contact .kt-lc-contact-canvas.kt-lc-section .kt-lc-canvas-inner,
#lc-preview-site-tail .kt-lc-contact-canvas.kt-lc-section .kt-lc-canvas-inner {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: kt-lc-cta-canvas;
}

#contact .kt-lc-contact-canvas .kt-lc-cta-title-wrap h2#cta-title,
#lc-preview-site-tail .kt-lc-contact-canvas .kt-lc-cta-title-wrap h2#cta-title {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#contact .kt-lc-contact-canvas .kt-lc-cta-title-wrap h2#cta-title .cms-prose,
#lc-preview-site-tail .kt-lc-contact-canvas .kt-lc-cta-title-wrap h2#cta-title .cms-prose {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#contact .kt-lc-contact-canvas .kt-lc-cta-subtitle-wrap #cta-subtitle,
#lc-preview-site-tail .kt-lc-contact-canvas .kt-lc-cta-subtitle-wrap #cta-subtitle {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#contact .kt-lc-contact-canvas .kt-lc-cta-subtitle-wrap #cta-subtitle .cms-prose,
#lc-preview-site-tail .kt-lc-contact-canvas .kt-lc-cta-subtitle-wrap #cta-subtitle .cms-prose {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#contact .kt-lc-contact-canvas .kt-lc-canvas-inner .cms-prose p,
#lc-preview-site-tail .kt-lc-contact-canvas .kt-lc-canvas-inner .cms-prose p {
  font-size: inherit;
  color: inherit;
  /* Override .cta-section p { max-width: 560px; margin: auto } so canvas width matches the editor box */
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin: 0 0 0.5em;
}
#contact .kt-lc-contact-canvas .kt-lc-canvas-inner .cms-prose p:last-child,
#lc-preview-site-tail .kt-lc-contact-canvas .kt-lc-canvas-inner .cms-prose p:last-child {
  margin-bottom: 0;
}

/*
 * Public inner pages (/page/...) — Layout CMS canvas sections use absolute nodes.
 * On narrow viewports, stack them in document order so content is not clipped or off-screen.
 */
@media (max-width: 1024px) {
  #kt-layout-page-mount .kt-lc-section .kt-lc-canvas-inner {
    min-height: 0 !important;
  }
  #kt-layout-page-mount .kt-lc-section .kt-lc-canvas-inner > .kt-lc-node-abs {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    transform: none !important;
    margin: 0 0 1rem !important;
  }
  #kt-layout-page-mount .kt-lc-section .kt-lc-canvas-inner > .kt-lc-node-abs:last-child {
    margin-bottom: 0 !important;
  }
}