/* shared.css — Hire Me ECE */

/* ── MOBILE NAV OVERLAY ──────────────────────────────────────────────────── */
#mob-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 31, 56, 0.55);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .25s ease;
}
#mob-overlay.open { display: flex; }
#mob-overlay.open { opacity: 1; }

@keyframes slideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

#mob-panel {
  margin-left: auto;
  width: min(320px, 88vw);
  height: 100%;
  background: #fff;
  padding: 28px 28px 40px;
  display: flex; flex-direction: column; gap: 0;
  animation: slideIn .28s ease forwards;
  box-shadow: -8px 0 32px rgba(14,31,56,.14);
}

#mob-close {
  display: flex; align-items: center; justify-content: center;
  align-self: flex-end;
  width: 36px; height: 36px; border-radius: 50%;
  border: .5px solid rgba(14,31,56,.15);
  background: #F9F6F0; cursor: pointer;
  margin-bottom: 32px; flex-shrink: 0;
  transition: background .2s;
}
#mob-close:hover { background: #e8d5a8; }

#mob-links {
  display: flex; flex-direction: column; gap: 4px; flex: 1;
}
#mob-links a {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px; font-weight: 400;
  color: #0E1F38; text-decoration: none;
  padding: 13px 0;
  border-bottom: .5px solid rgba(14,31,56,.08);
  transition: color .2s;
}
#mob-links a:hover { color: #C5A05A; }
#mob-links a:last-child { border-bottom: none; }

.mob-cta {
  display: block; text-align: center;
  background: #0E1F38; color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: .04em;
  padding: 14px 24px; border-radius: 4px;
  text-decoration: none; margin-top: 28px;
  transition: background .2s;
}
.mob-cta:hover { background: #1a3459; }

/* ── SCROLL REVEAL ──────────────────────────────────────────────────────── */
.sr {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
}
.sr-visible {
  opacity: 1;
  transform: none;
}

/* ── FLOATING CTA BUTTON (mobile) ──────────────────────────────────────── */
#fab-cta {
  display: none;
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  z-index: 150;
  background: #C5A05A; color: #0E1F38;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  padding: 14px 32px; border-radius: 40px;
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(197,160,90,.45);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .35s ease, background .2s;
  white-space: nowrap;
  opacity: 0;
}
#fab-cta.fab-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
#fab-cta:hover { background: #b8913f; }

@media (min-width: 768px) {
  #fab-cta { display: none !important; }
}
@media (max-width: 767px) {
  #fab-cta { display: block; }
}

/* ── FAQ ACCORDION ──────────────────────────────────────────────────────── */
.faq-item {
  border-bottom: .5px solid rgba(14,31,56,.1);
}
.faq-item:first-child { border-top: .5px solid rgba(14,31,56,.1); }

.faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 0; cursor: pointer;
  font-size: 15px; font-weight: 500; color: #0E1F38;
  list-style: none; gap: 16px;
  transition: color .2s;
  user-select: none;
}
.faq-q:hover { color: #C5A05A; }

.faq-icon {
  flex-shrink: 0; width: 22px; height: 22px;
  border-radius: 50%; border: 1.5px solid rgba(14,31,56,.2);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, border-color .2s, transform .3s;
}
.faq-icon svg { transition: transform .3s; }
.faq-item.open .faq-icon { background: #C5A05A; border-color: #C5A05A; transform: rotate(45deg); }
.faq-item.open .faq-icon svg path { stroke: #0E1F38; }
.faq-item.open .faq-q { color: #C5A05A; }

.faq-a {
  max-height: 0; overflow: hidden;
  font-size: 14px; color: #6B7280; line-height: 1.8;
  transition: max-height .35s ease, padding .25s ease;
  padding: 0;
}
.faq-item.open .faq-a { max-height: 300px; padding-bottom: 20px; }

/* ── HOW IT WORKS ───────────────────────────────────────────────────────── */
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 52px;
}
.hiw-step {
  display: flex; flex-direction: column; gap: 14px;
  padding: 28px 24px;
  background: #fff;
  border: .5px solid rgba(14,31,56,.08);
  border-radius: 12px;
  position: relative;
}
.hiw-step::before {
  content: attr(data-num);
  position: absolute; top: -14px; left: 24px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 52px; font-weight: 600; color: #e8d5a8;
  line-height: 1;
}
.hiw-title { font-size: 16px; font-weight: 500; color: #0E1F38; margin-top: 24px; }
.hiw-desc { font-size: 13px; color: #6B7280; line-height: 1.75; }

@media (max-width: 768px) {
  .hiw-grid { grid-template-columns: 1fr; gap: 24px; }
}