/* 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;
  
  /* Forces GPU rendering on iOS to stop the header from dragging/wobbling */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  
  
  
  
}


.site-title, .header-wrapper {
  position: relative;
  z-index: 20001;
}




.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;
}
h1.site-title a {
  color: #CD5C5C; /* Change to your exact red shade */
  text-decoration: none;
}
h1.site-title a:hover,
h1.site-title a:visited {
  color: #CD5C5C;
  text-decoration: none;
}






/* 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;
}
  


/*---DROPDOWN CONTENT---*/
.dropdown-content {
  position: absolute;
  z-index: 9999;
  top: calc(100% - 1px); /* Consolidated overlap and position */
  left: 0;
  display: none;
  background-color: #404040;
  width: max-content;    /* Forces the box to wrap tightly around the text */
  min-width: 100px;      /* Optional safety floor so it doesn't get absurdly tiny */
  list-style: none;
  padding: 0;
  margin: 0;
  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 container */
.nav-list li.dropdown {
  position: relative;
    margin: 0;              /* no extra margin */
  pa/*---DROPDOWN MENU---*/
dding: 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, 
.nav-arrow-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.3rem !important;
  color: white !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  transition: color 0.3s ease !important;
  z-index: 3000 !important;
  flex-shrink: 0 !important;
}

/* If you need them strictly pinned to the absolute left and right bounds */
.nav-arrow.left, 
.nav-arrow-button.left {
  position: absolute !important;
  left: 1rem !important; /* Adjust padding from edge as needed */
}

.nav-arrow.right, 
.nav-arrow-button.right {
  position: absolute !important;
  right: 1rem !important; /* Adjust padding from edge as needed */
}




.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 */
}		





/* 1. Ensure the dropdown container uses the correct class name from your HTML */
.navbar .dropdown-content {
  display: none; /* Hidden by default */
  position: absolute;
  z-index: 20;
}

/* 2. Desktop Hover Behavior */
@media (hover: hover) {
  .nav-list li.dropdown:hover .dropdown-content {
    display: block;
  }
}

/* 3. Mobile/Touch Tap Behavior (Triggered by your JavaScript adding .active) */
.nav-list li.dropdown.active .dropdown-content {
  display: block !important;
}



/* ==========================================================
   TABLET HEADFOOT OVERRIDES (Append at the bottom)
   ========================================================== */

/* 1. Wider touch targets for main navigation links */
.navbar a, 
.nav-list a {
  padding: 0 12px !important; /* Slightly more horizontal breathing room for fingers */
}

/* 2. Larger, easier-to-tap dropdown items for iPad screens */
.dropdown-content li a {
  padding: 12px 20px !important; /* Taller touch targets so users don't mis-tap */
  font-size: 16px;
}

/* 3. Comfortable padding for header navigation arrows */
.nav-arrow, 
.nav-arrow-button {
  padding: 4px 10px !important;
}

/* 4. Prevent touch callout highlights on iPad taps */
.navbar a, 
.nav-arrow-button, 
.dropdown-content a {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* 1. Lock the outer window so the body can't rubber-band and drag the header */
@media screen and (min-width: 769px) and (max-width: 1366px) {
  html, body.art-menu-body {
    height: 100% !important;
    overflow: hidden !important; /* Stops the whole page from bouncing */
    margin: 0 !important;
  }



  /* 3. Wrap your page content / painting grid in a dedicated scrollable box */
  /* (Or apply this directly to the container holding your painting grid) */
  .art-menu-body {
    /* If you can wrap your main content in a container, or apply scroll properties here: */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    height: 100% !important;
    
    /* Add top space so content starts below the fixed header, 
       and generous bottom space so the grid never gets clipped by the footer */
    padding-top: 120px !important; 
    padding-bottom: 150px !important; 
  }
}

/* 1. Restore normal scrolling on html and body */
html, body {
  height: auto !important;
  overflow: visible !important;
}



/* 3. Give your painting grid clean bottom breathing room so it clears the footer */
.page-link-list, 
.grid-container {
  margin-bottom: 80px !important;
}

@media screen and (min-width: 769px) and (max-width: 1366px) {
  /* Top grey border above the site title bar */
  body::before {
    content: "";
    display: block;
    height: 6px; /* Adjust thickness as needed */
    background-color: #423e3d; /* Grey color */
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
  }

  /* Bottom grey border below the footer bar */
  body::after {
    content: "";
    display: block;
    height: 6px; /* Adjust thickness as needed */
    background-color: #393530; /* Grey color */
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99999;
  }
}