/* //////////////////////////////////////////////////////////////////////////

   CSS Part II

   //////////////////////////////////////////////////////////////////////////

   I. Post/Page
   |
   ├─ 1.Progress bar
   ├─ 2.Table of Content
   ├─ 3.Reading button
   ├─ 4.Content
   ├─ 5.CTA
   ├─ 6.Navigation
   ├─ 7.Comments
   ├─ 8.Share
   └─ 9.Image zoom

   //////////////////////////////////////////////////////////////////////////

   I. Post/Page

   ////////////////////////////////////////////////////////////////////////// */

/* --------------------------------------------------------------------------
   1.Progress bar
   -------------------------------------------------------------------------- */
.m-progress {
   position: fixed;
   z-index: 90;
   inset: 0 0 auto;
   width: 100%;
   height: 3px;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   transition: opacity .15s ease-out .3s;
   border: none;
   outline: none;
}

.m-progress,
.m-progress[value]::-webkit-progress-bar {
   background-color: transparent;
}

.m-progress[value]::-webkit-progress-value {
   transition: width .2s ease-out;
   background-color: var(--color-one);
   will-change: width;
}

.m-progress[value]::-moz-progress-bar {
   transition: width .2s ease-out;
   background-color: var(--color-one);
   will-change: width;
}

.m-progress[value="0"] {
   display: none;
}

.m-progress[value="100"] {
   opacity: 0;
}

/* --------------------------------------------------------------------------
   2.Table of Content
   -------------------------------------------------------------------------- */
.m-toc {
   gap: calc(var(--gap-grid) / 6);
   padding: var(--gap-mini);
   padding-bottom: calc(var(--gap-grid) / 4);
   border-radius: var(--radius-small);
}

.m-toc ~ :is(h1, h2, h3, h4, h5, h6)[id] {
   scroll-margin-top: 3vh;
}

/* Label */
.toc-label {
   display: grid;
   align-items: center;
   align-self: center;
   grid-template-columns: auto;
   gap: 4px;
   box-shadow: var(--border-box-shadow-bottom);
   padding: 0 0 10px;
   list-style: none;
}

.toc-label::-webkit-details-marker {
   display: none;
}

.toc-label svg {
   display: block;
   width: 16px;
   height: 16px;
   stroke: currentColor;
   stroke-width: 1.75;
   stroke-linecap: round;
}

/* List */
ul.toc-list {
   gap: 0;
   margin: 0;
   padding: 0;
   list-style: none;
}

ul.toc-list li a {
   text-decoration: none;
}

ul.toc-list li a:hover {
   color: var(--color-font-one);
}

/* Chevron */
.toc-chevron::before {
   font-family: var(--font-family-system);
   font-size: 120%;
   display: inline-block;
   content: '›';
   margin-inline-end: .3em;
   transition: transform .3s ease;
}

.toc-chevron:hover::before {
   transform: translateX(3px);
}

/* /////// data /////// */
[data-toc-clone] {
   position: fixed;
   z-index: 996;
   inset: 3vh var(--gap-site) auto;
   gap: 10px;
   width: calc(100% - calc(var(--gap-site) * 2));
   padding: 0;
   pointer-events: none;
   transition: transform .7s ease, opacity .7s ease;
   transform: translateY(-50vh);
   opacity: 0;
   background-color: transparent;
}

[data-toc-clone="visible"] {
   transform: translateY(0);
   opacity: 1;
}

[data-toc-clone] .toc-label {
   grid-template-columns: auto auto;
   gap: 5px;
   box-shadow: none;
   padding: 5px 20px;
   cursor: pointer;
   transition: transform .3s ease, background-color .3s ease;
   border-radius: var(--radius-full);
   background-color: var(--color-four);
}

[data-toc-clone] .toc-label:hover {
   background-color: var(--color-three);
}

[data-toc-clone] .toc-label,
[data-toc-clone] .toc-list li {
   justify-self: end;
   pointer-events: auto;
}

[data-toc-clone] .toc-list {
   display: none;
   gap: 6px;
   padding-top: clamp(6px, .8vw, 12px);
}

[data-toc-clone][open] .toc-list {
   display: grid;
   animation: slideTOC .3s ease;
}

[data-toc-clone] .toc-list li {
   font-size: var(--font-size-xxs);
   padding: 4px 14px;
   border-radius: var(--radius-extra-small);
   background-color: var(--color-one);
}

[data-toc-clone] .toc-list li a,
[data-toc-clone] .toc-list li a:hover {
   color: var(--color-font-two);
}

[data-toc-clone] .toc-chevron::before {
   transition: margin-inline-end .2s ease;
}

[data-toc-clone] .toc-chevron:hover::before {
   margin-inline-end: 2px;
   transform: none;
}

/* /////// Animation /////// */
@keyframes slideTOC {
   0% { transform: translateY(10px); opacity: 0 }
   100% { transform: translateY(0); opacity: 1 }
}

/* RWD — Table of Content
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:480px) {
   [data-toc-clone] {
      display: none;
   }
}

/* --------------------------------------------------------------------------
   3.Reading button
   -------------------------------------------------------------------------- */
.post-content + .m-continue {
   margin-block-start: calc(var(--gap-mini) * 2);
}

[data-appearance="Bold"]:where([data-color-scheme="light"], [data-color-scheme="sepia"]) .m-continue > a {
   color: var(--color-font-bold);
}

[data-appearance="Bold"]:where([data-color-scheme="light"], [data-color-scheme="sepia"]) .m-continue > a::before {
   background-color: var(--color-bg-bold);
}

@media (prefers-color-scheme:light) {
   [data-appearance="Bold"]:where([data-color-scheme="auto"]) .m-continue > a {
      color: var(--color-font-bold);
   }

   [data-appearance="Bold"]:where([data-color-scheme="auto"]) .m-continue > a::before {
      background-color: var(--color-bg-bold);
   }
}

/* --------------------------------------------------------------------------
   4.Content
   -------------------------------------------------------------------------- */
.post-content {
   --v-alignment-content: center;
   --v-gap-flow: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
   --v-gap-heading: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
   --v-gap-quote: clamp(3rem, 2.5rem + 2vw, 4.375rem);
   --v-gap-section: clamp(2.5rem, 2rem + 2.5vw, 4.375rem);
   --v-gap-separator: clamp(3rem, 2.5rem + 2.5vw, 5rem);
   --v-margin-inline-content: auto;
   --v-padding-block-code: clamp(1rem, .75rem + 1vw, 1.5rem);
   --v-padding-block-table: clamp(.625rem, .5rem + .5vw, 1rem);
   --v-text-align-content: center;
}

.post-content.is-left {
   --v-alignment-content: start;
   --v-margin-inline-content: 0 auto;
   --v-text-align-content: right;
}

.post-content.is-left blockquote {
   --v-text-align-content: left;
}

.post-content :where(img, iframe, picture, video, canvas, svg) {
   display: block;
}

.post-content :where(img, picture, video, canvas, svg) {
   max-width: 100%;
   height: auto;
}

.post-content iframe {
   width: 100%;
   border: 0;
}

/* Margins
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content * {
   margin-block: 0;
}

.post-content > * + * {
   margin-block-start: var(--v-gap-flow);
}

.post-content > :is(h1, h2, h3, h4, h5, h6)[id] + p {
   margin-block-start: var(--v-gap-heading);
}

.post-content > * + blockquote:not([class]),
.post-content > blockquote:not([class]) + *,
.post-content > blockquote:not([class]) + [id]:not(:first-child) {
   margin-block-start: var(--v-gap-quote);
}

.post-content > :is(h1, h2, h3, h4, h5, h6)[id]:not(:first-child) {
   margin-block-start: var(--v-gap-section);
}

/* Fix: Keep card transitions within the article rhythm without affecting card internals. */
.post-content > :where(.kg-card, table) + :not(.kg-card):not(table):not([id]),
.post-content > :where(:not(.kg-card):not(table):not([id])) + :is(.kg-card, table),
.post-content > :where(:not(.kg-card):not([id])) + .kg-card.kg-width-full,
.post-content > .kg-card.kg-width-full + :where(:not(.kg-card):not([id])) {
   margin-block-start: var(--v-gap-section);
}

.post-content > * + :where(hr, blockquote, iframe),
.post-content > :where(hr, blockquote, iframe) + *,
.post-content > :where(hr, blockquote, iframe) + [id]:not(:first-child) {
   margin-block-start: var(--v-gap-separator);
}

/* Fix: Join only adjacent non-Video full-width cards without a trailing caption. */
.post-content > .kg-card.kg-width-full:not(.kg-card-hascaption, .kg-video-card) + .kg-card.kg-width-full:not(.kg-video-card) {
   margin-block-start: 0;
}

/* Fix: Keep adjacent Bookmark cards visually grouped. */
.post-content > .kg-bookmark-card + .kg-bookmark-card {
   margin-block-start: 1em;
}

/* Typo
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content h1 { font-size: clamp(1.7em, calc(1rem + 2vw), 2.5em); }
.post-content h2 { font-size: clamp(1.4em, calc(1rem + 1.5vw), 2em); }
.post-content h3 { font-size: clamp(1.1em, calc(.5rem + 1.5vw), 1.5em); }
.post-content h4 { font-size: clamp(1em, calc(.25rem + 1.5vw), 1.25em); }
.post-content h5 { font-size: clamp(.8em, calc(.5rem + .75vw), 1em); }
.post-content h6 { font-size: clamp(.7em, calc(.5rem + .6vw), .85em); }

.post-content :where(h1, h2) {
   font-family: var(--font-family-display);
   font-weight: var(--font-weight-display);
   line-height: 1.2;
}

.post-content :is(h3, h4, h5, h6) { 
   font-weight: var(--font-weight-regular);
}

/* General
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
.post-content > p {
   color: color-mix(in srgb, var(--color-font-one) 94%, transparent)
}

.post-content a {
   transition: color .15s ease, opacity .15s ease;
   text-decoration-line: var(--text-decoration-line-link);
   text-decoration-thickness: var(--text-decoration-thickness-link);
   text-underline-offset: var(--text-underline-offset-link);
}

.post-content a:hover {
   color: var(--ghost-accent-color);
}

/* List */
.post-content :where(ul, ol) {
   padding-inline-start: 2ch;
}

.post-content :where(li + li, li :where(ul, ol)) {
   margin-block-start: 8px;
}

.post-content ol ol li {
   list-style-type: lower-alpha;
}

.post-content ol ol ol li {
   list-style-type: lower-roman;
}

/* hr */
.post-content hr {
   width: 100%;
   height: 1px;
   border: 0;
   background-color: var(--color-three);
}

/* Table */
.post-content table {
   font-size: var(--font-size-xs);
   display: inline-block;
   overflow-x: auto;
   width: auto;
   max-width: 100%;
   vertical-align: top;
   white-space: nowrap;
   text-align: start;
   border-collapse: collapse;
   background-color: transparent;
   -webkit-overflow-scrolling: touch;
}

.post-content table th {
   background-color: var(--color-bg);
}

.post-content table :where(th, td) {
   display: table-cell;
   padding-block: var(--v-padding-block-table);
   padding-inline: 1ch;
}

.post-content td {
   border-bottom: var(--border-thin);
}

/* Code */
.post-content pre > code {
   display: block;
   overflow: hidden;
   padding-block: var(--v-padding-block-code);
   padding-inline: 2ch;
   white-space: pre-wrap;
   border-radius: var(--radius-medium);
}

.post-content code {
   font-size: 80%;
   padding: 2px 5px;
   background-color: var(--color-bg);
}

.post-content blockquote code {
   font-size: 75%;
}

.post-content :where(blockquote code, p code) {
   border-radius: 5px;
}

/* Blockquote */
.post-content blockquote {
   margin-inline: 0;
}

.post-content blockquote:not([class]) {
   line-height: 1.4;
   padding-inline-start: .8em;
   border-inline-start: 4px solid var(--ghost-accent-color);
}

.post-content .kg-blockquote-alt {
   font-family: var(--font-family-display);
   font-size: var(--font-size-xxl);
   font-weight: var(--font-weight-display);
   font-style: normal;
   line-height: 1.2;
   padding: 0;
   text-align: var(--v-text-align-content);
}

/* Figcaption */
.post-content figcaption {
   margin-block-start: 8px;
   padding-inline: 1ch;
   text-align: var(--v-text-align-content);
}

.post-content figcaption a {
   text-decoration-line: none;
}

.post-content figcaption a,
.post-content figcaption a:hover {
   color: inherit;
}

@media (min-width:1281px) {
   .post-content.is-left {
      margin-block-start: calc(0px - var(--gap-mini));
   }
}

/* --------------------------------------------------------------------------
   5.CTA
   -------------------------------------------------------------------------- */
.m-cta {
   row-gap: calc(var(--gap-grid) / 2);
   margin-bottom: var(--gap-grid);
}

.cta-meta {
   box-shadow: var(--border-box-shadow-top), var(--border-box-shadow-bottom);
}

.cta-meta > small {
   line-height: 1.5;
}

.m-cta h2 {
   font-family: var(--font-family-display);
   font-weight: var(--font-weight-display);
}

.m-cta > a {
   justify-self: start;
}

/* RWD — CTA
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:480px) {
   .cta-meta--question {
      display: none;
   }
}

/* --------------------------------------------------------------------------
   6.Navigation
   -------------------------------------------------------------------------- */
.m-navigation:not(:has(.navigation-item)) {
   display: none;
}

.navigation-wrap {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: var(--gap-grid);
   box-shadow: var(--border-box-shadow-top);
   padding-top: calc(var(--gap-mini) / 1.5);
}

.navigation-item {
   min-width: 0;
}

.navigation-title {
   font-family: var(--font-family-subheading);
}

.navigation-item.is-newer {
   grid-column: 1;
   text-align: start;
}

.navigation-item.is-older {
   grid-column: 2;
   text-align: end;
}

/* RWD — Navigation
   –––––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width:768px) {
   .navigation-wrap {
      gap: calc(var(--gap-grid) / 2);
   }

   .navigation-title {
      font-size: var(--font-size-l);
   }
}

/* --------------------------------------------------------------------------
   7.Comments
   -------------------------------------------------------------------------- */
.m-comments {
   box-shadow: var(--border-box-shadow-top);
   padding-top: calc(var(--gap-mini) / 1.5);
}

/* --------------------------------------------------------------------------
   8.Share
   -------------------------------------------------------------------------- */
.share-btn {
   margin-bottom: var(--gap-grid);
}

/* --------------------------------------------------------------------------
   9.Image zoom
   -------------------------------------------------------------------------- */
.m-zoom {
   position: fixed;
   z-index: 9999;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: zoom-out;
   transition: opacity .15s ease;
   opacity: 0;
   background-color: var(--color-body);
}

.m-zoom.is-visible {
   opacity: 1;
}

.m-zoom img {
   max-width: 90vw;
   max-height: 90vh;
   cursor: zoom-out;
   border-radius: var(--radius-medium);
   object-fit: contain;
}