:root{
  --bg: #fbfbfd;
  --bg-bottom: #f6f7fb;
  --text: #0f172a;
  --title-color: var(--text);
  --input-inner: rgba(0,0,0,0.04);
  --bg-1: rgba(99,102,241,0.06);
  --bg-2: rgba(109,211,255,0.05);
  --card: #ffffff;
  --muted: #6b7280;
  --accent1: #6dd3ff;
  --accent2: #c3b1ff;
  --glass: rgba(255,255,255,0.6);
  --shadow: 0 10px 30px rgba(16,24,40,0.08);
  line-height: 1.8;
}
/* Dark theme variables applied when html[data-theme="dark"] is set */
html[data-theme="dark"]{
  --bg: #0b1220;
  --bg-bottom: #030611;
  --text: #e6f0ff;
  --title-color: var(--text);
  --input-inner: rgba(255,255,255,0.03);
  --bg-1: rgba(29,78,216,0.12);
  --bg-2: rgba(79,70,229,0.08);
  --card: #0f1724;
  --muted: #94a3b8;
  --accent1: #5dd0ff;
  --accent2: #9b8cff;
  --glass: rgba(255,255,255,0.03);
  --shadow: 0 10px 30px rgba(2,6,23,0.6);
  /* frontpage-specific variables should follow the active theme */
  --fp-card: var(--card);
  --fp-accent: var(--accent2);
  --fp-muted: var(--muted);
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  /* layered soft background: two blurred radial accents + base linear gradient */
  background:
    radial-gradient(800px 420px at 10% 18%, var(--bg-1), transparent 18%),
    radial-gradient(700px 360px at 92% 78%, var(--bg-2), transparent 14%),
    linear-gradient(180deg,var(--bg) 0%, var(--bg-bottom) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* decorative blurred SVG blobs to give a soft magazine-like feel */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'><defs><linearGradient id='g' x1='0' x2='1'><stop offset='0' stop-color='%236dd3ff' stop-opacity='0.18'/><stop offset='1' stop-color='%23c3b1ff' stop-opacity='0.14'/></linearGradient></defs><g fill='url(%23g)' opacity='0.9'><path d='M412 48c92-36 205-12 298 24 93 36 164 104 204 188 40 84 48 179 40 270-8 91-38 183-98 242-60 59-152 91-245 86-93-5-181-43-250-103C178 644 121 568 84 486 47 404 28 312 56 233 84 154 148 97 222 70c74-27 150-24 190-22z'/></g></svg>");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 1100px auto;
  opacity: 0.22;
  filter: blur(28px) saturate(1.05);
}

/* reduce decorative brightness in dark mode so bottom stays dark */
html[data-theme="dark"] body::before{ opacity: 0.12; filter: blur(32px) saturate(0.85); }

/* Admin pages use a simplified background to improve load and paint performance. */
body.admin-page{
  /* keep the theme color but avoid the heavy layered gradients; use a plain background-color
     to avoid paint/gradient banding and speed up rendering on admin pages */
  background-color: var(--bg);
  background-image: none;
  background-attachment: scroll;
}
body.admin-page::before{ display:none; }


/* ensure main content sits above decorative background */
.container, .hero, .site-footer, .info, .cards {
  position: relative;
  z-index: 1;
}
.container{width:min(1100px,94%);margin:0 auto;padding:0}
/* Center the main container both vertically and horizontally on the page.
   This targets the page-level `main.container` so other `.container` usages
   (e.g., admin panels) keep their existing flow. */
main.container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height: calc(100vh - 96px);
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
}

.container.small{padding:24px 0;display:flex;justify-content:space-between;align-items:center}
.topbar{
  backdrop-filter: blur(6px);
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 1200;
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.topbar .container{display:flex; align-items:center;justify-content:space-between;padding:14px 0}

/* Header: hide the logo and center header contents */
.topbar .logo{display:none !important}
.topbar .container{justify-content:center !important;gap:18px}
.topbar .nav-links{margin-left:0 !important}
.topbar .controls{margin-left:0 !important}

/* Restore original mobile header layout so hamburger stays at right */
@media (max-width:880px){
  .topbar .container{ justify-content: space-between !important; }
  .topbar .controls{ margin-left: auto !important; }
  /* ensure hamburger remains visible and in-flow */
  .hamburger{ display:inline-flex !important; }
}

/* scrolled state adds a glassy backdrop and a subtle shadow */
.topbar.scrolled{
  background: linear-gradient(180deg, var(--glass), rgba(255,255,255,0.02));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background-clip: padding-box;
  box-shadow: 0 10px 30px rgba(2,6,23,0.06);
}
html[data-theme="dark"] .topbar.scrolled{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background-clip: padding-box;
  box-shadow: 0 14px 48px rgba(2,6,23,0.6);
}
.nav-links{display:flex;gap:18px;align-items:center;margin-left:auto}
.nav-links{display:flex;gap:18px;align-items:center;margin-left:auto}
.nav-links a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600;transition:all .22s cubic-bezier(.2,.9,.3,1);display:inline-flex;align-items:center;gap:8px}
.nav-links a:focus{outline:3px solid rgba(99,102,241,0.12);outline-offset:4px}

/* Hero-style hover and active effect for nav */
.nav-links a:hover{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#fff;box-shadow:0 18px 50px rgba(16,24,40,0.12);transform:translateY(-3px)}
.nav-links a.active{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#fff;box-shadow:0 24px 70px rgba(16,24,40,0.16);transform:translateY(-4px)}
.nav-links a.active .site-name{color:#fff}
.logo{display:inline-flex;align-items:center;gap:12px;font-weight:800;color:var(--accent2);text-decoration:none;font-size:18px}
.site-logo{width:56px;height:56px;display:inline-block;border-radius:10px;flex-shrink:0}
.site-name{font-weight:800;font-size:18px;color:var(--accent2)}
.logo:hover .site-name{color:var(--accent1)}

/* Theme toggle button (fixed bottom-right) */
.theme-toggle{
  --size: 56px;
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--size);height:var(--size);border-radius:14px;border:0;background:var(--card);
  color:var(--muted);cursor:pointer;font-size:18px;position:fixed;right:20px;bottom:20px;z-index:1400;
  box-shadow:0 12px 36px rgba(2,6,23,0.12);transition:transform .16s ease,box-shadow .16s ease,background .12s ease,color .12s ease;
}
.theme-toggle:hover{transform:translateY(-4px);box-shadow:0 22px 50px rgba(2,6,23,0.14)}
.theme-toggle:focus{outline:3px solid rgba(99,102,241,0.14);outline-offset:6px}

/* Decorative gradient halo behind the toggle to echo hero accents */
.theme-toggle::before{
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(93,208,255,0.18), rgba(155,140,255,0.18));
  z-index: -1;
  filter: blur(8px);
  opacity: 0.55;
  transition: opacity .18s ease, transform .18s ease;
}
.theme-toggle:hover::before{opacity:0.8}

/* Active (dark mode) style: filled gradient with inverted icon color */
.theme-toggle[aria-pressed="true"]{
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color: var(--bg);
}

.theme-toggle svg{width:22px;height:22px;display:block}

/* ensure the fixed placement cannot be overridden by parent stacking contexts */
.theme-toggle{position:fixed !important; right:20px !important; bottom:20px !important; z-index:1400 !important}

@media (max-width:420px){
  .theme-toggle{width:48px;height:48px;right:12px;bottom:12px;font-size:18px}
}

@media (max-width:720px){
  .site-logo{width:44px;height:44px}
}

/* Settings modal */
.settings-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;z-index:1600;pointer-events:none}
.settings-modal[aria-hidden="false"]{pointer-events:auto}
.settings-modal .settings-panel{width:min(680px,96%);background:var(--card);border-radius:14px;box-shadow:0 30px 80px rgba(2,6,23,0.18);overflow:hidden;transform:translateY(12px);opacity:0;transition:opacity .16s ease,transform .16s ease}
.settings-modal[aria-hidden="false"] .settings-panel{transform:none;opacity:1}
.settings-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(0,0,0,0.04)}
.settings-header h2{margin:0;font-size:18px}
.modal-close{background:transparent;border:0;font-size:18px;cursor:pointer}
.settings-body{padding:18px 20px;display:block;gap:12px}
.form-row{margin-bottom:14px}
.form-row label{display:block;font-weight:700;margin-bottom:8px}
.theme-options{display:flex;gap:12px;align-items:center}
.theme-options input{margin-right:8px}
.gradient-inputs{display:flex;gap:12px}
.gradient-inputs .col{flex:1}
.gradient-inputs input[type="color"]{width:100%;height:44px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);padding:4px}
.gradient-preview{height:56px;border-radius:8px;margin-top:12px;border:1px solid rgba(0,0,0,0.04);box-shadow:inset 0 1px 0 rgba(255,255,255,0.03)}
.settings-footer{display:flex;justify-content:flex-end;gap:12px;padding:14px 20px;border-top:1px solid rgba(0,0,0,0.04)}


/* CKEditor image resizer overlay */
/* Client-side custom resizer removed in favour of the ImageResize plugin. */

/* Utility: prevent text selection for UI elements */
.no-select{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.topbar a{color:var(--muted);margin-left:20px;text-decoration:none}
.hero{padding:56px 0 28px}
.hero .container{background:var(--card);border-radius:18px;padding:36px;box-shadow:0 18px 50px rgba(16,24,40,0.06);}
.hero-inner{display:flex;gap:36px;align-items:center}
.hero-text{flex:1;max-width:640px}
.name{font-size:44px;margin:0 0 12px;letter-spacing:-0.02em}
  .tagline{font-size:20px;margin:0 0 16px;color:var(--muted);opacity:.9}
.about{color:var(--muted);margin:0 0 20px}
.actions{display:flex;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.btn.primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;box-shadow:var(--shadow)}
.btn.ghost{background:transparent;border:1px solid rgba(15,23,42,0.06);color:var(--muted)}
.btn.outline{background:transparent;border:1px solid rgba(15,23,42,0.06);padding:10px 16px;border-radius:10px}
.hero-art{width:360px;height:230px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.blob{width:100%;height:auto;transform:translateX(6%)}
/* Frontpage hero: center everything both horizontally and vertically */
.hero-landing{
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero-landing .container{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  max-width:900px;
}

/* Hero logo: show at intrinsic size but remain responsive (cannot overflow container) */
.hero-hero-logo{
  display:block;
  margin: 0 auto 12px;
  width: auto;            /* preserve intrinsic width unless it exceeds max-width */
  max-width: 480px;      /* cap size on large screens */
  height: auto;          /* preserve aspect ratio */
  object-fit: contain;   /* defensive: avoid visual stretching */
}

@media (max-width: 720px){
  .hero-hero-logo{
    max-width: 320px;    /* smaller cap for phones */
  }
}

/* Utility: visually hidden but accessible element for headings */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* When hero title is split into a compact header and separate controls, reduce
   the header height so the controls appear directly underneath the title. */
.hero-header.hero-landing{
  min-height: auto; /* don't force full viewport centering for the header */
  padding-top: 48px;
  padding-bottom: 8px;
}
.hero-header .hero-title{ /* slightly larger and tighter spacing */
  font-size: clamp(36px, 6vw, 64px);
  margin: 0 0 8px;
  line-height: 1;
}
.hero-controls{ /* keep controls close to the header */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  margin-top: 6px;
}

/* Modern refinements: typography, buttons, and cards */
/* Stronger, cleaner heading */
.hero-header .hero-title{
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Primary button: flatter gradient, softer radius, subtle lift on hover */
.btn{transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;}
.btn.primary{
  padding: 10px 16px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(93,208,255,1), rgba(195,177,255,1));
  color: #071127;
  box-shadow: 0 6px 22px rgba(16,24,40,0.10);
}
.btn.primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 36px rgba(16,24,40,0.12); }
.btn.ghost{ background: transparent; border: 1px solid rgba(15,23,42,0.04); color: var(--text); }
.btn.ghost:hover{ transform: translateY(-1px); box-shadow: 0 6px 20px rgba(16,24,40,0.06); }

/* Post-card previews: clean, elevated tiles */
.post-card{
  display:flex;
  flex-direction:column;
  background: var(--fp-card, var(--card));
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(16,24,40,0.06);
  transition: transform .22s cubic-bezier(.2,.9,.3,1), box-shadow .22s ease;
}
.post-card:hover{ transform: translateY(-8px); box-shadow: 0 30px 70px rgba(16,24,40,0.12); }
.post-card .post-media{height:160px;background-size:cover;background-position:center;border-bottom:1px solid rgba(15,23,42,0.04)}
.post-card .post-body{padding:16px 18px}
.post-card .post-title{margin:0 0 8px;font-size:18px}
.post-card .post-excerpt{color:var(--muted);margin:8px 0 12px;font-size:14px}

/* Tighter layout for the hero area on wide screens */
@media (min-width: 1100px){
  .hero-header .hero-title{ font-size: 64px; }
  main.container{ max-width: 1100px; }
}
/* Ensure mode chooser, stepper and search form align and have consistent max width */
#mode-section, #personal-steps, #search-form{ width:100%; max-width:720px; margin-top:10px; }
#mode-chooser{ display:flex; gap:12px; justify-content:center; }
#personal-steps{ display:block; }
#search-form{ display:grid; grid-template-columns:1fr; gap:8px; }
#latest-list{ margin-top:22px; }
.section-head h2{margin:0 0 6px;font-size:20px}
.muted{color:var(--muted);margin:0}
/* Cards grid */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;margin-top:28px}
.latest .cards{max-width:1200px;margin-left:auto;margin-right:auto}
.cards.stacked{grid-template-columns:1fr}
/* Card: modern background preview with overlay */
.card{
  border-radius:18px;
  padding:0;
  box-shadow:0 12px 40px rgba(16,24,40,0.08);
  position:relative;
  overflow:hidden;
  min-height:240px;
  display:block;
  background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02));
  transition:transform .28s cubic-bezier(.2,.9,.3,1),box-shadow .28s ease;
}
.card:focus-within,
.card:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 70px rgba(16,24,40,0.16);
}

/* image layer */
.card-bg{position:relative;color:white;min-height:240px;background-size:cover;background-position:center center;display:block}
.card-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.02) 30%, rgba(0,0,0,0.6) 100%);opacity:1;pointer-events:none}

/* About page: show full image without heavy cropping for person photos.
   Use `contain` so the whole image fits; keep it centered and avoid repeat.
   Reduce min-height slightly for tighter cards. */
/* Card media: wrapper for semantic <img> so we can use object-fit and keep overlay */
.card-media{position:relative;overflow:hidden;height:400px;display:block}
.card-media::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.02) 30%, rgba(0,0,0,0.6) 100%);pointer-events:none}
.card-media img.card-img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:760px){
  .card-media{height:300px}
}

/* Make about cards clickable and show pointer */
.about-card{cursor:pointer}
.about-card:focus{outline:3px solid rgba(99,102,241,0.12);outline-offset:6px}

/* Modal for member details */
.member-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:2000;padding:24px}
.member-modal.open{display:flex}
.member-modal .modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,0.6);backdrop-filter:blur(4px)}
.member-modal .modal-panel{position:relative;background:var(--card);border-radius:12px;max-width:880px;width:100%;max-height:90vh;overflow:auto;z-index:2;padding:22px;box-shadow:0 30px 80px rgba(2,6,23,0.6)}
.member-modal .modal-header{display:flex;flex-direction:column;align-items:center;gap:12px}
.member-modal .modal-title{margin:8px 0 0;font-size:20px;font-weight:800;text-align:center}
.member-modal .modal-body{margin-top:12px;text-align:center}
/* Member modal avatar: round and slightly larger than frontpage pill */
/* Very large member avatar on desktop (800x800), responsive down on small screens */
.member-modal .modal-img{
  width:250px;
  height:250px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
  border:3px solid rgba(16,24,40,0.12);
  box-shadow:0 12px 30px rgba(16,24,40,0.10);
  margin: 0 auto;
}
.member-modal .modal-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.member-modal .modal-close{position:absolute;right:12px;top:12px;background:transparent;border:0;padding:8px;cursor:pointer;font-size:18px}
@media (max-width:600px){
  .member-modal .modal-panel{padding:14px}
  .member-modal .modal-img{width:250px;height:250px;border-radius:50%;border:3px solid rgba(16,24,40,0.10);box-shadow:0 10px 24px rgba(16,24,40,0.08)}
  .member-modal .modal-img img{border-radius:50%}
}

/* Dark theme tweaks for member avatar border */
html[data-theme="dark"] .member-modal .modal-img{border:2px solid rgba(255,255,255,0.06);box-shadow:0 8px 20px rgba(2,6,23,0.12)}

/* Generic modal (used for article popup) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:2000;padding:24px}
.modal.open{display:flex}
.modal .modal-backdrop{position:absolute;inset:0;background:rgba(2,6,23,0.6);backdrop-filter:blur(4px)}
.modal .modal-panel{position:relative;background:var(--card);border-radius:8px;max-width:880px;width:100%;max-height:90vh;overflow:auto;z-index:2;padding:22px;box-shadow:0 30px 80px rgba(2,6,23,0.6)}
.modal .modal-header{display:flex;flex-direction:column;gap:6px}
.modal .modal-title{margin:0;font-size:20px;font-weight:800}
.modal .modal-meta{margin:0;color:var(--muted);font-size:13px}
.modal .modal-body{margin-top:12px}
.modal .modal-close{position:absolute;right:12px;top:12px;padding:10px 12px;cursor:pointer;font-size:20px;background:var(--card);color:var(--text);border-radius:10px;border:1px solid rgba(15,23,42,0.06);box-shadow:0 12px 34px rgba(16,24,40,0.10);z-index:2500}

@media (max-width:600px){
  .modal .modal-panel{padding:14px}
}

/* Ensure images loaded into the article modal scale to the viewport and don't overflow */
.modal .modal-panel img,
.modal .modal-panel .article-body img {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0.8rem auto;
  object-fit: contain;
  max-height: calc(100vh - 160px);
}

@media (max-width:720px){
  .modal .modal-panel img,
  .modal .modal-panel .article-body img {
    max-height: calc(100vh - 180px);
  }
}

/* Keep article modal panel within mobile viewport and allow internal scrolling */
@media (max-width:720px){
  .modal{align-items:flex-start;padding-top:22px;padding-bottom:22px; -webkit-overflow-scrolling: touch;}
  .modal .modal-panel{
    width: calc(100% - 32px);
    max-height: calc(100vh - 72px); /* leave more space below the panel */
    margin: 0 16px 20px;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    box-sizing: border-box;
    border-radius:12px;
    padding-bottom:28px; /* ensure content doesn't butt against bottom */
  }

  /* Place close control inside the modal panel (not fixed) on small screens */
  .modal .modal-close{
    position:absolute; /* inside the panel */
    top:12px;
    right:12px;
    padding:10px 12px;
    font-size:22px;
    background:var(--card);
    color: var(--text);
    border-radius:10px;
    border:1px solid rgba(15,23,42,0.08);
    box-shadow:0 14px 36px rgba(16,24,40,0.12);
    z-index:3001;
  }
  /* dark-mode override for the close button inside the panel */
  html[data-theme="dark"] .modal .modal-close{
    background: rgba(255,255,255,0.03);
    color: var(--text);
    border:1px solid rgba(255,255,255,0.06);
    box-shadow:0 10px 28px rgba(2,6,23,0.16);
  }

  /* ensure panel content doesn't sit under the close button */
  .modal .modal-panel{ padding-top:54px; }
}

@media (max-width:760px){
  .about-cards .card-bg{height:300px}
}

/* Center the hero title on the About page, but keep member cards in their original side-by-side layout */
.about-page main.container{display:flex;flex-direction:column;align-items:center}
.about-page main .hero-landing .hero-left{align-items:center;display:flex;flex-direction:column}
.about-page main .hero-landing .hero-left .hero-title{ text-align:center }
.about-page main .about-cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
  align-self:stretch;
  max-width:1100px;
  width:100%;
  margin:0 auto;
}
.about-page main .about-cards .about-card{max-width:none;width:100%}
.about-page main .about-cards .card-body{padding-left:22px;padding-right:22px;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.about-page main .modal-panel{max-width:720px}

/* Mobile/tablet: force about cards into a single column for easy vertical scrolling
   Increase breakpoint to cover more phone sizes and small tablets in portrait. */
@media (max-width:900px){
  .about-page main .about-cards{
    grid-template-columns: 1fr !important;
    gap:18px;
  }
  .about-page main .about-cards .about-card{max-width:none;width:100%;}
}

/* Compact about-cards for frontpage (names only) */
.about-cards-section.compact{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.about-cards-compact{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.about-cards-compact .about-pill{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px;background:transparent;border-radius:10px;border:0;min-width:64px}
/* Avatar size adjusted back to original 44px */
.about-cards-compact .about-pill-img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;border:3px solid rgba(16,24,40,0.14);box-shadow:0 12px 30px rgba(16,24,40,0.10)}
.about-cards-compact .about-pill-fallback{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent1),var(--accent2));color:#fff;font-weight:700}
.about-cards-compact .about-name{font-size:13px;color:var(--text);font-weight:600;white-space:nowrap}

@media (max-width:720px){
  .about-cards-compact .about-pill-img, .about-cards-compact .about-pill-fallback{width:56px;height:56px}
  .about-cards-compact .about-name{font-size:12px}
}

/* Dark theme: keep subtle white ring as before */
html[data-theme="dark"] .about-cards-compact .about-pill-img{border:2px solid rgba(255,255,255,0.06);box-shadow:0 8px 20px rgba(2,6,23,0.16)}
html[data-theme="dark"] .about-cards-compact .about-pill-fallback{box-shadow:none}

/* Ensure the meet button stays centered */
.about-cards-section.compact .btn{margin:8px auto 0}

/* Ensure individual about-card backgrounds also use the requested fixed height */
.about-card .card-bg{ /* legacy: keep for other card types that may use .card-bg */ background-size:cover;background-position:center center;background-repeat:no-repeat }

@media (max-width:760px){
  .about-card .card-bg{height:300px}
}

/* CV feature removed */


@media (max-width:720px){
  .breaking-inner{padding:0 12px}
  .breaking-text{font-size:14px}
}

/* overlay content anchored at bottom */
.card-overlay{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;display:flex;flex-direction:column;gap:8px;z-index:2}


/* Tags as soft pills */
.card-tags{display:flex;flex-wrap:wrap;gap:8px}
.card-tags .tag{background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.96);padding:6px 10px;border-radius:999px;font-size:12px}

.card-title{margin:0;font-size:20px;font-weight:800;line-height:1.06}
.card-title a{color:white;text-decoration:none}
.card-meta{color:rgba(255,255,255,0.88);font-size:13px}
.card-excerpt{color:rgba(255,255,255,0.96);margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.card-footer .more{margin:0}
.btn.read{background:rgba(255,255,255,0.12);color:white;border:1px solid rgba(255,255,255,0.12);padding:8px 14px;border-radius:10px;font-weight:700}
.btn.read:hover{background:rgba(255,255,255,0.16)}

/* fallback when no image: decorative gradient */
.card[data-bg="gradient"] .card-bg{background-image: linear-gradient(135deg, rgba(109,211,255,0.9), rgba(195,177,255,0.9));}

/* New magazine-style post card */
.post-card{background:var(--card);border-radius:14px;overflow:hidden;border:1px solid rgba(15,23,42,0.04)}
.post-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(16,24,40,0.12)}
.post-media{height:160px;background-size:cover;background-position:center;position:relative;display:block}
.post-media img{width:100%;height:100%;object-fit:cover;display:block}
/* --- Article (single) view styling --- */
.single{
  max-width:980px;
  margin:34px auto;
  padding:28px 32px;
  border-radius:14px;
  background: var(--card);
  box-shadow: 0 20px 60px rgba(2,6,23,0.06);
}
.single h1{font-size:36px;margin:0 0 8px;line-height:1.02;font-weight:900;letter-spacing:-0.01em;color:var(--text)}
.single > p.muted{margin:0 0 18px;color:var(--muted);font-size:14px}
.article-video-wrap{margin:0 0 18px}
.article-video{display:block;width:100%;max-width:100%;border-radius:10px;background:#000}
.article-body{color:var(--text);font-size:17px;line-height:1.9}
.article-body img{max-width:100%;height:auto;border-radius:8px}
.article-author{margin-top:20px;color:var(--muted);font-size:14px}

@media (max-width:720px){
  .single{padding:18px 16px;margin:18px auto}
  .single h1{font-size:26px}
}
.post-top{position:absolute;inset:auto -2px 5px auto;display:flex;gap:8px;align-items:center;justify-content:flex-end}
.category-pill{
  display:inline-block;
  background: rgba(0,0,0,0.62);
  color: #fff;
  padding:6px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  margin-right:8px;
  box-shadow: 0 8px 22px rgba(2,6,23,0.36);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.06);
  z-index:3;
}

/* fallback gradient for posts without a thumbnail; uses lighter colors in light mode
   and toned-down accents in dark mode so previews blend with site theme */
.post-media.gradient{background-image: linear-gradient(135deg, rgba(109,211,255,0.9), rgba(195,177,255,0.9));}
html[data-theme="dark"] .post-media.gradient{background-image: linear-gradient(135deg, rgba(29,78,216,0.18), rgba(79,70,229,0.12));}

/* dark-mode tweaks to make preview cards match the site's darker palette */
html[data-theme="dark"] .post-card{border-color: rgba(255,255,255,0.03);box-shadow:0 24px 60px rgba(2,6,23,0.6)}

/* make category pill lighter and theme-aware in dark mode */
html[data-theme="dark"] .category-pill{
  background: rgba(0,0,0,0.62);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 22px rgba(2,6,23,0.36);
  backdrop-filter: blur(6px);
}

.post-body{padding:16px 18px 20px;background:transparent}
.post-tags{margin-bottom:8px;display:flex;gap:8px;flex-wrap:wrap}
.post-tags .tag{background:linear-gradient(90deg, rgba(99,102,241,0.06), rgba(99,102,241,0.02));color:var(--muted);padding:6px 10px;border-radius:999px;font-size:12px}

/* Visually hide tags in previews but keep them in the DOM for accessibility and client-side search */
.post-tags{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.post-title{margin:0;font-size:18px;font-weight:800}
.post-title a{
  color: var(--title-color);
  text-decoration: none;
  background: none;
}
/* Keep post titles as solid colors via --title-color; do not apply gradient here */
.post-meta{color:var(--muted);font-size:13px;margin-top:6px}
.post-excerpt{color:var(--muted);margin:12px 0 0;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-actions{margin-top:14px;display:flex;justify-content:center;align-items:center}
/* Preview "Læs artiklen" button: transparent background with hero-style gradient border */
.post-actions .btn.read{
  background: transparent;
  color: var(--fp-accent);
  padding:8px 14px;
  border-radius:10px;
  border: 1px solid transparent;
  border-image-slice: 1;
  border-image-source: linear-gradient(90deg,var(--accent1),var(--accent2));
  box-shadow: 0 12px 30px rgba(16,24,40,0.06);
  position:relative;
}
/* Hover: remove border-radius and fill with gradient */
.post-actions .btn.read:hover{
  border-radius:0;
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  color: #fff;
}
/* removed decorative pseudo-element per request */

@media (max-width:760px){
  .post-media{height:140px}
  .post-body{padding:14px}
}
.thumb .cat-badge.cat-guide{background:#fff7ef;color:#b45309}
.thumb .cat-badge.cat-tech{background:#f3f5ff;color:#4338ca}
.card-body{flex:1;display:flex;flex-direction:column;min-width:0}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.card-tags{margin-bottom:10px}
.card-tags .tag{display:inline-block;background:rgba(99,102,241,0.06);color:var(--muted);padding:6px 10px;border-radius:999px;font-size:12px;margin-right:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.35)}
.card-title{margin:0;font-size:18px;font-weight:800;line-height:1.12}
.card-meta{font-size:13px;color:var(--muted);margin-top:6px}
.card-excerpt{color:var(--muted);margin:12px 0 0;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.card-footer .more{margin:0}
.card-footer .btn{padding:8px 14px;border-radius:10px;font-size:13px}
.btn.read{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white}
.card .muted.small{opacity:0.9}

.card .more{margin-top:12px}
.card:hover .more .btn{transform:translateY(0);}
.card .more .btn{transition:transform .18s ease}
.card-title{margin:0;font-size:16px}
.card-meta{font-size:13px;color:var(--muted);margin-top:6px}
.more{margin-top:20px;text-align:center}
.info{margin-top:48px;padding:22px;border-radius:12px;background:var(--card);box-shadow:var(--shadow)}
.site-footer{padding:24px 0;color:var(--muted)}
@media (max-width:880px){
  .hero-inner{flex-direction:column}
  .hero .container{padding:22px}
  .hero-art{width:100%;height:160px}
  .card{min-height:180px}
}
.small{font-size:14px}
/* Article author box: theme-aware container for author attribution */
.article-author{margin-top:18px;padding:14px;border-radius:10px;background:var(--card);box-shadow:var(--shadow);color:var(--text)}
html[data-theme="dark"] .article-author{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));}
/* subtle entrance */
.fade-in{opacity:0;transform:translateY(8px);animation:fadeIn .6s ease forwards}
@keyframes fadeIn{to{opacity:1;transform:none}}

/* Search UI */
.search-btn{position:fixed;right:22px;top:22px;width:56px;height:56px;border-radius:14px;background:linear-gradient(90deg,var(--accent1),var(--accent2));display:flex;align-items:center;justify-content:center;color:white;box-shadow:0 12px 40px rgba(16,24,40,0.14);cursor:pointer;z-index:1200}
.search-btn:active{transform:translateY(1px)}

/* Hero-style search overlay */
.search-overlay{position:fixed;inset:0;background:linear-gradient(180deg, rgba(15,23,42,0.42), rgba(15,23,42,0.28));backdrop-filter:blur(8px) saturate(1.05);display:none;align-items:center;justify-content:center;padding:40px;z-index:1199}
.search-overlay.open{display:flex}

.search-panel{width:min(1100px,96%);max-width:1100px;background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(243,245,255,0.92));border-radius:20px;padding:28px 28px 22px;box-shadow:0 40px 90px rgba(16,24,40,0.18);display:flex;gap:20px;align-items:flex-start}

/* Use theme-aware panel background so dark mode is slick */
.search-panel{background:var(--card);border:1px solid rgba(15,23,42,0.04)}

.search-left{flex:1;min-width:360px}
.search-right{width:360px;display:flex;flex-direction:column;gap:12px;align-items:center}

.search-brand{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.search-brand img{width:48px;height:48px;border-radius:10px}
.search-brand .site-name{font-weight:800;color:var(--accent2);font-size:18px}

.search-input{width:100%;padding:18px 20px;border-radius:8px;border:none;box-shadow:inset 0 1px 0 var(--input-inner), 0 8px 24px rgba(2,6,23,0.06);font-size:20px;outline:none;background:var(--card);color:var(--text)}
.search-input::placeholder{color:rgba(99,102,241,0.38)}
.search-input:focus{outline:none}
.search-input:focus-visible{box-shadow:0 0 0 4px rgba(99,102,241,0.12);border-radius:14px}
.search-input:focus{box-shadow:0 18px 50px rgba(16,24,40,0.14)}

.search-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;color:var(--muted);font-size:14px}
.search-hint{font-size:13px;color:var(--muted)}

.search-results{margin-top:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.search-item{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--card);border:1px solid rgba(15,23,42,0.04);box-shadow:0 12px 30px rgba(16,24,40,0.06);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .12s ease}
.search-item:hover{transform:translateY(-6px);box-shadow:0 28px 70px rgba(16,24,40,0.12);background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02))}
.search-item .search-thumb{width:100%;height:140px;border-radius:10px;flex:0 0 auto;overflow:hidden;background-size:cover;background-position:center}
.search-item .search-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.search-body{flex:1}
.search-title{margin:0;font-size:16px;color:var(--accent2);font-weight:800;color:var(--text)}
.search-desc{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.search-empty{padding:18px;color:var(--muted);text-align:center}

/* Dark-mode specific tweaks for search overlay */
html[data-theme="dark"] .search-overlay{background:linear-gradient(180deg, rgba(2,6,23,0.78), rgba(2,6,23,0.58));}
html[data-theme="dark"] .search-panel{box-shadow:0 40px 90px rgba(2,6,23,0.6);border-color:rgba(255,255,255,0.04)}
html[data-theme="dark"] .search-item{border-color:rgba(255,255,255,0.03)}
html[data-theme="dark"] .search-item:hover{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));box-shadow:0 18px 50px rgba(2,6,23,0.6)}
html[data-theme="dark"] .search-input::placeholder{color:rgba(230,240,255,0.48)}
html[data-theme="dark"] .search-panel{backdrop-filter: blur(8px) saturate(1.02)}

/* Always reserve scrollbar space to avoid layout shift and keep scrollbar visible */
/* Use modern `scrollbar-gutter` where supported, and fall back to forcing a visible scrollbar. */
html{
  /* Reserve scrollbar space on the side where it appears (prevent layout shift).
     Avoid 'both-edges' which can create a gutter on the left side in some browsers. */
  scrollbar-gutter: stable;
  /* some browsers will still hide the gutter; forcing a visible scrollbar keeps the visual bar present */
  overflow-y: scroll;
}

/* Cross-browser scrollbar styling for a subtle, on-brand look */
/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:rgba(15,23,42,0.03);border-radius:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent1),var(--accent2));border-radius:10px;border:3px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{filter:brightness(0.96)}

/* Firefox */
body{
  scrollbar-width:thin;
  scrollbar-color: var(--accent2) rgba(15,23,42,0.06);
}

/* CKEditor dark-mode adjustments so the editor UI follows site theme */
html[data-theme="dark"] .ck-editor__editable,
html[data-theme="dark"] .ck-editor__editable_inline,
html[data-theme="dark"] .ck-editor__editable[contenteditable="true"],
html[data-theme="dark"] .ck-content {
  background: var(--card);
  color: var(--text);
  caret-color: var(--accent1);
}

html[data-theme="dark"] .ck-toolbar,
html[data-theme="dark"] .ck-toolbar .ck-button,
html[data-theme="dark"] .ck-toolbar .ck-dropdown,
html[data-theme="dark"] .ck-toolbar__items {
  background: rgba(255,255,255,0.02);
  color: var(--text);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
  border: 1px solid rgba(255,255,255,0.04);
}

html[data-theme="dark"] .ck-button {
  background: transparent;
  color: var(--text);
}

html[data-theme="dark"] .ck-button:hover,
html[data-theme="dark"] .ck-toolbar .ck-button.ck-on {
  background: rgba(255,255,255,0.03);
  color: var(--accent1);
}

html[data-theme="dark"] .ck-dropdown__panel,
html[data-theme="dark"] .ck-balloon-panel,
html[data-theme="dark"] .ck-panel,
html[data-theme="dark"] .ck-tooltip,
html[data-theme="dark"] .ck.ck-reset_all {
  background: var(--card);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 14px 40px rgba(2,6,23,0.6);
}

html[data-theme="dark"] .ck-icon svg { filter: invert(1) brightness(1.15); }
html[data-theme="dark"] .ck-editor__editable p { color: var(--text); }
html[data-theme="dark"] .ck-placeholder { color: rgba(230,240,255,0.38); }
html[data-theme="dark"] .ck-editor { transition: background .12s ease, color .12s ease; }

/* Remove the visible blue/gray line when clicking inputs in the admin dashboard,
   but keep a visible focus ring for keyboard users using :focus-visible. */
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus,
.admin-panel input:focus,
.admin-panel textarea:focus,
.admin-panel select:focus,
#phrases-app input:focus {
  outline: none !important;
  box-shadow: none !important;
}

.admin-form input:focus-visible,
.admin-form textarea:focus-visible,
.admin-form select:focus-visible,
.admin-panel input:focus-visible,
.admin-panel textarea:focus-visible,
.admin-panel select:focus-visible,
#phrases-app input:focus-visible {
  outline: 3px solid rgba(99,102,241,0.12);
  outline-offset: 4px;
}

/* Stronger, admin-scoped overrides for CKEditor so the editor respects dark mode
   and to remove the default ugly focus outline. Use !important selectively to
   override the editor's internal styles when needed. */
body.admin-page .ck-editor__editable,
body.admin-page .ck-editor__editable_inline,
body.admin-page .ck-editor__editable[contenteditable="true"],
body.admin-page .ck-content {
  background: var(--card) !important;
  color: var(--text) !important;
  caret-color: var(--accent1) !important;
}

html[data-theme="dark"] body.admin-page .ck-editor__editable,
html[data-theme="dark"] body.admin-page .ck-editor__editable_inline,
html[data-theme="dark"] body.admin-page .ck-content {
  background: var(--card) !important;
  color: var(--text) !important;
}

/* Remove the ugly browser focus outline on the editable area and toolbar buttons */
body.admin-page .ck-editor__editable:focus,
body.admin-page .ck-editor__editable:focus-visible,
body.admin-page .ck-toolbar .ck-button:focus,
body.admin-page .ck-toolbar .ck-button:focus-visible,
body.admin-page .ck-button:focus,
body.admin-page .ck-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Prefer an accessible focus-visible ring for keyboard users */
body.admin-page .ck-editor__editable:focus-visible {
  outline: 3px solid rgba(99,102,241,0.12) !important;
  outline-offset: 4px !important;
}

/* Ensure dropdowns, balloon panels and tooltips also follow theme */
body.admin-page .ck-dropdown__panel,
body.admin-page .ck-balloon-panel,
body.admin-page .ck-panel,
body.admin-page .ck-tooltip {
  background: var(--card) !important;
  color: var(--text) !important;
  border: 1px solid rgba(15,23,42,0.06) !important;
}

/* Fix icons (invert for dark when necessary) */
body.admin-page .ck-icon svg { filter: none !important; }

/* Extremely specific overrides to remove any remaining focus outlines, borders or
  shadows injected by CKEditor internals on admin pages while preserving keyboard
  focus visibility where possible. This targets all elements under .ck and uses
  focus-visible to show a gentle ring for keyboard users. */
body.admin-page .ck *:focus { outline: none !important; box-shadow: none !important; border-color: transparent !important; }
body.admin-page .ck *:focus-visible { outline: 3px solid rgba(99,102,241,0.12) !important; outline-offset: 4px !important; }
body.admin-page .ck-toolbar, body.admin-page .ck-balloon-panel, body.admin-page .ck-dropdown__panel, body.admin-page .ck-tooltip { box-shadow: none !important; border: 1px solid rgba(15,23,42,0.04) !important; }
body.admin-page .ck-editor__editable, body.admin-page .ck-content { border: none !important; box-shadow: none !important; }




/* Accessibility: ensure scrollbar contrast when focused */
::-webkit-scrollbar-thumb:active, ::-moz-scrollbar-thumb:active{outline:2px solid rgba(255,255,255,0.06)}


/* Right column decorations: rotor + quick links */
.search-rotor{font-weight:700;color:rgba(15,23,42,0.6);padding:10px 14px;border-radius:999px;background:linear-gradient(90deg, rgba(99,102,241,0.06), rgba(99,102,241,0.02));font-size:13px}
.search-quick{width:100%;display:flex;flex-direction:column;gap:8px}
.search-quick a{display:inline-flex;padding:10px 12px;border-radius:10px;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;text-decoration:none;font-weight:700;text-align:center}

@media (max-width:880px){
  .search-panel{flex-direction:column;padding:18px}
  .search-right{width:100%;order:2}
  .search-results{grid-template-columns:1fr}
  .search-item .search-thumb{height:110px}
}

/* Fix mobile horizontal overflow: allow search left column to shrink and
   ensure decorative hero art doesn't push past the viewport */
@media (max-width:880px){
  .search-left{min-width:0}
}


.admin-dashboard{display:grid;grid-template-columns:1fr;gap:24px}
.admin-panel{width:100%;box-sizing:border-box;background:var(--card);padding:18px;border-radius:12px;box-shadow:var(--shadow)}
.admin-table{width:100%;border-collapse:collapse}
.admin-table th,.admin-table td{padding:10px 8px;border-bottom:1px solid rgba(15,23,42,0.04);text-align:left}
.admin-table th{font-weight:700;font-size:13px;color:var(--muted)}
.admin-form label{display:block;margin-bottom:12px}
.admin-form input[type="text"],.admin-form input[type="datetime-local"],.admin-form input[type="file"],.admin-form textarea,.admin-form select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(15,23,42,0.06);font-size:14px;background:var(--card);color:var(--text)}
.admin-actions{display:flex;gap:8px;align-items:center}
.admin-empty{padding:18px;color:var(--muted);text-align:center}
.admin-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.admin-table td form{display:inline-block}

@media (max-width:980px){
  .admin-dashboard{grid-template-columns:1fr}
}

/* Admin mobile responsiveness */
body.admin-page main.container{
  display:block;
  min-height:0;
  padding:16px 0 24px;
}

@media (max-width:760px){
  html, body{overflow-x:hidden}
  body.admin-page .container{width:min(96%,1100px)}
  body.admin-page *{max-width:100%}
  body.admin-page .admin-panel{overflow:hidden}
  body.admin-page .theme-toggle{
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    margin: 6px 10px 0 auto;
    width: 44px;
    height: 44px;
    z-index: auto !important;
  }
  .admin-panel{padding:14px;border-radius:10px}
  .admin-actions{flex-direction:column;align-items:stretch}
  .admin-actions .btn{width:100%;justify-content:center}
  .admin-form,
  .admin-form label,
  .admin-form input,
  .admin-form textarea,
  .admin-form select{max-width:100%}
  .admin-form input,
  .admin-form textarea,
  .admin-form select,
  .admin-form .btn,
  .admin-panel .btn{box-sizing:border-box}
  .admin-form input,
  .admin-form textarea,
  .admin-form select{font-size:16px}
  .admin-form input[type="file"]{font-size:14px;overflow:hidden}
  .admin-form input[type="file"]::-webkit-file-upload-button{max-width:110px}
  .admin-form input[type="file"]::file-selector-button{max-width:110px}
  body.admin-page .ck,
  body.admin-page .ck-editor,
  body.admin-page .ck-editor__main,
  body.admin-page .ck-content{max-width:100% !important}
  body.admin-page .ck-toolbar,
  body.admin-page .ck.ck-toolbar,
  body.admin-page .ck-toolbar__items{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  body.admin-page .ck-toolbar,
  body.admin-page .ck.ck-toolbar{
    display:flex !important;
    flex-wrap:wrap !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  body.admin-page .ck-toolbar__items{
    display:flex !important;
    flex-wrap:wrap !important;
    min-width:0 !important;
  }
  body.admin-page .ck-toolbar .ck-button,
  body.admin-page .ck-toolbar .ck-dropdown{
    flex:0 0 auto !important;
    min-width:0 !important;
  }
  body.admin-page .ck-toolbar .ck-dropdown .ck-button__label{
    max-width:70px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.admin-page .ck-editor__editable,
  body.admin-page .ck-editor__editable_inline,
  body.admin-page .ck-content{
    min-height:220px !important;
    max-height:45vh !important;
    overflow:auto !important;
  }
  .admin-table-wrap{overflow-x:visible}
  .admin-table{min-width:0;border-collapse:separate;border-spacing:0 10px}
  .admin-table thead{display:none}
  .admin-table tbody,
  .admin-table tr,
  .admin-table td{display:block;width:100%}
  .admin-table tr{background:var(--card);border:1px solid rgba(15,23,42,0.06);border-radius:10px;padding:10px;box-shadow:0 6px 20px rgba(2,6,23,0.04)}
  .admin-table td{border:0;padding:4px 0;font-size:14px;line-height:1.45;word-break:break-word}
  .admin-table td:nth-child(1)::before{content:'ID: ';font-weight:700;color:var(--muted)}
  .admin-table td:nth-child(2)::before{content:'Titel: ';font-weight:700;color:var(--muted)}
  .admin-table td:nth-child(3)::before{content:'Kategori/Slug: ';font-weight:700;color:var(--muted)}
  .admin-table td:nth-child(4)::before{content:'Oprettet: ';font-weight:700;color:var(--muted)}
  .admin-table td:nth-child(5)::before{content:'Handling: ';font-weight:700;color:var(--muted)}
  .admin-table td .btn{display:block;width:100%;max-width:100%;box-sizing:border-box;margin:0 0 8px 0;text-align:center}
  .admin-table td form{display:block;margin:0 !important;width:100%;max-width:100%}
  .admin-table td:last-child{display:block;overflow:hidden}
  .admin-table td:last-child::before{display:block;margin-bottom:6px}
  .admin-table td:last-child > .btn,
  .admin-table td:last-child > form,
  .admin-table td:last-child > form .btn{display:block;width:100%;max-width:100%;box-sizing:border-box}
  .admin-table td:last-child > form:last-child .btn,
  .admin-table td:last-child > .btn:last-child{margin-bottom:0}
  #phrases-app > div[style*="display:flex"]{flex-direction:column !important}
  #phrases-app > div[style*="display:flex"] .btn{width:100%;justify-content:center}
}

  .admin-suggestions{display:grid;grid-template-columns:1fr;gap:12px;margin-top:10px}
  .admin-suggestions-panel{width:100%;box-sizing:border-box}
  .suggestion-item{padding:14px;border-radius:12px;border:1px solid rgba(15,23,42,0.06);background:var(--card);box-shadow:0 8px 20px rgba(2,6,23,0.04)}
  .suggestion-item.is-hidden{display:none}
  .suggestion-meta{margin-bottom:8px}
  .suggestion-message{white-space:pre-wrap;word-break:break-word;line-height:1.55;color:var(--text)}
  .suggestion-item .btn{min-width:120px}
  .admin-top-actions{
    position: sticky;
    top: 0;
    z-index: 1250;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin: 12px 0 18px;
    padding: 10px 0;
    background: linear-gradient(180deg, rgba(251,251,253,0.98), rgba(251,251,253,0.88));
    backdrop-filter: blur(8px);
  }
  html[data-theme="dark"] .admin-top-actions{
    background: linear-gradient(180deg, rgba(11,18,32,0.98), rgba(11,18,32,0.88));
  }
  .admin-top-actions .btn{white-space:nowrap}
  .admin-top-actions form{margin:0}

  /* First-visit privacy notice */
  .visitor-notice{
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 1700;
    width: min(360px, calc(100vw - 32px));
    background: rgba(7, 10, 18, 0.96);
    color: #f4f7fb;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
    padding: 14px 14px 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease;
  }
  .visitor-notice--show{opacity:1;transform:translateY(0)}
  .visitor-notice--hide{opacity:0;transform:translateY(10px)}
  .visitor-notice__text{flex:1;min-width:0}
  .visitor-notice__text strong{display:block;font-size:13px;letter-spacing:.02em;margin-bottom:6px;color:#fff}
  .visitor-notice__text p{margin:0;font-size:13px;line-height:1.5;color:rgba(244,247,251,0.88)}
  .visitor-notice__close{
    flex:0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .visitor-notice__close:hover{background:rgba(255,255,255,0.16)}
  .visitor-notice__close:focus-visible{outline:3px solid rgba(255,255,255,0.28);outline-offset:2px}

  @media (max-width:640px){
    .visitor-notice{
      left: 10px;
      right: 10px;
    .admin-top-actions{top:0;gap:8px;padding:8px 0;align-items:stretch}
    .admin-top-actions .btn,
    .admin-top-actions form,
    .admin-top-actions form .btn{width:100%;display:block}
      width: auto;
      max-width: none;
    }
  }

/* Frontpage: cleaner, elegant design — CSS only
   - Soft, neutral palette and refined spacing
   - Grid-based cards with a gentle featured item
   - Subtle shadows and readable typographic scale
*/

:root{
  --fp-accent: #6c5ce7;
  --fp-muted: #556075;
  --fp-card: #ffffff;
}

/* About cards specific styles */
.about-cards{display:grid;grid-template-columns:1fr;gap:22px;margin-top:28px}
@media (min-width:769px){
  .about-cards{grid-template-columns:repeat(4,1fr)}
}

/* Ensure `.cards.about-cards` (elements with both classes) also enforce 4 columns on wide screens */
.cards.about-cards{display:grid;grid-template-columns:1fr;gap:22px;margin-top:28px}
@media (min-width:769px){
  .cards.about-cards{grid-template-columns:repeat(4,1fr)}
}
.about-card{border-radius:12px;overflow:hidden;border:1px solid rgba(15,23,42,0.04);background:var(--card);box-shadow:var(--shadow);display:flex;flex-direction:column}
.about-card .card-bg{background-size:contain;background-position:center top;background-repeat:no-repeat}
.about-card .card-body{padding:16px}
.about-card .card-title{margin:0;font-size:18px;font-weight:800;color:var(--title-color)}
.about-card .card-excerpt{margin-top:8px;color:var(--muted);font-size:14px;line-height:1.6}

@media (max-width:640px){
  .about-cards{grid-template-columns:1fr}
}

/* Hero: calm and centered */
.hero{padding:56px 0 24px}
.hero .container{display:flex;align-items:center;gap:28px;padding:28px;border-radius:14px}
.name{font-weight:800;font-size:40px;letter-spacing:-0.02em;margin:0;color:var(--title-color)}

/* about-card titles and .name should remain solid via --title-color (no gradient) */
.tagline{font-size:18px;color:var(--fp-muted);margin:6px 0 0}
.hero-art{width:320px;height:200px;border-radius:12px;overflow:hidden;box-shadow:0 18px 60px rgba(12,18,40,0.06)}

/* New landing hero inspired by reference */
.hero-landing{padding:0px 0 12px; text-align: center;}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:0px;align-items:center}
.hero-left{max-width:760px}
.eyebrow{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:8px;letter-spacing:0.06em}
.hero-title{font-size:88px;line-height:0.9;margin:6px 0 12px;font-weight:900;letter-spacing:0.02em;color:var(--text)}
.hero-title span{display:inline-block;padding-left:8px;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-lead{font-size:18px;color:var(--muted);max-width:100%;margin-bottom:18px}
.hero-cta{display:flex;gap:12px;margin-bottom:22px}
.hero-decor{margin-top:18px}

.hero-right .visual-card{position:relative;background:var(--card);border-radius:22px;padding:22px;box-shadow:0 18px 50px rgba(12,18,40,0.06);height:320px;display:flex;flex-direction:column;justify-content:space-between}
.visual-blob{height:170px;border-radius:100px;background:radial-gradient(circle at 20% 20%, rgba(109,211,255,0.9) 0%, rgba(195,177,255,0.6) 40%, rgba(255,255,255,0.0) 60%);box-shadow:inset 0 -20px 40px rgba(0,0,0,0.02);}
.visual-badges{display:flex;gap:10px;justify-content:flex-end}
.vb{background:linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));color:var(--muted);padding:8px 12px;border-radius:4px;font-weight:800;font-size:13px}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-title{font-size:44px}
  .hero-lead{max-width:100%}
  .hero-right{order: -1}
}

/* Cards: clean grid with a subtle featured first card */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}
.post-card{display:flex;flex-direction:column;height:100%;background:var(--fp-card);border-radius:12px;overflow:hidden;border:1px solid rgba(11,17,30,0.04);box-shadow:0 8px 30px rgba(12,18,40,0.04);transition:transform .18s ease,box-shadow .18s ease}
.post-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(12,18,40,0.08)}
.post-media{height:160px;background-size:cover;background-position:center}
.post-body{padding:16px;display:flex;flex-direction:column;flex:1}
.post-title{font-size:18px;margin:0 0 6px;font-weight:700}
.post-excerpt{color:var(--fp-muted);font-size:14px;line-height:1.5;margin:0}
.post-actions{margin-top:auto;padding-top:14px}

/* ensure all cards are equal width in the grid */
.cards .post-card:first-child{grid-column:auto;box-shadow:0 8px 30px rgba(12,18,40,0.04)}
.cards .post-card:first-child .post-media{height:160px}

/* responsive */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards .post-card:first-child{grid-column:auto}
  .hero .container{flex-direction:row}
}
@media (max-width:720px){
  .cards{grid-template-columns:1fr}
  .cards .post-card:first-child{grid-column:auto}
  .hero .container{flex-direction:column;align-items:flex-start}
  .name{font-size:28px}
  .hero-art{width:100%;height:180px}
}

/* Mobile usability improvements (no visual design changes) */
@media (max-width:600px){
  /* make hero lead readable on narrow screens */
  .hero-lead{max-width:100%;font-size:16px}

  /* ensure touch targets meet recommended sizes */
  .nav-links a, .btn, .theme-toggle{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

  /* avoid theme-toggle covering content; nudge it slightly inward on very small screens */
  .theme-toggle{right:12px;bottom:12px}

  /* cards and post bodies: increase spacing for tappability */
  .post-body{padding:18px}
  .post-card{border-radius:14px}

  /* make search input full width and easier to tap */
  .search-input{padding:14px 16px;font-size:16px}

  /* ensure links and small controls have enough breathing room */
  .nav-links{gap:10px}
  .nav-links a{padding:10px}

  /* make footer links easier to tap */
  .site-footer .foot-nav a{display:inline-block;padding:10px}
}

/* Ensure borders and subtle accents remain visible in dark mode */
html[data-theme="dark"] .post-card,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .admin-panel{
  border-color: rgba(255,255,255,0.04) !important;
}
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .btn.outline{
  border-color: rgba(255,255,255,0.06);
  color: var(--muted);
}

/* small polish */
.category-pill{font-weight:600}
.post-title a{text-decoration:none}
.post-title a:hover{opacity:0.9}


/* CKEditor editable area sizing for better authoring UX */
.ck-editor__main .ck-editor__editable,
.ck-editor__editable_inline,
.ck-content {
  min-height: 320px; /* comfortable default editing height */
  max-height: 70vh;
  overflow: auto;
  padding: 12px; /* consistent inner padding */
}

/* Admin login page styles: centered, modern card with subtle visuals */
.login-wrap{display:flex;align-items:center;justify-content:center;padding:60px 0}
.login-card{display:block;max-width:640px;width:100%;border-radius:16px;overflow:hidden;box-shadow:0 30px 90px rgba(12,18,40,0.12);background:var(--card);margin:30px auto}
.login-body{padding:34px 28px;display:flex;flex-direction:column;justify-content:center}
.login-title{font-size:28px;margin:0 0 6px;color:var(--accent2);font-weight:800}
.login-sub{margin:0 0 18px;color:var(--muted)}
.admin-login-form .field{display:block;margin-bottom:14px}
.admin-login-form .field-label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.admin-login-form input[type="text"],.admin-login-form input[type="password"]{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(15,23,42,0.06);font-size:15px}
.admin-login-form input[disabled]{background:var(--card);color:var(--muted)}
.login-card .btn.primary{padding:12px 18px;border-radius:12px;font-size:15px}
.login-card .error{color:#b45309;background:rgba(255,244,230,0.9);padding:10px;border-radius:8px;margin:8px 0}

@media (max-width:900px){
  .login-card{width:92%;margin:18px auto}
  .login-body{padding:18px}
}

/* Mobile nav: hide desktop nav and show hamburger */
@media (max-width:880px){
  /* constrain mobile nav slightly inside viewport to avoid horizontal overflow */
  /* hide desktop inline nav visually (we'll reuse it as the drawer) */
  .nav-links{position:fixed;top:0;right:0;height:100vh;width:min(340px,76%);background:var(--card);box-shadow:-20px 0 60px rgba(2,6,23,0.12);padding:64px 22px 22px 22px;flex-direction:column;gap:12px;z-index:1600;border-left:1px solid rgba(15,23,42,0.04);overflow-y:auto;overflow-x:hidden;align-items:stretch;display:flex;transform:translateX(110%);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.9,.3,1),opacity .18s ease;box-sizing:border-box}
  .nav-links.open{transform:translateX(0);opacity:1;pointer-events:auto}
  .nav-links a{display:block;padding:12px 16px;border-radius:10px; width:100%; color:var(--text);word-break:break-word;white-space:normal}
  /* in-drawer close control */
  .nav-close{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:10px;border:1px solid rgba(15,23,42,0.04);background:var(--card);color:var(--muted);font-size:22px;line-height:1;display:inline-flex !important;align-items:center;justify-content:center;cursor:pointer;z-index:1620;box-shadow:0 6px 20px rgba(2,6,23,0.06)}
  .nav-close:focus{outline:2px solid rgba(0,0,0,0.08);outline-offset:2px}
  .hamburger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;border:0;background:var(--card);box-shadow:0 6px 20px rgba(2,6,23,0.06);cursor:pointer}
  .hamburger svg{width:20px;height:20px;display:block}
  /* ensure theme-toggle doesn't overlap hamburger */
  .topbar .controls{display:flex;gap:8px;align-items:center}
  /* on mobile we relocate the theme toggle into the drawer via JS */
  /* when moved into the nav, ensure it behaves like a normal nav control (not fixed) */
  /* support both: when a container has .nav-theme and when the toggle element itself
     receives the .nav-theme class (JS may add the class to the toggle element). */
  .nav-theme,
  .nav-theme.theme-toggle,
  .theme-toggle.nav-theme {
    position:static !important;
    right:auto !important;
    bottom:auto !important;
    width:100%;
    justify-content:center;
    padding:10px 12px;
  }
  /* hide the floating desktop toggle on mobile to avoid off-screen artifacts */
  .theme-float{display:none}

  /* footer area inside the drawer for secondary controls */
  .nav-footer{margin-top:auto;padding:18px 22px 28px;border-top:1px solid rgba(15,23,42,0.03);display:flex;flex-direction:column;align-items:stretch;gap:12px}
  .nav-theme,
  .nav-theme.theme-toggle,
  .theme-toggle.nav-theme {
    margin-left:0;
    padding:8px 12px;
    border-radius:12 0px 0px 12px;
    background:transparent;
    border:1px solid rgba(15,23,42,0.04);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--muted);
    width:100%;
  }

  /* ensure the actual toggle element is static and full-width whether it's the
     .nav-theme element or a child of it */
  .nav-theme .theme-toggle,
  .nav-theme.theme-toggle,
  .theme-toggle.nav-theme {
    position:static !important;
    margin:0;
    border-radius:12 0px 0px 12px;
    width:40px;
    justify-content:center;
    align-items:center;
    padding:0;
    height:40px;
    min-height:40px;
    line-height:22px;
    display:inline-flex;
    box-sizing:border-box;
  }

  /* when the toggle is placed at the top of the nav, give it breathing room */
  .nav-theme{
    margin-bottom:14px;
  }
}

/* Make the selected nav link sit flush with the top of the mobile drawer */
@media (max-width:880px){
  .nav-links a.active{border-top-right-radius:0;border-bottom-right-radius:0}
}

  /* ensure the svg inside the toggle is centered and sized */
  .nav-theme .theme-toggle svg,
  .theme-toggle.nav-theme svg { display:block; margin:0 auto; width:20px; height:20px }

/* Ensure the theme toggle sits to the right inside the mobile nav container */
@media (max-width:880px){
  /* center the small toggle within the vertical nav and add spacing below */
  .nav-links .theme-toggle{ margin:0 auto 15px; display:inline-flex }
  .nav-links .nav-theme{ justify-content:center }
}

@media (min-width:881px){
  .hamburger{display:none}
}

/* Prevent page scroll/overflow when mobile nav is open */
body.nav-open{overflow:hidden}
/* Also prevent horizontal overflow while nav open */
body.nav-open, html.nav-open{overflow-x:hidden}

/* hide in-drawer close control by default; shown only inside the mobile media query */
.nav-close{display:none}
/* nav theme styles are handled via JS relocation; no global hide */

/* floating theme toggle for desktop (created by JS) */
.theme-float{position:fixed;right:18px;bottom:18px;z-index:1500;display:flex;align-items:center}
.float-theme{display:inline-flex;padding:10px;border-radius:12px;background:var(--card);border:1px solid rgba(15,23,42,0.04);box-shadow:0 12px 40px rgba(2,6,23,0.08);align-items:center;justify-content:center}

#maintenance-countdown{
  font-size: 14px;
  font-weight: 600;
  color: linear-gradient(90deg,var(--accent1),var(--accent2));
  margin-top: 8px;
}

/* Strong override: enforce single-column stacking on a wide range of phones
   and devices that report large CSS widths (covers edge cases). Placed at
   the end to ensure it wins over earlier grid rules. */
@media (max-width:1200px){
  .about-page .about-cards{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    gap: 18px !important;
  }
  .about-page .about-cards .about-card{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
}

/* Fix: ensure hero landing sections stack vertically (contact page layout) */
/* This override forces vertical flow and centers inner container content. */
.hero-landing {
  display: block !important;
}
.hero-landing .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 900px;
  padding: 24px;
}