/* Vores egne tilføjelser til marketingsiden.

   Holdes bevidst adskilt fra marketing.css, som er et bygget stylesheet hentet ned
   fra den tidligere hosting. Bliver siden en dag eksporteret igen, bliver den fil
   overskrevet - denne overlever. */

/* Hele E-Vagt-kortet skal kunne klikkes, ikke kun "Se licenser" nederst. Nogen der
   trykker midt på kortet mener det samme som nogen der rammer linjen.

   Løsningen er et gennemsigtigt lag, der lægges oven på kortet og hører til linket.
   Teksten bliver hvor den er, markøren viser en hånd over hele fladen, og der er
   ikke brug for JavaScript - siden er statisk og skal blive ved med at være det.

   Kortet skal være position: relative, for at laget måler sig efter kortet og ikke
   efter siden. Det havde ingen position i forvejen, så intet andet flytter sig. */
.product-card {
  position: relative;
}

.product-card .card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Både E-Vagt- og E-APV-kortet har laget. E-Table er "under udvikling" og har
   ingen destination, så det skal ikke se ud som om, det kan klikkes. */

/* ---------------------------------------------------------------- FAQ

   Bygget på <details>/<summary>, så harmonikaen virker uden en linje JavaScript.
   Marketingsiden er statisk og skal blive ved med at være det - se noten øverst. */

.faq {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 0;
}

.faq-item {
  border-top: 1px solid #dce4ea;
}

.faq-item:last-child {
  border-bottom: 1px solid #dce4ea;
}

.faq-item > summary {
  cursor: pointer;
  padding: 22px 44px 22px 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.4px;
  position: relative;
  list-style: none;
}

/* Safari og Chrome tegner hver sin trekant. Vi laver vores egen nedenfor. */
.faq-item > summary::-webkit-details-marker {
  display: none;
}

.faq-item > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid #70b800;
  border-bottom: 2.5px solid #70b800;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}

.faq-item[open] > summary::after {
  transform: translateY(-20%) rotate(225deg);
}

.faq-item > summary:hover {
  color: #70b800;
}

.faq-item > p {
  margin: 0 0 24px;
  padding-right: 44px;
  color: var(--slate, #4a5568);
  font-size: 16px;
  line-height: 1.7;
}

/* Tastaturbrugere skal kunne se, hvor de er. */
.faq-item > summary:focus-visible {
  outline: 2px solid #70b800;
  outline-offset: 4px;
  border-radius: 4px;
}

/* Noget i det importerede marketing.css forstyrrer browserens egen sammenklapning
   af <details> - selv et helt almindeligt details-element blev stående åbent på
   siden. Frem for at lede efter reglen i 110 KB genereret CSS gør vi det eksplicit.
   Det er robust uanset browser og uanset hvad der senere måtte komme i det byggede
   stylesheet, når marketingsiden en dag eksporteres igen. */
.faq-item > *:not(summary) {
  display: none;
}

.faq-item[open] > *:not(summary) {
  display: block;
}

/* ---------------------------------------------------------------- Login-valget

   /log-ind viser de to værktøjer som kort. Produktgriddet på forsiden er bygget til
   tre kort, og med kun to bliver den tredje kolonne stående tom, så kortene lander
   til venstre frem for i midten. Her sættes derfor to kolonner eksplicit.

   Kortene bruger .card-link ovenfor, så hele fladen kan klikkes - det er endnu mere
   værd her end på forsiden, hvor kortet kun er en henvisning. Her ér kortet knappen. */
.login-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
  margin-inline: auto;
}

/* Forsidens produktkort har min-height: 560px, fordi de rummer en punktliste med tre
   linjer. Kortene her har kun en enkelt sætning, og arver de den højde, står der over
   200px tomt under knappen. Højden skal følge indholdet. */
.login-grid .product-card {
  min-height: 0;
}

/* Under 640px står de over hinanden, som resten af siden gør. */
@media (max-width: 640px) {
  .login-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Bemærkningen til medarbejderen, der leder efter et login, hun ikke har. Den skal
   kunne læses uden at fylde mere end kortene over den. */
.login-note {
  max-width: 720px;
  margin: 28px auto 0;
  padding: 16px 18px;
  background: #f4f7f2;
  border-radius: 10px;
  color: var(--slate, #4a5568);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------------------------------------------------------------- Samtykkebanner

   Vises kun, indtil der er svaret én gang. Det ligger nederst frem for at dække
   indholdet: en besøgende, der lige er landet, skal kunne læse, hvad siden handler om,
   mens hun tager stilling.

   Begge knapper har samme vægt. Et "nej" må ikke være sværere at ramme end et "ja" -
   ellers er samtykket ikke frit, og så er det ikke et samtykke. */
.consent-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: #ffffff;
  border-top: 1px solid #dce4ef;
  box-shadow: 0 -6px 24px rgba(16, 43, 85, 0.1);
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
}

.consent-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.consent-text {
  flex: 1;
  min-width: 260px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #102b55;
}

.consent-text a {
  color: #0a1d3b;
}

.consent-buttons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.consent-accept,
.consent-decline {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #102b55;
}

.consent-accept {
  background: #102b55;
  color: #ffffff;
}

.consent-decline {
  background: #ffffff;
  color: #102b55;
}

.consent-accept:hover,
.consent-decline:hover {
  opacity: 0.88;
}

@media (max-width: 560px) {
  .consent-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .consent-buttons button {
    flex: 1;
  }
}