/*
 * PMI Hero — hero.css v1.0.0
 *
 * Measurements from screenshot:
 *   height:          100vh (fills full viewport)
 *   bg:              deep blue photo + rgba(10,30,80,0.62) overlay
 *   content pos:     LEFT-ALIGNED, vertically centred
 *   content left:    ~140-160px (container gutter)
 *
 *   Headline:
 *     font-size:     64px
 *     font-weight:   900
 *     color:         #ffffff
 *     line-height:   1.05
 *     letter-spacing:-0.02em
 *     max-width:     520px
 *     margin-bottom: 24px
 *
 *   Sub:
 *     font-size:     15px
 *     color:         rgba(255,255,255,0.88)
 *     line-height:   1.65
 *     max-width:     420px
 *     margin-bottom: 36px
 *
 *   Solid btn:  bg #1a8fe8, white, 13px 28px, radius 4px, 14px 700
 *   Outline btn: transparent, border 2px solid white, white text, same size
 */

/* ── Scope ─────────────────────────────────────────────────────────────────── */
.pmiher,
.pmiher * {
  box-sizing: border-box;
}

/* ── Elementor isolation ────────────────────────────────────────────────────── */
.elementor-widget-pmi_hero_section .elementor-widget-container {
  padding: 0 !important;
  margin:  0 !important;
}
.elementor-section:has(.pmiher),
.e-con:has(.pmiher) {
  padding: 0 !important;
  --padding-top: 0 !important; --padding-bottom: 0 !important;
  --padding-left: 0 !important; --padding-right: 0 !important;
}

/* ── Section ─────────────────────────────────────────────────────────────────
   Full-bleed. Background-image set inline. Overlay is a child div.      */
.pmiher {
  position:            relative;
  width:               100%;
  min-height:          480px;
  background-size:     cover;
  background-position: center center;
  background-repeat:   no-repeat;
  display:             flex;
  align-items:         center;     /* vertically centre the content */
  overflow:            hidden;
}

/* ── Overlay ──────────────────────────────────────────────────────────────────
   Deep blue tint over the photo. rgba values set inline from widget setting. */
.pmiher__overlay {
  position: absolute;
  inset:    0;
  z-index:  1;
}

/* ── Content ──────────────────────────────────────────────────────────────────
   Left-aligned. Max-width ~50% keeps text on the left half of image.    */
.pmiher__content {
  position:    relative;
  z-index:     2;                    /* above overlay */
  width:       100%;
  max-width:   1400px;
  margin:      0 auto;
  padding:     80px 40px 80px 140px; /* left: ~140px matches container indent */
}

/* ── Headline ─────────────────────────────────────────────────────────────────
   Very large, bold white. ~64px, weight 900.                            */
.pmiher__headline {
  font-family:    'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:      64px;
  font-weight:    900;
  line-height:    1.05;
  letter-spacing: -0.02em;
  color:          #ffffff;
  max-width:      520px;
  margin-bottom:  24px;
  /* WP guards */
  text-transform: none;
  border:  none;
  padding: 0;
  margin-top: 0;
}

/* ── Sub-headline ─────────────────────────────────────────────────────────────
   Light, readable, slightly transparent white.                          */
.pmiher__sub {
  font-family:  'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:    15px;
  font-weight:  400;
  line-height:  1.65;
  color:        rgba(255, 255, 255, 0.88);
  max-width:    420px;
  margin-bottom: 36px;
  padding: 0;
}

/* ── CTA buttons ──────────────────────────────────────────────────────────────
   Side by side. Solid blue + white outline.                             */
.pmiher__ctas {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-wrap:   wrap;
}

/* Base button */
.pmiher__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         13px 28px;
  border-radius:   4px;
  font-family:     'DM Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-size:       14px;
  font-weight:     700;
  letter-spacing:  0.01em;
  line-height:     1;
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  transition:
    background-color 0.18s ease,
    border-color     0.18s ease,
    color            0.18s ease,
    transform        0.15s ease,
    box-shadow       0.18s ease;
}
.pmiher__btn:hover  { transform: translateY(-1px); }
.pmiher__btn:active { transform: translateY(0); }

/* Solid — PMI bright blue (#1a8fe8) */
.pmiher__btn--solid {
  background:  #1a8fe8;
  border:      2px solid #1a8fe8;
  color:       #ffffff;
}
.pmiher__btn--solid:hover {
  background:   #1279cc;
  border-color: #1279cc;
  box-shadow:   0 4px 20px rgba(26, 143, 232, 0.45);
}
.pmiher__btn--solid:focus-visible {
  outline: 3px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
}

/* Outline — transparent, 2px white border */
.pmiher__btn--outline {
  background: transparent;
  border:     2px solid #ffffff;
  color:      #ffffff;
}
.pmiher__btn--outline:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.pmiher__btn--outline:focus-visible {
  outline: 3px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .pmiher__content  { padding-left: 80px; }
  .pmiher__headline { font-size: 52px; }
}

@media (max-width: 900px) {
  .pmiher__content  { padding: 60px 40px; }
  .pmiher__headline { font-size: 44px; max-width: 100%; }
  .pmiher__sub      { max-width: 100%; }
}

@media (max-width: 640px) {
  .pmiher__content  { padding: 48px 20px; }
  .pmiher__headline { font-size: 34px; }
  .pmiher__sub      { font-size: 14px; }
  .pmiher__ctas     { flex-direction: column; align-items: flex-start; }
  .pmiher__btn      { width: auto; }
}

@media (max-width: 420px) {
  .pmiher__headline { font-size: 28px; }
  .pmiher__btn      { padding: 11px 20px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .pmiher__btn { transition: none; transform: none !important; }
}