/* SPDX-FileCopyrightText: 2021 Ilmari Lauhakangas <ilmari.lauhakangas@libreoffice.org>
   SPDX-License-Identifier: CC0-1.0 */

:root {
    /* scale font-size down so it is equal to 10px in most browsers
       to make it easier to reason about rem values */
    font-size: 62.5%;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --leading-normal: 1.5;
    --leading-none: 1;
    --light-gray: #f6f6f6;
    --lighter-gray: #f9f9f9;
    --lightest-gray: #fafafa;
    --gray: #e3e3e3;
    --darker-gray: #e6e6e6;
    --dark-gray: #525252;
    --main-brand: #18a303;
    --green-0: #106802;
    --green-2: #43c330;
    --scale-00: 0.8rem;
    --scale-0: 1rem;
    --scale-1: 1.2rem;
    --scale-2: 1.4rem;
    --scale-3: 1.6rem;
    --scale-4: 1.8rem;
    --scale-5: 2rem;
    --scale-6: 2.4rem;
    --scale-7: 2.8rem;
    --scale-8: 3.2rem;
    --scale-9: 3.6rem;
    --scale-10: 4rem;
    --scale-11: 4.4rem;
    --scale-12: 4.8rem;
    --scale-13: 5.2rem;
    --scale-14: 5.6rem;
    --scale-15: 6rem;
    --scale-16: 6.4rem;
    --scale-17: 6.8rem;
    --scale-18: 7.2rem;
    --scale-19: 7.6rem;
    --scale-20: 8rem;
    --scale-24: 9.6rem;
    --scale-25: 10rem;
    --scale-37: 14.8rem;
    --scale-40: 16rem;
    --scale-48: 19.2rem;
    --scale-56: 22.4rem;
    --max-w-4xl: 896px;
    --max-w-5xl: 1024px;
    --max-w-6xl: 1152px;
    --max-w-xxs: 256px;
    --max-w-sm: 384px;
    --max-w-md: 448px;
    --max-w-lg: 512px;
    --max-w-xl: 576px;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-normal: 0;
}
@font-face {
    font-family: Lato;
    src: url("/?originalUrl=https%3A%2F%2Fwww.documentfoundation.org%2Ffonts%2FLato-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Lato;
    src: url("/?originalUrl=https%3A%2F%2Fwww.documentfoundation.org%2Ffonts%2FLato-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Lato;
    src: url("/?originalUrl=https%3A%2F%2Fwww.documentfoundation.org%2Ffonts%2FLato-Bold.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Lato;
    src: url("/?originalUrl=https%3A%2F%2Fwww.documentfoundation.org%2Ffonts%2FLato-BoldItalic.woff2") format("woff2");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}
html, body {
    height: 100%;
}
body {
    font-family: Lato, -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan", Taprom;
    font-size: 1.8rem;
    letter-spacing: .04rem;
    color: var(--dark-gray);
    /* background by SVGBackgrounds.com */
    background-image: url("/?originalUrl=https%3A%2F%2Fwww.documentfoundation.org%2Fmedia%2Fsubtle-prism.svg");
    background-size: cover;
    /* to keep footer always at the bottom */
    display: flex;
    flex-direction: column;
    line-height: var(--leading-normal); /* overwrites normalize.css:11 */
}
a {
    transition: all 320ms ease;
    cursor: pointer;
}
section {
    background-color: white;
}
.content {
    padding: var(--scale-7) 0;
}
address {
    font-style: normal;
}
section p a, section h3 a, section li a {
    color: #1c99e0;
}
section li a {
    word-break: break-word; /* Chrome doesn't wrap links by default */
}
.grid-wrapper {
    display: grid;
    grid-template-columns: [fullWidth-start] 20px
                           [col-start] repeat(12, minmax(auto, 85px))
                           [col-end] 20px [fullWidth-end];
}
.grid-wrapper > * {
    grid-column: col;
}
.full-width {
    display: grid;
    justify-content: center;
    grid-column: fullWidth;
}
.button {
    display: inline-block;
    background-color: var(--main-brand);
    padding: var(--scale-1) var(--scale-3);
    margin-inline-end: 0;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: 900;
    font-size: var(--scale-6);
    box-shadow: 0 0 6px rgba(34, 74, 22, 0.25);
    text-align: center;
}
.button a {
    text-decoration: none;
    color: #fff;
}
nav li, footer li {
    list-style: none;
}
nav ul, footer ul {
    padding: 0;
}
#nav-wrapper {
    background-color: white;
    border-block-end: 1px solid var(--gray);
}
.nav-main {
    display: grid;
    align-items: center;
    grid-template-columns: auto;
    grid-template-rows: auto auto;
}
.nav-main h2 {
    display: flex;
    justify-content: center;
}
.nav-main ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    padding: 0;
    margin: var(--scale-4) 0;
}
.nav-main .search-button,
.nav-main ul a,
.ft-donate-lang-social > p:first-child a {
    margin: var(--scale-00) var(--scale-1);
    padding-block-end: var(--scale-00);
    padding-block-start: var(--scale-00);
    white-space: nowrap;
    position: relative;
    /* don't grow larger than content */
    display: inline-block;
    color: var(--dark-gray);
    font-size: var(--scale-4);
    text-decoration: none;
    /* in modern browsers, outline radius follows border-radius */
    border-radius: 5px;
}
.nav-main .search-button {
    background: no-repeat url("/?originalUrl=https%3A%2F%2Fwww.documentfoundation.org%2Fmedia%2Fsearchicon.png");
    width: 30px;
    height: 30px;
    padding: 0;
}
.nav-main ul a:after {
    transition: all 320ms ease;
    transform: translateY(-10px);
    height: 1px;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    opacity: 0;
    display: block;
    margin: 0;
    content: "";
    background-color: var(--main-brand);
}
.nav-main ul a:not(.donate-button):hover {
    transition: all 320ms ease;
    color: var(--main-brand);
}
.nav-main ul a:hover:after {
    opacity: 1;
}
.nav-main .search-button:focus,
.nav-main ul a:not(.donate-button):focus {
    color: var(--main-brand);
    outline: 2px solid var(--main-brand);
}
.nav-main .search-button:active,
.nav-main ul a:active {
    outline: none;
}
.nav-main .donate-button {
    color: #fff;
    background-color: var(--main-brand);
    padding: var(--scale-1) var(--scale-3);
    margin-inline-end: 0;
    text-transform: uppercase;
}
.logo {
    display: block;
    width: 160px;
    height: auto;
}
.fastSearch {
    grid-row: 2;
    background-color: var(--lighter-gray);
    border-block-start: 1px solid var(--main-brand);
    border-block-end: 1px solid var(--gray);
}
.fastSearch .fullWidth-center {
    position: relative;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}
.fastSearch input {
    width: 100%;
    height:var(--scale-12);
    font-size: var(--scale-5);
    color: var(--dark-gray);
    font-weight: bold;
    border-radius: 3px 3px 0 0;
    border: none;
    outline: 0;
    text-align: start;
    text-indent: var(--scale-5);
    background-color: var(--lighter-gray);
    grid-column: 2;
}
.magnifying {
    grid-column: 1;
    background: no-repeat url("/?originalUrl=https%3A%2F%2Fwww.documentfoundation.org%2Fmedia%2Fsearchicon.png");
    width: 30px;
    height: 30px;
}
.close {
    font-size: var(--scale-5);
    grid-column: 3;
}
#searchResults li {
    list-style: none;
    margin-inline-start: 0;
    background-color: var(--lighter-gray);
    border-block-end: 1px solid var(--dark-gray);
}
#searchResults li .title {
    font-size: 1.1em;
    margin-block-end: var(--scale-0);
    display: inline-block;
}
#searchResults {
    display: inline-block;
    position: absolute;
    width: 320px;
    padding: 0;
    margin: 0;
    top:var(--scale-12);
    z-index: 100;
}
#searchResults a {
    text-decoration: none;
    padding: var(--scale-0);
    display: block;
    color: var(--dark-gray);
}
#searchResults a:hover {
    outline: 0;
    background-color: var(--dark-gray);
    color: #fff;
}
.content img {
    max-width: 100%;
}
.profiles img {
    max-width: 150px;
}
.two-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.values {
    max-width: 450px;
}
.group-heading ~ h3, .group-heading ~ h4 {
    margin: var(--scale-10) 0 0 0;
    /* prevent margin collapse */
    display: flex;
}
.content:last-of-type {
    /* to keep footer always at the bottom */
    flex: 1 0 auto;
}
.colophon {
    background-color: var(--light-gray);
    /* to keep footer always at the bottom */
    flex-shrink: 0;
}
.colophon a {
    color: var(--dark-gray);
    text-decoration: none;
}
.colophon a:hover {
    text-decoration: underline;
}
.colophon .fullWidth-center > h2 {
    margin: var(--scale-7) 0;
    /* using flex here is the cleanest way to avoid link hit area from
       growing in a weird way and not having unbalanced margins */
    display: flex;
}
.ft-main-item li {
    margin-block-end: var(--scale-00);
}
.ft-main-item li:last-child {
    margin-block-end: var(--scale-5);
}
.colophon h3 {
    margin-block-end: var(--scale-00);
    text-transform: none;
}
.ft-main-item ul {
    margin: 0;
}
.ft-donate-lang-social > p:first-child a {
    margin: var(--scale-7) 0 var(--scale-10) 0;
    padding: var(--scale-1) 0;
    width: 260px;
    text-align: center;
}
.sm-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--scale-5);
}
.sm-icon img {
    width: 25px;
    filter: invert(25%) sepia(0) saturate(1284%) hue-rotate(182deg) brightness(98%) contrast(69%);
    vertical-align: middle;
    margin-inline-end: 2px;
}
.ft-strip ul {
    padding: 0;
    display: flex;
    gap: 36px;
    flex-wrap: wrap;
    margin: 0;
}
.ft-strip {
    margin: var(--scale-5) 0;
}
.youtube-video-container {
    position: relative;
    overflow: hidden;
    max-width: 560px;
    border: 1px solid var(--gray);
    padding: var(--scale-5);
}
.youtube-video-container:has(iframe) {
    border: none;
    padding: 0;
}
form input, fieldset, textarea {
    max-width: 320px;
}
p > label {
    display: block;
    margin-block-end: var(--scale-00);
}
input[type="text"], input[type="email"], textarea, fieldset {
    width : 100%;
    border: 1px solid #333;
    box-sizing: border-box;
}
input[type="text"], input[type="email"], textarea {
    margin-block-end: var(--scale-00);
}
input[type="radio"], input[type="checkbox"] {
    margin: 0 var(--scale-00) var(--scale-00) 0;
}
input:invalid, textarea:invalid {
    box-shadow: 0 0 5px 1px red;
}
input:focus:invalid, textarea:focus:invalid {
    box-shadow: none;
}
input[type="checkbox"] ~ label {
    display: inline-block;
}
.hide {
    display: none;
}
.swap h3 {
    margin-block-start: var(--scale-10);
}
@supports (grid-template-columns: subgrid) {
    .full-width {
        grid-template-columns: subgrid;
        padding: 0;
    }
    .fullWidth-center {
        grid-column: col;
    }
}
@supports not (grid-template-columns: subgrid) {
    .fullWidth-center {
        grid-column: 2 / -2;
    }
    .colophon,
    .fastSearch {
        grid-template-columns: max(100vw);
    }
    .colophon > div,
    .fastSearch > div {
        margin: 0 var(--scale-12);
    }
}
@media (min-width:768px) {
    .grid-wrapper {
        column-gap: 20px;
    }
    .logo {
        width: 230px;
    }
    #searchResults {
        left: var(--scale-8);
    }
    /* the profiles would look neater with
       CSS Exclusions, but there is no support yet
       https://caniuse.com/css-exclusions */
    .profiles {
        display: grid;
        grid-template-columns: 150px auto;
        column-gap: 32px;
    }
}
@media (min-width:1024px) {
    .grid-wrapper {
        grid-template-columns: [fullWidth-start] 52px
                               [col-start] repeat(12, minmax(auto, 85px))
                               [col-end] 52px [fullWidth-end];
    }
    .colophon {
        display: grid;
    }
    .colophon .fullWidth-center {
        display: grid;
        grid-template-rows: auto auto auto;
        grid-template-columns: repeat(5, 1fr);
        column-gap: var(--scale-5);
    }
    .colophon .fullWidth-center > h2 {
        grid-row: 1;
        grid-column: 1 / span 2;
    }
    .ft-main-item {
        grid-row: 2;
    }
    .ft-donate-lang-social {
        grid-row: 1 / span 3;
        grid-column: 5;
    }
    .ft-strip {
        grid-row: 3;
        grid-column: 1 / span 4;
    }
    @supports not (grid-template-columns: subgrid) {
        .colophon > div,
        .fastSearch > div {
            margin: 0 var(--scale-25);
        }
    }
}
@media (min-width:1280px) {
    /* Content living in the center has a maximum width of
       1240px, consisting of 11 grid-gaps of 20px and 12 columns
       of max 85px.
       The minimum left/right margin for center content is 100px, consisting of 2 grid-gaps of 20px and 2 named grid lines of minimum 80px. */
    .grid-wrapper {
        grid-template-columns: [fullWidth-start] minmax(80px, 1fr)
                               [col-start] repeat(12, minmax(auto, 85px))
                               [col-end] minmax(80px, 1fr) [fullWidth-end];
    }
    .content {
        padding: var(--scale-7) var(--scale-40);
    }
    .nav-main ul a {
        margin-inline-start: var(--scale-3);
        margin-inline-end: var(--scale-3);
    }
    @supports not (grid-template-columns: subgrid) {
        .colophon,
        .fastSearch {
            grid-template-columns: max(1280px);
        }
    }
}
@media (min-width:1390px) {
    .nav-main {
        display: grid;
        align-items: center;
        grid-template-columns: auto auto;
        grid-template-rows: auto;
    }
    .nav-main h2 {
        display: flex;
        justify-content: normal;
    }
}