/* ============================================================
   HITACHI AMERICAS | PRESS RELEASE GATED ASSET | FORM 109
   Dedicated AEM modal + ActiveCampaign CSS

   Use INSTEAD OF data-center-form-v1.css and the earlier
   press-release override <style> block in the AEM embed.
   Keep the unmodified ActiveCampaign-generated Form 109 CSS.
   Works with press-release-gated-form-v5.js.
   ============================================================ */

@font-face {
  font-family: "Hitachi Sans Regular";
  src: url("https://www.hitachi.com/etc.clientlibs/hitachi/clientlibs/clientlib-site/resources/fonts/HitachiSans/HitachiSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Hitachi Sans Bold";
  src: url("https://www.hitachi.com/etc.clientlibs/hitachi/clientlibs/clientlib-site/resources/fonts/HitachiSans/HitachiSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------- AEM modal shell ---------- */
body.gated-asset-modal-open { overflow: hidden; }

#acModal {
  width: min(980px, calc(100vw - 32px));
  max-width: 980px;
  max-height: min(90vh, 850px);
  /* Native <dialog> can otherwise expand to its max-height despite shorter content. */
  height: fit-content !important;
  margin: auto;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff;
  color: #222222;
  box-shadow: 0 12px 42px rgba(0,0,0,0.28);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  font-family: "Hitachi Sans Regular", Arial, sans-serif;
}
#acModal:not([open]) { display: none !important; }
#acModal::backdrop { background: rgba(0,0,0,0.66); }
#acModal, #acModal * { box-sizing: border-box; }

#acModal .modal-content {
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #ffffff;
  overflow: visible;
}
#acModal .modal-body {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  align-items: stretch !important;
  width: 100%;
  min-height: 460px;
  margin: 0;
  padding: 0;
  gap: 0;
}

/* ---------- Left red brand panel ---------- */
#acModal .modal-image-with-text {
  grid-column: 1;
  grid-row: 1;
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  padding: 36px 26px;
  background: linear-gradient(145deg, #cc0000 0%, #a80000 100%) !important;
  color: #ffffff;
}
#acModal #acModalTitle,
#acModal .modal-image-with-text .overlay-text {
  position: static !important;
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  color: #ffffff !important;
  font-family: "Hitachi Sans Bold", Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700;
  line-height: 1.22 !important;
  text-align: left;
  letter-spacing: -0.2px;
}

/* ---------- Close control ---------- */
#acModal .gated-asset-close,
#acModal #closeModal {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  left: auto !important;
  z-index: 10;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #cc0000 !important;
  font-size: 27px !important;
  line-height: 1 !important;
  cursor: pointer;
}
#acModal .gated-asset-close:focus-visible { outline: 2px solid #cc0000; outline-offset: 3px; }

/* ---------- Right side: form and success take same column ---------- */
#acModal .form-side {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 36px 42px 32px !important;
  background: #ffffff !important;
  float: none !important;
}

/* Crucial: only ONE panel visible at a time. */
#acModal .gated-asset-form-panel[hidden],
#acModal .gated-asset-success[hidden] {
  display: none !important;
  visibility: hidden !important;
}

/* AC still inserts its own thank-you text for success detection.
   Keep it in the DOM for the JS callback, but NEVER display it. */
#acModal #_form_109_ ._form-thank-you { display: none !important; }

/* ---------- Normal form ---------- */
#acModal #_form_109_ {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
  color: #222222 !important;
  font-family: "Hitachi Sans Regular", Arial, sans-serif !important;
}
#acModal #_form_109_ ._form-title {
  font-family: "Hitachi Sans Bold", Arial, sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #cc0000 !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  text-align: center !important;
}
#acModal #_form_109_ ._form-content::after {
  content: "";
  display: table;
  clear: both;
}
#acModal #_form_109_ ._form_element { margin-bottom: 16px !important; }
#acModal #_form_109_ ._form-label {
  font-family: "Hitachi Sans Bold", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 0 6px !important;
  color: #222222 !important;
}
#acModal #_form_109_ .field-required { color: #cc0000 !important; }

/* First + Last, Work Email + Company Name, matching Form 109 wrappers. */
#acModal #_form_109_ ._x17395236,
#acModal #_form_109_ ._x50492073 {
  width: 48.5% !important;
  float: left !important;
  clear: both !important;
  display: block !important;
}
#acModal #_form_109_ ._x01331923,
#acModal #_form_109_ ._x13096772 {
  width: 48.5% !important;
  float: right !important;
  clear: none !important;
  display: block !important;
}
#acModal #_form_109_ ._x17395236 input,
#acModal #_form_109_ ._x01331923 input,
#acModal #_form_109_ ._x50492073 input,
#acModal #_form_109_ ._x13096772 input {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 9px 11px !important;
  border: 1px solid #cccccc !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #111111 !important;
  font-family: "Hitachi Sans Regular", Arial, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  box-sizing: border-box !important;
}
#acModal #_form_109_ input::placeholder { color: #777777 !important; opacity: 1; }
#acModal #_form_109_ input:focus-visible { outline: 2px solid #666666; outline-offset: 1px; }

/* Marketing consent, including Hitachi Group Companies link. */
#acModal #_form_109_ ._x55844420,
#acModal #_form_109_ ._x76947495,
#acModal #_form_109_ ._button-wrapper {
  width: 100% !important;
  float: none !important;
  clear: both !important;
}
#acModal #_form_109_ ._x55844420 ._html-code p {
  margin: 10px 0 8px !important;
  line-height: 1.55 !important;
}
#acModal #_form_109_ ._x76947495 ._form-label { display: none !important; }
#acModal #_form_109_ ._x76947495 ._form-fieldset { border: 0; padding: 0; margin: 0; }
#acModal #_form_109_ ._checkbox-radio {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  margin: 0 24px 0 0 !important;
  padding: 0 !important;
}
#acModal #_form_109_ ._checkbox-radio input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 7px 0 0 !important;
  accent-color: #cc0000;
}
#acModal #_form_109_ ._checkbox-radio label { display: inline !important; width: auto !important; margin: 0 !important; }
#acModal #_form_109_ #hitachi-group-company {
  color: #cc0000 !important;
  text-decoration: underline !important;
  cursor: help !important;
}

/* Hidden attribution fields and legacy Event Name: still submitted. */
#acModal #_form_109_ .ga-hidden-field { display: none !important; }

/* Form submit */
#acModal #_form_109_ ._button-wrapper {
  text-align: center !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
}
#acModal #_form_109_ ._submit {
  display: inline-block;
  width: auto !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 12px 26px !important;
  background: #cc0000 !important;
  border: 1px solid #cc0000 !important;
  border-radius: 3px !important;
  color: #ffffff !important;
  font-family: "Hitachi Sans Bold", Arial, sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  cursor: pointer;
}
#acModal #_form_109_ ._submit:hover { background: #a80000 !important; border-color: #a80000 !important; }

/* Validation: retain our JS's compact inline messages. */
#acModal #_form_109_ ._error-arrow { display: none !important; }
#acModal #_form_109_ ._error { max-width: 100% !important; }
#acModal #_form_109_ ._error-inner { text-align: left !important; }

/* ---------- Confirmation: fills the RIGHT panel ---------- */
#acModal .gated-asset-success:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 460px;
  text-align: center !important;
}
#acModal .gated-asset-success h2 {
  display: block;
  width: 100% !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: #cc0000 !important;
  font-family: "Hitachi Sans Bold", Arial, sans-serif !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  text-align: center !important;
}
#acModal .gated-asset-success p {
  display: block;
  width: auto !important;
  max-width: 48ch;
  margin: 0 auto 22px !important;
  color: #333333 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  text-align: center !important;
}
#acModal .gated-asset-success .gated-asset-view {
  align-self: center !important;
  display: inline-block !important;
  width: auto !important;
  min-height: 46px;
  padding: 12px 24px !important;
  border: 1px solid #cc0000 !important;
  border-radius: 3px !important;
  background: #cc0000 !important;
  color: #ffffff !important;
  text-decoration: none !important;
  text-align: center !important;
  font-family: "Hitachi Sans Bold", Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}
#acModal .gated-asset-success .gated-asset-view:hover { background: #a80000 !important; }

/* ---------- Hitachi Group Companies tooltip ---------- */
#acModal .gated-asset-group-tooltip {
  position: absolute !important;
  display: none !important;
  width: 560px;
  max-width: calc(100% - 28px) !important;
  max-height: min(420px, calc(100% - 28px)) !important;
  overflow-y: auto !important;
  padding: 16px 18px !important;
  background: #222222 !important;
  color: #ffffff !important;
  border-radius: 5px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
  font-family: "Hitachi Sans Regular", Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-align: left !important;
  z-index: 99 !important;
  pointer-events: none !important; /* anti-flicker on desktop */
}
#acModal .gated-asset-group-tooltip.is-visible { display: block !important; }
#acModal .gated-asset-group-tooltip.is-measuring { display: block !important; visibility: hidden !important; }
#acModal .gated-asset-group-tooltip ul {
  columns: 2;
  column-gap: 30px;
  margin: 0 !important;
  padding: 0 0 0 18px !important;
  list-style: disc outside !important;
}
#acModal .gated-asset-group-tooltip li {
  display: list-item !important;
  break-inside: avoid;
  margin: 0 0 5px !important;
  padding: 0 !important;
  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  list-style: disc outside !important;
}
#acModal .gated-asset-group-tooltip-close { display: none !important; }

/* ---------- Mobile and narrow modals ---------- */
@media (max-width: 736px) {
  #acModal { width: calc(100vw - 20px); max-height: 92vh; }
  #acModal .modal-body {
    display: block !important;
    min-height: 0;
  }
  #acModal .modal-image-with-text {
    display: block !important;
    width: 100% !important;
    min-height: 0;
    padding: 20px 50px 20px 22px;
  }
  #acModal #acModalTitle,
  #acModal .overlay-text { font-size: 23px !important; }
  #acModal .form-side {
    display: block;
    width: 100% !important;
    padding: 24px 22px 28px !important;
  }
  #acModal .gated-asset-success:not([hidden]) { min-height: 230px; }
  #acModal .gated-asset-success h2 { font-size: 27px !important; }
  #acModal #_form_109_ ._x17395236,
  #acModal #_form_109_ ._x01331923,
  #acModal #_form_109_ ._x50492073,
  #acModal #_form_109_ ._x13096772 {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
  }
}
@media (max-width: 600px) {
  #acModal .gated-asset-group-tooltip {
    max-width: calc(100% - 36px) !important;
    max-height: min(420px, calc(100% - 36px)) !important;
    padding: 14px 16px !important;
    pointer-events: auto !important; /* scroll / close on touch */
  }
  #acModal .gated-asset-group-tooltip ul { columns: 1; }
  #acModal .gated-asset-group-tooltip-close {
    display: block !important;
    float: right;
    margin: -7px -8px 5px 10px;
    padding: 4px 8px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }
}