/* =============================================================================
   Module: actionbar  (modules/actionbar.php)
   -----------------------------------------------------------------------------
   The row of contact actions the header carries. This file is the row and the
   pills only - where the row sits is modules/header.php's business, and the
   travel between the hero and the header bar is in header.css.

   Two looks, decided by the viewport alone:

     < 1024px   the row is at the foot of the open menu panel, on the blue
                gradient: outlined pills in white.
     >= 1024px  the row is in the white header bar: filled pills in blue.

   No ancestor selector is needed for that, because below 1024px the header has
   no room for the row and never shows it - see header.css.
   ============================================================================= */

.actionbar {

    /* Both are stepped down between 1024 and 1280px, where the row has to fit
       beside the menu indicator and the logo. */
    --actionbar-pill-x: var(--space-md);
    --actionbar-pill-size: var(--font-size-sm);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
}

/* --- The two icon buttons -------------------------------------------------- */
.actionbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background-color var(--transition-fast),
                box-shadow var(--transition-fast);
}

/* The mark is an external SVG in the accent blue, so CSS cannot recolour it -
   it reads on both the white bar and the blue panel, and the feedback on hover
   is the button behind it rather than the glyph itself. */
.actionbar__glyph {
    width: auto;
    height: 1.0625rem;   /* 17px - the taller of the two viewBoxes */
}

/* --- The pills ------------------------------------------------------------- */
.actionbar__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: var(--actionbar-pill-x);
    border-radius: var(--radius-pill);
    font-size: var(--actionbar-pill-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-heading);
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--transition-fast),
                color var(--transition-fast),
                box-shadow var(--transition-fast);
}

/* =============================================================================
   In the menu panel - below 1024px
   Outlined in the accent blue, so the pills read as one family with the rules
   between the menu entries above them.
   ============================================================================= */

.actionbar__icon,
.actionbar__link {
    background-color: transparent;
    box-shadow: inset 0 0 0 var(--border-width) var(--color-line-invert);
    color: var(--color-text-inverse);
}

.actionbar__link--accent {
    background-color: var(--color-accent);
    box-shadow: none;
    color: var(--color-blue);
}

.actionbar__icon:hover,
.actionbar__icon:focus-visible,
.actionbar__link:hover,
.actionbar__link:focus-visible {
    background-color: var(--color-accent);
    box-shadow: none;
    color: var(--color-blue);
}

.actionbar__link--accent:hover,
.actionbar__link--accent:focus-visible {
    background-color: var(--color-text-inverse);
}

/* =============================================================================
   In the header bar - from 1024px
   ============================================================================= */

@media (min-width: 1024px) {

    .actionbar__icon,
    .actionbar__link {
        background-color: var(--color-surface);
        box-shadow: inset 0 0 0 var(--border-width) var(--color-line);
        color: var(--color-primary);
    }

    .actionbar__link--accent {
        background-color: var(--color-accent);
        box-shadow: none;
        color: var(--color-text-inverse);
    }

    .actionbar__icon:hover,
    .actionbar__icon:focus-visible,
    .actionbar__link:hover,
    .actionbar__link:focus-visible {
        background-color: var(--color-primary);
        box-shadow: none;
        color: var(--color-text-inverse);
    }

    .actionbar__link--accent:hover,
    .actionbar__link--accent:focus-visible {
        background-color: var(--color-primary);
    }
}

/* The one width this module needs for itself: between 1024 and 1280px the row
   shares the header line with the menu indicator and the logo, and at the full
   size it would not fit. Below 1024 it is in the panel and has the room again.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {

    .actionbar {
        --actionbar-pill-x: var(--space-sm);
        --actionbar-pill-size: var(--font-size-xs);
        gap: var(--space-3xs);
    }

    .actionbar__icon {
        width: 40px;
    }
}