/* South Jersey Home Repairs: header menu + extra page styles.
   Loads AFTER css/style.css. Your main look still comes from style.css. */

/* ----- Larger header with menu ----- */
.site-header .header-inner { min-height: 88px; gap: 1.25rem; flex-wrap: wrap; }
.sjn { margin-left: auto; }
.sjn-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem; }
.sjn-list > li > a, .sjn-dd-toggle {
  color: inherit; text-decoration: none; font: 600 1rem/1 "Inter", system-ui, sans-serif;
  padding: .75rem .9rem; border-radius: 6px; background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
}
.sjn-list > li > a:hover, .sjn-dd-toggle:hover { background: rgba(127,127,127,.14); }
.sjn-list a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.sjn-dd { position: relative; }
.sjn-dd-toggle::after { content: ""; width: .4em; height: .4em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.sjn-dd-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.sjn-dd-menu {
  display: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: 620px; max-width: calc(100vw - 40px); list-style: none; margin: 0; padding: .6rem; z-index: 100;
  background: #fff; border: 1px solid #e2e6ea; border-radius: 10px; box-shadow: 0 16px 36px rgba(0,0,0,.18);
  /* Three columns keeps the menu short as trades are added. If it ever
     outgrows the screen, it scrolls instead of running off the bottom. */
  grid-template-columns: repeat(3, 1fr); gap: 2px;
  max-height: calc(100vh - 120px); overflow-y: auto;
}
.sjn-dd-toggle[aria-expanded="true"] + .sjn-dd-menu { display: grid; }
.sjn-dd-menu a { display: block; padding: .5rem .7rem; border-radius: 6px; color: #1f2937; text-decoration: none; font-weight: 500; font-size: .92rem; }
.sjn-dd-menu a:hover, .sjn-dd-menu a[aria-current="page"] { background: #f1f4f7; }
.sjn-list > li > a.sjn-cta { border: 2px solid currentColor; margin-left: .4rem; padding: .65rem 1rem; }
.sjn-toggle { display: none; }

@media (max-width: 900px) {
  .sjn-toggle { display: inline-block; margin-left: auto; font: 600 .95rem/1 "Inter", system-ui, sans-serif; color: inherit;
    background: none; border: 2px solid currentColor; border-radius: 6px; padding: .6rem .85rem; cursor: pointer; }
  .sjn { display: none; order: 10; width: 100%; margin: 0; padding-bottom: 1rem; max-height: calc(100vh - 90px); overflow-y: auto; }
  .sjn.is-open { display: block; }
  .sjn-list { flex-direction: column; align-items: stretch; }
  .sjn-list > li > a, .sjn-dd-toggle { width: 100%; justify-content: space-between; padding: .9rem .25rem; border-radius: 0; }
  .sjn-list > li > a.sjn-cta { margin: .75rem 0 0; justify-content: center; border-radius: 6px; }
  .sjn-dd-menu { position: static; transform: none; width: 100%; max-width: none; max-height: none; overflow: visible; box-shadow: none; grid-template-columns: 1fr 1fr; }
  .site-header .header-phone { order: 5; }
}
@media (max-width: 480px) { .sjn-dd-menu { grid-template-columns: 1fr; } }

/* ----- Trade page form: skip the service step ----- */
form[data-preselect] .form-step[data-step="1"] { display: none !important; }

/* ----- Extra page bits ----- */
.hero-eyebrow a { color: inherit; }
.sjn-page-hero .hero-copy { max-width: 760px; }
.sjn-prose { max-width: 760px; }
.sjn-prose h2 { margin-top: 2rem; }
.sjn-prose h2:first-child { margin-top: 0; }
.sjn-price { font-size: 2.2rem; margin-bottom: .25rem; }
.sjn-btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; }
.sjn-inline-btn { display: inline-block; width: auto; text-decoration: none; }
.sjn-footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-bottom: 1rem; font-size: .9rem; }
.sjn-footer-links a { color: inherit; }
.sjn-footer-links { justify-content: center; }

/* ----- "What's included" section on trade pages that have one ----- */
.sjn-scope .sjc-lead { margin-bottom: 1.75rem; }
.sjn-scope-list { margin: .5rem 0 0; padding-left: 1.15rem; color: #374151; }
.sjn-scope-list li { margin-bottom: .45rem; }
.sjn-scope-list li:last-child { margin-bottom: 0; }
.sjn-scope .sjn-scope-note { margin: 1.75rem auto 0; }

/* ----- Trade pages: center a short last row of cards -----
   Three cards across. When the last row has only one or two cards
   (for example the "Not listed?" card), they sit in the middle instead
   of hanging off the left. The three "How it works" steps share one row. */
@media (min-width: 861px) {
  .card-grid.sjn-center { display: flex; flex-wrap: wrap; justify-content: center; }
  .card-grid.sjn-center > .card { flex: 0 0 calc((100% - 41px) / 3); }
  .matchmaker .card-grid.sjn-steps { max-width: none; }
}
/* Tablets: steps go two across with the third centered underneath. */
@media (min-width: 701px) and (max-width: 860px) {
  .matchmaker .card-grid.sjn-steps { display: flex; flex-wrap: wrap; justify-content: center; }
  .matchmaker .card-grid.sjn-steps > .card { flex: 0 0 calc((100% - 21px) / 2); }
}
/* ----- Small Terms and Conditions link in the footer ----- */
.site-footer .sjn-legal { font-size: .75rem; margin-top: .25rem; }
.site-footer .sjn-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ----- "By submitting, you agree to our Terms" under form buttons ----- */
.form-terms { font-size: .75rem; color: var(--muted, #5b6472); text-align: center; margin: 10px 0 0; }
.form-terms a { color: inherit; text-decoration: underline; }
mark { background: #fff3c4; color: #1f2937; padding: 0 .2em; }