/* Define variables */
:root {
    /* Colors */
    --background-color-dark: #111111;
    --topbar-color-dark: #000000;
    --topbar-color-selected-dark: #222222;
    --background-color-light: #ffffff;
    --topbar-color-light: #dddddd;
    --topbar-color-selected-light: #bbbbbb;
    
    --text-color-light: #f2ebe6;
    --text-color-dark: #262626;
    --text-color-mid: #86817d;
    --text-color-accent: #B55C3C;
    --text-color-accent-highlighted: #EC987A;

    /* Font Sizes */
    --content-text-size: 12px;
    --topbar-header-text-size: 28px;
    --topbar-element-text-size: 20px;

    /* Alignment */
    --topbar-height: 64px;
    --safezone-width: clamp(1rem, 10vw, 256px);
    --content-div-min-size: 300px;
    --gallery-image-min-size: 240px;
    --gallery-image-max-size: 640px;

    /* Animations */
    --transition-speed: 0.25s;
}

:root.dark-theme {
    color-scheme: dark;
}

:root.light-theme {
    color-scheme: light;
}

/* GENERAL */

/* Main document properties */
html {
    /* Set up scaling so that background properly tiles to bottom of page */
    min-height: 100%;
    position: relative;
}

/* Document content properties */
body {
    background-color: light-dark(var(--background-color-light), var(--background-color-dark));

    font-family: "Rubik", sans-serif;

    transition: background-color var(--transition-speed) ease;
}

/* Paragraph line spacing */
p {
    line-height: 1.5;
}

/* List line spacing */
li {
    line-height: 1.5;
}

/* Hyperlinks */
a:not(.navbar-logo-link, .navbar-navlink) {
    color: var(--text-color-accent);
    text-decoration: none;
    border-bottom: dotted 3px var(--text-color-accent);

    transition: var(--transition-speed);
}

a:hover:not(.navbar-logo-link, .navbar-navlink) {
    color: var(--text-color-accent-highlighted);
    border-bottom: dotted 3px var(--text-color-accent-highlighted);
    font-weight: 800;

    transition: var(--transition-speed);
}

/* Page Content container */
.page-container {
    padding-top: calc(var(--topbar-height) + 32px);
    padding-left: var(--safezone-width);
    padding-right: var(--safezone-width);
    padding-bottom: 128px;

    /*min-height: calc(100vh - 128px);*/

    /* text color */
    color: light-dark(var(--text-color-dark), var(--text-color-light));
}

/* Page Content (excl footer) 
.page-content {
    padding-bottom: 96px;
}
    */

/* Content flex container (responsive positioning) */
.content-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Content flex element (responsive positioning) */
.content-flex-element {
    flex: auto;
    flex-basis: var(--content-div-min-size);
}

/* Footer */
.footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    text-align: center;
    color: var(--text-color-mid)
}

/* List element */
.list-element {
    display: flex;
    gap: 8px;
}

/* List element icons */
.list-element img {
    width: 24px;
    height: 24px;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
}

/* Description texts */
.description {
    color: var(--text-color-mid);
    margin: 0px 32px;
}

.description.noindent {
    margin: 0px 0px;
}

/* Photo Galleries */
.gallery {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

/* Gallery Elements */
.gallery-element {
    min-width: var(--gallery-image-min-size);
    max-width: var(--gallery-image-max-size);

    box-shadow: 0px 0px 12px black;
}

/* Center-aligned text */
.center {
    text-align: center;
}

.center-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

/* Pillarboxed element */
.narrow {
    max-width: 60%;
}

#page-content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 200ms ease, transform 200ms ease;
}

#page-content.fade-out {
    opacity: 0;
    transform: translateY(100px);
}

#page-content.fade-in-init {
    opacity: 0;
    transform: translateY(-100px);
}

.themeable-svg {
    fill: light-dark(var(--text-color-dark), var(--text-color-light));
    transition: fill var(--transition-speed) ease;
}

.hr-gap {
    height: 1em;
    visibility: hidden;
}

.badges-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
}

.badges-row a {
    border-bottom: none;
}

.badges-row img {
    width: auto;
    height: 64px;
    transition: height var(--transition-speed) ease;
}

.badges-row img:hover {
    height: 72px;
}

.badge-fdroid {
    margin: -16px;
    height: 96px !important ;
}

.badge-fdroid:hover {
    height: 104px !important;
}

.news-banner {
    height: 384px;
}

.news-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-photo {
    border-style: solid;
    border-color: light-dark(var(--text-color-dark), var(--text-color-light));
    padding: 16px;

    width: min(512px, calc(100% - var(--safezone-width))); /* weird hacky pillarboxing fix */
    margin: 32px auto;
}

.news-photo img {
    width: 100%;
    height: auto;
}

#newsfeed-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

.newslist-brief-link {
    flex: 1 1 256px;

    padding: 8px;
    outline-style: solid;
    outline-width: 2px;
    border-bottom: none !important;
}

.newslist-brief {
    display: flex;
    flex-direction: column;
}

.newslist-brief img {
    height: 256px;
    object-fit: cover;
}

.image-text-flex {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: center;
    gap: 32px;

    font-size: 1.5em;
}

.image-text-flex img {
    border-style: solid;
    border-color: light-dark(var(--text-color-dark), var(--text-color-light));
    padding: 16px;

    width: 384px;
}

@media (max-width: 700px) {
    .image-text-flex img {
        padding: 8px;
        width: 35vw;
    }
}

/* NAVBAR */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    width: auto;
    height: 64px;
    padding: 0 16px;
    background-color: light-dark(var(--topbar-color-light), var(--topbar-color-dark));
    color: light-dark(var(--text-color-dark), var(--text-color-light));
}

/* Show desktop navbar by default */
#navbar-mobile {
    display: none;
}

/* Swap navbar on mobile */
@media (max-width: 700px) {
  #navbar-desktop {
    display: none;
  }

  #navbar-mobile {
    display: grid;
  }
}

.navbar-logo-link {
    display: flex;
    align-items: center;
}

.navbar-logo {
    height: 64px;
    width: auto;

    filter: drop-shadow(1px 1px 0 black)
            drop-shadow(1px -1px 0 black) 
            drop-shadow(-1px -1px 0 black) 
            drop-shadow(-1px 1px 0 black);
}

.navbar-nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar-navlist {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-navlink {
    text-decoration: none;
    border-bottom: none;
    color: light-dark(var(--text-color-dark), var(--text-color-light));
    font-weight: 450;
    letter-spacing: 0.05em;
    padding: 4px 0;
}

.navbar-navlink.active {
    color: var(--text-color-accent);
}

.navbar-navlink:hover {
    color: var(--text-color-accent-highlighted);
    border-bottom: none;
    font-weight: 450;
}

#navbar-dropdown-menu {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    right: 0;
    z-index: 9998;
    padding: 16px 0;
    width: 100vw;
    background-color: light-dark(var(--topbar-color-light), var(--topbar-color-dark));

    transition: transform var(--transition-speed) ease;
    transform-origin: top;
    transform: scaleY(0);
    pointer-events: none;
}

#navbar-dropdown-menu.open {
    transform: scaleY(1);
    pointer-events: auto;
}

.navbar-nav-mobile {
    text-align: center;
}

.navbar-navlist-mobile {
    display: flex;
    flex-direction: column;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-logo-link:hover {
    background-color: light-dark(var(--topbar-color-selected-light), var(--topbar-color-selected-dark));
    transition: var(--transition-speed);
}

.navbar-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.navbar-left {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

.navbar-right-button {
    border: none;
    background: none;
    width: 36px;
    height: 36px;
}

.navbar-right-button svg {
    width: 100%;
    height: 100%;
    display: block;
}

.navbar-right-button:hover svg {
    fill: var(--text-color-accent-highlighted);
}

.navbar-right-button:active svg {
    fill: var(--text-color-accent);
}