/* ==== GLOBAL RESET ==== */
/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html, body {
 
  background-color: #738D73; /* or your chosen base color */
  font-family: helvetic, arial, sans-serif;
  line-height: 1;
  font-size: 18px;
}

/* Reset headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  line-height: 1; /* lock vertical rhythm */
}
 /* Reset lists */
header ul,
header li,
footer ul,
footer li {
  margin: 0;
  padding: 0;
  list-style: none;
}

 .site-title { height: 32px; }
.navbar     { height: 24px; }
.page-header{ height: 24px; }
.header-bar { height: 6px;  }
.footer-bar { height: 5px; }
/* Header container */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 86px;
  z-index: 5000;
  display: flex;
  flex-direction: column;  /* stack title + navbar */
  justify-content: center;
}
.site-title, .header-wrapper {
  position: relative;
  z-index: 20001;
}


/* Site title bar */
.site-title {
  font-size: 22px;
  line-height: 22px;
  font-weight: 400; 
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  background-color: #000;
  color: #CD5C5C;
}
/* Navbar */
.navbar {
  font-size: 18px;
  line-height: 18px;
  height: 24px;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  background-color: #404040;
  color: white;
}
.navbar {
  position: relative;
  z-index: 20000; /* must be higher than any page content */
}


/* Navbar links */
.navbar a {
  color: white;                /* always white text */
  font-size: 18px;
  line-height: 18px;           /* lock rhythm */
  height: 24px;                /* match navbar height */
  display: flex;
  align-items: center;         /* vertical centering */
  padding: 0 8px;              /* horizontal breathing room */
  text-decoration: none;
}
.navbar a:hover {
  color: #7799FF;              /* hover blue */
}
/* Nav list */
.nav-list {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 20px; /* <--- Control your exact spacing here in ONE place */
}

/* Nav links */
.nav-list a {
  display: flex;              /* flex for centering */
  align-items: center;
  height: 24px;               /* match navbar height */
  font-size: 18px;
  color: white;
  text-decoration: none;
  line-height: 18px;             /* consistent rhythm */
  padding: 0 4px;             /* horizontal breathing room */
}
  .nav-list li a:hover {
  color: #7799FF;
}

 .navbar a {
  position: relative;
  }
	/*dropdown list*/
 .nav-list li {
  position: relative;
  }


   
.site-title, nav a, footer {
  line-height: 1; /* stops flex from recalculating height */
}
/* In headfoot.css, increase specificity */


nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 1rem;
}
   
   
.nav-list li {
  flex: none; /* stops auto-stretching */
  position: relative;
}

footer {
  text-align: center;
  letter-spacing: 0; /* disables kerning shifts */
  font-feature-settings: "kern" off; /* optional, stabilises glyph spacing */
}

* {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
  


/* Hide dropdown by default */
 /*---DROPDOWN CONTENT---*/
  .dropdown-content {
  position: absolute;
  z-index: 9999;
  top: 100%; /* drops below the parent li */
  left: 0;
  margin-top: 0;
   display: none;
  background-color: #404040;
  min-width: 180px;
  list-style: none;
  padding: 0;
  margin: 0;
  top: calc(100% - 1px);  /* overlap by 1px */
  padding-bottom: 10px; /* gives breathing room at the bottom */
	  	 }
	 
	
.nav-list li.dropdown {
  position: relative;
}
	 
.nav-list li.dropdown > a {
  display: flex;
  align-items: center;
  height:  24px; /* match navbar height */
  padding: 0 8px;
}

/*---DROPDOWN MENU---*/
/* Dropdown container */
.nav-list li.dropdown {
  position: relative;
    margin: 0;              /* no extra margin */
  padding: 0;
  height: 24px;
 }


/* Main tab stays on top */
.dropbtn {
  position: relative;
  z-index: 7000;   /* main tab on top */
}





/* ONLY show on hover if the device actually has a mouse/pointer */
@media (hover: hover) {
  .nav-list li.dropdown:hover .dropdown-content {
    display: block;
  }
}

/* For mobile: show when JS adds the active class */
.dropdown.active .dropdown-content {
  display: block !important;
}
   
.dropdown-content li a {
  display: block;
  padding: 8px 16px;
  color: white;
  text-decoration: none;
  white-space: nowrap;
}

.dropdown-content li a:hover {
  background-color: #606060;
  color: #7799FF;
}


/* ==== PAGE TITLE BAR ==== */
body.no-arrows .nav-arrow-button {
  display: none; /* hide arrows on pages with no-arrows */
}

body.with-arrows .nav-arrow-button {
  display: inline-flex; /* show arrows normally */
}

 .page-header {
  display: flex;
  justify-content: center;  /* horizontal centering */
  align-items: center;      /* vertical centering */
  height: 24px;             /* total height of bar */
  background-color: #000;
  color: #CD5C5C;
  margin: 0;
  position: relative;
   gap: 0.5rem; /* space between arrows and title */
  margin-top: 0; /* sits below fixed header */
  margin-bottom: 0px; /* space before vertical menu */
  text-align: center;
  background-color: #000000;
  z-index: 2;
  }
 /* Arrows inside header only need modest lift */
.page-header .nav-arrow {
  position: relative;
  z-index: 3; /* above the image, but below dropdowns */
}


 /* PAGE TITLE */
  .page-title-wrapper {
    margin-top: 86px; /* below header */
    text-align: center;
	  }
	  
.page-title {
  display: block;
  font-size: 17px;
  font-weight: 400;
  color: #CD5C5C;
  margin: 0;
  line-height: 1.2;
  padding: 2px 000;
  
   }
    
 /* Divider bar below page title */
.header-bar {
  width: 100%;
  height: 6px;
  background-color: #404040;
  
}
/* === NAV ARROWS FLANKING PAGE TITLE === */
.nav-arrow, 
.nav-arrow-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    margin: 0;
    line-height: 1;
    transition: color 0.3s ease;
	z-index: 3000;
}
.nav-arrow, #pause-btn, #resume-btn {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1rem;
  padding: 2px 4px;
}
.nav-arrow:hover, #pause-btn:hover, #resume-btn:hover {
  color: blue;
}

.nav-arrow-button:hover,
.nav-arrow:hover,
.page-header button:hover {
    color: blue;
}

/* === LABEL INSIDE ARROW BUTTONS === */
.nav-label {
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1;
	
}

/* === LEFT NAV ITEM (LAST MENU) === */
.left-nav-item {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

.left-nav-item a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s ease;
}
.left-nav-item a:hover {
    color: blue;
}

  
/* === OPTIONAL ARROW LABEL SPACING === */

.arrow-label {
  margin: 0 4px;
}



main {
  padding-top: 89px; /* ensures nothing overlaps the fixed header */
}
 
 /* === FIXED FOOTER BAR === */
 .footer-bar {
  height: 5px;
  width: 100%;
  background-color: #404040; /* your chosen grey */  
  align-self: stretch;
  }

/* Fixed footer bar (full width) */
.center-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2.22rem;
  background: black;
  color: #BC4B4B;
  font-size: 16px;
  font-weight: normal;
    z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}
  
/* Inner text container */
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 714px;
  width: 100%;
  height: calc(100% - 6px); /* subtract bar height */
  padding: 0 1rem;
  white-space: nowrap;
}

/* Text blocks */
.footer-left,
.footer-right {
  flex-shrink: 0;
}

/* Lock the stacked header/footer heights to match JS */
.site-title-bar { height: 32px; }
.navbar         { height: 24px; }
.page-header    { height: 24px; }
.header-bar     { height: 6px;  }

.footer         { height: 35px; }
.footer-bar     { height: 5px;   }

/* Only touch the interactive overlays */
#nav-back, #nav-forward {
  position: relative;
  z-index: 10; /* enough to sit above the image */
}

.navbar .dropdown-menu {
  position: absolute;
  z-index: 20; /* higher than arrows so menus overlay cleanly */
}