/* Sarah Perea Kane — modeled on the WordPress Twenty Seventeen look the site used */

:root {
  --text: #333;
  --heading: #222;
  --muted: #767676;
  --line: #eee;
  --link: #222;
  --bg: #fff;
  --content-width: 50rem;
  --gap: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.66 "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

img { max-width: 100%; height: auto; vertical-align: bottom; }

a { color: var(--link); text-decoration-color: rgba(0, 0, 0, .3); text-underline-offset: .15em; }
a:hover, a:focus { color: #000; text-decoration-color: currentColor; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #fff; padding: .75rem 1rem; z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Header ---------- */

.site-header { position: relative; overflow: hidden; background: #222; }

.header-media img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 60%;
}
.home .header-media { height: calc(100vh - 3.5rem); height: calc(100svh - 3.5rem); min-height: 22rem; }
.inner .header-media { height: clamp(11rem, 32vh, 20rem); }

.site-header::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 45%);
  pointer-events: none;
}

.branding {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  max-width: 62rem; margin: 0 auto; padding: 0 1rem 2rem;
  color: #fff;
}
.site-title {
  margin: 0; font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800;
  letter-spacing: .08em; line-height: 1.25; text-transform: uppercase;
}
.site-title a { color: #fff; text-decoration: none; }
.site-description { margin: .25rem 0 0; font-size: 1rem; opacity: .9; }

/* ---------- Navigation ---------- */

.main-nav {
  position: sticky; top: 0; z-index: 10;
  background: #fff; border-bottom: 1px solid var(--line);
  font-size: .875rem; font-weight: 600;
}
.main-nav > ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .5rem;
  max-width: 62rem; margin: 0 auto; padding: 0 1rem; list-style: none;
}
.main-nav li { position: relative; }
.main-nav a, .main-nav summary {
  display: block; padding: 1rem .75rem; color: var(--heading);
  text-decoration: none; cursor: pointer;
}
.main-nav summary { list-style: none; }
.main-nav summary::-webkit-details-marker { display: none; }
.main-nav summary::after {
  content: ""; display: inline-block; margin-left: .4em;
  border: .3em solid transparent; border-top-color: currentColor; transform: translateY(.15em);
}
.main-nav details[open] summary::after { transform: rotate(180deg) translateY(.15em); }
.main-nav a:hover, .main-nav summary:hover, .main-nav [aria-current], .main-nav .is-active > details > summary { color: #767676; }

.main-nav details ul {
  position: absolute; left: 50%; transform: translateX(-50%); top: 100%;
  min-width: 11rem; margin: 0; padding: .25rem 0; list-style: none;
  background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
}
.main-nav details ul a { padding: .6rem 1rem; font-weight: 400; white-space: nowrap; }

/* ---------- Content ---------- */

.content { max-width: var(--content-width); margin: 0 auto; padding: 3rem 1rem 4rem; }

.entry-title, .page-header .entry-title, .older-posts h2 {
  margin: 0 0 1.5rem; color: var(--heading);
  font-size: 1.5rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.post .entry-title { font-size: 1.375rem; letter-spacing: .04em; text-transform: none; }
.entry-title a { text-decoration: none; }
.entry-meta { margin: 0 0 .25rem; color: var(--muted); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }

.entry-content h2, .entry-content h3, .entry-content h4 { color: var(--heading); line-height: 1.4; margin: 2rem 0 1rem; }
.entry-content h5, .entry-content h6 {
  color: var(--heading); font-size: 1rem; font-weight: 600; line-height: 1.5;
  margin: 2.5rem 0 1rem;
}
.entry-content p { margin: 0 0 1.5em; }
.entry-content figure { margin: 0 0 1.5em; }
.entry-content::after { content: ""; display: table; clear: both; }

.alignleft { float: left; margin: .3em 1.5em 1em 0; }
.alignright { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

figcaption, .blocks-gallery-caption {
  margin: .5rem auto 0; color: var(--muted); font-size: .875rem; text-align: center;
}

.post { padding-bottom: 3rem; margin-bottom: 3rem; border-bottom: 1px solid var(--line); }
.post:last-of-type { border-bottom: 0; }
.back { margin-top: 2rem; }

.older-posts h2 { font-size: 1rem; }
.older-posts ul { padding: 0; list-style: none; }
.older-posts li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.older-posts .entry-meta { display: inline; margin-left: .5rem; }

/* ---------- Home panels ---------- */

.home .content { max-width: 46rem; }
.panel { margin: 0 0 3rem; text-align: center; }
.panel figure { margin: 0; }
.panel a { display: inline-block; transition: opacity .2s; }
.panel a:hover { opacity: .85; }
.panel p:empty, .panel .wp-block-group:empty, .wp-block-group__inner-container:empty { display: none; }

/* ---------- WordPress block galleries (legacy and nested markup) ---------- */

.wp-block-image > a { display: inline-block; }
.wp-block-image img { height: auto; max-width: 100%; }

.wp-block-gallery,
.wp-block-gallery .blocks-gallery-grid {
  display: flex; flex-wrap: wrap; gap: var(--gap);
  margin: 0 0 1.5em; padding: 0; list-style: none;
}
.wp-block-gallery .blocks-gallery-grid { width: 100%; margin: 0; }

.wp-block-gallery .blocks-gallery-item,
.wp-block-gallery.has-nested-images > figure.wp-block-image {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  flex: 1 1 calc(50% - var(--gap)); min-width: 0; margin: 0;
}
.wp-block-gallery .blocks-gallery-item figure { margin: 0; height: 100%; }
.wp-block-gallery .blocks-gallery-item a,
.wp-block-gallery.has-nested-images > figure > a { display: block; height: 100%; }
.wp-block-gallery img { display: block; width: 100%; }

.wp-block-gallery.columns-1 .blocks-gallery-item,
.wp-block-gallery.columns-1 > figure.wp-block-image { flex-basis: 100%; }
@media (min-width: 600px) {
  .wp-block-gallery.columns-3 .blocks-gallery-item,
  .wp-block-gallery.columns-3 > figure.wp-block-image,
  .wp-block-gallery.columns-default > figure.wp-block-image { flex-basis: calc(33.333% - var(--gap)); }
  .wp-block-gallery.columns-4 .blocks-gallery-item,
  .wp-block-gallery.columns-4 > figure.wp-block-image { flex-basis: calc(25% - var(--gap)); }
}

.wp-block-gallery.is-cropped img { height: 100%; object-fit: cover; }
.wp-block-gallery.is-cropped .blocks-gallery-item figure { display: flex; }

.wp-block-gallery > .blocks-gallery-caption,
.wp-block-gallery > figcaption { flex-basis: 100%; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line); padding: 2rem 1rem; color: var(--muted); font-size: .875rem; text-align: center; }
.site-footer a { color: var(--muted); }

@media (max-width: 599px) {
  .content { padding-top: 2rem; }
  .main-nav > ul { gap: 0; }
  .main-nav a, .main-nav summary { padding: .9rem .55rem; }
  .alignleft, .alignright { float: none; margin: 0 0 1.5em; }
}