/*
 * Theme driven base styles.
 *
 * Nothing here hard codes a colour or a size: every value reads a CSS custom
 * property that the Theme model writes into the page head. Selectors are
 * written as `body h1` rather than `h1` so they win against the Tailwind
 * preflight regardless of the order the stylesheets load in.
 */

html {
  font-size: var(--font-size-base, 16px);
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-body-bg);
  color: var(--color-body-text);
  line-height: var(--line-height-body);
  font-size: var(--size-p);
  -webkit-font-smoothing: antialiased;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
  font-family: var(--font-heading);
  color: var(--color-heading);
  font-weight: var(--heading-weight);
  line-height: var(--line-height-heading);
  letter-spacing: var(--heading-spacing);
}

body h1 { font-size: var(--size-h1); }
body h2 { font-size: var(--size-h2); }
body h3 { font-size: var(--size-h3); }
body h4 { font-size: var(--size-h4); }
body h5 { font-size: var(--size-h5); }
body h6 { font-size: var(--size-h6); }
body p  { font-size: var(--size-p); }
body small, body .text-small { font-size: var(--size-small); }

/* Headings shrink on small screens by the factor set in the theme. */
@media (max-width: 640px) {
  body h1 { font-size: calc(var(--size-h1) * var(--mobile-scale)); }
  body h2 { font-size: calc(var(--size-h2) * var(--mobile-scale)); }
  body h3 { font-size: calc(var(--size-h3) * var(--mobile-scale)); }
  body h4 { font-size: calc(var(--size-h4) * var(--mobile-scale)); }
}

a { color: inherit; }

::selection { background: var(--color-primary); color: #fff; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--size-small);
  line-height: 1.2;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: center;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-button-bg); color: var(--color-button-text); }
.btn-primary:hover { background: var(--color-button-hover); }
.btn-secondary { background: var(--color-secondary); color: #fff; }
.btn-secondary:hover { filter: brightness(1.15); }
.btn-outline {
  border-color: currentColor;
  color: var(--color-primary);
  background: transparent;
}
.btn-outline:hover { background: var(--color-primary); color: var(--color-button-text); border-color: var(--color-primary); }
.btn-ghost { background: transparent; color: var(--color-primary); padding-left: 0; padding-right: 0; }
.btn-ghost:hover { text-decoration: underline; }
.btn-light { background: #fff; color: var(--color-secondary); }
.btn-light:hover { background: #f1f5f9; }

/* ------------------------------------------------------------------ cards */
.cms-card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cms-card-hover:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.35); }

.cms-gradient {
  background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

.cms-muted { color: var(--color-muted); }

/* ------------------------------------------------------- editor rich text */
.cms-prose { color: inherit; }
.cms-prose > * + * { margin-top: 1rem; }
.cms-prose h2, .cms-prose h3, .cms-prose h4 { margin-top: 1.75rem; margin-bottom: 0.5rem; }
.cms-prose p { line-height: var(--line-height-body); }
.cms-prose a { color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.cms-prose ul, .cms-prose ol { padding-left: 1.35rem; }
.cms-prose ul { list-style: disc; }
.cms-prose ol { list-style: decimal; }
.cms-prose li + li { margin-top: 0.35rem; }
.cms-prose img { border-radius: var(--radius); max-width: 100%; height: auto; }
.cms-prose blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: 1rem;
  color: var(--color-muted);
  font-style: italic;
}
.cms-prose table { width: 100%; border-collapse: collapse; }
.cms-prose th, .cms-prose td { border: 1px solid var(--color-border); padding: 0.5rem 0.75rem; text-align: left; }

/* --------------------------------------------------------------- the menu */
.cms-submenu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* Submenus open on hover on pointer devices and on tap everywhere else. */
@media (hover: hover) and (min-width: 1024px) {
  .cms-menu-item:hover > .cms-submenu,
  .cms-menu-item:focus-within > .cms-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}
.cms-menu-item.is-open > .cms-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cms-submenu-nested {
  top: 0;
  left: 100%;
  transform: translateX(8px);
}
@media (hover: hover) and (min-width: 1024px) {
  .cms-menu-item:hover > .cms-submenu-nested,
  .cms-menu-item:focus-within > .cms-submenu-nested { transform: translateX(0); }
}
.cms-menu-item.is-open > .cms-submenu-nested { transform: translateX(0); }

.cms-menu-link::after {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background: var(--color-header-hover);
  transition: width 0.25s ease;
}
.cms-menu-link:hover::after,
.cms-menu-link.is-active::after { width: 100%; }

/* --------------------------------------------------------------- sliders */
.cms-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.cms-fade-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.cms-fade-slide.is-active { opacity: 1; }
.cms-zoom-slide.is-active img { animation: cmsKenBurns 8s ease-out forwards; }
@keyframes cmsKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
.cms-dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.45); transition: all 0.25s ease; }
.cms-dot.is-active { width: 28px; background: #fff; }
/* Dots sitting on a light surface rather than over a photo. */
.cms-dot-light { background: var(--color-border); }
.cms-dot-light.is-active { background: var(--color-primary); }

.cms-scroll-x {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cms-scroll-x::-webkit-scrollbar { display: none; }

/* ------------------------------------------------------------ animations */
/*
 * Scroll reveals.
 *
 * `data-reveal` alone fades up. Give it a value for a different entrance, and
 * add `data-reveal-group` to a container to stagger its children. Delays come
 * from a custom property that the script sets, so no per-item CSS is needed.
 */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-34px); }
[data-reveal="right"] { transform: translateX(34px); }
[data-reveal="zoom"]  { transform: scale(0.94); }
[data-reveal="down"]  { transform: translateY(-26px); }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* The whole document eases in, so the first paint is not a hard flash. */
body { animation: cmsPageIn 0.5s ease both; }
@keyframes cmsPageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Images fade in as they decode rather than popping in line by line. */
img[data-fade] { opacity: 0; transition: opacity 0.6s ease; }
img[data-fade].is-loaded { opacity: 1; }

/* Thin progress bar showing how far down the page the visitor is. */
.cms-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 70;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  transition: width 0.12s linear;
  pointer-events: none;
}

/* A sticky header that gets out of the way when reading downwards. */
[data-header] {
  transition: transform 0.35s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
[data-header].is-hidden { transform: translateY(-100%); }

/* Anchor targets clear the sticky header. */
html { scroll-padding-top: calc(var(--header-height, 72px) + 16px); }
[id] { scroll-margin-top: calc(var(--header-height, 72px) + 16px); }

/* Editors can switch every motion off for a website in the theme. */
html[data-animations="off"] [data-reveal],
html[data-animations="off"] img[data-fade] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
html[data-animations="off"] body { animation: none; }
html[data-animations="off"] .cms-progress { display: none; }

/* And the browser setting always wins. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  img[data-fade] { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  body { animation: none; }
  .btn:hover,
  .cms-card-hover:hover,
  .cms-float:hover { transform: none; }
  .cms-zoom-slide.is-active img { animation: none; }
  .cms-progress { display: none; }
  [data-header].is-hidden { transform: none; }
}

/* -------------------------------------------------------------- utilities */
.cms-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cms-field-error { color: var(--color-danger); font-size: var(--size-small); margin-top: 0.3rem; }

.cms-float {
  position: fixed;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease;
}
.cms-float:hover { transform: scale(1.06); }

.cms-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(2, 6, 23, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.cms-lightbox.is-open { display: flex; }

.cms-accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.cms-accordion.is-open .cms-accordion-body { grid-template-rows: 1fr; }
.cms-accordion-body > div { overflow: hidden; }
.cms-accordion.is-open .cms-accordion-plus { display: none; }
.cms-accordion.is-open .cms-accordion-minus { display: inline !important; }

/* Masonry helper for gallery layouts. */
.cms-masonry > * { break-inside: avoid; margin-bottom: 1rem; }

/* Print: drop the chrome. */
@media print {
  header, footer, .cms-float, .cms-popup, .cms-consent { display: none !important; }
}