/*
Theme Name: Danlos
Theme URI: https://danlos.ch/
Description: A Site Editor-managed theme for the Association Danlos website.
Version: 2.1.1
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: danlos
*/

:root {
  --danlos-shadow: 0 4px 16px rgba(17, 17, 26, .1), 0 8px 24px rgba(17, 17, 26, .1), 0 16px 56px rgba(17, 17, 26, .1);
}

* { box-sizing: border-box; }
html { background: #fffefe; overflow-x: clip; }
body { margin: 0; overflow-x: clip; }
a { text-underline-offset: .16em; }

/* The Astro layout reserved exactly this space for the fixed, two-line header. */
.site-header { height: 8rem; margin: 0; }
.site-nav {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none !important;
  overflow: visible;
  background: #dbeafe;
  box-shadow: var(--danlos-shadow);
  transition: top .8s ease-in-out;
}
.nav-container { width: 90vw !important; max-width: none !important; margin-right: auto; margin-left: auto; }
.nav-top {
  max-height: 4rem;
  min-height: 4rem;
  padding: .25rem 0;
  overflow: hidden;
  transition: max-height .8s ease-in-out, margin-top .8s ease-in-out, opacity .35s ease-in-out;
}
.brand { min-width: 0; }
.brand .custom-logo-link, .nav-small-logo .custom-logo-link { display: flex; }
.brand .custom-logo, .nav-small-logo .custom-logo { width: auto; height: 3rem; max-width: none; margin-right: .75rem; }
.brand .wp-block-site-title { margin: 0; min-width: 0; font-size: 1.5rem !important; line-height: 1.15 !important; }
.brand .wp-block-site-title { font-family: SFMono-Regular, Consolas, 'Liberation Mono', monospace; }
.brand .wp-block-site-title a { color: inherit; text-decoration: none; }
.nav-utilities { margin-left: auto; gap: 1.5rem; }
.support-button, .newsletter-button { margin: 0; }
.support-button .wp-block-button__link { padding: .5rem 1rem; border-radius: .25rem; font-size: 1rem; font-weight: 700; }
.nav-bottom { position: relative; min-height: 4rem; margin-top: .75rem !important; padding: .25rem 0 .75rem; }
.nav-small-logo { position: absolute; top: .25rem; left: 0; margin: 0; opacity: 0; pointer-events: none; transition: opacity 1s ease-in-out; }
.nav-bottom > .wp-block-navigation { width: 100%; margin: 0 auto; font-size: 1.125rem; font-weight: 500; }
.nav-bottom .wp-block-navigation__container { gap: 0; }
.nav-bottom .wp-block-navigation-item { padding-left: 2rem; }
.nav-bottom .wp-block-navigation a { color: inherit; text-align: center; text-decoration: none; }
.nav-bottom .wp-block-navigation-item__label { white-space: nowrap; }
.site-nav--scrolled .nav-top { max-height: 0; margin-top: -4rem; padding-top: 0; padding-bottom: 0; opacity: 0; pointer-events: none; }
.site-nav--scrolled .nav-small-logo { opacity: 1; pointer-events: auto; }
.mobile-drawer-extras { display: none; }

.site-main, .wp-site-blocks > main {
  width: 900px;
  max-width: calc(100% - 2rem);
  margin-right: auto;
  margin-left: auto;
  color: rgb(46, 46, 46);
  font-size: 20px;
  line-height: 1.6;
}
.page-content, .home-content { max-width: 900px; text-align: justify; }
.page-content :where(h1), .home-content :where(h1), .page-content > .wp-block-post-title, .home-content > .wp-block-post-title, .not-found-content h1 { font-size: 3rem; font-weight: 700; line-height: 1; text-align: center; }
.page-content :where(p, li), .home-content :where(p, li) { font-size: 1.125rem; line-height: 1.7777778; }
.page-content p, .home-content p { margin-bottom: 1em; }
.page-content :where(h2), .home-content :where(h2) { font-size: 1.5rem; font-weight: 700; line-height: 2; }
.page-content :where(h3), .home-content :where(h3) { line-height: 1.3; }
.page-content ul, .home-content ul { margin-top: -.8em; margin-bottom: 1em; }
.page-content ul ul, .home-content ul ul { list-style-type: square !important; }
.page-content li, .home-content li { margin-bottom: .5em; }
.page-content figure img { border-radius: .375rem; box-shadow: 0 10px 20px rgba(0, 0, 0, .1); }
.page-content .wp-block-table { overflow-x: auto; }
.page-content table { width: 100%; min-width: 38rem; border-collapse: collapse; margin: 1.5rem 0; }
.page-content th, .page-content td { padding: .5rem; border: 1px solid rgba(46, 46, 46, .2); text-align: left; }
.page-content td { font-size: 16px; }

.danlos-related-pages {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid rgb(75, 85, 99);
  border-radius: 1.5rem;
  text-align: center;
}
.danlos-related-pages__link { color: var(--wp--preset--color--primary); text-decoration: none; }
.danlos-related-pages__link:hover { text-decoration: underline; }

/* Existing editor content uses these class names from the Astro pages. */
.home-content .wp-block-group.is-layout-constrained > * { max-width: 100%; }
.intro { margin: 2rem 0; padding: 1.5rem; background: #eff6ff; border-radius: 1.5rem; }
.home-section { display: flex; flex-wrap: wrap; align-items: center; margin: 3rem 0 1.5rem; }
.home-section.reverse { flex-direction: row-reverse; }
.home-image { display: flex; width: 33.333%; justify-content: center; }
.home-image img { width: 100%; height: auto; object-fit: cover; }
.home-copy { width: 66.667%; padding: 0 2rem; }
.home-teaser { color: #60a5fa; }
.centered { text-align: center; }
.event-button, .button-link { display: inline-block; border-radius: 999px; font-weight: 600; text-decoration: none; }
.event-button { padding: .5rem 1rem; background: #bbf7d0; color: inherit; }
.button-link { padding: .75rem 2rem; background: #3b82f6; color: #fffefe; font-size: 1.125rem; }
.event-button:hover, .button-link:hover { filter: brightness(.94); text-decoration: none; }
.table-scroll { width: 100%; overflow-x: auto; }
.table-scroll table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.table-scroll th, .table-scroll td { padding: .5rem; border: 1px solid rgba(46, 46, 46, .2); text-align: left; }
.schedule-note td { font-style: italic; }

/* Association and Zebra retain the component-level visual structure of Astro. */
.committee-title { font-weight: 700; text-align: center; }
.committee { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2.5rem; margin-bottom: 1.5rem; text-align: center; }
.committee > div { width: 25%; min-width: 9rem; }
.committee img { display: block; width: 9rem; max-width: 100%; margin: 0 auto .5rem; border-radius: 1rem; }
.committee strong, .committee span { display: block; }
.committee span { font-size: .875rem; }
.zebra-intro { margin-bottom: 3rem; font-size: 1.25rem; text-align: center; }
.zebra-panel { margin: 2.5rem 0; padding: 2rem; border-radius: 1.5rem; background: #eff6ff; }
.zebra-panel h2, .zebra-section h2 { margin-top: 0; font-size: 1.875rem; line-height: 1.25; }
.zebra-panel p, .zebra-panel li, .zebra-section p, .zebra-section li { font-size: 1.25rem; }
.zebra-section { margin-bottom: 5rem; }

.site-footer { margin-top: 1rem; padding: 1rem; border: 0; }
.footer-inner { flex-direction: column; width: min(100%, 1200px); margin: 0 auto; }
.footer-inner > * { margin-top: 1rem; margin-bottom: 1rem; }
.newsletter-button .wp-block-button__link, a.newsletter-button { padding: .5rem 1rem; border-radius: 999px; font-size: 1rem; }
a.newsletter-button { display: inline-block; background: #fed7aa; color: rgb(46, 46, 46); text-decoration: none; }
.footer-inner .wp-social-link { color: rgb(46, 46, 46); }
.footer-inner p { margin: 0; }
.not-found-content { text-align: center; }
.not-found-content p { text-align: center; }
.not-found-content .wp-block-image img { display: block; max-width: 100%; height: auto; margin: 2rem auto; }

@media (min-width: 450px) {
  .danlos-related-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 800px) {
  .danlos-related-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-inner { flex-direction: row; }
  .footer-inner > * { margin-top: 0; margin-bottom: 0; }
}

@media (max-width: 800px) {
  .site-header { height: 6rem; }
  .site-nav { min-height: 4rem; }
  .nav-top { min-height: 4rem; padding: .25rem 0; }
  .nav-utilities { display: none !important; }
  .brand .custom-logo { height: 3rem; margin-right: .5rem; }
  .brand .wp-block-site-title { font-size: clamp(1rem, 4vw, 1.35rem); }
  .nav-bottom { position: absolute; top: 0; right: 5vw; width: auto; min-height: 4rem; padding: 0; }
  .nav-small-logo { display: none; }
  .nav-bottom > .wp-block-navigation { width: auto; }
  .nav-bottom .wp-block-navigation__responsive-container-open { padding: .5rem; }
  .nav-bottom .wp-block-navigation__responsive-container.is-menu-open {
    position: fixed;
    top: 4rem;
    right: 0;
    left: auto;
    width: min(16rem, 88vw);
    height: calc(100vh - 4rem);
    min-height: 0;
    padding: 1.5rem;
    background: #fffefe;
    color: rgb(46, 46, 46);
    box-shadow: -4px 0 16px rgba(17, 17, 26, .1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav-bottom .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
  .nav-bottom .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; }
  .nav-bottom .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { width: 100%; gap: .5rem; }
  .nav-bottom .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; padding-left: 0; }
  .nav-bottom .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a { display: block; padding: .5rem 0; text-align: left; }
  .nav-bottom .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-bottom: 5.5rem; }
  .site-nav:has(.wp-block-navigation__responsive-container.is-menu-open) .mobile-drawer-extras {
    position: fixed;
    z-index: 100001;
    bottom: 0;
    right: 0;
    display: flex !important;
    flex-direction: column;
    width: min(16rem, 88vw);
    margin: 0;
    padding: 1rem 1.5rem 1.5rem;
    background: #fffefe;
    color: rgb(46, 46, 46);
    border-top: 1px solid rgb(209, 213, 219);
  }
  .mobile-support-button { width: 100%; margin: 0; }
  .mobile-support-button .wp-block-button, .mobile-support-button .wp-block-button__link { width: 100%; }
  .mobile-support-button .wp-block-button__link { padding: .5rem 1rem; border-radius: .25rem; font-size: 1rem; font-weight: 700; text-align: center; }
  .site-nav--scrolled .nav-top { max-height: none; margin-top: 0; padding-top: .25rem; padding-bottom: .25rem; opacity: 1; pointer-events: auto; }
  .page-content table { min-width: 32rem; }
  .home-section, .home-section.reverse { flex-direction: column; }
  .home-image, .home-copy { width: 100%; }
  .home-image { max-width: 20rem; margin: auto; }
  .home-copy { padding: 0 1rem; }
  .committee > div { width: calc(50% - 1.25rem); }
}

@media (max-width: 450px) {
  .site-main, .wp-site-blocks > main { max-width: calc(100% - 1rem); }
  .intro, .zebra-panel { padding: 1rem; }
  .home-copy { padding: 0; }
  .committee > div { width: 100%; }
}