/* =========================================================
  GLOBAL LAYOUT
   ========================================================= */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
/* background-image: url("/images/parchment.jpg");  --- Will change colour of search.html background*/
  /* overrides earlier background-color */
  display: flex;
  height: 100vh;
  overflow: hidden;
  background-color: #fbde81 !important;
}

.container {
  margin-top: 100px;
  /* drops text below nav bar on all pages */
  z-index: 9;
}

/* .accordion-body p consolidated later with font-weight; see the "Global accordion-body style" block below. */
/* =========================================================
   Utility Text
   ========================================================= */

/* Romhm text styles */
.romhm-text {
  font-size: 1rem;
  color: #ec0909;
  margin: 8px 0;
  padding: 6px 10px;
  font-weight: 500;
  align-content: center;
  /* background: #f0dd0a; 
  border-left: 3px solid #ddd;
  border-radius: 2px;
  height: 35px; */
}

/* No data message styles */
.no-data-message {
  background-color: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  padding: 16px;
  margin: 16px 0;
  color: #856404;
  font-size: 1rem;
  text-align: center;
}

/* Copyright message styles */
.copyright-text {
  font-size: 0.85rem;
  color: #1b0909;
  margin-top: 12px;
  font-weight: 800;
  text-align: center;
  font-style: italic;
}

/* =========================================================
  IMAGE & FIGURE STYLES 
   ========================================================= */

/* Image and figure styles */
figcaption {
  color: black;
  font-weight: bold;
}

.centered-figure {
  text-align: center;
  margin: 16px 0;
 /*  padding: 0; */
}

.centered-figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.image-col img {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Link container styles */
.link-container {
  margin: 16px 0;
  padding: 12px;
  /* background: #f9f9f9; */
  border: 1px solid #e0e0e0;
  border-radius: 9px;
  width: fit-content;

}

.link-container a {
  display: block;
  margin: 8px 0;
  color: #0b61a4; /* More imformation ... text colour */
  text-decoration: none;
  font-size: 0.95rem;
  word-break: break-word;
 text-decoration: none;					   
}

.link-container a:hover {
  text-decoration: underline;
  color: #084a84;
  text-decoration: none; /* No underline on short history links*/
   color: #1368a8; /* Same color text as link-container on short history links*/
}
															 
/* Image row and column styles */
.image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 16px 0;
 /*  align-items: center; */
  justify-content: center;

  /* 15th March TBI -suggestion from chat for responsive layout: 
  .image-row img {
  max-width: 100%;
  height: auto;
} */
}

.image-col {
  /* flex: 0 1 auto; */
  min-width: 250px;
  text-align: center;
}



/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar {
  position: fixed;
  left: 0;
  height: 100vh;
  width: 250px;
  background: #fbde81;
  color: #7f1629;
  padding: 75px 5px 0;
  /* Drops side bar 75px down so it's not hidden by nav bar */
  overflow-y: auto;
  scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

/* =========================================================
   SIDEBAR ACCORDION — Bootstrap Overrides 
   ========================================================= */

/* Remove Bootstrap borders/shadows */
.accordion-item {
  border: none !important;
  background: transparent !important;
}

/* Global accordion-button look */
.accordion-button {
  color: #7f1629 !important;
  /*Text colour for accordion*/
  font-weight: 500;
  background-color: #fbde81 !important;
  /*Background colour for accordion*/
}

.accordion-button:not(.collapsed) {
  color: #7f1629 !important;
  font-weight: 800 !important;
  background-color: #fbde81 !important;

  .accordion-button:focus {
    box-shadow: none !important;
  }
}
/* Sidebar accordion arrows */
.sidebar .accordion-button::before {
  color: #7f1629;
}

/* Arrow rotates when open but not needed now, arrow changes colour on hover -
.accordion-button:not(.collapsed)::before {
  transform: rotate(180deg);
}
*/
/* Remove Bootstrap borders/shadows */
.accordion-item {
  border: none !important;
  background: transparent !important;
}

/* Global accordion-body style */
.accordion-body {
  background-color: #fbde81;
  /*Background for accordion-body when open */
}

.accordion-body p {
  color: #7f1629;
  font-weight: 500;
}

.accordion-header h2 {
  font-weight: 500;
}

.accordion-body h2 {
  font-size: 25px !important;
  color: #7f1629 !important;
  font-weight: 500 !important;
}

/* =========================================================
   SDEBAR ACCORDION OVERRIDES
   ========================================================= */

.sidebar .accordion-button {
  background: #7f1629 !important;
  color: #fbde81 !important;
}

.sidebar .accordion-button:hover {
  background: #fbde81 !important;
  color: #7f1629 !important;
  border-radius: 10px;
  /* font-weight: 500; */
  /* box-shadow: none; */
}

.sidebar .accordion-button:not(.collapsed) {
  background: #fbde81 !important;
  /*Years range  background when open*/
  color: #7f1629 !important;
  /*Years range text when open*/
}

.sidebar .accordion-body {
  background: #fbde81 !important;
  /*Year and title background when open*/
  padding: 0;
}

/* =========================================================
   SIDEBAR LINKS
   ========================================================= */
.sidebar .nav-link {
  padding: 8px 20px;
  color: #fbde81;
  /*Year & Title text */
  transition: background 0.3s;
  font-size: 15px !important;
  /* nav-link only on side-bar */
  font-weight: 500;
}

.sidebar .nav-link:hover {
  background: #fbde81;
  color: #7f1629 ;
  border-radius: 10px;
  font-weight: 500;
  /*  font-size: 15px !important;
  nav-link only on side-bar */
}

.sidebar i {
  margin-right: 8px;
}

/* =========================================================
   MAIN SECTION
   ========================================================= */
.main {
  margin-left: 250px;
  flex: 1;
  display: flex;
  /*2 lines belowadded 18th March to put images in a row*/
  flex-direction: column;
  align-items: stretch;

  justify-content: center;
  align-items: center;
  background: #fbde81;

  /* overflow: hidden; */
}

/* =========================================================
   TIMELINE CONTAINER
   ========================================================= */
#autoTimelineWrap {
  position: relative;
  width: 100%;
  height: 80%;
  background: #fbde81;
  border-radius: 20px;
  overflow: hidden;
  /* box-shadow: #74af37; */
}

#autoTimelineTrack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  /* transition: none; */
  will-change: transform;
}

/* =========================================================
   TIMELINE CARDS
   ========================================================= */
/* .timeline-section::before {
  content: "";
  display: block;
  height: 70px;
  margin-top: -70px;
}
*/

.card {
  width: 85%;
  border-radius: 25px;
  box-shadow: 6px -6px 15px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  margin: 0 auto;
}

.card-body {
  background: #fbde81;
Background for card body used for People and Places accordion text.
  padding: 1rem;
  border-radius: 8px;
 }

.timeline-h1 {
  color: #7f1629;
  font-size: 2rem;
  text-align: center;
  margin-bottom: 0.5rem;
}

.timeline-p {
  color: #7f1629;
  font-size: 1.1rem;
  text-align: justify;
  padding: 0 1rem;
}


/* =========================================================
   LINK CONTAINER
   ========================================================= */
.link-container::before {
  color: black;
  content: "More information at ......\00a0";
  font-weight: 600;
 
}

/* =========================================================
   SCROLL ARROWS
   ========================================================= */
.scroll-arrow {
  position: absolute;
  right: 10px;
  width: 40px;
  height: 40px;
  border: none;
  background: #7f1629;
  color: #fbde81;
  font-size: 24px;
  cursor: pointer;
  z-index: 1000; /* Leave in, if removed scroll arrows don't work */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s,
    transform 0.2s;
}

.scroll-arrow:hover {
  background: #fbde81;
  color: #7f1629;
  transform: scale(1.1);
}

#scrollUp {
  top: 30%;
}

#scrollDown {
  bottom: 30%;
}
/* =========================================================
   NAVBAR
   ========================================================= */
/*Nav-bar only */

.navpage .navbar {
  background: #fbde81;
  color: #7f1629;
}

/* Nav links */
.nav-link {
  color: #fbde81;
  font-size: 25px;
  font-weight: 400;
  background-color: #7f1629;
  margin-right: 10px;
  border-radius: 10px;
  justify-content: center;
}

.nav-link:hover {
   font-size: 25px;
  background: #fbde81; !important;
  color: #7f1629;!important;
  font-weight: 400;
  box-shadow: none;
  border-radius: 10px;
}

/* Page background + font styling */
.navpage .nav-link {
  background-color: #fbde81;
  font-size: 25px;
}

/* navbar brand style */
.navbar-brand {
  color: #fbde81;
  background-color: #7f1629;
  font-size: 25px;
  display: flex;
  align-items: center;
  /* vertical centering */
  height: 100%;
  /* match navbar height */
}

.navbar-brand:hover {
  color: #7f1629;
  background-color: #fbde81;;
  font-size: 25px;
  display: flex;
  align-items: center;
  /* vertical centering */
  height: 100%;
  /* match navbar height */
}

.navbar-nav {
  padding-left: 100px;
  /*Moves top menu to right, more central*/
}



/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */
@media (max-width: 768px) {
  .sidebar {
    width: 200px;
  }

  .main {
    margin-left: 200px;
  }

  .card {
    width: 90%;
  }

  .timeline-h1 {
    font-size: 1.5rem;
  }

  .timeline-p {
    font-size: 1rem;
  }
}

/* =========================================================
   TIMELINE VIEWER STYLES (yearmaster.js)
   ========================================================= */

/* Timeline viewer body overrides */
.timeline-viewer-body {
  font-family:
    Segoe UI,
    Roboto,
    Arial;
  max-width: 980px;
  margin: 24px auto;
  padding: 0 16px;
  color: #222;
}

.timeline-viewer-controls {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
/* make search category.html radio buttons vertical*/
.category-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Make the year label bold */
.timeline-viewer-controls label[for="year"] {
  font-weight: 700;
}

.timeline-viewer-input {
  padding: 8px 10px;
  font-size: 16px;
 /*  flex: 0 0 180px; */ 
}

.timeline-viewer-button {
  padding: 8px 12px;
/*   font-size: 15px; */
}

/* Not sure if this is used, doesn't seem to be the "Found xx entries" notice. Commented out 12th March 2026 
.timeline-notice {
  color: #03e950;
  margin: 8px 0;
}


.timeline-pre {
  background: #f7f7f7;
  padding: 12px;
  border-radius: 6px;
 /* overflow: auto; */
}

/* Timeline entry styles */
.timeline-viewer-body .timeline-h1 {
  /* Viewer-specific override: slightly smaller than site base. */
  font-size: 1.6rem;
  margin: 8px 0;
  color: #7f1629;
}

.timeline-viewer-body .timeline-p {
  /* Viewer-specific paragraph style: different color/spacing for viewer layout. */
  font-size: 1rem;
  margin: 6px 0;
  color: #333;
}