@import url("/styling/site-navigation.css");

:root {
  --site-ink: #142638;
  --site-copy: #3d5164;
  --site-accent: #08675e;
  --site-line: #dce6e9;
  --site-dark: #102b3a;
  --site-width: min(1180px, calc(100% - 32px));
}

body {
  margin: 0;
  padding-top: 0;
  background: #f2f6f7;
  color: var(--site-ink);
  font: 16px/1.65 system-ui, sans-serif;
}

body img { max-width: 100%; height: auto; }
body a { color: var(--site-accent); text-underline-offset: .2em; }
body :is(h1, h2, h3, h4) { color: var(--site-ink); line-height: 1.2; }
body p { color: var(--site-copy); }

body .post.type-page {
  display: flow-root;
  width: var(--site-width);
  margin: clamp(18px, 4vw, 48px) auto;
  padding: clamp(16px, 4vw, 38px);
  background: #fff;
  border: 1px solid var(--site-line);
  border-radius: 20px;
}

body .post.type-page .container { width: 100%; }
body .post.type-page h1 {
  margin: 0 0 24px;
  padding: clamp(20px, 4vw, 44px);
  background: radial-gradient(ellipse at top right, #176b64, transparent 72%), var(--site-dark);
  box-shadow: 0 0 0 100vmax var(--site-dark);
  clip-path: inset(0 -100vmax);
  color: #fff;
  font-size: clamp(30px, 5vw, 54px);
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}

body .post.type-page h2 { font-size: clamp(22px, 3vw, 32px); }
body .post.type-page h3 { font-size: clamp(19px, 2.4vw, 24px); }
body .post.type-page blockquote { border-left-color: #71b7a8; background: #edf8f4; }
body .footer { background: var(--site-dark); margin: 32px 0 0; }
body .footer :is(h2, h3, p, a) { color: #fff; }

.site-table {
  box-sizing: border-box;
  max-width: 100%;
  overflow-x: auto;
  margin: 18px 0;
  border: 1px solid var(--site-line);
  border-radius: 12px;
  background: #fff;
  scrollbar-color: #698e8c #eaf1f2;
}

.site-table:focus-visible { outline: 2px solid var(--site-accent); }
.site-table > table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.site-table > table :is(th, td) {
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--site-line);
  vertical-align: middle;
}

.site-table > table :is(th, .sort1, .sort2) { background: #deeeec; color: var(--site-ink); }
.site-table > table th.sorting { padding-right: 24px; }
.site-table > table th :is(h2, h3, a) { color: inherit; }
.site-table > table tbody tr:nth-child(even) td { background-color: #f4f8fa; }
.site-table > table tbody tr:hover td { background-color: #e9f6f2; }

body.site-legacy :is(#wrapper, #header, #menu, #page, #content, .tarkoitus, .tarkoituslinkit,
.webhotelliyrityslogo, .webhotelliyritysteksti, .webhotelliyrityslogo-av, .emptyspace, .site-table) {
  box-sizing: border-box;
  width: var(--site-width);
  max-width: 100%;
  margin-inline: auto;
  border: 0;
}

body.site-legacy #wrapper :is(#header, #menu, #page, #content) { width: 100%; }
body.site-legacy #header { height: auto; padding: 16px; background: var(--site-dark); }
body.site-legacy #banner { height: auto; }
body.site-legacy #menu { height: auto; padding: 10px 16px; background: #fff; }
body.site-legacy #menu ul { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; }
body.site-legacy #menu li { float: none; }
body.site-legacy #menu a { height: auto; padding: 0; background: none; color: var(--site-ink); }
body.site-legacy #content { float: none; background: #fff; }
body.site-legacy .webhotelliyritysteksti { padding: 16px; }
body.site-legacy .webhotelliyritysteksti ul { box-sizing: border-box; width: 100%; }
body.site-legacy :is(.tarkoituslinkit, #footer p) { white-space: normal; }
body.site-legacy #footer { background: var(--site-dark); border-color: var(--site-dark); }
body.site-legacy #footer p { color: #fff; }

@media (max-width: 767px) {
  .site-table > table { min-width: max-content; }
  .site-table > table :is(th, td) { max-width: 220px; overflow-wrap: anywhere; }
}

body div#ez-toc-container {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 24px 0 32px;
  padding: clamp(16px, 3vw, 28px);
  border: 1px solid #cce3df;
  border-radius: 16px;
  background: #f1f8f6;
  box-shadow: none;
}

body div#ez-toc-container .ez-toc-title { color: #142638; font-weight: 700; }
body div#ez-toc-container nav ul { padding: 0; }
body div#ez-toc-container nav li { margin: 5px 0; }
body div#ez-toc-container nav ul ul { margin-inline-start: 14px; }
body div#ez-toc-container nav a {
  display: block;
  padding: 7px 12px;
  border: 1px solid #dce6e9;
  border-radius: 9px;
  background: #fff;
  color: #08675e;
  font-weight: 650;
}

body div#ez-toc-container nav a:is(:hover, :focus-visible) { background: #deeeec; }