/* Shared header, footer and download links for vibeke.klovning.net.
   The markup is inserted into every page by tools/layout.py; styles live here. */

@font-face { font-family: "Josefin Sans"; font-weight: 600; font-display: swap;
  src: url("/wp-content/themes/cakely/assets/fonts/josefin-sans_normal_600.ttf") format("truetype"); }
@font-face { font-family: "Josefin Sans"; font-weight: 700; font-display: swap;
  src: url("/wp-content/themes/cakely/assets/fonts/josefin-sans_normal_700.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-weight: 400; font-display: swap;
  src: url("/wp-content/themes/cakely/assets/fonts/lato_normal_400.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-weight: 700; font-display: swap;
  src: url("/wp-content/themes/cakely/assets/fonts/lato_normal_700.ttf") format("truetype"); }

:root {
  --vk-pink: #e7238f;        /* brand pink (theme accent) */
  --vk-pink-deep: #a3145f;   /* pink with enough contrast for small text */
  --vk-blush: #ffe1e5;       /* theme primary, light pink */
  --vk-blush-soft: #fff4f6;
  --vk-brown: #6b5e58;       /* theme body colour, darkened for contrast */
  --vk-ink: #3a302c;
  --vk-head: "Josefin Sans", system-ui, sans-serif;
  --vk-body: "Lato", system-ui, sans-serif;
  --vk-max: 1088px;   /* 1040px content + 24px padding each side */
}

/* ---------- Header ---------- */
.vk-header {
  background: #fff;
  border-bottom: 3px solid var(--vk-blush);
  font-family: var(--vk-body);
  position: relative;
  z-index: 50;
}
.vk-header__inner {
  max-width: var(--vk-max);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
}
.vk-brand { text-decoration: none; display: flex; flex-direction: column; gap: 4px; }
.vk-brand__name {
  font-family: var(--vk-head); font-weight: 700; font-size: 1.6rem; line-height: 1;
  color: var(--vk-pink); letter-spacing: .01em;
}
.vk-brand__tag { font-size: .85rem; color: var(--vk-brown); letter-spacing: .02em; }
.vk-brand:hover .vk-brand__name, .vk-brand:focus-visible .vk-brand__name { color: var(--vk-pink-deep); }

.vk-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vk-nav a, .vk-nav summary {
  font-family: var(--vk-head); font-weight: 600; font-size: 1rem; letter-spacing: .03em;
  color: var(--vk-ink); text-decoration: none; padding: 9px 12px 7px; border-radius: 999px;
  cursor: pointer; display: inline-block; line-height: 1.2;
}
.vk-nav a:hover, .vk-nav summary:hover,
.vk-nav a:focus-visible, .vk-nav summary:focus-visible { background: var(--vk-blush); color: var(--vk-pink-deep); }
.vk-nav a[aria-current="page"] { background: var(--vk-pink); color: #fff; }
.vk-nav :focus-visible { outline: 2px solid var(--vk-pink-deep); outline-offset: 2px; }

.vk-menu { position: relative; }
.vk-menu summary { list-style: none; }
.vk-menu summary::-webkit-details-marker { display: none; }
.vk-menu summary::after {
  content: ""; display: inline-block; width: .45em; height: .45em; margin-left: .5em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-.2em) rotate(45deg); transition: transform .15s;
}
.vk-menu[open] summary::after { transform: translateY(.05em) rotate(-135deg); }
.vk-menu.is-current > summary { background: var(--vk-pink); color: #fff; }
.vk-menu__list {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 270px;
  margin: 0; padding: 8px; list-style: none; background: #fff;
  border: 1px solid var(--vk-blush); border-radius: 14px;
  box-shadow: 0 12px 30px rgba(163, 20, 95, .14);
}
.vk-menu__list a { display: flex; justify-content: space-between; gap: 16px; width: 100%; box-sizing: border-box; border-radius: 10px; }
.vk-menu__list a span { font-family: var(--vk-body); font-weight: 400; font-size: .85rem; color: var(--vk-brown); }
.vk-menu__list a[aria-current="page"] span { color: #fff; }

@media (max-width: 720px) {
  .vk-header__inner { padding: 14px 16px; }
  .vk-brand__name { font-size: 1.35rem; }
  .vk-nav { width: 100%; gap: 4px; }
  .vk-nav a, .vk-nav summary { padding: 8px 10px 6px; font-size: .95rem; }
  .vk-menu { position: static; }
  .vk-menu__list { left: 16px; right: 16px; min-width: 0; }
}

/* ---------- Download links ---------- */
.wp-block-file a.vk-dl {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 8px 14px 8px 10px; border-radius: 12px; border: 1.5px solid var(--vk-blush);
  background: #fff; color: var(--vk-pink-deep); font-family: var(--vk-body);
  line-height: 1.2; text-align: left; transition: background .15s, border-color .15s;
}
.wp-block-file a.vk-dl:hover, .wp-block-file a.vk-dl:focus-visible {
  background: var(--vk-blush-soft); border-color: var(--vk-pink);
}
.wp-block-file a.vk-dl:focus-visible { outline: 2px solid var(--vk-pink-deep); outline-offset: 2px; }
.vk-dl__icon { flex: none; width: 30px; height: 36px; }
.vk-dl__text { display: flex; flex-direction: column; gap: 3px; }
.vk-dl__label { font-weight: 700; font-size: 1rem; }
.vk-dl__meta { font-size: .78rem; color: var(--vk-brown); letter-spacing: .02em; }

/* External links (thesis registrations, ResearchGate) */
.vk-ext::after {
  content: ""; display: inline-block; width: .7em; height: .7em; margin-left: .3em;
  background: currentColor; vertical-align: .05em;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1h7v7h-1.5V3.6L3 10.1 1.9 9l6.5-6.5H4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 1h7v7h-1.5V3.6L3 10.1 1.9 9l6.5-6.5H4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Footer ---------- */
.vk-footer { background: var(--vk-blush); color: var(--vk-ink); font-family: var(--vk-body); margin-top: 0; }
.vk-footer__inner {
  max-width: var(--vk-max); margin: 0 auto; padding: 48px 24px 28px;
  display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px 48px;
}
.vk-footer h2 {
  font-family: var(--vk-head); font-weight: 700; color: var(--vk-pink-deep);
  font-size: 1.5rem; margin: 0 0 10px; line-height: 1.1; background: none;
}
.vk-footer h3 {
  font-family: var(--vk-head); font-weight: 700; color: var(--vk-pink-deep);
  font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; margin: 4px 0 12px; background: none;
}
.vk-footer p { margin: 0 0 10px; line-height: 1.55; font-size: .95rem; }
.vk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vk-footer a { color: var(--vk-pink-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-size: .95rem; }
.vk-footer a:hover, .vk-footer a:focus-visible { color: var(--vk-ink); }
.vk-footer__bottom {
  grid-column: 1 / -1; border-top: 1px solid rgba(163, 20, 95, .2); padding-top: 18px;
  display: flex; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap;
  font-size: .82rem; color: var(--vk-brown);
}
.vk-footer__bottom p { font-size: .82rem; margin: 0; }
.vk-footer__cite { max-width: 70ch; }
@media (max-width: 820px) {
  .vk-footer__inner { grid-template-columns: 1fr 1fr; padding: 36px 16px 24px; }
  .vk-footer__about { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .vk-footer__inner { grid-template-columns: 1fr; }
}

/* ---------- 404 page ---------- */
.vk-404 { max-width: 640px; margin: 0 auto; padding: 80px 24px 96px; text-align: center; font-family: var(--vk-body); color: var(--vk-ink); }
.vk-404 h1 { font-family: var(--vk-head); font-weight: 700; color: var(--vk-pink); font-size: clamp(2.2rem, 6vw, 3.4rem); text-transform: uppercase; margin: 0 0 16px; }
.vk-404 p { font-size: 1.1rem; line-height: 1.6; }
.vk-404 a { color: var(--vk-pink-deep); }

/* Refinements */
.vk-footer li { margin: 0; padding: 0; line-height: 1.4; }
.vk-nav summary { display: inline-flex; align-items: center; }
.vk-narrow { display: none; }
@media (max-width: 720px) {
  .vk-wide { display: none; }
  .vk-narrow { display: inline; }
  .vk-nav { gap: 2px; margin-left: -10px; }
}
/* The theme sets a large body font size; pin the shared parts to 16px so they match everywhere. */
.vk-header, .vk-footer, .vk-404 { font-size: 16px; line-height: 1.5; }
.vk-footer li { font-size: .95rem; }

/* ---------- Compact layout: typography ---------- */
/* Body text: 22px -> 18px, with a comfortable line length. */
.wp-site-blocks main p,
.wp-site-blocks main li { font-size: 1.125rem; line-height: 1.65; }
/* One shared column (1040px) for title, text and cards, so everything starts at the same left edge.
   Text stops at ~68 characters per line via right padding instead of a narrower, re-centred box. */
:root { --wp--style--global--content-size: 1040px; }
.wp-site-blocks main .entry-content > p,
.wp-site-blocks main .entry-content > ul,
.wp-site-blocks main .entry-content > h2 { padding-right: max(0px, calc(min(100%, 1040px) - 68ch)); box-sizing: border-box; }
.wp-site-blocks main .entry-content > * + * { margin-block-start: .9em; }
/* Page titles: smaller, and in brand pink instead of pale pink (the pale pink failed contrast). */
.wp-site-blocks main h1,
.wp-site-blocks main .wp-block-post-title {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.1rem) !important;
  line-height: 1.05 !important;
  color: var(--vk-pink) !important;
  margin-bottom: .4em;
}
.wp-site-blocks main { padding-top: 28px !important; padding-bottom: 40px !important; margin-top: 0 !important; }
.wp-site-blocks main h1 { margin-top: 0 !important; }
.wp-site-blocks main .vk-cards:last-child { margin-bottom: 0; }
/* Nested theme groups add their own top/bottom spacing; the main padding above is the only spacing we want. */
.wp-site-blocks main .wp-block-group { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.wp-site-blocks main .wp-block-spacer { display: none; }
.wp-site-blocks > * + .vk-footer, .wp-site-blocks > main + * { margin-block-start: 0 !important; }
.wp-site-blocks main h2.wp-block-heading:not(.vk-card__title) { font-size: 1.6rem; margin-top: 1.6em; }

/* ---------- Compact layout: card grid ---------- */
.vk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 28px 24px;
  margin: 32px 0 8px;
}
.vk-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; }
.vk-card__thumb { display: block; width: 100%; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--vk-blush); box-shadow: 0 2px 10px rgba(163, 20, 95, .08); transition: transform .15s, box-shadow .15s; }
.vk-card__thumb img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 724 / 1024; object-fit: cover; }
a.vk-card__thumb:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(163, 20, 95, .16); }
.vk-card__title {
  font-family: var(--vk-head) !important; font-weight: 700 !important; font-size: 1.02rem !important;
  line-height: 1.25 !important; color: var(--vk-ink) !important; margin: 2px 0 0 !important; text-align: left !important;
}
.vk-card__title a { color: var(--vk-pink-deep) !important; text-decoration: none; }
.vk-card__title a:hover { text-decoration: underline; }
.vk-card .wp-block-file { margin: auto 0 0 !important; text-align: left !important; }
.vk-card .vk-dl { padding: 7px 12px 7px 9px; }
.vk-card .vk-dl__icon { width: 24px; height: 29px; }
.vk-card .vk-dl__label { font-size: .92rem; }
.vk-card .vk-dl__meta { font-size: .74rem; }

/* Front page: wider grid of collection cards */
.home .vk-cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.home .vk-card__title { font-size: 1.15rem !important; }

@media (max-width: 520px) {
  .vk-cards { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
  .home .vk-cards { grid-template-columns: repeat(2, 1fr); }
}
/* Front page: its main area is full-width in the theme; put it on the same 1040px column. */
.home .wp-site-blocks main { max-width: 1040px; margin-left: auto !important; margin-right: auto !important;
  padding-left: 24px !important; padding-right: 24px !important; box-sizing: content-box; }
.home .wp-site-blocks main > *, .home .wp-site-blocks main .wp-block-group { padding-left: 0 !important; padding-right: 0 !important; }
.home .wp-site-blocks main p { max-width: 68ch; }
@media (max-width: 720px) {
  .home .wp-site-blocks main { padding-left: 16px !important; padding-right: 16px !important; }
}
.vk-header__inner, .vk-footer__inner { box-sizing: border-box; }

/* ---------- Reading structure ---------- */
.wp-site-blocks main p.vk-lead { font-size: 1.25rem; line-height: 1.6; color: var(--vk-ink); }
.wp-site-blocks main p.vk-lead strong { color: var(--vk-pink-deep); font-weight: 700; }
.wp-site-blocks main h2.vk-sub {
  font-family: var(--vk-head); font-weight: 700; font-size: 1.3rem !important; line-height: 1.2;
  color: var(--vk-ink); margin-block: 1.6em .5em !important; text-transform: none; letter-spacing: .01em;
}
.wp-site-blocks main h2.vk-sub--dl { margin-block-start: 1.8em !important; padding-bottom: .35em; border-bottom: 2px solid var(--vk-blush); }
.wp-site-blocks main h2.vk-sub + .vk-cards { margin-top: 16px; }
.wp-site-blocks main ul.vk-list {
  list-style: none; margin-block: 0 !important; padding: 0 max(0px, calc(min(100%, 1040px) - 68ch)) 0 0; display: grid; gap: 8px;
}
.wp-site-blocks main ul.vk-list li {
  position: relative; padding-left: 1.3em; margin: 0; font-size: 1.125rem; line-height: 1.55; color: var(--vk-brown);
}
.wp-site-blocks main ul.vk-list li::before {
  content: ""; position: absolute; left: .2em; top: .6em; width: .45em; height: .45em; border-radius: 50%; background: var(--vk-pink);
}
.wp-site-blocks main ul.vk-list strong { color: var(--vk-ink); font-weight: 700; }
.wp-site-blocks main ul.vk-list li { max-width: 68ch; }

/* ---------- Page title eyebrow ---------- */
.wp-site-blocks main p.vk-eyebrow {
  font-family: var(--vk-head); font-weight: 700; font-size: .85rem !important; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vk-brown); margin-block: 0 .35em !important;
}

/* ---------- MA thesis page ---------- */
.vk-thesis {
  display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start;
  margin-block: 28px 0 !important; font-family: var(--vk-body);
}
.vk-thesis__cover { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--vk-blush);
  box-shadow: 0 4px 16px rgba(163, 20, 95, .1); }
.vk-thesis__cover img { display: block; width: 100% !important; height: auto !important; }
.vk-thesis__body > * { margin: 0; }
.vk-thesis .vk-thesis__meta { font-size: .85rem !important; letter-spacing: .08em; text-transform: uppercase;
  color: var(--vk-brown); font-weight: 700; }
.vk-thesis h2.vk-thesis__title { font-family: var(--vk-head); font-weight: 700; font-size: 1.55rem !important;
  line-height: 1.25; color: var(--vk-ink); margin: 10px 0 8px !important; text-align: left; max-width: 34ch; }
.vk-thesis .vk-thesis__author { font-size: 1.05rem !important; color: var(--vk-brown); margin-bottom: 20px; }
.vk-btn {
  display: inline-flex; align-items: center; gap: .2em; background: var(--vk-pink); color: #fff !important;
  font-family: var(--vk-head); font-weight: 700; font-size: 1.05rem; letter-spacing: .02em;
  padding: 12px 20px 10px; border-radius: 999px; text-decoration: none !important; transition: background .15s;
}
.vk-btn:hover, .vk-btn:focus-visible { background: var(--vk-pink-deep); }
.vk-btn:focus-visible { outline: 2px solid var(--vk-pink-deep); outline-offset: 3px; }
.vk-cite { margin-top: 28px !important; background: var(--vk-blush-soft); border-left: 4px solid var(--vk-pink);
  border-radius: 0 10px 10px 0; padding: 14px 18px; max-width: 68ch; }
.vk-cite h3 { font-family: var(--vk-head); font-weight: 700; font-size: .85rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--vk-pink-deep); margin: 0 0 6px; }
.vk-thesis .vk-cite p { font-size: .98rem !important; line-height: 1.55; color: var(--vk-ink); margin: 0; }
.vk-thesis .vk-thesis__related { margin-top: 20px; font-size: 1.02rem !important; color: var(--vk-brown); max-width: 68ch; }
.vk-thesis__related a { color: var(--vk-pink-deep); font-weight: 700; }
@media (max-width: 640px) {
  .vk-thesis { grid-template-columns: 1fr; gap: 20px; }
  .vk-thesis__cover { width: 150px; }
  .vk-thesis h2.vk-thesis__title { font-size: 1.3rem !important; }
}
.vk-cite h3, .vk-thesis h2.vk-thesis__title { background: none !important; }
.vk-btn { display: inline-block; text-align: center; }
.wp-site-blocks main p.vk-lead a.vk-person { color: var(--vk-pink-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wp-site-blocks main p.vk-lead a.vk-person:hover { color: var(--vk-ink); }