/* eileenkennedy.com on sitebuilder: style.css (theme) and eileen.css (the site's Drupal module) are unchanged. This adds the few
   Drupal core rules the pages relied on, replaces two layout hacks, and makes the site work on
   phones (it was a fixed 800px page) without changing the desktop look. */

/* Drupal core: the primary links sit in a row; the current page's link is black */
ul.links { margin: 0; padding: 0; }
ul.links li { display: inline; list-style-type: none; padding: 0 0.5em; }
#index .nav-index, #projects .nav-projects, #links .nav-links, #contact .nav-contact, #about .nav-about { color: #000; }
.rtecenter { text-align: center; }

/* the theme showed no page heading; keep it for search engines and screen readers only */
.page-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.logo img { float: left; border: 0; }
#footer { clear: both; padding-top: 4em; line-height: 1.6em; }
#contentwrapper img { max-width: 100%; height: auto; }

/* About: the exhibitions list keeps the theme's text style */
ul.exhibitions li { margin-bottom: 0.2em; line-height: 1.6em; }

/* Links: photo and list side by side (was a layout table) */
.links-layout { display: flex; gap: 6px; align-items: flex-start; }
.links-layout .links-photo { margin: 0; flex: 0 0 auto; }
.links-list { margin-top: 0; }
.links-list li { line-height: 1.6em; }

/* Contact: photo beside the text (was held apart by an 800px padding on the image) */
.photo-beside { display: flex; gap: 25px; align-items: flex-start; margin: 12px 40px 0; }
.photo-beside .photo { margin: 0; flex: 0 0 auto; }
.photo-beside .beside { flex: 1; line-height: 1.6em; }
.photo-beside .beside p:first-child { margin-top: 0; }

/* Projects: the card's title was an <h1>; now an <h2> that looks the same */
.projectDeatilsInList h2 { margin: -1px 0 10px; padding: 0; font-size: 21px; font-weight: normal; }
#projectContainer { padding-top: 10px; }
#projectContainer::after { content: ""; display: block; clear: both; }
/* image left, text right, as on the live site */
.ProjectDetailsContainer { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 30px; width: 800px; }
.ProjectDetailsContainer img { object-fit: cover; display: block; }
.projectDeatilsInList { float: none; width: 620px; }   /* the live site squashes the picture into the square */

/* mobile menu */
.menu-toggle { display: none; }

@media screen and (max-width: 820px) {
  #maincontainer, #contentwrapper, #admin-menu, .ProjectDetailsContainer { width: auto; }
  #maincontainer { padding: 0 16px; }
  #contentwrapper { float: none; }
  #topsection { height: auto; margin-bottom: 24px; }
  #topsection::after { content: ""; display: block; clear: both; }
  .logo img { margin-top: 15px; }
  .menu-toggle {
    display: block; float: right; margin-top: 22px; padding: 6px 0 6px 12px; border: 0; background: none;
    font: small Arial, Helvetica, sans-serif; color: #6c9c31; cursor: pointer;
  }
  .menu-toggle::before { content: "\2630\00a0"; }
  .menu-open .menu-toggle::before { content: "\2715\00a0"; }
  #navmenu { position: static; float: none; clear: both; display: none; padding: 10px 0 0; }
  .no-js #navmenu, .menu-open #navmenu { display: block; }
  #navmenu ul.links li { display: block; padding: 8px 0; text-align: right; }
  .links-layout, .photo-beside { flex-direction: column; margin: 0; }
  .ProjectDetailsContainer { flex-direction: column-reverse; width: auto; gap: 10px; }
  .projectDeatilsInList { float: none; width: auto; margin-bottom: 10px; }
  #footer { padding-top: 2em; }
}