:root {
  --color-dark-brown: #291F17;
  --color-orange: #ce6018;
  --color-peach: #ffe4c3;
  --color-blue: #92A7CD;
  --color-dark-brown-rgb: 41, 31, 23;
  --color-orange-rgb: 206, 96, 24;
  --color-peach-rgb: 255, 228, 195;
  --color-blue-rgb: 146, 167, 205;
  --color-light-blue-rgb: 246, 249, 255;
  --color-cream: #fff3e4;
  --color-white: #ffffff;
  --color-gray: #B7B7B7;
  --color-black: #000000;
  --color-light-blue: #F6F9FF;
  --color-dark-blue: #485B7E;
  --color-light-orange: #FFF8EF;
}

* {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

@font-face {
  font-family: 'EightiesComeback';
  src: url('../font/EightiesComeback-MedExtraCond.woff2') format('woff2'),
    url('../font/EightiesComeback-MedExtraCond.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

body {
  font-size: 16px;
  color: var(--color-black);
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
}

p {
  margin-bottom: 0;
}

a {
  text-decoration: none;
}

.container {
  max-width: 1728px;
  padding: 0 40px;
}

.font-medium {
  font-weight: 500;
}

.cursor-pointer {
  cursor: pointer;
}

.border-orange {
  border-color: var(--color-orange) !important;
}

.text-peach {
  color: var(--color-peach);
}

.text-blue {
  color: var(--color-blue);
}

.button-blue {
  background-color: var(--color-blue);
  color: var(--color-white);
  letter-spacing: 0.13em;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 15px;
}

.button-blue:hover {
  background-color: rgba(var(--color-blue-rgb), 0.9);
  color: var(--color-white);
}

.button-peach {
  background-color: var(--color-peach);
  color: var(--color-black);
  letter-spacing: 0.13em;
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  border-radius: 15px;
  border: 1px solid var(--color-orange);
}

.button-peach:hover {
  background-color: rgba(var(--color-peach-rgb), 0.8);
  color: var(--color-black);
}

.button-dark-brown {
  background-color: var(--color-dark-brown);
  color: var(--color-white);
  letter-spacing: 0.13em;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 15px;
}

.button-dark-brown:hover {
  background-color: rgba(var(--color-dark-brown-rgb), 0.9);
  color: var(--color-white);
}

.button-light-blue {
  background-color: var(--color-light-blue);
  color: var(--color-blue);
  letter-spacing: 0.13em;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 15px;
  border: 1px solid var(--color-blue);
}

.button-light-blue:hover {
  background-color: rgba(var(--color-light-blue-rgb), 0.8);
  color: var(--color-blue);
}

.form-control:focus {
  box-shadow: none;
}

@media (max-width: 768px) {
  .button-blue {
    border-radius: 10px;
  }

  .button-peach {
    border-radius: 10px;
  }

  .button-dark-brown {
    border-radius: 10px;
  }

  .button-light-blue {
    border-radius: 10px;
  }
}

/* ═══════ IMEINU BANNER HERO ═══════ */
.imeinu-hero {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* No background image: the section has no image to give it height, so flip
   the overlaying content to static flow and pad the section directly. */
.imeinu-hero.imeinu-hero--no-bg {
  background-color: var(--color-peach);
  padding: 60px 0;
}
.imeinu-hero.imeinu-hero--no-bg .imeinu-hero-content {
  position: static;
  inset: auto;
  padding: 0;
}
.imeinu-hero.imeinu-hero--no-bg .imeinu-hero-overlay {
  display: none;
}

/* Background images — auto-height based on image */
.imeinu-hero-bg {
  width: 100%;
  height: auto;
  display: block;
}
.imeinu-hero-bg-desktop { display: block; }
.imeinu-hero-bg-mobile { display: none; }

/* Overlay (same as production .challah-bake-banner::before) */
.imeinu-hero-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  pointer-events: none;
  z-index: 1;
}

/* Content positioned over the banner image */
.imeinu-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  z-index: 2;
  /* Bottom padding clears the 100px overlap of .registration-form-container */
  padding: 0 0 150px 0;
  background: transparent;
}
.imeinu-hero-content,
.imeinu-hero-content .container,
.imeinu-hero-content .row,
.imeinu-hero-content [class*="col-"] {
  background: transparent !important;
}
.imeinu-hero-content .container {
  max-width: 1550px;
}

/* Text layout — matches production .challah-bake-banner__left */
/* Font scaling: rich text editor sets inline font-size, so we use
   a relative font-size on the wrapper to scale all text proportionally */
.imeinu-hero-text-wrap {
  display: flex;
  align-items: flex-end;
  font-size: 100%;
}

/* Title — matches production h1 (EightiesComeback, 100px, orange) */
.imeinu-hero-title {
  flex-shrink: 0;
  color: var(--color-orange);
  font-family: "EightiesComeback", sans-serif;
  font-size: 100px;
  font-weight: 500;
  line-height: 1.25;
}
.imeinu-hero-title h1, .imeinu-hero-title h2, .imeinu-hero-title p {
  font-family: "EightiesComeback", sans-serif;
  color: var(--color-orange);
  margin: 0;
  line-height: 1;
  font-size: inherit;
  font-weight: inherit;
}

/* Description wrap — matches production .challah-bake__description */
.imeinu-hero-description-wrap {
  padding: 0 135px 0 45px;
  margin-bottom: 7px;
  position: relative;
}
.imeinu-hero-description-wrap::before {
  content: '';
  position: absolute;
  inset: -50px -100px;
  background: radial-gradient(ellipse closest-side at center, rgba(41, 31, 23, 0.85) 0%, rgba(41, 31, 23, 0.85) 50%, rgba(41, 31, 23, 0.55) 75%, rgba(41, 31, 23, 0.25) 90%, rgba(41, 31, 23, 0) 100%);
  pointer-events: none;
  z-index: 0;
}
.imeinu-hero-description-wrap > * {
  position: relative;
  z-index: 1;
}

/* Subtitle (Content 1) — matches production .subtitle */
.imeinu-hero-subtitle {
  font-size: 32px;
  font-family: "EightiesComeback", sans-serif;
  color: #ffe4c3;
  margin-bottom: 8px;
  font-style: italic;
}
.imeinu-hero-subtitle h1, .imeinu-hero-subtitle h2, .imeinu-hero-subtitle p {
  font-family: inherit;
  color: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Description (Content 2) — matches production .challah-bake-banner p */
.imeinu-hero-description {
  font-size: 20px;
  font-weight: 400;
  font-family: 'Poppins', sans-serif;
  color: var(--color-peach);
  font-style: italic;
  line-height: 1.5;
}
.imeinu-hero-description p { margin: 0; color: inherit; font-size: inherit; }

/* Buttons */
.imeinu-hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

/* Additional text */
.imeinu-hero-additional {
  color: var(--color-peach);
  font-size: 0.9rem;
  margin-top: 16px;
}
.imeinu-hero-additional p { margin: 0; color: inherit; }

/* Badge — absolute positioned top-right */
.imeinu-hero-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 3;
  max-width: 120px;
  display: none; /* use inline badge instead */
}
.imeinu-hero-badge-inline {
  width: clamp(120px, 16vw, 240px);
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
}

/* Pin badge column to top so it doesn't get vertically clipped by hero overflow:hidden when text col is taller */
.imeinu-hero-content .row > .col-xxl-2,
.imeinu-hero-content .row > .col-lg-3 {
  align-self: flex-start;
}

/* Replace zoom-based scaling with direct fluid font-sizing.
   Min 20px on subtitle/description per stakeholder requirement. !important
   overrides inline font-size attributes injected by the rich-text editor. */
.imeinu-hero-text-wrap { zoom: 1 !important; }
.imeinu-hero-description-wrap { zoom: 1 !important; padding-right: 0 !important; }

.imeinu-hero-title,
.imeinu-hero-title h1, .imeinu-hero-title h2, .imeinu-hero-title p,
.imeinu-hero-title span, .imeinu-hero-title strong {
  font-size: clamp(40px, 6vw, 100px) !important;
  line-height: 1.1 !important;
}

.imeinu-hero-subtitle,
.imeinu-hero-subtitle h1, .imeinu-hero-subtitle h2,
.imeinu-hero-subtitle p, .imeinu-hero-subtitle span {
  font-size: clamp(20px, 2vw, 32px) !important;
}

.imeinu-hero-description,
.imeinu-hero-description p, .imeinu-hero-description span,
.imeinu-hero-description strong, .imeinu-hero-description em {
  font-size: clamp(20px, 1.4vw, 22px) !important;
}

/* At narrow viewports, switch hero from "bg-image determines height" to
   "content determines height" so content is always visible without scrolling.
   The bg image becomes a full-cover backdrop. */
@media (max-width: 1199px) {
  .imeinu-hero {
    overflow: visible;
  }
  .imeinu-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
  }
  .imeinu-hero-overlay {
    z-index: 1;
  }
  .imeinu-hero-content {
    position: relative;
    inset: auto;
    z-index: 2;
    padding: 40px 0 160px 0;
    min-height: 0;
  }
  /* Image-only banners: keep "image determines height" mode at narrow viewports
     so the uploaded mobile image renders at its natural aspect ratio instead of
     collapsing to a thin strip behind empty content. */
  .imeinu-hero--image-only .imeinu-hero-bg {
    position: static;
    inset: auto;
    width: 100%;
    height: auto;
    object-fit: initial;
  }
}

/* Image-only banners (no title/sub/desc/buttons/badge): hide the empty content
   container and the dark overlay (which only exists to darken the image so text
   on top stays readable — pointless when there's no text). */
.imeinu-hero--image-only .imeinu-hero-content,
.imeinu-hero--image-only .imeinu-hero-overlay {
  display: none;
}

/* ── Responsive (matches production breakpoints) ── */
/* Inline font-sizes from the rich text editor can't be overridden with CSS classes,
   so we use zoom on .imeinu-hero-text-wrap to scale all text proportionally */
@media (max-width: 1550px) {
  .imeinu-hero-text-wrap { zoom: 0.92; }
  .imeinu-hero-description-wrap { padding-right: 0; zoom: 1.1; }
}
@media (max-width: 1370px) {
  .imeinu-hero-text-wrap { zoom: 0.85; }
  .imeinu-hero-description-wrap { zoom: 1.25; }
}
@media (max-width: 1199px) {
  .imeinu-hero-text-wrap {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 30px;
    zoom: 0.80;
  }
  .imeinu-hero-description-wrap { padding: 0; zoom: 1.4; }
}
@media (max-width: 1050px) {
  .imeinu-hero-text-wrap { zoom: 0.72; }
  .imeinu-hero-description-wrap { zoom: 1.55; }
}
@media (max-width: 991px) {
  .imeinu-hero-bg-desktop { display: none; }
  .imeinu-hero-bg-mobile { display: block; }
  .imeinu-hero-badge-inline { max-width: 200px; margin-bottom: 20px; }
  .imeinu-hero-content { padding: 0 0 100px 0; }
  .imeinu-hero-text-wrap { zoom: 0.68; }
  .imeinu-hero-description-wrap { zoom: 1.5; line-height: 1.4; }
}
@media (max-width: 768px) {
  .imeinu-hero-text-wrap { zoom: 0.60; }
  .imeinu-hero-content { padding: 0 0 80px 0; }
  .imeinu-hero-description-wrap { zoom: 1.65; line-height: 1.3; }
  .imeinu-mobile-hide { display: none !important; }
}
@media (max-width: 575px) {
  .imeinu-hero-text-wrap { zoom: 0.50; }
  .imeinu-hero-content { padding: 0 0 60px 0; }
  .imeinu-hero-description-wrap { zoom: 1.85; line-height: 1.2; }
  .imeinu-hero-badge-inline { max-width: 120px; }
}