/*
 * theme.css — the design's own rules, ported from the preview.
 *
 * The preview carried its styling inline on every element, because the .dc.html
 * files had to stay byte-for-byte as the designer delivered them. Nothing here
 * is under that constraint, so the design moves into classes as each page is
 * built. This file grows page by page; what is in it now is the frame every
 * page shares.
 */

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

body {
  margin: 0;
  background: var(--kz-slate-800);
  color: var(--kz-cream-200);
  font-family: var(--kz-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--kz-serif); font-weight: 700; line-height: 1.18; margin: 0 0 .6em; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

/* Keyboard users first: the skip link is the first thing focus reaches. */
.kz-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--kz-slate-600); color: var(--kz-cream-100);
  padding: 12px 20px; border-radius: 0 0 8px 0;
}
.kz-skip:focus { left: 0; }

/* A section's background runs the full width of the window; what is inside it
   stops at the design's column. Never put the cap on the section itself — the
   background stops with it, which is the one thing that always shows. */
.kz-section { padding: clamp(70px, 9vw, 120px) var(--kz-gutter); }
.kz-column { max-width: var(--kz-column); margin: 0 auto; }

/* ------------------------------------------------------------- header --- */

.kz-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding: 8px var(--kz-gutter) 16px;
  background: rgba(32, 29, 26, .85);
  backdrop-filter: blur(10px);
}
.kz-header__row { max-width: var(--kz-column); margin: 0 auto; width: 100%; }
.kz-header__brand { display: flex; justify-content: center; }
.kz-header__nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.kz-header__end { display: flex; align-items: center; gap: 16px; }

.kz-nav__list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.kz-nav__list a {
  position: relative; display: block; padding: 8px 12px;
  font-size: 14px; text-decoration: none; transition: color .18s ease;
}
.kz-nav__list a::after {
  content: ""; position: absolute; left: 12px; right: 12px; top: -5px; height: 1px;
  background: var(--kz-gold-500); transform: scaleX(0); transition: transform .22s ease;
}
.kz-nav__list a:hover, .kz-nav__list .current-menu-item > a { color: var(--kz-gold-500); }
.kz-nav__list a:hover::after, .kz-nav__list .current-menu-item > a::after { transform: scaleX(1); }

.kz-lang { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.kz-lang__current { color: var(--kz-gold-500); }
.kz-lang__other { opacity: .7; text-decoration: none; }
.kz-lang__other:hover { opacity: 1; }

.kz-button {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--kz-radius-button); padding: 12px 22px;
  font-family: var(--kz-serif); font-weight: 600; font-size: 14px; text-decoration: none;
}
.kz-button--primary { background: linear-gradient(135deg, var(--kz-gold-400), var(--kz-gold-600)); color: var(--kz-slate-700); }
.kz-button--ghost { border: 1px solid rgba(217, 168, 104, .55); color: #e0c495; }

.kz-main { padding-top: 150px; }

/* ------------------------------------------------------------- footer --- */

.kz-footer { background: var(--kz-slate-900); padding: clamp(56px, 7vw, 84px) var(--kz-gutter) 26px; }
.kz-footer__top {
  display: grid; gap: 40px; max-width: var(--kz-column); margin: 0 auto;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}
.kz-footer__brand p { font-size: 13px; line-height: 1.75; color: rgba(233, 224, 208, .55); max-width: 300px; }
.kz-footer__head { font-family: var(--kz-sans); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; }
.kz-footer__address { font-size: 12px; color: rgba(233, 224, 208, .45); margin: 0 0 14px; }
.kz-footer__col a { display: block; font-size: 13px; margin-bottom: 11px;
  color: rgba(233, 224, 208, .6); text-decoration: none; }
.kz-footer__col a:hover { color: var(--kz-gold-500); }
.kz-footer__col ul { list-style: none; margin: 0; padding: 0; }
.kz-footer__todo { font-size: 12px; color: #e8a598; }

.kz-footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px;
  max-width: var(--kz-column); margin: clamp(40px, 5vw, 64px) auto 0;
  padding-top: 22px; border-top: 1px solid rgba(233, 224, 208, .08);
  font-size: 12px; color: rgba(233, 224, 208, .42);
}
.kz-footer__marks { display: flex; gap: 22px; flex-wrap: wrap; }

/* The editing toolbar sits along the bottom; keep it off the content. */
body.kz-can-edit { padding-bottom: 60px; }

@media (max-width: 820px) {
  .kz-footer__top { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
  .kz-header__nav { flex-wrap: wrap; }
  .kz-main { padding-top: 190px; }
}