/* --- Site-wide default link color = black --- */
body a:link    { color: #ffaa55; text-decoration: none}   /* orange */
body a:visited { color: #ffaa55; }
body a:hover   { color: #00ff00; }
body a:active  { color: #552200; }

body{
  font: 0.8em "Lucida Grande", Arial, Helvetica, sans-serif;
  font-size: 11pt;
  color: Black;
  margin:0;
  font-family: system-ui, sans-serif;
  background:rgba(11, 21, 31, 0.98);  /* Brighter version was 51, 51, 51  */
  color:#eee;
	-webkit-font-smoothing: subpixel-antialiased;
}
.container {
  max-width: 1140px;
  /* width: 100%; */
  width: 1400px;
  margin: 1.5rem auto 0;
  padding: 0;
  box-sizing: border-box;
  background: rgb(15, 15, 15);
}

#widecontent {
	display: block;
	margin: 0 auto;
	width: 1140px;
	background-color: #DDDDDD;
}

ul.icon-grid { 
  padding-left: 15px !important;
  align-items: stretch; /* Stretch li items to same height */
} 
ul.icon-grid, ul.icon-grid > li { float: none !important; }

.icon-grid a.tile,
.icon-grid a.tile:link,
.icon-grid a.tile:visited,
.icon-grid a.tile:hover,
.icon-grid a.tile:active 
{ font-size: 13.5px; line-height: 1.0; font-weight:400; 
  color: #fff;          /* full white */
  text-decoration: none; /* optional */
}

SECTION.widetiles {
	clear: both;
	background: #222222;
	border: 10px solid #40454A;  /* brighter is #50555A; */
	width: 1120px;
	font-family: Verdana;
	color: #bbb;
	font-size: .8em;
        text-align: center;
        padding-bottom: 0px; /* Add space below section to accommodate ul height */
}

.rowtitle {
	margin: 10px;
}

IMG#seaslogo {
	float: right;
	margin-left: 50px;
	margin-right: 50px;
}

IMG.portrait {
	float: left;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: end;
        justify-content: center;
        gap: 5px;
}

.tile {
	max-height: 185px;
	max-width: 173px;
	padding: 4px;
        transition: transform 1.0s;
        height: 100%; /* Make tiles fill full height of li */
}

.tile:hover {
        transform:scale(1.10);
        transition: transform 1.0s
}

#widefooter {
	/* A div with the id 'footer' wraps the bottom bar. */
	display: block;
	float: right;
	width: 1140px;
	height: 90px;
	background-color: #40454A;
}

.alignleft {
       float: left;
       transition: filter 0.25s ease;
}
a:hover .alignleft{
       filter: brightness(1.15);
}

.alignright {
	/* An element can be given the class 'alignleft/right', so I don't need
to wrap the img in another div. */
       float: right;
       transition: filter 0.25s ease;
}
a:hover .alignright{
       filter: brightness(1.15);
}

#primary-menu > li > a { color: #E5E5E5; }

/* Ensure structural elements fill the container but don't overflow */
nav,
header.site-header,
main,
.site-footer {
  width: 100%;
  box-sizing: border-box;
}
header .portrait{max-width:30vw;height:153px;border-radius:6px;object-fit:contain;align-self:flex-start;background: none;}

header .portrait-link.portrait-left { margin-left: 0; padding: 0; }
  /* When the header wraps at narrower widths, center the portrait so it doesn't sit left-aligned */
  header .portrait{align-self:center;margin:0 auto;}
  header .shelf-block{order:3;flex-direction:row;align-items:center;width:100%;justify-content:flex-end;}
  header .bookshelf{margin-top:0;margin-right:0;}
  header .contact-info{justify-content:center;text-align:center;}
  /* On narrow screens use a fixed height so portrait and book covers match */
  header .portrait{height:140px;width:auto;align-self:center;margin:0;}

  /* Ensure brand (contact) and promo (bookshelf) blocks sit below the portrait and are centered */
  header .brand-block{order:1;width:100%;display:flex;justify-content:center;align-items:center;padding:0 8px;}
  header .promo-block{order:2;width:100%;display:flex;justify-content:center;align-items:center;padding:6px 8px 0 8px;}

  header .shelf-block{order:3; width:100%; justify-content:center; align-items:center;}
  header .bookshelf{justify-content:center;margin-right:0;}
  /* On narrow screens keep bookshelf images matching the portrait height */
  header .bookshelf img{height:140px;width:auto;padding:5px 5px 0 5px;box-sizing:border-box;}
nav{
  /* Fallback color */
  background:#ff9900;
  /* Requested gradient */
  background:linear-gradient(rgba(225,115,5,0.82), rgba(145,75,5,0.82));
  padding:0;
  box-sizing: border-box;
  min-height: 40px; /* ensure no less than 40px high */
  display: flex;
  align-items: center;
}
  nav ul.menu > li {
    flex: 1 1 auto;
    text-align: center;
  }
  nav ul.menu > li > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
nav a{
  /* Requested computed style mapping */
  display:block;               /* displayblock */
  cursor:pointer;              /* cursorpointer */
  color:#fff;                  /* color (inherits gradient contrast) */
  text-decoration:none;        /* text-decoration-line none */
  font-family:"Lucida Grande", Arial, Helvetica, sans-serif; /* font-family */
  font-size:12px;              /* font-size 12px */
  line-height:12px;            /* line-height 12px */
  font-weight:600;             /* semi-bold */
  font-style:normal;           /* font-style normal */
  font-variant:normal;         /* consolidate variant props */
  text-transform:uppercase;    /* uppercase */
  padding:16px 23px 16px 22px; /* top right bottom left */
  -webkit-font-smoothing:subpixel-antialiased; /* smoothing */
  font-stretch:100%;
  /* Avoid fixed width; let content size naturally */
  list-style:none;             /* list-style-type none (anchors not list items but safe) */
  outline:none;                /* outline-style none */
  position:relative;
  transition:background .25s, color .25s; /* nicer hover */
}
nav a:hover, nav a:focus {
  background:rgba(255,255,255,0.15);
  color:#fff;
}
/* New menu structure */
nav ul.menu {margin:0; padding:0; list-style:none; display:flex; gap:0; width:100%; }
nav ul.menu > li {position:relative; }
/* Center top-level menu items vertically */
nav ul.menu > li > a {
  display: flex;
  align-items: center;
  justify-content: center; /* optional, centers horizontally too */
  height: 15px;            /* adjust as needed for your menu bar height */
  line-height: normal;     /* ensure text isn't baseline-aligned */
  padding: 0 14px;         /* horizontal spacing */
  color: #fff;             /* keep your existing color */
  text-decoration: none;
  white-space:nowrap;
}
nav ul.menu > li.has-sub > a::after { content: ""; margin-left: 0; font-size: 0; position: relative; top: 0; }
/* Submenu */
nav ul.menu > li .submenu {display:none; position:absolute; top:100%; margin:0; padding:6px 0; list-style:none; min-width:230px; background: rgba(25, 25, 25, 0.92); box-shadow:0 4px 12px rgba(0,0,0,0.4); border-radius:4px; z-index:1000; }

nav ul.menu > li .submenu {left:0; right:auto; }

nav ul.menu > li:not(:first-child):not(:last-child) .submenu {
left:50%; right:auto; transform: translateX(-50%); }

nav ul.menu > li:last-child .submenu { left:auto; right:0; margin:0; }

nav ul.menu > li:hover > .submenu, nav ul.menu > li:focus-within > .submenu {display:block;}
nav ul.menu > li .submenu li a {text-transform:none; font-weight:400; line-height:1.2; padding:10px 16px; font-size:12px; color: #ccc; }
nav ul.menu > li .submenu li a:hover, nav ul.menu > li .submenu li a:focus {background:rgba(255,255,255,0.15);} 
nav ul.menu > li .submenu li.submenu-heading {font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; padding:6px 14px 4px; color:#C86301; cursor:default;}
nav ul.menu > li .submenu li.submenu-separator {height:1px; margin:6px 12px; background:rgba(255,255,255,0.25); list-style:none; padding:0;}
/* Improve keyboard focus visibility */
nav a:focus {outline:2px solid rgba(255,255,255,0.6); outline-offset:2px;}



/* === NAV FIX (baked-in) === */


/* === NAV FIX (baked-in) === */

/* Desktop / default */
#mainNav{width:100%}
#primary-menu{
  display:flex !important;
  flex-wrap:wrap;
  gap:0;
  list-style:none;
  margin:0; padding:0;
  align-items:center; justify-content:center;
  flex-direction:row !important;
}
#primary-menu>li{position:relative}
#primary-menu>li>a{
  display:block; padding:10px 14px;
  text-decoration:none; white-space:nowrap;
}
/*
#primary-menu .submenu{
  display:none;
  position:absolute; top:100%; right:0;
  min-width:240px; margin:0; padding:8px 0;
  list-style:none;
  background:rgba(0,0,0,.95);
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  z-index:1000;
}
*/
#primary-menu>li:hover>.submenu,
#primary-menu>li:focus-within>.submenu{display:block}

/* Mobile only */
@media (max-width:800px){
  nav ul.menu{
    flex-direction:column !important;
    width:100%;
    display:none;
  }
  nav.open ul.menu{display:flex}
  nav ul.menu>li>a{
    padding:14px 20px;
    border-top:1px solid rgba(255,255,255,.15);
  }
  nav ul.menu>li:first-child>a{border-top:none}
  nav ul.menu>li .submenu{
    position:static;
    box-shadow:none;
    background:linear-gradient(rgba(225,115,5,.92),rgba(145,75,5,.92));
    margin-left:0;
  }
  nav ul.menu>li .submenu li a{padding:10px 28px}
  nav ul.menu>li.has-sub>a::after{content:""}
  nav ul.menu>li.open>.submenu{display:block}
}




header {
  display: flex;
  justify-content: space-between; /* spread left/right groups */
  align-items: center;
  width: 1144px;
  max-width: 100%;
  background-color: #40454A;      /* darker is #222222, brighter is #50555A */
}

/* Header layout: keep all header content on a single row and scale to fit 1144px.
   These rules only affect header containers and contact info; bookshelf selectors
   below are left unchanged as requested. */
.header-container {
  display: flex;
  width: 1144px;
  max-width: 100%; /* allow page to shrink below 1144px without overflow */
  margin: 0 auto;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
}

.contactinfo-container {
  display: flex;
  flex: 1 1 auto; /* fill available header space up to the bookshelf */
  gap: 12px;
  align-items: center;
}

.portrait-container {
  width: 108px; /* keep portrait column fixed width */
  flex: 0 0 108px;
}

.portrait {
  display: block;
  width: 100%;
  height: auto;
}

/* Make every direct child of contactinfo-detail a vertical, no-wrap flex column
   and center its contents. This keeps the header content stacked and prevents
   children from wrapping horizontally. */
.contactinfo-detail > * {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box; 
  flex: 1 1 auto; /* allow detail area to shrink/grow to fill available space */
  min-width: 0; /* allow proper flex shrinking for overflowing content */
  margin-top: 5px;
}

.leftcontactinfo-detail > * {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: left;
  justify-content: center;
  width: 100%;
  box-sizing: border-box; 
  flex: 1 1 auto; /* allow detail area to shrink/grow to fill available space */
  min-width: 0; /* allow proper flex shrinking for overflowing content */
  margin-top: 3px;
  margin-left: 40px;
}

/* Ensure images inside the contact info scale to fit the contactinfo width */
.contactinfo-detail img {
  max-width: 100%;
  height: auto;
  display: block;
}

.logos {
  display: flex;
  gap: 8px;
  align-items: center;
}

.leftlogos {
  display: flex;
  gap: 8px;
  align-items: left;
}

.bookshelf-container {
  /* let the bookshelf take remaining space; align its child to the right */
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  align-items: center;
}

.bookshelf {
  display: inline-block; /* shrink to fit content */
}

.covers {
  display: flex; /* use flexbox for layout */
  flex-direction: row; /* arrange covers in a row */
  flex-wrap: nowrap; /* never wrap the covers */
  align-items: end; /* align on the same line */
  justify-content: center; /* center the covers altogether */
  gap: 5px; /* add space between covers */
}

.cover {
  height: 143px; /* fixed height for all covers */
  flex: 0 0 auto; /* do not shrink or grow in response to viewport changes */
  margin: 0; /* remove any default figure margins */
}

/* Contact text should fill remaining space and be unstyled LIs at 1em */

.contactinfo-text {
	list-style-type: none; /* Removes the bullets */
	text-align: center;      /* Centers the text in each list item */
	padding: 0;              /* Removes default padding from the ul */
}

.leftcontactinfo-text {
	list-style-type: none; /* Removes the bullets */
	text-align: left;      /* Centers the text in each list item */
	padding: 0;              /* Removes default padding from the ul */
}

.contactinfo-text li {
	line-height: 1.66em;
}

.leftcontactinfo-text li {
	line-height: 1.66em;
}


img.logo1 {
  width: 72%;
  margin: 0 auto;
}

img.logo2 {
  width: 75%;
  margin: 0 auto;
}

ul.icon-grid{
  display: flex; 
  flex-wrap: wrap;
  column-gap: 14px; 
  row-gap: 22px; 
  justify-content: center; 
  padding: 0; 
  margin: 0 0 20px; 
  list-style: none;
}
ul.icon-grid >li {
  flex: 0 0 calc((100% - 4 * 14px) / 5);
}

/* tile is a vertical flex box */
.icon-grid a.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;        /* image at top */
  height: 100%;
  text-align: center;

  /* your text styles */
  font-size: 13.5px;
  line-height: 1;
  color: #bbb !important;
  -webkit-text-fill-color: #bbb;      /* Safari/iOS */
  text-decoration: none;
}

/* let the image take the available space above the label */
.icon-grid a.tile img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 0;                /* pushes the label down */
}






section.widetiles a.tile{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:9px; text-align:center; text-decoration:none; color:inherit;   /* BTW:  padding is key.  Default was 10px */
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
  border:1px solid #22314d; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform 1.0s, box-shadow 1.0s, border-color 1.0s;
}
section.widetiles a.tile:hover, #widetiles a.tile:focus-visible{
  box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 0 2px rgba(125,125,125,.95);  /* BTW:  2px used to be 3px */
  border-color:#2a4365; outline:none;
}
/* Icon sizing — consistent, not huge */
section.widetiles .tile img[WIDTH]{ width:auto !important; }
section.widetiles .tile img{
  height:160px; width:auto; max-width:100%; object-fit:contain; display:block;
}
section.widetiles .label{ font-weight:600; letter-spacing:.2px; }

/* Keep links in the dark Research section using its light color */
section.widetiles a { color: inherit !important; text-decoration: none !important; }

/* nudge Research up from header */
section.widetiles:first-of-type { margin-top: -10px !important; }  /* adjust 8–18px to taste */

/* Make labels lighter gray and not bold */
section#sports-hobbies .label,
section#fun-stuff .label,
section.widetiles .label {
  color: rgba(255,255,255,.70) !important; /* bright gray */
  font-weight: normal !important;          /* no bold */
  font-size: 0.98em !important;
  line-height: 1.3 !important;
}


/* Dark theme tokens (tweak to taste) */
:root{
  --bg: #0b1220;
  --panel: #0f172a;
  --text: #e6edf6;
  --muted: #9fb0ca;
  --border: #22314d;
  --glow: rgba(125,211,252,.45); /* soft cyan glow on hover */
  --radius: 14px;
}

/* Better focus ring for keyboard users */
:focus-visible{ outline: 2px solid var(--glow); outline-offset: 2px; }

/* Optional: keep headings bold but slightly softer */
h1, h2, h3{ font-weight:500; }
h1{ font-size:1.8em; }

.logo1-link .logo1 {
  content: url("PUlogoHiresWhite_no_logo.png");   /* default image */
  transition: filter 1.0s ease;
}
.logo1-link:hover .logo1 {
  content: url("PUlogoHiresWhite.png");           /* hover image */
  /* filter: sepia(1) hue-rotate(-15deg) saturate(4) brightness(1.1); */
}

.hover-bright {
  transition: filter 1.0s ease;
}
a:hover .hover-bright {
  /* filter: brightness(1.15) sepia(0.35) saturate(1.6) hue-rotate(-15deg); */
  filter: brightness(1.25);
}

a img {
  transition: filter 1.0s ease;
}
a:hover img {
  filter: brightness(1.25);
}