/*!
 * Based on:
 * Bootstrap  v5.3.8 (https://getbootstrap.com/)
 * Copyright 2011-2025 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

/**
 * Copyright (C) 2020  The Software Heritage developers
 * See the AUTHORS file at the top-level directory of this distribution
 * License: GNU Affero General Public License version 3, or any later version
 * See top-level LICENSE file for more information
 */

/* This file contains extra CSS, that isn't needed for the application to be
 * usable, but it makes it more welcoming, and reuses a style similar to
 * CodeMeta's main website.
 */

:root {
    color-scheme: light dark;
}

/*!
 *  Make the header colour change on-scroll smoother
 */

#sectionsNav {
    transition: all 0.25s;
}

/*!
 * overide black border on responsive nav toggler
 */

.navbar {
    --bs-navbar-toggler-focus-width: none;
}

/*!
 * Dark mode toggler button
 */

li.dark-light-toggler {
    height: 50px;
}

.dark-light-toggler .form-check-label {
    padding: 0px;
    margin-top: 10px;
    margin-left: 25px;
    font-size: 1.25em;
}


body {
    margin: 0;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);

}

header {
    background-image:
        /* a purple filter on top of the photo */
        linear-gradient(135deg, rgba(1, 47, 142, 0.88) 0%, rgba(25, 46, 185, 0.45) 100%),
        /* photo of pyramids (though with the smaller margins on this page,
         * only the sky is seen on most laptops and desktops */
        url('https://codemeta.github.io/img/pyramids.jpg');
    background-size: cover;

    /* half of the header height on https://codemeta.github.io/ */
    min-height: 190px; 

    /* Let main overflow on the header */
    z-index: 1;
}

header h1 {
    color: white;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: 300;
    font-size: 3.3125rem;
    text-align: center;
}

main {
    z-index: 2;

    /* Same properties as .main on https://codemeta.github.io/ */
    border-radius: 6px;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.navbar {
    background-color: var(--bs-body-bg) !important;
    color: rgba(var(--bs-emphasis-color-rgb), 0.8) !important;
}

.field-description {
    color: var(--bs-secondary-text-emphasis);
}

label {
    color: var(--bs-body-color);
}

legend {
    width: auto;
    float: none;
    padding: 0px 5px;
}

fieldset {
    margin: 5px;
    padding: 10px;
    border: 1px solid var(--bs-secondary-text-emphasis);
}

pre, input, textarea {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-secondary-text-emphasis) !important;
    border-radius: 4px;
    color: var(--bs-body-color);
    padding: 5px;
}

@media screen and (min-width: 600px) {
    header {
        /* Height+padding = half of the header height on https://codemeta.github.io/ */
        min-height: 200px;
        padding-top: 60px;
    }

    main {
        padding: 10px;
        
        /* Half of margins of .main on https://codemeta.github.io/ */
        margin: -30px 15px 0px;
    }
}

@media screen and (max-width: 599px) {
    header {
        padding-top: 10px;
    }

    header h1 {
        margin-top: 0;
    }

    main {
        padding: 5px;
        margin: -30px 7px 0px;
    }
}

/*!
 * Accessibility tweaks
 */

:focus-visible, .dark-light-toggler:focus-within {
  outline: 2px dashed var(--bs-info) !important;
  border-radius: 2px;
}

.main a {
  color: var(--bs-primary);
}

.main a, #sectionsNav a:hover, #footer-nav a:hover {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

[data-bs-theme=dark] .main a {
  color: var(--bs-primary-text-emphasis);
}

.main a:hover {
  text-decoration: none !important;
}

code{
  color: var(--bs-code-color);
}

#skip-to-content{
  color: var(--bs-body-color);
  position: absolute;
  top: 0px;
  right: 0px;
  padding-right: 5px;
  transform: translateY(-100%);
  background: var(--bs-secondary-bg-subtle);
  border-radius: 0 0 0 1em;
}

@media only screen and (min-width: 992px) {

	#skip-to-content:focus{
		transform: translateY(0%);
	}

}

@media only screen and (max-width: 991px) {

    .navbar-translate {
        width: auto !important;
    }

    #skip-to-content {
      top: -51px;
      right: -235px;
    }

	#skip-to-content{
		transform: translateY(-177%);
		padding-right: 0px;
	}

	#skip-to-content:focus{
		top: 20px;
        right: -100px;
	}

}