/* === Font Definitions === */
@font-face {
  font-family: 'Carlito';
  src: url('fonts/carlito/Carlito-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  
}
@font-face {
  font-family: 'Carlito';
  src: url('fonts/carlito/Carlito-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Carlito';
  src: url('fonts/carlito/Carlito-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Carlito';
  src: url('fonts/carlito/Carlito-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

:root {
  /* Use non-rgb's for appending alphas */
    --glj-dark-purple: 33, 8, 69;
    --glj-dark-purple-rgb: rgb(33, 8, 69);

    --glj-hot-pink: 238, 149, 231;
    --glj-hot-pink-rgb: rgb(238, 149, 231);

    --glj-dark-blue: 51, 64, 144;
    --glj-dark-blue-rgb: rgb(51, 64, 144);
}

/* === Global Defaults === */
* {
  box-sizing: border-box;
}

html, body {
  /* width: 800px; */
  max-width: 100%;
  margin: 0;
  padding: 0;
  background-color: var(--glj-dark-purple-rgb);
  color: #e6e6e6;
  font-family: 'Carlito', sans-serif;
  line-height: 1.4;                                                    /*
  overflow-y is dynamically defined in .container by global_iframes.js */
  overflow-x: hidden;
}

/* === Link Styling === */
a {
  color: var(--glj-hot-pink-rgb);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* === Containers === Represents the potentially-scrollable area */
.container {
  max-width: 800px;
  height: 100%; /* [page].css must manually override this! */
  margin: 0 auto;
  padding-block: 0; /* global_iframes.js dynamically overrides this */
  border-radius: 10px;

  /* container bg debug color */
  /* background-color: #c800ff;     */
  
  text-align: center;                                /*
  overflow-y is dynammicaly set by global_iframes.js */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-origin: top center;    

  /* optional buffer debug part 1 */
  /* background: red; */    
}
  /* optional buffer debug part 2 */                   
  /* .container > * { background: transparent; } */   

  /* global_iframes.js dynamically applies these subclasses. Don't apply them manually! */
  .container.auto-scroll { overflow-y: auto; }
  .container.no-scroll   { overflow-y: hidden; }
  .container.use-space-between { justify-content: space-between; }
  .container.use-flex-start    { justify-content: flex-start; }

/* === Sections === Content with this style dynamically move to fill the Container */
.section {
  margin: 0;
  padding: 0;
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  transform-origin: top center;

  /* debug tool for seeing section boundaries */
  /* outline: 2px dashed red; */    
}

.section.margin-isolation {
  border-top: 1px solid transparent;
}

/* === Top image section override === */
.section.locked {
  flex: 0 0 auto; /* Prevent compression */
}

.section.spacer { /* Use if content overflows the container (ie, the buffer spacing isn't kicking in) */
  flex: 0 0 16px; /* Gap height */
  background: none;
  padding: 0;
  margin: 0;
}

/* === Vertical Margin Tools ===  */
.vmargin-top-sm { margin-top: 0.5rem; }
.vmargin-top-md { margin-top: 1.2rem; }
.vmargin-top-lg { margin-top: 1.8rem; }
.vmargin-top-xl { margin-top: 2.5rem; }

.vmargin-bot-sm { margin-bottom: 0.5rem; }
.vmargin-bot-md { margin-bottom: 1rem; }
.vmargin-bot-lg { margin-bottom: 2rem; }
.vmargin-bot-xl { margin-bottom: 3rem; }

/* === Typography === */
.heading-xxl { font-size: 30px; font-weight: bold; }
.heading-xl { font-size: 28px; font-weight: bold; }
.heading-lg { font-size: 24px; font-weight: bold; }
.heading-md { font-size: 23px; font-weight: bold; }
.text-xl    { font-size: 24px; }
.text-lg    { font-size: 22px; }
.text-md    { font-size: 20px; }
.text-sm    { font-size: 18px; }
.emphasis   { font-style: italic; }
.bold       { font-weight: bold; }


.text-stable {  /* Use to fix Chrome Mobile Desktop browser from overscaling text */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* === Navigation Bars === */
.nav-table-wrapper {
  width: 100%;
  border: 2px solid rgba(var(--glj-hot-pink), .2);
  border-radius: 25px;
  overflow: hidden;
}
.nav-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--glj-dark-blue-rgb);
  border-radius: 25px;
}
.nav-table td {
  vertical-align: middle;
  padding: 20px;
}
.nav-left           { text-align: left;  padding-left: 20px; }
.nav-right          { text-align: right; padding-right: 20px; }
.nav-divider        { width: 1px; background-color: rgba(var(--glj-dark-blue), .7); }
.nav-divider-light  { background-color: rgba(var(--glj-hot-pink), .2); }

/* === Border-only box styling === */
.box-border-only {
  border: 2px solid var(--glj-hot-pink-rgb);           /* Outer pink border */
  border-radius: 10px;
  background-color: var(--glj-dark-purple-rgb);
  max-width: 800px;
  margin: 0 auto;
  padding: 18px 15px 21px 15px;        /* Top/right/bottom/left padding */
  display: block;                      /* Avoid flow-root quirks */
  box-sizing: border-box;
}

/* Inner blue border */
.box-border-only .inner-border {
  border: 3px solid var(--glj-dark-blue-rgb);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 3px;                  /* Prevent bottom edge collision */
  overflow: hidden;
  display: block;
  box-sizing: border-box;
}

.inner-divider {
  border-bottom: 3px solid var(--glj-dark-blue-rgb); /* same as your inner-border color */
  margin-bottom: 30px;
  padding-bottom: 20px;

}

/* === Table Styling === */
.table-box {
  border: 2px solid var(--glj-hot-pink-rgb);
  border-radius: 10px;
  background-color: var(--glj-dark-purple-rgb);
  max-width: 800px;
  margin: 0 auto;
  padding: 15px;
  text-align: left;
  flex: 0 1 auto;
  min-height: auto;
  display: flex;
  flex-direction: column;
}

.table-box .inner-border {
  border: 3px solid var(--glj-dark-blue-rgb);
  border-radius: 10px; /* Match .table-box */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden; /* Ensures child rows respect the rounding */
}

.table-content {
  flex: 1 1 auto;
  min-height: 0;
}

.table-box .table {
  display: flex;
  flex-direction: row;
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  box-sizing: border-box;
  align-items: stretch;
}

.table-box .table {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-bottom: var(--margin-md);
  border-bottom: 3px solid var(--glj-dark-blue-rgb);
  border-radius: 0; /* remove rounding from middle rows */
  overflow: hidden;
  box-sizing: border-box;
  align-items: stretch;
}

.table-box .table:last-of-type {
  border-bottom: none;
}

.table-box .table-cell {
  flex: 1 1 0;
  min-width: 0;
  padding: 1rem;
  text-align: center;
  background-color: var(--glj-dark-purple);
  border-right: 3px solid var(--glj-dark-blue-rgb);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  align-self: stretch;
}

.table-box .table-cell:last-child {
  border-right: none;
}

.table-box .table-cell img {
  max-width: 100%;
  max-height: clamp(80px, 20vw, 160px);
  height: auto;
  object-fit: contain;
  flex-shrink: 1;
  min-width: 0;
}

.table-box .table-cell * {
  font-size: clamp(1rem, 1em + 0.2rem, 1.4rem);
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: normal;
  margin: 0;
  max-width: 100%;
  flex-shrink: 1;
}

/* === Rules Box == */
.table-box .rules-content .rule {
  font-size: 1rem !important;
  font-weight: normal !important;
}

.table-box .rules-content .rule * { /* Ensures nested elements inherit base font size and weight */
  font-size: inherit !important;
  font-weight: inherit !important;
}

.table-box .rules-content .rule + .rule {
  border-top: 1px solid rgba(var(--glj-hot-pink), .3);
  margin-top: 30px;
  padding-top: 0px;
}

.table-box .rules-content ul {
  padding-left: 40px;
  list-style-position: outside;
  margin: 0;
}

.table-box .rules-content p {
  margin: 25px 0 5px;
}

/* Optional modifiers */
.table-box .tight-cell {
  flex: 0 1 auto;
  width: fit-content;
  min-width: 0;
  padding: 0.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  overflow: hidden;
}

.table-box .tight-cell img {
  max-width: 100%;
  max-height: clamp(80px, 20vw, 160px);
  height: auto;
  object-fit: contain;
  flex-shrink: 1;
  min-width: 0;
}

.table-box .hide-inner-border {
  border-left: none;
  border-right: none;
}

/* === Challenge Box === */
.challenge-box .border-only {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.challenge-box .inner-border {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* === Image Styling === */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.text-center img {
  display: block;
  margin: 0 auto;
}

/* === Scrollbar Styling === */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(var(--glj-hot-pink), .6);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(var(--glj-hot-pink), .8);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--glj-hot-pink), .6) transparent;
}