/* ====== Baseline typography + page background ====== */
:root{
  --text: #1b1b1b;
  --muted: #5a5a5a;
  --line: #e6e6e6;
  --bg: #ffffff;
  --navbg: #fafafa;
  --test: #fafafa;
  --button: #f0f0f0;
  --hover: #eaeaea;
  --img-radius: 8px;
  --max-width: 1200px;
}

/* @media (max-width: NNN) CANNOT use variables like the above.
  --big-screen: 1024px;
  --med-screen:  768px;
  --tiny-screen: 480px;
*/   

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

/* Prefer a modern sans for readability */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

button {
  font: inherit;
  border: none;
  background: none;
  padding: 0;
}

/***** site-wide defaults *****/
h1, h2, h3, h4, h5, h6 { letter-spacing: 5px; }

/***** page sections *****/
#header {
  border: 0px solid #8888ff;
  background: var(--navbg);
  border-bottom: 2px solid var(--line);
  padding: 0 12px;
}

#header-inner {
  max-width: var(--max-width);
  margin: 0 auto;        /* centers it */
  display: flex;
  justify-content: space-between;
  align-items: center;
/* flex-wrap: wrap; */
}

#main {
  border: 0px solid #0088ff;
  padding: 0px 10px;          /* some breathing room */
}

#footer {
  border: 0px solid #8888ff;
  border-top: 2px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  padding: 0 20px;                 /* optional spacing */
  gap: 8px 16px;
}

#nobody {
  display:flex;
  justify-content: space-between;  /* pushes left & right apart */
  align-items: center;             /* vertical centering */
}

/****************************** navbar elements **************************/

.ps-navbar-left {
  border:   0px solid #88ffff;
  margin: 0px 0px;
}

.ps-navbar-right-big {
  border:   0px solid #88ffff;
  text-align: right;
  margin: 0px 5px;
}

.ps-navbar-right-small {
  border:   0px solid #88ffff;
  text-align: right;
  margin: 0px 5px;
  display:none!important
}

/****************************** basic page elements  **************************/

/* Wrapper that centers everything */
.ps-main-content {
  display: flex;
  flex-direction: column;
  align-items: center;         /* centers image + text */
  gap: 18px;                   /* space between image and text */
}

/* Responsive image with max size */
.ps-hero {
  display: block;
  width: 100%;                 /* scale down on small screens */
  max-width: var(--max-width); /* never exceed max-width */
  border-radius: var(--img-radius);
  height: auto;                /* keep aspect ratio */
}

/* Text block left-aligned, max size */
.ps-text {
  width: 100%;
  max-width: var(--max-width);
  text-align: left;  
}

/* Text block centered, max size */
.ps-center {
  width: 100%;
  max-width: var(--max-width);
  text-align: center;
}

/***************** pair-gallery : images and/or text blocks ***************/
/** they are side-by-side on larger screens, but stacked vertically on smaller screens **/

div.pair-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* was center */
  justify-content: flex-start;
  border-bottom: 2px solid var(--line); 
}

/***** for larger screens, these are side-by-side *****/
div.pair-gallery-image {
  margin: 5px;
  border: 0px solid #f22; 
  border-radius: var(--img-radius);
  width: calc(50% - 10px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
img.pair-gallery-image {
  margin: 0px;
  border: 0px solid #0f0; 
  border-radius: var(--img-radius);
  width: calc(100% - 4px);
  max-width: calc(var(--max-width) / 2); 
}
div.pair-gallery-text {
  margin: 5px;
  border: 0px solid #ccc; 
  width: calc(50% - 10px);
}
p.pair-gallery-text {
  margin: 5px;
  margin-top: 10px;
  border: 0px solid #55f; 
  width: calc(100% - 10px);
}

/**** for smaller screens, stack these ****/
@media only screen and (max-width: 1024px) {
  div.pair-gallery-text {
    width: calc(100% - 10px);
  }
  div.pair-gallery-image {
    width: calc(100% - 10px);
  }
}

/**** only shown (480px < size < 768px), 1005 width ****/
div.pair-gallery-item-hide-big {
  margin: 5px;
  border: 0px solid #ccc; 
  width: calc(50% - 20px);
  display:none
}

/**** shown 50% (size > 768px), not shown (size < 768px) ****/
div.pair-gallery-item-hide-small {
  margin: 5px;
  border: 2px solid #ccc; 
  width: calc(50% - 20px);
  display: flex;
  justify-content: center;
  align-items: center;
}

@media only screen and (max-width: 768px) {
  div.pair-gallery-item-hide-big {
    width: calc(100% - 20px);
    display:block
  }
  div.pair-gallery-item-hide-small {
    width: calc(100% - 20px);
    display:none!important
  }
}

@media only screen and (max-width: 480px) {
  div.pair-gallery-item-hide-big {
    width: calc(100% - 20px);
    display:none!important
  }
}

/***** these items are full-width in a gallery *****/
div.lone-gallery-item {
  margin: 2px;
  border: 0px solid #ccc; 
  width: calc(100% - 8px);
}
img.lone-gallery-item {
  margin: 0px;
  border: 0px solid #f88; 
  border-radius: var(--img-radius);
  width: calc(100% - 4px);%;
  max-width: 900px;
}

/***** image gallery : 4 across (> 768px), 2 across (480px < size < 768px), 1 across (< 480px) *****/

div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

div.gallery-item {
  margin: 5px;
  border: 0px solid #ccc; 
  width: calc(25% - 20px);
}

div.gallery-item:hover {
  border: 0px solid #777;
}

div.gallery-item img {
  max-width: 250px;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

div.gallery-item div.desc {
  padding: 15px;
  text-align: center;
}

@media only screen and (max-width: 768px) {
  .ps-navbar-right-small {
    display:inline-block!important
  }
  .ps-navbar-right-big {
    display:none!important
  }
  div.pair-gallery-item {
    width: calc(100% - 20px);
  }
  div.pair-gallery-item-hide-big {
    width: calc(100% - 20px);
    display:block
  }
  div.pair-gallery-item-hide-small {
    width: calc(100% - 20px);
    display:none!important
  }
  div.gallery-item {
    width: calc(50% - 20px);
  }
}

@media only screen and (max-width: 480px) {
  div.gallery-item {
    width: calc(100% - 20px);
    border-radius: var(--img-radius);
  }
  div.pair-gallery-item-hide-big {
    width: calc(100% - 20px);
    display:none!important
  }
}

/**** special look for CNEOS plots ****/
img.cneos {
  margin: 0px;
  border-radius: var(--img-radius);
  width: calc(100% - 4px);%;
  max-width: var(--max-width);
  border: 2px solid #aaaaff;
}
img.cneos:hover {
  border: 2px solid #0000ff;
}

/****************************** button types **************************/

/***** navbar buttons ***************/

.ps-button {
  border: 0px solid #ffcccc;
  border-left:  0px solid #000000;
  border-right: 0px solid #000000;
  border-radius: var(--img-radius);
  color: var(--text);
  /* background: transparent; */
  background-color: var(--button); 
  padding: 8px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
  font-family: inherit;
  margin: 0px 0px;
  cursor: pointer;
  position: relative;
}

.ps-button:hover{
    color:var(--text)!important;
    background-color:var(--hover)!important
}

/* Active: underline bar */
.ps-button.active{
  font-weight: 600;
}

.ps-button.active::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: currentColor;
  opacity: 0.9;
  border-radius: 2px;
}

/***** navbar dropdown ***************/


/* class for the main dropdown button */
.ps-dropdown {
    position:relative;
    display:inline-block;
    cursor:pointer
}

/* invisible hover bridge to avoid dropouts */
.ps-dropdown::after{
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  height: 5px;        /* adjust as needed */
  width: 100%;
  border: 0px solid #8888ff;
}

.ps-dropdown > .ps-button::after{
  content: "";
  display: inline-block;
  margin-left: 6px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  position: relative;
  top: -2px;
}

/* class for items inside the dropdown */
.ps-dropdown-content{
    cursor:auto;
    color:var(--text);
    background-color: var(--navbg);
    position:absolute;

    right: 0;
    left: auto;
    min-width:160px;
    margin: 0px;
    margin-top: 6px; /* small gap so it doesn’t touch (must come after margin:) */
    padding:0;
    z-index: 1000;
    align-items: left;
    border: 0px solid #ff88ff;
    border-radius: var(--img-radius);
    display:none; /* not displayed until hovered */
}

/* style for the buttons in the dropdown */
.ps-dropdown-content a.ps-button{
  display: block;
  border-left: 0;
  border-right: 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

/* on hover, show the dropdown content */
.ps-dropdown:hover .ps-dropdown-content{display:block}

/* Open submenu on keyboard/touch (focus) */
.ps-dropdown:focus-within > .ps-dropdown-content{
  display: block;
}

/* on hover, set the color for the first child */
.ps-dropdown:hover > .ps-button:first-child{
    background-color:var(--hover);
    color:red /* var(--text); */
}

/***** navbar submenu (pops out from dropdown) ***************/

/* class for the main dropdown button */
.ps-submenu {
    position:relative;
    display:block; /* was inline-block */
    cursor:pointer
}

/* invisible hover bridge */
.ps-submenu::after{
  content: "";
  position: absolute;
  top: 0px; /* distance from top of container (e.g., ps-button) */
  right: 100%; /* distance from right of container (e.g., ps-button) in units of the container width */
  height: 100%;
  width: 8px;
  border: 0px solid #8888ff;
}

/* add left padding for the arrow */
.ps-submenu > .ps-button{
  position: relative;
  padding-left: 15px;   /* space for arrow */
}

/* Left-pointing arrow on the submenu trigger (the "PS1SC" row inside the menu) */
.ps-submenu > .ps-button::before{
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);

  /* triangle pointing left */
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid currentColor;
}

/* Position the submenu to the left of its parent menu (since main menu is right-aligned) */
.ps-submenu-content{
  cursor:auto;
  color:var(--text);
  background-color: var(--navbg);
  position: absolute;
  top: 0;
  right: 100%;
  left: auto;
  min-width:160px;
  margin: 0px;
  margin-right: 4px;      /* small gap so it doesn’t touch */
  padding:0;
  z-index: 1100;        /* so it floats above everything */
  align-items: left;
  border: 0px solid #8888ff;
  border-radius: var(--img-radius);
  display:none; /* not displayed until hovered */
}

/* style for the buttons in the dropdown */
.ps-submenu-content a.ps-button,button.ps-button{
  display: block;
  border-left: 0;
  border-right: 0;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

/* Open submenu on hover (desktop) */
.ps-submenu:hover > .ps-submenu-content{ display: block; }

/* Open submenu on keyboard/touch (focus) */
.ps-submenu:focus-within > .ps-submenu-content{
  display: block;
}

/* on hover, set the color for the first child */
.ps-submenu:hover > .ps-button:first-child{
    background-color:var(--hover);
    color:red /* var(--text); */
}

/***** button side-by-side with text ***************/

div.tw-button,div.tw-button-first {
    display: flex;           /* put children side by side */
    gap: 1rem;               /* spacing between the two divs */
    align-items: center;
    flex-direction:row;		    
    border-bottom: 2px solid var(--line);
}

div.tw-button-first {
    border-top: 0px solid var(--line);
}

div.tw-button-link-block {
    flex: 0 0 auto;          /* keep this block at its natural width */
  }

div.tw-button-text-block {
    flex: 1 1 auto;          /* allow this block to expand and shrink */
    min-width: 0;            /* IMPORTANT: allows text to wrap properly */
  }

div.tw-button-text-block p {
    margin: 0;               /* optional: remove default p margin */
    word-wrap: break-word;   /* ensure very long words can wrap */
  }

a.tw-button {
  border: 0px solid #ffcccc;
  border-radius: var(--img-radius);
  background-color: var(--button); 
  color: #0000ff;
  padding: 10px 20px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 5px 5px;
  cursor: pointer;
  width: 75px;
}

a.tw-button:hover{
  color:var(--text)!important;
  background-color:#ccc!important;
}

/***** stack for smaller screens *****/

/* was 660px */
@media (max-width: 480px) {
  div.tw-button {
    flex-direction:column;		    
  }
  a.tw-button {
    align-items: center;
  text-align: center;
  }
}

/***** button blended into the text ****/

.ps-button-inline {
  border: 2px solid #aaaaff;
  color: #0000ff;
  padding: 1px 1px;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 1px 1px;
  cursor: pointer;
  border-radius: var(--img-radius);
  /* width: 75px; */
}

.ps-button-inline:hover{
  color:var(--text)!important;
  background-color:#ccc!important;
  border: 2px solid #0000ff;
}