/* ==========================================================================
   The way back — one round arrow, the same on every detail page of the site
   (university, programme, scholarship, camp, course, blog post). It replaced
   the breadcrumb strips: "Universities" / "Scholarships" / "Blog" already live
   in the site header, and a "Parent / Child" line under it read like a
   directory listing.

   Loaded on its own so the older themes (camps, courses, blog) can use it
   without pulling in university-v3.css. Colours come from the site tokens in
   style.css; the accent has a fallback for pages that do not define --v3-accent.

   Markup: v3_back($href, $label[, $inline]) in v2/lib/university-v3-view.php.
   The destination is spelled out in a pill that slides in on hover or focus;
   the arrow alone has to carry the meaning on touch, and it does, because
   there is nothing else it could mean at the top-left of a detail page.
   ========================================================================== */

.v3-back {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    min-width: 38px;
    padding: 0 9px;
    border-radius: 999px;
    border: 1px solid var(--border-strong, #b9c5db);
    background: var(--bg-surface, #fff);
    color: var(--text-primary, #10336e);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    box-shadow: var(--shadow-card, 0 8px 24px rgba(0, 0, 0, .08));
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* Two ways to sit in a header. Absolute — floating in the corner — where the
   header is a centred lockup (programme) or a photo (university hero). Inline —
   a flex/flow item — where the header is left-aligned text and a corner would
   collide with the title (scholarships, camps, courses, blog). */
.v3-prog-head > .v3-back { top: 22px; left: 22px; }
.v3-hero { position: relative; }
.v3-hero > .v3-back { top: 12px; left: 12px; }

.v3-back--inline { position: static; align-self: center; flex: none; }
.v3-hero > .v3-back--inline { margin-left: 22px; }

/* A row of its own above an older-theme hero card. */
.v3-back-row { display: flex; margin-bottom: 16px; }

.v3-back .v3-i { width: 18px; height: 18px; flex: none; stroke: currentColor; }

.v3-back::after {
    content: attr(data-label);
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width .18s ease, opacity .12s ease;
}

.v3-back:hover,
.v3-back:focus-visible {
    background: var(--bg-surface-2, #f3f6fb);
    border-color: var(--v3-accent, #1d4ed8);
    box-shadow: 0 0 0 3px var(--v3-accent-weak, rgba(29, 78, 216, .08));
    color: var(--text-primary, #10336e);
    outline: none;
}

:root[data-theme="dark"] .v3-back:hover,
:root[data-theme="dark"] .v3-back:focus-visible {
    border-color: var(--v3-accent, #7aa2ff);
    box-shadow: 0 0 0 3px var(--v3-accent-weak, rgba(122, 162, 255, .12));
}

.v3-back:hover::after,
.v3-back:focus-visible::after {
    max-width: 320px;
    opacity: 1;
    padding-right: 4px;
}

@media (max-width: 640px) {
    /* Tighter in the corner on a phone; the label never expands there, since
       a hover state does not exist and the pill would cover the title. */
    .v3-back { height: 34px; min-width: 34px; padding: 0 7px; }
    .v3-prog-head > .v3-back { top: 12px; left: 12px; }
    .v3-hero > .v3-back--inline { margin-left: 14px; }
    .v3-back:hover::after,
    .v3-back:focus-visible::after { max-width: 0; opacity: 0; padding-right: 0; }
}