/* Woods Made Designs — site-wide SEO/AEO components + UX fixes
   ----------------------------------------------------------------
   1) Unified FAQ section (.wmd-seo-section)
      Matches the landing-page FAQ visual: light gray section,
      centered eyebrow + heading, white rounded pill accordion items
      with a chevron that rotates on open. Uses native <details>.

   2) Blog card site-wide UX fix
      Makes the entire .div-block-641 card clickable, animates the
      Read More arrow on card hover, and ensures cards remain visible
      even if the Webflow IX2 fade-in fails to fire.
*/

/* ============================================================
   1) FAQ SECTION
   ============================================================ */
.wmd-seo-section{
  background:#f3f3f3;
  color:#0a0a0a;
  padding:96px 5%;
  font-family:'Open Sans',Arial,sans-serif;
}
.wmd-seo-container{
  max-width:980px;
  margin:0 auto;
  text-align:center;
}
.wmd-seo-eyebrow{
  font-size:14px;
  letter-spacing:.01em;
  color:#6b6b6b;
  margin:0 0 18px;
  text-transform:none;
  font-weight:400;
}
.wmd-seo-heading{
  font-family:'Open Sans',Arial,sans-serif;
  font-weight:500;
  font-size:56px;
  line-height:1.12;
  letter-spacing:-.02em;
  color:#0a0a0a;
  margin:0 0 56px;
}
.wmd-seo-cta{
  font-size:15px;
  line-height:1.6;
  color:#4a4a4a;
  max-width:70ch;
  margin:0 auto 36px;
  text-align:center;
}
.wmd-seo-cta a{
  color:#0a0a0a;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Accordion list */
.wmd-faq-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  text-align:left;
  max-width:880px;
  margin:0 auto;
}
.wmd-faq-item{
  background:#ffffff;
  border:1px solid #e3e3e3;
  border-radius:14px;
  padding:0;
  transition:box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.wmd-faq-item:hover{
  border-color:#cfcfcf;
  box-shadow:0 4px 18px rgba(0,0,0,.04);
}
.wmd-faq-item[open]{
  border-color:#cfcfcf;
  box-shadow:0 4px 22px rgba(0,0,0,.05);
}

.wmd-faq-question{
  cursor:pointer;
  font-family:'Open Sans',Arial,sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:1.4;
  color:#0a0a0a;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:22px 28px;
}
.wmd-faq-question::-webkit-details-marker{display:none}
.wmd-faq-question::after{
  content:"";
  flex-shrink:0;
  width:22px;
  height:22px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  transition:transform .25s ease;
}
.wmd-faq-item[open] .wmd-faq-question::after{
  transform:rotate(90deg);
}

.wmd-faq-answer{
  margin:0;
  padding:0 28px 24px 28px;
  font-size:15px;
  line-height:1.65;
  color:#4a4a4a;
  max-width:80ch;
}

/* Related reading grid (kept simple, light theme) */
.wmd-related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin-top:8px;
  text-align:left;
}
.wmd-related-card{
  display:block;
  padding:24px;
  background:#fff;
  border:1px solid #e3e3e3;
  border-radius:14px;
  color:#0a0a0a;
  text-decoration:none;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.wmd-related-card:hover{
  border-color:#cfcfcf;
  transform:translateY(-2px);
  box-shadow:0 6px 22px rgba(0,0,0,.05);
}
.wmd-related-kicker{
  font-size:12px;
  letter-spacing:.05em;
  color:#6b6b6b;
  margin-bottom:10px;
  text-transform:uppercase;
}
.wmd-related-title{
  font-family:'Open Sans',Arial,sans-serif;
  font-weight:500;
  font-size:18px;
  line-height:1.3;
  margin:0;
  color:#0a0a0a;
}

@media (max-width:768px){
  .wmd-seo-section{padding:64px 5%}
  .wmd-seo-heading{font-size:36px;margin-bottom:36px}
  .wmd-faq-question{font-size:16px;padding:18px 20px;gap:16px}
  .wmd-faq-answer{padding:0 20px 20px 20px;font-size:14px}
}

/* ============================================================
   2) BLOG CARD UX FIX (site-wide)
   ============================================================ */

/* Lift the Market Insights section above the team section's
   div-block-249, which has a scroll-effect transform that
   extends down and visually overlaps the cards, intercepting
   all pointer events. */
.section-53{
  position:relative;
  z-index:20;
}
.section-53 .div-block-641{
  position:relative;
  z-index:21;
}
/* Belt-and-suspenders: stop the team wrapper's overflow from
   eating clicks on anything below it. */
.the-team-wrapper .div-block-249,
#TheTeamID293784 .div-block-249{
  pointer-events:none;
}
.the-team-wrapper .div-block-249 a,
.the-team-wrapper .div-block-249 button,
#TheTeamID293784 .div-block-249 a,
#TheTeamID293784 .div-block-249 button{
  pointer-events:auto;
}


/* Force the cards to be visible even if Webflow IX2 scroll-fade
   never fires. The original markup ships them at opacity:0. */
.div-block-641[style*="opacity:0"],
.div-block-641[style*="opacity: 0"]{
  opacity:1 !important;
}

/* Make the card a positioning context and a hover root. */
.div-block-641{
  position:relative;
  cursor:pointer;
}

/* Stretch the existing Read More <a> to cover the entire card
   without changing the markup. The ::after sits above all
   children so a click anywhere on the card opens the post. */
.div-block-641 .link-block-67{
  position:static;
}
.div-block-641 .link-block-67::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:6;
}

/* Hover animation: only the Read More arrow nudges right.
   No card lift, no underline, no overflow clipping. */
.div-block-641 .div-block-615{
  overflow:visible;
}
.div-block-641 .div-block-615 img{
  transition:transform .3s ease;
}
.div-block-641:hover .div-block-615 img{
  transform:translateX(10px);
}