/* Running a style reset in the beginning to ensure that no browser default styling is applied */
/* http://meyerweb.com/eric/tools/css/reset/ 
*  v2.0 | 20110126
*  License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Style reset end */



/* -------------------STYLING START------------------- */
body {
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    margin: 0;
    padding: 0;
    background-color: #f4f9ff;  /* NTNU-blue with 96% brightness */
    position: relative;
}

main {
    max-width: 70rem; /* 1120px */
    min-width: 20rem; /* 320px as minimum to ensure all phone sizes are covered */
    /*align-self: center;*/
    min-height: 100vh;
    overflow: hidden;
    margin: auto;
    display: flex;
    flex-direction: column;
}

#main-content-wrapper {
    flex: 1 1 95%;
    justify-content: center;
    /* adding 1.25rem = 20px padding between the nav/footer and page content */
    margin-top: 4.75rem; /* space for navbar */
    margin-bottom: 11.25rem; /* space for footer */
}

/* page wrapper used inside all the separate files, ensures that the page width doesn't exceed the width of the screen (down to min width 320px) */
.page-wrapper {
    max-width: 95%;
    margin: auto;
}

/* Restriction on paragraph width to ensure readability */
.page-wrapper p {
    max-width: 800px;
}

/* Defining text sizes based on a unit of 8px, including half sizes, to ensure font size contrast */
/* Default font size 16px used for normal text for usability */
h1, h2, h3, h4 {
    font-weight: 600;
    color: #212121;
    text-align: left;
}

/* Base size headers: */
h1 {line-height: 2;
    font-size: 32px;}
h2 {font-size: 24px;}
h3 {font-size: 20px;}

/* defining main font colour and size */
main p {
    color: #212121; 
    font-size: 16px;
    margin-bottom: 1rem;
}

main a {
    color: #212121; 
    font-size: 16px;
    cursor: pointer;
}

main li, main label {
    color: #212121; 
    font-size: 16px;
}

/* small font, should NOT be used on content, currently only used to describe the purpose of the Disable Map Embed checkbox, 
to create a visual contrast that separates it from the content of the page */
.small {font-size: 12px;}

.hidden {display: none !important;}
.unimportant-hidden {display: none;}

/* fire engine red as a "warning" colour as there are no red NTNU colours */
.red {background-color: #C1292E;}
.red:hover {background-color: #711c1f;}
.NTNU-blue {color: #00509e;}
.NTNU-blue:hover {color: #002C56;}

/* colour filter to change the colour of black svgs to (almost) NTNU blue */
.filter-ntnu-blue {
    filter: invert(12%) sepia(60%) saturate(7196%) hue-rotate(198deg) brightness(93%) contrast(105%);
}

/* -------------------NAVBAR------------------- */
nav {
    background-color: #253a55;
    color: white;
    height: 3.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: absolute;
    z-index: 10 !important; 
    min-width: 320px;
}

/* ensures some space between the edge of the view and the outer elements of the navbar */
#navbar-wrapper {
    display: flex;
    justify-content: space-between;
    width: 95%;    
}

/* Links for the buttons in navbar */
nav a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    padding: 10px 30px;
    margin: auto 2px;
    font-size: 16px;
}

.navbar-left {
    justify-content: left;
    align-content: center;
}

#todo-nav {
    border: 2px solid #6096d0;
    border-radius: 10px;
}

/* MAIN LOGO */
#navbar-logo img {
    height: 2rem;
    width: auto;
    display: block;
    padding-right: 30px;
}

ul.navbar-links {
    display: flex;
    justify-content: left;
    align-items: center;
    text-wrap: nowrap;
}

li.navbar-hover a:hover {
    background-color: #1c2c40; 
    border-radius: 10px;
    transition: background-color 0.3s ease; 
}

/* content changes whether the user is logged in or not. Login+Logout button + welcome message */
ul.navbar-user{
    display: flex;
    float: right;
    align-items: center;

}

#navbar-greeting {
    text-decoration: underline;
    word-wrap: break-word;
}

#nav-menu {
    align-self: center;
    margin-top: 5px;
    cursor: pointer;
}


/* -------------------FOOTER------------------- */
footer {
    background-color: #253a55;
    text-align: left;
    color: white;
    position: absolute;
    justify-content: center;
    align-content: center;
    bottom: 0;
    left: 0; 
    width: 100%;
    height: 9rem; 
    min-width: 320px; 
}

/* Three columns/lists in footer */
#footer-lists {
    margin: 0 auto;
    justify-content: center;
    width: 95%;
    display: flex;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap;
}

footer a, footer h3, footer li {
    color: white;
}

footer a, footer li {
    line-height: 1.5;
    list-style: none;
    font-size: 16px;
}

footer h3 {
    line-height: 2;
}


/* -------------------MAIN BUTTON-------------------*/

button { 
    background-color: #6096d0; /* NTNU support colour 2. Change 17.07.2025. Sufficient contrast with main color, but better than the orange the students chose */
    color: white;
    font-size: 16px;
    padding: 10px 20px;
    border-radius: 50px;
    border: none;
    text-align: center;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

button:hover {
    background-color: #3e628a; /* darker blue-grey. Changed from dark orange 17.07.25 */
}


/* -------------------HOME------------------- */
/* Styling for the Home/landing page, content divided in two columns */
#home-wrap {
    display: grid;
    grid-template-columns: 45% 53%;
    gap: 20px;
}

/* screenshot of the office location on mazemap */
#home-office img {
    width:95%;
    height: auto;
    border: 1px solid #00509e;
    border-radius: 30px;
}

/* a grid with buttons to login and create a user, 
as well as text describing why one might want to create a user/that events require you to be logged in */
#home-login {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
}

/* information boxes with buttons to the main pages of the web app */
.home-pages-info button {
    width:100%;
    font-size: 20px;
    font-weight: 500;
    margin: 5px auto;
    background-color: #3e628a;
}

.home-pages-info button:hover {
    background-color: #253a55;
    text-decoration: underline;
} 

.home-pages-info section {
    border: 1px solid #00509e;
    border-radius: 30px;
    background-color: white;
    padding: 5px 10px;
    margin: 10px auto;
}

.home-pages-info p {
    padding: 0 10px;
}

.home-pages-info a {
    text-decoration: none;
}

.home-pages-info section:hover {
    border: 2px solid #00509e;
    margin: 9px -1px;
}

#home-office img:hover {
    border: 2px solid #00509e;
}

#home-todo {
    border: 2px solid #6096d0;
}


/* ---LOGIN--- */

.form-group input, input[type="text"], input[type="password"] {
    border-radius: 20px; /* Makes the input fields rounder */
    padding: 10px; /* Adds padding for better appearance */
    border: 1px solid #ccc; /* Adds a border */
    width: 100%; /* Optional: Makes the input fields responsive */
    box-sizing: border-box; /* Ensures padding doesn't affect width */
}

/* selected input field will be outlined in blue */
.form-group input:focus, input[type="text"]:focus, input[type="password"]:focus {
    outline: solid 1px #00509e; 
}

/* container for all forms: login, create user, change password, forgot password++ */
.form-container {
    text-align: center;
    background: white;
    padding: 30px;
    border-radius: 10px;
    border: 1px solid #ccc;
    width: 300px;
    margin: 30px auto; /* Centers the login box horizontally and adds spacing below the navbar */
}

/* form-group = label + input */
.form-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    margin-bottom: 15px;
    gap: 15px;
}

/* Error messages, to override the default in Django */
.error-messages {
    color: red;
    text-align: center;
    padding: 0;
}

/* Responsive design */
@media (max-width: 768px) {
    #create-form {
        width: 300px;
    }
}

.login-links {
    margin: 20px 0;
}

#request-access {
    width: 500px;
    text-align: left;
}
#request-access form {
    text-align:center;
    justify-self:center;
}

/* feedback message that lets the user know whether they have successfully logged in, why not, etc */
.message-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.message {
    font-size: 16px;
    font-weight: 500;
    padding: 10px;
    border-radius: 5px;
    background-color: #ffe6e6;
    width: 100%;
    max-width: 400px;
}

#login-error {
    color: red;
    border: 1px solid red;
}

#login-success {
    color: green; 
    border: 1px solid green; 
}


/* -------------------PROFILE------------------- */
/* profile page in two columns */
.profile-page {
    text-align: justify;
    display: flex;
    flex-wrap: wrap;
    margin: auto 10px;
    width: 100%;
}

/* the two columns of the profile page, user information and "your events" */
#profile-info, #profile-events {
    justify-self: left;
    flex: 1 1 45%;
    padding: 0 2.5%;
}

.profile-page p {
    max-width: 600px;
}

/* the user information registered on the page. 
May need to adjust the column widths */
.profile-list {
    display: grid;
    grid-template-columns: 150px 300px;
    gap:0.5rem;
    color: #212121;
    overflow-wrap: break-word; /* to handle long names */
}

/* buttons for password change and account deletion */
.profile-button {
    padding-top: 1rem;
    margin-left: -10px;
    padding-right: 10px;
}

/* list of all events the user is signed up for our auto-signed up to by admin */
.event-list {
    display: flex;
    justify-content: left;
    flex-direction: column;
}

.event-list li:hover {
    text-decoration: underline;
    color: #002C56;
}

.event-list a, .event-list p, .event-list li {
    text-decoration: none;
    line-height: 2;
}

/* The Disable Map Embed Checkbox */
.event-list label {
    padding-bottom: 10px;
}


/* -------------------ERASMUS---INFO------------------- */
/* For pages with a single list */
.info-list {
    text-align: left;
    margin-top: 1rem;
}

.info-category, #erasmus-content {
    max-width: 800px;
}

.info-category h2 {
    line-height: 2;
    margin-top: 10px;
}

.step, .erasmus-box {
    margin-bottom: 0.5rem;
    border: 1px solid #00509e;
    border-radius: 10px;
    overflow: hidden;
}

/* the clickable blue header that opens the information box */
.step-header, .erasmus-box > summary {
    background-color: #253a55;
    border-radius: 10px;
    padding: 1rem;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-size: 20px;
}

.step-header h3 {
    color: white;
}

.step-header:hover, .erasmus-box > summary:hover {
    background-color: #1c2c40;
}

.step-header .toggle-icon {
    font-size: 1.5rem;
    margin-left: 10px;
}

.infopage-content, .erasmus-box > *:not(summary) {
    display: block;
    padding: 1rem 2rem;
    justify-content: left;
    background: #ffffff;
    border-radius: 10px;
}

.erasmus-box > *:not(summary) {
    margin-bottom: 0;
}

/* links in the infoboxes */
.info-links {
    display: flex;
    justify-content: left;
    align-items: center;
    text-align: left;
    padding: 0 0.3rem 0 0;
    text-decoration: underline;
    color: #00509e;
    gap: 1rem;
}

#erasmus-content a {color: #253a55;}
#erasmus-content a:hover {color: #1c2c40;}

/* icons added for the info-links */
.info-links img {
    height: 100%;
    width: auto;
    transition: transform 0.3s ease;
}

#all-links a, .info-links p {
    text-decoration: none;
    line-height: 2;
    padding: 0 0.5rem;
    text-wrap: nowrap;
}

.info-links p {
    margin-bottom: 0;
}



/* -------------------TODO---GETTING STARTED---ARRIVAL------------------- */
#todo-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: start;
}

/* Moves the list "New Arrivals in Norway" to appear before "New Arrivals at NTNU".
Orders it chronologically. Remove these two lines to revert the order and have the NTNU-list appear first. */
/* #todo-content :nth-child(1) {order: 2;}
#todo-content :nth-child(2) {order: 1;} */

/* Custom “box” container from {box} */
.custom-box {
    border-radius: 15px;
    padding: 2rem;
    margin: 1rem 0;
    cursor: pointer;
}

/* Collapsible details/panels */
.todo-box {
    border: 1px solid #253a55;
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.todo-summary {
    background: #253a55;
    border-radius: 10px;;
    color: white;
    padding: 0.75rem 1rem;
    font-weight: 500;
    cursor: pointer;
}
.todo-summary:hover {
    background: #1c2c40;
}

.todo-box img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.todo-box > :not(summary) {
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin: 0.3rem;
}

.todo-static {
    background: #253a55;
    color: #fff;
    padding: 0.75rem 1rem;
    font-weight: 500;
    border-radius: 10px;
    margin-bottom: 0.75rem;
}
/* center images in summary */
.todo-summary img {
    display: block;
    margin: 0 auto;
}

.todo-list p {
    margin-bottom: 1rem;
}

/* hide default triangle from todo and erasmus box*/
.todo-summary::after,
.todo-summary::-webkit-details-marker,
.todo-summary::marker, 
.erasmus-box > summary::after,
.erasmus-box > summary::-webkit-details-marker,
.erasmus-box > summary::marker {
    content: none !important;
    display: none !important;
}

/* This is how we originnally styled the substeps of TODO, before changing it to markdown in the backend. 
We have left it here in case the next people to work on this wish to use it */
/*
.substeps {
    margin: 0;
    padding: 1rem;
    background-color: #e6e6e6;
}

.substep {
    background-color: white;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: background-color 0.3s ease;
}

.substep:hover {
    background-color: #f0f0f0;
}

.substep-content {
    text-align: left;
}

.substep-content p {
    margin: 0.2rem 0;
    font-size: 0.9rem;
}*/


/* -------------------EVENT------------------- */

/* CSS for the event list */
#events-container {
    list-style-type: none;
    padding: 0;
    padding-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: left;
}

.checkbox-label {
    cursor: pointer;
}

/* CSS for the event cards */
.event {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 10px;
    flex: 1 1 30%; 
    max-width: 30%;
    text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    background-color: white;
}

/* CSS for the event card image */
.event-image {
    width: 100%; 
    height: 200px; 
    object-fit: cover; 
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: block; 
    margin: 0; 
    padding: 0;
}

/* CSS for the line separating the event image and name */ 
.event-divider {
    border: 0;
    border-top: 1px solid #00509e; 
    background: none;
    margin: 0;
}

/* CSS for the event card name */
.event-name {
    text-align: center;
    font-weight: 500;
    margin: 10px auto;
}

/* CSS for the image on the modal */ 
.modal-image {
    width: 90%;
    max-height: 250px; 
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

/* CSS for the modal body */
.modal-body {
    display: flex;
    width: 100%;
    max-width: 95%;
    justify-content: center;
}

/* CSS for both sides in the modal body */
.modal-left, .modal-right {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    text-align: left;
    padding: 2rem;
}

/* CSS for the right side of the modal body */
section.modal-right {
    flex: 1 1 60%;
}

/* CSS for the modal event description */
#modal-description {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal; 
    max-width: 95%; 
}

/* CSS for the left side of the modal body */
.modal-left {
    flex: 1 1 40%;
    border-right: 2px solid #ccc;
    display: flex;
    flex-direction: column;
    justify-self: left;
    justify-content: center; 
    position: relative;
}

.modal-left li {
    display: flex;
    justify-content: left;
    align-content: center;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* CSS for the content on the left side of the event modal */
.modal-left p, .modal-left a {
    font-size: 20px; 
    max-width: 95%; 
    padding-bottom: 0;
    margin-top: 10px;
    line-height: 1;
}

.modal-left img {
    height: 30px;
    width: auto;
    justify-self: auto;
    align-self: center;
    padding-right: 0.3rem;
}

/* CSS for the mazemap link in the event modal */
#modal-mazemap-link {
    text-decoration: none;
    color: #007bff;
    transition: color 0.2s;                          
    align-self: center;
    padding-bottom: 10px;
}
  
/* CSS for the mazemap link in the event modal when hovered over */
#modal-mazemap-link:hover {
    color: #0056b3;
    text-decoration: underline;          
}

#remaining-spots {
    align-self: center;
}

/* CSS for the embedded mazemap iframe */
#modal-mazemap-iframe {
    width: 75%;
    margin: 0 auto;
    padding-bottom: 30px;
    border-radius: 10px;
    height: 80vh;
}

/* CSS for modal overlay */
#modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* CSS for the event signup button */
#event-signup {
    padding: 1rem 1.5rem;
    margin: 10px;
}    

/* CSS for the modal box */
#event-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 10px;
    width: 90%;
    height: 80%;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
}

/* CSS for the content in the modal box */
.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 10px;
}

/* CSS for the modal box name */
#modal-name {
    float: left;
    font-weight: 500;
}

/* CSS for the modal close button */
#close-modal {
    position: sticky;
    color: gray;
    top: 15px;
    right: 0;
    margin-right: -10px;
    margin-top: -10px;
    font-size: 24px;
    align-self: flex-end;
    background: none;
    cursor: pointer;
    z-index: 1001;
}

/* CSS for blur when modal is open */
.modal-open #page-content {
    filter: blur(5px);
}

/* CSS to disable scrolling when modal is open */
.no-scroll {
    overflow: hidden;
}

/* modal window for confirmation messages */
.modal {
    position: fixed; 
    top: 40%; 
    bottom: 0; 
    left: 37%; 
    right: 0;
    width: 30%;
    height: 30%;
    max-width: 350px;
    max-height: 150px;
    padding: 20px;
    z-index: 2000;
    border: 1px solid #ccc;
    background: white;
    border-radius: 10px;
    align-content: center;
    justify-content: center;
}

.modal button {
    margin: auto 20px;
}



/* Responsive navbar */
/* Hide the Welcome message */
@media (max-width: 1152px) {
    .nav-hide {
        display: none !important;
    }
    #main-content-wrapper {
        margin-bottom: 20.25rem; /* space for footer */
    }
    footer {
        height: 18rem; 
    }
    #footer-lists {
        justify-content: left;
        gap: 30px;
    }
}

/* Styling for navbar dropdown */
@media (max-width: 960px) {
    /* Hide Erasmus+, Events, Useful Info and Profile */
    .navbar-links li:not(:first-child, :nth-child(2)), .navbar-user li:not(:last-child) {
        display: none !important;
    }

    /* show the hamburger */
    #nav-menu { display: block !important; }
  
    /* generic link style */
    #mobile-menu li.mobile-item a, #mobile-menu li.mobile-todo a {
      display: block;
      padding: 12px 20px;
      color: white;
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,0.2);
      font-weight: 500;
    }
    
    #mobile-menu li {
        display: block !important;
        margin: 5px auto;
    }

    /* hides the menu svg that also ended up at the end of the list/dropdown */
    #mobile-menu li img, #mobile-menu li.mobile-todo a {
        display: none !important;
    }     
}

@media (min-width: 961px) {
    #nav-menu,
    #mobile-menu {
      display: none !important;
    }
}

/* footer */
@media (max-width:614px) {
    #main-content-wrapper {
        margin-bottom: 29.25rem; 
    }
    footer {
        height: 27rem;
    }
    #footer-lists {
        gap: 20px;
    }
}

/* footer */
@media (max-width:520px) {
    /* hide Getting Started from horisontal nav and display in dropdown */
    #nav-start {
        display: none !important;
    }
    #mobile-menu li.mobile-todo a {
        display: block !important;
    }
    /* "Getting Started" pill button */
    #mobile-menu li.mobile-todo a {
        border: 2px solid #00509e;
        border-radius: 10px;
    }
    #mobile-menu li.mobile-item a:hover, #mobile-menu li.mobile-todo a:hover {
        background: #253a55;
    }
    #main-content-wrapper {
        margin-bottom: 32.25rem; 
    }
    footer {
        height: 30rem;
    }
}

/* -------------------Responsive page content------------------- */
@media (max-width: 768px) {
    /* make the content of Home a single column */
    #home-wrap {
        margin:auto;
        grid-template-columns: 95%;
    }

    .profile-page {
        max-width: 90%;
        margin: 0 auto;
        gap: 2rem;
    }

    /* Change todo to only one column on mobile */
    #todo-content {
        grid-template-columns: 1fr;
    }

    /* CSS for event cards on phone */
    .event {
        flex: 1 1 100%; 
        max-width: 100%;
    }

    /* CSS for the modal body on phone */
    .modal-body {
        flex-direction: column;
        text-align: center;
    }

    /* CSS for the right and left side content in the event modal body on phone */
    .modal-left, .modal-right {
        max-width: 100%;
        min-width: 100%;
        border-right: none;
    }
}
