/* pschweb – style.css */

/* ---------- Farver & tokens ---------- */
:root{
  --brand:#15ACC9;
  --brand-2:#0B7285;
  --ink:#0f172a;
  --muted:#475569;
  --bg:#fefbf5;
  --card:#fff;
  --ring: color-mix(in oklab, var(--brand) 30%, white);
}

/* ---------- Basis ---------- */
*{ box-sizing:border-box }

html,body{
  min-height:100%;
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto;
}
body{ min-height:100dvh; display:flex; flex-direction:column }
main{ flex:1 0 auto }

a{ color:#0f8095; text-decoration:none }
a:hover{ color:var(--brand); text-decoration:underline }

img{ max-width:100%; height:auto }
.container{ width:min(1100px,92vw); margin-inline:auto }

/* ---------- Topmenu (sticky banner) ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:
    radial-gradient(1200px 300px at 10% -40%, color-mix(in oklab, var(--brand) 12%, white), transparent 60%),
    radial-gradient(1200px 300px at 90% -40%, color-mix(in oklab, var(--brand) 8%, white), transparent 60%),
    #fff;
  border-bottom:1px solid var(--ring);
  box-shadow:0 6px 18px rgba(14,30,37,.06);
  backdrop-filter:saturate(1.1);
  overflow:visible; /* undgå klip ved dropdown */
}
.topnav{
  display:flex; align-items:center; justify-content:space-between; padding:12px 0;
  overflow:visible;
}
.topnav .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink) }
.topnav .brand img{ height:64px }
.topnav .links{ display:flex; gap:14px; align-items:center; overflow:visible }
.topnav .links a{
  color:var(--ink); text-decoration:none; font-weight:600;
  padding:8px 12px; border-radius:12px; transition:background .12s ease, color .12s ease, transform .06s ease;
}
.topnav .links a:hover{ background:color-mix(in oklab, var(--brand) 10%, white); transform:translateY(-1px) }
.topnav .links a.active{ color:#fff; background:var(--brand) }
.topnav .links .cta{ background:var(--brand); color:#fff; border:2px solid var(--brand); border-radius:14px }

/* ---------- Hero ---------- */
.hero{ padding:60px 0 20px; margin-top:10px }
.hero-inner{
  display:grid; place-items:center; text-align:center;
  max-width:960px; margin:0 auto;
}
.pill{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:color-mix(in oklab, var(--brand) 18%, white);
  border:1px solid var(--ring); font-weight:700; color:var(--brand-2);
}
.hero h1{ font-size:clamp(32px,4vw,46px); margin:20px 0 16px }
.hero .lead{ font-size:18px; color:var(--muted); margin:0 auto 20px; max-width:800px }
.hero .cta{ margin-top:40px; display:flex; gap:20px; justify-content:center }
.hero .btn{ display:inline-block; background:var(--brand); color:#fff; text-decoration:none; font-weight:700; padding:12px 20px; border-radius:14px; border:2px solid var(--brand) }
.hero .btn:hover{ filter:brightness(1.05) }

/* ---------- Kort/indhold ---------- */
.card{
  background:var(--card);
  border:1px solid color-mix(in oklab, var(--brand) 14%, white);
  border-radius:18px; padding:24px; box-shadow:0 6px 18px rgba(14,30,37,.05);
  transition: box-shadow .12s ease;
}
.card:hover{ box-shadow:0 10px 24px rgba(14,30,37,.08) }
.content{ margin:24px 0 }

/* ---------- Footer ---------- */
footer{ margin-top:auto; }
footer .container.foot{
  display:grid; place-items:center; text-align:center; gap:6px; padding:16px 0;
  color:var(--muted); font-size:14px;
}
footer .container.foot p{ margin:2px 0; line-height:1.3 }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace }
footer .mono a{ color:inherit; text-decoration:none; font-family:inherit }
footer .mono a:hover{ color:var(--brand); text-decoration:underline }
footer .container{ margin-inline:auto } /* failsafe */

/* ---------- Tooltips ---------- */
.pill.tip{ position:relative; cursor:help }
.pill.tip:focus{ outline:2px solid var(--ring); outline-offset:2px }
.pill.tip::after{
  content:attr(data-tip); position:absolute; left:50%; top:calc(100% + 10px); transform:translate(-50%,-4px);
  opacity:0; visibility:hidden; background:var(--card); color:var(--ink); border:1px solid var(--ring);
  border-radius:10px; padding:10px 12px; width:max-content; max-width:280px; box-shadow:0 8px 20px rgba(14,30,37,.10);
  font-size:14px; line-height:1.35; z-index:1000; transition:opacity .15s, transform .15s, visibility .15s; pointer-events:none; text-align:left;
}
.pill.tip::before{
  content:""; position:absolute; left:50%; top:100%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:var(--ring); opacity:0; visibility:hidden; transition:opacity .15s, visibility .15s;
}
.pill.tip:hover::after, .pill.tip:focus-visible::after,
.pill.tip:hover::before, .pill.tip:focus-visible::before{
  opacity:1; visibility:visible; transform:translate(-50%,0);
}

/* ---------- Banner grid ---------- */
.banner-grid{ display:grid; gap:16px; grid-template-columns:repeat(3,1fr) }
.banner{
  display:block; border:1px solid var(--ring); border-radius:16px; overflow:hidden; background:var(--card);
  transition:transform .08s ease, filter .12s ease; text-decoration:none; color:inherit; text-align:center;
}
.banner:hover{ filter:brightness(1.03); transform:translateY(-2px) }
.banner img{
  width:90%; aspect-ratio:1/1; object-fit:contain; object-position:center;
  display:block; background:#fff; margin-inline:auto;
}
.banner .b-meta{ padding:10px 12px 12px }
.banner .b-meta h3{ text-align:left; margin:0 0 6px 0; font-size:25px; line-height:1.3; color:var(--ink) }
.banner .b-meta p{ text-align:left; margin:0; font-size:14px; line-height:1.45; color:var(--muted) }

/* ---------- Knapper & helpers ---------- */
.btn{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none; font-weight:700;
  padding:12px 18px; border-radius:14px; border:2px solid var(--brand);
  transition:transform .08s ease, filter .12s ease, background .12s ease;
}
.btn:hover{ filter:brightness(1.05); transform:translateY(-1px); color:#fff }
.btn:active{ transform:translateY(0) }
.btn.ghost{ background:transparent; color:var(--brand-2); border-color:var(--ring) }
.btn.ghost:hover{ background:color-mix(in oklab, var(--brand) 10%, white) }
.list-check{ margin:12px 0 8px; padding-left:0; list-style:none }
.list-check li{ position:relative; padding-left:28px; margin:10px 0 }
.list-check li::before{ content:"✓"; position:absolute; left:0; top:0; line-height:1; color:var(--brand-2); font-weight:900 }
.cta-right{ display:flex; justify-content:flex-end; margin-top:40px }

.cta-row{ display:flex; gap:12px; max-width:600px; margin:0 auto 20px }
.cta-row .btn{ flex:1; text-align:center; margin-top:40px }
.pill-row{ display:flex; gap:12px; max-width:900px; margin:0 auto }
.pill-row .pill{ flex:1; text-align:center }

/* ---------- Tabs ---------- */
.tabs .pill.active{ background:var(--brand); color:#fff; border-color:var(--brand) }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; z-index:60 }
.modal[hidden]{ display:none }
.modal-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(2px) }
.modal-dialog{
  position:relative; z-index:1;
  width:min(980px,92vw); height:75vh; margin:6vh auto;
  background:#fff; border:1px solid var(--ring); border-radius:16px;
  box-shadow:0 18px 50px rgba(14,30,37,.25);
  overflow:hidden; display:flex; flex-direction:column;
}
.modal-close{
  position:absolute; right:8px; top:6px; background:transparent; border:0;
  font-size:28px; line-height:1; cursor:pointer; color:var(--muted);
}
.modal-body{ display:grid; grid-template-columns:1.2fr .8fr; gap:0; height:100% }
.modal-gallery{
  position:relative; height:100%; padding:12px; background:#000;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.modal .modal-gallery img{
  width:100%; height:100%; max-width:100%; max-height:100%;
  object-fit:contain; background:#000; display:block; margin:0 auto;
}
.modal-gallery .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.85); border:1px solid var(--ring);
  border-radius:999px; width:36px; height:36px; cursor:pointer;
}
.modal-gallery .nav.prev{ left:10px } .modal-gallery .nav.next{ right:10px }
.modal-meta{ padding:16px 18px; overflow:auto; display:flex; flex-direction:column; height:100%; text-align:center }
.modal-meta p:last-child{ margin-top:auto; text-align:center }
.modal-cover{
  display:block; margin:0 0 14px auto; width:40%; max-width:220px; aspect-ratio:1/1;
  object-fit:contain; background:#fff; padding:6px; box-sizing:border-box; border:1px solid var(--ring); border-radius:8px; text-align:center;
}
.modal-meta h3{ font-size:25px; text-align:right; margin:0 0 15px 0 }
.modal-meta p{ margin:0 0 10px 0; color:var(--muted) }

/* ---------- Dropdown (desktop + mobil) ---------- */
.dropdown{ position:relative; display:inline-block; overflow:visible }
.dropbtn{
  list-style:none; background:transparent; border:1px solid transparent;
  padding:8px 12px; border-radius:12px; font:inherit; font-weight:600;
  color:var(--ink); cursor:pointer; user-select:none;
  transition: background .12s ease, transform .06s ease, border-color .12s ease;
}
.dropbtn::-webkit-details-marker{ display:none }
.dropdown:hover .dropbtn{ background:color-mix(in oklab, var(--brand) 10%, white); transform:translateY(-1px) }
.dropdown.active .dropbtn{ background:var(--brand); color:#fff; border-color:var(--brand) }

.dropdown-content{
  display:none; position:absolute; top:calc(100% + 6px); right:0; left:auto;
  background:var(--card); border:1px solid var(--ring); border-radius:14px;
  min-width:200px; max-width:calc(100vw - 24px);
  box-shadow:0 6px 18px rgba(14,30,37,.08); padding:8px 0; z-index:1000; white-space:nowrap;
}
.dropdown-content a{
  display:block; padding:8px 14px; color:var(--ink); text-decoration:none; font-weight:500;
}
.dropdown-content a:hover{ background:color-mix(in oklab, var(--brand) 12%, white) }

/* Åbn ved hover (desktop) og ved klik/tap (details[open]) */
.dropdown:hover .dropdown-content{ display:block }
.dropdown[open] .dropdown-content{ display:block }

/* ---------- Responsiv ---------- */
@media (max-width:960px){
  .banner-grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:640px){
  .banner-grid{ grid-template-columns:1fr }
}

/* ---------- Mobil: logo øverst til venstre, menu under til højre ---------- */
@media (max-width:720px){
  .topnav{ flex-direction:column; align-items:flex-start }
  .topnav .brand{ align-self:flex-start }
  .topnav .links{
    width:100%; display:flex; flex-wrap:wrap; justify-content:flex-end;
    gap:10px 12px; margin-top:8px;
  }
  .topnav .links a, .dropbtn{
    background:var(--card); border:1px solid var(--ring); border-radius:10px; padding:8px 12px;
  }

  /* Dropdown som overlay og kompakt liste */
  .dropdown{ position:relative; width:auto }
  .dropdown-content{
    position:absolute; top:calc(100% + 4px); right:0; left:auto;
    margin-top:0; white-space:nowrap; z-index:1000;
    padding:0; overflow:hidden; border:1px solid var(--ring);
    border-radius:10px; box-shadow:0 4px 14px rgba(14,30,37,.08);
  }
  .dropdown-content a{
    border:0; min-width:160px; text-align:right;
    padding:10px 14px; border-bottom:1px solid var(--ring);
  }
  .dropdown-content a:last-child{ border-bottom:none }

  /* øvrige mobiltilpasninger */
  .topnav .brand img{ height:52px }
  .hero{ padding:44px 0 }
  .hero h1{ font-size:clamp(28px,6vw,40px) }
  .hero .lead{ font-size:16px; max-width:92vw }
  .pill-row{ flex-direction:column; gap:10px }
  .pill-row .pill{ width:100% }
  .modal-dialog{ width:94vw; height:80vh; margin:5vh auto }
  .modal-body{ grid-template-columns:1fr }
  .modal-cover{ width:120px }
}

/* ---------- Cookie consent ---------- */
.cc-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--card); border-top:1px solid var(--ring);
  box-shadow:0 -10px 28px rgba(14,30,37,.10);
}
.cc-inner{
  width:min(1100px,92vw); margin:0 auto; padding:14px 16px;
  display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center;
}
.cc-copy p{ margin:0 }
.cc-title{ font-weight:800; margin:0 0 4px }
.cc-text{ color:var(--muted) }
.cc-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end }
.cc-link{ color:#0f8095; text-decoration:underline }
@media (max-width:720px){
  .cc-inner{ grid-template-columns:1fr; text-align:center }
  .cc-actions{ justify-content:center }
}

/* Cookie-indstillinger (modal) */
#cc-modal .modal-dialog{ width:min(720px,92vw); height:auto; margin:6vh auto }
#cc-modal .cc-settings-body{ padding:18px }
#cc-modal .cc-item{
  display:flex; align-items:flex-start; gap:12px; padding:12px;
  border:1px solid var(--ring); border-radius:12px; margin:8px 0; background:var(--card);
}
#cc-modal .cc-item h4{ margin:0 0 4px }

/* Switch */
.switch{ position:relative; width:44px; height:24px; flex:0 0 auto }
.switch input{ position:absolute; inset:0; margin:0; opacity:0 }
.switch .track{
  position:absolute; inset:0; border-radius:999px;
  background:color-mix(in oklab, var(--brand) 10%, white);
  border:1px solid var(--ring); transition:.15s;
}
.switch .thumb{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:#fff; border:1px solid var(--ring); transition:.15s;
}
.switch input:checked + .track{ background:var(--brand); border-color:var(--brand) }
.switch input:checked + .track .thumb{ transform:translateX(20px) }
.switch input:disabled + .track{ opacity:.6 }

/* =========================
   Admin UI (pschweb)
   ========================= */

.admin-wrap{ padding:18px 0 34px; }
.admin-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin:18px 0 14px;
}
.admin-head h1{ margin:0; font-size:28px; line-height:1.2; }
.admin-head .sub{ margin:6px 0 0; color:var(--muted); font-size:14px; }
.admin-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.btn.sm{ padding:8px 12px; border-radius:12px; }
.btn.danger{
  background:#fee2e2; border-color:#fecaca; color:#991b1b;
}
.btn.danger:hover{ filter:brightness(1.02); color:#991b1b; }

.admin-grid-2{ display:grid; gap:16px; grid-template-columns:1.2fr .8fr; }
@media (max-width:900px){ .admin-grid-2{ grid-template-columns:1fr; } }

/* Tables */
.admin-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--ring);
  border-radius:14px;
  overflow:hidden;
  background:var(--card);
}
.admin-table thead th{
  text-align:left;
  padding:12px 12px;
  font-size:13px;
  color:var(--muted);
  background:color-mix(in oklab, var(--brand) 6%, white);
  border-bottom:1px solid var(--ring);
  white-space:nowrap;
}
.admin-table td{
  padding:12px 12px;
  border-bottom:1px solid color-mix(in oklab, var(--brand) 10%, white);
  vertical-align:top;
}
.admin-table tbody tr:hover{
  background:color-mix(in oklab, var(--brand) 6%, white);
}
.admin-table tbody tr:last-child td{ border-bottom:none; }
.admin-td-actions{ text-align:right; white-space:nowrap; }
.admin-badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--ring);
  font-size:12px;
  font-weight:800;
}
.admin-badge.ok{ background:color-mix(in oklab, var(--brand) 14%, white); color:var(--brand-2); }
.admin-badge.muted{ background:#fff; color:var(--muted); }

/* Forms */
.admin-form .field{ display:grid; gap:6px; margin:12px 0; }
.admin-form label{ font-weight:800; }
.admin-form input[type="text"],
.admin-form input[type="url"],
.admin-form input[type="number"],
.admin-form select,
.admin-form textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--ring);
  border-radius:12px;
  background:#fff;
  font:inherit;
}
.admin-form textarea{ min-height:360px; resize:vertical; }
.admin-form .help{ color:var(--muted); font-size:13px; }
.admin-form .error{
  background:#fff;
  border:1px solid #fecaca;
  border-left:4px solid #ef4444;
  padding:10px 12px;
  border-radius:12px;
  color:#991b1b;
  font-weight:800;
}
.admin-form .notice{
  background:#fff;
  border-left:4px solid var(--brand);
  border:1px solid var(--ring);
  padding:10px 12px;
  border-radius:12px;
}

/* Admin menu: brug eksisterende site-header/topnav look */
.admin-nav .topnav .brand{
  gap:10px;
}
.admin-nav .topnav .brand .admin-tag{
  font-size:12px;
  font-weight:900;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--ring);
  background:color-mix(in oklab, var(--brand) 10%, white);
  color:var(--brand-2);
}
.admin-wrap{ padding:18px 0 34px; }
.admin-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:18px 0 14px; }
.admin-head h1{ margin:0; font-size:28px; line-height:1.2; }
.admin-head .sub{ margin:6px 0 0; color:var(--muted); font-size:14px; }
.admin-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.btn.sm{ padding:8px 12px; border-radius:12px; }
.btn.danger{ background:#fee2e2; border-color:#fecaca; color:#991b1b; }
.btn.danger:hover{ filter:brightness(1.02); color:#991b1b; }

.admin-table{
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--ring); border-radius:14px; overflow:hidden; background:var(--card);
}
.admin-table thead th{
  text-align:left; padding:12px 12px; font-size:13px; color:var(--muted);
  background:color-mix(in oklab, var(--brand) 6%, white);
  border-bottom:1px solid var(--ring); white-space:nowrap;
}
.admin-table td{ padding:12px 12px; border-bottom:1px solid color-mix(in oklab, var(--brand) 10%, white); vertical-align:top; }
.admin-table tbody tr:hover{ background:color-mix(in oklab, var(--brand) 6%, white); }
.admin-table tbody tr:last-child td{ border-bottom:none; }
.admin-td-actions{ text-align:right; white-space:nowrap; }

.admin-form .field{ display:grid; gap:6px; margin:12px 0; }
.admin-form label{ font-weight:800; }
.admin-form input[type="text"], .admin-form input[type="email"], .admin-form input[type="date"],
.admin-form input[type="number"], .admin-form select, .admin-form textarea{
  width:100%; padding:10px 12px; border:1px solid var(--ring);
  border-radius:12px; background:#fff; font:inherit;
}
.admin-form textarea{ min-height:160px; resize:vertical; }
.admin-form .help{ color:var(--muted); font-size:13px; }

.badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  border:1px solid var(--ring); font-size:12px; font-weight:800;
}
.badge.ok{ background:color-mix(in oklab, var(--brand) 14%, white); color:var(--brand-2); }
.badge.muted{ background:#fff; color:var(--muted); }
.badge.warn{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }