/* Urd basestiler: reset + theme-token-variabler.
   Variablene under er fallbacks; theme.js overskriver dem fra
   content/site.json ved lasting. */

:root {
  --urd-color-bg: #0b0e14;
  --urd-color-surface: #151a23;
  --urd-color-text: #e8eaf0;
  --urd-color-accent: #7c5cff;
  --urd-font-heading: system-ui, sans-serif;
  --urd-font-body: system-ui, sans-serif;
  --urd-radius-sm: 6px;
  --urd-radius-md: 12px;
  --urd-space-section: clamp(3rem, 8vw, 6rem);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--urd-color-bg);
  color: var(--urd-color-text);
  font-family: var(--urd-font-body);
  line-height: 1.6;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--urd-font-heading);
  line-height: 1.15;
}

img, video {
  max-width: 100%;
  display: block;
}

/* Seksjonscontainer: posisjoneringskontekst for blokk-frames */
.urd-section {
  position: relative;
  overflow: hidden;
}

/* Bakgrunnslag fyller seksjonen og ligger bak blokkene */
.urd-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Blokker posisjoneres absolutt av render.js (frameToCss) */
.urd-block {
  position: absolute;
}

/* Plassholder for ukjente typer: nøytral, aldri ødeleggende */
.urd-placeholder {
  display: grid;
  place-items: center;
  border: 1px dashed color-mix(in srgb, var(--urd-color-text) 30%, transparent);
  border-radius: var(--urd-radius-sm);
  font-size: 0.85rem;
  opacity: 0.6;
}

/* Navigasjon */
.urd-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--urd-color-surface) 85%, transparent);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.urd-nav-logo {
  font-family: var(--urd-font-heading);
  font-weight: 700;
  color: var(--urd-color-text);
  text-decoration: none;
}

.urd-nav-logo img {
  height: 2rem;
}

.urd-nav-list {
  display: flex;
  gap: 1.25rem;
  list-style: none;
}

.urd-nav-list a {
  color: var(--urd-color-text);
  text-decoration: none;
  opacity: 0.85;
}

.urd-nav-list a:hover {
  opacity: 1;
  color: var(--urd-color-accent);
}

/* Knapper */
.urd-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0.5em 1.2em;
  border-radius: var(--urd-radius-sm);
  font-family: var(--urd-font-heading);
  font-weight: 600;
  text-decoration: none;
}

.urd-button-primary {
  background: var(--urd-color-accent);
  color: var(--urd-color-bg);
}

.urd-button-primary:hover {
  filter: brightness(1.1);
}

.urd-button-secondary {
  border: 1px solid var(--urd-color-accent);
  color: var(--urd-color-accent);
}

/* Animert gradientbakgrunn (gradient-laget setter background-size 200%) */
.urd-bg-animate {
  animation: urd-bg-pan 18s ease-in-out infinite alternate;
}

@keyframes urd-bg-pan {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .urd-bg-animate {
    animation: none;
  }
}

/* Editeringslaget - gjelder KUN i preview-modus (body.urd-preview,
   satt av motoren inne i editorens iframe) */
.urd-preview .urd-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--urd-color-accent) 30%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--urd-color-accent) 30%, transparent) 1px, transparent 1px);
}

.urd-preview .urd-editable:hover {
  outline: 1px dashed var(--urd-color-accent);
  outline-offset: 2px;
}

.urd-preview .urd-edit-toolbar {
  position: absolute;
  bottom: 100%;
  left: 0;
  /* Usynlig bro ned til blokk-kanten, så hover ikke mistes på veien
     opp til håndtakene */
  padding-bottom: 5px;
  display: none;
  gap: 2px;
  z-index: 1000;
}

/* Blokker nær toppen av seksjonen: verktøylinje inni blokken i stedet,
   så den ikke klippes av seksjonens overflow (klasse satt av preview-edit.js) */
.urd-preview .urd-edit-toolbar-inside {
  bottom: auto;
  top: 4px;
  left: 4px;
  padding-bottom: 0;
}

.urd-preview .urd-editable:hover .urd-edit-toolbar,
.urd-preview .urd-edit-toolbar:hover {
  display: flex;
}

.urd-preview .urd-edit-toolbar button {
  border: 0;
  border-radius: 4px;
  background: var(--urd-color-accent);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  padding: 5px 7px;
  cursor: grab;
}

.urd-preview .urd-edit-toolbar .urd-edit-delete {
  cursor: pointer;
  background: #c0392b;
}

.urd-preview .urd-edit-resize {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--urd-color-accent);
  cursor: nwse-resize;
  display: none;
  z-index: 1000;
}

.urd-preview .urd-editable:hover .urd-edit-resize {
  display: block;
}

/* Markert blokk: varig omriss og alltid synlige håndtak */
.urd-preview .urd-block.urd-selected {
  outline: 2px solid var(--urd-color-accent);
  outline-offset: 2px;
}

.urd-preview .urd-block.urd-selected .urd-edit-toolbar {
  display: flex;
}

.urd-preview .urd-block.urd-selected .urd-edit-resize {
  display: block;
}

/* «+ Ny seksjon»-barene mellom seksjoner (kun i preview) */
.urd-preview .urd-add-section {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--urd-color-accent) 25%, transparent) 0 8px,
    transparent 8px 16px
  ) center / 100% 1px no-repeat;
}

.urd-preview .urd-add-section button {
  border: 1px dashed color-mix(in srgb, var(--urd-color-accent) 60%, transparent);
  border-radius: 999px;
  background: var(--urd-color-bg);
  color: var(--urd-color-text);
  font-size: 12px;
  padding: 3px 12px;
  cursor: pointer;
  opacity: 0.75;
}

.urd-preview .urd-add-section button:hover {
  opacity: 1;
  border-style: solid;
}

/* Seksjonens verktøylinje (flytt/slett) - synlig ved hover over seksjonen */
.urd-preview .urd-section-toolbar {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  gap: 2px;
  z-index: 1001;
}

.urd-preview .urd-section:hover > .urd-section-toolbar {
  display: flex;
}

.urd-preview .urd-section-toolbar button {
  border: 0;
  border-radius: 4px;
  background: color-mix(in srgb, var(--urd-color-surface) 85%, transparent);
  color: var(--urd-color-text);
  font-size: 13px;
  line-height: 1;
  padding: 5px 8px;
  cursor: pointer;
}

.urd-preview .urd-section-toolbar button:hover {
  background: var(--urd-color-accent);
  color: #fff;
}

/* Ren visning: editoren kan skjule alle editeringshåndtak, slik at siden
   ses nøyaktig som besøkende ser den */
.urd-preview.urd-chrome-off .urd-add-section,
.urd-preview.urd-chrome-off .urd-edit-toolbar,
.urd-preview.urd-chrome-off .urd-edit-resize,
.urd-preview.urd-chrome-off .urd-section-toolbar,
.urd-preview.urd-chrome-off .urd-section-resize,
.urd-preview.urd-chrome-off .urd-grid-overlay {
  display: none !important;
}

.urd-preview.urd-chrome-off .urd-editable:hover {
  outline: none;
}

/* Høyde-håndtaket i underkant av seksjonen: treffsonen er 10px, men den
   synlige linjen ligger nøyaktig på seksjonens kant */
.urd-preview .urd-section-resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 10px;
  cursor: ns-resize;
  z-index: 1001;
}

.urd-preview .urd-section-resize::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
}

.urd-preview .urd-section-resize:hover::after,
.urd-preview .urd-section-resize:active::after {
  background: var(--urd-color-accent);
}