/* Conform styles to our app branding
/* From https://gitlab.com/geospan/ux-common/-/blob/main/src/theme.js
*/

:root {
    /* Primary Colors */
    --primary-50: #FFF5E9;
    --primary-100: #FFEED5;
    --primary-200: #FFE2B7;
    --primary-300: #FFCE85;
    --primary-400: #FAB246;
    --primary-500: #E39622;
    --primary-600: #CA8011;
    --primary-700: #9A5D00;
    --primary-800: #6A4000;
    --primary-900: #3E2600;
  
    /* Warning Colors */
    --warning-50: #FEFAE6;
    --warning-100: #FEF6CD;
    --warning-200: #FDF2B4;
    --warning-300: #FCE469;
    --warning-400: #F9D205;
    --warning-500: #E1BE05;
    --warning-600: #967F03;
    --warning-700: #967F03;
    --warning-800: #4B3F01;
    --warning-900: #322A01;
  
    /* CUSTOM COLORS FOR HIJINKS */
    /* https://www.figma.com/design/I1ZBS8HHLpfCaEw7gltmwH/Hijinks---Component-Library?node-id=4039-7&p=f&m=dev */
    --CODE-BLOCK-BG-color: #171A1C;
    --INTERNAL-MAIN-font: 'Inter', sans-serif;
    --INTERNAL-MAIN-BG-color: #000000;
    --INTERNAL-MAIN-TEXT-color: #cccccc;
    --INTERNAL-MAIN-LINK-color: #cccccc;
    --INTERNAL-MAIN-TITLES-TEXT-color: #cccccc;
    --INTERNAL-MAIN-TITLES-H1-color: #cccccc;
    --INTERNAL-MAIN-TITLES-H2-color: #cccccc;
    --INTERNAL-MAIN-TITLES-H3-color: #cccccc;
    --INTERNAL-MAIN-TITLES-H4-color: #cccccc;
    --INTERNAL-MAIN-TITLES-H5-color: #cccccc;
    --INTERNAL-MAIN-TITLES-H6-color: #cccccc;
    --INTERNAL-CODE-BLOCK-BG-color: #171A1C;



    /* Typography */
    background-color: var(--INTERNAL-MAIN-BG-color);
    color: var(--INTERNAL-MAIN-TEXT-color);
    font-family: var(--INTERNAL-MAIN-font);
    font-family: var(--INTERNAL-MAIN-font);
    font-size: 16px;
    line-height: 1.6;
    background-color: var(--INTERNAL-MAIN-BG-color);
    color: var(--INTERNAL-MAIN-TEXT-color);
}
 
/* Rounded corners */
* {
    border-radius: 8px; 
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--INTERNAL-MAIN-TEXT-color);
  text-transform: none;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

/* Links */
a {
  color: var(--INTERNAL-MAIN-LINK-color);
}

a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
  filter: brightness(50%);
}

/* Table Styles */
table {
  background-color: var(--INTERNAL-MAIN-BG-color);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

table th, table td {
  padding: 0.75rem;
  text-align: left;
}

table th {
  font-weight: 600;
}

/* Button Styles */
.button {
  /* Base styles */
  border: 1px solid transparent;
  transition: background-color 0.2s, border-color 0.2s;
}

/* Solid variant */
.button--solid {
  color: #000000;
  background-color: var(--primary-400);
}

.button--solid:hover {
  background-color: var(--primary-500);
}

.button--solid:active {
  background-color: var(--primary-600);
}

/* Soft variant */
.button--soft {
  color: #000000;
  background-color: #FFFFFF;
}

.button--soft:hover {
  background-color: var(--primary-200);
}

.button--soft:active {
  background-color: var(--primary-300);
}

/* Outlined variant */
.button--outlined {
  color: #FFFFFF;
  border-color: #9FA6AD;
  background-color: transparent;
}

.button--outlined:hover {
  border-color: var(--primary-300);
  background-color: #FAB24633;
}

.button--outlined:focus {
  border-color: var(--primary-300);
  background-color: #FAB2464D;
}

.button--outlined:active {
  border-color: var(--primary-400);
  background-color: #FAB24666;
}

/* Plain variant */
.button--plain {
  color: #FFFFFF;
  background-color: transparent;
}

.button--plain:hover {
  background-color: #FAB24633;
}

.button--plain:active {
  background-color: #FAB24666;
}


/* Button Styles */
.btn {
  border: 1px solid transparent;
  transition: background-color 0.2s, border-color 0.2s;
}

.btn--solid {
  color: var(--INTERNAL-MAIN-BG-color);
  background-color: var(--primary-400);
}

.btn--solid:hover {
  background-color: var(--primary-500);
}

.btn--solid:active {
  background-color: var(--primary-600);
}

button, .btn {
  font-family: var(--INTERNAL-MAIN-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--INTERNAL-MAIN-TEXT-color);
  background-color: var(--button-color);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover, .btn:hover {
  background-color: var(--button-hover-color);
}

button:disabled, .btn:disabled {
  background-color: var(--INTERNAL-MAIN-TEXT-color);
  cursor: not-allowed;
}


/* 
*   END — Conform styles to our app branding
*/

/* 
*  Conform Hugo Theme variant colors to our app branding
*  From ../../themes/hugo-theme-relearn/static/css/variant.css
*  and ../../themes/hugo-theme-relearn/static/css/variant-internal.css
*/





/* Ensure paragraphs are left-aligned */

p {
    text-align: left;
}

body:not(.print) p {    
    text-align: left;
}

body:not(.print) #R-body-inner.narrow p{
    text-align: left;
}

/* Ensure all table columns have equal width */

#R-body table th,
#R-body table td {
    width: 33.33%;
}

/* Alternatively, you can set the second and third columns to equal width */
#R-body table th:nth-child(2),
#R-body table th:nth-child(3),
#R-body table td:nth-child(2),
#R-body table td:nth-child(3) {
    max-width: 50%;
}

/* Border radius default */
#R-body .tab-content-text > div.highlight:only-child > div, #R-body .tab-content-text > div.highlight:only-child pre:not(.mermaid), #R-body .tab-content-text > pre:not(.mermaid).pre-code:only-child{
    border-radius: 8px;
}

/* CUSTOM HOME PAGE LAYOUT */

#R-header-wrapper, #R-homelinks, #R-content-wrapper > * {
  border-inline-end-style: solid;
  border-inline-end-width: 0.75px;
}

#R-sidebar, #R-topics, #R-header-topbar, #R-header-wrapper, #R-homelinks, #R-content-wrapper, #R-menu-footer, #R-sidebar .footermargin {
  border-radius: 0;
}

/* CUSTOM TOPBAR */
/* Rest of elements */
table {
  background-color: var(--INTERNAL-MAIN-BG-color);
}

.lightbox-back img {
  background-color: var(--INTERNAL-MAIN-BG-color);
}

#R-topbar {
  background-color: var(--INTERNAL-MAIN-BG-color);
  border-bottom-color: var(--INTERNAL-MAIN-TOPBAR-BORDER-color);
}

.topbar-content {
  background-color: var(--INTERNAL-MAIN-BG-color);
}



/* CUSTOM SIDEBAR BREADCRUMBS */

#R-topbar > div > ol > li > a {
  font-weight: 200;
}

#R-topbar > div > ol > li:last-child {
  font-weight: 500;
}

.topbar-sidebar-divider::after {
  content: "";
}

.sidebar-flyout body {
  border-radius: 0 8px 8px 0;
}

.sidebar-flyout > #warning-container {
  border-radius: 0;
}

/* CUSTOM CODE NO BORDERS */
code, span.copy-to-clipboard, code.copy-to-clipboard-code, span.copy-to-clipboard-button {
  border: none;
}

/* CUSTOM REVERTING CODE BLOCKS FROM CUSTOM THEME TO DEFAULT RELEARN THEME */
#R-body .tab-panel {
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}

#R-body .tab-nav {
  display: flex;
  flex-wrap: wrap;
}

#R-body .tab-nav-title {
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.42857143;
  padding: .2rem 0;
  /* margin-inline-start: .6rem; */
}

#R-body .tab-nav-button {
  appearance: none;
  background-color: transparent;
  border: 1px solid transparent;
  display: block;
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.42857143;
  /* margin-inline-start: .6rem; */
}

#R-body .tab-nav-button > .tab-nav-text {
  display: block;
  padding: .2rem .6rem 0 .6rem;
  border: unset;
  max-width: 25vw;
  text-wrap: wrap;
  text-align: left;
}

#R-body .tab-nav-button > .tab-nav-text:not(.active) {
  border: unset;
}

#R-body .tab-nav-button > .tab-nav-text, #R-body .tab-nav-button > .tab-nav-text:hover {
  border-bottom-color: transparent;
}

#R-body .tab-nav-button > .tab-nav-text {
  border-bottom-style: solid;
  border-bottom-width: .15rem;
  display: block;
  padding: .2rem .6rem 0 .6rem;
}

#R-body .tab-nav-button.active {
  border: 1px solid var(--VARIABLE-BOX-color);
  background-color: var(--VARIABLE-BOX-BG-color);
  border-radius: 8px 8px 0 0;
  border-color: var(--INTERNAL-CODE-BLOCK-color);
    border-bottom-color: transparent;
}

#R-body .tab-nav-button.active > .tab-nav-text {
  background-color: var(--VARIABLE-BOX-BG-color);
  border-bottom-color: transparent;
  border-radius: 1px 1px 0 0;
}

.tab-content-text p {
  color: var(--INTERNAL-MAIN-TEXT-color);
  font-style: italic;
}

#R-body .tab-nav-button {
  /* margin-inline-start: unset; */
}

/* CUSTOM MOBILE TABS */
@media (max-width: 796px) {

  /* Ensure #R-body adjusts to smaller screens */
  .tab-panel {
    display: flex;
    flex-wrap: wrap;
    /* Allow tabs to wrap onto new lines */
    gap: 8px;
    /* Add spacing between tabs */
    justify-content: space-between;
    /* Space out tabs */
  }

  .tab-panel .tab-nav {
    margin-bottom: -0.5rem;
  }

  /* Style individual buttons to adapt to smaller screens */
  .tab-panel .tab-nav-button {
    flex: 1 1 calc(33.333% - 8px);
    /* Make tabs responsive, 3 per row */
    min-width: 100px;
    /* Set a minimum width for usability */
    max-width: calc(50% - 8px);
    /* Max width to ensure wrapping */
    padding: 8px 12px;
    /* Add padding for touch targets */
    text-align: center;
    /* Center-align text */
    box-sizing: border-box;
    /* Include padding in width */
  }

  /* Ensure span.tab-nav-text doesn't overflow */
  .tab-panel .tab-nav-button>span.tab-nav-text {
    white-space: normal;
    /* Allow text to wrap */
    overflow-wrap: break-word;
    /* Enable word breaking */
    word-break: break-word;
    /* Fallback for older browsers */
    font-size: 12px;
    /* Adjust font size for smaller screens */
    line-height: 1.4;
    /* Improve readability */
  }

  /* Keep the last tab distinct and on the far right */
  .tab-panel .tab-nav-button:last-child {
    margin-left: auto;
    /* Push it to the far right */
    flex: none;
    /* Prevent it from resizing like other tabs */
    width: auto;
    /* Allow it to shrink to its content */
  }
}

/* CUSTOM REVERTING ADMONITIONS | STATIC ACTIONS | NOTICES */

/* Reset variables for div.notices to original theme or fallback values */

div.box.notices.cstyle {
  all: unset;

  /* BOX COLORS based on core colors */
  --INTERNAL-BOX-color: #FAB246;
  --INTERNAL-BOX-CAPTION-color: #FAB246;
  --INTERNAL-BOX-BG-color: var(--INTERNAL-MAIN-BG-color);
  --INTERNAL-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color)

  --INTERNAL-BOX-INFO-color: #FAB246;
  --INTERNAL-BOX-INFO-TEXT-color: #000000;

  --INTERNAL-BOX-WARNING-color: #C41C1C;
  --INTERNAL-BOX-WARNING-TEXT-color: #FFFFFF;

  --INTERNAL-BOX-NOTE-color: #FFEED5;
  --INTERNAL-BOX-NOTE-TEXT-color: #000000;

  --INTERNAL-BOX-TIP-color: #1F7A1F;
  --INTERNAL-BOX-TIP-TEXT-color: #FFFFFF;

  --INTERNAL-PRIMARY-color: #FFEED5;
  --INTERNAL-PRIMARY-TEXT-color: #000000;

  --INTERNAL-SECONDARY-color: #FAB246;
  --INTERNAL-SECONDARY-TEXT-color: #000000;

  --INTERNAL-ACCENT-color: #430A0A;
  --INTERNAL-ACCENT-TEXT-color: ##F7C5C5;

  --VARIABLE-BOX-color: var(--INTERNAL-BOX-color);
  --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color);
  --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
  --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-TEXT-color);


  display: block;
  border-radius: 8px;
  padding: 1px;
  margin: 1rem 0;
  font-family: var(--INTERNAL-MAIN-font);
  font-size: 14px;
  color: var(--VARIABLE-BOX-TEXT-color);
  background-color: var(--VARIABLE-BOX-color);
  border-color: var(--VARIABLE-BOX-color);

}

p > a > img {
  border-radius: 0;
}

div.notices.cstyle > .box-content {
  color: var(--INTERNAL-MAIN-TEXT-color);
  background-color: var(--INTERNAL-MAIN-BG-color);
  
}

div.notices.cstyle > .box-content, #R-body div.box > .box-content > :nth-last-child(1 of :not(:empty)),
#R-body div.box > .box-content > :nth-last-child(2 of :not(:empty)) {
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--INTERNAL-MAIN-BG-color);
  background-color: var(--INTERNAL-MAIN-BG-color);
  color: var(--INTERNAL-MAIN-TEXT-color);
}

div.notices.cstyle > .box-label {
  color: var(--INTERNAL-MAIN-BG-color);
}

#R-sidebar ul.collapsible-menu li.active > a {
  /* width:fit-content; */
  width: calc(94% + var(--bpx1)* 1px);
}

/* VERSION-SPECIFIC CONTENT STYLING */
/* General styling for version-specific content */

.custom-dropdown {
  position: fixed;
  right: 1rem;
  top: 1rem;
  display: flex;
  justify-content: left;
  align-items: center;
  height: fit-content;
  margin-top: 50px;
  z-index: 1;
  border-radius: 0;
}

.custom-dropdown select {
  margin-bottom: 0;
}

.version-select {
  appearance: none;
  background-color: #000000;
  color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
  border: 2px solid #7D1212;
  border-radius: 8px;
  padding: 0.5rem 1rem 0.5rem 1.75rem;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.version-select:hover {
  background-color: #1a1a1a;
}

.custom-dropdown::after {
  content: "▼";
  position: fixed;
  font-size: 0.75rem;
  padding-left: 8px;
  align-items: center;
  color: var(--INTERNAL-MENU-SECTIONS-LINK-color);
}

@media screen and (max-width: 959px) {
  .custom-dropdown {
    position: fixed;
    height: fit-content;
    margin-top: 3.75%;
    width: 66%;
    background: black;
    display: flex;
    justify-content: right;
    align-items: self-start;
    z-index: 1;
  }

  .custom-dropdown::after {
    display:none;
  }

  .flex-block-wrapper {
    margin-top: 8%;
  }
}

@media screen and (max-width: 767px) {  
  .custom-dropdown {
    width: revert;
    margin-top: 8%;
  }
}