@import "https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Responsive Text and Spacing Breakpoints */
html {
  font-size: 16px
}
section {
  padding-left: 5%;
  padding-right: 5%;
  margin: 0;
}
.navbar .missa-logo {
  max-height: none;
  max-width: none;
  aspect-ratio: 1/1;
  width: 25px;
  height: 25px;
}
.slide-size {
  height: 850px
}
.standalone-img {
  max-height: 500px; 
  object-fit: cover; 
  max-width: 600px;
  width: 100%;
}
.banner-margin {
  margin-bottom: 4rem;
}
.footer-left {
  align-items: start;
}
.footer-right {
  align-items: end;
  flex-direction: column-reverse;
}
.footer-bottom {
  justify-content: space-between;
}
@media only screen and (max-width: 1407px) {
  /* Widescreen Breakpoint */
  /* .slide-size {
    height: 825px
  } */
}
@media only screen and (max-width: 1215px) {
  /* Desktop Breakpoint */
  .slide-size {
    height: 750px
  }  
}
@media only screen and (max-width: 1023px) {
  /* Tablet Breakpoint */
  html {
    font-size: 14px
  }
  /* Navbar Menu */
  .navbar-item, .navbar-dropdown, .navbar-item .buttons .button {
    font-size: 2rem;
  }
  .navbar-menu {
    height: 100vh;
  }
  .navbar .missa-logo {
    width: 30px;
    height: 30px;
  }
  p {
    text-align: justify;
  }
  .slide-size {
    height: 750px;
  }
  .standalone-img {
    max-height: 400px;
  }
  .footer-bottom {
    flex-direction: column;
  }
  .footer-bottom .level {
    margin: auto;
  }
}
@media only screen and (max-width: 768px) {
  /* Mobile Breakpoint */
  html {
    font-size: 12px
  }
  section {
    padding-left: 0%;
    padding-right: 0%;
  }
  .navbar .missa-logo {
    width: 35px;
    height: 35px;
  }
  .is-flex-column-mobile {
    display: flex;
    flex-direction: column;
  }
  .slide-size {
    height: 600px;
  }
  .standalone-img {
    max-height: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .banner-margin {
    margin-bottom: 0rem;
  }
  .footer-left {
    align-items: center;
  }
  .footer-right {
    align-items: center;
    flex-direction: column;
  }
}

/* Light Mode */
/* Bulma Variables */
:root {
  --bulma-primary-h: 0deg;
  --bulma-primary-s: 100%;
  --bulma-primary-l: 72.75%;
  --bulma-link-h: 0deg;
  --bulma-link-s: 60%;
  --bulma-link-l: 54%;
  --bulma-info-h: 0deg;
  --bulma-info-s: 85%;
  --bulma-info-l: 68%;
  --bulma-success-h: 175deg;
  --bulma-success-s: 54%;
  --bulma-success-l: 75%;
  --bulma-warning-h: 38deg;
  --bulma-warning-s: 99%;
  --bulma-warning-l: 51%;
  --bulma-danger-h: 0deg;
  --bulma-danger-s: 62%;
  --bulma-danger-l: 57%;

  --color-black-bean: #330000;
}
.title {
  --bulma-title-color: hsl(0deg, 100%, 10%);
}
.splide__pagination__page {
  background-color: var(--color-black-bean);
}
.splide__pagination__page.is-active {
  background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}
.splide__arrows .splide__arrow {
  background-color: hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}
/* Dark Mode */
@media (prefers-color-scheme: dark) {
  /* Bulma Variables */
  :root {
    --bulma-link-h: 0deg;
    --bulma-link-s: 100%;
    --bulma-link-l: 72.75%;
    --bulma-info-h: 0deg;
    --bulma-info-s: 100%;
    --bulma-info-l: 72.75%;
    --bulma-shadow-h: 43.9deg;
    --bulma-shadow-s: 69.49%;
    --bulma-shadow-l: 88.43%;

    /* Background */
    --bulma-scheme-h: 0deg;
    --bulma-scheme-s: 100%;
    --bulma-scheme-main-l: 5%;
  }

  .title {
    --bulma-title-color: #ffffff;
  }
  .modal-card-foot {
    --bulma-modal-card-foot-background-color: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));
  }
  .modal-background {
    --bulma-modal-background-background-color: #000000aa;
  }
  .navbar-item, .navbar-link {
  color: white;
  }
  .splide__pagination__page {
    background-color: #ffffff;
  }
}

/* WCAG Accessibility Changes */
/* Link Underline*/
a {
  text-decoration-line: underline;
  color: hsl(var(--bulma-link-h), var(--bulma-link-s), var(--bulma-link-l));
}
.navbar-item, .navbar-link, .navbar-dropdown.navbar-item {
  text-decoration-line: none;
}
.button {
  text-decoration-line: none;
}
/* Tab focus border */
a:focus, .button:focus {
  border: solid 2px black;
  outline: solid 2px white;
}
/* Screen reader only text */
.sr-only {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}

/* Cards */
.card {
  max-width: 350px;
  height: 100%;
}

.columns {
  justify-content: stretch;
}

/* Lists */
.content ul.is-lined-list {
  border-top: 2px solid hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
  margin-inline-start: 0%;
  list-style-type: none;
  text-align: center;
}

.is-lined-list li {
  padding-top: 3%;
  padding-bottom: 3%;
  border-bottom: 2px solid hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}

/* Boxes */
.box:not(.logo) {
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
}

/* Slides */
.splide__arrows {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  max-width: 150px;
  margin-left: auto;
  margin-right: auto;
}
.splide__arrows .splide__arrow {
  position: relative;
  left: 0;
}
.splide__arrow svg {
  fill: var(--color-black-bean);
}
.slide-pagination {
  bottom: 1.375rem;
}

/* General Descriptors */
p, a {
  word-wrap: break-word;
}

.is-rounded {
  border-radius: var(--bulma-box-radius);
}
.font-size-5 {
  font-size: 500%;
}
.mt--6 {
  margin-top: -6rem;
}

.is-justified {
  text-align: justify;
  word-spacing: 3%;
}

.is-montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

.has-text-black-bean {
  color: var(--color-black-bean);
}

.w-fit {
  width: fit-content;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-25 {
 width: 25%;
}

.gap-6 {
  gap: 6px;
}

.gap-15 {
  gap: 15px;
}

.is-serif {
  font-family:'Times New Roman', Times, serif;
}

.has-border {
  border: #330000 3px solid;
}

/* Prevent stretched out images */
.cover {
  object-fit: cover;
}

/* Linear gradient from MISSA Pink to background.png */
.background-fade {
  background: linear-gradient(to right, hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) 0%, hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l)) 40%, hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 0%)) center no-repeat, url("../images/background.png") center no-repeat;
  background-size: cover;
}

/* Specific Descriptors */

/* FAQ */
.faq {
  min-height: 55vh;
}

/* Calendar */
.calendar {
  width: 100%;
  max-width: 1000px;
  height: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Nav */
nav {
  padding-left: 10%;
  padding-right: 10%;
}

.motto-box {
  padding-left: 5%;
  border-left: 3px solid hsl(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l));
}

.box.logo {
  background-color: white;
  height: 125px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box.logo img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

.center-in-div figure {
  display: inline-table;
}