/* JSJ — the few things theme.json cannot say. Everything else is tokens. */
.jsj-photo img { border-radius: 16px; width: 100%; height: auto; }
.jsj-illustration img { max-height: 540px; width: auto; margin-inline: auto; display: block; }

/* Buttons are pills (Figma radius is effectively infinite); small variant for the header */
.wp-block-button__link { transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.jsj-button--small .wp-block-button__link { padding: 8px 20px; font-weight: 500; }
.wp-block-button__link:focus-visible, .jsj-newsletter button:focus-visible, .jsj-carousel__arrow:focus-visible { outline: 3px solid var(--wp--preset--color--secondary-light); outline-offset: 3px; }

/* Feature list: cream cards stacked flush, 1px gap, no radius (matches the comps) */
.jsj-feature-stack .jsj-feature-card + .jsj-feature-card { margin-top: 2px; }
.jsj-feature-card { border-left: 4px solid var(--wp--preset--color--accent); }

/* Card grid: the paper-clips from the comp (one per card, each its own vector) */
.jsj-highlight-card { position: relative; height: 100%; box-shadow: 0 1px 15px rgba(0, 0, 0, .10); }
.jsj-highlight-card::before { content: ""; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); height: 84px; background: no-repeat center / contain; }
.jsj-card-grid .wp-block-column:nth-child(1) .jsj-highlight-card::before { width: 25px; background-image: url(../images/paperclip-1.svg); }
.jsj-card-grid .wp-block-column:nth-child(2) .jsj-highlight-card::before { width: 36px; background-image: url(../images/paperclip-2.svg); }
.jsj-card-grid .wp-block-column:nth-child(3) .jsj-highlight-card::before { width: 40px; background-image: url(../images/paperclip-3.svg); }

/* Testimonial carousel — every slide sits in the same grid cell, so the band is always as tall as the longest
   testimonial and neither its height nor the arrow positions shift as you click through. visibility rather than
   display also keeps the inactive slides out of the tab order and the accessibility tree. */
.jsj-carousel { position: relative; }
.jsj-carousel__slides { display: grid; }
.jsj-carousel__slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .2s ease; }
.jsj-carousel__slide.is-active { visibility: visible; opacity: 1; }
/* The glyph is an inline SVG, not a "←" character: text arrows sit off-centre in their em box, which no amount
   of line-height reliably fixes. Flex centring then puts it dead centre in the circle. */
.jsj-carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; padding: 0; background: var(--wp--preset--color--neutral); color: var(--wp--preset--color--primary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.jsj-carousel__arrow svg { display: block; }
.jsj-carousel__arrow--prev { left: var(--wp--preset--spacing--30); } .jsj-carousel__arrow--next { right: var(--wp--preset--spacing--30); }
.jsj-carousel[data-count="1"] .jsj-carousel__arrow { display: none; }
.jsj-headshot img { border-radius: 50%; }

/* Newsletter form (rendered by the shortcode) */
.jsj-newsletter-form { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: var(--wp--preset--spacing--30); }
.jsj-newsletter-form input[type=email] { flex: 1 1 280px; max-width: 357px; height: 48px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--wp--preset--color--neutral); color: var(--wp--preset--color--primary); font: inherit; }
.jsj-newsletter-form button { height: 48px; padding: 0 32px; border: 0; border-radius: 999px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary); font-weight: 700; letter-spacing: -0.01em; cursor: pointer; }
.jsj-newsletter-form .jsj-hp { position: absolute; left: -9999px; }
.jsj-newsletter-msg { text-align: center; margin-top: 12px; min-height: 1.5em; }
.jsj-newsletter-msg.is-error { color: #F8D7D3; }

/* Header nav */
.jsj-header .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 6px; }

/* Resources rows */
.jsj-post-row + .jsj-post-row { border-top: 1px solid var(--wp--preset--color--neutral); padding-top: var(--wp--preset--spacing--40); }

/* Forms (WPForms) inherit the pill/cream language */
.wpforms-container input[type=text], .wpforms-container input[type=email], .wpforms-container textarea { border: 2px solid var(--wp--preset--color--primary) !important; border-radius: 24px !important; background: var(--wp--preset--color--neutral) !important; padding: 12px 20px !important; font: inherit !important; }
.wpforms-container textarea { border-radius: 16px !important; }
.wpforms-container button[type=submit] { border-radius: 999px !important; background: var(--wp--preset--color--accent) !important; color: var(--wp--preset--color--primary) !important; font-weight: 700 !important; padding: 14px 32px !important; border: 0 !important; }
.wpforms-container label.wpforms-field-label { font-weight: 600; font-size: .875rem; }
.wpforms-container .wpforms-error, .wpforms-container label.wpforms-error { color: var(--wp--preset--color--error) !important; font-size: .8125rem; }

@media (max-width: 781px) {
	.jsj-carousel__arrow { top: auto; bottom: var(--wp--preset--spacing--20); transform: none; }
	.jsj-highlight-card { margin-top: 24px; }
}

/* Logo + footer links */
.jsj-logo { display: inline-block; line-height: 0; } .jsj-logo img { width: 124px; height: 40px; }
.jsj-footer__links a { color: inherit; text-decoration: none; font-weight: 400; } .jsj-footer__links a:hover { text-decoration: underline; }

/* Intuit ProAdvisor badge — right end of the footer, about the height of the logo-and-copyright stack */
.jsj-badge { width: 130px; height: auto; display: block; }
@media (max-width: 781px) { .jsj-badge { width: 104px; margin-top: var(--wp--preset--spacing--30); } }

/* A hairline separates the footer from the newsletter band above it */
.jsj-footer { border-top: 1px solid rgb(245 241 230 / 28%); }

/* Logo bar: logos vary in shape; size by height like the comp */
.jsj-logo-bar img { height: 56px; width: auto !important; max-width: 140px; object-fit: contain; }

/* Full-bleed bands butt against one another — each band owns its spacing through padding. The second rule is
   the same problem one level up: header, main and footer are siblings under .wp-site-blocks, so the root block
   gap would otherwise leave a strip of page background under the header and above the footer. */
.wp-block-post-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }
.wp-site-blocks > header, .wp-site-blocks > main, .wp-site-blocks > footer { margin-block-start: 0; margin-block-end: 0; }

/* …but a page that opens or closes with ordinary content rather than a band still needs breathing room, or the
   heading sits flush against the header (About). Full-bleed first/last children are excluded above. */
.wp-block-post-content > :first-child:not(.alignfull) { margin-block-start: var(--wp--preset--spacing--50); }
.wp-block-post-content > :last-child:not(.alignfull) { margin-block-end: var(--wp--preset--spacing--50); }

/* An empty trailing paragraph is what the editor leaves behind after a stray Enter. It is invisible but still
   carries the block gap, which paints a strip of page background between the last band and the footer. */
.wp-block-post-content > p:empty { margin-block: 0; }

/* Testimonial headshot sits centred under the quote */
.jsj-carousel .jsj-headshot { display: flex; justify-content: center; margin-inline: auto; }
.jsj-carousel .jsj-headshot img { margin-inline: auto; }