/* ===== Brand palette ===== */
:root {
  --blue: hsl(222, 16%, 32%);
  --navy: #0f172a;
  --gray-dark: #22223b;
  --gray-light: #f1f5f9;
  --white: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e5e7eb;
  --bg: #f8fafc;
  --bg-soft: #e0e7ff; /* lys blålig */
  --bg-alt: #fff1f2;  /* lys pink */
  --accent: #ffffff;  /* pink accent */
  --lime: #451c93;    /* lime accent, hvis du vil prøve noget grønt */
}   


/* ===== Base ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
}
a { color: var(--blue); }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ===== Layout containers ===== */
.container { max-width: 1080px; margin: 0 auto; padding: 1rem; }
.flex { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* ===== Sections (full width blocks) ===== */

.section--blue{
    background:var(--blue); 
    color:var(--white);
}
.section--accent{background:var(--accent); color:var(--white);}
.section--gray-light{background:var(--gray-light);}
.section--white{background:var(--white);}

/* ===== Grid & cards ===== */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .grid{grid-template-columns:1fr;} }
.card {
  border: 1px solid var(--line);
  border-radius: .75rem;
  padding: 1.5rem;
  background: #fff;
}
.card h3 { margin-top: 0; }

/* ===== Header & nav ===== */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.brand { display: flex; align-items: center; gap: .25rem; text-decoration: none; }
.brand-ps { font-weight: 800; color: var(--blue); font-size: 1.25rem; }
.brand-digital { font-weight: 700; color: var(--ink); font-size: 1.25rem; }

.nav a {
  color: var(--ink);
  text-decoration: none;
  margin-left: 1rem;
  border-bottom: 2px solid transparent;
  padding: .25rem 0;
}
.nav a:hover { border-bottom-color:#93c5fd; }

/* ===== Hero ===== */
.container .hero {padding-bottom: 150px;}
.hero h1 { font-size: clamp(1.2rem, 2.1vw + 0.75rem, 1.95rem); margin: .25rem 0; }
.lead { color: var(--ink    ); font-size: 1.125rem; max-width: 60ch; }
.cta-row { display: flex; gap: .75rem; margin-top: 1rem; flex-wrap: wrap; }

/* Hero-billede styling */
.hero__img {
  max-width: 100%;
  width: 100%;
  /*border-radius: 20px;*/
  box-shadow: 0 8px 32px 0 rgba(29, 78, 216, 0.25); /* Blålig skygge */
  /*border: 6px solid rgba(255,255,255,0.15); /* Let hvid/transparent kant */
  background: linear-gradient(135deg, rgba(29,78,216,0.15) 0%, rgba(255,255,255,0.05) 100%);
  object-fit: cover;
}


/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: .7rem 1rem; 
  border-radius: 25px;

  text-decoration: none;
  color: var(--bg);
  font-weight: 700;
  background: var(--blue);
  cursor: pointer;
}

.btn-primary {
  background: var(--bg);
  color: var(--ink);
  border: none;
  transition: background 0.2s;
  border-radius: 25px;
}
.btn-primary:hover {
  background: #be185d;
}

.btn:hover { background: var(--gray-dark); color: var(--white); }

/* ===== Lists ===== */
.muted { color: var(--muted); }
.bullets { padding-left:1.25rem; margin:.5rem 0; }
.bullets li { margin:.25rem 0; }

/* ===== Contact form ===== */
.form { max-width: 720px; }
.field { margin-bottom: 1rem; }
label { display:block; font-weight:600; margin-bottom:.25rem; }
input[type="text"], input[type="email"], textarea {
  width:100%; 
  padding:.7rem .8rem; 
  border:1px solid var(--line); 
  border-radius:.6rem; 
  font:inherit;
}
textarea { resize: vertical; }
.hp { position:absolute; left:-5000px; opacity:0; } /* honeypot */
.alert {
  border-radius:.6rem; 
  padding:.75rem 1rem; 
  margin:0 0 1rem; 
  border:1px solid var(--line); 
  background:#fff;
}
.alert--success { border-color:#86efac; background:#ecfdf5; }

/* ===== Footer ===== */
.site-footer {
  background: var(--blue, #0f172a);
  color: var(--white);
  padding: 2.5rem 0 2rem 0;
  font-size: 1.05rem;
}
/*.site-footer { border-top:1px solid var(--line); padding:1rem 0; color:var(--muted); background:var(--bg); font-size:.9rem; }*/
.site-footer a { color:var(--white); text-decoration:none; }
.site-footer a:hover { text-decoration:underline; }

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-contact a {
  color: var(--white);
  text-decoration: underline;
  display: block;
  margin-bottom: 0.25rem;
}
.footer-contact span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.95em;
  color: var(--white, #94a3b8);
}
.footer-social {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}
.footer-icon {
  color: var(--white);
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
}
.footer-icon:hover {
  color: var(--navy, #f43f5e);
}
@media (max-width: 700px) {
  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
  .footer-social {
    margin-top: 1rem;
  }
}

/* Hero split layout */
.hero--split {
  display: flex;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.hero__left, .hero__right {
  flex: 1 1 0;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.hero__img-wrapper {
  width: 100%;
  aspect-ratio: 1/1; /* Justér til dit ønskede format, fx 1/1 for kvadrat */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  border: none;
  background: none;
}

/* RESPONSIVT: Stack kolonner på mobil */
@media (max-width: 900px) {
  .hero--split {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
  .hero__left, .hero__right {
    min-width: 0;
    width: 100%;
    align-items: center;
  }
  .hero__img-wrapper {
    aspect-ratio: unset;
    width: 100vw;
    max-width: 100vw;
    margin: 0 calc(-1 * (100vw - 100%) / 2); /* Stræk til kant */
    border-radius: 0;
  }
  .hero__img {
    width: 100vw;
    height: auto;
    border-radius: 0;
    max-width: 100vw;
    min-height: 220px;
    object-fit: cover;
  }
}