/* ═══════════════════════════════════════════════════════════
   BOOKMARK BUTTON STYLES
   ───────────────────────────────────────────────────────────
   Colors resolve through the parent theme's --nh-* design
   tokens so dark mode works automatically. The parent theme
   already ships a comprehensive bookmarks.css (styled with the
   same tokens) — this child override exists to make the button
   larger and flatter than the parent's default, and to add
   mobile full-width behavior.

   Every value that was previously a hardcoded hex now resolves
   through a token, so html.nh-dark and
   body.noteshub-dark-default swap the whole palette at runtime.
   ═══════════════════════════════════════════════════════════ */

.goppo-bookmark-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--nh-bg-tint, #f1f5f9);
    color: var(--nh-text, #0f172a);
    border: 1px solid var(--nh-border, #e2e8f0);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
    /* Named transition properties, using the theme's easing token.
       The previous `transition: all .15s ease` animated every
       property on every state change, which is both wasteful and
       unpredictable — a future property addition would trigger an
       unintended animation. */
    transition: background .15s var(--nh-ease, cubic-bezier(.4, 0, .2, 1)),
                border-color .15s var(--nh-ease, cubic-bezier(.4, 0, .2, 1)),
                color .15s var(--nh-ease, cubic-bezier(.4, 0, .2, 1)),
                transform .1s var(--nh-ease, cubic-bezier(.4, 0, .2, 1));
}

.goppo-bookmark-btn:hover {
    background: var(--nh-border, #e2e8f0);
    border-color: var(--nh-text-faint, #cbd5e1);
}

.goppo-bookmark-btn:active {
    transform: scale(.97);
}

.goppo-bookmark-btn:focus-visible {
    outline: 2px solid var(--nh-primary, #6366f1);
    outline-offset: 2px;
}

.goppo-bookmark-btn:disabled {
    cursor: default;
    opacity: .6;
}

.goppo-bookmark-btn.is-saved {
    background: var(--nh-primary-soft, rgba(99, 102, 241, .12));
    color: var(--nh-primary, #4f46e5);
    border-color: color-mix(in srgb, var(--nh-primary, #6366f1) 35%, transparent);
}

/*
 * BUGFIX: the previous version had no .is-saved:hover rule, so
 * hovering a saved button fell through to the base :hover, which
 * set background: #e2e8f0 — a gray that visually conflicts with
 * the is-saved indigo tint. The saved state "flashed gray" on
 * hover before returning to indigo on mouse-out. Now the saved
 * state has its own hover treatment.
 */
.goppo-bookmark-btn.is-saved:hover {
    background: var(--nh-primary-soft, rgba(99, 102, 241, .18));
    color: var(--nh-primary, #4f46e5);
    border-color: var(--nh-primary, #6366f1);
}

.goppo-bookmark-btn .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
}

/*
 * BUGFIX: the parent theme styles a login-state variant via
 * .goppo-bookmark-login (a link that opens the login modal when the
 * visitor isn't authenticated). The child override didn't cover it,
 * so the login button inherited the base button's background and
 * looked identical to the saved-state button on the front end.
 * Explicit styling here removes the ambiguity.
 */
.goppo-bookmark-login {
    background: transparent;
    border-style: dashed;
    color: var(--nh-text-muted, #64748b);
}

.goppo-bookmark-login:hover {
    background: var(--nh-primary-softer, rgba(99, 102, 241, .06));
    border-color: var(--nh-primary, #6366f1);
    color: var(--nh-primary, #6366f1);
}

.goppo-bookmark-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 16px 0;
}

@media (max-width: 768px) {
    .goppo-bookmark-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════
   DARK MODE
   ───────────────────────────────────────────────────────────
   Every color above resolves through --nh-* tokens, which
   html.nh-dark and body.noteshub-dark-default swap at runtime,
   so no explicit dark-mode rules are required. The two rules
   below are the exceptions where the light-mode value has an
   alpha channel calibrated for white surfaces.
   ═══════════════════════════════════════════════════════════ */

html.nh-dark .goppo-bookmark-btn,
body.noteshub-dark-default .goppo-bookmark-btn {
    /* The base background token --nh-bg-tint already resolves to a
       dark surface, but the border-radius renders slightly softer
       against the parent --nh-border. Left here for clarity. */
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

html.nh-dark .goppo-bookmark-btn.is-saved,
body.noteshub-dark-default .goppo-bookmark-btn.is-saved {
    /* The soft tint was tuned for white; on dark surfaces it reads
       too flat. Nudge it up slightly. */
    background: rgba(99, 102, 241, .22);
}