/* === Global typography & link colours (from old site.css) === */

body {
  margin: 0;
  text-align: center; /* matches old site, we'll fix main content below */
  font-family: Helvetica, Arial, sans-serif;
  background-color: #ccc;
  color: #505050;
  font-size: 100%;
  line-height: 1.125em;
}

/* Keep actual page content left-aligned inside the grid */
.site-grid {
  text-align: left;
}

h1 {
  padding: 1px;
  font-weight: bold;
  font-size: 2.8em;
  color: #ddd;
}

h2 {
  font-size: 1.2em;
  margin-top: 2em;
}

h3 {
  font-size: 1.0em;
  margin-top: 1em;
}

a {
  text-decoration: none;
  color: #000;
}

a:visited {
  color: #999;
}

a:hover {
  color: #c02;
}

p {
  margin-top: 1em;
}



/* === Top bar: translate old #topnav into Cassiopeia header === */

/* Header outer background = light grey (matches body)
   and a centered dark-grey strip aligned to the main content width */
.header {
  background-color: #ccc;                        /* light grey outside */
  background-image: linear-gradient(#bfc3cc, #bfc3cc); /* dark strip */
  background-repeat: no-repeat;
  background-position: center;                   /* center horizontally */
  background-size: min(100%, 82.5rem) 100%;      /* 82.5rem = 4 cols + 3 gaps */
}

/* Dark background only behind logo + menu, aligned with the content grid */

.container-header .grid-child:has(.navbar-brand),
.container-header .container-nav {
  background-color: #bfc3cc;
  padding-left: 0;
  padding-right: 0;
}

/* Remove extra padding and constrain height */
.header .container-nav {
  padding-left: 0;
  padding-right: 0;
}

.header .navbar {
  padding: 0;
  min-height: 45px;
  height: 45px;
  position: relative;
}

/* Logo area = old #logo (175x45 on the left) */
.header .navbar-brand {
  width: 175px;
  height: 45px;
  padding: 0;
  margin: 0;
  display: block;
}

.header .navbar-brand img {
  max-height: 45px;
  width: auto;
  display: block;
}

/* Hide the hamburger on desktop to mimic the old non-responsive bar */
@media (min-width: 768px) {
  .header .navbar-toggler {
    display: none;
  }
}

/* Place the menu flush to the right of the logo, same 45px height */
.header .navbar-collapse {
  position: absolute;
  left: 175px;
  right: 0;
  top: 0;
  height: 45px;
}

/* Reset Joomla menu list */
.header .navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;          /* no default Bootstrap flex behavior */
  font-size: 0.95em;
  white-space: nowrap;
}

/* AS: Main area is white */
main {
  background-color: #fff;
}

/* Make the main content area a white panel that fills the page height */
.grid-child.container-component {
  background-color: #fff;
  padding: 0 20px 40px;      /* left/right padding + a bit of bottom */
  box-sizing: border-box;
  min-height: calc(100vh - 120px); 
  /* 120px is a rough header/footer allowance.
     Adjust up/down if you see a little extra scroll or a gap. */
}

/* The inner content divs should NOT set their own background,
   so the white fills the whole column instead of just a box */
.com-content-category-blog.blog,
.com-content-article.item-page {
  background-color: transparent !important;
}



/* Hide the category image in the category header/description
   so gallery thumbnails are only used on the section listing, not on their own pages. */
.view-category .category-desc img {
  display: none;
}

/* --- Portfolio article layout: image above text --- */

/* Make the main article image behave like a block on its own line */
.com-content-article__image {
  float: none !important;
  display: block;
  margin: 0 auto 1.5rem auto; /* center + space below */
  text-align: center;
}

.com-content-article__image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Ensure the article body starts below any image/floats */
.com-content-article__body {
  clear: both;
}

/* --- Print-friendly layout for artworks --- */
@media print {
  /* Hide navigation, footer, sidebars if present */
  header,
  nav,
  .mod-menu,
  .sidebar-left,
  .sidebar-right,
  footer {
    display: none !important;
  }

  /* Make the article content full width */
  .container,
  .container-fluid,
  main {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .com-content-article__image {
    float: none !important;
    margin: 0 0 1.5rem 0 !important;
  }

  .com-content-article__image img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* --- Section view (Teaching / Art / Design / etc.): small, square image grid --- */

/* Each category tile (gallery) */
.view-categories .com-content-categories__item {
  display: inline-block;        /* let them sit side-by-side */
  width: 30%;                   /* ~3 per row on desktop */
  margin: 0 1% 1.5rem 1%;
  text-align: center;
  vertical-align: top;
}

/* Make the thumbnails square and smaller */
.view-categories .com-content-categories__item img {
  display: block;
  margin: 0 auto 0.5rem;
  max-width: 140px;             /* smaller thumbs */
  width: 100%;
  aspect-ratio: 1 / 1;          /* square shape */
  object-fit: cover;            /* crop to fill square */
}

/* Hide titles / descriptions / counters so it's image-only */
.view-categories .com-content-categories__item h3,
.view-categories .com-content-categories__item p,
.view-categories .com-content-categories__item .category-desc,
.view-categories .com-content-categories__item .category-items-counter {
  display: none;
}

/* On narrow screens, let them stack nicely */
@media (max-width: 800px) {
  .view-categories .com-content-categories__item {
    width: 45%;                 /* 2 per row */
  }
}

@media (max-width: 500px) {
  .view-categories .com-content-categories__item {
    width: 100%;                /* 1 per row */
  }
}

/* In gallery (category) view, hide the first article tile (thumbnail image) */
.view-category .com-content-category-blog__items .com-content-category-blog__item:first-of-type {
  display: none;
}

.view-category .com-content-category-blog__items > *:first-child {
  display: none;
}













/* Make header use CSS Grid and align logo + menu with content grid */

.container-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "top below"
    "logo logo"
    "nav  nav";
}

/* Place topbar and below-top into their grid areas */
.container-header .container-topbar {
  grid-area: top;
  padding-left: 0;
  padding-right: 0;
}

.container-header .container-below-top {
  grid-area: below;
  justify-content: flex-end;
}

/* The grid-child that contains .navbar-brand is our logo area */
.container-header .grid-child:has(.navbar-brand) {
  grid-area: logo;
}

/* The menu/search container is the nav area */
.container-header .container-nav {
  grid-area: nav;
}

/* On wider screens, align header with main content grid
   and put logo + menu on the same row, matching container-component width */
@media (width >= 991.98px) {
  .container-header {
    grid-template-columns:
      [full-start]  minmax(0, 1fr)
      [main-start]  repeat(4, minmax(0, 19.875rem))
      [main-end]    minmax(0, 1fr)
      [full-end];
    grid-template-areas: ". logo nav nav nav .";
    gap: 0;
  }

  /* If topbar / below-top exist, they go above */
  .container-header:has(.container-below-top, .container-topbar) {
    grid-template-areas:
      ". top   top   below below ."
      ". logo  nav   nav   nav   .";
  }

  .container-header .container-nav {
    display: flex;
    justify-content: center;  /* center horizontally within its grid area */
    align-items: flex-end;    /* keep menu baseline aligned with logo bottom */
  }
}








/* Each top-level menu item = old .topitem */
.container-header .mod-menu > li.nav-item {
  width: 90px;              /* same as old site */
}

/* Anchor behaves like .topitem: lowercase, white text, bottom-aligned */
.container-header .mod-menu > li.nav-item > a{
  padding-left: 5px;
  padding-right: 0;
  text-transform: lowercase;
}

/* Add the " >" arrow from old .topitem p:after */
.container-header .mod-menu > li.nav-item > a::after {
  content: " >";
}

/* Hover state = old .topitem:hover */
.container-header .mod-menu > li.nav-item > a:hover {
  background: #999;
  color: #ccc;
}

/* Active/current item = old .topspec */

.container-header .mod-menu  > li.nav-item.current > a,
.container-header .mod-menu  > li.nav-item.active > a {
  color: #666;
}

.container-header .mod-menu > li.nav-item.current > a:hover,
.container-header .mod-menu > li.nav-item.active > a:hover {
  background: #c02;
  color: #ccc;
}

/* Arrow colour on active item */
.container-header .mod-menu > li.nav-item.current > a::after,
.container-header .mod-menu > li.nav-item.active > a::after {
  color: #666;
}

.container-header .mod-menu > li.nav-item.current > a:hover::after,
.container-header .mod-menu > li.nav-item.active > a:hover::after {
  color: #ccc;
}