/*============================================================
  Report page: standalone stylesheet (no other CSS file needed)
============================================================*/

/*============================================================ Vars ============================================================*/
:root {
  --header-h: clamp(60px, 10vh, 120px);
  --gutter: 2rem;
  --cols: 6;                 /* number of background columns */
  --line: #cecece;
  --ink: #111;
  --orange: #ff491b;
}

html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

/*============================================================ Fonts ============================================================*/
@font-face {
  font-family: 'title';
  src: url('fonts/Futura.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'subtitle';
  src: url('fonts/PTMono.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

h1 {
  font-family: 'title', sans-serif;
  padding: 0 var(--gutter);
  font-size: 2.3rem;
}

.section-title {
  margin: 4rem 0 1.5rem;
  padding: 0 var(--gutter);
}

/*============================================================ Header ============================================================*/
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  box-sizing: border-box;
  padding: 0 var(--gutter);
  z-index: 100;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* white + blur layer that fades out at the bottom */
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 160%;
  z-index: -1;
  pointer-events: none;

  background: rgb(255 255 255 / 60%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.brand {
  justify-self: start;
  font-family: 'title', sans-serif;
  color: inherit;
  text-decoration: none;
}

.nav {
  display: flex;
  gap: 2rem;
}

.nav a {
  font-family: 'title', sans-serif;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease-out;
}

.nav a:hover { color: var(--orange); }

#Myvault {
  font-family: 'title', sans-serif;
  justify-self: end;
  width: 150px;
  height: 70%;
  background-color: var(--orange);
  border: none;
  cursor: pointer;
  font-size: large;
  transition: all 0.2s ease-out;
}

#Myvault:hover { background-color: #fd7756; }

/*============================================================ Background ============================================================*/
.BG {
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h);
  min-height: 100vh;
  background-color: #EBEBEB;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc(100% / var(--cols)) 100%;   /* columns scale with the screen */
}

/*============================================================ Footer ============================================================*/
footer {
  font-family: 'subtitle', sans-serif;
  background-color: #696464;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

footer ul {
  margin: 0;
  padding: 1rem var(--gutter);
  list-style: none;
}

footer a {
  text-decoration: none;
  color: inherit;
}

/*============================================================ Report form ============================================================*/

.report {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));   /* same columns as the background lines */
  align-items: start;
  row-gap: 2rem;
  margin-bottom: 6rem;
  flex: 1;
}

/* left: short explanation, sits on the first two columns */
.report-intro {
  grid-column: 1 / span 2;
  padding: 0 var(--gutter);
  font-family: 'subtitle', sans-serif;
  line-height: 1.5;
}

.report-intro p { margin: 0 0 1rem; }

.report-lead {
  font-family: 'title', sans-serif;
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.2;
}

.report-hint { opacity: 0.7; font-size: 0.85rem; }

/* right: the form box, same look as the Features boxes (line + square corners) */
.report-form {
  --dot: 8px;
  grid-column: 3 / span 4;
  position: relative;
  margin-right: var(--gutter);
  padding: 2rem;
  box-sizing: border-box;
  background: #EBEBEB;                 /* hides the column lines behind the form */
  outline: 2px solid var(--ink);
  outline-offset: -1px;
  font-family: 'subtitle', sans-serif;
}

.report-form::before {
  content: "";
  position: absolute;
  inset: calc(var(--dot) / -2);
  pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) left top,
    linear-gradient(var(--ink), var(--ink)) right top,
    linear-gradient(var(--ink), var(--ink)) left bottom,
    linear-gradient(var(--ink), var(--ink)) right bottom;
  background-size: var(--dot) var(--dot);
  background-repeat: no-repeat;
}

/* fields */
.field { margin-bottom: 1.75rem; position: relative; }

.field label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: 'title', sans-serif;
  font-size: 1.1rem;
}

.field input[type="text"],
.field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.9rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: 'subtitle', sans-serif;
  font-size: 1rem;
  transition: background 0.2s ease-out, border-color 0.2s ease-out;
}

.field textarea { resize: vertical; min-height: 9rem; }

.field input::placeholder,
.field textarea::placeholder { color: rgba(0, 0, 0, 0.45); }

.field input:hover,
.field textarea:hover { background: rgb(255 73 27 / 8%); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--orange);
  background: rgb(255 73 27 / 12%);
}

.field.invalid input,
.field.invalid textarea,
.field.invalid .dd-btn { border-color: #c01800; }

.field-foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.counter { font-size: 0.8rem; opacity: 0.7; white-space: nowrap; margin-top: 0.4rem; }

.field-error {
  min-height: 1.2em;
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: #c01800;
}

.field-foot .field-error { flex: 1; }

/* the plain <select> stays in the page for browsers without JS; the script hides it */
.field select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.9rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  font-family: 'subtitle', sans-serif;
  font-size: 1rem;
}

.field select.is-enhanced {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* styled dropdown */
.dd { position: relative; }

.dd-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.9rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: 'subtitle', sans-serif;
  font-size: 1rem;
  transition: background 0.2s ease-out, border-color 0.2s ease-out;
}

.dd-btn:hover { background: rgb(255 73 27 / 8%); }

.dd-btn:focus-visible,
.dd-btn[aria-expanded="true"] {
  outline: none;
  border-color: var(--orange);
  background: var(--orange);
}

.dd-btn.is-placeholder .dd-value { color: rgba(0, 0, 0, 0.45); }
.dd-btn[aria-expanded="true"] .dd-value { color: inherit; }

.dd-arrow { transition: transform 0.3s ease-out; }
.dd-btn[aria-expanded="true"] .dd-arrow { transform: rotate(180deg); }

.dd-list {
  position: absolute;
  z-index: 5;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 20rem;
  overflow-y: auto;
  border: 2px solid var(--ink);
  border-top: 0;
  background: #EBEBEB;
}

.dd-list[hidden] { display: none; }

.dd-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1rem;
  cursor: pointer;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  transition: background 0.15s ease-out;
}

.dd-list li:first-child { border-top: 0; }

.dd-list li.active { background: var(--orange); }

.dd-list li[aria-selected="true"]::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--ink);       /* same little square as the box corners */
}

/* send button: same look as "My vault" */
.form-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.btn-send {
  height: 3.2rem;
  padding: 0 2.5rem;
  border: none;
  background-color: var(--orange);
  color: inherit;
  cursor: pointer;
  font-family: 'title', sans-serif;
  font-size: large;
  transition: all 0.2s ease-out;
}

.btn-send:hover { background-color: #fd7756; }
.btn-send:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-send:disabled { opacity: 0.6; cursor: wait; }

.form-status { margin: 0; font-size: 0.9rem; }
.form-status.ok { color: #14671f; }
.form-status.error { color: #c01800; }

/* honeypot: out of sight, but not display:none (bots would skip it) */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* tablets and phones */
@media (max-width: 900px) {
  .report-intro,
  .report-form { grid-column: 1 / -1; }
  .report-form { margin: 0 var(--gutter); padding: 1.5rem; }
}

/* phones (kept at the end so it overrides the rules above) */
@media (max-width: 600px) {
  header { grid-template-columns: 1fr auto; }
  .nav { display: none; }
  #Myvault { width: 120px; }
  footer { grid-template-columns: 1fr; justify-items: start; padding: 1rem 0; }
  footer p { margin: 0; padding: 0 var(--gutter); }
}