/* ============================================================================
   wp-extras.css — UI THAT THE STATIC TEMPLATE NEVER HAD
   ----------------------------------------------------------------------------
   Two features live here, both built from the tokens in variables.css so they
   inherit the site's palette automatically:

     1. The EN / ID language toggle in the navbar capsule
     2. The comment thread and comment form

   Loaded after main.css. Nothing in main.css is modified.
   ========================================================================== */


/* ============================================================================
   1. LANGUAGE TOGGLE  (components/molecules/language-toggle.php)
   Sits inside .nav-actions, so it must match the sibling DONATE button's
   optical weight without introducing a new type size.
   ========================================================================== */

.coco-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-nav-actions);
    line-height: 1;
    white-space: nowrap;
}

.coco-lang-toggle__item {
    /* Reset the <button> so it is visually identical to the <a> variant. */
    appearance: none;
    background: none;
    border: 0;
    padding: 4px 2px;
    margin: 0;
    font: inherit;
    color: rgb(var(--color-primary-rgb) / 0.55);
    cursor: pointer;
    letter-spacing: 0.06em;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--transition-base), border-color var(--transition-base);
}

.coco-lang-toggle__item:hover,
.coco-lang-toggle__item:focus-visible {
    color: var(--active-gold);
    outline: none;
}

.coco-lang-toggle__item:focus-visible {
    border-bottom-color: var(--active-gold);
}

/* The language currently being displayed. */
.coco-lang-toggle__item.is-active {
    color: var(--active-gold);
    font-weight: 700;
    border-bottom-color: rgb(var(--color-glow-rgb) / 0.35);
    cursor: default;
}

.coco-lang-toggle__sep {
    color: rgb(var(--color-primary-rgb) / 0.3);
    user-select: none;
}

/* Inside the mobile dropdown the toggle sits on its own row. */
@media (max-width: 1100px) {
    .coco-lang-toggle {
        font-size: 1rem;
        gap: 10px;
    }

    .coco-lang-toggle__item {
        padding: 6px 4px;
    }
}


/* ============================================================================
   1b. GOOGLE TRANSLATE — hide everything Google injects
   The navbar toggle is the only control the visitor should see, and Google's
   banner would otherwise push the whole page down by 40px and break the fixed
   navbar's position.
   ========================================================================== */

.coco-translate-element,
.goog-te-banner-frame,
.goog-te-gadget,
.goog-logo-link,
#goog-gt-tt,
.goog-te-balloon-frame,
.skiptranslate {
    display: none !important;
}

/* element.js sets `body { top: 40px }` inline for its banner. */
body {
    top: 0 !important;
    position: static !important;
}

/* Google wraps translated runs in <font> and highlights them on hover. */
body font {
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
    vertical-align: baseline !important;
}

/* The widget can also add a highlight class to translated nodes. */
.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}


/* ============================================================================
   2. COMMENTS  (comments.php + components/molecules/comment-item.php)
   ========================================================================== */

/* ---- The thread ---------------------------------------------------------- */

.coco-comment-list,
.coco-comment-list .children {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Replies step in and get a hairline rail, so depth is readable without
   relying on indentation alone. */
.coco-comment-list .children {
    margin-top: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid rgb(var(--color-glow-rgb) / 0.1);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (max-width: 640px) {
    .coco-comment-list .children {
        padding-left: 0.85rem;
    }
}

.coco-comment {
    margin: 0;
}

.coco-comment + .coco-comment {
    margin-top: 1.5rem;
}

/* Avatar fallback background while the image loads. */
.coco-comment__card img.avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coco-comment__body p {
    margin-bottom: 0.9rem;
}

.coco-comment__body p:last-child {
    margin-bottom: 0;
}

/* Reply / Edit links. */
.coco-comment__reply a,
.coco-comment__edit a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgb(var(--color-secondary-rgb));
    text-decoration: none;
    transition: color var(--transition-base), gap var(--transition-base);
}

.coco-comment__reply a:hover,
.coco-comment__edit a:hover {
    color: rgb(var(--color-primary-rgb));
    gap: 10px;
}

.coco-comment__edit a {
    color: rgb(var(--color-on-surface-variant-rgb) / 0.6);
}

/* ---- Comment pagination -------------------------------------------------- */

.coco-comment-pagination a,
.coco-comment-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 0.75rem;
    border-radius: var(--radius-full);
    border: 1px solid rgb(var(--color-glow-rgb) / 0.1);
    color: rgb(var(--color-primary-rgb));
    text-decoration: none;
    transition: all var(--transition-base);
}

.coco-comment-pagination a:hover {
    background-color: rgb(var(--color-primary-rgb));
    color: rgb(var(--color-on-primary-rgb));
}

.coco-comment-pagination .current {
    background-color: rgb(var(--color-primary-rgb));
    color: rgb(var(--color-on-primary-rgb));
    border-color: transparent;
    font-weight: 700;
}

/* ---- The form ------------------------------------------------------------ */

.comment-respond .comment-reply-title {
    font-family: var(--font-headline);
    font-size: 26px;
    font-style: italic;
    color: rgb(var(--color-primary-rgb));
    margin-bottom: 0.5rem;
}

.comment-respond .comment-reply-title small {
    display: inline-block;
    margin-left: 1rem;
    font-family: var(--font-label);
    font-size: var(--font-size-label-caps);
    font-style: normal;
    letter-spacing: var(--letter-spacing-label-caps);
    text-transform: uppercase;
}

.comment-respond .comment-reply-title small a {
    color: rgb(var(--color-secondary-rgb));
    text-decoration: none;
}

.coco-comment-form p {
    margin-bottom: 1.25rem;
}

.coco-comment-form .form-submit {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.coco-comment-form textarea {
    resize: vertical;
    min-height: 150px;
    font-family: var(--font-body);
    line-height: 1.6;
}

.coco-comment-form input[type="text"],
.coco-comment-form input[type="email"] {
    font-family: var(--font-body);
}

/* Two columns for name + email on wider screens. */
@media (min-width: 768px) {
    .coco-comment-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-gutter);
    }

    .coco-comment-form > p,
    .coco-comment-form > .comment-form-comment,
    .coco-comment-form > .form-submit,
    .coco-comment-form > .comment-notes,
    .coco-comment-form > .coco-hp,
    .coco-comment-form > input[type="hidden"] {
        grid-column: 1 / -1;
    }

    .coco-comment-form > .comment-form-author {
        grid-column: 1 / 2;
    }

    .coco-comment-form > .comment-form-email {
        grid-column: 2 / 3;
    }
}

/* ---- Honeypot -----------------------------------------------------------
   Hidden from sight and from assistive tech, but still a real, fillable field
   so a naive bot completes it and gives itself away. Never use display:none —
   some bots skip hidden inputs on purpose.
   ------------------------------------------------------------------------ */

.coco-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}