/*
Theme Name: Kvarleva – Sagobiblioteket
Author: Kvarleva
Description: Ett handillustrerat, interaktivt bibliotek för sagor och skräck. Kräver Kvarleva Bokhanterare.
Version: 2.0.5
Requires PHP: 7.4
Text Domain: kvarleva
*/
:root{--ink:#392f25;--paper:#eadfc9;--border:#a58b6a}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 16%,#f9f0df,#d7c7ad);font-family:Georgia,serif;color:var(--ink)}a{color:inherit}.site-header,.site-footer{text-align:center;padding:12px 18px;font-size:13px}.site-header strong{letter-spacing:.22em}.site-header span{opacity:.7}.site-footer{opacity:.75;padding-bottom:50px}.stage{position:relative;width:min(94vw,950px);margin:0 auto;box-shadow:0 15px 45px #4635244d}.stage img{display:block;width:100%;height:auto}.book-spot{position:absolute;z-index:2;border:0;background:transparent;border-radius:4px;cursor:pointer;transition:box-shadow .2s,transform .2s;touch-action:manipulation}.book-spot:hover,.book-spot:focus-visible{outline:0;box-shadow:0 0 0 3px #f5de9aaa,0 0 23px #f5de9a88;transform:translateY(-2px)}.book-spot:focus-visible{outline:3px solid #705833}.book-spot::after{content:attr(aria-label);display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#f8edd9f5;padding:7px 9px;white-space:nowrap;font:12px Georgia,serif;box-shadow:0 2px 10px #0005}.book-spot:hover::after,.book-spot:focus-visible::after{display:block}.spot-0{left:13%;top:29.6%;width:14%;height:24.1%}.spot-1{left:31.2%;top:29.6%;width:14.2%;height:24.1%}.spot-2{left:49.1%;top:29.6%;width:13.6%;height:24.1%}.spot-3{left:67.2%;top:29.6%;width:14%;height:24.1%}.instruction{text-align:center;margin:15px 12px 35px;font-style:italic;color:#776954}.more-wrap{max-width:960px;margin:35px auto;padding:0 20px}.more-wrap h2{text-align:center;font-size:30px;font-weight:normal}.more-shelf{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:flex-end;padding:30px 20px 13px;border-bottom:18px solid #7c5a40;background:linear-gradient(#eee1c9,#c9b18e);box-shadow:0 15px 15px #5d412333}.extra-book{display:flex;align-items:center;justify-content:center;width:145px;height:205px;text-align:center;position:relative;border:4px double #b79c68;background:linear-gradient(90deg,#30362b,#66725a 13%,#444f3f 80%,#273124);color:#e8d7a8;box-shadow:6px 6px 9px #0004;cursor:pointer;padding:15px;font:23px/1.1 Georgia,serif;transition:transform .2s}.extra-book:nth-child(4n+2){background:linear-gradient(90deg,#3f2524,#845341 13%,#653b32 80%,#3a2221)}.extra-book:nth-child(4n+3){background:linear-gradient(90deg,#27313b,#65717e 13%,#434f5a 80%,#26303c)}.extra-book:nth-child(4n+4){background:linear-gradient(90deg,#4a3b28,#967b50 13%,#6f593a 80%,#433323)}.extra-book:hover,.extra-book:focus-visible{transform:translateY(-12px)}.extra-book.has-cover{background-size:cover!important;background-position:center!important;color:transparent}.dialog{display:none;position:fixed;inset:0;z-index:40;background:#171814dc;padding:18px;align-items:center;justify-content:center;backdrop-filter:blur(3px)}.dialog.open{display:flex}.panel{width:min(890px,100%);max-height:94vh;overflow:auto;padding:25px;background:linear-gradient(110deg,#f5ecdc,#ddcdb2);border:7px double #8d7757;box-shadow:0 25px 90px #0009;position:relative}.panel h2{font-size:clamp(28px,5vw,44px);font-weight:normal;margin:10px 25px 12px 0}.panel p{line-height:1.7}.close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:32px;cursor:pointer}.kicker{font-size:12px;letter-spacing:.18em;color:#78654a}.actions{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0}.actions a,.actions button{padding:12px 16px;border:1px solid #5b4835;background:#4a382c;color:#f7eedc;text-decoration:none;font:14px Georgia,serif;cursor:pointer}.actions .secondary{background:transparent;color:#493a2b}.viewer{display:none;width:100%;height:min(65vh,650px);border:1px solid #b3a184;background:white}.note{color:#77664f;font-size:13px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:600px){.site-header{font-size:11px}.stage{width:100%}.more-shelf{padding:18px 8px}.extra-book{width:115px;height:170px;font-size:18px}.panel{padding:16px}}

/* Kvarleva 2.0: all text and book covers are independently editable; the illustration stays intact. */
.painted-cover{--book-ink:#66503c;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:6px 6px 4px;border:3px ridge #b49a70;border-radius:3px 5px 5px 3px;color:#f3e4bf;background:linear-gradient(90deg,#17161070,transparent 13%,#ffffff12 57%,#120f0d62),var(--book-ink);box-shadow:inset 0 0 0 2px #423b2a,inset 0 0 0 4px #b69e6a,5px 4px 5px #0005;font-family:Georgia,serif;text-align:center;overflow:hidden}
.painted-cover::before{content:'';position:absolute;inset:7px;border:1px solid #d6be82a8;pointer-events:none}
.painted-cover::after{display:none}
.painted-ornament{font-size:clamp(8px,1.2vw,17px);color:#d2ba7f;line-height:1.1}
.painted-title{font-size:clamp(8px,1.45vw,19px);line-height:1.08;text-wrap:balance;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;position:relative;z-index:1;text-shadow:0 1px 2px #0009}
.painted-image{display:block;width:80%;flex:1;min-height:15%;max-height:55%;margin:5px auto;background:radial-gradient(ellipse at 50% 60%,#c6b391,#7c745c 46%,transparent 73%);background-size:cover;background-position:center;border-radius:45% 45% 8% 8%;border:1px solid #b6a1787a}
.painted-imprint{font-size:clamp(6px,.8vw,10px);letter-spacing:.09em;color:#d9c293}
.book-spot.painted-cover{transition:transform .2s ease,filter .2s ease;}
.book-spot.painted-cover:hover,.book-spot.painted-cover:focus-visible{transform:translateY(-5px);filter:brightness(1.13)}
.extra-book.painted-cover{height:215px;width:148px;flex:none;position:relative}
.extra-book.painted-cover .painted-title{font-size:20px}
.extra-book.painted-cover .painted-ornament{font-size:17px}
.extra-book.painted-cover .painted-imprint{font-size:10px}
.more-shelf{background:linear-gradient(#ebe0c9,#baa583)}
@media(max-width:600px){.book-spot.painted-cover{border-width:1px;padding:2px}.book-spot.painted-cover::before{inset:2px}.book-spot .painted-ornament{font-size:7px}.book-spot .painted-title{font-size:clamp(6px,1.55vw,10px)}.book-spot .painted-imprint{font-size:5px;letter-spacing:0}.book-spot .painted-image{margin:1px auto}.extra-book.painted-cover{width:115px;height:175px}.extra-book.painted-cover .painted-title{font-size:17px}}

/* Ugglan leder till Kvarlevas kontaktuppgifter. Klickytan följer bilden responsivt. */
.owl-hotspot{position:absolute;z-index:5;left:71.1%;top:55.5%;width:12.4%;height:16.5%;background:transparent;border:0;border-radius:46% 46% 24% 24%;cursor:pointer;touch-action:manipulation}
.owl-hotspot:hover{background:rgba(244,222,171,.12);box-shadow:0 0 0 2px rgba(230,196,133,.6),0 0 18px rgba(242,221,176,.46)}
.owl-hotspot:focus-visible{outline:3px solid #65452b;outline-offset:2px}
.owl-contact-panel{width:min(510px,100%);text-align:center}
.owl-contact-panel h2{margin:12px 0}
.owl-email{font-size:clamp(15px,2.4vw,21px);overflow-wrap:anywhere}
.owl-email a{color:#443022;text-decoration-thickness:1px;text-underline-offset:4px}
.owl-mail-button{display:inline-block;padding:11px 18px;background:#4a382c;color:#f7eedc;text-decoration:none;border:1px solid #5b4835}
.owl-mail-button:focus-visible{outline:3px solid #5b4835;outline-offset:2px}

/* 2.0.4: Inget gammalt vitt hover-falt. Visa genre som en del av omslaget. */
.book-spot.painted-cover:hover::after,
.book-spot.painted-cover:focus-visible::after{display:none!important;content:none!important}
.painted-genre{display:block;position:relative;z-index:2;max-width:96%;color:#f2e2bd;font:italic clamp(7px,.95vw,12px)/1.05 Georgia,serif;letter-spacing:.035em;text-transform:none;text-align:center;overflow-wrap:anywhere;text-shadow:0 1px 2px #0009;margin:2px auto 1px;border-top:1px solid #d3b77d88;border-bottom:1px solid #d3b77d88;padding:3px 2px}
.book-spot .painted-image{max-height:46%;}
.extra-book .painted-genre{font-size:12px;}
@media(max-width:600px){.book-spot .painted-genre{font-size:clamp(6px,1vw,9px);padding:1px 0;margin:1px auto}.book-spot .painted-image{max-height:42%}.extra-book .painted-genre{font-size:10px}}

/* Kvarleva 2.0.5 – smartphone-friendly library, original illustration retained. */
.mobile-library{display:none}
@media (max-width:700px){
  body{overflow-x:hidden}
  .site-header{padding:12px 14px;line-height:1.6;font-size:12px}
  .site-header strong{display:block;font-size:16px;letter-spacing:.16em}
  .site-header span{display:block}
  .stage{width:100%;max-width:460px;margin:0 auto;box-shadow:0 8px 25px #46352424}
  .stage>.book-spot{display:none!important}
  .stage>.owl-hotspot{display:none!important}
  .instruction{display:none}
  .more-wrap{display:none!important}
  .mobile-library{display:block;max-width:520px;margin:0 auto 30px;padding:14px 15px 26px;text-align:center}
  .mobile-library h2{font:normal 30px/1.1 Georgia,serif;margin:12px 0 23px;color:#483827}
  .mobile-books{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));justify-items:center;gap:19px 12px}
  .mobile-book.painted-cover{width:100%;max-width:196px;height:260px;position:relative;padding:12px 9px 9px;cursor:pointer;touch-action:manipulation;min-width:0;transition:transform .2s,box-shadow .2s}
  .mobile-book .painted-ornament{font-size:17px}
  .mobile-book .painted-title{font-size:clamp(17px,4.5vw,23px);-webkit-line-clamp:4;line-height:1.06}
  .mobile-book .painted-genre{font-size:12px;padding:4px 3px;margin:4px auto}
  .mobile-book .painted-image{height:85px;max-height:40%;min-height:60px;margin:5px auto;flex:1}
  .mobile-book .painted-imprint{font-size:10px;letter-spacing:.1em}
  .mobile-book:hover,.mobile-book:focus-visible{transform:translateY(-3px);box-shadow:0 0 0 3px #9a7b48, 4px 8px 16px #0004;outline:none}
  .mobile-owl-contact{margin:28px auto 0;min-height:48px;padding:12px 18px;background:#4a382c;color:#fff2dd;border:1px solid #7b5c40;font:15px Georgia,serif;cursor:pointer;touch-action:manipulation}
  .mobile-owl-contact:focus-visible{outline:3px solid #9a7b48;outline-offset:3px}
  .dialog{padding:8px;align-items:center}
  .panel{width:100%;max-height:92dvh;padding:17px 14px;border-width:4px}
  .panel h2{font-size:clamp(27px,8vw,39px);overflow-wrap:anywhere}
  .panel p{overflow-wrap:anywhere}
  .actions{gap:10px}
  .actions a,.actions button{min-height:46px;flex:1 1 130px;display:flex;align-items:center;justify-content:center;text-align:center}
  .viewer{height:62dvh}
  .site-footer{padding-bottom:28px}
}
@media (max-width:360px){
  .mobile-books{gap:12px 9px}
  .mobile-book.painted-cover{height:225px;padding:8px 6px}
  .mobile-book .painted-title{font-size:16px}
  .mobile-book .painted-image{min-height:42px}
}
@media (prefers-reduced-motion:reduce){.mobile-book.painted-cover{transition:none}}