@font-face { font-family: 'Guest Caveat'; src: url('assets/fonts/guestbook/caveat.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Guest Kalam'; src: url('assets/fonts/guestbook/kalam.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Guest Patrick'; src: url('assets/fonts/guestbook/patrick-hand.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Guest Handlee'; src: url('assets/fonts/guestbook/handlee.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Guest Indie'; src: url('assets/fonts/guestbook/indie-flower.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Guest Dancing'; src: url('assets/fonts/guestbook/dancing-script.ttf') format('truetype'); font-weight: 400; font-display: swap; }
[data-handwriting="caveat"] { --guest-handwriting: 'Guest Caveat', cursive; }
[data-handwriting="kalam"] { --guest-handwriting: 'Guest Kalam', cursive; }
[data-handwriting="patrick"] { --guest-handwriting: 'Guest Patrick', cursive; }
[data-handwriting="handlee"] { --guest-handwriting: 'Guest Handlee', cursive; }
[data-handwriting="indie"] { --guest-handwriting: 'Guest Indie', cursive; }
[data-handwriting="dancing"] { --guest-handwriting: 'Guest Dancing', cursive; }
body[data-current-page] .greeting-card[data-handwriting]:not([data-handwriting="classic"]) blockquote,
body[data-current-page="greeting"] #comment[data-handwriting] {
  font-family: var(--guest-handwriting);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 32px;
}
.greeting-handwriting-picker { min-width: 0; border: 0; padding: 0; margin: 14px 0 0; }
.greeting-handwriting-picker legend { font-size: .85rem; color: #536553; margin-bottom: 8px; }
.greeting-handwriting-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.greeting-handwriting-option { position: relative; cursor: pointer; min-width: 0; }
.greeting-handwriting-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.greeting-handwriting-option span { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid #84947c55; border-radius: 8px; background: #fffdf5; color: #344b3b; }
.greeting-handwriting-option strong { font-family: var(--guest-handwriting); font-size: 1.45rem; font-weight: 400; line-height: 1.5; }
.handwriting-picker-disclosure > summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 8px 14px; border: 1px solid #84947c55; border-radius: 8px; background: #fffdf5; cursor: pointer; list-style: none; }
.handwriting-picker-disclosure > summary::-webkit-details-marker { display: none; }
#handwriting-selection-preview { font-family: var(--guest-handwriting); font-size: 1.5rem; line-height: 1.5; color: #344b3b; }
.handwriting-picker-disclosure[open] > summary { margin-bottom: 8px; }
.handwriting-picker-disclosure[open] > summary > span:last-child { transform: rotate(180deg); }
.handwriting-picker-disclosure > summary:focus-visible { outline: 2px solid #42634b; outline-offset: 3px; }
.greeting-handwriting-option input:checked + span { border-color: #42634b; box-shadow: inset 0 0 0 1px #42634b; background: #f0f4e9; }
.greeting-handwriting-option input:focus-visible + span { outline: 2px solid #42634b; outline-offset: 3px; }
@media(max-width:640px) { .greeting-handwriting-options { grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* De to valg fylder kun som små værktøjer over skrivefeltet. */
body[data-current-page="greeting"] .comment-form { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
body[data-current-page="greeting"] .form-two-col { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) 56px 56px; align-items: end; gap: 14px; }
body[data-current-page="greeting"] .field-group-wide { position: relative; padding-top: 0; }
body[data-current-page="greeting"] .greeting-handwriting-picker,
body[data-current-page="greeting"] .form-two-col .avatar-fieldset { position: relative; top: auto; bottom: auto; grid-area: auto; width: 56px; margin: 0; padding: 0; border: 0; z-index: 5; }
body[data-current-page="greeting"] .greeting-handwriting-picker { left: 0; }
body[data-current-page="greeting"] .greeting-handwriting-picker:has(details[open]),
body[data-current-page="greeting"] .form-two-col .avatar-fieldset:has(details[open]) { z-index: 20; }
.greeting-handwriting-option { scroll-margin-top: 100px; }
body[data-current-page="greeting"] .form-two-col .avatar-fieldset { right: 0; left: auto; }
body[data-current-page="greeting"] .greeting-handwriting-picker legend,
body[data-current-page="greeting"] .form-two-col .avatar-fieldset legend,
body[data-current-page="greeting"] .form-two-col .avatar-selection-copy { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body[data-current-page="greeting"] .handwriting-picker-disclosure > summary,
body[data-current-page="greeting"] .form-two-col .avatar-picker-disclosure > summary { display: grid; place-items: center; width: 56px; height: 56px; min-height: 56px; padding: 0; margin: 0; background: #fafcf8; border: 1px solid #84947c55; border-radius: 12px; box-shadow: none; cursor: pointer; }
body[data-current-page="greeting"] .form-two-col .avatar-picker-disclosure > summary::after { display: none; }
body[data-current-page="greeting"] .form-two-col .avatar-preview { width: 44px; height: 44px; flex-basis: 44px; margin: 0; }
body[data-current-page="greeting"] .handwriting-picker-disclosure[open] .greeting-handwriting-options { position: absolute; top: 64px; right: 0; left: auto; width: min(360px,calc(100vw - 80px)); padding: 12px; background: #fffef9; border: 1px solid #84947c55; border-radius: 12px; box-shadow: 0 12px 30px #23382a26; grid-template-columns: repeat(2,minmax(0,1fr)); }
body[data-current-page="greeting"] .form-two-col .avatar-picker-disclosure[open] .standard-avatar-grid { position: absolute; top: 52px; right: 0; left: auto; width: min(540px,calc(100vw - 80px)); max-height: 320px; margin: 0; }
body[data-current-page="greeting"] .form-two-col > .field-group:first-child { grid-column: 1; grid-row: 1; }
body[data-current-page="greeting"] .form-two-col > .field-group:nth-child(2) { grid-column: 2; grid-row: 1; }
@media(max-width:640px) {
  body[data-current-page="greeting"] .form-two-col { grid-template-columns: minmax(0,1fr) 56px 56px; gap: 12px; }
  body[data-current-page="greeting"] .form-two-col > .field-group:first-child { grid-column: 1 / -1; grid-row: 1; }
  body[data-current-page="greeting"] .form-two-col > .field-group:nth-child(2) { grid-column: 1; grid-row: 2; }
  body[data-current-page="greeting"] .form-two-col .greeting-handwriting-picker { grid-column: 2; grid-row: 2; }
  body[data-current-page="greeting"] .form-two-col .avatar-fieldset { grid-column: 3; grid-row: 2; }
  body[data-current-page="greeting"] .handwriting-picker-disclosure[open] .greeting-handwriting-options { right: -68px; }
}

/* Hilsner i selvstændige papirkort med højde efter indholdet. */
.greeting-section-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; }
.greeting-section-links a { color: #365944; text-decoration: underline; text-underline-offset: 5px; font-size: .9rem; }
body[data-current-page="greeting"] :is(#comment-section, #submitted-greetings) { scroll-margin-top: 110px; }
body[data-current-page="greeting"] .submitted-greetings-list { display: block; columns: 3; column-gap: 20px; }
body[data-current-page="greeting"] .submitted-greeting-card {
  display: inline-flex; flex-direction: column; vertical-align: top; width: 100%;
  break-inside: avoid; margin: 0 0 20px; padding: 24px; gap: 22px;
  min-height: 0; height: auto;
  background: linear-gradient(135deg,#fffdf5,#f8f3e6);
  border: 1px solid #b8b09655; border-radius: 5px 12px 8px 5px;
  box-shadow: 0 2px 0 #e7dfcb, 0 6px 16px #3a432a0a;
  overflow: visible;
}
body[data-current-page="greeting"] .submitted-greeting-card blockquote { color: #354339; font-weight: 400; overflow-wrap: anywhere; white-space: pre-line; }
body[data-current-page="greeting"] .submitted-greeting-meta { padding-top: 14px; border-top: 1px solid #8c957a30; gap: 12px; }
body[data-current-page="greeting"] .submitted-greeting-avatar { box-shadow: none; border-width: 1px; }
body[data-current-page="greeting"] .submitted-greeting-name { color: #455b48; font-weight: 650; }
body[data-current-page="greeting"] .submitted-greeting-relation { color: #727765; font-size: .78rem; font-weight: 400; overflow-wrap: anywhere; }
@media(max-width:980px) { body[data-current-page="greeting"] .submitted-greetings-list { columns: 2; } }
@media(max-width:640px) { body[data-current-page="greeting"] .submitted-greetings-list { columns: 1; } }