/*
 * Wundermart theme for BookStack, based on Brand Guidelines 2026.
 * Colour variables are defined in layouts/parts/custom-styles.blade.php.
 */

/* Typography: Tenon (Signal Foundry). Headlines Medium, body Regular. */
@font-face {
  font-family: "Tenon";
  src: url("fonts/tenon-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Tenon";
  src: url("fonts/tenon-medium.otf") format("opentype");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colours (Brand Guidelines 2026). Also used inside the editor. */
  --wm-navy: #081f40;
  --wm-blue: #0580fa;
  --wm-slate: #595c73;
  --wm-blue-tint: #cce5ff;
  --wm-blue-soft: #9cccfc;
  --wm-grey: #ededf0;
  --wm-grey-mid: #bdbdc7;
  --wm-yellow: #fcf500;

  --font-body: "Tenon", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: var(--font-body);
  --wm-radius: 16px;
}

body {
  color: var(--wm-navy);
}
.dark-mode body {
  color: #e8e9ee;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  letter-spacing: -0.01em;  /* brand: -10 tracking */
  color: var(--wm-navy);
}
.dark-mode :is(h1, h2, h3, h4, h5, h6) {
  color: #fff;
}

.page-content {
  line-height: 1.5;
}
.page-content a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Header: deep navy with the white wordmark */
/* .primary-background paints with var(--color-primary); scope it to navy here. */
header#header {
  --color-primary: var(--wm-navy);
  background-color: var(--wm-navy);
  border-bottom-color: var(--wm-navy);
  box-shadow: none;
}
.wm-logo {
  display: inline-flex;
  align-items: center;
  color: #fff;
  padding-block: 8px;
}
.wm-logo svg {
  display: block;
  height: 28px;  /* ~207px wide; brand minimum is 200px */
  width: auto;
}
.wm-docs-label {
  /* Clear space = width of the logo's 'w' (~20px at this size) */
  margin-inline-start: 20px;
  padding-inline-start: 20px;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 28px;
  letter-spacing: 0.1em;  /* brand: +100 tracking for labels */
  text-transform: uppercase;
  color: var(--wm-blue-soft);
}
header .links a,
header .user-name {
  font-weight: 500;
}
header #header-search input {
  border-radius: 999px;
}

/* Buttons and pills: Tenon Medium, all caps, +100 tracking, pill shape */
.button,
.tag-item {
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 999px;
}
.button {
  font-size: 0.75rem;
  padding-inline: 1.25em;
}
.tag-item {
  font-size: 0.7rem;
  border-color: var(--wm-blue-tint);
}
.tag-item .tag-name {
  border-radius: 999px 0 0 999px;
}
.tag-item .tag-value {
  border-radius: 0 999px 999px 0;
}

/* Rounded frames */
.card,
.content-wrap.card,
.tri-layout-left-contents > div,
.tri-layout-right-contents > div {
  border-radius: var(--wm-radius);
}
.card {
  box-shadow: none;
  border: 1px solid var(--wm-grey);
}
.dark-mode .card {
  border-color: #2a3550;
}
.page-content img {
  border-radius: 8px;
}
.page-content pre,
.page-content code {
  border-radius: 8px;
}

/* Tables: no mid-word breaks; keep field names like `products[].name` whole */
.page-content table th,
.page-content table td {
  hyphens: manual;
  word-break: normal;
  overflow-wrap: normal;
}
.page-content table td code {
  white-space: nowrap;
}

/* Callouts in brand tints */
.page-content .callout.info {
  background-color: var(--wm-blue-tint);
  border-left-color: var(--wm-blue);
}
.page-content .callout {
  border-radius: 0 8px 8px 0;
}

/* Customer view (guests and NDA accounts): hide staff-oriented panels.
   The right sidebar is removed server-side in layouts/tri.blade.php. */
.wm-customer #recent-activity,
.wm-customer #popular,
.wm-customer #new,
.wm-customer #recents,
.wm-customer .comments-container,
.wm-customer .grid-card-footer {
  display: none;
}

/* ---------- Homepage & editor blocks ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Full-page homepage container (home/specific-page.blade.php) */
.wm-home-page.page-content {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 24px 80px;
}
.wm-home-page > h2 {
  /* Section headings: smaller than article headings, so cards stay the focus */
  font-size: 1.6rem;
  margin: 48px 0 0;
}
.wm-edit-home {
  position: absolute;
  top: 28px;
  right: 40px;
  z-index: 2;
  background: #fff;
  color: var(--wm-navy) !important;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
}

/* Hero: brand "living gradient", navy base, fresh blue, yellow corner */
.wm-hero {
  background:
    radial-gradient(circle at 100% 0%, var(--wm-yellow) 0, rgba(252, 245, 0, 0) 30%),
    radial-gradient(ellipse 80% 130% at 85% 30%, var(--wm-blue) 0, rgba(5, 128, 250, 0) 65%),
    var(--wm-navy);
  color: #fff;
  border-radius: var(--wm-radius);
  padding: 64px 56px 72px;
  margin: 0 0 40px;
}
.wm-hero :is(h1, h2, h3, h4, p, a) {
  color: #fff;
}
.wm-hero h1,
.wm-hero h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 16px;
  max-width: 14em;
}

/* Lead text: larger intro paragraph */
.wm-lead {
  font-size: 1.3rem;
  line-height: 1.45;
  max-width: 36em;
}

/* Highlight panel: rounded frame in brand blue tint */
.wm-panel {
  background: var(--wm-blue-tint);
  border-radius: var(--wm-radius);
  padding: 28px 32px;
  margin: 32px 0;
}
.dark-mode .wm-panel {
  background: #1d2a44;
}
.wm-panel > :first-child {
  margin-top: 0;
}
.wm-panel > :last-child {
  margin-bottom: 0;
}
.wm-panel :is(h2, h3) {
  font-size: 1.4rem;
  margin: 12px 0 8px;
}

/* Tiles: a bullet list shown as cards. First line (bold or link) is the title. */
ul.wm-tiles {
  list-style: none;
  padding: 0;
  margin: 24px 0 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
ul.wm-tiles > li {
  transition: border-color 120ms ease-in-out;
  background: #fff;
  border: 1px solid var(--wm-grey);
  border-radius: var(--wm-radius);
  padding: 24px;
  margin: 0;
  color: var(--wm-slate);
}
ul.wm-tiles > li:hover {
  border-color: var(--wm-blue);
}
.dark-mode ul.wm-tiles > li {
  background: #1d2433;
  border-color: #2a3550;
}
ul.wm-tiles > li > :is(a, strong):first-child {
  display: block;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--wm-navy);
  margin-bottom: 6px;
  text-decoration: none;
}
.dark-mode ul.wm-tiles > li > :is(a, strong):first-child {
  color: #fff;
}

/* Button: pill CTA on a link */
a.wm-button {
  display: inline-block;
  background: var(--wm-blue);
  color: #fff !important;
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
}
.wm-hero a.wm-button {
  background: #fff;
  color: var(--wm-navy) !important;
}

/* Pill label */
.wm-pill {
  display: inline-block;
  background: var(--wm-blue);
  color: #fff;
  border-radius: 999px;
  padding: 3px 12px;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* [search] placeholder */
.wm-search {
  display: flex;
  gap: 8px;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  max-width: 640px;
  margin: 28px 0 0;
}
.wm-search input {
  flex: 1;
  min-width: 0; /* let the field shrink on narrow screens */
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 1.05rem;
  padding: 10px 18px;
  color: var(--wm-navy);
  outline: none;
}
.wm-search .button {
  margin: 0;
}

/* [categories] placeholder */
.wm-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin: 24px 0 40px;
}
.wm-category {
  display: flex;
  flex-direction: column;
  transition: border-color 120ms ease-in-out;
  background: #fff;
  border: 1px solid var(--wm-grey);
  border-radius: var(--wm-radius);
  padding: 28px;
}
.wm-category:hover {
  border-color: var(--wm-blue);
}
.dark-mode .wm-category {
  background: #1d2433;
  border-color: #2a3550;
}
.wm-category h3 {
  font-size: 1.3rem;
  margin: 0 0 8px;
}
.wm-category h3 a {
  color: inherit;
  text-decoration: none;
}
.wm-category p {
  color: var(--wm-slate);
  margin: 0 0 16px;
}
.wm-category ul {
  list-style: none;
  margin: auto 0 0; /* push the guide links to the bottom, aligned across cards */
  padding: 16px 0 0;
  border-top: 1px solid var(--wm-grey);
}
.wm-category li {
  margin: 0 0 8px;
}
.wm-category li a {
  text-decoration: none;
}
.wm-category li a::before {
  content: "→ ";
}

/* Homepage on small screens */
@media (max-width: 600px) {
  .wm-home-page.page-content {
    padding: 12px 12px 56px;
  }
  .wm-hero {
    padding: 36px 24px 40px;
  }
  .wm-lead {
    font-size: 1.1rem;
  }
  .wm-search .button {
    padding-inline: 1em;
  }
}