@tailwind base;
@tailwind components;
@tailwind utilities;

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer base {
  h4 {
    @apply text-[1.2rem] leading-[1.2] font-bold my-3;
  }
  p + h4 {
    @apply mt-8;
  }
  figcaption {
    @apply text-xs italic text-red;
  }
  figcaption a {
    @apply hover:text-black;
  }
  figcaption em {
    @apply not-italic;
  }
}

@layer components {
  .main-col-fig {
    @apply my-8 md:[.main-col-imgs_&]:flex md:[.main-col-imgs_&]:flex-row md:items-end md:gap-[--col-gap-dt] md:[.side-col-imgs_&]:hidden;
  }
  .main-col-img {
    @apply md:w-[--main-col-width-dt];
  }
  .main-col-figcap {
    @apply md:w-[--main-col-caption-width-dt] text-xs italic text-red mt-3;
  }
  .initial-blink {
    @apply animate-blink group-hover:animate-none;
  }
}

@layer utilities {
  .content-height-mb {
    height: calc(100vh - var(--menu-closed-size-mb));
    height: calc(100dvh - var(--menu-closed-size-mb));
  }
  .content-height-dt {
    height: 100vh;
    height: 100dvh;
  }
  .content-min-height-mb {
    min-height: calc(100vh - var(--menu-closed-size-mb));
    min-height: calc(100dvh - var(--menu-closed-size-mb));
  }
  .content-min-height-dt {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .img-blend {
    @apply mix-blend-luminosity;
  }
}

:root {
  --menu-closed-size-mb: 3.5rem;
  --menu-open-size-mb: 75dvh;
  --menu-closed-size-dt: 4rem;
  --menu-open-size-dt: 20rem;
  --max-content-width: 48rem;
  --main-col-width-dt: 62%;
  --main-col-caption-width-dt: 22%;
  --col-gap-dt: 1.5rem;
}

nav a.current {
  @apply text-white cursor-default;
}

.body-text > p, .footnotes p {
  @apply mb-4 font-light leading-[1.25];
}
.body-text > p:last-of-type {
  /* @apply mb-0; */
}
.body-text a {
  @apply font-bold hover:text-red;
}
.body-text strong {
  @apply font-bold;
}

h4 span.light-weight {
  @apply font-light;
}

a.footnote {
  /* font-size: 115%; */
  @apply text-red hover:text-black ml-[0.125em];
}

a.reversefootnote {
  @apply text-red hover:text-black;
}

.footnotes li {
  list-style: decimal;
  list-style-position: outside;
}

#mc_embed_signup #mc_embed_signup_scroll div.mce_inline_error {
  @apply bg-transparent m-0 p-0 text-red;
}

a.button {
  @apply inline-block text-white hover:text-black bg-red italic font-bold mt-4 md:mt-8 px-6 md:px-8 py-2 md:py-4 rounded-full;
}
.nav a[href="/admin/help"], header a[href="/admin/help"] {
  display: none; }

footer .credit, .login-footer .credit {
  display: none; }

table tbody tr:nth-of-type(even) td {
  background-color: #f2f2f2; }
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */