/* Variables
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  /* Alert colors */
  --white: #fff;
  --mint-green: #d6e9c6;
  --black: #000;
  --pink: #f2dede;
  --dark-pink: #eed3d7;
  --red: #b94a48;
  --forest-green: #57bc90;

  /* Global Colours */
  --light-yellow-main: #fcc969;
  --yellow-main: #fbb228;
  --light-green-main: #a4d3a5;
  --green-main: #227d51;
  --dark-green-main: #11402a;
  --red-main: #d64028;
  --olive-main: #f6f6de;
  --gray-main: #939385;
  --gold-main: #a27f49;
  --dark-blue-main: #06223c;
  --light-blue-main: #aec6cf;

  /* Global Fonts */
  --regular-font: Gibson-Regular, Helvetica, sans-serif;
  --italic-font: Gibson-Italic, Helvetica, sans-serif;
  --title-font: Lora-Regular, Helvetica, sans-serif;
}

/* Alerts
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
.alert-debug {
  background-color: var(--white);
  border-color: var(--mint-green);
  color: var(--black);
}

.alert-error {
  background-color: var(--pink);
  border-color: var(--dark-pink);
  color: var(--red);
}

.invalid-feedback {
  color: var(--red-main);
}

/* Global Styles
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  font-size: 16px;
  line-height: 1.15;
}

body {
  min-height: 100vh;
  background: var(--olive-main);
  font-size: 1rem;
  padding: 0;
  min-width: 320px;
  line-height: 1.4285em;
  color: rgba(17, 64, 42, 0.87);
  overflow-x: hidden;
}

a {
  color: #4183c4;
  text-decoration: none;
  &:hover {
    color: #1e70bf;
    text-decoration: none;
  }
}

/* Headings */
h1, h2, h3, h4, h5 {
  line-height: 1.28571429em;
  margin: calc(2rem - 0.14285714em) 0em 1rem;
  font-weight: bold;
  padding: 0em;
  font-family: var(--title-font);
  color: var(--dark-blue-main);
}

h1 { min-height: 1rem; font-size: 2rem; }
h2 { font-size: 1.71428571rem; }
h3 { font-size: 1.28571429rem; }
h4 { font-size: 1.07142857rem; }
h5 { font-size: 1rem; }

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child {
  margin-top: 0em;
}

h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child {
  margin-bottom: 0em;
}

/* Text */
p {
  margin: 0em 0em 1em;
  line-height: 1.4285em;
  &:first-child { margin-top: 0em; }
  &:last-child { margin-bottom: 0em; }
}

/* Inputs */
input {
  color: var(--dark-blue-main);
  &:focus-visible, &:focus { outline: none; }
  &::placeholder { color: var(--light-blue-main); }
  &:focus::placeholder { color: var(--dark-blue-main); }
}

.ui.form input:not([type]),
.ui.form input[type="date"],
.ui.form input[type="datetime-local"],
.ui.form input[type="email"],
.ui.form input[type="file"],
.ui.form input[type="number"],
.ui.form input[type="password"],
.ui.form input[type="search"],
.ui.form input[type="tel"],
.ui.form input[type="text"],
.ui.form input[type="time"],
.ui.form input[type="url"],
.ui.form textarea {
  padding: .7em 1em;
  line-height: 1.3em;
  border-radius: .3rem;
  box-shadow: 0 0 0 0 transparent inset;
  width: 100%;
}

/* Container */
.container {
  display: grid;
  grid-gap: 25px;
  grid-template-areas:
    "header"
    "main"
    "footer";
  background: var(--olive-main);
  font-family: var(--regular-font);
  color: var(--dark-blue-main);
}

.bubble-link {
  padding: 5px 7px;
  margin: 5px 12px 5px 0;
  background: #fcc969;
  border-radius: 3px;
}

.underline { border-bottom: 1px solid; }

.centered {
  display: grid;
  grid-template-columns: 7% auto 7%;
  grid-template-areas: "... center ...";
  & .center { grid-area: center; }
}

.bottom-borders {
  grid-area: bottom-border;
  grid-column: 1 / span 3;
}

.bottom-border {
  width: 100%;
  border-style: solid;
  border-width: 0 0 5px 0;
  &.yellow { border-color: var(--yellow-main); }
  &.red { border-color: var(--red-main); }
  &.green { border-color: var(--dark-blue-main); }
}

.flex-row-reverse { display: flex; flex-direction: row-reverse; }
.flex-justify-center { display: flex; justify-content: center; }

/* Header Styles */
.header {
  grid-area: header;
  background: var(--olive-main);
  display: grid;
  grid-template-columns: 7% auto 7%;
  grid-template-areas:
    "... logo ..."
    "... header-links ..."
    "... bottom-border ..."
    "... main-header ...";

  & .navbar-brand {
    grid-area: logo;
    position: relative;
    & a { text-decoration: none; }
    & .rlogo {
      width: 14%;
      position: absolute;
      bottom: -7px;
      left: 2.5rem;
      max-height: 60%;
    }
    & .hamburger {
      position: absolute;
      bottom: 1%;
      left: -2%;
      & img { display: block; width: 100%; }
    }
  }
  & .header-links {
    grid-area: header-links;
    display: inline-block;
    vertical-align: bottom;
    & ul {
      visibility: hidden;
      list-style: none outside none;
      margin: 0;
      font-weight: 600;
    }
    & li {
      display: inline-block;
      padding: 0 .3em;
      & a {
        text-decoration: none;
        color: var(--gold-main);
        font-family: var(--title-font);
        text-shadow: 0 0 1px var(--dark-blue-main), 0 0 1px var(--dark-blue-main), 0 0 1px var(--dark-blue-main), 0 0 1px var(--dark-blue-main);
      }
    }
    & .search-box { display: none; }
  }
}

/* Main Styles */
.main {
  grid-area: main;
  background: var(--olive-main);
  & .title {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 1rem 0;
    & .tools-section a {
      text-decoration: none;
      & img { height: 60px; }
      & #addToRecipeBook img { height: 70px; }
    }
    & h1 { font-size: 2.5rem; margin-bottom: .1rem; }
    & h3 { margin-top: .1rem; }
    & p { font-size: 1rem; margin-top: .1rem; }
  }
  & .nav-links ul {
    list-style: none outside none;
    margin: 0;
    font-weight: 600;
    padding-left: 0;
    & a {
      display: block;
      padding: 1rem;
      text-align: center;
      outline: 1px solid var(--dark-blue-main);
      margin-top: 1px;
      color: var(--dark-blue-main);
    }
  }
}

/* Home page Styles */
.home-page {
  & iframe {
    width:100%;
    height:100vh;
    border:0
  }
}
/* About Styles */
.mission-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Ensure spelling here matches the grid-area names below exactly */
  grid-template-areas:
    "vision details"
    "philosophy format";
  gap: 2rem;

  & .vision {
    grid-area: vision;
    & h2 {
      margin-bottom:0;
    }
  }
  & .details {
    grid-area: details;
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--gold-main); /* A nice accent line */
    border-radius: 4px;
    font-size: 1.2rem;

    & .info-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;

      & span {
        font-size: 1.75rem;
        line-height: 1;
      }

      & strong {
        display: block;
        color: var(--gold-main);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 2px;
      }

      & p {
        margin: 0;
        font-size: 1rem;
        line-height: 1.4;
        font-weight: 500;
      }
      & .schedule-block {
        & .day-label {
          margin-top: 12px; /* Space between the two days */
          font-weight: 800;
          font-size: 1.1rem;
          letter-spacing: 0.5px;
          margin: 0;
        }
      }
    }
  }
  & .format {
    grid-area: format;
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid var(--gold-main); /* A nice accent line */
    border-radius: 4px;
    font-size: 1.2rem;

    & .info-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;

      & span {
        font-size: 1.75rem;
        line-height: 1;
      }

      & strong {
        display: block;
        color: var(--gold-main);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 2px;
      }

      & p {
        margin: 0;
        font-size: 1rem;
        line-height: 1.4;
        font-weight: 500;
      }
      & .schedule-block {
        & .day-label {
          margin-top: 12px; /* Space between the two days */
          font-weight: 800;
          font-size: 1.1rem;
          letter-spacing: 0.5px;
          margin: 0;
        }
      }
    }
  }

  & .philosophy {
    grid-area: philosophy;
  }

  & .highlight {
    margin-top:0;
    color: var(--gold-main);
  }
}
/* Registration Styles */
.schedule {
  display: flex;
  align-items: flex-start;
  & .month {
    margin: 1rem;
    max-width: 20%;
  }
}

.btn-success {
  margin-top: 1rem;
  padding: .6rem;
}
/* Footer Styles */
.footer {
  grid-area: footer;
  display: grid;
  grid-template-columns: 7% auto 7%;
  grid-template-areas:
  "... logo ..."
  "... copyright ..."
  "... bottom-border ...";
  border-width: 5px 0 5px 0;
  border-style: solid;
  border-color: var(--dark-blue-main);
  background: var(--light-blue-main);
  & a.logo {
    grid-area: logo;
    padding-top: 20px;
    & .logo { width: 14%; }
  }
  & .footer-info-copyright {
    grid-area: copyright;
    font-size: 0.7em;
  }
}

/* Dashboard Styles */
.mobile-dashboard {
  display: block;
  & .details {
    & .title {
      display: grid;
      justify-content: center;
      text-align: center;
      & h2, p { margin: 0; }
    }
    & a { display: block; }
    & .image-div {
      filter: drop-shadow(-1px 6px 3px rgba(17, 64, 42, 1));
      & img { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
    }
  }
}

.dashboard {
  display: none;
  grid-gap: 50px;
  grid-template-columns: 24% 35% 35%;
  grid-template-areas: "details calendar feed";
  & .details {
    grid-area: details;
    background: var(--light-blue-main);
    color: var(--olive-main);
    padding: 10px;
    height: fit-content;
    & h2 { color: var(--olive-main); }
    & .title {
      display: grid;
      justify-content: center;
      text-align: center;
      & h2, p { margin: 0; }
      & a { color: var(--olive-main); text-decoration: underline; }
    }
    & .quick-links a {
      display: block;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 4px 2px -2px rgba(0, 0, 0, .12);
      border-left: 5px solid var(--green-main);
      padding: .8rem 2rem;
      margin-top: .5rem;
      color: var(--olive-main);
      transition: .5s;
      &:hover {
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .4), 0 4px 4px 0 rgba(0, 0, 0, .28), 0 8px 4px -4px rgba(0, 0, 0, .24);
        transition: .5s;
      }
    }
    & .image-div {
      filter: drop-shadow(-1px 6px 3px rgba(17, 64, 42, 1));
      & img { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
    }
    & .bio { margin: 0 7%; }
  }
  & .calendar {
    grid-area: calendar;
    & .calendar-date {
      background-color: var(--green-main);
      color: var(--olive-main);
      display: flex;
      justify-content: space-between;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 4px 2px -2px rgba(0, 0, 0, .12);
      padding: .7rem;
    }
    & .calendar-item {
      display: block;
      box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
      padding: .8rem;
      text-align: center;
      transition: .5s;
      &:hover {
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 4px 2px -2px rgba(0, 0, 0, .12);
        transition: .5s;
      }
    }
    & .fc-list-event-time, .fc-list-event-graphic { display: none; }
    & .fc-theme-standard .fc-list-day-cushion {
      background-color: var(--green-main);
      & a { color: var(--olive-main); }
    }
    & .fc-theme-standard td, .fc-theme-standard th { border-color: var(--light-blue-main); }
    & .fc-theme-standard .fc-list { border-color: var(--light-blue-main); }
    & .fc-view-harness.fc-view-harness-active { min-height: 800px !important; }
  }
  & .feed { grid-area: feed; }
}

/* Account Styles */
.account.ui.form {
  & #div_id_username {
    & div {
      max-width: 328px;
      background: white;
      border: 1px solid rgba(34,36,38,.15);
      border-radius: .28571429rem;
      padding-left: 10px;
      border-block: 2px #e3e3e3 inset;
      border-inline: 1.75px #e3e3e3 inset;
      &:before {
        color: var(--dark-blue-main);
        content: '@';
        font-size: 1.4rem;
      }
    }
  }
  & input {
    padding: .7em 1em;
    line-height: 1.3em;
    border-radius: .3rem;
    box-shadow: 0 0 0 0 transparent inset;
    max-width: 300px;
    padding-left: 20px;
    &#id_username {
      max-width: 266px;
      vertical-align: baseline;
      border: none;
      padding-left: 0;
    }
  }
  & button { margin-top: .5rem; }
}

.login {
  & #div_id_login {
    & div {
      max-width: 328px;
      background: white;
      border: 1px solid rgba(34,36,38,.15);
      box-shadow: 0 0 0 0 transparent inset;
      border-radius: .28571429rem;
      padding-left: 10px;
      border-block: 2px #e3e3e3 inset;
      border-inline: 1.75px #e3e3e3 inset;
      &:before { content: '@'; font-size: 1.4rem; }
    }
  }
  & input {
    padding: .7em 1em;
    line-height: 1.3em;
    border-radius: .3rem;
    box-shadow: 0 0 0 0 transparent inset;
    max-width: 300px;
    padding-left: 30px;
    &#id_login {
      max-width: 266px;
      vertical-align: baseline;
      border: none;
      padding-left: 0;
    }
  }
  & #id_remember { margin-top: .3rem; }
}

/* Helpers */
.hidden { visibility: hidden; }
.showNone { display: none !important; }
.italic { font-style: italic; }

/* Media Queries Styles */
@media (min-width: 768px) {
  .header {
    & .logo { width: 5%; }
    & .hamburger, & .search { visibility: hidden; }
    & .header-links ul {
      font-size: 2rem;
      visibility: visible;
      margin: 2rem 0 2rem 0;
    }
  }
  .main .title h1 { font-size: 3em; }
  .profile {
    & .indexGrid {
      grid-template-columns: 50% 50%;
      grid-template-rows: none;
      grid-template-areas: "about recipeOfTheDay";
    }
    & .dashboard { display: grid; }
    & .mobile-dashboard { display: none; }
  }
  .footer a.logo .logo { width: 4%; }
}



/* #Font-Face
================================================== */

@font-face {
  font-family: 'Gibson-Regular';
  src: url("../fonts/Gibson-Regular.900ea9014ceb.eot");
  src: url("../fonts/Gibson-Regular.900ea9014ceb.eot?iefix") format('eot'),
  url("../fonts/Gibson-Regular.4bc4cfbf561b.woff2") format('woff2'),
  url("../fonts/Gibson-Regular.5cd7f15e4f5c.woff") format('woff'),
  url("../fonts/Gibson-Regular.e81a2cee8869.ttf") format('truetype'),
  url("../fonts/Gibson-Regular.96099d259411.svg") format('svg');
  font-weight: normal;
font-style: normal; }

@font-face {
  font-family: 'Gibson-Italic';
  src: url("../fonts/Gibson-Italic.ec7566eb9ae0.eot");
  src: url("../fonts/Gibson-Italic.ec7566eb9ae0.eot?iefix") format('eot'),
  url("../fonts/Gibson-Italic.b37df1d8723c.woff2") format('woff2'),
  url("../fonts/Gibson-Italic.78a64253ba87.woff") format('woff'),
  url("../fonts/Gibson-Italic.4bce23ef69c4.ttf") format('truetype'),
  url("../fonts/Gibson-Italic.47569308c289.svg") format('svg');
  font-weight: normal;
font-style: normal; }

@font-face {
  font-family: 'Lora-Bold';
  src: url("../fonts/Lora-Bold.3783178b2368.eot");
  src: url("../fonts/Lora-Bold.3783178b2368.eot?iefix") format('eot'),
  url("../fonts/Lora-Bold.b2c462df65e3.woff") format('woff'),
  url("../fonts/Lora-Bold.4d8b266ca566.ttf") format('truetype'),
  url("../fonts/Lora-Bold.98966647c6a7.svg") format('svg');
  font-weight: normal;
font-style: normal; }

@font-face {
  font-family: 'Lora-Italic';
  src: url("../fonts/lora-italic.ccf2108cfaab.eot");
  src: url("../fonts/lora-italic.ccf2108cfaab.eot?#iefix") format('embedded-opentype'),
  url("../fonts/lora-italic.6efabd87cf40.woff") format('woff'),
  url("../fonts/lora-italic.ef7dcbd5be4b.ttf") format('truetype'),
  url("../fonts/lora-italic.e54c03964dcd.svg#loraitalic") format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Lora-Regular';
  src: url("../fonts/lora-regular.61e5e779607f.eot");
  src: url("../fonts/lora-regular.61e5e779607f.eot?#iefix") format('embedded-opentype'),
  url("../fonts/lora-regular.21a8b1d61d80.woff2") format('woff2'),
  url("../fonts/lora-regular.54ff3dc7f4a1.woff") format('woff'),
  url("../fonts/lora-regular.948035870ee9.ttf") format('truetype'),
  url("../fonts/lora-regular.68d54a8602af.svg#loraregular") format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Icons';
  src: url("../fonts/icons.8e3c7f5520f5.eot");
  src: url("../fonts/icons.8e3c7f5520f5.eot?#iefix") format('embedded-opentype'),
  url("../fonts/icons.faff92145777.woff") format('woff'),
  url("../fonts/icons.b87b9ba532ac.ttf") format('truetype'),
  url("../fonts/icons.6edde5dc8776.svg#icons") format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'outline-icons';
  src: url("../fonts/outline-icons.701ae6abd471.eot");
  src: url("../fonts/outline-icons.701ae6abd471.eot?#iefix") format('embedded-opentype'),
  url("../fonts/outline-icons.ef60a4f6c25e.woff") format('woff'),
  url("../fonts/outline-icons.ad97afd3337e.ttf") format('truetype'),
  url("../fonts/outline-icons.def1932576cd.svg#outline-icons") format('svg');
  font-weight: normal;
  font-style: normal;
}