/* Clubhouse: a dependency-free Publii theme for clubs and associations. */

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

html {
   scroll-behavior: smooth;
}

body {
   margin: 0;
   background: #fff;
   color: var(--text, #17211b);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 1rem;
   line-height: 1.65;
   text-rendering: optimizeLegibility;
}

body > main,
body > aside,
body > nav[aria-label="Pagination"] {
   width: min(calc(100% - 2rem), var(--content-width, 1180px));
   margin-inline: auto;
}

a {
   color: var(--primary, #166534);
   text-underline-offset: 0.18em;
}

a:hover {
   color: var(--primary-dark, #052e16);
}

img {
   display: block;
   height: auto;
   max-width: 100%;
}

button,
input,
textarea,
select {
   font: inherit;
}

h1,
h2,
h3,
h4 {
   color: var(--primary-dark, #052e16);
   font-weight: 800;
   letter-spacing: -0.035em;
   line-height: 1.08;
}

h1 {
   font-size: clamp(2.4rem, 7vw, 5.7rem);
}

h2 {
   font-size: clamp(2rem, 4vw, 3.2rem);
}

h3 {
   font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.skip-link {
   background: #fff;
   color: var(--primary-dark, #052e16);
   font-weight: 700;
   left: 1rem;
   padding: 0.7rem 1rem;
   position: fixed;
   top: -5rem;
   z-index: 1000;
}

.skip-link:focus {
   top: 1rem;
}

.site-header {
   background: var(--primary-dark, #052e16);
   color: #fff;
   position: relative;
   z-index: 20;
}

.site-header__inner {
   align-items: center;
   display: flex;
   gap: 2rem;
   justify-content: space-between;
   margin-inline: auto;
   min-height: 5rem;
   width: min(calc(100% - 2rem), var(--content-width, 1180px));
}

.brand {
   align-items: center;
   color: #fff;
   display: inline-flex;
   flex: 0 1 auto;
   font-weight: 850;
   gap: 0.75rem;
   letter-spacing: -0.02em;
   min-width: 0;
   text-decoration: none;
}

.brand:hover {
   color: #fff;
}

.brand img {
   max-height: 3.5rem;
   width: auto;
}

.brand__badge {
   align-items: center;
   background: var(--accent, #f4c95d);
   border-radius: 50%;
   color: var(--primary-dark, #052e16);
   display: inline-flex;
   font-size: 0;
   height: 2.75rem;
   justify-content: center;
   width: 2.75rem;
}

.brand__badge::before {
   content: "C";
   font-size: 1.1rem;
}

.brand__name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.site-navigation {
   margin-left: auto;
}

.site-navigation nav > .menu,
.site-footer .menu {
   align-items: center;
   display: flex;
   gap: clamp(0.85rem, 2vw, 1.8rem);
   list-style: none;
   margin: 0;
   padding: 0;
}

.site-navigation .menu > li {
   position: relative;
}

.site-navigation .menu a,
.site-navigation .menu span {
   color: #fff;
   display: block;
   font-size: 0.83rem;
   font-weight: 750;
   letter-spacing: 0.06em;
   padding-block: 1rem;
   text-decoration: none;
   text-transform: uppercase;
}

.site-navigation .menu a:hover,
.site-navigation .menu .active > a {
   color: var(--accent, #f4c95d);
}

.site-navigation .submenu {
   background: #fff;
   border-radius: 0.6rem;
   box-shadow: 0 18px 45px rgb(0 0 0 / 18%);
   display: none;
   left: -1rem;
   list-style: none;
   min-width: 13rem;
   padding: 0.5rem 1rem;
   position: absolute;
   top: 100%;
}

.site-navigation li:hover > .submenu,
.site-navigation li:focus-within > .submenu {
   display: block;
}

.site-navigation .submenu a,
.site-navigation .submenu span {
   color: var(--text, #17211b);
   padding: 0.65rem 0;
}

.menu-toggle {
   align-items: center;
   background: transparent;
   border: 1px solid rgb(255 255 255 / 35%);
   border-radius: 0.45rem;
   color: #fff;
   cursor: pointer;
   display: none;
   gap: 0.7rem;
   padding: 0.55rem 0.75rem;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
   background: currentColor;
   display: block;
   height: 2px;
   position: relative;
   width: 1.25rem;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
   content: "";
   left: 0;
   position: absolute;
}

.menu-toggle__icon::before { top: -0.4rem; }
.menu-toggle__icon::after { top: 0.4rem; }

.hero {
   background:
      radial-gradient(circle at 78% 38%, rgb(244 201 93 / 26%) 0 8%, transparent 8.5%),
      linear-gradient(135deg, var(--primary-dark, #052e16), var(--primary, #166534));
   color: #fff;
   display: grid;
   grid-template-columns: minmax(0, 1.1fr) minmax(16rem, 0.9fr);
   min-height: clamp(31rem, 68vh, 46rem);
   overflow: hidden;
   position: relative;
}

.home {
   margin: 0;
   max-width: none;
   width: 100%;
}

.hero__content {
   align-self: center;
   margin-left: max(1rem, calc((100vw - var(--content-width, 1180px)) / 2));
   max-width: 48rem;
   padding: 5rem 2rem 5rem 0;
   position: relative;
   z-index: 2;
}

.hero h1 {
   color: #fff;
   margin: 0 0 1.5rem;
   max-width: 12ch;
}

.eyebrow {
   color: var(--accent, #f4c95d);
   font-size: 0.79rem;
   font-weight: 850;
   letter-spacing: 0.13em;
   margin: 0 0 0.8rem;
   text-transform: uppercase;
}

.section__heading .eyebrow {
   color: var(--primary, #166534);
}

.hero__intro {
   color: rgb(255 255 255 / 84%);
   font-size: clamp(1.05rem, 2vw, 1.3rem);
   max-width: 41rem;
}

.hero__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 0.8rem;
   margin-top: 2rem;
}

.button {
   border: 2px solid transparent;
   border-radius: 0.4rem;
   display: inline-flex;
   font-size: 0.86rem;
   font-weight: 800;
   justify-content: center;
   letter-spacing: 0.035em;
   padding: 0.8rem 1.15rem;
   text-decoration: none;
   text-transform: uppercase;
}

.button--primary {
   background: var(--accent, #f4c95d);
   color: var(--primary-dark, #052e16);
}

.button--secondary {
   border-color: rgb(255 255 255 / 55%);
   color: #fff;
}

.button--primary:hover,
.button--secondary:hover {
   background: #fff;
   border-color: #fff;
   color: var(--primary-dark, #052e16);
}

.hero__mark {
   align-items: end;
   display: flex;
   gap: clamp(1rem, 2vw, 2rem);
   justify-content: center;
   opacity: 0.48;
   padding: 4rem 2rem 0;
   transform: rotate(-5deg) translateY(3rem);
}

.hero__mark span {
   background: linear-gradient(var(--accent, #f4c95d), rgb(255 255 255 / 20%));
   border-radius: 999px 999px 0 0;
   display: block;
   height: 74%;
   width: clamp(3.5rem, 7vw, 6rem);
}

.hero__mark span:nth-child(2) { height: 100%; }
.hero__mark span:nth-child(3) { height: 57%; }

.section {
   margin-inline: auto;
   padding: clamp(4rem, 7vw, 7rem) 1rem;
   width: min(100%, calc(var(--content-width, 1180px) + 2rem));
}

.section__heading {
   align-items: end;
   display: flex;
   justify-content: space-between;
   margin-bottom: 2rem;
}

.section__heading h2 {
   margin: 0;
}

.card-grid {
   display: grid;
   gap: 1.4rem;
   grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
   background: #fff;
   border: 1px solid #e2e7e2;
   border-radius: 0.8rem;
   box-shadow: 0 14px 32px rgb(5 46 22 / 7%);
   display: flex;
   flex-direction: column;
   overflow: hidden;
}

.card__image {
   aspect-ratio: 16 / 10;
   background: var(--surface, #f6f7f2);
   display: block;
   overflow: hidden;
}

.card__image img {
   height: 100%;
   object-fit: cover;
   transition: transform 240ms ease;
   width: 100%;
}

.card:hover .card__image img {
   transform: scale(1.025);
}

.card__body {
   display: flex;
   flex: 1;
   flex-direction: column;
   padding: 1.4rem;
}

.card__meta {
   display: flex;
   flex-wrap: wrap;
   font-size: 0.76rem;
   font-weight: 750;
   gap: 0.6rem 1rem;
   letter-spacing: 0.05em;
   text-transform: uppercase;
}

.card__meta time { color: #637067; }

.card h3 {
   margin: 0.8rem 0;
}

.card h3 a {
   color: inherit;
   text-decoration: none;
}

.card__excerpt {
   color: #526058;
   margin: 0 0 1.2rem;
}

.card__excerpt > :first-child { margin-top: 0; }
.card__excerpt > :last-child { margin-bottom: 0; }

.card__link {
   font-size: 0.85rem;
   font-weight: 800;
   margin-top: auto;
   text-decoration: none;
}

.community-callout {
   align-items: center;
   background: var(--primary, #166534);
   color: #fff;
   display: flex;
   gap: 3rem;
   justify-content: space-between;
   padding: clamp(3.2rem, 7vw, 6rem) max(1rem, calc((100vw - var(--content-width, 1180px)) / 2));
}

.community-callout h2 {
   color: #fff;
   margin: 0 0 0.8rem;
}

.community-callout p:not(.eyebrow) {
   color: rgb(255 255 255 / 82%);
   margin: 0;
   max-width: 48rem;
}

.button--light {
   background: #fff;
   color: var(--primary-dark, #052e16);
   flex: none;
}

.button--light:hover {
   background: var(--accent, #f4c95d);
}

body > main:not(.home) {
   max-width: 52rem;
   padding-block: clamp(3rem, 7vw, 6rem);
}

body > main:not(.home) > article,
body > main:not(.home) > section,
body > main:not(.home) > div {
   margin-bottom: 2.5rem;
}

body > main:not(.home) article > header {
   margin-bottom: 2rem;
}

body > main:not(.home) article > header h1 {
   font-size: clamp(2.2rem, 6vw, 4.6rem);
   margin-bottom: 1rem;
}

body > main:not(.home) article > header time,
body > main:not(.home) article > header > a {
   color: #637067;
   font-size: 0.85rem;
   margin-right: 0.75rem;
}

#featured-image {
   margin: 0 0 2.5rem;
}

#featured-image img,
body > main:not(.home) > figure img {
   border-radius: 0.8rem;
   width: 100%;
}

#post-entry,
#page-entry {
   font-size: 1.08rem;
}

#post-entry > :first-child,
#page-entry > :first-child { margin-top: 0; }

#post-entry h2,
#page-entry h2 { margin-top: 2.5rem; }

blockquote {
   border-left: 4px solid var(--accent, #f4c95d);
   color: #3e4c43;
   margin-left: 0;
   padding: 0.6rem 1.2rem;
}

pre,
code {
   background: var(--surface, #f6f7f2);
   border-radius: 0.3rem;
}

code { padding: 0.15em 0.35em; }

pre {
   overflow-x: auto;
   padding: 1rem;
}

table {
   border-collapse: collapse;
   width: 100%;
}

th,
td {
   border-bottom: 1px solid #dfe5df;
   padding: 0.7rem;
   text-align: left;
}

#post-navigation {
   border-block: 1px solid #dfe5df;
   display: flex;
   gap: 1rem;
   justify-content: space-between;
   margin-top: 3rem;
   padding-block: 1.2rem;
}

#related-posts > div {
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(3, minmax(0, 1fr));
}

#related-posts section {
   background: var(--surface, #f6f7f2);
   border-radius: 0.6rem;
   padding: 1rem;
}

body > aside {
   border-top: 1px solid #e2e7e2;
   display: grid;
   gap: 1.5rem;
   grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
   margin-bottom: 4rem;
   padding-top: 2rem;
}

body > nav[aria-label="Pagination"],
.pagination {
   display: flex;
   gap: 0.5rem;
   justify-content: center;
   list-style: none;
   padding: 1rem 0 4rem;
}

.site-footer {
   background: var(--primary-dark, #052e16);
   color: rgb(255 255 255 / 76%);
   padding: 3rem max(1rem, calc((100vw - var(--content-width, 1180px)) / 2)) 1.2rem;
}

.site-footer__inner {
   align-items: start;
   display: flex;
   gap: 2rem;
   justify-content: space-between;
}

.site-footer__brand {
   color: #fff;
   font-size: 1.25rem;
   font-weight: 850;
   text-decoration: none;
}

.site-footer p {
   margin: 0.45rem 0 0;
}

.site-footer .menu {
   flex-wrap: wrap;
   justify-content: end;
}

.site-footer .menu a,
.site-footer .menu span {
   color: #fff;
   font-size: 0.85rem;
   text-decoration: none;
}

.site-footer .submenu {
   display: none;
}

.site-footer__meta {
   border-top: 1px solid rgb(255 255 255 / 16%);
   display: flex;
   font-size: 0.78rem;
   justify-content: space-between;
   margin-top: 2rem;
   padding-top: 1rem;
}

.align-left { text-align: left; }
.align-right { text-align: right; }
.align-center { text-align: center; }
.align-justify { text-align: justify; }

.gallery {
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

@media (max-width: 840px) {
   .menu-toggle { display: inline-flex; }

   .site-navigation {
      background: var(--primary-dark, #052e16);
      display: none;
      left: 0;
      padding: 0 1rem 1.2rem;
      position: absolute;
      right: 0;
      top: 100%;
   }

   .site-navigation.is-open { display: block; }

   .site-navigation nav > .menu {
      align-items: stretch;
      flex-direction: column;
      gap: 0;
   }

   .site-navigation .menu a,
   .site-navigation .menu span {
      border-top: 1px solid rgb(255 255 255 / 14%);
      padding: 0.8rem 0;
   }

   .site-navigation .submenu {
      background: transparent;
      box-shadow: none;
      display: block;
      margin-left: 1rem;
      padding: 0;
      position: static;
   }

   .site-navigation .submenu a,
   .site-navigation .submenu span { color: #fff; }

   .hero {
      grid-template-columns: 1fr;
   }

   .hero__content {
      margin: 0;
      padding: 4rem 1rem 2rem;
   }

   .hero__mark {
      height: 14rem;
      padding-top: 0;
   }

   .card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .community-callout {
      align-items: flex-start;
      flex-direction: column;
   }

   #related-posts > div {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 560px) {
   .brand__name { max-width: 12rem; }
   .menu-toggle__label { display: none; }
   .card-grid { grid-template-columns: 1fr; }
   .site-footer__inner,
   .site-footer__meta {
      align-items: flex-start;
      flex-direction: column;
   }
   .site-footer .menu { justify-content: start; }
}

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
   }
}