/* Credentis website - shared styles.
   Two themes: dark (default) and light, set by data-theme on <html>. Fonts are self-hosted; nothing loads from other sites. */

@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/open-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/open-sans-latin-700-normal.woff2") format("woff2"); }

/* Dark theme (default) */
:root {
  --bg: #1C1E20;
  --bg-footer: #161819;
  --heading: #FFFFFF;
  --text: #E9EAEB;
  --muted: #B3B6B9;
  --eyebrow: #AAAAAA;
  --line: #2C2F32;
  --link: #E9EAEB;
  --btn-bg: #FFFFFF;
  --btn-text: #1C1E20;
  --btn-hover: #E4E5E6;
  --toggle-border: #5A5E62;
  --toggle-text: #E9EAEB;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51.96' height='90' viewBox='0 0 51.96 90'%3E%3Cpath d='M25.98,0 L51.96,15 L51.96,45 L25.98,60 L0,45 L0,15Z M25.98,60 L25.98,90' fill='none' stroke='%23FFFFFF' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
  --radius: 6px;
  --wrap: 1120px;
  color-scheme: dark;
}

/* Light theme */
:root[data-theme="light"] {
  --bg: #F4F4F3;
  --bg-footer: #FFFFFF;
  --heading: #1F2224;
  --text: #3A3A3A;
  --muted: #5F6366;
  --eyebrow: #6B6B6B;
  --line: #E2E3E4;
  --link: #1F2224;
  --btn-bg: #1C1E20;
  --btn-text: #FFFFFF;
  --btn-hover: #000000;
  --toggle-border: #B9BBBD;
  --toggle-text: #1F2224;
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51.96' height='90' viewBox='0 0 51.96 90'%3E%3Cpath d='M25.98,0 L51.96,15 L51.96,45 L25.98,60 L0,45 L0,15Z M25.98,60 L25.98,90' fill='none' stroke='%23000000' stroke-opacity='.05' stroke-width='1'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
  font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 17px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
h1, h2 { color: var(--heading); line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid #8FB3E0; outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; width: 100%; }

/* Show the logo that suits the theme */
:root[data-theme="dark"] .logo-for-light,
:root:not([data-theme="light"]) .logo-for-light { display: none; }
:root[data-theme="light"] .logo-for-dark { display: none; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 76px; }
.brand img { width: 165px; height: auto; }
.theme-toggle { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .9rem; font-weight: 600;
  color: var(--toggle-text); background: transparent; border: 1px solid var(--toggle-border); border-radius: var(--radius);
  padding: 7px 14px; cursor: pointer; }
.theme-toggle:hover { border-color: var(--toggle-text); }
.theme-toggle[hidden] { display: none; }
:root:not([data-theme="light"]) .icon-moon { display: none; }
:root[data-theme="light"] .icon-sun { display: none; }

/* Holding page */
/* The honeycomb sits on its own oversized layer behind the content. It turns very slowly
   clockwise (one full turn every 10 minutes), and the centre of that turn itself travels round an
   oval path across the screen in the same direction, ten times more slowly (one lap every 100 minutes).
   Visitors who ask their device to reduce motion get it still. */
.hold { flex: 1; display: flex; align-items: center; padding: 72px 0 88px; position: relative; overflow: hidden; }
.hold::before { content: ""; position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax;
  margin: -110vmax 0 0 -110vmax; background-image: var(--pattern); background-size: 51.96px 90px;
  pointer-events: none; z-index: 0; will-change: transform;
  translate: 25vw 0; animation: honeycomb-turn 600s linear infinite, honeycomb-drift 6000s linear infinite; }
@keyframes honeycomb-turn { to { rotate: 360deg; } }
@keyframes honeycomb-drift {
  0% { translate: 25vw 0vh; }
  8.333% { translate: 21.65vw 10vh; }
  16.667% { translate: 12.5vw 17.32vh; }
  25% { translate: 0vw 20vh; }
  33.333% { translate: -12.5vw 17.32vh; }
  41.667% { translate: -21.65vw 10vh; }
  50% { translate: -25vw 0vh; }
  58.333% { translate: -21.65vw -10vh; }
  66.667% { translate: -12.5vw -17.32vh; }
  75% { translate: 0vw -20vh; }
  83.333% { translate: 12.5vw -17.32vh; }
  91.667% { translate: 21.65vw -10vh; }
  100% { translate: 25vw 0vh; }
}
@media (prefers-reduced-motion: reduce) { .hold::before { animation: none; } }
.hold-inner { position: relative; z-index: 1; }
.hold-mark { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); width: 230px; opacity: .9; }
.hold h1 { max-width: 15em; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 600; color: var(--eyebrow); margin-bottom: 1.4em; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 38em; margin: 1.2em 0 1em; }
.status { color: var(--muted); max-width: 38em; margin-bottom: 2em; }
.actions { margin: 0; }
.btn { display: inline-block; font-weight: 600; font-size: 1rem; text-decoration: none; padding: 12px 26px; border-radius: var(--radius);
  background: var(--btn-bg); color: var(--btn-text); }
.btn:hover { background: var(--btn-hover); }

/* Footer */
.site-footer { background: var(--bg-footer); border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; padding: 28px 0; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.site-footer p { margin: 0; }
.site-footer p:last-child { white-space: nowrap; }

/* Privacy notice page */
.page-head { padding: 56px 0 40px; background-image: var(--pattern); background-size: 51.96px 90px; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 0 0 .3em; }
.page-head p { color: var(--muted); margin: 0; }
.prose { max-width: 46em; padding-top: 48px; padding-bottom: 72px; }
.prose h2 { font-size: 1.35rem; margin-top: 2em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.back { display: inline-block; margin-bottom: 1.2em; font-size: .95rem; }

/* Responsive */
@media (max-width: 900px) {
  .hold-mark { display: none !important; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 16px; }
  .header-inner { min-height: 64px; }
  .brand img { width: 136px; }
  .hold { padding: 48px 0 56px; align-items: flex-start; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 10px; }
}