/* Trosforsvar.dk – forsiden i konfirmandudgavens legende stil.
   Gælder kun blokke med klassen tf-y (sat på hvert afsnit i editoren). */
body:has(.tf-y) { background: #fff8ec; }
.tf-y {
  --y-bg: #fff8ec; --y-soft: #fff0d6; --y-paper: #fff; --y-ink: #1b1535; --y-ink-soft: #3d3563;
  --y-yellow: #ffd23f; --y-pink: #ff5ca8; --y-cyan: #3ad5f0; --y-lime: #9be564; --y-orange: #ff8a3d; --y-violet: #c7b3ff;
  --y-line: 2.5px solid #1b1535; --y-hard: 6px 6px 0 #1b1535; --y-hard-sm: 3px 3px 0 #1b1535;
  background: var(--y-bg); color: var(--y-ink);
  font-family: Nunito, system-ui, sans-serif; font-size: 1.08rem; line-height: 1.6;
  margin-block: 0 !important; padding: 44px 16px !important; overflow-x: clip;
}
@media (min-width: 700px) { .tf-y { padding: 60px 32px !important; } }
.tf-y.tf-y-soft { background: var(--y-soft); }
.tf-y > .alignwide, .tf-y .tf-y-wide { max-width: 1080px !important; margin-inline: auto !important; }
.tf-y h1, .tf-y h2, .tf-y h3 { font-family: Fredoka, Nunito, sans-serif; font-weight: 700; color: var(--y-ink); letter-spacing: 0; }
.tf-y h1 { font-size: clamp(2.6rem, 8vw, 4.6rem); line-height: 1.02; margin: 0 0 14px; }
.tf-y h2 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; margin: 0 0 12px; }
.tf-y h3 { font-size: 1.4rem; line-height: 1.15; margin: 0 0 6px; }
.tf-y p { color: var(--y-ink-soft); max-width: 62ch; }
.tf-y a { color: #6d28d9; font-weight: 700; }
.tf-y-mark { background: linear-gradient(transparent 55%, var(--y-yellow) 55%, var(--y-yellow) 92%, transparent 92%); padding: 0 .15em; }

/* Mærkat (sticker) */
.tf-y-sticker { display: inline-block !important; font: 700 .95rem Fredoka, sans-serif !important; background: var(--y-pink); color: #fff !important; border: 2px solid #1b1535; border-radius: 999px; padding: 3px 14px !important; margin: 0 0 14px !important; transform: rotate(-2deg); box-shadow: 2px 2px 0 #1b1535; }
.tf-y-sticker.cyan { background: var(--y-cyan); color: #1b1535 !important; }
.tf-y-sticker.lime { background: var(--y-lime); color: #1b1535 !important; }
.tf-y-sticker.yellow { background: var(--y-yellow); color: #1b1535 !important; }

/* Knapper */
.tf-y .wp-block-button__link { font: 600 1.1rem Fredoka, sans-serif !important; border: 2.5px solid #1b1535 !important; border-radius: 999px !important; padding: 12px 24px !important; box-shadow: 4px 4px 0 #1b1535; background: var(--y-pink) !important; color: #fff !important; text-decoration: none !important; transition: transform .12s, box-shadow .12s; }
.tf-y .is-style-outline .wp-block-button__link { background: #fff !important; color: #1b1535 !important; }
.tf-y .wp-block-button__link:hover { transform: translate(-2px, -3px) rotate(-2deg); box-shadow: 6px 7px 0 #1b1535; }
.tf-y .wp-block-button__link:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #1b1535; }

/* ---------- Toppen ---------- */
.tf-y-hero { padding-top: 40px !important; }
.tf-y-herocard { position: relative; max-width: 1080px !important; margin-inline: auto !important; background: var(--y-yellow); border: var(--y-line); border-radius: 30px; box-shadow: 8px 8px 0 #1b1535; padding: 40px 28px 34px !important; transform: rotate(-.6deg); overflow: hidden; }
@media (min-width: 700px) { .tf-y-herocard { padding: 56px 52px 46px !important; } }
.tf-y-herocard > * { position: relative; z-index: 1; }
.tf-y-herocard h1, .tf-y-herocard p { color: #1b1535 !important; }
.tf-y-herocard .tf-y-lead { font-size: 1.22rem; font-weight: 600; max-width: 36rem; margin: 0 0 24px; }
.tf-y-herocard::before, .tf-y-herocard::after { position: absolute; z-index: 0; font-size: 3rem; line-height: 1; animation: tfy-float 5s ease-in-out infinite; }
.tf-y-herocard::before { content: "🕊️"; right: 7%; top: 14%; }
.tf-y-herocard::after { content: "✨"; right: 18%; bottom: 14%; animation-delay: -2s; font-size: 2.4rem; }
@media (max-width: 760px) { .tf-y-herocard::before, .tf-y-herocard::after { opacity: .35; } }
@keyframes tfy-float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(8deg); } }
.tf-y-fact { font-size: .95rem !important; font-weight: 700; margin: 22px 0 0 !important; }
.tf-y-fact em { font-family: 'Noto Serif', Georgia, serif; font-style: italic; font-weight: 500; }
.tf-y-hero .wp-block-buttons { gap: 14px !important; }

/* ---------- Kort i bolchefarver ---------- */
.tf-y-head { text-align: center; max-width: 680px !important; margin: 0 auto 30px !important; }
.tf-y-head > * { margin-inline: auto !important; }
.tf-y-cards { display: grid !important; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .tf-y-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .tf-y-cards { grid-template-columns: repeat(3, 1fr); } }
.tf-y-cards > * { margin: 0 !important; }
.tf-y-card { position: relative; display: flex !important; flex-direction: column; background: var(--y-paper); border: var(--y-line); border-radius: 24px; box-shadow: var(--y-hard); padding: 22px 22px 18px !important; transition: transform .12s, box-shadow .12s; }
.tf-y-card:nth-child(odd) { transform: rotate(.5deg); } .tf-y-card:nth-child(even) { transform: rotate(-.5deg); }
.tf-y-card:hover { transform: translate(-2px, -4px) rotate(-1deg); box-shadow: 9px 10px 0 #1b1535; }
.tf-y-card > * { margin-block: 0 !important; }
.tf-y-card .tf-y-emo { font-size: 2.6rem !important; line-height: 1; margin-bottom: 10px !important; }
.tf-y-card h3 a { color: #1b1535; text-decoration: none; }
.tf-y-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.tf-y-card p:not(.tf-y-emo):not(.tf-y-go) { margin: 6px 0 14px !important; font-size: 1rem; color: #3d3563; }
.tf-y-card .tf-y-go { margin-top: auto !important; font: 700 1rem Fredoka, sans-serif; color: #1b1535 !important; }
.tf-y-card.pink { background: var(--y-pink); } .tf-y-card.pink h3 a, .tf-y-card.pink p, .tf-y-card.pink .tf-y-go { color: #fff !important; }
.tf-y-card.cyan { background: var(--y-cyan); } .tf-y-card.lime { background: var(--y-lime); }
.tf-y-card.orange { background: var(--y-orange); } .tf-y-card.violet { background: var(--y-violet); }
.tf-y-card:focus-within { outline: 4px solid #6d28d9; outline-offset: 4px; }

/* ---------- Studiebibelen ---------- */
.tf-y-split { gap: 36px !important; align-items: center; }
.tf-y-eds { display: grid !important; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .tf-y-eds { grid-template-columns: repeat(3, 1fr); } }
.tf-y-eds > * { margin: 0 !important; }
.tf-y-ed { position: relative; background: #fff; border: var(--y-line); border-radius: 20px; box-shadow: var(--y-hard-sm); overflow: hidden; transition: transform .12s; }
.tf-y-ed:hover { transform: translateY(-3px) rotate(-1deg); }
.tf-y-ed > * { margin: 0 !important; }
.tf-y-ed figure { margin: 0 !important; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: var(--y-line); }
.tf-y-ed img { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 18% 0; }
.tf-y-ed h3 { font-size: 1.2rem; padding: 10px 14px 0; }
.tf-y-ed h3 a { color: #1b1535; text-decoration: none; }
.tf-y-ed h3 a::after { content: ""; position: absolute; inset: 0; }
.tf-y-ed p { font-size: .9rem; padding: 2px 14px 14px; line-height: 1.35; }
.tf-y-ed .tf-y-sticker { position: absolute; top: 10px; right: 10px; z-index: 1; margin: 0 !important; font-size: .8rem !important; padding: 2px 10px !important; }
.tf-y-ed:focus-within { outline: 4px solid #6d28d9; outline-offset: 3px; }
.tf-y-small { font-size: .95rem !important; margin-top: 16px !important; }

/* ---------- Tvivl ---------- */
.tf-y-narrow { max-width: 720px !important; margin-inline: auto !important; }
.tf-y-quote { margin: 22px 0 !important; padding: 22px 26px !important; background: #fff; border: var(--y-line) !important; border-radius: 22px; box-shadow: var(--y-hard); transform: rotate(-1deg); }
.tf-y-quote p { font: 700 1.7rem/1.25 Fredoka, sans-serif !important; color: #1b1535 !important; margin: 0 !important; }
.tf-y-quote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 800; font-size: .95rem; color: #6d28d9; }

/* ---------- Sådan holder du troen i live ---------- */
.tf-y-rows { display: grid !important; gap: 14px; }
.tf-y-rows > * { margin: 0 !important; }
.tf-y-row { gap: 16px !important; align-items: center !important; flex-wrap: nowrap !important; margin: 0 !important; background: #fff; border: var(--y-line); border-radius: 20px; box-shadow: var(--y-hard-sm); padding: 14px !important; }
.tf-y-row > .wp-block-column:first-child { flex: 0 0 60px !important; }
.tf-y-ico { width: 60px; height: 60px; display: grid; place-items: center; border: 2px solid #1b1535; border-radius: 16px; font-size: 1.8rem !important; line-height: 1; margin: 0 !important; background: var(--y-yellow); }
.tf-y-row:nth-child(2) .tf-y-ico { background: var(--y-cyan); } .tf-y-row:nth-child(3) .tf-y-ico { background: var(--y-lime); }
.tf-y-row h3 { margin: 0 0 2px !important; font-size: 1.3rem; }
.tf-y-row p:not(.tf-y-ico) { margin: 0 !important; font-size: .98rem; }

/* ---------- Reformationen ---------- */
.tf-y-solas { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0 !important; margin: 6px 0 20px !important; }
.tf-y-solas li { font: 700 1.15rem Fredoka, sans-serif; color: #1b1535; background: #fff; border: 2px solid #1b1535; border-radius: 999px; padding: 6px 16px; box-shadow: 2px 2px 0 #1b1535; }
.tf-y-solas li:nth-child(1) { background: var(--y-yellow); transform: rotate(-2deg); } .tf-y-solas li:nth-child(2) { background: var(--y-pink); color: #fff; transform: rotate(1.5deg); }
.tf-y-solas li:nth-child(3) { background: var(--y-cyan); transform: rotate(-1deg); } .tf-y-solas li:nth-child(4) { background: var(--y-lime); transform: rotate(2deg); }
.tf-y-solas li:nth-child(5) { background: var(--y-orange); transform: rotate(-1.5deg); }
.tf-y-rose img { width: 100%; border: var(--y-line); border-radius: 24px; box-shadow: var(--y-hard); background: #fff; }
.tf-y-rose figcaption { margin-top: 12px; font-size: .9rem; color: #3d3563; text-align: center; font-style: normal; }
.tf-y-rosel { list-style: none; padding: 0 !important; margin: 0 !important; display: grid; gap: 6px; }
.tf-y-rosel li { color: #3d3563; }
.tf-y h3.tf-y-h3s { margin-top: 18px !important; }

/* ---------- Afslutning ---------- */
.tf-y-end { text-align: center; }
.tf-y-end > * { margin-inline: auto !important; }
.tf-y-end .wp-block-buttons { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .tf-y-herocard::before, .tf-y-herocard::after { animation: none; }
  .tf-y-card, .tf-y-ed, .tf-y .wp-block-button__link { transition: none; }
}