/* ============================================================
   Obsidian Wing — base: font, tokens, inner pages
   Loaded on every page. Selectors stay low-specificity
   (:where) so Elementor content always wins over them.
   ============================================================ */

/* ---------- 1. FONT ---------- */

@font-face {
  font-family: "Borna";
  src: url("../fonts/BornaFaNumVF.woff2") format("woff2-variations"),
       url("../fonts/BornaFaNumVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. TOKENS ---------- */

:root {
  /* surfaces */
  --ow-bg:          #1A2027;  /* Obsidian 700 — page background */
  --ow-box:         #12161B;  /* Obsidian 800 — panels / boxes  */
  --ow-surface:     #232B34;  /* Obsidian 600 */
  --ow-border:      #2E3843;  /* Obsidian 500 */

  /* text */
  --ow-text:        #D1D1D9;  /* Neutral 200 — h1..h6 */
  --ow-text-dim:    #B0B0BA;  /* Neutral 300 — body   */
  --ow-text-muted:  #8C8C99;  /* Neutral 400 — ui     */

  /* plum */
  --ow-plum-200:    #C2B0CD;
  --ow-plum-300:    #A88CB6;  /* button text */
  --ow-plum-400:    #8B6DA0;
  --ow-plum-500:    #7A5C8E;

  /* gold + bronze */
  --ow-gold:        #C8A04D;
  --ow-gold-deep:   #AF8A41;  /* strokes */
  --ow-gold-canvas: #CAA93D;  /* kinetic grid only — deliberate exception */
  --ow-bronze-400:  #BA8143;
  --ow-bronze-500:  #B07A4A;  /* notifications */
  --ow-bronze-600:  #94643C;

  /* state */
  --ow-success:     #42B866;
  --ow-danger:      #F08080;

  /* metrics */
  --ow-font:        "Borna", Tahoma, sans-serif;
  --ow-container:   1080px;
  --ow-gutter:      clamp(16px, 3vw, 40px);
  --ow-ease:        cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 3. DOCUMENT ---------- */

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

body {
  margin: 0;
  background: var(--ow-bg);
  color: var(--ow-text-dim);
  font-family: var(--ow-font);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

:where(h1, h2, h3, h4, h5, h6) { color: var(--ow-text); line-height: 1.4; margin: 0 0 .5em; }
:where(p) { margin: 0 0 1em; }
:where(a) { color: var(--ow-plum-300); text-decoration: none; transition: color .25s; }
:where(a:hover) { color: var(--ow-plum-200); }
:where(img) { max-width: 100%; height: auto; }

/* Hidden by clipping, not by pushing it off-screen: on an RTL page an element
   at left:-9999px is scrollable and widens the layout to ~10000px, which makes
   phones zoom the whole site out. */
.ow-skip {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 100;
  background: var(--ow-surface);
  color: var(--ow-text);
  padding: 10px 16px;
  border-radius: 8px;
}
.ow-skip:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* WordPress's own hidden-label class (post navigation, search form, …) */
.screen-reader-text:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--ow-plum-300);
  outline-offset: 3px;
}

/* ---------- 4. LAYOUT (inner pages) ---------- */

.ow-container {
  width: 100%;
  max-width: calc(var(--ow-container) + var(--ow-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--ow-gutter);
}

.ow-site-main { min-height: 60vh; }

/* fallback header / footer — Elementor Pro templates replace these */
.ow-site-header { border-bottom: 1px solid var(--ow-gold-deep); }
.ow-site-header__inner,
.ow-site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
}
.ow-site-header__logo img { display: block; height: 44px; width: auto; }

.ow-site-footer { border-top: 1px solid var(--ow-gold-deep); margin-top: 64px; }
.ow-site-footer .ow-sig { display: flex; flex-direction: column; gap: 2px; }
.ow-site-footer .ow-sig__name { color: var(--ow-text); font-weight: 600; }
.ow-site-footer .ow-sig__role { color: var(--ow-text-muted); font-size: 13px; }

.ow-nav ul { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0; padding: 0; }
.ow-nav a { color: var(--ow-text-dim); }
.ow-nav a:hover,
.ow-nav .current-menu-item > a { color: var(--ow-gold); }

/* ---------- 5. CONTENT ---------- */

.ow-page-head { padding-block: clamp(32px, 6vw, 72px) 24px; }
.ow-page-head h1 { font-size: clamp(26px, 4vw, 44px); margin: 0; }
.ow-page-head__desc { color: var(--ow-text-muted); margin-top: .5em; }

.ow-entry { max-width: calc(760px + var(--ow-gutter) * 2); }
.ow-entry__meta { color: var(--ow-text-muted); font-size: 14px; margin: .5em 0 0; }
.ow-entry__thumb { margin: 0 0 32px; border-radius: 10px; overflow: hidden; }
.ow-entry__thumb img { display: block; width: 100%; }
.ow-entry__content { font-size: 17px; }
.ow-entry__content :where(blockquote) {
  margin: 1.5em 0;
  padding-inline-start: 20px;
  border-inline-start: 2px solid var(--ow-gold-deep);
  color: var(--ow-text);
}

.ow-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.ow-card {
  background: var(--ow-box);
  border: 1px solid var(--ow-border);
  border-radius: 12px;
  padding: 20px;
}
.ow-card__thumb { display: block; margin: -20px -20px 16px; border-radius: 12px 12px 0 0; overflow: hidden; }
.ow-card__thumb img { display: block; width: 100%; }
.ow-card__title { font-size: 19px; margin-bottom: .4em; }
.ow-card__title a { color: var(--ow-text); }
.ow-card__title a:hover { color: var(--ow-gold); }
.ow-card__excerpt { color: var(--ow-text-muted); font-size: 15px; }
.ow-card__excerpt p { margin: 0; }

.ow-empty { color: var(--ow-text-muted); }

.nav-links { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.nav-links .page-numbers {
  min-width: 40px;
  padding: 6px 12px;
  border: 1px solid var(--ow-border);
  border-radius: 999px;
  text-align: center;
  color: var(--ow-text-dim);
}
.nav-links .page-numbers.current { border-color: var(--ow-gold-deep); color: var(--ow-gold); }

.ow-404 { text-align: center; padding-block: 80px; }
.ow-404__code { font-size: clamp(64px, 12vw, 140px); line-height: 1; color: var(--ow-border); margin: 0; }

/* ---------- 6. BUTTONS ---------- */

.ow-btn {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid var(--ow-gold-deep);
  border-radius: 999px;
  color: var(--ow-plum-300);
  font-size: 15px;
  line-height: 1.4;
  transition: border-color .25s, color .25s, background .25s;
}
.ow-btn:hover { border-color: var(--ow-gold); color: var(--ow-plum-200); background: rgba(175, 138, 65, .08); }
.ow-btn--ghost { border-color: var(--ow-border); color: var(--ow-text-muted); }
.ow-btn--ghost:hover { border-color: var(--ow-text-muted); color: var(--ow-text-dim); background: transparent; }
.ow-btn--off,
.ow-btn--off:hover { border-color: var(--ow-border); border-style: dashed; color: var(--ow-text-muted); background: transparent; cursor: default; }

/* ---------- 7. FORMS ---------- */

:where(input[type="text"], input[type="email"], input[type="url"], input[type="search"], textarea) {
  width: 100%;
  padding: 10px 14px;
  background: var(--ow-box);
  border: 1px solid var(--ow-border);
  border-radius: 8px;
  color: var(--ow-text);
  font: inherit;
}
:where(input[type="submit"], button[type="submit"]) {
  padding: 10px 22px;
  background: transparent;
  border: 1px solid var(--ow-gold-deep);
  border-radius: 999px;
  color: var(--ow-plum-300);
  font: inherit;
  cursor: pointer;
}

.search-form { display: flex; gap: 8px; margin-top: 16px; max-width: 480px; }

.ow-comments { margin-top: 56px; }
.ow-comments__list { list-style: none; padding: 0; }
.ow-comments__list .comment-body { padding: 16px 0; border-bottom: 1px solid var(--ow-border); }

/* ---------- 8. MOTION ---------- */

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