/* Styles for the plugin's Bricks elements: theme switch, portrait, essay contents, next essay */
/* Theme switch (charaf-theme-switch element). Loaded by the element. */
.charaf-visual--moon { display: contents; }
.moon-switch {
  position: relative; isolation: isolate; flex: none;
  display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  transition-duration: .2s;
}
.moon-switch::after { content: ""; position: absolute; inset: -9px; } /* bigger tap target */
.moon {
  position: relative; display: block; overflow: hidden; width: 23px; height: 23px; border-radius: 50%;
  background: radial-gradient(ellipse at 29% 35%, #a5a7a780 0 9%, transparent 11%), radial-gradient(ellipse at 64% 64%, #858a8b60 0 13%, transparent 16%), radial-gradient(circle at 60% 18%, #9a9b9b70 0 7%, transparent 10%), radial-gradient(circle at 32% 30%, #fff9e8, #c9c7b9 65%, #737a80);
  box-shadow: inset -2px -1px 3px #18234260; transform: rotate(-25deg); transition: transform .65s ease;
}
.moon-shadow {
  position: absolute; inset: -2px; border-radius: 50%;
  background: var(--chm-surface); transform: translate(27px, -9px);
  transition: transform .65s ease, background-color .65s ease;
}
/* Light theme: a crescent over a dark disc */
[data-brx-theme="light"] .moon-switch::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 23px; height: 23px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--chm-text); }
[data-brx-theme="light"] .moon { transform: rotate(5deg); background: radial-gradient(circle at 32% 28%, #faf4dc, #c4c3ad 65%, #7c897f); box-shadow: inset -2px -2px 5px #27364666; }
[data-brx-theme="light"] .moon-shadow { background: var(--chm-text); transform: translate(8px, -4px); }
/* Two stars fade in on hover */
.detail-stars { position: absolute; inset: 0; pointer-events: none; }
.detail-stars i {
  position: absolute; width: 5px; height: 5px; background: var(--chm-text); opacity: 0;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  transform: translate(0, 2px) rotate(-12deg); transition: opacity .22s ease;
}
.detail-stars i:first-child { left: 6px; top: 9px; }
.detail-stars i:last-child { right: 5px; bottom: 9px; width: 4px; height: 4px; }
@media (hover: hover) and (pointer: fine) {
  .moon-switch:hover .detail-stars i:first-child { opacity: .8; }
  .moon-switch:hover .detail-stars i:last-child { opacity: .6; transition-delay: 60ms; }
}
@media (max-width: 767px) { .moon-switch { width: 32px; height: 40px; } }
@media (max-width: 478px) { .moon-switch { width: 26px; height: 26px; } }
/* Portrait (charaf-portrait element): a taped, slightly tilted print that reveals the photo on hover */
.charaf-visual--portrait { display: contents; }
.personal-portrait { position: relative; width: 154px; transform: rotate(-2deg); box-shadow: 0 12px 20px -12px rgb(20 15 5 / .45); }
.personal-portrait::before {
  content: ""; position: absolute; top: -12px; left: 50%; z-index: 3; width: 80px; height: 24px; pointer-events: none;
  transform: translateX(-50%) rotate(3deg); background: var(--chm-tape);
  clip-path: polygon(0 12%, 3% 0, 7% 9%, 11% 0, 15% 8%, 20% 0, 100% 0, 97% 14%, 100% 30%, 96% 46%, 100% 62%, 97% 80%, 100% 100%, 0 100%, 3% 82%, 0 64%, 4% 47%, 0 30%);
}
.portrait-stack { position: relative; overflow: hidden; height: 192px; border-radius: 3px; background: #efe3cc; }
.portrait-stack img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 41%; }
.portrait-stack .portrait-real { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.tonal-print, .tonal-print > span { position: absolute; inset: 0; display: block; }
.tonal-print > span { background: url("/wp-content/plugins/charaf-site/assets/imprint/portraits/portrait-print-320.webp") center 41% / cover no-repeat; transition: opacity .65s ease; }
.personal-portrait .print-day { opacity: 0; filter: url("#print-day"); }
.personal-portrait .print-night { opacity: 1; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.08) brightness(1.04); }
@media (hover: hover) and (pointer: fine) { .personal-portrait:not(.locked):hover .portrait-real { opacity: 1; } }
/* Essay contents (charaf-contents element; links are built by article.js) */
.charaf-visual--toc { margin-bottom: 48px; }
.article-toc {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; padding-top: 4px;
  font-family: var(--chm-font-mono); font-size: 12px; line-height: 1.65; color: var(--chm-muted);
}
.article-toc > span { grid-column: 1 / -1; margin-bottom: 6px; color: var(--chm-text); }
.article-toc a { display: block; width: fit-content; padding: 4px 0; text-decoration: none; }
.article-toc .toc-t {
  padding-bottom: 1px; background-image: var(--chm-highlight); background-repeat: no-repeat;
  background-size: 0% .55em; background-position: 0 104%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .38s cubic-bezier(.3, .7, .3, 1);
}
.article-toc a[aria-current="true"] { color: var(--chm-text); }
.article-toc a[aria-current="true"] .toc-t { background-image: var(--chm-underline), var(--chm-highlight); background-repeat: repeat-x, no-repeat; background-size: 180px 6px, 0% .55em; background-position: 0 100%, 0 104%; }
@media (hover: hover) {
  .article-toc a:hover .toc-t { background-size: 100% .55em; }
  .article-toc a[aria-current="true"]:hover .toc-t { background-image: var(--chm-underline-hover), var(--chm-highlight); background-size: 180px 6px, 100% .55em; }
}
.toc-marker { display: none; }
@media (max-width: 767px) { .charaf-visual--toc { margin-bottom: 36px; } .article-toc { grid-template-columns: 1fr; padding-bottom: 15px; } }
/* Next essay (charaf-next-essay element) */
.reading-end { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 100px 0 90px; }
.reading-end > span { font: 500 11px/16px var(--chm-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--chm-muted); }
.read-button {
  max-width: 420px; font-family: var(--chm-font-display); font-size: 25px; line-height: 1.25; letter-spacing: -.005em; color: var(--chm-text);
  text-decoration: none; background-image: var(--chm-underline), var(--chm-highlight); background-repeat: repeat-x, no-repeat;
  background-size: 180px 6px, 0% .62em; background-position: 0 100%, 0 82%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .38s cubic-bezier(.3, .7, .3, 1);
}
@media (hover: hover) { .read-button:hover { background-image: var(--chm-underline-hover), var(--chm-highlight); background-size: 180px 6px, 100% .62em; } }