/*────────────────────────────────────────────────────────────────────────
  DESIGN TOKENS
─────────────────────────────────────────────────────────────────────────*/

:root {
  /* Colours */
  --clr-bg-main: #1A1A1A;
  --clr-bg-overlay-top: rgba(0, 0, 0, .70);
  --clr-bg-overlay-bot: rgba(0, 0, 0, .50);
  --clr-panel: rgba(43, 48, 53, .50);
  --clr-panel-solid: #2B3035;
  --clr-border: rgba(85, 85, 85, .70);
  --clr-text-main: #DCE4EB;
  --clr-text-light: #E0E0E0;
  --clr-link: #8CB4FF;
  --clr-link-visited: #C3A5FF;
  --clr-link-lightbg: #335FD8;
  --clr-link-lightbg-hover: #4D82FF;
  --clr-accent: #2A9FD6;

  /* Sizes */
  --fs-body: 1rem;
  --fs-navbar: .9rem;
  --pad-x: .5rem;
  --pad-y: .1rem;
  --radius: .25rem;
  --choices-width: 28rem;

  /* Z-layers */
  --z-dropdown: 999;
  --z-chatbot: 999;
}

/*────────────────────────────────────────────────────────────────────────
  GLOBAL ELEMENTS
─────────────────────────────────────────────────────────────────────────*/

html {
  font-size: var(--fs-body);
  scroll-padding-top: 8.5rem;
}

body {
  color: var(--clr-text-main);
  background: linear-gradient(var(--clr-bg-overlay-top), var(--clr-bg-overlay-bot)),
  url("images/inanna-background.webp");
  background-color: var(--clr-bg-main);
  background-size: cover;
  background-position: center 2rem;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a {
  color: var(--clr-link);
}

a:visited {
  color: var(--clr-link-visited);
}

figcaption {
  color: #F0DCE1;
}

h2 {
  clear: both;
}

/*────────────────────────────────────────────────────────────────────────
  NAVBAR
─────────────────────────────────────────────────────────────────────────*/

.navbar {
  background: transparent;
  backdrop-filter: blur(.5rem) brightness(.70);
  font-size: var(--fs-navbar);
}

/* Dim inactive navbar links more to highlight the active link */
.navbar .nav-link:not(.active) {
  opacity: .7;
}

.navbar-brand img {
  height: 4rem;
  max-height: none;
  filter: drop-shadow(0 0 .2rem rgba(255, 255, 255, .50)) brightness(2);
}

/*────────────────────────────────────────────────────────────────────────
  HERO ELEMENTS
─────────────────────────────────────────────────────────────────────────*/

.tagline {
  font-size: 1.5rem;
  font-style: italic;
  color: #F07178;
  line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .50);
}

/*────────────────────────────────────────────────────────────────────────
  IMAGES
─────────────────────────────────────────────────────────────────────────*/

.img-float-left {
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
}

.img-qrcode {
  float: left;
  height: 7rem;
  padding-top: .5rem;
  margin-right: 1.5rem;
}

/*────────────────────────────────────────────────────────────────────────
  FORM — SHARED FIELD STYLES
─────────────────────────────────────────────────────────────────────────*/

fieldset {
  margin-bottom: .5rem;
  padding: .5rem;
  border: 1px solid #444;
  border-radius: var(--radius);
}

fieldset legend {
  margin-bottom: .8rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--clr-text-light);
}

/* Add space below form labels and style legends */
label {
  display: inline-block;
  margin-bottom: .2rem;
}

input[type="text"],
input[type="number"],
input[type="email"],
select,
textarea {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--clr-panel);
  color: var(--clr-text-main);
  border: solid var(--clr-border);
  border-radius: var(--radius);
  padding: var(--pad-y) var(--pad-x);
  line-height: 1.5;
}

/* Extra space below the input/select/textarea fields */
input[type="text"],
input[type="number"],
input[type="email"],
textarea,
select {
  margin-bottom: .5rem;
}

/* Add a little extra top margin to the "Nationality" label */
label[for="nationality"] {
  margin-top: .3rem;
}

/* Add a little extra top margin to the "Your post" label */
label[for="post-content"] {
  margin-top: .3rem;
}

#age {
  width: 6em;
}

#education,
#profession,
#post-author,
.choices {
  width: var(--choices-width);
}

/* Focused input fields */
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus,
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--clr-link);
  box-shadow: 0 0 0 .2rem rgba(42, 159, 214, .25);
  outline: none;
}

/* Inner dot + ring turn blue */
input[type="radio"] {
  accent-color: var(--clr-link);
}

/* Blue glow for focused radio button */
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .15rem rgba(42, 159, 214, .65);
  border-radius: 50%;
}

/* Placeholder colour */
::placeholder {
  color: #777;
}

/*────────────────────────────────────────────────────────────────────────
  CALLOUT NOTES
─────────────────────────────────────────────────────────────────────────*/

/* Force callout text to use the site’s normal body colour */
.callout-note,
.callout-note .callout-header,
.callout-note .callout-body {
  color: var(--clr-text-main);
}

/* Darken the note panel a bit so it stands out */
.callout-note.appearance-simple {
  background-color: var(--clr-panel);
  border-color: var(--clr-border);
}

.callout-note blockquote {
  background-color: var(--clr-panel);
  color: var(--clr-text-main);
  border: solid var(--clr-border);
  border-radius: var(--radius);
  padding: .5rem 1rem;
  margin: 0 0 1rem 0;
}

/* Remove the default “italic grey” styling many browsers apply */
.callout-note blockquote > :first-child {
  margin-top: 0;
}

/*────────────────────────────────────────────────────────────────────────
  CHOICES.JS DROPDOWN
─────────────────────────────────────────────────────────────────────────*/

/* 2 — hide the vanilla <select> that Choices.js wraps */
.choices select {
  display: none;
}

.choices__inner {
  width: 100%;
  position: relative;
  font-size: inherit;
  background-color: var(--clr-panel);
  color: var(--clr-text-main);
  border: solid var(--clr-border);
  border-radius: var(--radius);
  padding: var(--pad-y) var(--pad-x);
  min-height: auto;
}

.choices__input,
.choices__placeholder {
  background-color: transparent;
  color: var(--clr-text-main);
  padding: var(--pad-y) var(--pad-x);
}

.choices[data-type*="select-one"]::after {
  border-color: var(--clr-text-main) transparent transparent transparent;
}

.choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent var(--clr-text-main) transparent;
}

/* Keep dropdown hidden until activated */
.choices__list--dropdown,
.choices__list[aria-expanded] {
  display: none;
  position: absolute;
  z-index: var(--z-dropdown);
  width: var(--choices-width);
  max-height: 15.8em;
  overflow-y: auto;
  background-color: var(--clr-panel-solid);
  border: 1px solid var(--clr-border);
}

/* Show when the container gains .is-open */
.choices.is-open .choices__list--dropdown,
.choices.is-open .choices__list[aria-expanded] {
  display: block;
}

/* Left-padding for every row */
.choices__list--dropdown .choices__item {
  padding-left: var(--pad-x);
}

/* Highlighted option */
.choices__item--selectable.is-highlighted {
  background-color: var(--clr-accent);
  color: #FFF;
}

/*────────────────────────────────────────────────────────────────────────
  EASYMDE MARKDOWN EDITOR
─────────────────────────────────────────────────────────────────────────*/

.editor-toolbar {
  background-color: var(--clr-panel-solid);
  border: solid var(--clr-border);
  border-bottom: none;
  opacity: .90;
}

.editor-toolbar i {
  color: var(--clr-link-visited);
}

.editor-toolbar .separator {
  border-left: 1px solid var(--clr-link-visited);
  opacity: .50;
}

.CodeMirror,
.editor-preview {
  background-color: var(--clr-panel);
  color: var(--clr-text-main);
  border: solid var(--clr-border) !important;
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

.CodeMirror-cursor {
  border-left: 3px solid var(--clr-text-main);
}

.CodeMirror .CodeMirror-selected,
.CodeMirror-focused .CodeMirror-selected,
.editor-preview ::selection {
  background-color: rgba(138, 180, 248, .35) !important;
}

.editor-statusbar {
  color: var(--clr-link-visited);
  font-size: .8rem;
  font-weight: bold;
}

/*────────────────────────────────────────────────────────────────────────
  COMMUNITY POST CARDS
─────────────────────────────────────────────────────────────────────────*/

.post-card {
  font-size: .8rem;
  padding: var(--pad-y) var(--pad-x);
  border: solid var(--clr-border);
  border-radius: var(--radius);
  margin-bottom: .5rem;
}

#posts-container,
.post-card,
.post-card header,
.post-card .timestamp,
.post-card .body {
  background-color: var(--clr-panel);
}

.post-card header,
.post-card .timestamp {
  color: var(--clr-link-visited);
}

.post-card .body {
  color: var(--clr-text-main);
  word-break: break-word;
  margin-top: .5rem;
}

.post-card ::selection {
  background-color: rgba(138, 180, 248, .35);
}

/*────────────────────────────────────────────────────────────────────────
  SUBMIT BUTTON
─────────────────────────────────────────────────────────────────────────*/

form button[type="submit"] {
  display: inline-block;
  margin-top: .5rem;
  padding: .8rem 1.8rem;
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--clr-text-light);
  /* Dark blueish color at 50% transparency */
  background-color: rgba(40, 50, 80, .5);
  /* Gold border, slightly more opaque for visibility */
  border: solid rgba(255, 215, 0, .45);
  border-radius: var(--radius);
  /* Adds a subtle shadow to text for depth */
  text-shadow: 0 0 5px rgba(0, 0, 0, .7);
  cursor: pointer;
  /* Golden Glow Effect */
  box-shadow: 0 0 10px 2px rgba(255, 215, 0, .35), inset 0 0 6px rgba(255, 215, 0, .15);
  transition: background .3s, box-shadow .3s, color .3s, border-color .3s;
}

form button[type="submit"]:hover {
  /* Slightly lighter/more opaque blue on hover */
  background-color: rgba(55, 70, 100, .65);
  /* Brighter text on hover */
  color: #FFF;
  /* Brighter gold border on hover */
  border-color: rgba(255, 215, 0, .70);
  /* Intensified gold glow */
  box-shadow: 0 0 15px 4px rgba(255, 215, 0, .55), inset 0 0 10px rgba(255, 215, 0, .25);
}

/*────────────────────────────────────────────────────────────────────────
  MODAL CITATION DIALOG
─────────────────────────────────────────────────────────────────────────*/

#citationModal .modal-title {
  color: var(--clr-bg-main);
}

#citationModal .modal-content {
  background-color: var(--clr-bg-main);
  color: var(--clr-text-light);
}

#citationModal .modal-body {
  color: var(--clr-bg-main);
}

#citationModal .modal-body a {
  color: var(--clr-link-lightbg);
}

#citationModal .modal-body a:hover {
  color: var(--clr-link-lightbg-hover);
}

#citationModal .quarto-appendix-secondary-label {
  color: var(--clr-bg-main);
}

#citationModal pre {
  background-color: var(--clr-bg-main);
  border: 1px solid var(--clr-border);
  padding: var(--pad-y) var(--pad-x);
  border-radius: var(--radius);
  overflow-x: auto;
}

#citationModal pre code {
  color: var(--clr-text-light);
}

#citationModal .code-copy-button i {
  color: var(--clr-text-light);
}

/* Hide Quarto’s auto-inserted appendix with the citation panel */
#quarto-appendix {
  display: none;
}

/*────────────────────────────────────────────────────────────────────────
  CHATBOT WIDGET
─────────────────────────────────────────────────────────────────────────*/

#chatbot-container {
  pointer-events:none;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: var(--z-chatbot);
}

/* The floating button to open the chat */
.open-chat-btn {
  pointer-events:auto;
  background-color: rgba(42, 159, 214, .70);
  color: white;
  border: none;
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
  font-size: 1.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .30);
  transition: all .2s ease-in-out;
}

.open-chat-btn:hover {
  background-color: rgba(42, 159, 214, 1);
  transform: scale(1.1);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

/* The main chat window */
.chat-window {
  pointer-events:none;
  width: 370px;
  max-width: 90vw;
  height: 70vh;
  max-height: 600px;
  background-color: rgba(33, 37, 41, .70);
  backdrop-filter: blur(.5rem);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius);
  box-shadow: 0 5px 20px rgba(0, 0, 0, .40);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Start hidden and scale down for animation */
  transform: scale(0);
  transform-origin: bottom right;
  transition: transform .3s ease-in-out, opacity .3s ease;
  opacity: 0;
  font-size: .9rem;
}

/* Class to make the window visible */
.chat-window.is-open {
  pointer-events:auto;
  transform: scale(1);
  opacity: 1;
}

/* Chat Header */
.chat-header {
  padding: .75rem 1rem;
  background-color: rgba(0, 0, 0, .20);
  border-bottom: 1px solid var(--clr-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--clr-text-light);
  font-weight: bold;
}

.close-chat-btn {
  background: none;
  border: none;
  color: #AAA;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* Chat Body (where messages appear) */
.chat-body {
  flex-grow: 1;
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.chat-message {
  padding: .5rem 1rem;
  border-radius: 1rem;
  max-width: 85%;
  line-height: 1.5;
}

.chat-message p {
  margin: 0;
}

.user-message {
  background-color: var(--clr-accent);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: .2rem;
}

.ai-message {
  background-color: var(--clr-panel);
  color: var(--clr-text-main);
  align-self: flex-start;
  border-bottom-left-radius: .2rem;
}

/* Chat Footer (input area) */
.chat-footer {
  padding: .5rem;
  border-top: 1px solid var(--clr-border);
  background-color: rgba(0, 0, 0, .20);
}

.chat-form {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
}

#chat-input {
  flex-grow: 1;
  background-color: var(--clr-panel);
  color: var(--clr-text-main);
  border: solid var(--clr-border);
  border-radius: var(--radius);
  padding: .5rem 1rem;
  outline: none;
  resize: none;
  max-height: 8rem;
  overflow-y: auto;
}

#chat-input:focus {
  border-color: var(--clr-link);
  box-shadow: 0 0 0 .2rem rgba(42, 159, 214, .25);
}

#chat-submit-btn {
  background: transparent;
  border: solid rgba(255, 215, 0, 0.45);
  border-radius: 50%;
  color: var(--clr-accent);
  font-size: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color .3s ease;
  box-shadow: 0 0 8px 1px rgba(255, 215, 0, .30);
}

#chat-submit-btn:hover {
  color: #FFF;
  border-color: rgba(255, 215, 0, .7);
  background-color: rgba(40, 50, 80, .5);
  /* Intensified gold glow on hover */
  box-shadow: 0 0 12px 2px rgba(255, 215, 0, .5);
}

/*────────────────────────────────────────────────────────────────────────
  UTILITIES
─────────────────────────────────────────────────────────────────────────*/

.w-12rem {
  width: 12rem;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* Adjust font size of the "Cookie Preferences" link to match other footer text */
#open_preferences_center {
  font-size: .8rem;
}