/* ==========================================================================
   WPNM plugin output — Tokyo Trip Guide skin
   --------------------------------------------------------------------------
   plugins/wpnm ships dark-blog styles (#333 boxes, #ffd957 gold, white text).
   This sheet loads AFTER plugins/wpnm/public/public.css and re-draws every
   front-facing block with the theme tokens from main.css :root. No plugin
   file is edited; where the plugin uses !important, so must we.

   Blocks: Key Takeaways / [summary] · [enote] · "Also read" lists
   ([artikelterkait] [internallink] [externallink]) · [postembed] cards ·
   [cta-simple] · table of contents · FAQ accordion · trusted-source links,
   tooltip + footnotes · [category_posts] grid · [yt] · [map] · [syntax].
   ========================================================================== */

/* --- Shared note surface: Key Takeaways, footnotes, [enote] --------------- */
.summary-keytakeaways,
.enote {
    background: var(--w);
    border: 1px solid var(--p2);
    border-left: 4px solid var(--r);
    border-radius: var(--r2);
    box-shadow: var(--sh-sm);
    color: var(--ink3);
    font-family: var(--sans);
    margin: 2rem 0;
    padding: 1.3rem 1.6rem 1.45rem;
}

.summary-keytakeaways .summary-heading {
    gap: 1rem;
    margin: 0 0 .75rem;
}

.summary-keytakeaways .summary-heading h2,
.summary-keytakeaways .summary-heading h3,
.summary-keytakeaways .summary-heading h4,
.summary-keytakeaways h3.summary-heading {
    color: var(--ink) !important;
    font-family: var(--serif);
    font-size: 1.25rem !important;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin: 0;
}

.summary-keytakeaways .summary-isi,
.summary-keytakeaways .summary-isi p,
.summary-keytakeaways .summary-isi li,
.article-footnotes p {
    color: var(--ink3) !important;
    font-size: .95rem;
    line-height: 1.7;
}

.summary-keytakeaways .summary-isi ul,
.summary-keytakeaways .summary-isi ol {
    margin: 0;
    padding-left: 1.4rem;
}

.summary-keytakeaways .summary-isi li {
    margin: 0 0 .45rem;
}

.summary-keytakeaways .summary-isi li:last-child,
.summary-keytakeaways .summary-isi p:last-child {
    margin-bottom: 0;
}

.summary-keytakeaways .summary-isi li::marker {
    color: var(--r);
}

.summary-keytakeaways .summary-isi a {
    color: var(--r) !important;
}

/* Show / Hide control → squared theme button */
.toggle-summary {
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--r1);
    color: #fff;
    float: none;
    font-family: var(--cond);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 1.4;
    margin-left: 12px;
    padding: .38rem .75rem;
    text-transform: uppercase;
    transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}

.toggle-summary:hover,
.toggle-summary:focus-visible {
    background: var(--r);
    border-color: var(--r);
    color: #fff;
    outline: none;
}

/* --- [enote] — secondary (gold) accent so it reads as a note, not a summary */
.enote {
    border-left-color: var(--g);
}

.enote span.enote-title,
.enote .enote-title {
    align-items: center;
    color: var(--gd) !important;
    display: flex;
    justify-content: flex-start;
    font-family: var(--cond);
    font-size: .74rem !important;
    font-weight: 700;
    gap: .55rem;
    letter-spacing: .12em;
    margin: 0 0 .6rem;
    text-transform: uppercase;
}

.enote .enote-title::before {
    background: var(--g);
    content: '';
    display: inline-block;
    flex: 0 0 auto;
    height: 8px;
    width: 8px;
}

.enote .enote-content,
.enote .enote-content p,
.enote .enote-content li {
    color: var(--ink3) !important;
    font-size: .95rem;
    line-height: 1.7;
}

.enote .enote-content a {
    color: var(--r) !important;
}

.enote .enote-content li::marker {
    color: var(--gd);
}

/* --- "Also read" list ([artikelterkait] [internallink] [externallink]) ---- */
.artikelterkait {
    background: var(--p);
    border: 1px solid var(--p2);
    border-left: 4px solid var(--ink);
    border-radius: var(--r2);
    box-shadow: none;
    margin: 2rem 0;
    padding: 1.15rem 1.5rem 1.2rem;
}

.artikelterkait .judul {
    color: var(--ink) !important;
    font-family: var(--cond);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    margin: 0 0 .6rem;
    text-transform: uppercase;
}

.artikelterkait .isi ul {
    list-style: none;
    margin: 0 !important;
    padding: 0;
}

.artikelterkait .isi ul li {
    list-style: none;
    margin: 0 0 .4rem;
    padding-left: 1.45rem;
    position: relative;
}

.artikelterkait .isi ul li:last-child {
    margin-bottom: 0;
}

.artikelterkait .isi ul li::before {
    color: var(--r);
    content: '\2192';
    font-weight: 700;
    left: 0;
    position: absolute;
}

.post-content .artikelterkait .isi ul li a,
.artikelterkait .isi ul li a {
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 3px;
    transition: color var(--t), text-decoration-color var(--t);
}

.post-content .artikelterkait .isi ul li a:hover,
.artikelterkait .isi ul li a:hover {
    color: var(--r);
    text-decoration-color: var(--r);
}

/* --- [cta-simple] → primary theme button, no pulse -------------------------- */
.cta-button-wrapper {
    margin: 2rem auto;
    text-align: center;
}

.cta-button,
a.cta-button,
a.cta-button:hover {
    animation: none;
    background: var(--r);
    background-image: none;
    border: 1px solid var(--r);
    border-radius: var(--r1);
    box-shadow: none;
    color: #fff !important;
    display: inline-flex;
    font-family: var(--cond);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .06em;
    max-width: 100%;
    padding: 13px 28px;
    text-transform: uppercase;
    transition: background var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
    width: auto;
}

a.cta-button:hover,
a.cta-button:focus-visible {
    background: var(--rd);
    border-color: var(--rd);
    box-shadow: 4px 4px 0 rgba(22, 16, 15, .85);
    transform: translate(-2px, -2px);
}

/* A CTA dropped inside an [enote] or Key Takeaways box must stay a button:
   the note rules above paint every link red, which is red-on-red here. */
.enote .enote-content a.cta-button,
.summary-keytakeaways .summary-isi a.cta-button {
    color: #fff !important;
}

/* Consecutive [cta-simple] buttons inside a note share one row and split
   the width evenly (1 / 2 / 3 buttons); text blocks stay full-width. */
.enote-content:has(> .cta-button-wrapper),
.summary-isi:has(> .cta-button-wrapper) {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.enote-content:has(> .cta-button-wrapper) > :not(.cta-button-wrapper),
.summary-isi:has(> .cta-button-wrapper) > :not(.cta-button-wrapper) {
    flex: 1 1 100%;
}

.enote-content .cta-button-wrapper,
.summary-isi .cta-button-wrapper {
    display: flex;
    flex: 1 1 160px;
    margin: .35rem 0 0;
}

.enote-content .cta-button-wrapper a.cta-button,
.summary-isi .cta-button-wrapper a.cta-button {
    justify-content: center;
    width: 100%;
}

/* --- Table of contents (<details class="wpnm-toc">) ------------------------ */
.wpnm-toc {
    --toc-line: var(--p2);
    --toc-accent: var(--r);
    background: var(--w);
    border: 1px solid var(--p2);
    border-radius: var(--r2);
    box-shadow: var(--sh-sm);
    margin: 0 0 2rem;
}

.wpnm-toc__title {
    background: var(--p);
    color: var(--ink);
    font-family: var(--cond);
    font-size: .74rem;
    letter-spacing: .12em;
    padding: .8rem 1.2rem;
}

.wpnm-toc__title:hover {
    color: var(--r);
}

.wpnm-toc__count {
    background: var(--w);
    border: 1px solid var(--p2);
    color: var(--p3);
    font-family: var(--cond);
}

.post-content .wpnm-toc__link,
.wpnm-toc__link {
    color: var(--ink3);
    font-family: var(--sans);
    font-size: .9rem;
    text-decoration: none;
}

.post-content .wpnm-toc__link:hover,
.post-content .wpnm-toc__link:focus-visible,
.wpnm-toc__link:hover,
.wpnm-toc__link:focus-visible {
    color: var(--r);
    text-decoration: none;
}

.wpnm-toc--number .wpnm-toc__list > .wpnm-toc__item > .wpnm-toc__link::before {
    color: var(--r);
    font-family: var(--cond);
    font-weight: 700;
}

.wpnm-toc--number .wpnm-toc__sub > .wpnm-toc__item > .wpnm-toc__link::before {
    color: var(--p3);
    font-family: var(--cond);
}

.wpnm-toc--bullet .wpnm-toc__item > .wpnm-toc__link::before {
    background: var(--p3);
}

.wpnm-toc--indent .wpnm-toc__sub .wpnm-toc__link {
    color: var(--ink3);
    font-size: .85rem;
}

/* --- FAQ accordion (<details class="wpnm-faq__item">) ---------------------- */
.faq-title-section .text-white,
.faq-title-section h2,
.faq-title-section h3 {
    color: var(--ink) !important;
    font-family: var(--serif);
}

.wpnm-faq {
    --faq-line: var(--p2);
    --faq-accent: var(--r);
}

.wpnm-faq__item {
    background: var(--w);
    border: 1px solid var(--p2);
    border-left: 4px solid var(--r);
    border-radius: var(--r2);
    box-shadow: none;
}

.wpnm-faq__item[open] {
    border-color: var(--p2);
    border-left-color: var(--r);
    box-shadow: var(--sh-sm);
}

.wpnm-faq__qtext {
    color: var(--ink) !important;
    font-family: var(--serif);
    font-size: 1.05rem !important;
    font-weight: 700;
}

.wpnm-faq__q:hover .wpnm-faq__qtext,
.wpnm-faq__item[open] .wpnm-faq__qtext {
    color: var(--r) !important;
}

.wpnm-faq__a-inner,
.wpnm-faq__a-inner p,
.wpnm-faq__a-inner li {
    color: var(--ink3);
    font-size: .95rem;
    line-height: 1.7;
}

.wpnm-faq__item.is-targeted {
    box-shadow: 0 0 0 3px rgba(228, 28, 28, .18);
}

/* --- [postembed] card ------------------------------------------------------- */
.ref-block {
    background-color: var(--w) !important;
    border: 1px solid var(--p2) !important;
    border-left: 4px solid var(--ink) !important;
    border-radius: var(--r2) !important;
    box-shadow: var(--sh-sm) !important;
    gap: 1.1rem;
    margin: 2rem 0 !important;
    padding: 1rem !important;
    transition: border-color var(--t) var(--ease);
}

.ref-block:hover {
    border-color: var(--r) !important;
    border-left-color: var(--r) !important;
}

.ref-block__thumbnail {
    border-radius: var(--r1);
    flex-basis: 180px !important;
    overflow: hidden;
}

.ref-block__thumbnail::after,
.img-thumb,
.img-thumb::after {
    background-color: var(--p) !important;
}

.ref-block__summary {
    color: var(--ink3) !important;
    padding-left: 0 !important;
}

.ref-block .ref-title {
    color: var(--ink) !important;
    font-family: var(--serif) !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
}

.ref-block .ref-description {
    color: var(--ink3) !important;
    font-size: .9rem !important;
    line-height: 1.55 !important;
}

.ref-block__summary span {
    color: var(--r) !important;
    font-family: var(--cond) !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    letter-spacing: .1em;
    text-transform: uppercase;
}

@media screen and (max-width: 420px) {
    .ref-block__summary {
        margin-top: .75rem !important;
    }
}

/* --- Trusted-source links, tooltip and footnotes --------------------------- */
.hl-trusted-source-css > a,
.trusted-source-link {
    color: var(--r) !important;
    font-weight: 600 !important;
}

.trusted-source-link sup {
    color: var(--p3);
    font-family: var(--cond);
    font-size: .7em;
}

hl-trusted-source .icon-hl-trusted-source-after svg {
    fill: var(--r);
}

.trusted-source-modal {
    border: 1px solid var(--p2);
    border-radius: var(--r2);
    box-shadow: var(--sh-md);
    font-family: var(--sans);
}

.trusted-source-modal-title {
    color: var(--r);
    font-family: var(--cond);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.trusted-source-modal-title svg {
    fill: var(--r);
}

.trusted-source-modal-name {
    color: var(--ink) !important;
    font-family: var(--serif);
}

.trusted-source-modal-description {
    color: var(--ink3) !important;
    font-size: .8rem;
}

.trusted-source-modal-description svg {
    fill: var(--p3);
}

.trusted-source-modal-link a,
.trusted-source-modal-link span {
    color: var(--r) !important;
}

.article-footnotes h3.summary-heading {
    margin-bottom: .5rem;
}

ul.footnotes-list {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
}

ul.footnotes-list li {
    border-top: 1px solid var(--p2);
    font-size: .88rem;
    line-height: 1.55;
    padding: .65rem 0;
}

ul.footnotes-list li:first-child {
    border-top: 0;
    padding-top: 0;
}

ul.footnotes-list li:last-child {
    padding-bottom: 0;
}

ul.footnotes-list li cite {
    color: var(--ink3);
    font-style: normal;
}

ul.footnotes-list li cite span a {
    color: var(--ink) !important;
}

a.reference-link {
    color: var(--r) !important;
    font-weight: 500 !important;
    word-break: break-all;
}

ul.footnotes-list li cite span a:hover,
a.reference-link:hover,
.article-footnotes p a:hover {
    color: var(--rd) !important;
}

/* --- [category_posts] grid (plugin emits Bootstrap classes; no Bootstrap here) */
.post-content .row {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin: 1.5rem 0;
}

.post-content .row .col-md-4 {
    margin: 0;
}

.post-content .card {
    background: var(--w);
    border: 1px solid var(--p2);
    border-radius: var(--r2);
    box-shadow: var(--sh-sm);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.post-content .card-img-top {
    display: block;
    height: 150px;
    object-fit: cover;
    width: 100%;
}

.post-content .card-body {
    padding: .9rem 1rem;
}

.post-content .card-body a {
    text-decoration: none;
}

.post-content .card-title {
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.post-content .card-body a:hover .card-title {
    color: var(--r);
}

/* --- Embeds: [yt], [map] ---------------------------------------------------- */
.youtube-player {
    border-radius: var(--r2);
    margin: 2rem auto;
    overflow: hidden;
}

.responsive-map {
    border-radius: var(--r2);
    box-shadow: var(--sh-sm);
    margin: 2rem 0;
    overflow: hidden;
}

/* --- [syntax] code blocks --------------------------------------------------- */
pre code.hljs {
    border: 1px solid var(--p2);
    border-left: 4px solid var(--ink);
    border-radius: var(--r2);
    box-shadow: var(--sh-sm);
    margin: 1.5rem 0 .6rem;
    padding: 1.5rem;
}

.btn-copy-code {
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: var(--r1);
    box-shadow: none;
    color: #fff;
    font-family: var(--cond);
    font-size: .74rem;
    letter-spacing: .08em;
    margin-bottom: 1.5rem;
    padding: .7rem 0;
    text-transform: uppercase;
    transition: background var(--t) var(--ease);
}

.btn-copy-code:hover {
    background: var(--r);
    border-color: var(--r);
}

/* --- Plugin tables --------------------------------------------------------- */
.responsive-table-html th,
.responsive-table-html td,
.table td,
.table th {
    border-color: var(--p2);
}

.responsive-table-html th {
    background: var(--p);
    color: var(--ink);
    font-family: var(--cond);
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.responsive-table-html tr:nth-child(even) {
    background: var(--p);
}

.responsive-table-html tr:hover {
    background: var(--rt);
}

@media (prefers-reduced-motion: reduce) {
    .toggle-summary,
    a.cta-button,
    .ref-block,
    .btn-copy-code {
        transition: none;
    }
}