/* Main Site Styles */

:root {
  --body-bg-image: url('/layout/imgs/mainsite/bg.png');

  --dept-bar-bg-colour: #FFF9D7;
  --dept-bar-link-text-colour: #000000;
  --dept-bar-link-text-hover-colour: #ffffff;
  --dept-bar-link-bg-hover-colour: #F6983F;

  --header-row-bg-colour: rgba(252, 167, 39, 0.5);
  --header-bg-img: url('/layout/imgs/mainsite/header_bg.png');
  --header-logo-plate-img: url('/layout/imgs/mainsite/plate_icon.png');
  --header-logo-name-img: url('/layout/imgs/mainsite/logo.png');
  --header-logo-name-img-white: url('/layout/imgs/mainsite/logo_white.png');
  --header-logo-name-img-mobile: url('/layout/imgs/mainsite/logo_mobile.png');

  --nav-bar-wrapper-bg-colour: #FB792C;
  --nav-bar-bg-colour: #E35023;
  --nav-bar-open-menu-bg-colour: #FDA636;
  --nav-bar-hover-bg-colour: #F6821A;

  --btn-colour: #F1542B;
  --btn-font-colour: #ffffff;
  --btn-hover-colour: #FF9D2E;

  --text-link-colour: #981928;
  --text-link-hover-colour: #C31127;
  --text-link-active-colour: #8E6E3D;
  --text-link-underline-colour: rgba(152, 25, 40, 0.3);
  --text-link-underline-hover-colour: rgba(152, 25, 40, 0.5);

  --pagination-current-font-colour: #FFFFFF;
  --pagination-current-bg-colour: #F1542B;

  --breadcrumbs-link-colour: #C31127;

  --subnav-active-font-colour: #ffffff;
  --subnav-active-bg-colour: #C31127;

  --jnheader-icon-bg-colour: #9fe047;
  --jnheader-icon-bg-position: 0px 50%;
  --jnheader-text-colour: #C31127;

  --alert-box-accent-border-colour: #F1542B;
  --alert-box-bg-image: url('/layout/imgs/mainsite/mascot_250.png');
  --alert-box-bg-size: 150px 150px;
  --alert-box-bg-position: -86px -38px;
  --alert-box-mascot-padding: 75px;

  --blockquote-border-colour: #666666;

  --page-icon-hover-bg-colour: #F1542B;

  --read-more-bg-colour: #cccccc;
  --read-more-font-colour: #222222;

  --news-post-title-background-image: linear-gradient(to bottom, rgb(254, 202, 82), var(--content-wrapper-bg-colour));

  --dept-search-bar-bg-colour: #f9efdf;

  --goodie-tool-bar-bg-colour: #fdeeee;
  --goodie-tool-bar-tab-link-bg-colour: #fbf4ea;
  --goodie-tool-bar-tab-link-border-colour: #ffaa94;
  --goodie-tool-bar-tab-active-link-border-colour: #f1542b;

  --content-box-border-colour: #ef9815;
  --content-box-text-colour: #ffffff;

  --footer-bg-color: #e18f14;
  --footer-header-color: #ffffff;
  --footer-text-color: #ffffff;
  --footer-link-hover-bg-color: var(--btn-colour);
  --footer-link-hover-text-color: #ffffff;
  --footer-mascot-img: url('/layout/imgs/mainsite/mascot_footer.png');
  --footer-legal-bg-color: #C4490F;
  --footer-legal-text-color: #ffffff;
}

/* Sidebar */

ul.side-nav-homepage {
  list-style-type: none;
  margin-left: 0;
  font-size: 0.8em;
}

ul.side-nav-homepage > li {
  margin-bottom: 0.5em;
}

.news-headline-link {
  display: flex;
  width: 100%;
  column-gap: 5px;
}

.news-headline-link > strong {
  width: 40px;
}

.news-headline-link > span {
  flex: 1;
}

/* Homepage/Hub Sidebar */

.happening-now-img {
  max-width: 120px;
  max-height: 80px;
}

.button.happening-now {
  margin-bottom: 0px;
  min-width: 150px;
}

.homepage-sidebar-icon {
  width: 50px;
  height: 50px;
  border-radius: 200px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
}

.dept-search-bar p {
  font-size: 0.9em;
  margin-bottom: 0.7em;
}

.dept-search-bar .item-grid {
  margin-bottom: 0;
}

/* Page Link Hubs */

.page-link-group {
  --group-img-size-lg: 200px;
  --group-img-size-sm: 150px;
  --group-col-gap: 1.75rem;

  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
  column-gap: var(--group-col-gap);

  margin-bottom: 1.5em;
}

.page-link-group.align-items-center {
  align-items: center;
}

div.page-link-group-img {
  width: 100%;
  text-align: center;
}

div.page-link-group-img > img {
  width: var(--group-img-size-sm);
  max-width: 100%;
}

.page-link-image {
  border-radius: 20px;
  margin-bottom: 1.5em;
  border: 2px solid #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

div.page-link-group-list {
  font-size: 0.9em;
  flex: 1;
  column-count: 2;
  width: auto;
  max-width: calc(100%);
}

div.page-link-group-list.text-small {
  font-size: 75%;
}

div.page-link-group-list a:not(.button),
div.page-link-group-list h3 {
  display: block;
  line-height: 1.5;
  margin-bottom: 0.5em;
  background-image: none !important; /* no dept link icons, because they are right-aligned */
}

div.page-link-group-list h3 {
  margin-top: 0.5em;
  margin-bottom: 0.25em;
}

@media only screen and (min-width: 650px) {
  .page-link-group {
    flex-wrap: nowrap;
  }

  div.page-link-group-img {
    width: var(--group-img-size-sm);
  }

  div.page-link-group-img > img {
    width: 100%;
  }
  
  div.page-link-group-list {
    max-width: calc(100% - var(--group-img-size-sm) - var(--group-col-gap));
  }
}

@media only screen and (min-width: 58.75em) {
  div.page-link-group-img {
    width: var(--group-img-size-lg);
  }

  div.page-link-group-list {
    column-count: 5;
    /* 100% - image width - column gap - gutter */
    max-width: calc(100% - var(--group-img-size-lg) - var(--group-col-gap));
  }
}

div.page-link-group-list.no-columns {
  column-count: revert;
}

/* Content Specific Styling */

.alert-box.costume-contest {
  --alert-box-accent-border-colour: #CC3300;
  --alert-box-bg-image: url('/layout/imgs/alert_costume_contest.png');
  --alert-box-bg-size: 75px auto;
  --alert-box-bg-position: -9px -3px;
  --alert-box-mascot-padding: 85px;
}

.alert-box.nq2-guide {
  --alert-box-accent-border-colour: #408626;
  --alert-box-bg-image: url('/layout/imgs/alert_nq2_guide.png');
  --alert-box-bg-size: 75px auto;
  --alert-box-bg-position: -5px -5px;
  --alert-box-mascot-padding: 85px;
}

.alert-box.altador-mini-plot {
  --alert-box-accent-border-colour: #dba724;
  --alert-box-bg-image: url('/layout/imgs/alert_altador_mini_plot.gif');
  --alert-box-bg-size: 75px auto;
  --alert-box-bg-position: -4px -3px;
  --alert-box-mascot-padding: 85px;
}

.editorial-db-answer {
  line-height: 1.6;
}

/* Game Guides */

.game-guide-world-icon {
  border-radius: 100px;
  width: 70px;
  height: 70px;
}
.game-guide-trophy-image {
  width:65px;
  height:65px;
}
.game-guide-banner-image {
  margin-bottom:-0.5em;
}
.game-guide-banner-image > a.button {
  position:relative;
  top:-1.5em;
  margin-bottom:0;
}
.game-guide-high-scores-link > a.button, .game-guide-info-buttons > a.button {
  margin-bottom:0;
}

/* Content Feedback Form */

#content-feedback-row {
  max-width: 600px;
  width: 100%;
  display: grid;
  grid-template-columns: 25% calc(75% - 15px);
  column-gap: 15px;
  margin: 0 auto;
}

#content-feedback-row p {
  margin-bottom: 0.75em;
}

#content-feedback-img {
  margin: 0 auto;
  background-image: url('/assets/imgs/content-feedback-happy.png');
  background-repeat: no-repeat;
  background-size: 70px 70px;
  height: 70px;
  width: 70px;
  border: 3px solid #4c9d35;
  border-radius: 100px;
  background-color: #a2f27c8f;
  box-shadow: 0px 0px 12px rgba(101, 225, 42, 0.4);
}

#content-feedback-img.happy-kacheek {
  background-image: url('/assets/imgs/content-feedback-happy.png');
}

#content-feedback-img.sad-kacheek {
  background-image: url('/assets/imgs/content-feedback-sad.png');
}

#content-feedback-form-col {
  line-height: 1.5;
}

#content-feedback-question label {
  display: inline-block;
  width: 50px;
}

#content-feedback-no-response textarea {
  height: 6em;
}

/* Level Solution Sets */

aside.solution-box {
  width: 100%;
  background-color: var(--content-box-border-colour);
  padding: 0.75rem 0rem;
}

.solution-box-viewer {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
}

.solution-box-nav {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
}

.solution-box-nav svg {
  transition: all 250ms;
}

.solution-box-nav svg path {
  fill: var(--content-box-text-colour);
  transition: all 250ms;
}

.solution-box-nav:hover svg, .solution-box-nav:active svg {
  stroke: var(--content-box-text-colour);
  stroke-width: 2px;
  transform: translateZ(0) scale(1.2);
}

.solution-box-nav:active svg {
  transform: translateZ(0) scale(1.25);
}

.solution-box-nav:hover svg path, .solution-box-nav:active svg path {
  fill: var(--content-box-border-colour);
}

.solution-box-level-wrapper {
  width: calc(100% - 50px - 50px);
}

.solution-box-level:not(.current) {
  display: none;
}

.solution-box-level {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--content-wrapper-bg-colour);
  border-radius: 5px;
  padding-top: 0.5em;
  text-align: center;
}

.solution-box-level img {
  border-radius: 5px;
  max-height: 550px;
  max-width: calc(100% - 1.2em);
}

.solution-box-level-content {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
  padding: 0.5em 0.75em;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.solution-box-level-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 0.5em;
}

.solution-box-level-title strong {
  font-size: 1.35rem;
}

.solution-box-level-replay.button.tiny {
  display: flex;
  align-items: center;
  column-gap: 0.25em;
  margin-bottom: 0;
}

.solution-box-level-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  text-align: left;
}

.solution-box-level-selector-wrapper {
  display: flex;
  column-gap: 1em;
  justify-content: center;
  align-items: center;
  margin-top: 0.75em;
}

.solution-box-level-selector-wrapper label {
  color: var(--content-box-text-colour);
  margin-bottom: 0;
  font-size: 1.1em;
  font-weight: bold;
}

.solution-box-level-selector {
  width: 50%;
  margin-bottom: 0;
}