/* Roboto Slab – Apache License 2.0 (assets/fonts/LICENSE-Apache-2.0.txt). Self-hosted, no Google request. */
@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/roboto-slab-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto Slab'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/roboto-slab-latin-400-normal.woff2') format('woff2'); }

/* ==========================================================================
   Nordic Forest Rituals – inspiration card demo
   All rules are scoped to .nfr-kd so the demo cannot affect the theme (Dyad).
   ========================================================================== */

.nfr-kd {
  --nfr-bg: #0b2230;
  --nfr-panel: #f6ecd1;
  --nfr-line: #2a526d;
  --nfr-text: #0a1721;
  --nfr-muted: #98aab7;
  --nfr-accent: #f2e2b3;
  --nfr-accent-hover: #e0cc95;
  /* Dedicated colours so each part can be changed on its own */
  --nfr-welcome-color: var(--nfr-accent);     /* page header ("Welcome to the world of ...") */
  --nfr-about-color: var(--nfr-accent);       /* author / about text */
  --nfr-card-title-color: #0a1721;            /* card titles (Raven, Mielikki ...) - always dark */
  --nfr-font: 'Roboto Slab', Rockwell, Georgia, 'Times New Roman', serif;

  /* Background image URL is set inline on the element (style="--nfr-bg-image:url(...)") */
  background:
    linear-gradient(rgba(11, 34, 48, .72), rgba(11, 34, 48, .72)),
    var(--nfr-bg-image, none) center 35% / cover no-repeat,
    var(--nfr-bg);
  color: var(--nfr-text);
  font-family: var(--nfr-font);
  padding: 56px 16px;
  margin-top: 2em;
  margin-bottom: 2em;
  /* Full-bleed: korttidemo.js stretches the background to the full width of the theme's content area
     (Dyad: the right half of the screen on desktop, the whole screen on tablet/phone).
     Without JS the section simply stays inside the text column. Content stays centered either way. */
  box-sizing: border-box;
  width: var(--nfr-bleed-w, auto);
  max-width: none;
  margin-left: var(--nfr-bleed-ml, 0);
  margin-right: 0;
  border-radius: 0;
  scroll-margin-top: 0px; /* space for a sticky theme header when jumping to #anchor */
}
/* Neutralize common theme heading/paragraph decorations inside the demo */
.nfr-kd h2, .nfr-kd h3, .nfr-kd h4, .nfr-kd p { border: 0; background: none; box-shadow: none; padding-top: 0; padding-bottom: 0; }

/* bleed="off": the section is a box inside the text column → rounded corners + space above and below */
.nfr-kd[data-nfr-bleed="off"] { border-radius: 12px; margin-top: 2.5em; margin-bottom: 2.5em; overflow: hidden; }

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

.nfr-kd__wrap { max-width: 640px; margin: 0 auto; text-align: center; }

.nfr-kd .nfr-kd__welcome {
  font-family: var(--nfr-font);
  font-size: 30px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--nfr-welcome-color);
  margin: 0 auto 28px;
  max-width: 560px;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}

/* Instruction: its own paragraph directly above the card */
.nfr-kd .nfr-kd__intro { font-size: 17px; line-height: 1.6; color: var(--nfr-muted); max-width: 520px; margin: 0 auto 24px; text-align: center; }

/* ---- Logo + author block under the card ---- */
.nfr-kd .nfr-kd__logo { display: block; width: 180px; max-width: 50%; height: auto; margin: 0 auto 28px; border: 0; box-shadow: none; }
.nfr-kd .nfr-kd__about { max-width: 520px; margin: 40px auto 0; text-align: center; }
.nfr-kd .nfr-kd__about-text { font-size: 17px; line-height: 1.6; color: var(--nfr-about-color); margin: 0 0 14px; }
.nfr-kd .nfr-kd__portrait { width: 160px; margin: 0 auto 18px; padding: 0; }
.nfr-kd .nfr-kd__portrait img {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  object-fit: cover;
  object-position: center;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
  margin: 0;
}

/* ---- The card (a real <button> for keyboard + screen reader support) ---- */
.nfr-kd .nfr-kd__card {
  display: block;
  width: 280px;
  max-width: 80vw;
  aspect-ratio: 2 / 3;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  perspective: 1000px;
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
}
.nfr-kd .nfr-kd__card:focus-visible { outline: 3px solid var(--nfr-accent); outline-offset: 6px; border-radius: 18px; }
.nfr-kd__card-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform .8s cubic-bezier(.4, .2, .2, 1);
  transform-style: preserve-3d;
}
.nfr-kd__card.is-flipped .nfr-kd__card-inner { transform: rotateY(180deg); }
.nfr-kd__face {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 6.56% / 4.37%;   /* same corner as the card artwork (62 px on a 945 × 1417 card) */
  overflow: hidden;
  background: transparent;
  box-shadow: 0 15px 35px rgba(0, 0, 0, .4);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.nfr-kd__face--back { transform: rotateY(180deg); }
.nfr-kd .nfr-kd__face img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; margin: 0; border: 0; }

/* ---- Buttons ---- */
.nfr-kd .nfr-kd__btn {
  display: inline-block;
  margin: 28px 0 0;
  padding: 16px 32px;
  min-height: 52px;
  font-family: var(--nfr-font);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--nfr-bg);
  background: var(--nfr-accent);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  transition: background-color .3s;
}
.nfr-kd .nfr-kd__btn:hover,
.nfr-kd .nfr-kd__btn:focus-visible { background: var(--nfr-accent-hover); color: var(--nfr-bg); }
.nfr-kd .nfr-kd__btn:focus-visible { outline: 3px solid var(--nfr-text); outline-offset: 3px; }

/* ---- Card text panel (centered): NAME / LATIN NAME / SUBTITLE / keywords / text ---- */
.nfr-kd .nfr-kd__meaning {
  margin-top: 40px;
  padding: 36px 28px;
  background: var(--nfr-panel);
  border: 1px solid var(--nfr-line);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  text-align: center;
}
.nfr-kd .nfr-kd__meaning h3 {
  font-family: var(--nfr-font);
  font-size: 32px;
  line-height: 1.15;
  font-weight: 400;
  color: var(--nfr-card-title-color);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
}
.nfr-kd .nfr-kd__latin {
  text-align: center;
  color: var(--nfr-muted);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 6px 0 0;
}
.nfr-kd .nfr-kd__subtitle {
  font-family: var(--nfr-font);
  font-size: 26px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--nfr-text);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-wrap: balance;
  margin: 18px 0 8px;
}
.nfr-kd .nfr-kd__keywords { text-align: center; color: var(--nfr-muted); font-size: 16px; font-style: normal; letter-spacing: .3px; margin: 0 0 28px; }
.nfr-kd .nfr-kd__meaning img { display: block; width: 220px; max-width: 70%; height: auto; margin: 0 auto 24px; }
.nfr-kd .nfr-kd__meaning h4 {
  font-family: var(--nfr-font);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--nfr-text);
  text-align: center;
  margin: 32px 0 10px;
  text-transform: uppercase;
}
.nfr-kd .nfr-kd__meaning p { font-size: 17px; line-height: 1.8; color: var(--nfr-text); margin: 0 auto 14px; max-width: 34em; }
.nfr-kd .nfr-kd__meaning .nfr-kd__latin,
.nfr-kd .nfr-kd__meaning .nfr-kd__subtitle,
.nfr-kd .nfr-kd__meaning .nfr-kd__keywords { max-width: none; line-height: 1.4; }
.nfr-kd .nfr-kd__meaning .nfr-kd__latin { color: var(--nfr-muted); font-size: 14px; margin: 6px 0 0; }
.nfr-kd .nfr-kd__meaning .nfr-kd__subtitle { color: var(--nfr-text); font-size: 26px; margin: 18px 0 8px; }
.nfr-kd .nfr-kd__meaning .nfr-kd__keywords { color: var(--nfr-muted); font-size: 16px; margin: 0 0 28px; }

.nfr-kd .nfr-kd__actions { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.nfr-kd .nfr-kd__actions .nfr-kd__btn { margin: 0; }
/* Buy link: outlined so the "new card" button stays the main action */
.nfr-kd .nfr-kd__buy,
.nfr-kd .nfr-kd__buy:visited { background: transparent; color: var(--nfr-accent); box-shadow: inset 0 0 0 2px var(--nfr-accent); }

/* ---- States (set by korttidemo.js). Without JS every card is simply listed. ---- */
.nfr-kd .nfr-kd__tool { display: none; }
.nfr-kd.is-ready .nfr-kd__tool { display: block; }
.nfr-kd.is-ready .nfr-kd__meaning { display: none; }
.nfr-kd.is-ready .nfr-kd__meaning.is-active { display: block; animation: nfrKdIn .8s forwards; }
.nfr-kd.is-ready .nfr-kd__meaning img { display: none; }
.nfr-kd.is-ready .nfr-kd__actions { display: none; }
.nfr-kd.is-ready.has-drawn .nfr-kd__actions { display: flex; }
.nfr-kd.is-ready.has-drawn .nfr-kd__draw { display: none; }

@keyframes nfrKdIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .nfr-kd__card-inner { transition: none; }
  .nfr-kd.is-ready .nfr-kd__meaning.is-active { animation: none; }
}
/* ---- Phone: the section runs edge to edge and the card fills the screen width.
        Text blocks keep side padding for readability. ---- */
@media (max-width: 480px) {
  .nfr-kd { padding: 36px 0; }
  .nfr-kd .nfr-kd__welcome,
  .nfr-kd .nfr-kd__intro,
  .nfr-kd .nfr-kd__about,
  .nfr-kd .nfr-kd__actions { padding-left: 20px; padding-right: 20px; }
  .nfr-kd .nfr-kd__welcome { font-size: 26px; }
    .nfr-kd .nfr-kd__intro { font-size: 16px; }
  .nfr-kd .nfr-kd__logo { width: 140px; margin-bottom: 20px; }
  .nfr-kd .nfr-kd__card { width: 100%; max-width: none; }
  .nfr-kd .nfr-kd__about-text { font-size: 16px; }
  .nfr-kd .nfr-kd__portrait { width: 130px; }
  .nfr-kd .nfr-kd__meaning { border-radius: 0; border-left: 0; border-right: 0; padding: 28px 20px; }
  .nfr-kd .nfr-kd__meaning h3 { font-size: 28px; }
  .nfr-kd .nfr-kd__meaning .nfr-kd__subtitle { font-size: 22px; }
  .nfr-kd .nfr-kd__meaning p { font-size: 16px; }
}

/* ---- Protect the three colours from theme rules (e.g. "#content h2", "#content p", "#content h3").
        Higher specificity + !important, each style keeps its own colour. ---- */
.nfr-kd .nfr-kd__wrap .nfr-kd__welcome {
  color: var(--nfr-welcome-color) !important;
  -webkit-text-fill-color: var(--nfr-welcome-color) !important;
}
.nfr-kd .nfr-kd__wrap .nfr-kd__about-text {
  color: var(--nfr-about-color) !important;
  -webkit-text-fill-color: var(--nfr-about-color) !important;
}
.nfr-kd .nfr-kd__wrap .nfr-kd__meaning h3 {
  color: var(--nfr-card-title-color) !important;
  -webkit-text-fill-color: var(--nfr-card-title-color) !important;
}