/* Shade Tree theme: what WordPress adds around the site's own stylesheet (site.css).
   WordPress's own block and global styles are loaded into the lowest cascade layer (see functions.php),
   so the site's Tailwind layers always win over them, exactly as on the original site.
   These rules sit in their own layer, above Tailwind's base and below its utilities. */
@layer stwp {


/* WordPress wrappers stay out of the way */
.wp-site-blocks { padding: 0; }
.st-part-header, .st-part-footer { display: contents; }

/* Photos: the Image block puts the original image classes on its <figure>; the picture fills it the same way */
figure.wp-block-image.st-img > img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: inherit; object-position: inherit; border-radius: inherit;
}
figure.wp-block-image.st-img.h-auto > img { height: auto; }
figure.wp-block-image.st-img.st-wauto { width: auto; }
figure.wp-block-image.st-img.st-wauto > img { width: auto; }
figure.wp-block-image.st-img.object-cover { object-fit: cover; }
figure.wp-block-image.st-img.object-contain { object-fit: contain; }
.st-op-center{object-position:center}.st-op-center-30{object-position:center 30%}.st-op-30-center{object-position:30% center}.st-op-center-center{object-position:center center}.st-op-70-center{object-position:70% center}.st-op-center-35{object-position:center 35%}

/* Question-and-answer accordions (Details blocks), drawn like the original buttons */
details.st-faq > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; text-align: left; width: 100%; }
details.st-faq > summary::-webkit-details-marker { display: none; }
details.st-faq > summary::after {
  content: ""; flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-left: 1rem; transition: transform .3s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
details.st-faq[open] > summary::after { transform: rotate(180deg); }
/* line style (service pages) */
details.st-faq-line > summary { padding: 1.25rem 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; color: hsl(var(--foreground)); }
details.st-faq-line > summary::after { background-color: hsl(var(--primary)); }
/* card style (landing page) */
details.st-faq-card > summary { padding: 1.5rem; font-family: Cormorant Garamond, serif; font-size: 1.125rem; line-height: 1.75rem; font-weight: 700; color: hsl(var(--foreground)); transition: background-color .15s; }
details.st-faq-card > summary:hover { background-color: hsl(var(--secondary) / .2); }
details.st-faq-card > summary::after { background-color: hsl(var(--muted-foreground)); }

/* the mobile menu opens over the page */
[data-st-mobile-menu][hidden] { display: none !important; }
html.st-menu-open { overflow: hidden; }

}

/* Paragraph blocks made from a plain line of text (a div or span on the original site) keep that element's
   margins inside reading columns, where the site gives every <p> 1em above and below. That reading-column
   rule is unlayered, so this one is too, and it hands the margins back to the site's own layered styles
   (its margin classes, or none). */
:where(.prose) p.st-bare { margin-top: revert-layer; margin-bottom: revert-layer; }