/*
 * The look of <taaltaal-share> (js/taaltaal-share.js). On a course page it reads as one more line like "Voor wie:" or
 * "Gebruikte lesmethode:": its label in bold, then the ways to send as the rounded pills the site already has (the
 * highlighted courses in the program further down). Light pills on purpose, so the green enroll buttons right above stay
 * the strongest thing to press. Only WhatsApp has a color of its own: the green its users know, dark enough to read.
 * Everything hangs under the tag, except the last part, which is about the share button in the heading of a course.
 */

taaltaal-share
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 18px;
}

taaltaal-share .label
{
    margin-right: 2px;
    font-weight: bold;
}

/* a link and a button look the same: a pill */
taaltaal-share a,
taaltaal-share button
{
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding: 4px 12px;
    border: 1px solid #aaa;
    border-radius: 15px;
    background: linear-gradient(#fff, #e6e9f0 120%);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    font: bold 13px/18px Arial, Verdana, Tahoma, sans-serif;
    color: #369;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

/* .widget a (mobile_widgets.css) gives links a line height of their own: a link pill keeps a button's, so all are as tall */
taaltaal-share a[href]
{
    line-height: 18px;
}

/* core.css makes a link under the mouse yellow-green and underlined, and on a touch screen also after a tap: not a pill */
taaltaal-share a:hover
{
    color: #369;
    text-decoration: none;
}

/* only with a mouse: a touch screen keeps :hover on a pill after the tap, and it would go on looking pressed */
@media (hover: hover)
{
    taaltaal-share a:hover,
    taaltaal-share button:hover
    {
        border-color: #369;
        background: linear-gradient(#fff, #d5e1f2 120%);
        box-shadow: 0 0 6px rgba(0,0,0,0.4);
        color: #234;
    }
}

taaltaal-share a:focus-visible,
taaltaal-share button:focus-visible
{
    outline: 2px solid #369;
    outline-offset: 2px;
}

taaltaal-share a.whatsapp,
taaltaal-share a.whatsapp:hover
{
    color: #0f7a43;
}

/* the share sheet of the device: the one that can do everything, so it goes first and in the dark blue of the logo */
taaltaal-share button.sheet
{
    color: #2a3e92;
}

/* both words of the copy button in one cell (js/taaltaal-share.js): as wide as the wider one, so nothing moves */
taaltaal-share button.copy .stack
{
    display: inline-grid;
}

taaltaal-share button.copy .stack > span
{
    grid-area: 1 / 1;
    transition: opacity 0.15s;
}

/* opacity and not visibility: a word that is only transparent still names the button for a screen reader */
taaltaal-share button.copy .ok,
taaltaal-share button.copy.done .stack > span:first-child
{
    opacity: 0;
}

taaltaal-share button.copy.done .ok
{
    opacity: 1;
}

/* for a moment after copying; the green is dark enough for 13px on the darkest point of the gradient (5:1) */
taaltaal-share button.copy.done
{
    border-color: #393;
    background: linear-gradient(#f4fff4, #cdeccd 120%);
    color: #267026;
}

/* only when copying did not work: the link, selected, to copy by hand */
taaltaal-share input.link
{
    flex: 1 1 220px;
    min-width: 0;
    box-sizing: border-box;
    padding: 4px 8px;
    border: 1px solid #aaa;
    border-radius: 8px;
    font: 13px/18px Arial, Verdana, Tahoma, sans-serif;
    color: #333;
}

/* the display rules above beat the hidden attribute: the two buttons that need a script wait for it */
taaltaal-share [hidden]
{
    display: none;
}

/* heard, not seen */
taaltaal-share .status
{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* nobody shares from paper */
@media print
{
    taaltaal-share,
    .course_details_widget .heading .share-button
    {
        display: none !important;
    }
}

@media only screen and (max-width: 600px)
{
    /* the label on a line of its own, then the share sheet of the phone across the width (it can do all the others), and
       the three others filling the row under it, big enough for a thumb */
    taaltaal-share .label,
    taaltaal-share button.sheet
    {
        flex-basis: 100%;
    }

    taaltaal-share a,
    taaltaal-share button
    {
        flex-grow: 1;
        padding: 8px 12px;
        font-size: 14px;
        text-align: center;
    }
}

/*
 * The share button in the heading of a course (CourseDetailsWidget): only on a phone, where the right side of the photo is
 * free, and only where the phone has a share sheet - the script takes its hidden away then. White with navy, like the tab of
 * the title below it.
 */
.course_details_widget .heading .share-button
{
    display: none;
}

@media only screen and (max-width: 600px)
{
    .course_details_widget .heading .share-button:not([hidden])
    {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        margin: 0;
        padding: 6px 14px;
        border: 0;
        border-radius: 15px;
        background: white;
        box-shadow: 0 0 8px rgba(0,0,0,0.6);
        font: bold 14px/18px Arial, Verdana, Tahoma, sans-serif;
        color: navy;
        cursor: pointer;
    }
}