/* =================================
   Space Vanta Theme 1.0
   DNA: header frame
   Path: public/header/dna/frame.css

   - Cool silver metal hairline around a warm-white, chamfered island
   - Broken divider above the navigation row
   - Seam of blue light on the bottom edge
   - Announcement light line
   Static only. Motion comes in a later phase.
   ================================= */

/* ---------- Island surface: silver edge + warm-white face ---------- */
.sv-header {
  --sv-cut-poly: polygon(
    var(--sv-cut) 0, 100% 0,
    100% calc(100% - var(--sv-cut)), calc(100% - var(--sv-cut)) 100%,
    0 100%, 0 var(--sv-cut)
  );
  --sv-cut-poly-in: polygon(
    calc(var(--sv-cut) - 0.4px) 0, 100% 0,
    100% calc(100% - var(--sv-cut) + 0.4px), calc(100% - var(--sv-cut) + 0.4px) 100%,
    0 100%, 0 calc(var(--sv-cut) - 0.4px)
  );
}

.sv-header__surface::before,
.sv-header__surface::after {
  content: "";
  position: absolute;
}

.sv-header__surface::before {
  inset: 0;
  clip-path: var(--sv-cut-poly);
  background: linear-gradient(
    115deg,
    #ffffff 0%, #d2d3d8 22%, #f6f4f0 46%, #b9bcc4 74%, #ffffff 100%
  );
}

.sv-header__surface::after {
  inset: 1px;
  clip-path: var(--sv-cut-poly-in);
  background: linear-gradient(180deg, #fffefb 0%, #fbf8f2 100%);
}

/* ---------- Broken divider between the two rows ----------
   A grid item of its own: sits at the top of row 2, over nav + brand. */
.sv-header__bar::before {
  content: "";
  grid-column: 2 / -1;
  grid-row: 2;
  align-self: start;
  height: 1px;
  margin-top: -3px;
  background: linear-gradient(
    90deg,
    var(--sv-line) 0 30%, transparent 30% 31.6%, var(--sv-line) 31.6% 100%
  );
}
.sv-header.is-condensed .sv-header__bar::before { display: none; }

@media (max-width: 900px) {
  .sv-header__bar::before { display: none; }
}

/* ---------- Seam of light on the bottom edge ---------- */
.sv-header::after {
  content: "";
  position: absolute;
  left: 15%;
  bottom: 0;
  width: 150px;
  height: 2px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--sv-blue) 35%, var(--sv-blue-2) 70%, transparent 100%);
  box-shadow: 0 0 10px var(--sv-blue-glow);
}

.sv-header::before {
  content: "";
  position: absolute;
  left: calc(15% + 160px);
  bottom: 0;
  width: 26px;
  height: 2px;
  z-index: 2;
  pointer-events: none;
  background: var(--sv-blue-2);
  opacity: 0.7;
  box-shadow: 0 0 8px var(--sv-blue-glow);
}

/* ---------- Announcement light line ---------- */
.sv-header__announcement::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0, rgba(150, 140, 126, 0.45) 30%, var(--sv-blue) 50%, rgba(150, 140, 126, 0.45) 70%, transparent 100%
  );
  box-shadow: 0 0 8px var(--sv-blue-glow);
}

/* ---------- Mobile: smaller cut ---------- */
@media (max-width: 900px) {
  .sv-header { --sv-cut: 12px; }
  .sv-header::after { left: 10%; width: 90px; }
  .sv-header::before { left: calc(10% + 100px); }
}