/* app.css
 * Consolidated from the <style> blocks previously duplicated inline in
 * Nav.php, Nav_Bare.php, ShowGen.php, and ShowCat.php. Link this once
 * via renderPageHead() in Bootstrap.php instead of re-echoing it on
 * every page.
 */

.woodbar_reg {
	font: bold italic 20px Georgia, "Times New Roman", Times, serif;
	letter-spacing: 1px;
	color: black;
	background: url('jpg/Woodbar.jpg');
	background-size: 100% 100%;
	text-align: center;
	vertical-align: middle;
	padding: 8px;
	text-decoration: none;
	width: auto;
}

.woodbar_index {
	font: bold italic 20px Georgia, "Times New Roman", Times, serif;
	letter-spacing: 1px;
	color: black;
	background: url('Mobile/jpg/Woodbar.jpg');
	background-size: 100% 100%;
	text-align: center;
	vertical-align: middle;
	padding: 8px;
	text-decoration: none;
	width: auto;
}

#content {
  box-sizing: border-box;
}

.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Georgia, Arial, Helvetica, sans-serif;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 7px 8px;
  text-decoration: none;
  font-family: Georgia, Arial, Helvetica, sans-serif;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 8px;
  border: none;
  outline: none;
  color: white;
  padding: 7px 8px;
  background-color: inherit;
  font: inherit;
  margin: 5px;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: green;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: lightgreen;
  width: 100%;
  left: 0;
  z-index: 1;
}

.dropdown-content .header {
  background: red;
  padding: 8px;
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.column {
  float: left;
  width: auto;
  padding: 5px;
  background-color: lightgreen;
}

.column a {
  float: none;
  color: black;
  text-decoration: none;
  display: block;
  text-align: left;
  background-color: lightgreen;
  font-size: 80%;
}

.column a:hover {
  background-color: lightgreen;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.buttonLink {
  font: bold 13px Arial;
  text-decoration: none;
  background-color: #eee;
  color: #444;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
}

/* ShowSet.php's card list: 5 columns on desktop, filled to a minimum of
 * 25 names each (see renderColumnList() in Bootstrap.php). Collapses to
 * a single column under the mobile breakpoint below.
 */
.fivecol {
  float: left;
  width: 18%;
  box-sizing: border-box;
  padding: 5px;
  text-align: left;
}

/* w3-hover.css's .w3-dropdown-hover:first-child sets a gray background,
 * intended for the first item in a horizontal navbar of dropdowns. Our
 * hover-preview divs in ShowSet.php's card list happen to be the first
 * child of each .fivecol column, so they were unintentionally picking
 * that up too. This needs the extra .fivecol ancestor to out-specificity
 * the original (0,3,0) vs (0,2,0) - no !important needed.
 */
.fivecol .w3-dropdown-hover:first-child {
  background-color: transparent;
  color: inherit;
}

/* Hover-preview popups in ShowSet.php's card list open to the right of
 * their link by default. The 5th (rightmost) .fivecol column has no
 * room to its right, so its previews flip to open leftward instead. */
.fivecol .w3-dropdown-content {
  left: 105%;
  top: -5px;
}

/* Sibling order under #content is always: 5×.fivecol, then the
 * clearfix div, then this spacer div - so the 5th .fivecol is
 * reliably the 3rd-from-last child, regardless of tag type. */
.fivecol:nth-last-child(3) .w3-dropdown-content {
  left: auto;
  right: 105%;
}

/* Used by ShowSet.php to put the thumbnail and set-name title side by
 * side. Only ever existed in the retired Nav.php's inline <style> block
 * and was never carried over when that got replaced by Bootstrap.php -
 * without it these were rendering as plain stacked block divs.
 */
.box {
  float: left;
  width: 45%;
  text-align: left;
  padding: 5px;
  box-sizing: border-box;
}

.clearfix {
  clear: both;
}

/* Used by ShowCard.php's Category/Set/Next/Previous buttons. Only ever
 * existed in the retired Nav.php's inline <style> block and was never
 * carried over - and even there it set color:white with no background,
 * which would have made the text invisible. Filled in a black
 * background to match the site's other black pill-buttons (the genre
 * nav bar, etc). ShowCard.php nests an <a> inside the <button>, so
 * text-decoration:none needs to target the anchor directly - setting it
 * on .button alone doesn't reliably suppress the browser's default
 * underline on the nested link.
 */
.button {
  display: inline-block;
  border: none;
  background-color: black;
  color: white;
  padding: 2px 6px;
  text-align: center;
  text-decoration: none;
  font: bold 12px Georgia;
  margin: 4px 2px;
  border-radius: 5px;
  cursor: pointer;
}

.button a,
.button a:link,
.button a:visited,
.button a:active {
  color: white;
  text-decoration: none;
}

.button a:hover {
  color: #ddd;
}

.table-container {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.table-container table {
  width: 150px;
}

/* ── Desktop horizontal nav ───────────────────────────── */
ul#horiznav, #horiznav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	height: 32px;
	text-align: center;
	opacity: 1;
}

#horiznav li {
	float: left;
	position: relative;
	opacity: 1;
}

#horiznav li a {
	display: block;
	padding-right: 10px;
	padding-left: 10px;
	line-height: 30px;
	text-align: left;
	color: white;
	text-decoration: none;
	background-color: black;
	border: 1px solid white;
	white-space: nowrap;
	opacity: 1;
}

#horiznav li a:hover { color: white; opacity: 1; }

#horiznav li ul {
	display: none;
	position: absolute;
	left: 0;
	top: 32px;
	opacity: 1;
}

#horiznav li:hover ul { display: block; opacity: 1; }

#horiznav li ul a {
	background-color: gray;
	opacity: 1;
}

ul { z-index: 999; }

/* ── Hamburger toggle (hidden checkbox trick, no JS) ───── */
#nav-toggle       { display: none; }
#nav-toggle-label { display: none; }

/* ── Genre sub-menu toggles (mobile only; hidden on desktop) ── */
.genre-toggle       { display: none; }
.genre-toggle-label { display: none; }
.genre-top-link     { /* visible on desktop — normal inline link */ }

/* ── Mobile overrides ≤ 600px ─────────────────────────── */
@media (max-width: 600px) {

  ul#horiznav {
    height: auto;
    display: none;
    width: 100%;
    background-color: black;
    margin-bottom: 12px;
    border-bottom: 3px solid #5b9bd5;
  }

  #nav-toggle-label {
    display: block;
    background-color: black;
    color: white;
    font-size: 22px;
    padding: 6px 12px;
    cursor: pointer;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
  }

  #nav-toggle:checked ~ ul#horiznav { display: block; }

  #horiznav li {
    float: none;
    width: 100%;
    display: block;
  }

  #horiznav li a {
    white-space: normal;
    width: 100%;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
  }

  #horiznav li ul {
    display: none;
    position: static;
    width: 100%;
  }

  /* "List View"/"Thumbnail View" and "All/Vintage/Modern Images" aren't
     part of the genre accordion (no checkbox involved) - these stay open
     like they always have. */
  #horiznav > li > ul.static-sublist { display: block; }

  .genre-toggle { display: none; }

  .genre-toggle-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
    line-height: 30px;
    color: white;
    background-color: black;
    border: 1px solid white;
    border-left: none;
    border-right: none;
    cursor: pointer;
    font-family: Georgia, Arial, Helvetica, sans-serif;
    font-size: 16px;
  }

  .genre-toggle-label::after { content: " ▸"; font-size: 12px; }

  /* This needs the #horiznav prefix to out-specificity the #horiznav li
     ul {display:none} rule above (an ID selector) - without it, a bare
     .genre-toggle:checked ~ ul has no ID in its selector at all and
     loses that fight, meaning the category list would never actually
     open no matter what was tapped. */
  #horiznav .genre-toggle:checked ~ ul { display: block; }
  .genre-toggle:checked + .genre-toggle-label::after { content: " ▾"; }

  /* #horiznav li a (outside this media query, an ID selector) always
     beats a plain class selector regardless of media query, so this
     needs !important to actually hide the plain genre link on mobile -
     without it, both the accordion toggle AND the plain link render,
     which is why genre names were appearing twice. */
  .genre-top-link { display: none !important; }

  #horiznav li ul li { width: 100%; }

  #horiznav li ul a {
    padding-left: 24px;
    background-color: #333;
    font-size: 90%;
  }

  #wrap_wood     { height: auto; }
  #woodleft,
  #woodright     { display: none; }
  #woodarea {
    float: none;
    width: 100%;
    height: auto;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    box-sizing: border-box;
  }

  .woodmsg,
  #woodarea h1,
  #woodarea a,
  #woodarea a:link,
  #woodarea a:active,
  #woodarea a:visited {
    font-size: clamp(14px, 4vw, 22px) !important;
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    color: #1a1a1a;
  }
  .woodmsg a:hover { color: #fff; }

  /* Mobile/header.css centers wood-banner text with position:absolute +
     translateY(-50%), which only works for a single line inside a fixed-
     height box. Absolutely-positioned elements don't contribute to their
     parent's size, so long titles that wrap here would center on the
     collapsed box above and spill out past it. Putting the text back in
     normal flow lets #woodarea's own flexbox (height:auto, align-items:
     center above) center it properly and grow to fit however many lines
     it takes. */
  #woodarea a,
  #woodarea p {
    position: static !important;
    transform: none !important;
    top: auto !important;
    display: block;
    padding: 2px 0;
  }

  #content, body { overflow-x: hidden; }

  .table-container table { width: 120px; }

  .fivecol {
    float: none;
    width: 100%;
  }
  
  .box {
    float: none;
    width: 100%;
  }
}