/* ==========================================================================
   4SKILLS — BUTTON SYSTEM
   --------------------------------------------------------------------------
   Exactly three buttons, replacing the five unrelated systems the audit
   found (.btn-primary, .btn__primary/.btn__outline, .see__more__stories,
   .sec__pricing a, .ss-btn--gold/.ss-btn--outline) plus the footer's
   .btn-link.

     .btn-4s--primary    navy fill, white text, gold stroke inset along the
                         bottom edge that extends to full width on hover.
                         One per viewport.
     .btn-4s--secondary  navy hairline border and navy text. On hover a gold
                         stroke draws in from the left along the bottom edge
                         - never a fill.
     .btn-4s--tertiary   text only, gold underline growing from the left.

   The gold stroke is the same 2px marker used by the active nav item, so
   the three tiers share one accent language.

   Namespaced .btn-4s so nothing collides with Bootstrap's .btn. Do not add
   Bootstrap's .btn alongside it.

   Dark grounds: add .on-dark to any ancestor (or use inside
   .site-header--dark) and every variant re-grounds automatically.

   Values come from css/tokens.css. No hardcoded colour or spacing.
   ========================================================================== */

.btn-4s {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    min-height: 44px;                    /* touch target floor at every width */

    /* Optical padding for uppercase with tracking. The trailing letter-space
       after the final glyph pushes the visual centre left, so the right
       padding loses exactly one tracking unit to compensate. The 2px top
       bias nudges the cap-height down, because uppercase has no descenders
       and otherwise reads high in the box. */
    padding-block: 2px 0;
    padding-inline: var(--space-6) calc(var(--space-6) - 0.08em);

    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;                    /* clips the bottom stroke */

    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;

    cursor: pointer;
    background: none;
    transition:
        background-color var(--duration-base) var(--ease),
        border-color var(--duration-base) var(--ease),
        color var(--duration-base) var(--ease),
        box-shadow var(--duration-base) var(--ease),
        transform var(--duration-fast) var(--ease);
}

.btn-4s--lg {
    min-height: 48px;
    padding-inline: var(--space-7) calc(var(--space-7) - 0.08em);
}

/* The bottom stroke, shared by primary and secondary. */
.btn-4s--primary::after,
.btn-4s--secondary::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--color-gold);
    transition: transform var(--duration-base) var(--ease);
}

/* Arrows and icons travel 3px on hover, with the shared easing. */
.btn-4s i,
.btn-4s svg {
    transition: transform var(--duration-base) var(--ease);
}

.btn-4s:hover i,
.btn-4s:hover svg {
    transform: translateX(3px);
}

.btn-4s:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.btn-4s:disabled,
.btn-4s[aria-disabled="true"],
.btn-4s.is-disabled {
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   PRIMARY
   Stroke sits inset at rest and extends to the full width on hover.
   -------------------------------------------------------------------------- */
.btn-4s--primary {
    background-color: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
}

.btn-4s--primary::after {
    transform: scaleX(0.62);             /* inset */
}

.btn-4s--primary:hover {
    background-color: var(--color-navy-deep);
    border-color: var(--color-navy-deep);
    color: var(--color-white);
    transform: translateY(-1px);
}

.btn-4s--primary:hover::after {
    transform: scaleX(1);                /* extends to full width */
}

/* A real press: the button travels below its resting plane and loses its
   lift, rather than only darkening. */
.btn-4s--primary:active {
    background-color: var(--color-navy-deep);
    transform: translateY(1px);
    box-shadow: none;
}

.btn-4s--primary:disabled,
.btn-4s--primary[aria-disabled="true"],
.btn-4s--primary.is-disabled {
    background-color: var(--color-border);
    border-color: var(--color-border);
    color: var(--color-body);            /* 5.51:1 — AA */
}

.btn-4s--primary:disabled::after,
.btn-4s--primary.is-disabled::after {
    display: none;
}

/* --------------------------------------------------------------------------
   SECONDARY
   No stroke at rest. On hover it draws in from the left. Never a fill.
   -------------------------------------------------------------------------- */
.btn-4s--secondary {
    background-color: transparent;
    border-color: var(--color-navy);
    color: var(--color-navy);
}

.btn-4s--secondary::after {
    transform: scaleX(0);
    transform-origin: left center;
    background-color: var(--color-gold-deep);   /* 4.90:1 on white */
}

.btn-4s--secondary:hover {
    border-color: var(--color-navy);
    color: var(--color-navy);
    transform: translateY(-1px);
}

.btn-4s--secondary:hover::after,
.btn-4s--secondary:focus-visible::after {
    transform: scaleX(1);
}

.btn-4s--secondary:active {
    transform: translateY(1px);
}

.btn-4s--secondary:disabled,
.btn-4s--secondary[aria-disabled="true"],
.btn-4s--secondary.is-disabled {
    background-color: transparent;
    border-color: var(--color-border);
    color: var(--color-muted);           /* 4.88:1 — AA */
}

.btn-4s--secondary:disabled::after,
.btn-4s--secondary.is-disabled::after {
    display: none;
}

/* --------------------------------------------------------------------------
   TERTIARY
   Underline grows from the left. --color-gold-deep, not --color-gold: gold
   is 2.29:1 on white and fails the 3:1 non-text minimum for a state
   indicator (WCAG 1.4.11). On dark grounds gold is 8.02:1 and is used.
   -------------------------------------------------------------------------- */
.btn-4s--tertiary {
    position: relative;
    min-height: 0;
    padding-block: var(--space-2);
    padding-inline: 0;
    border-color: transparent;
    background-color: transparent;
    color: var(--color-navy);
    overflow: visible;
}

.btn-4s--tertiary::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--color-gold-deep);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-base) var(--ease);
}

.btn-4s--tertiary:hover {
    color: var(--color-gold-deep);
}

.btn-4s--tertiary:hover::after,
.btn-4s--tertiary:focus-visible::after,
.btn-4s--tertiary:active::after {
    transform: scaleX(1);
}

.btn-4s--tertiary:active {
    transform: translateY(1px);
}

.btn-4s--tertiary:disabled,
.btn-4s--tertiary[aria-disabled="true"],
.btn-4s--tertiary.is-disabled {
    color: var(--color-muted);
}

.btn-4s--tertiary:disabled::after,
.btn-4s--tertiary.is-disabled::after {
    transform: scaleX(0);
}

/* --------------------------------------------------------------------------
   DARK GROUNDS
   -------------------------------------------------------------------------- */
.on-dark .btn-4s--primary,
.site-header--dark .btn-4s--primary {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-navy);            /* 7.23:1 — AA */
}

/* Gold stroke on a gold fill would be invisible, so it inverts to navy. */
.on-dark .btn-4s--primary::after,
.site-header--dark .btn-4s--primary::after {
    background-color: var(--color-navy);
}

.on-dark .btn-4s--primary:hover,
.site-header--dark .btn-4s--primary:hover {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold-light);
    color: var(--color-navy);            /* 9.82:1 — AA */
}

.on-dark .btn-4s--secondary,
.site-header--dark .btn-4s--secondary {
    border-color: var(--color-white);
    color: var(--color-white);           /* 18.33:1 — AA */
}

.on-dark .btn-4s--secondary::after,
.site-header--dark .btn-4s--secondary::after {
    background-color: var(--color-gold); /* 8.02:1 on navy */
}

.on-dark .btn-4s--secondary:hover,
.site-header--dark .btn-4s--secondary:hover {
    border-color: var(--color-white);
    color: var(--color-white);
}

.on-dark .btn-4s--tertiary,
.site-header--dark .btn-4s--tertiary {
    color: var(--color-white);
}

.on-dark .btn-4s--tertiary::after,
.site-header--dark .btn-4s--tertiary::after {
    background-color: var(--color-gold);
}

.on-dark .btn-4s--tertiary:hover,
.site-header--dark .btn-4s--tertiary:hover {
    color: var(--color-gold);
}

.on-dark .btn-4s:disabled,
.on-dark .btn-4s.is-disabled,
.site-header--dark .btn-4s.is-disabled {
    background-color: transparent;
    border-color: var(--color-navy-soft);
    color: var(--color-on-dark-muted);   /* 8.27:1 — AA */
}

/* ==========================================================================
   ADOPTERS
   Elements that carry no button class of their own, or whose class is a
   structural hook that other rules depend on, take their tier here rather
   than through a markup change.
   ========================================================================== */

/* index.php - the four plan CTAs inside the dark pricing band. Classless
   anchors styled by .sec__pricing a. Secondary, because two to four of them
   share a viewport and only one primary is allowed per screen. */
.sec__pricing a.btn-4s,
.sec__pricing .item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 44px;
    padding-block: 2px 0;
    padding-inline: var(--space-6) calc(var(--space-6) - 0.08em);
    border: 1px solid var(--color-white);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition:
        border-color var(--duration-base) var(--ease),
        color var(--duration-base) var(--ease),
        transform var(--duration-fast) var(--ease);
}

.sec__pricing .item a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--color-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-base) var(--ease);
}

.sec__pricing .item a:hover {
    color: var(--color-white);
    transform: translateY(-1px);
}

.sec__pricing .item a:hover::after,
.sec__pricing .item a:focus-visible::after {
    transform: scaleX(1);
}

.sec__pricing .item a:active {
    transform: translateY(1px);
}

.sec__pricing .item a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* index.php - "See More". The .see__more__stories class is also the hook
   for the related-block spacing rule in scss/main.css, so it stays in the
   markup and takes the tertiary treatment here. */
.see__more__stories {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    position: relative;
    /* Standalone CTA, so it takes the full 44px touch target rather than
       the inline tertiary height. */
    min-height: 44px;
    padding: var(--space-2) 0;
    border: none;
    background: transparent;
    color: var(--color-navy) !important;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    text-decoration: none;
    max-width: none;
    border-radius: 0;
    transition:
        color var(--duration-base) var(--ease),
        transform var(--duration-fast) var(--ease);
}

.see__more__stories::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* Held just under the text rather than at the bottom of the 44px box,
       so the underline stays attached to the label. */
    bottom: calc(50% - 0.85em);
    height: 2px;
    background-color: var(--color-gold-deep);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-base) var(--ease);
}

.see__more__stories:hover {
    color: var(--color-gold-deep) !important;
}

.see__more__stories:hover::after,
.see__more__stories:focus-visible::after {
    transform: scaleX(1);
}

.see__more__stories:active { transform: translateY(1px); }

.see__more__stories:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* footer.php - quick links. Kept as .btn.btn-link so the Font Awesome
   chevron survives as the arrow that travels on hover; adopted as tertiary
   here. This also replaces the letter-spacing hover, which physically
   reflowed the text under the cursor. */
.footer .btn.btn-link {
    position: relative;
    /* flex, not inline-flex: these are a stacked list. inline-flex made
       them flow onto one line. */
    display: flex;
    align-items: center;
    width: -moz-fit-content;
    width: fit-content;
    padding: var(--space-1) 0;
    margin-bottom: var(--space-2);
    color: var(--color-on-dark-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-normal);
    text-transform: capitalize;
    transition: color var(--duration-base) var(--ease);
}

.footer .btn.btn-link::before {
    transition: transform var(--duration-base) var(--ease);
}

.footer .btn.btn-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--color-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-base) var(--ease);
}

/* Overrides the letter-spacing reflow in css/style.css. */
.footer .btn.btn-link:hover {
    letter-spacing: var(--tracking-normal);
    color: var(--color-white);
}

.footer .btn.btn-link:hover::before {
    transform: translateX(3px);
}

.footer .btn.btn-link:hover::after,
.footer .btn.btn-link:focus-visible::after {
    transform: scaleX(1);
}

.footer .btn.btn-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* footer.php - the review "Send" submit sits absolutely inside the input,
   so it takes compact horizontal padding and the field reserves room for
   it. Without this the 44px button overlaps the text field. */
.footer .position-relative .btn-4s {
    padding-inline: var(--space-4) calc(var(--space-4) - 0.08em);
}

/* !important is required here: Bootstrap's .pe-5 utility on this input is
   itself !important, and the field must reserve room for the button. */
.footer .position-relative .form-control {
    padding-right: var(--space-12) !important;
}

/* ==========================================================================
   PAGINATION
   Both success-stories pages. The PTE page was still black circles with a
   powderblue active state; this brings it onto the same control as the
   IELTS page.
   ========================================================================== */
.ss-pagination a,
.pagination li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-white);
    color: var(--color-body);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    font-variant-numeric: lining-nums tabular-nums;
    transition:
        border-color var(--duration-base) var(--ease),
        color var(--duration-base) var(--ease);
}

.ss-pagination a:hover,
.pagination li a:hover {
    color: var(--color-gold-deep);
    border-color: var(--color-gold-deep);
}

.ss-pagination a.active,
.pagination li.active2 a {
    background: var(--color-navy);
    border-color: var(--color-navy);
    color: var(--color-white);
}

.ss-pagination a:focus-visible,
.pagination li a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
    margin: var(--section-gap-sm) auto 0;
}

.pagination li {
    display: block;
    margin: 0;
}

/* The old active pill drew a powderblue circle on the <li>. */
.pagination li.active2 {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   REDUCED MOTION
   Token durations already collapse to near zero. Suppress the lift, the
   stroke growth and the arrow travel outright.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .btn-4s:hover,
    .btn-4s:active,
    .see__more__stories:hover,
    .see__more__stories:active,
    .sec__pricing .item a:hover,
    .sec__pricing .item a:active {
        transform: none;
    }

    .btn-4s::after,
    .btn-4s i,
    .btn-4s svg,
    .see__more__stories::after,
    .sec__pricing .item a::after,
    .footer .btn.btn-link::before,
    .footer .btn.btn-link::after {
        transition: none;
    }

    .btn-4s:hover i,
    .btn-4s:hover svg,
    .footer .btn.btn-link:hover::before {
        transform: none;
    }
}