/*
 Theme Name: GeneratePress Child
 Template:   generatepress
 Text Domain: generatepress-child
*/

/* You can add custom CSS below */

/* Tables */



/* Zebra rows in post/page content (works for HTML tables & WP Table block) */
:where(.entry-content, .wp-block-post-content, .gb-container) table tbody tr:nth-child(even){
  background: #F2F2F2;   /* ← light row color */
}
/* Content tables: color the header row */
:where(.entry-content, .wp-block-post-content, .gb-container) 
table thead > tr > * {
  /*background: #636363;   
	header background */
  color: #fff;           /* header text */
}



/* Reserve image space when there is no image */
.char-table td.no-img::before {
  content: "";
  display: block;
  width: 100px; height: 100px;
  border-radius: 6px;       /* keeps the look consistent */
}

/* Match your mobile sizing */
@media (max-width: 768px) {
  .char-table td.no-img::before { width: 56px; height: 56px; }
}

  /* Desktop default */
  .char-table { width:100%; border-collapse: collapse; font-size: 15px; line-height: 1.35; }
  .char-table th, .char-table td { font-size: inherit; }
  .char-table thead th { background:#636363; text-align:left; }

.char-table thead th { background:#636363; color: #fff; text-align:left; }

  /* Image column */
  .char-table td:first-child, .char-table th:first-child { width:96px; text-align:center; }
  .char-table td:first-child img{
    width:100px; height:100px; object-fit:cover;
    border-radius:6px; display:block; margin:0 auto;
  }*/

  /* Mobile */
  @media (max-width: 768px) {
    .char-table { font-size: 12px; }
    .char-table td:first-child, .char-table th:first-child { width:72px; }
    .char-table td:first-child img{ width:56px; height:56px; }
    .char-table th, .char-table td { padding:5px 5px; }
  }
/* First column: exact width + no padding so 120px fits cleanly */
.char-table td:first-child { 
  width: 120px;  
	height:120px;
  border-radius: 6px;           
  text-align: center; 
}


 /* --------------------------  If it's a table without images, in first column left allign, need an id int the table "noimage".                      --------------------------*/
  #noimage th:first-child,
  #noimage td:first-child {
    text-align: left !important;
    width: auto; /* optional: let it size naturally */
  }




/* --------------------------Hide something on mobile        --------------------------*/
@media screen and (max-width: 600px) {
  .nomobile {
    visibility: hidden;
    display: none;
  }
}




/* --------------------------Comments  --------------------------*/



/* comment smaller on mobile */
/* Keep the comments block inside the viewport */
.dk-comments { max-width: 100%; overflow-x: clip; }
.dk-comments, .dk-comments * { box-sizing: border-box; }

/* Let flex/grid children shrink instead of forcing overflow */
.dk-comments .comment,
.dk-comments .comment-body,
.dk-comments .comment-meta,
.dk-comments .comment-author,
.dk-comments .comment-metadata,
.dk-comments .comment-content { min-width: 0; max-width: 100%; }

/* On small screens, wrap the meta row (name/date/Edit) instead of one long line */
@media (max-width: 640px) {
  .dk-comments .comment-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
  .dk-comments .comment-metadata { margin-left: 0; } /* don't push to the right edge */
}

/* Long names/emails/URLs shouldn't widen the card */
.dk-comments .comment-author a,
.dk-comments .comment-content a {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;   /* allow wrapping */
}

/* Avatars/images never exceed the container */
.dk-comments img { max-width: 100%; height: auto; }






/* --------------------------default padding für container schein 40 zu sein bei default template, jetzt 15px --------------------------*/
.separate-containers .comments-area, .separate-containers .inside-article, .separate-containers .page-header, .separate-containers .paging-navigation {
    padding: 15px;
}
.gb-loop-item {
    padding: 0px;
}




/* -------------------------- Add vertical space between bullet/numbered items-------------------------- */
.wp-block-list > li {
  margin-block-end: 0.75em;   /* works in LTR/RTL */
}
.wp-block-list > li:last-child {
  margin-block-end: 0;
}


/* --------------------------Steckbrief Tables               --------------------------*/


/* Styling for steckbrief tables */
.steckbrief {

  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 14px;        /* smaller text */
  margin: 20px auto;
  background: #fafafa;    /* light background */
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

.steckbrief td {
  padding: 6px 10px;      /* less padding = more compact */
  border-bottom: 1px solid #ddd;
}

.steckbrief tr:last-child td {
  border-bottom: none;
}

.steckbrief td:first-child {
  font-weight: bold;
  width: 120px;           /* narrower label column */
  color: #333;
}

.steckbrief td:last-child {
  color: #555;
}
.steckbrief th {
  text-align: left;   /* keep labels left-aligned */
  font-weight: 700;   /* bold */
}

.steckbrief th,
.steckbrief td {
  padding: 8px 12px;   /* same padding for both */
  line-height: 1.1;    /* set an equal line-height */
}



/* ========== TOC ========== */

.dk-toc{
  --ink:#111;            /* Rahmen + Diagonalstreifen */
  --b:1px;               /* Rahmenstärke */
  --sw:12px;             /* Breite/Höhe der Diagonalstreifen */
  --stripe-angle:45deg;  /* 45deg = gespiegelt */
  /* NEU: Lücken/Offsets für die Schraffur */
  --gap-left:24px;       /* unten links: Start der Schraffur */
  --gap-top:24px;        /* rechts oben: Start der Schraffur */

  position:relative;
  border:var(--b) solid var(--ink);
  border-radius:0;
  background:#fff;
  overflow:visible;      /* Deko darf rausstehen */
}

/* L-förmiger Diagonalstreifen (rechts + unten) – EIN Element mit Lücken */
.dk-toc::after{
  content:"";
  position:absolute;
  left:calc(-1 * var(--b));
  right:calc(-1 * var(--sw) - var(--b));
  top:calc(-1 * var(--b));
  bottom:calc(-1 * var(--sw) - var(--b));
  background:repeating-linear-gradient(var(--stripe-angle),
              var(--ink) 0 1.5px, transparent 1.5px 4px);
  /* L-Clip mit Offsets: unten startet bei --gap-left, rechts startet bei --gap-top */
  clip-path:polygon(
    var(--gap-left) 100%,
    100%           100%,
    100%           var(--gap-top),
    calc(100% - var(--sw)) var(--gap-top),
    calc(100% - var(--sw)) calc(100% - var(--sw)),
    var(--gap-left) calc(100% - var(--sw))
  );
  pointer-events:none;
  z-index:0;
}

/* Header: kein Hintergrund, schwarze Unterlinie */
.dk-toc > summary{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.65rem .9rem;
  font-weight:700;
  font-size:clamp(1.05rem,1.6vw,1.35rem);
  background:transparent;
  cursor:pointer;
  border-bottom:1px solid var(--ink);
  list-style:none;
  position:relative;
  z-index:1; /* über dem L-Streifen */
}
.dk-toc > summary::-webkit-details-marker{ display:none; }
.dk-toc[open]  > summary::after{ content:"▴"; color:#6f4df6; }
.dk-toc:not([open]) > summary::after{ content:"▾"; color:#6f4df6; }

/* Liste */
.dk-toc__list{
  list-style:decimal;
  list-style-position:inside;
  margin:0;
  padding:.75rem 1rem 1rem 1.5rem;
  display:grid;
  gap:.5rem;
  position:relative;
  z-index:1;
}

/* Links */
.dk-toc a{ color: #000; text-decoration:none; }
.dk-toc a:hover{ box-shadow: inset 0 -0.45em 0 #FFF102; color: #000; }
.dk-toc a:focus-visible{ box-shadow: inset 0 -0.45em 0 #FFF102; color: #000;}


/* ===== Need-to-know – global für alle .ntk ===== */
.ntk{
  /* Theme-Variablen (pro Instanz überschreibbar) */
  --ink:#111;              /* Rahmen/Schraffur */
  --accent:#6f4df6;        /* Bullet-Farbe */
  --bg:#fff;
  --b:1px;                 /* Rahmenstärke */
  --sw:12px;               /* sichtbare Streifenbreite */
  --stripe-angle:45deg;    /* 45° = gespiegelt, -45° = andere Richtung */
  --gap-left:24px;         /* unten links: Start der Schraffur */
  --gap-top:24px;          /* rechts oben: Start der Schraffur */
  --stripe-thick:1.5px;    /* Liniendicke der Schraffur */
  --stripe-step:4px;       /* Periode (Linie+Lücke) der Schraffur */

  position:relative;
  background:var(--bg);
  border:var(--b) solid var(--ink);
  max-width:1100px;
  margin:3rem auto;
  box-sizing:border-box;
  overflow:visible;
  padding:2.8rem 3rem 2.4rem; /* Platz oben, weil Titel im Rahmen sitzt */

  font:400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#222;
}

/* L-förmiger Streifen (rechts + unten) – EIN Element mit Lücken */
.ntk__stripes{
  position:absolute;
  left:calc(-1 * var(--b));
  right:calc(-1 * var(--sw) - var(--b));
  top:calc(-1 * var(--b));
  bottom:calc(-1 * var(--sw) - var(--b));
  background:repeating-linear-gradient(
    var(--stripe-angle),
    var(--ink) 0 var(--stripe-thick),
    transparent var(--stripe-thick) var(--stripe-step)
  );
  clip-path:polygon(
    var(--gap-left) 100%,
    100% 100%,
    100% var(--gap-top),
    calc(100% - var(--sw)) var(--gap-top),
    calc(100% - var(--sw)) calc(100% - var(--sw)),
    var(--gap-left) calc(100% - var(--sw))
  );
  pointer-events:none;
  z-index:1;
}

/* Titel im Rahmen (ohne Zusatzlinien) */
.ntk__topbar{
  position:absolute;
  left:var(--b);
  right:var(--b);
  top:0;
  transform:translateY(-50%); /* mittig auf der oberen Rahmenlinie */
  display:flex; justify-content:center;
  z-index:2;
}
.ntk__title{
  margin:0;
  padding:0 .75rem;         /* übermalt die Rahmenlinie unterm Text */
  background:var(--bg);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:clamp(1.0rem,2.2vw,1.4rem);
  line-height:1.1;
  color:var(--ink);
  white-space:nowrap;
  text-align:center;
}

/* Liste + Bullets (exakt zur ersten Zeile zentriert) */
.ntk__list{
  list-style:none; margin:0; padding:.4rem 0 0;
  display:grid; gap:1.2rem;
  font-size:clamp(.75rem,1.45vw,1.1rem);
  line-height:1.45;
}
.ntk__list li{
  position:relative; display:block; padding-left:1rem;
}
.ntk__list li::before{
  content:""; position:absolute; left:0; top:.72em; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}

/* Mobile Feinschliff */
@media (max-width:640px){
  .ntk{ padding:2.4rem 1.25rem 1.6rem; }
  .ntk__title{ font-size:1rem; letter-spacing:.16em; }
}




/* --------------------------Text wrap arounf an image class--------------------------*/

.wrap-left { float: left; margin: 0 1rem .25rem 0; width: 140px; }

@media (max-width: 700px){
  .wrap-left { float: none; display: block; margin: 0 0 .5rem; width: 100%; }
}




/* --------------------------Stretch-link (Bootstrap-style) — place in Additional CSS or GB Global CSS                      --------------------------*/

.stretch-link { position: relative; }

.stretch-link a { position: static; z-index: 1; }

.stretch-link a::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0; /* instead of inset: 0; */
}

/* Accessible focus ring on the overlay */
.stretch-link a:focus-visible::after {
  outline: 2px solid;
  outline-offset: 2px;
}

/* Remove default outline on the link itself */
.stretch-link a:hover,
.stretch-link a:focus {
  outline: 0;
}

/* ========= Links ========= */
/*.post-link a:hover{ color:#6f4df6; text-decoration:underline; 
background-color: #FFF102;
}*/
.post-link a:hover,
.post-link a:focus-visible{
  box-shadow: inset 0 -0.45em 0 #FFF102;  /* “marker” highlight */
  text-decoration: none;
}
@media (hover: none){
  .post-link a:hover{ box-shadow: none; }
}

/* standard link */
a{
  color: #6F4EF6;
	text-decoration: underline;
}
a:hover,
a:focus-visible{
	color: #6F4EF6;
  text-decoration: none;
}

/* yellow text background */
.yellow-back{
  display:inline;
  padding:0 .12em;
  box-shadow: inset 0 -0.45em 0 #FFF102;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}



/* ========== Container with line decoration ========== */

/* Box with black border + purple hatch lines */
.line-box{
  --border:#111;        /* border color */
  --stripe:#A282F9;     /* diagonal lines color */
  --b:1px;              /* border width */
  --sw:10px;            /* stripe width */
  --stripe-angle:45deg;
  --gap-left:24px;
  --gap-top:24px;

  position: relative;
  border: var(--b) solid var(--border);
  border-radius: 0;
  background: #fff;
  overflow: visible;
}

.line-box::after{
  content:"";
  position: absolute;
  left: calc(-1 * var(--b));
  right: calc(-1 * var(--sw) - var(--b));
  top: calc(-1 * var(--b));
  bottom: calc(-1 * var(--sw) - var(--b));
  background: repeating-linear-gradient(
    var(--stripe-angle),
    var(--stripe) 0 1.5px,
    transparent 1.5px 4px
  );
  clip-path: polygon(
    var(--gap-left) 100%,
    100% 100%,
    100% var(--gap-top),
    calc(100% - var(--sw)) var(--gap-top),
    calc(100% - var(--sw)) calc(100% - var(--sw)),
    var(--gap-left) calc(100% - var(--sw))
  );
  pointer-events: none;
  z-index: 0;
}

/* hover*/

/* Base: keep transitions but no motion by default */
.line-box{ transition: transform .22s ease, box-shadow .22s ease; }
.line-box::after{ transition: opacity .22s ease; }

/* Enable the effect ONLY on real-hover devices (desktops/trackpads) */
@media (any-hover: hover) and (pointer: fine){
  .line-box:hover,
  .line-box:focus-within{
    transform: translate(var(--sw), var(--sw));
  }
  .line-box:hover::after,
  .line-box:focus-within::after{
    opacity: 0;
  }
}

/* Explicitly neutralize on touch/coarse pointers (older browsers) */
@media (hover: none), (pointer: coarse){
  .line-box:hover,
  .line-box:focus-within{
    transform: none !important;
  }
  .line-box:hover::after,
  .line-box:focus-within::after{
    opacity: 1 !important;
  }
}


}



/* ======Table or love int. and not. Locations ======= */
.loveint {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px;      /* vertical gap between rows (no lines) */
}

.loveint th,
.loveint td {
  padding: 14px 18px;
  vertical-align: top;
  line-height: 1.6;
}

.loveint th[scope="row"] {
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  width: 22ch;                 /* stable label column */
}

.loveint td p + p {            /* paragraph spacing inside cells */
  margin-top: .8rem;
}

/* mobile: stack rows, still no borders */
@media (max-width: 1000px) {
  .loveint, .loveint tbody, .loveint tr, .loveint th, .loveint td { display: block; }
  .loveint th[scope="row"] { margin-bottom: .25rem; width: auto; white-space: normal; }
  .loveint tr { margin: 12px 0; }   /* spacing between stacked rows */
}



/* ---------Category Pages Design------------- */

.cat-index{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cat-item{border-bottom:1px solid #eee;padding:8px 0}
.cat-link{display:flex;align-items:center;gap:12px;text-decoration:none}
.cat-thumb{width:72px;height:72px;object-fit:cover;border-radius:8px;display:block}
.thumb-fallback{width:72px;height:72px;background:#eee;border-radius:8px;display:inline-block}
.cat-title{font-size:1rem}

/* Make rows denser */
.cat-index{max-width:720px}
.cat-item{padding:10px 0;border-bottom:1px solid #eee}

/* Thumbnail: smaller + consistent */
.cat-thumb,
.thumb-fallback{width:56px;height:56px;border-radius:10px;object-fit:cover}

/* Title style: dark, no underline; underline on hover */
.cat-link{display:flex;align-items:center;gap:14px;text-decoration:none}
.cat-link .cat-title{color:#111;font-weight:500}
.cat-link:hover .cat-title{text-decoration:underline}

/* Subtle hover row background */
.cat-item:hover{background:rgba(0,0,0,.025)}

/* Two-column grid on wider screens */
@media (min-width: 900px){
  .cat-index{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
  .cat-item{border:none;padding:8px 6px}
}

/* apply to both our templates */
.cat-archive,
.locations-archive{
  max-width: 1100px;     /* center the content on desktop */
  margin: 0 auto;
  padding: 0 15px;       /* 15px left/right on mobile */
}

.cat-title{ min-width:200px; flex:1 1 auto; }

/* On mobile not centered */
@media (max-width: 900px){
  .cat-archive,
.locations-archive{
  margin: 0;
}
}

/* extra breathing room above the footer on category pages */
.cat-archive{ padding-bottom: 80px; }   /* adjust 80px to taste */







/* -------------Book Context Sidebar--------------- */


.bcs{display:grid;gap:12px}
.bcs-head{font-weight:700;color:#666;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}

.bcs-section{margin:.25rem 0 .25rem;font-size:1rem}
.bcs-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}

/* Chip-like list items */
.bcs-link{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  background:#f5f5f7;
  border-radius:18px;
  padding:8px 12px;
}
.bcs-thumb{width:36px;height:36px;border-radius:10px;object-fit:cover;display:block;background:#e9e9ee}
.bcs-thumb--empty{background:#e9e9ee}
.bcs-title{color:#111; font-weight:600; line-height:1.2}
.bcs-link:hover .bcs-title{text-decoration:underline}



/* Book Context Sidebar */
.bcs{display:grid;gap:12px}
.bcs-head{font-weight:700;color:#666;font-size:.9rem;text-transform:uppercase;letter-spacing:.06em}

.bcs-section{margin:.25rem 0 .25rem;font-size:1rem}
.bcs-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}

.bcs-link{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  background:#f5f5f7;
  border-radius:18px;
  padding:6px 10px;
}
.bcs-thumb{width:40px;height:40px;border-radius:10px;object-fit:cover;display:block;background:#e9e9ee}
.bcs-thumb--empty{background:#e9e9ee}
.bcs-title{color:#111; font-weight:600; line-height:1.2; font-size:.95rem;}
.bcs-link:hover .bcs-title{text-decoration:underline}

.bcs-more-wrap{margin-top:6px}
.bcs-more{font-size:.9rem;text-decoration:none}
.bcs-more:hover{text-decoration:underline}


/* --- book sidebar sizing tweaks --- */
.bcs-head{ font-size:.85rem; letter-spacing:.06em }
.bcs-section{ font-size:1rem; margin:.35rem 0 .35rem }



/* Desktop only */
@media (min-width: 1024px){
  /* Make sure the sidebar column itself doesn't clip sticky */
  #right-sidebar,
  #left-sidebar,
  .widget-area { overflow: visible; }

  /* The block that has class "bcs-sticky" becomes sticky + scrollable */
  .bcs-sticky{
    position: sticky;
    top: 90px;                         /* adjust if header is taller/shorter */
    max-height: calc(100vh - 110px);   /* viewport minus header/buffer */
    overflow: auto;                    /* scroll inside the sidebar */
    -webkit-overflow-scrolling: touch; /* smooth on iOS */
  }
}



@media (min-width:100px){
  /* the element that actually scrolls */
  .bcs-sticky,
  .bcs-sticky .bcs{
    scrollbar-width: thin;                 /* Firefox: as thin as it gets */
    scrollbar-color: #b7b7c3 transparent;
  }

  /* Chrome/Edge/Safari: force 4px */
  .bcs-sticky::-webkit-scrollbar,
  .bcs-sticky .bcs::-webkit-scrollbar{ width: 4px !important; height: 4px !important; }
  .bcs-sticky::-webkit-scrollbar-track,
  .bcs-sticky .bcs::-webkit-scrollbar-track{ background: transparent; }
  .bcs-sticky::-webkit-scrollbar-thumb,
  .bcs-sticky .bcs::-webkit-scrollbar-thumb{
    background: #b7b7c3;
    border-radius: 8px;
  }
}