/**** Montserrat and Fraunces fonts from Google Fonts ****/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/**** CSS Variables, color palette from coolors.co  ****/
:root {
    --primary-font: "Montserrat", sans-serif;
    --secondary-font: "Fraunces", cursive;
    --primary-color: #000000; /* Black, Primary text color */
    --secondary-color: #2b2118ff; /* Bistree, Used for headlines, buttons and footer*/
    --primary-background-color: #a8763eff; /* Copper, dark background around main content */
    --secondary-background-color: #ece4b7ff; /* Vanilla, lighter background behind main content */
    --header-background-color: #6f1a07ff; /* Barn red, color for header */

    /* Overriding bootstrap accordion standard color for headings */
    --bs-primary-bg-subtle: #white;
    --bs-primary-text-emphasis: #2b2118ff; /* Bistree /*
}

/*** Global styles, applies to all pages ****/
body{
    background-color: var(--primary-background-color);
    color: var(--primary-color);
    font-family: var(--primary-font);
}

h1, h2, h3{
    margin-top: 15px;
    font-family: var(--secondary-font);
    color: var(--secondary-color);
}

/* Main padding used to protect against menu overlap and assure distance to footer*/
main{ 
    padding-top: 4rem;
    padding-bottom: 1.5rem;
}

/* Styling of Bootstrap rows */
.row
{
    margin-top: 1rem;
    background-color: var(--secondary-background-color);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.45);
    border-radius: 10px;
}

/* Used with nested rows to avoid borders/box shadows */
.hidden-border
{
    box-shadow:none;
}


/* Override Bootstrap menu defaults for increased contrast */
.nav-link
{
    color: #dddddd;
}

/* Override Bootstrap menu defaults for increased contrast */
#navbar .active{
    color: #ffffff;
    font-weight:600;
}

/* Override Bootstrap menu defaults for increased contrast */
.nav-link:hover{
    text-decoration-line: underline;
}

/* Set navbar background to same color as header */
#navbar{
    background-color: var(--header-background-color);
}

/* Footer */

footer{
    padding-top: 1rem;
    /*padding-bottom: 1rem; */
    background-color: var(--secondary-color);
    color: var(--secondary-background-color)
}

footer a{
    text-decoration: none;
    color: var(--secondary-background-color);
}

footer a:hover{
        color: white;
}

/**** Button styling, to replace Bootstrap styling ****/
/* Transition idea and code provided by mentor Spencer Barriball */

.btn{
    border: 1px solid var(--secondary-color);
    transition: transform 0.5s ease; 
}

.btn:hover{
    background-color: var(--secondary-color);
    color: white;
    transform: scale(1.2);
}

/**** Section styling, to account for margins and image size ****/

/* Section-text, to be used on columns containing text */
.section-text{
    margin-top: 20px;
    margin-bottom: 25px;
}

/* section-picture, to be used on img tags in columns */
.section-picture{
    width: 100%;
    margin-top: 25px;
    margin-bottom: 25px;
}

/* section-youtube, to be used on columns containging Youtube video */
.section-youtube{
    margin-top: 5px;
    margin-bottom: 25px;
}

/* Smaller margins used in contact form */
.section-contact{
    margin-top: 10px;
}

/**** Modules page ****/

/* Override bootstrap formatting to make sure white text is always visible */
.carousel-caption
{
    background-color: rgba(0,0,0,0.5);
}

/* Responsive Video Container */
/* Code provided by mentor Spencer Barriball and ChatGPT to solve issue with viewing size */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

/* Responsive Video Container */
/* Code provided by mentor Spencer Barriball and ChatGPT to solve issue with viewing size */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/**** Resources pages ***/

/* Set link/header in resources page to center, overriden with media query for md-size and above */
.link-header
{
    text-align: center;
}

/* Following classes are for overriding CSS for Accordion styling */

/* Add margin to bottom of accordion, for distance to footer */
.accordion{
    margin-bottom: 1rem;
}

/* Override normal h2 margin when used in accordion to place accordion-items next to each other*/
.accordion-header
{
    margin-top: 0;
}

/* Override normal row properties when used in accordion */
.accordion .row
{
    margin-top: 1rem;
    background-color: white;
    box-shadow:none;
    border-radius:0%;
}

/**** Contact page ****/

/* Increase contrast for visual clarity */
.about-link{
    color: darkblue;
}

.about-link:hover{
    font-weight: bold;
}

.about-link:visited{
    color: darkblue;
}

/* Media querys */

/*Tablets or larger, equals Bootstrap medium */
@media (min-width: 768px) {

    /* Adjust link headline used in accordion to left when used in multiple columns */
    .link-header{
        text-align: left;
    }
    
}