/* ============================================================ *
   OBJECTS / LAYOUT

   The Objects layer targets elements by their class name only.
   Also, styles in this layer should only be of a layout nature
   -- such as height, width, padding, margin, etc -- and not apply
   any decoration -- such as colours, font-size, etc.
   If an object happens to add anything other than layout, then
   it would be moved to the next layer, Components.
 * ============================================================ */

/* -------------------- TYPOGRAPHY -------------------- */
.highlight {
    color: var(--color-brand-dark);
    font-style: normal;
    font-weight: var(--font-weight-semibold);
}

.service-description p {
    max-width: none;
}

/* ============================================================ *
   COMPONENTS

   The Components layer targets elements by their class name.
   The Components layer can contain layout AND decoration styles.
 * ============================================================ */

/* -------------------- SECTION MODIFIERS -------------------- */
[class^="bg-"] {
    --section-margin: calc(-1 * var(--viewport-spacing));
    --section-padding: calc(var(--viewport-spacing) + var(--content-padding));

    margin-right: var(--section-margin);
    margin-left: var(--section-margin);
    padding-right: calc(var(--section-padding)/2);
    padding-left: calc(var(--section-padding)/2);
}

/* -------------------- FORMS -------------------- */
form {
    display: flex;
}

label {
    flex: 1 0 auto;
}

input,
button,
a[role="button"] {
    position: relative;
    border: 0;
    height: 3em;
    border-radius: 2px;
    padding: 0.25em 1em;
    font-family: inherit;
    letter-spacing: inherit;
}

input {
    --highlight-color: var(--service-color);

    background: var(--color-ui-inverted);
    color: currentColor; /* stylelint-disable-line value-keyword-case */
    width: 100%;
}

button,
a[role="button"] {
    --highlight-color: var(--color-content-2);

    background: var(--service-color);
    color: currentColor; /* stylelint-disable-line value-keyword-case */
    padding-left: 2em;
    padding-right: 2em;
}

input:focus,
button:focus,
a[role="button"]:focus {
    outline: 1px solid var(--highlight-color);
    z-index: var(--z-index-front);
}

a[role="button"]:hover {
    background: var(service-color);
}

/* -------------------- ITEM LIST -------------------- */
.items {
    --gap: 2em;

    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-bottom: 5em;
}

.items > * {
    --items-display: inherit;

    list-style: none;
    flex: 1 0 15em;
    align-content: baseline;
    max-width: calc(var(--content-max-width) /3 - var(--gap) / 2);
    display: var(--items-display, flex);
    flex-wrap: wrap;
    gap: 2em;
}

.items-wrapper {
    display: flex;
    justify-content: center;
}

.items .title {
    margin: 0 0 0.25em;
}

.items .text {
    --item-text-width: inherit;

    display: block;
    margin: 0.25em 0;
    flex: 1 0 var(--item-text-width, 0);
}

@media only screen and (width >= 560px) {
    .items {
        --item-text-width: 100%;
    }

    .items .max-content {
        display: block;
        max-width: 18em;
    }
}

/* Icons */
.items > :nth-child(1) {
    --icon-bg-color: var(--cd-blue-70);
}

.items > :nth-child(2) {
    --icon-bg-color: var(--cd-sea-green-70);
}

.items > :nth-child(3) {
    --icon-bg-color: var(--cd-green-70);
}

.items > :nth-child(4) {
    --icon-bg-color: var(--cd-yellow-70);
}

.items > :nth-child(5) {
    --icon-bg-color: var(--cd-rose-70);
}

/* -------------------- ICON -------------------- */
.items .icon { /* stylelint-disable-line no-descending-specificity */
    --icon-bg-size: 4em;
    --icon-bg-color: inherit;
    --icon-color: var(--color-content-darken);
    --icon-weight: 800;

    flex: 0 auto;
    margin-bottom: 3em;
    background: var(--icon-bg-color, var(--color-ui-1));
    width: var(--icon-bg-size);
    height: var(--icon-bg-size);
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* -------------------- MATERIAL ICONS  ----------------------- */
.items .icon .material-icon {
    color: var(--icon-color);
    font-weight: var(--icon-weight);
    margin-top: 0.0013em; /* Optical shift */
}

/* -------------------- ARROW BUTTON -------------------- */
.arrow-button {
    --icon-bg-size: 0.75em;
    --icon-border-size: 2px;
    --icon-shift: calc(1px + var(--icon-border-size));
    --icon-color: var(--color-ui-bg-base); /* stylelint-disable-line value-keyword-case */
    --icon-line-length: 1.5em;
    --button-size: calc(2 * var(--icon-line-length));

    background: var(--color-ui-inverted);
    border-radius: 100%;
    width: var(--button-size);
    height: var(--button-size);
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.arrow-button:hover {
    --icon-shift: calc(0.5em / -2);
    --icon-color: var(--link-color-hover);
}

.arrow-button::before,
.arrow-button::after {
    position: relative;
    border-radius: var(--icon-border-size);
}

.arrow-button::after {
    content: "";
    display: block;
    width: var(--icon-bg-size);
    height: var(--icon-bg-size);
    box-shadow: var(--icon-border-size) calc(-1 * var(--icon-border-size)) var(--icon-color);
    transform: rotate(135deg);
    transition: var(--transition-default);
    top: calc(-1 * (var(--icon-bg-size) + var(--icon-shift)));
}

.arrow-button::before {
    content: "";
    height: var(--icon-line-length);
    border-left: calc(var(--icon-border-size)) solid var(--icon-color);
    margin-top: calc(1 * (var(--icon-bg-size)));
}