/* ==========================================================================
   RP IT Solutions — Header menu (desktop bar, dropdown panels, mobile menu)
   Add to: divi-child/assets/css/custom.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Desktop header bar
   -------------------------------------------------------------------------- */
.rp-header-bar {
  padding: 18px 32px !important;          /* ↕ 18px top/bottom · ↔ 32px left/right */
  background: #FFFFFF !important;
  border-bottom: 1px solid #E7E5E4;
  position: relative;
  z-index: 100;
}
.rp-header-bar .et_pb_row {
  width: 100% !important;
  max-width: 1200px !important;
  padding: 0 !important;
}

/* logo */
.rp-header-logo {
  width: 150px !important;
  flex: none !important;
  margin: 0 !important;
}
.rp-header-logo img {
  width: 150px;
  height: auto;
  display: block;
}

/* all 5 nav items */
.rp-nav-item {
  margin: 0 !important;
  padding: 10px 0 !important;             /* ↕ 10px top/bottom · ↔ 0 */
  border-bottom: 2px solid transparent;
}
.rp-nav-item,
.rp-nav-item p,
.rp-nav-item a {
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: #1C1917 !important;
  text-decoration: none !important;
}
.rp-nav-item p {
  margin: 0 !important;
  padding: 0 !important;
}

/* the 3 dropdown triggers: chevron drawn by CSS, rotates when open */
.rp-nav-trigger {
  cursor: pointer;
  user-select: none;
}
.rp-nav-trigger p {
  display: flex;
  align-items: center;
  gap: 6px;                               /* ↔ text to chevron */
}
.rp-nav-trigger p::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
  transition: transform .2s ease;
}
/* open state — class is-open is switched on in Section 3 */
.rp-nav-trigger.is-open { border-bottom-color: #C2410C; }
.rp-nav-trigger.is-open p::after { transform: rotate(180deg); }

/* Contact us button */
.rp-btn-dark {
  margin: 0 !important;
  flex: none !important;
}
.et_pb_button.rp-btn-dark,
.rp-btn-dark .et_pb_button {
  display: inline-block;
  background: #1C1917 !important;
  color: #FFFFFF !important;
  font-family: 'Instrument Sans', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  padding: 11px 18px !important;          /* ↕ 11px top/bottom · ↔ 18px left/right */
  border: 0 !important;
  border-radius: 2px !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}
.et_pb_button.rp-btn-dark:hover,
.rp-btn-dark .et_pb_button:hover {
  background: #44403C !important;
  padding: 11px 18px !important;          /* stop Divi's hover padding shift */
}
.et_pb_button.rp-btn-dark::after,
.rp-btn-dark .et_pb_button::after {
  display: none !important;               /* no Divi arrow icon */
}

/* desktop bar only above 980px — the mobile header takes over below */
@media (max-width: 980px) {
  .rp-header-bar { display: none !important; }
}


/* --------------------------------------------------------------------------
   2 · Dropdown panels (Development now; White label + Marketing reuse it)
   Hidden until the panel has class  is-open  (switched on in Section 3).
   While building: add  is-open  to the panel Section's class, remove after.
   -------------------------------------------------------------------------- */

/* the header is the anchor the panels hang from */
.et-l--header { position: relative; z-index: 1000; }
.et-l--header .et_builder_inner_content { position: relative; }

.rp-mega {
  position: absolute !important;
  top: 100%;                              /* directly under the header bar */
  left: 0;
  right: 0;
  z-index: 99;                            /* under the bar (100) */
  padding: 40px 32px 0 !important;        /* ↕ 40px top, 0 bottom · ↔ 32px left/right */
  margin: 0 !important;
  background: #FFFFFF !important;
  border-bottom: 1px solid #D6D3D1;
  font-family: 'Instrument Sans', system-ui, sans-serif;
  color: #1C1917;
}
.rp-mega:not(.is-open) { display: none !important; }

/* dimmed page under the open panel */
.rp-mega::after {
  content: "";
  position: absolute;
  top: calc(100% + 1px);                  /* below the 1px border */
  left: 0;
  right: 0;
  height: 100vh;
  background: rgba(28, 25, 23, 0.55);
}

/* rows: same 1200px content width as the bar */
.rp-mega .et_pb_row {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* 3 columns row */
.rp-mega-cols {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 32px 56px !important;              /* ↕ 32px if they wrap · ↔ 56px between columns */
}
.rp-mega-cols > .et_pb_column {
  flex: 1 1 240px !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;                    /* ↕ heading to links */
}
:where(.rp-mega-cols) .et_pb_module { margin: 0 !important; }

/* column heading: icon + small caps label + divider */
.rp-mega-head {
  margin: 0 0 6px !important;             /* ↕ 6px + the 6px column gap = 12px below the divider */
  padding: 0 0 12px !important;           /* ↕ 12px above the divider */
  border-bottom: 1px solid #E7E5E4;
}
.rp-mega-head p {
  display: flex;
  align-items: center;
  gap: 10px;                              /* ↔ icon to label */
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #57534E !important;
}
.rp-mega-head p::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  background: center / 20px 20px no-repeat;
}
.rp-icon-web p::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1917' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E"); }
.rp-icon-mobile p::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1917' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.rp-icon-software p::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1917' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l-4 4 4 4'/%3E%3Cpath d='M16 8l4 4-4 4'/%3E%3Cpath d='M13.5 6l-3 12'/%3E%3C/svg%3E"); }

/* service links — ONE Text module per column, class  rp-mega-links
   HTML pasted in the Code tab, one <a> per service:
   <a href="/url/"><span>Title</span><span>Description</span></a>
   (works whether the editor wraps them in one <p>, one <p> each, or adds <br>) */
.rp-mega-links .et_pb_text_inner,
.rp-mega-links p {
  display: flex;
  flex-direction: column;
  gap: 6px;                               /* ↕ between links */
  margin: 0 !important;
  padding: 0 !important;
}
.rp-mega-links br { display: none; }
.rp-mega-links a {
  display: flex;
  flex-direction: column;
  gap: 2px;                               /* ↕ title to description */
  padding: 10px 12px;                     /* ↕ 10px · ↔ 12px */
  margin: 0 -12px;                        /* ↔ text stays aligned with the heading */
  border-radius: 2px;
  color: #1C1917 !important;
  text-decoration: none !important;
  transition: background-color .15s ease;
}
.rp-mega-links a:hover,
.rp-mega-links a:focus-visible { background: #F5F5F4; }
.rp-mega-links a > span:first-child {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
}
.rp-mega-links a > span:last-child {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;
  color: #57534E;
}

/* footer strip: question left, link right */
.rp-mega-foot { margin: 32px 0 0 !important; }  /* ↕ 32px above the strip */
.rp-mega-foot p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 32px;                         /* ↕ 12px if it wraps · ↔ 32px */
  margin: 0 !important;
  padding: 18px 0 22px !important;        /* ↕ 18px top, 22px bottom */
  border-top: 1px solid #E7E5E4;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #44403C !important;
}
.rp-mega-foot a {
  color: #1C1917 !important;              /* blueprint: charcoal, plain underline */
  font-weight: 600;
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
}
.rp-mega-foot a:hover { color: #57534E !important; }

/* EDIT MODE: in the Divi builder the panel can't hang under the header,
   so it would be invisible. Add class  rp-edit  to the panel Section while
   you build it — it then sits in normal flow, visible, with no dim layer.
   (body.et-fb covers Divi builders that add that class automatically.) */
.rp-mega.rp-edit,
body.et-fb .rp-mega {
  display: block !important;
  position: relative !important;
  top: auto;
  z-index: 1;
}
.rp-mega.rp-edit::after,
body.et-fb .rp-mega::after { display: none; }

/* panels are desktop only */
@media (max-width: 980px) {
  .rp-mega { display: none !important; }
}