/* HandymanPro Base components. Colors/spacing ONLY via --wp--preset-- vars. */
.wp-site-blocks > header.wp-block-template-part, header.wp-block-template-part:has(> .hp-header) { position: sticky; top: 0; z-index: 50; }
.hp-header { backdrop-filter: saturate(1.2) blur(6px); }
.hp-header > .wp-block-group { position: relative; }   /* anchor for the mobile dropdown */
.hp-header .wp-block-site-logo img { max-height: 64px; width: auto; }   /* square icons (WH) must not blow the header up */
.hp-menu__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--wp--preset--spacing--30); align-items: center; }
.hp-menu__list a { text-decoration: none; font-weight: 600; color: var(--wp--preset--color--ink); }
.hp-menu__list a:hover { color: var(--wp--preset--color--accent-strong); }
.hp-footer .hp-menu__list { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--10); }
.hp-footer a { color: var(--wp--preset--color--base); text-decoration: none; }
.hp-footer a:hover { color: var(--wp--preset--color--accent); }
.hp-footer__legal { list-style: none; padding-left: 0; }

.is-style-section-dark { background: var(--wp--preset--gradient--ink-fade); color: var(--wp--preset--color--base); }
.is-style-section-dark :is(h1,h2,h3,h4,p,li) { color: var(--wp--preset--color--base); }
.is-style-section-dark .hp-muted { color: var(--wp--preset--color--muted); }
.is-style-section-surface { background: var(--wp--preset--color--surface); }
.is-style-card { background: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 14px; padding: var(--wp--preset--spacing--30); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.is-style-section-dark .is-style-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }

.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--brand); border: 2px solid currentColor; }
.wp-block-button.is-style-outline .wp-block-button__link:hover { color: var(--wp--preset--color--accent-strong); background: transparent; }
.wp-block-button.is-style-ghost-light .wp-block-button__link { background: transparent; color: var(--wp--preset--color--base); border: 2px solid rgba(255,255,255,.4); }
.wp-block-button.is-style-ghost-light .wp-block-button__link:hover { border-color: var(--wp--preset--color--base); background: transparent; }

ul.is-style-checkmark { list-style: none; padding-left: 0; }
ul.is-style-checkmark li { position: relative; padding-left: 1.75em; margin-bottom: .4em; }
ul.is-style-checkmark li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--wp--preset--color--success); }

.hp-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--accent-strong); }
.hp-stat__num { font-size: var(--wp--preset--font-size--xxl); font-weight: 800; line-height: 1; color: var(--wp--preset--color--brand); }
.is-style-section-dark .hp-stat__num { color: var(--wp--preset--color--accent); }
.hp-step__num { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); font-weight: 800; }
.hp-step small { display: block; color: var(--wp--preset--color--muted); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: var(--wp--preset--font-size--xs); }

.hp-compare table { width: 100%; border-collapse: collapse; }
.hp-compare th, .hp-compare td { padding: .8rem 1rem; border-bottom: 1px solid var(--wp--preset--color--border); text-align: left; vertical-align: top; }
.hp-compare thead th { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--base); }
.hp-compare td:nth-child(2) { font-weight: 700; color: var(--wp--preset--color--success); }
.hp-compare td:nth-child(3) { color: var(--wp--preset--color--muted); }

.hp-faq details { border-bottom: 1px solid var(--wp--preset--color--border); padding: var(--wp--preset--spacing--20) 0; }
.hp-faq summary { cursor: pointer; font-weight: 700; font-size: var(--wp--preset--font-size--l); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.hp-faq summary::-webkit-details-marker { display: none; }
.hp-faq summary::after { content: "+"; font-weight: 800; color: var(--wp--preset--color--accent-strong); }
.hp-faq details[open] summary::after { content: "\2212"; }

.hp-form { display: grid; gap: var(--wp--preset--spacing--20); min-width: 0; }
.hp-form *, .hp-form *::before, .hp-form *::after { box-sizing: border-box; }
.hp-form label, .hp-form__row > * { min-width: 0; display: block; }
.hp-form__row { display: grid; gap: var(--wp--preset--spacing--20); grid-template-columns: 1fr; }
@media (min-width: 640px) { .hp-form__row { grid-template-columns: 1fr 1fr; } }
.hp-form input[type="text"], .hp-form input[type="email"], .hp-form input[type="tel"] { width: 100%; padding: .9rem 1rem; border: 1px solid var(--wp--preset--color--border); border-radius: 10px; font: inherit; background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); }
.hp-form__consent { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--wp--preset--font-size--xs); color: var(--wp--preset--color--muted); }
.hp-form button { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink); border: 0; border-radius: 10px; padding: .95rem 1.5rem; font: inherit; font-weight: 800; cursor: pointer; }
.hp-form button:hover { background: var(--wp--preset--color--accent-strong); }
.hp-form__success { padding: var(--wp--preset--spacing--20); border-radius: 10px; background: var(--wp--preset--color--surface); color: var(--wp--preset--color--success); font-weight: 700; }
.is-style-section-dark .hp-form__consent { color: var(--wp--preset--color--muted); }

.hp-price { font-size: var(--wp--preset--font-size--display); font-weight: 800; line-height: 1; color: var(--wp--preset--color--brand); }
.hp-price small { font-size: var(--wp--preset--font-size--m); font-weight: 600; color: var(--wp--preset--color--muted); }
.hp-timeline { display: grid; gap: var(--wp--preset--spacing--30); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 900px) { .hp-timeline { grid-template-columns: repeat(4, 1fr); } }

.hp-header__cta .hp-cta-short { display: none; }   /* phones swap in the short label (see max-width rule) */
/* Primary menu toggle: a no-JS <details>. Desktop: always open, summary hidden. Mobile: summary = hamburger, list drops below the header. */
.hp-menu-toggle > summary { display: none; list-style: none; cursor: pointer; align-items: center; gap: .5rem; font-weight: 700; color: var(--wp--preset--color--ink); }
.hp-menu-toggle > summary::-webkit-details-marker { display: none; }
.hp-menu-toggle__bars { display: inline-block; width: 22px; height: 2px; background: currentColor; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor; }
@media (max-width: 781px) {
  .hp-header__nav { gap: var(--wp--preset--spacing--20); }
  .hp-header .wp-block-site-logo img { max-width: 120px; height: auto; }
  .hp-header__cta .wp-block-button__link { white-space: nowrap; font-size: var(--wp--preset--font-size--s); padding: .65rem 1rem; }
  .hp-header__cta .hp-cta-long { display: none; }
  .hp-header__cta .hp-cta-short { display: inline; }
  .hp-header .wp-block-site-logo img { max-height: 44px; }
  .hp-menu-toggle > summary { display: inline-flex; }
  .hp-menu-toggle[open] > summary .hp-menu-toggle__bars { box-shadow: none; transform: rotate(45deg); }
  .hp-menu-toggle > .hp-menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--wp--preset--color--base); border-bottom: 1px solid var(--wp--preset--color--border); padding: var(--wp--preset--spacing--20); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
  .hp-menu-toggle > .hp-menu .hp-menu__list { flex-direction: column; align-items: stretch; gap: 0; }
  .hp-menu-toggle > .hp-menu .hp-menu__list li { padding: .6rem 0; border-bottom: 1px solid var(--wp--preset--color--border); }
  .hp-menu-toggle > .hp-menu .hp-menu__list li:last-child { border-bottom: 0; }
  .hp-menu-toggle > .hp-menu .hp-menu__list a { display: block; font-size: var(--wp--preset--font-size--m); }
}
@media (min-width: 782px) {
  .hp-menu-toggle:not([open]) > .hp-menu { display: block; }   /* desktop ignores the toggle state */
}