/* quick-contact.css - the two header doors.

   Both panels are anchored top-right dropdowns rather than full-screen modals,
   matching the SecureLynx guide so the header behaves one way rather than two.
   Every colour, radius and transition resolves from colors.css; no new tokens
   are introduced here.

   The mobile rule at the bottom is the one worth reading: navigation.css hides
   .nav-actions .btn below 769px, so on a phone the buttons are not in the bar
   at all. The form is reached from an item inside the open menu instead, and
   the phone number stays where it already is, which is the lowest-effort door
   on a device that is already a telephone. */

.qc-panel,
.qc-panel * ,
.qc-panel *::before,
.qc-panel *::after {
  box-sizing: border-box;
}

.qc-panel,
.qc-panel[hidden],
.qc-panel:not(.is-open) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.qc-panel.is-open {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;

  position: fixed !important;
  top: calc(var(--qc-top, 96px) + 10px) !important;
  right: clamp(14px, 2vw, 32px) !important;
  left: auto !important;

  width: min(420px, calc(100vw - 28px));
  max-height: calc(100dvh - var(--qc-top, 96px) - 24px);

  z-index: 99999 !important;
  background: transparent;

  animation: qcSlide .18s ease both;
}

.qc-panel.qc-panel-small.is-open {
  width: min(320px, calc(100vw - 28px));
}

@keyframes qcSlide {
  from { transform: translateY(-6px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.qc-panel-inner {
  position: relative;
  overflow-y: auto;
  max-height: inherit;

  padding: 22px 22px 20px;

  /* --navy is the site's own panel ground (--bg-panel), lifted rather than
     invented, so the form sits in the same slate family as the rest of the
     furniture instead of reading as a black hole in the page. */
  background: rgba(10, 15, 28, 0.97);
  border: 1px solid rgba(0, 230, 255, 0.18);
  border-radius: var(--radius-md);
  box-shadow: var(--glow-cyan-soft);
}

.qc-close {
  position: absolute;
  top: 10px;
  right: 12px;

  padding: 2px 6px;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;

  transition: color var(--transition-fast);
}

.qc-close:hover,
.qc-close:focus-visible {
  color: var(--cyan);
}

.qc-header h2 {
  margin: 0 0 6px;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.qc-header p {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.6;
}

.qc-field {
  margin-bottom: 12px;
}

.qc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.qc-field label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.qc-req {
  margin-left: 6px;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--cyan);
  text-transform: none;
}

.qc-field input,
.qc-field textarea {
  width: 100%;
  padding: 9px 11px;

  color: var(--white);
  /* A hair lighter than the panel rather than darker, so a field reads as a
     surface to type on instead of a hole cut in the card. */
  background: rgba(245, 247, 250, 0.055);
  border: 1px solid rgba(0, 230, 255, 0.16);
  border-radius: var(--radius-sm, 6px);

  font: inherit;
  font-size: 0.9rem;

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.qc-field textarea {
  resize: vertical;
  min-height: 68px;
}

.qc-field input:focus,
.qc-field textarea:focus {
  outline: none;
  border-color: var(--border-active);
  box-shadow: var(--glow-cyan-soft);
}

.qc-note {
  margin: -2px 0 14px;
  color: var(--text-secondary);
  font-size: 0.74rem;
  line-height: 1.5;
}

.qc-error {
  margin: 0 0 12px;
  padding: 8px 10px;

  color: var(--white);
  background: rgba(255, 90, 90, 0.10);
  border: 1px solid rgba(255, 90, 90, 0.34);
  border-radius: var(--radius-sm, 6px);

  font-size: 0.8rem;
  line-height: 1.5;
}

.qc-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.qc-alt {
  color: var(--text-secondary);
  font-size: 0.78rem;
  transition: color var(--transition-fast);
}

.qc-alt:hover {
  color: var(--cyan);
}

/* The honeypot. Off-screen rather than display:none, because some bots skip
   fields that are explicitly hidden and fill the ones that are not. */
.qc-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.qc-sent h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  color: var(--cyan);
}

.qc-sent p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.6;
}

.qc-links {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.qc-links li {
  margin-bottom: 8px;
}

.qc-links a {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cyan);
  transition: color var(--transition-fast);
}

.qc-links a:hover {
  color: var(--green);
}

.qc-card-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.6;
}

.qc-inline-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cyan);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.qc-inline-link:hover {
  color: var(--green);
}

/* The utility row that replaced the two portal buttons. The links reuse
   .nav-phone from navigation.css so the small-text treatment stays in one
   place; only the row's own layout lives here. */
.nav-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.nav-utility-sep {
  color: var(--text-secondary);
  font-size: 0.6rem;
}

/* Mobile, and this block is LAST in the file on purpose.

   A media query adds no specificity. When .nav-utility { display: flex } sat
   below this block, it won on source order and the row stayed visible on a
   phone no matter what the query said. Base rules go above, the query goes at
   the bottom, and nothing later can undo it.

   navigation.css also sets .nav-actions to display:contents below 769px, which
   promotes its children into the header's own flex row. That is why the row
   landed beside the logo rather than under the buttons. Below 769px the bar is
   the logo and the hamburger, nothing else; every action moves into the
   drawer. */
.nav-mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .nav-mobile-only {
    display: block;
  }

  .nav-utility {
    display: none;
  }

  /* Two of the drawer items are <button> rather than <a>, so the browser paints
     them as buttons: filled background, bevelled border, system font. Everything
     else in .nav-link is class-based and already applies, so only the user-agent
     defaults need clearing for them to read as ordinary menu items. */
  .nav-links button.nav-mobile-only {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(0, 230, 255, 0.07);
    border-radius: 0;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
  }

  /* The two contact actions are set off from the navigation above them and the
     account links below by a rule at each end, heavier than the hairline that
     separates ordinary items. */
  .nav-links .nav-mobile-only[data-quick-contact-open] {
    border-top: 1px solid rgba(0, 230, 255, 0.28);
  }

  .nav-links .nav-mobile-only[data-contact-card-open] {
    border-bottom: 1px solid rgba(0, 230, 255, 0.28);
  }
}