/*
 * KronJast, overskrivningar ovanpa dist/index.css
 * ------------------------------------------------
 * Hit laggs sajtovergripande stilandringar som inte kan byggas om i Parcel.
 * Filen laddas efter dist/index.css och ar beroende av den, se functions.php.
 * Inget harifran tar bort befintliga regler, allt skriver bara over dem.
 *
 * Innehall
 * 1. Knappform, hela sajten. Vantar pa matt, se kommentaren nedan.
 * 2. Ladda fler recept, textlank med chevron i stallet for knapp.
 */


/* ------------------------------------------------------------------
 * 1. KNAPPFORM
 * ------------------------------------------------------------------
 * Dagens varden i dist/index.css:
 *   .button          border-radius 5px,  height 50px, min-width 200px
 *   .button.lowBtn   border-radius 20px, height 40px
 *
 * Knapparna pa startsidorna och samarbetssidan har egna klasser i respektive
 * mall. De pekar pa samma variabel med 999px som reservvarde.
 *
 * Radien ar 5px, alltsa samma form som knappen Ladda fler recept redan har.
 * Det var den knappen kunden pekade pa, och formen finns alltsa redan pa
 * sajten. Behover den andras racker det att byta siffran har, sa foljer
 * samtliga knappar med.
 *
 * Filterpillren i receptarkivet och pa startsidorna ror vi inte. De valjer
 * och valjer bort i stallet for att navigera, sa de ska fortsatta vara runda.
 */

:root {
    --kj-knapp-radie: 5px;
}

.button {
    border-radius: var(--kj-knapp-radie, 5px);
}

.button.lowBtn {
    border-radius: var(--kj-knapp-radie, 20px);
}


/* ------------------------------------------------------------------
 * 2. LADDA FLER RECEPT
 * ------------------------------------------------------------------
 * Knappen fyller pa listan pa sidan man redan star pa, den navigerar inte
 * vidare. Darfor ska den inte se ut som en knapp. Den blir en centrerad
 * textlank med en chevron under som pekar nerat.
 *
 * Markupen ar oforandrad:
 *   <button class="button active" id="request-more">Ladda fler recept</button>
 * Den ligger kvar som button eftersom den utfor nagot i stallet for att
 * lanka vidare, vilket ar det ratta for skarmlasare.
 *
 * Farg, typsnitt och storlek ar samma varden som .button redan anvander i
 * dist/index.css, alltsa #003ba4, circular-bold och 16px.
 */

#request-more.button {
    /* Visningen styrs av klassen active, precis som forut. */
    display: none;

    /* All knappform bort. */
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    height: auto;
    min-width: 0;

    /* Texten och chevronen staplas och centreras. */
    flex-direction: column;
    align-items: center;

    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 30px auto 0;
    padding: 0;

    color: #003ba4;
    font-family: circular-bold;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    cursor: pointer;
}

/* Samma visa och dolj som forut, bara med flex i stallet for block. */
#request-more.button.active {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

/* Chevron nerat, ritad med tva kanter sa att den foljer textfargen. */
#request-more.button:after {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    margin: 8px auto 0;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: margin-top .15s ease;
    -moz-transition: margin-top .15s ease;
    transition: margin-top .15s ease;
}

/*
 * Hovring: understruken text och chevronen glider ett par pixlar nerat.
 * Lyftet och skuggan fran .button:hover stangs av.
 */
#request-more.button:hover,
#request-more.button:focus-visible {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    box-shadow: none;
    text-decoration: underline;
}

#request-more.button:hover:after,
#request-more.button:focus-visible:after {
    margin-top: 12px;
}

/* Tangentbordsfokus ska synas, dist/index.css stanger av outline pa .button. */
#request-more.button:focus-visible {
    outline: 2px solid #003ba4;
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    #request-more.button:after {
        -webkit-transition: none;
        -moz-transition: none;
        transition: none;
    }
    #request-more.button:hover:after,
    #request-more.button:focus-visible:after {
        margin-top: 8px;
    }
}