/**
 * Page-by-page design core — 60-30-10 system site-wide
 * 60% neutrals (cream · lavender · mint · white)
 * 30% brand (navy · purple typography & one accent band max)
 * 10% sun-gold CTAs only
 */

/* ── Neutral bands (60%) ── */

.jem-rebrand .jem-band-cream,
.jem-rebrand .jem-band-cream:not(.elementor-motion-effects-element-type-background),
.jem-rebrand .jem-band-cream > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--jem-cream) !important;
  background-image: none !important;
}

.jem-rebrand .jem-band-lavender,
.jem-rebrand .jem-band-lavender:not(.elementor-motion-effects-element-type-background),
.jem-rebrand .jem-band-lavender > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--jem-lavender) !important;
  background-image: none !important;
}

.jem-rebrand .jem-band-mint,
.jem-rebrand .jem-band-mint:not(.elementor-motion-effects-element-type-background),
.jem-rebrand .jem-band-mint > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--jem-mint) !important;
  background-image: none !important;
}

.jem-rebrand .jem-band-surface,
.jem-rebrand .jem-band-surface:not(.elementor-motion-effects-element-type-background),
.jem-rebrand .jem-band-surface > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--jem-surface) !important;
  background-image: none !important;
}

/* ── Brand band (30% — max one per page) ── */

.jem-rebrand .jem-band-brand:not(.jem-shared-cta):not(.jem-layout-cta):not(.jem-on-dark),
.jem-rebrand .jem-band-brand:not(.jem-shared-cta):not(.jem-layout-cta):not(.jem-on-dark):not(.elementor-motion-effects-element-type-background),
.jem-rebrand .jem-band-brand:not(.jem-shared-cta):not(.jem-layout-cta):not(.jem-on-dark) > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background: var(--jem-lavender) !important;
  background-image: none !important;
}

.jem-rebrand .jem-band-brand.jem-shared-cta,
.jem-rebrand .jem-band-brand.jem-layout-cta,
.jem-rebrand .jem-band-brand.jem-on-dark {
  background: var(--jem-gradient-brand) !important;
  background-image: var(--jem-gradient-brand) !important;
}

.jem-rebrand .jem-band-brand .elementor-heading-title {
  color: #fff !important;
}

.jem-rebrand .jem-band-brand .elementor-widget-text-editor,
.jem-rebrand .jem-band-brand p,
.jem-rebrand .jem-band-brand .elementor-icon-box-description {
  color: rgb(255 255 255 / 88%) !important;
}

.jem-rebrand .jem-band-brand .elementor-icon-box-title {
  color: #fff !important;
}

/* ── Kill legacy Hostinger colors everywhere in page content ── */

.jem-rebrand [data-elementor-type="wp-page"] .elementor-top-section:not(.jem-inner-hero) .elementor-background-overlay {
  opacity: 0 !important;
  pointer-events: none;
}

.jem-rebrand [data-elementor-type="wp-page"] .elementor-heading-title {
  font-family: var(--jem-display) !important;
  color: var(--jem-navy) !important;
}

.jem-rebrand [data-elementor-type="wp-page"] .jem-inner-hero .elementor-heading-title {
  color: #fff !important;
}

.jem-rebrand [data-elementor-type="wp-page"] .elementor-widget-text-editor,
.jem-rebrand [data-elementor-type="wp-page"] .elementor-widget-text-editor p {
  color: var(--jem-muted) !important;
  font-size: 1.02rem !important;
  line-height: 1.75 !important;
}

.jem-rebrand [data-elementor-type="wp-page"] h2.elementor-heading-title {
  color: var(--jem-purple) !important;
  font-size: clamp(1.5rem, 3vw, 2.15rem) !important;
  line-height: 1.15 !important;
}

.jem-rebrand [data-elementor-type="wp-page"] h3.elementor-heading-title {
  color: var(--jem-navy) !important;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem) !important;
}

/* ── Section rhythm ── */

.jem-rebrand .jem-page-section {
  padding-block: clamp(3.5rem, 8vw, 5.5rem) !important;
}

.jem-rebrand .jem-page-section > .elementor-container,
.jem-rebrand .jem-page-section > .e-con-inner {
  max-width: var(--jem-max, 72rem) !important;
  margin-inline: auto !important;
}

.jem-rebrand .jem-page-section .elementor-invisible {
  visibility: visible !important;
  opacity: 1 !important;
  animation: none !important;
}

/* ── Layout: split panel ── */

.jem-rebrand .jem-layout-split > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(2rem, 5vw, 3.5rem) !important;
  align-items: center !important;
  max-width: var(--jem-max, 72rem) !important;
  width: 100% !important;
  margin-inline: auto !important;
  padding-inline: var(--jem-gutter, clamp(1.25rem, 4vw, 2.5rem)) !important;
}

.jem-rebrand .jem-layout-split .elementor-column {
  width: 100% !important;
  max-width: none !important;
}

.jem-rebrand .jem-layout-split .elementor-widget-image img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  max-width: min(440px, 100%) !important;
  border-radius: var(--jem-radius-xl, 1.5rem) !important;
  box-shadow: var(--jem-shadow);
  object-fit: contain !important;
  object-position: center !important;
  margin-inline: auto;
  display: block;
}

.jem-rebrand .jem-layout-split .jem-prose-panel {
  background: var(--jem-surface) !important;
  border: 1px solid var(--jem-border);
  border-radius: var(--jem-radius-xl, 1.5rem);
  padding: clamp(1.5rem, 4vw, 2.25rem) !important;
  box-shadow: var(--jem-shadow);
}

/* ── Layout: two-column prose ── */

.jem-rebrand .jem-layout-two-col > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(1.25rem, 3vw, 2rem) !important;
  align-items: start !important;
  width: 100% !important;
  max-width: var(--jem-max, 72rem) !important;
  margin-inline: auto !important;
  padding-inline: var(--jem-gutter, clamp(1.25rem, 4vw, 2.5rem)) !important;
}

.jem-rebrand .jem-layout-two-col .elementor-column {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: unset !important;
  --width: auto !important;
}

.jem-rebrand .jem-layout-two-col .elementor-column > .elementor-widget-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.jem-rebrand .jem-layout-two-col .elementor-widget-text-editor {
  width: 100% !important;
  max-width: 100% !important;
  background: var(--jem-surface);
  border: 1px solid var(--jem-border);
  border-radius: var(--jem-radius-lg, 1.25rem);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--jem-shadow);
}

.jem-rebrand .jem-layout-two-col .elementor-widget-text-editor > .elementor-widget-container,
.jem-rebrand .jem-layout-two-col .elementor-widget-text-editor p {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: normal !important;
  line-height: 1.75 !important;
}

/* ── Layout: card grid (3–4 cols) ── */

.jem-rebrand .jem-layout-cards > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 3vw, 1.5rem) !important;
}

.jem-rebrand .jem-layout-cards .elementor-column {
  width: 100% !important;
}

.jem-rebrand .jem-layout-cards .elementor-column > .elementor-widget-wrap {
  background: var(--jem-surface) !important;
  border: 1px solid var(--jem-border);
  border-radius: var(--jem-radius-xl, 1.5rem);
  padding: 1.25rem !important;
  box-shadow: var(--jem-shadow);
  height: 100%;
}

.jem-rebrand .jem-layout-cards .elementor-widget-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--jem-radius, 1rem);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ── Layout: feature / icon row ── */

.jem-rebrand .jem-layout-features .elementor-icon-box-wrapper {
  background: var(--jem-surface);
  border: 1px solid var(--jem-border);
  border-radius: var(--jem-radius-lg, 1.25rem);
  padding: 1.25rem 1.35rem !important;
  box-shadow: var(--jem-shadow);
  height: 100%;
}

.jem-rebrand .jem-layout-features .elementor-view-stacked .elementor-icon {
  background: var(--jem-lavender) !important;
  color: var(--jem-purple) !important;
  fill: var(--jem-purple) !important;
}

/* ── Layout: video band ── */

.jem-rebrand .jem-layout-video {
  padding-block: clamp(2.5rem, 6vw, 4rem) !important;
}

.jem-rebrand .jem-layout-video .elementor-widget-video,
.jem-rebrand .jem-layout-video .elementor-widget-video .elementor-wrapper {
  border-radius: var(--jem-radius-xl, 1.5rem);
  overflow: hidden;
  box-shadow: var(--jem-shadow-hover);
}

.jem-rebrand .jem-layout-video .elementor-widget-video {
  overflow: visible !important;
  height: auto !important;
  width: 100% !important;
}

.jem-rebrand .jem-layout-video .elementor-widget-video .elementor-wrapper {
  width: 100% !important;
  max-width: min(720px, 100%) !important;
  margin-inline: auto !important;
  --video-aspect-ratio: 1.77777 !important;
  aspect-ratio: 16 / 9 !important;
}

.jem-rebrand .jem-layout-video .elementor-widget-video video {
  object-fit: contain !important;
  background: #000;
}

.jem-rebrand .jem-layout-video .elementor-widget-container {
  border-radius: var(--jem-radius-xl, 1.5rem);
  overflow: visible !important;
  box-shadow: var(--jem-shadow-hover);
  margin-inline: auto !important;
  max-width: min(720px, 100%) !important;
}

/* ── Layout: prose block (e-con or single column) ── */

.jem-rebrand .jem-layout-prose {
  padding-block: clamp(2.5rem, 6vw, 4rem) !important;
}

.jem-rebrand .jem-layout-prose .e-con-inner,
.jem-rebrand .jem-layout-prose > .elementor-container {
  max-width: var(--jem-max, 72rem) !important;
  margin-inline: auto !important;
}

.jem-rebrand .jem-layout-prose .elementor-widget-text-editor {
  background: var(--jem-surface);
  border: 1px solid var(--jem-border);
  border-left: 4px solid var(--jem-purple);
  border-radius: var(--jem-radius-lg, 1.25rem);
  padding: 1.5rem 1.65rem;
  box-shadow: var(--jem-shadow);
}

/* ── Layout: CTA band ── */

.jem-rebrand .jem-layout-cta {
  text-align: center;
  padding-block: clamp(3rem, 7vw, 4.5rem) !important;
}

.jem-rebrand .jem-layout-cta .elementor-heading-title {
  margin-bottom: 0.75rem;
}

.jem-rebrand .jem-layout-cta .elementor-button {
  margin-top: 1rem;
}

/* ── Layout: contact split ── */

.jem-rebrand .jem-layout-contact > .elementor-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem) !important;
  align-items: start !important;
}

.jem-rebrand .jem-layout-contact .elementor-widget-form {
  background: var(--jem-surface);
  border: 1px solid var(--jem-border);
  border-radius: var(--jem-radius-xl, 1.5rem);
  padding: clamp(1.5rem, 4vw, 2rem);
  box-shadow: var(--jem-shadow);
}

.jem-rebrand .jem-layout-contact .elementor-column > .elementor-widget-wrap {
  background: var(--jem-surface);
  border: 1px solid var(--jem-border);
  border-radius: var(--jem-radius-xl, 1.5rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--jem-shadow);
}

/* ── Values list (About) ── */

.jem-rebrand .jem-values-block .elementor-widget-text-editor p {
  background: var(--jem-surface);
  border: 1px solid var(--jem-border);
  border-left: 4px solid var(--jem-purple);
  border-radius: var(--jem-radius, 1rem);
  padding: 0.85rem 1rem 0.85rem 1.15rem;
  margin-bottom: 0.65rem;
}

/* ── Dual cards (Vision / Mission) ── */

.jem-rebrand .jem-layout-dual-cards,
.jem-rebrand .jem-layout-dual-cards-wrap {
  padding-block: clamp(2.5rem, 6vw, 4rem) !important;
}

.jem-rebrand .jem-layout-dual-cards-wrap > .elementor-container {
  display: flex !important;
  grid-template-columns: unset !important;
  width: 100% !important;
  max-width: var(--jem-max, 72rem) !important;
  margin-inline: auto !important;
}

.jem-rebrand .jem-layout-dual-cards .elementor-element-19fcc0fb > .elementor-container,
.jem-rebrand .jem-layout-dual-cards.jem-vision-mission-grid > .elementor-container,
.jem-rebrand .jem-layout-dual-cards .elementor-inner-section > .elementor-container:has(> .elementor-col-50) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)) !important;
  gap: clamp(1.25rem, 3vw, 2rem) !important;
  max-width: var(--jem-max, 72rem) !important;
  width: 100% !important;
  margin-inline: auto !important;
}

.jem-rebrand .jem-layout-dual-cards .elementor-column,
.jem-rebrand .jem-layout-dual-cards .elementor-inner-column {
  width: 100% !important;
  max-width: none !important;
}

.jem-rebrand .jem-layout-dual-cards .elementor-inner-column > .elementor-widget-wrap,
.jem-rebrand .jem-layout-dual-cards .elementor-column > .elementor-widget-wrap {
  background: var(--jem-surface) !important;
  border: 1px solid var(--jem-border);
  border-radius: var(--jem-radius-xl, 1.5rem);
  padding: clamp(1.5rem, 4vw, 2.25rem) !important;
  box-shadow: var(--jem-shadow);
  height: 100%;
}

.jem-rebrand .jem-layout-dual-cards .elementor-widget-text-editor > .elementor-widget-container {
  font-size: 1.02rem !important;
  line-height: 1.8 !important;
  color: var(--jem-text-strong) !important;
}

/* ── Photo stack ── */

.jem-rebrand .jem-photo-stack {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.jem-rebrand .jem-photo-stack .elementor-widget-image img {
  aspect-ratio: 1;
  object-fit: cover;
}

/* ── Testimonials ── */

.jem-rebrand .jem-layout-testimonials .elementor-testimonial-wrapper,
.jem-rebrand .jem-layout-testimonials .testimonial_body {
  background: var(--jem-surface) !important;
  border: 1px solid var(--jem-border) !important;
  border-left: 4px solid var(--jem-pink) !important;
  border-radius: var(--jem-radius-xl, 1.5rem) !important;
  padding: 1.5rem !important;
  box-shadow: var(--jem-shadow);
}

/* ── Shared cross-page CTA sections ── */

.jem-rebrand .jem-shared-cta .elementor-button {
  background: var(--jem-gradient-warm) !important;
  color: var(--jem-navy) !important;
}

@media (max-width: 1024px) {
  .jem-rebrand .jem-layout-split > .elementor-container,
  .jem-rebrand .jem-layout-two-col > .elementor-container,
  .jem-rebrand .jem-layout-contact > .elementor-container,
  .jem-rebrand .jem-layout-dual-cards .elementor-element-19fcc0fb > .elementor-container,
  .jem-rebrand .jem-layout-dual-cards.jem-vision-mission-grid > .elementor-container,
  .jem-rebrand .jem-layout-dual-cards .elementor-inner-section > .elementor-container:has(> .elementor-col-50) {
    grid-template-columns: 1fr !important;
  }
}
