/* ==========================================================================
   openlink.no — the public page. Shared by the rendered pages (/<handle>,
   api/_render.mjs) and the editor canvas (index.html), so what the owner
   edits is exactly what visitors get.

   Three inputs decide every colour, all set on the .ol element:
     --ol-bg    the owner's background colour
     data-ink   dark | light — the text colour that reads best on it
                (OLPage.inkFor, WCAG contrast)
     data-btn   fill | soft | line | hard — the button style

   Every size is in em off .ol's font-size, so a smaller font-size scales
   the whole page (the preview on the front page).
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist";
  src: url("fonts/Geist-var-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1EFF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The standalone page loads only this file, so it brings its own box model */
.ol, .ol *, .ol *::before, .ol *::after { box-sizing: border-box; }

.ol {
  --ink: #171717;
  --ink-2: rgba(23, 23, 23, 0.7);
  --inv: #ffffff;
  --hair: rgba(23, 23, 23, 0.14);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--ol-bg, #f4f4f2);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ol[data-ink="light"] {
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.76);
  --inv: #171717;
  --hair: rgba(255, 255, 255, 0.22);
}

/* Button styles */
.ol[data-btn="fill"] { --btn-bg: var(--ink); --btn-fg: var(--inv); --btn-line: transparent; --btn-shadow: none; }
.ol[data-btn="soft"] {
  --btn-bg: #ffffff;
  --btn-fg: #171717;
  --btn-line: rgba(23, 23, 23, 0.07);
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0.25em 1em rgba(0, 0, 0, 0.07);
}
.ol[data-btn="line"] { --btn-bg: transparent; --btn-fg: var(--ink); --btn-line: var(--ink); --btn-shadow: none; }
.ol[data-btn="hard"] {
  --btn-bg: #ffffff;
  --btn-fg: #171717;
  --btn-line: #171717;
  --btn-shadow: 0.25em 0.25em 0 #171717;
}
/* On a dark background a black offset vanishes — the shadow takes the ink */
.ol[data-btn="hard"][data-ink="light"] { --btn-shadow: 0.25em 0.25em 0 rgba(255, 255, 255, 0.9); }

.ol-main {
  width: 100%;
  max-width: 36em;
  margin: 0 auto;
}

.ol-avatar {
  display: block;
  width: 6em;
  height: 6em;
  margin: 0 auto 1em;
  border-radius: 50%;
  object-fit: cover;
  background: var(--hair);
}

.ol-name {
  margin: 0;
  font-size: 1.3125em;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.ol-bio {
  margin: 0.375em auto 0;
  max-width: 28em;
  font-size: 0.9375em;
  line-height: 1.5;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

/* The row of profile icons under the name (Instagram, TikTok, e-mail …) */
.ol-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25em;
  max-width: 24em;
  margin: 0.75em auto 0;
}

.ol-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.ol-icon svg { display: block; width: 1.5em; height: 1.5em; fill: currentColor; }
@media (hover: hover) { a.ol-icon:hover { transform: translateY(-0.0625em); opacity: 0.75; } }
a.ol-icon:active { transform: scale(0.94); }
a.ol-icon:focus-visible { outline: 0.125em solid var(--ink); outline-offset: 0.0625em; }

.ol-links {
  list-style: none;
  margin: 1.75em 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875em;
}

.ol-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.5em;
  padding: 0.75em 1.5em;
  border: 0.09375em solid var(--btn-line);
  border-radius: 1em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font: inherit;
  font-weight: 550;
  line-height: 1.35;
  text-decoration: none;
  overflow-wrap: anywhere;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

@media (hover: hover) {
  a.ol-btn:hover { transform: translateY(-0.0625em); }
  .ol[data-btn="hard"] a.ol-btn:hover { transform: translate(-0.0625em, -0.0625em); box-shadow: 0.3125em 0.3125em 0 #171717; }
  .ol[data-btn="hard"][data-ink="light"] a.ol-btn:hover { box-shadow: 0.3125em 0.3125em 0 rgba(255, 255, 255, 0.9); }
}

a.ol-btn:active { transform: scale(0.98); }
.ol[data-btn="hard"] a.ol-btn:active { transform: translate(0.1875em, 0.1875em); box-shadow: 0.0625em 0.0625em 0 var(--btn-line); }

a.ol-btn:focus-visible {
  outline: 0.125em solid var(--ink);
  outline-offset: 0.1875em;
}

/* Section headings between the buttons. The breathing room sits on the
   list item, not the heading, so the editor's drag grip (centred on the
   item) lines up with the text. */
.ol-links > .is-head { margin: 0.75em 0 -0.25em; }
.ol-links > .is-head:first-child { margin-top: 0; }

.ol-head {
  margin: 0;
  font-size: 0.875em;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: 0.005em;
  overflow-wrap: anywhere;
}

.ol-icons + .ol-links { margin-top: 1.25em; }

.ol-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.25em 1.25em;
  padding-top: 3em;
}

.ol-mark {
  font-size: 0.9375em;
  font-weight: 650;
  letter-spacing: -0.03em;
  color: var(--ink);
  opacity: 0.5;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

@media (hover: hover) { a.ol-mark:hover { opacity: 0.85; } }

.ol-report {
  font-size: 0.8125em;
  color: var(--ink);
  opacity: 0.45;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

@media (hover: hover) { a.ol-report:hover { opacity: 0.8; text-decoration: underline; } }

/* --------------------------------------------------------------------------
   The standalone page (/<handle>)
   -------------------------------------------------------------------------- */

html.ol-html { background-color: var(--ol-bg, #f4f4f2); }

.ol-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 3.5em 1.25em calc(1.75em + env(safe-area-inset-bottom));
}

.ol-page .ol-foot { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .ol *, .ol *::before, .ol *::after { transition-duration: 0.01ms !important; }
}