/*
 * Base structure
 */

body {
  font-family: "Merriweather Sans", "Helvetica Neue", Verdana, Arial, sans-serif;
    padding-bottom: 60px; /* adjust to match your bottom bar height */
}

main {
    margin-top: 0px;
    padding-top: 66px; /* Can't use 1em margin, so add some pixels here. 16 point font size = 16 pixels per em. */

    /* Margin bottom by footer height */
    /*   margin-bottom: 66px; /* 50px + 1 em; */

    /* show scrollbars only when content gets clipped */
    overflow: auto;
}

/* top navbar rules */
.navbar {
  background-color: #eceeef;
}

/* Sticky footer rules */
body, html {
  position: relative;
  min-height: 100%;
}

/* ADD NOCARET TO <LI> !! wheee! */
.nocaret .dropdown-toggle:before,
.nocaret .dropdown-toggle:after {
    display:none;
}

/* true custom styles */
.jumbotron {
    /* top right bottom left */
    padding: 3em 2em 3em 2em;
    background-color: #eceeef;  
    margin-bottom: 1em;
}

.footer {
    /* top right bottom left */
    /*margin-top: 5em;*/
    padding-top: 1em;
    padding-bottom: 1.5em; /* Change this to 3 if you're not usingafixed bottom footer. */
    padding-left: 2em;
    padding-right: 2em;
    
    background-color: #eceeef;
    max-height: 3em;
    min-height: 3em;
    height: 3em;
}

#custom-prompt {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
}

#custom-prompt-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

#custom-prompt-message {
  margin-bottom: 10px;
}

#custom-prompt-input {
  display: block;
  margin-bottom: 10px;
  width: 100%;
  padding: 5px;
  font-size: 16px;
}

#custom-prompt-ok {
  display: block;
  margin: 0 auto;
  padding: 5px 10px;
  border-radius: 3px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
}

/* Here's the hovering word thing for stories. */
/* Base style – you can keep this empty or set a default look */
.storyword {
    /* 1️⃣ Make it behave like a tiny block so we can give it margins */
    /*display: inline-block;*/

    /* 2️⃣ Horizontal space between consecutive words */
    margin-left: 0.1em;           /* ≈ the width of a normal space */

    /* 3️⃣ Vertical space between lines (double‑spacing) */
    line-height: 1.5em;
    font-size: 1.5em;

    /* 4️⃣ Keep the cursor looking like selectable text */
    cursor: pointer;

    /* 5️⃣ Optional: a tiny bit of inner padding so the hover background
         doesn’t hug the letters too tightly */
    padding: 0 0.1em;              /* left/right padding only */

    /* 6️⃣ Smooth transition for the hover effect */
    transition: background-color .2s ease;
}

/* Hover style – what the user sees when the mouse is on the span */
.storyword:hover {
    /* Choose ONE of the three “highlight” tricks (or combine them) */
    background-color: rgba(255, 235, 0, 0.3);   /* light yellow “glow” */
    /* background-color: #ffeb3b;               /* solid yellow */
    /* text-decoration: underline;               /* underline */
    /* color: #d32f2f;                          /* change the text colour */
}

/* Optional – a smooth fade when the mouse enters/leaves */
.storyword {
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* In the reader, only words linked to a dictionary entry (sw-link) are
   interactive. A subtle dotted underline marks them as learnable; plain words
   keep the same typography but no pointer/hover. (The tagger leaves every word
   as a bare .storyword, so it is unaffected.) */
.storyword.sw-link {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.25);
}
.storyword.sw-plain {
    cursor: default;
}
.storyword.sw-plain:hover {
    background-color: transparent;
}