/* =============================================================
   Wellness Mama – Drupal 11 Home Hero Section CSS
   Two-column layout: left = full-bleed image, right = content
   ============================================================= */

/* ── CSS Custom Properties ────────────────────────────────── */
:root {
  --wm-color-primary:    #0f766e;   /* teal green               */
  --wm-color-secondary:  #ecf4f4;   /* light teal-grey bg       */
  --wm-color-contrast:   #0a0a0a;   /* near-black               */
  --wm-color-tertiary:   #0d9488;   /* mid teal – button        */
  --wm-color-base:       #ffffff;

  --wm-font-outfit:      Oswald, sans-serif;
  --wm-font-freight:     Oswald, sans-serif;

  /* Font sizes (from theme tokens) */
  --wm-font-size-x-tiny: 14px;
  --wm-font-size-tiny:   16px;
  --wm-font-size-xs:     18px;
  --wm-font-size-small:  20px;
  --wm-font-size-large:  clamp(24px, 1.5rem + ((1vw - 6.4px) * 0.938), 30px);

  /* Font weights */
  --wm-fw-regular:   400;
  --wm-fw-medium:    500;
  --wm-fw-bold:      700;

  /* Line heights */
  --wm-lh-heading:   1.1;
  --wm-lh-body:      1.75;
  --wm-lh-medium:    1.5;

  /* Spacing */
  --wm-spacing-xs:     20px;
  --wm-spacing-small:  30px;
  --wm-spacing-medium: 40px;
  --wm-spacing-large:  clamp(50px, 8vw, 80px);
}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION WRAPPER
   ═══════════════════════════════════════════════════════════ */
.home-hero-section {
  /*background-color: var(--wm-color-base);
  border-top: 3px solid var(--wm-color-primary);*/
  width:  100%;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   INNER TWO-COLUMN LAYOUT
   Left  col: image (fills its half, no padding)
   Right col: text + form (padded, vertically centred)
   ═══════════════════════════════════════════════════════════ */
.home-hero-section .hero-content {
  display:             grid;
  grid-template-columns: 1fr 1fr;   /* equal halves */
  min-height:          520px;
}

/* ── Left: Image Container ────────────────────────────────── */
.home-hero-section .hero_left_image_cont {
  overflow:   hidden;
  position:   relative;
  min-height: 480px;
}

.home-hero-section .hero_left_image_cont img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center top;
  display:    block;
  vertical-align: middle;
}

/* ── Right: Content Container ─────────────────────────────── */
.home-hero-section .hero_right_image_cont {
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  padding:         var(--wm-spacing-large) var(--wm-spacing-medium)
                   var(--wm-spacing-large) clamp(30px, 4vw, 60px);
  background-color: var(--wm-color-base);
  text-align:      center;
  box-sizing:      border-box;
}

/* ─── inner flow block ───────────────────────────────────── */
.home-hero-section .hero_right_image_cont .wp-block-group {
  width:     100%;
  max-width: 480px;
  margin:    0 auto;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */

/* "STAY IN THE KNOW" eyebrow label */
.home-hero-section .is-style-subheading {
  font-family:    var(--wm-font-outfit);
  font-size:      var(--wm-font-size-x-tiny);   /* 14px */
  font-weight:    var(--wm-fw-medium);           /* 500  */
  letter-spacing: 1px;
  text-transform: uppercase;
  color:          var(--wm-color-contrast);
  margin:         0 0 10px;
  line-height:    var(--wm-lh-medium);
}

/* Main H1 headline */
.home-hero-section h1.wp-block-heading {
  font-family:  var(--wm-font-outfit);
  font-size:    var(--wm-font-size-large);   /* clamp 24–30px */
  font-weight:  var(--wm-fw-bold);
  color:        var(--wm-color-contrast);
  line-height:  var(--wm-lh-heading);        /* 1.1 */
  margin:       0 0 20px;
  text-align:   center;
  letter-spacing: -0.01em;
}

/* Body / welcome paragraph */
.home-hero-section .hero_right_image_cont > .wp-block-group > p:not(.is-style-subheading) {
  font-family:  var(--wm-font-freight);
  font-size:    var(--wm-font-size-xs);   /* 18px */
  font-weight:  var(--wm-fw-regular);
  color:        var(--wm-color-contrast);
  line-height:  var(--wm-lh-medium);      /* 1.5 */
  margin:       0 0 28px;
  text-align:   center;
}

/* ═══════════════════════════════════════════════════════════
   SIMPLENEWS / NEWSLETTER FORM
   ═══════════════════════════════════════════════════════════ */

/* Hide the block heading inside hero ("Join the Tribe!") */
.home-hero-section .block-simplenews h2 {
  display: none;
}

/* Hide helper description + subscriptions selector */
.home-hero-section .block-simplenews .form-item__description,
.home-hero-section .block-simplenews #edit-message--2,
.home-hero-section .block-simplenews [id^="edit-subscriptions-wrapper"] {
  display: none;
}

/* Hide email label (placeholder serves as label here) */
.home-hero-section .block-simplenews .form-item__label {
  display: none;
}

/* Form wrapper */
.home-hero-section .block-simplenews form {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  width:          100%;
  max-width:      480px;
  margin:         0 auto;
}

/* Two inputs side-by-side (first name + email) */
.home-hero-section .block-simplenews .field--name-mail,
.home-hero-section .block-simplenews .field--name-field-first-name {
  flex: 1;
}

/* Row that holds both inputs */
.home-hero-section .block-simplenews .seva-fields,
.home-hero-section .simplenews-subscriber-form > form > .field--type-email {
  display: block;
}

/* Side-by-side input row wrapper — mirrors the reference screenshot */
.home-hero-section .block-simplenews .form-fields-row {
  display: flex;
  gap:     0;
}

/* ── Email Input ──────────────────────────────────────────── */
.home-hero-section .block-simplenews input[type="email"] {
  font-family:    var(--wm-font-outfit) !important;
  font-size:      var(--wm-font-size-tiny) !important;
  font-weight:    var(--wm-fw-regular) !important;
  color:          var(--wm-color-contrast) !important;
  background:     var(--wm-color-base) !important;
  border:         1px solid var(--wm-color-primary) !important;
  border-radius:  0 !important;
  padding:        14px 16px !important;
  width:          100% !important;
  box-sizing:     border-box !important;
  line-height:    1.4 !important;
  text-align:     center !important;
  transition:     filter 0.2s ease;
  -webkit-appearance: none;
}

.home-hero-section .block-simplenews input[type="email"]::placeholder {
  color:   var(--wm-color-contrast) !important;
  opacity: 0.45 !important;
  font-size: var(--wm-font-size-tiny) !important;
  text-align: center;
}

.home-hero-section .block-simplenews input[type="email"]:focus {
  filter:  brightness(97%);
  outline: none;
}

/* ── Subscribe Button ─────────────────────────────────────── */
.home-hero-section .block-simplenews input[type="submit"],
.home-hero-section .block-simplenews .button--primary {
  font-family:      var(--wm-font-outfit) !important;
  font-size:        var(--wm-font-size-tiny) !important;
  font-weight:      var(--wm-fw-medium) !important;
  color:            var(--wm-color-base) !important;
  background-color: var(--wm-color-tertiary) !important;
  border:           none !important;
  border-radius:    0 !important;
  padding:          14px 20px !important;
  width:            100% !important;
  cursor:           pointer !important;
  text-align:       center !important;
  letter-spacing:   0.02em;
  line-height:      1.4 !important;
  display:          block;
  transition:       background-color 0.2s ease, filter 0.2s ease;
  -webkit-appearance: none;
}

.home-hero-section .block-simplenews input[type="submit"]:hover,
.home-hero-section .block-simplenews .button--primary:hover {
  background-color: var(--wm-color-primary) !important;
}

/* Form actions wrapper */
.home-hero-section .block-simplenews .form-actions {
  margin: 0;
}

/* ── Constrained inner wrapper ───────────────────────────── */
.home-hero-section .wp-block-group.is-layout-constrained {
  width:     100%;
  max-width: 480px;
  margin:    0 auto;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* Tablet – stack vertically, image on top */
@media (max-width: 860px) {
  .home-hero-section .hero-content {
    grid-template-columns: 1fr;
    min-height:            auto;
  }

  .home-hero-section .hero_left_image_cont {
    min-height: 340px;
    max-height: 420px;
  }

  .home-hero-section .hero_right_image_cont {
    padding: var(--wm-spacing-medium) var(--wm-spacing-small);
  }
}

/* Mobile */
@media (max-width: 480px) {
  .home-hero-section .hero_left_image_cont {
    min-height: 260px;
    max-height: 320px;
  }

  .home-hero-section .hero_right_image_cont {
    padding: var(--wm-spacing-xs);
  }

  .home-hero-section h1.wp-block-heading {
    font-size: 22px;
  }
}