@charset "utf-8";

/* -------------------------------------------------------------------------
 * base.css
 * -------------------------------------------------------------------------
 * Global typography + baseline element styling for WCYD theme.
 *
 * IMPORTANT:
 * - wcyd-tokens.css must load BEFORE this file so var(--wcyd-*) resolves.
 * - This file consumes tokens; it should not re-declare token values.
 * ------------------------------------------------------------------------- */

/* Typography defaults */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--wcyd-font-sans);
  font-style: normal;
  font-weight: var(--wcyd-font-weight-regular);
  color: var(--wcyd-text);
  font-size: var(--wcyd-font-size-base-px);
  font-size: var(--wcyd-font-size-base-rem);
  line-height: var(--wcyd-line-height-body);
  position: relative;
  background-color: var(--wcyd-bg) !important;
  background-image: none !important;
  background-position: center top;
}

p {
  line-height: var(--wcyd-line-height-body);
  font-size: var(--wcyd-font-size-base-px);
}

/* Utility font helpers */
.ff-sans-serif {
  font-family: var(--wcyd-font-sans);
  font-style: normal;
  font-weight: var(--wcyd-font-weight-regular);
}

.ff-serif {
  font-family: var(--wcyd-font-serif);
}

/* Links */
a {
  color: var(--wcyd-link);
}

a.plain {
  font-family: var(--wcyd-font-sans);
  font-style: normal;
  color: var(--wcyd-text);
  font-weight: var(--wcyd-font-weight-regular);
}

a.read-more {
  font-weight: var(--wcyd-font-weight-medium);
}

a:focus,
a:hover {
  color: var(--wcyd-link-hover);
  text-decoration: underline;
}

/* Basic type */
strong {
  font-weight: var(--wcyd-font-weight-bold);
}

/* Keep legacy behavior (your previous base.css forced b to normal) */
b {
  font-weight: var(--wcyd-font-weight-regular);
}

/* Keep legacy behavior (your previous base.css forced i to normal) */
i {
  font-style: normal;
}

/* Horizontal rules */
hr {
  border-color: var(--wcyd-gray-hr);
  border-style: solid;
  margin: 16px auto;
}

hr.dashed {
  border-style: dashed;
}

hr.dotted {
  border-style: dotted;
}

/* Media */
img {
  min-height: 1px;
  max-width: 100%;
  height: auto;
}

img.bordered {
  border: 1px dotted var(--wcyd-gray-hr);
}

/* Prevent horizontal scroll caused by full-bleed sections, etc. */
.dialog-off-canvas-main-canvas {
  overflow-x: hidden;
}

/* -------------------------------------------------------------------------
 * Arrow list styling (opt-in via .ul-arrows)
 * ------------------------------------------------------------------------- */

ul.ul-arrows {
  list-style: none; /* remove default dots */
  margin: 0;
  padding-left: 0; /* control indent via li padding */
}

ul.ul-arrows > li {
  position: relative;
  padding-left: calc(1.25rem + var(--wcyd-arrow-gap)); /* arrow + gap */
  margin: 0.35rem 0;
  font-size: var(--wcyd-type-body-size);
  line-height: var(--wcyd-type-body-lh);
}

ul.ul-arrows > li::before {
  content: var(--wcyd-list-marker);
  position: absolute;
  left: 0;
  top: 0.1em; /* optical baseline alignment */
  color: var(--wcyd-link);
  font-weight: var(--wcyd-font-weight-bold);
}

/* If a nested list appears inside an arrow list item, don't auto-arrow it */
ul.ul-arrows ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.35rem 0 0.35rem 0;
}

ul.ul-arrows ul li::before {
  content: none;
}

.c-blue {
  color: var(--wcyd-brand-blue);
}