/*
 * IMANI additions on top of the Nirvana theme CSS.
 * Replaces styles that WordPress core and plugins used to provide (block editor, galleries,
 * TablePress, Swift Callouts, Smart Logo Showcase) and the theme's jQuery behaviours.
 */

/* ---------- Menu: dropdowns (theme used jQuery hover; CSS here) ---------- */
#access ul li:hover > ul,
#access ul li:focus-within > ul {
  display: block;
  animation: imani-submenu 0.3s ease-out;
}
@keyframes imani-submenu {
  from {
    opacity: 0;
    margin-left: 50px;
  }
  to {
    opacity: 1;
    margin-left: 0;
  }
}
#access a[role='button'] {
  cursor: default;
}
#nav-toggle {
  user-select: none;
}
@media (max-width: 800px) {
  #access.imani-nav-open {
    display: block;
  }
  /* On phones, show submenus expanded under their parent instead of on hover. */
  #access.imani-nav-open ul ul {
    display: block;
    animation: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #access ul li:hover > ul,
  #access ul li:focus-within > ul {
    animation: none;
  }
}

/* ---------- Back to top ---------- */
#toTop {
  transition: bottom 0.4s, opacity 0.4s;
  cursor: pointer;
}

/* ---------- Homepage slider (replaces Nivo) ---------- */
#slider.imani-slider {
  display: grid;
  background: none; /* the theme pointed at a Nivo "loading" gif we don't ship */
}
.imani-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.imani-slide[data-active='true'] {
  opacity: 1;
  z-index: 1;
}
.theme-default .imani-slider img,
.imani-slide img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}
@media (prefers-reduced-motion: reduce) {
  .imani-slide {
    transition: none;
  }
}

/* ---------- Homepage announcements (was one paragraph of inline-styled HTML) ---------- */
.imani-announcement {
  margin-bottom: 1.4em;
}
.imani-announcement:last-of-type {
  margin-bottom: 0;
}
.imani-announcement__heading {
  display: block;
  font-size: 1.5em;
  color: darkblue;
  font-weight: bold;
  line-height: 1.4;
}
#pp-afterslider .imani-announcement p {
  display: inline;
  margin: 0;
}
.imani-announcement__more::before {
  content: ' ';
}
.imani-announcement__more::after {
  content: '.';
  color: #013781;
}

/* ---------- Block editor equivalents ---------- */
.entry-content .has-text-align-center {
  text-align: center;
}
.entry-content figure {
  margin: 0 0 1em;
}
.entry-content .wp-block-image .aligncenter,
.entry-content figure.aligncenter {
  display: table;
  margin-left: auto;
  margin-right: auto;
}
.entry-content figure.aligncenter img {
  margin: 0 auto;
}
.entry-content img {
  max-width: 100%;
  height: auto;
}
.entry-content img.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.wp-block-columns {
  display: flex;
  gap: 2em;
  margin-bottom: 1.75em;
  align-items: flex-start;
}
.wp-block-column {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 781px) {
  .wp-block-columns {
    flex-wrap: wrap;
  }
  .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* ---------- Image captions ---------- */
.wp-caption {
  max-width: 100%;
}
.wp-caption img {
  display: block;
}

/* ---------- Callout box (was the Swift Callouts plugin) ---------- */
.imani-callout {
  background-color: #013781;
  border: 2px groove #013781;
  border-radius: 10px;
  margin: 5px;
  padding: 10px;
  color: #fff;
  font-style: italic;
}
.imani-callout p {
  margin-bottom: 0.5em;
}
.imani-callout p:last-child {
  margin-bottom: 0;
}
.imani-callout a {
  color: #fff;
  text-decoration: underline;
}
.imani-callout--right {
  float: right;
  margin-left: 15px;
}
.imani-callout--left {
  float: left;
  margin-right: 15px;
}
@media (max-width: 640px) {
  .imani-callout--right,
  .imani-callout--left {
    float: none;
    width: auto !important;
  }
}

/* ---------- Photo gallery (WordPress [gallery] look) ---------- */
.imani-gallery {
  margin: auto;
}
.imani-gallery .gallery-item {
  float: left;
  margin-top: 10px;
  text-align: center;
}
.imani-gallery img {
  border: 2px solid #cfcfcf;
}
@media (max-width: 640px) {
  .imani-gallery .gallery-item {
    width: 50% !important;
  }
}

/* ---------- Tables (TablePress look) ---------- */
.entry-content table.imani-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 1em;
}
.entry-content table.imani-table th,
.entry-content table.imani-table td {
  padding: 8px;
  text-align: left;
  vertical-align: top;
  border: none;
}
.entry-content table.imani-table thead th {
  background-color: #7a902e;
  color: #fff;
  font-weight: 700;
}
.entry-content table.imani-table tbody td {
  border-top: 1px solid #ddd;
}
.entry-content table.imani-table tbody tr.odd td {
  background-color: #f9f9f9;
}
.entry-content table.imani-table td p {
  margin-bottom: 0.3em;
}
.entry-content table.imani-table td img {
  display: block;
  margin: 0 auto;
}
@media (max-width: 780px) {
  .entry-content table.imani-table {
    display: block;
    overflow-x: auto;
  }
}

/* ---------- Logo grid (Elementor grid / Smart Logo Showcase) ---------- */
.imani-logo-grid {
  display: grid;
  gap: 20px;
  align-items: center;
  margin-bottom: 1.5em;
}
.imani-logo-grid__item img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}
.imani-logo-grid--boxed .imani-logo-grid__item {
  border: 1px solid #e5e5e5;
  padding: 10px;
  background: #fff;
}
@media (max-width: 640px) {
  .imani-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------- Embedded maps / videos ---------- */
.imani-embed {
  display: block;
  width: 100%;
  border: 0;
  margin-bottom: 1em;
}

/* ---------- Tiled gallery (WordPress block gallery, "crop images") ---------- */
.imani-tiles {
  margin: 0 0 1em;
}
.imani-tiles .blocks-gallery-grid {
  display: grid;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.imani-tiles .blocks-gallery-item {
  margin: 0;
  list-style: none;
}
.imani-tiles .blocks-gallery-item figure {
  margin: 0;
  height: 100%;
}
.imani-tiles img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 640px) {
  .imani-tiles .blocks-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}