/* ==========================================================================
   BASE ELEMENTS — Foundation styles using design tokens.
   ========================================================================== */

/* ---------- BOX MODEL ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-bg-dark);
  min-height: 100%;
}

@media (min-width: 769px) {
  html {
    background: var(--color-bg-dark) url("../../images/backgrounds/otb_bg_04.jpg") center top / cover no-repeat fixed;
  }
}

body {
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--body-color);
  background: transparent;
  margin: 0;
}

/* Push footer to bottom on short pages */
.dialog-off-canvas-main-canvas {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.dialog-off-canvas-main-canvas > main {
  flex: 1 0 auto;
  width: 100%;
  margin-bottom: var(--spacing-lg);
}

.dialog-off-canvas-main-canvas > .otb-footer {
  flex-shrink: 0;
}

/* Default: content sits on a white panel, framed by the background */
.main {
  background: var(--color-bg-primary);
  position: relative;
  max-width: var(--container-max-width);
  margin: 1.5rem auto 0;
  box-shadow: var(--shadow-panel);
  min-height: 400px;
  padding-bottom: var(--spacing-lg);
}

/* Dark/transparent variant: cards float above the texture background */
.main--dark {
  background: transparent;
  box-shadow: none;
  color: var(--color-white);
  margin-top: 1.5rem;
}

/* Mobile: no gap between header and content */
@media (max-width: 768px) {
  .main {
    margin-top: 0;
  }
}

/* ---------- HEADINGS ---------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  margin-top: 1.3em;
  margin-bottom: 0.65em;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child {
  margin-top: 0;
}

h1 {
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  text-transform: var(--heading-text-transform);
}

h2 {
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
  text-transform: var(--heading-text-transform);
}

h3 {
  font-size: var(--h3-font-size);
  line-height: var(--h3-line-height);
  text-transform: var(--heading-text-transform);
}

h4 {
  font-size: var(--h4-font-size);
  line-height: var(--h4-line-height);
  font-weight: var(--h4-font-weight);
  text-transform: var(--h4-text-transform);
  color: var(--color-text-dark);
  margin-top: 1em;
  margin-bottom: 0;
}

/* ---------- BODY TEXT ---------- */

p {
  margin: 1em 0;
}

p:first-child {
  margin-top: 0;
}

h4 + p {
  margin-top: 0;
}

/* ---------- LINKS ---------- */

a {
  color: var(--color-link);
  text-decoration: none;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

a:hover {
  text-decoration: underline;
}

/* ---------- BLOCKQUOTES & PULLQUOTES ---------- */

blockquote {
  margin: 1em 3em;
}

blockquote p {
  margin: 0;
}

blockquote p + p {
  margin-top: 1rem;
}

.pullquote {
  font-family: var(--pullquote-font-family);
  font-size: var(--pullquote-font-size);
  line-height: var(--pullquote-line-height);
  color: var(--pullquote-color);
}

.pullquote--left,
.pullquote--right,
.pullquote--full-width {
  float: none;
  width: 100%;
  margin: var(--spacing-xl) 0;
  padding: var(--spacing-md) var(--spacing-lg);
  border-left: var(--pullquote-border-width) solid var(--pullquote-border-color);
  font-family: var(--pullquote-font-family);
  font-style: italic;
  font-size: var(--pullquote-font-size);
  line-height: var(--pullquote-line-height);
  color: var(--color-text-dark);
}

/* ---------- RULES ---------- */

hr {
  height: 0;
  border: none;
  border-top: var(--border-width-thin) solid var(--border-color-medium);
  margin: 2rem 0;
}

/* ---------- FORMS ---------- */

select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"] {
  max-width: var(--input-max-width);
  width: 100%;
  padding: var(--input-padding);
  border: var(--input-border);
  border-radius: var(--input-border-radius);
  font: inherit;
}

textarea {
  border: var(--input-border);
  border-radius: var(--input-border-radius);
  padding: var(--input-padding);
  font: inherit;
  width: 100%;
}

/* ---------- TABLES ---------- */

tbody {
  border: none;
}

table th abbr,
table th abbr[title] {
  border: none;
  text-decoration: none;
}

/* ---------- IMAGES ---------- */

img {
  max-width: 100%;
  height: auto;
}

/* ---------- ACCESSIBILITY ---------- */

:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

a:focus-visible {
  text-decoration: underline;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}