/* Layout and typography for the generated keyword pages (mailTemps/SEOPages/*.html):
   a readable text column beside a sticky quote card. Every rule is scoped to an
   .sp- class (the theme's .page wrapper is changed only when it holds the quote card),
   so the theme stylesheet (style.css) and every other page are untouched. The sector
   pages (*-sector.aspx, sectors-home.aspx) use the same classes.
   The language pages (lang-int-tran-v2.html) carry their own .lp- styles in the same
   colours. */

.sp-section { padding: 56px 0 72px; text-align: left; }
.sp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }

/* text column */
.sp-main { max-width: 780px; color: #3d4441; }
.sp-main p, .sp-main li { font-size: 17px; line-height: 1.75; }
.sp-main p { margin: 0 0 18px; }
.sp-main h2, .sp-main h3, .sp-main h4, .sp-main h5, .sp-main h6 { color: #2e3431; font-weight: 400; }
.sp-main h2 { font-size: 32px; line-height: 1.25; margin: 0 0 22px; }
.sp-main h2::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 14px; border-radius: 2px; background: #6fc19c; }
.sp-main h3 { font-size: 25px; line-height: 1.3; margin: 44px 0 14px; }
.sp-main h4, .sp-main h5, .sp-main h6 { font-size: 20px; line-height: 1.35; margin: 34px 0 12px; }
.sp-main a { color: #1c7a4a; text-decoration: underline; text-underline-offset: 2px; }
.sp-main a:hover, .sp-main a:focus { color: #0f5732; }
.sp-main h3 a, .sp-main h4 a { text-decoration: none; }
.sp-main h3 a:hover, .sp-main h4 a:hover { text-decoration: underline; }
.sp-main b.phone { color: #2e3431; white-space: nowrap; }

.sp-eyebrow { font-size: 13px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4 !important; color: #1c7a4a; margin: 0 0 10px !important; }
.sp-main .sp-lead { font-size: 19px; line-height: 1.7; color: #2e3431; }
.sp-main > b, .sp-main > strong { display: block; font-size: 18px; color: #2e3431; margin: 28px 0 12px; }
.sp-main .sp-label { margin: 22px 0 6px; }
/* the jobs page's registration warning, written with an inline red colour */
.sp-main p[style*="color:Red"] { padding: 14px 18px; border: 1px solid #f3d3bf; border-radius: 6px; background: #fff5ee; color: #8a3b12 !important; font-size: 15px; line-height: 1.65; }
.sp-main p[style*="color:Red"] a { color: #8a3b12; }

/* lists: a grid of ticked items */
.sp-main ul { list-style: none; padding: 0; margin: 8px 0 26px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px 28px; }
.sp-main ul li { position: relative; padding-left: 32px; margin: 0; }
.sp-main ul li::before,
.sp-facts li::before {
    content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 50%;
    background: #e3f3ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.2 11.4 2.8 8l1.1-1.1 2.3 2.3 5.9-5.9 1.1 1.1z' fill='%231c7a4a'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* closing call to action */
.sp-cta { margin: 44px 0 0; padding: 28px 30px; border: 1px solid #dfe5e2; border-radius: 8px; background: #f4f7f5; }
.sp-cta h3 { margin-top: 0; }
.sp-cta p { margin: 0; }

/* the "Reviewed by" rating blocks */
.sp-main [itemtype="http://data-vocabulary.org/Review"] {
    margin: 28px 0 0; padding: 18px 22px; border: 1px solid #efe2c4; border-left: 4px solid #f2a93b;
    border-radius: 6px; background: #fffaf0; font-size: 15px; line-height: 1.6; color: #4a4f4c;
}
.sp-main [itemtype="http://data-vocabulary.org/Review"]::before { content: "\2605\2605\2605\2605\2605"; display: block; margin-bottom: 4px; font-size: 18px; letter-spacing: 2px; color: #f2a93b; }
.sp-main [itemprop="itemreviewed"] { display: block; font-weight: 700; color: #2e3431; }
.sp-main [itemprop="summary"] { display: block; font-style: italic; }
.sp-main [itemprop="rating"] { font-weight: 700; color: #2e3431; }

/* quote card: it sticks beside the text on desktop. position:sticky does nothing inside a scroll
   container, and the theme gives .page overflow:hidden (so entrance animations never cause a
   sideways scrollbar), which made the card scroll away like the text. overflow:clip clips the
   same way without being a scroll container, and display:flow-root keeps the block formatting
   context that hidden gave. A browser without :has() or overflow:clip keeps overflow:hidden and
   a card that does not stick, as before. */
.page:has(.sp-aside) { overflow: hidden; overflow: clip; display: flow-root; }
.sp-aside { position: sticky; top: 100px; }
/* a stuck card taller than the window could never be read to the end */
@media (max-height: 780px) { .sp-aside { position: static; } }
.sp-card { padding: 26px 26px 22px; border: 1px solid #dfe5e2; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(22, 50, 35, .08); text-align: left; }
.sp-card-img { display: block; width: 100%; height: auto; margin: 0 0 18px; border-radius: 6px; }
.sp-card-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; line-height: 1.3; color: #2e3431; }
.sp-card-text { margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: #4a4f4c; }
.sp-btn { display: block; padding: 13px 18px; border-radius: 6px; background: #1c7a4a; color: #fff !important; font-weight: 700; text-align: center; text-decoration: none !important; transition: background-color .2s ease; }
.sp-btn:hover, .sp-btn:focus { background: #0f5732; }
.sp-card-call { margin: 16px 0 0; font-size: 14px; line-height: 1.5; text-align: center; color: #4a4f4c; }
.sp-phone { display: inline-block; margin-top: 2px; font-size: 24px; font-weight: 700; color: #2e3431 !important; text-decoration: none !important; }
.sp-phone:hover, .sp-phone:focus { color: #1c7a4a !important; }
.sp-card-mail { margin: 8px 0 0; font-size: 14px; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.sp-card-mail a, .sp-card-call a { color: #1c7a4a; }
.sp-facts { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid #e6ebe8; }
.sp-facts li { position: relative; margin: 0 0 8px; padding-left: 30px; font-size: 14px; line-height: 1.9; color: #3d4441; }
.sp-facts li::before { top: 3px; }

@media (max-width: 991px) {
    .sp-section { padding: 40px 0 56px; }
    .sp-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .sp-aside { position: static; max-width: 520px; }
    .sp-main h2 { font-size: 27px; }
    .sp-main h3 { font-size: 22px; }
}
@media (max-width: 480px) {
    .sp-main p, .sp-main li { font-size: 16px; }
    .sp-cta { padding: 22px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .sp-btn { transition: none; }
}

/* a local census figure (App_Code/SeoLanguagePage.cs LocalCensusHtml) */
.sp-main .sp-fact { padding: 14px 18px; border-left: 4px solid #6fc19c; border-radius: 0 6px 6px 0; background: #f4f7f5; font-size: 16px; line-height: 1.65; color: #2e3431; }

/* A section that follows the theme's rd-parallax banner (the sector pages). On desktop the
   parallax plugin makes its fixed inner layer 60px taller than the banner at each end, so the
   photo is painted over the first 60px of whatever comes next; the theme's own sections hide
   that inside 98px+ of top padding. Raising this section above the banner, on its own white
   background, ends the photo at the banner's edge. */
.sp-section.sp-after-parallax { position: relative; z-index: 1; background: #fff; }

/* A town hub's list of every language's interpreter page for the town, A to Z
   (App_Code/SeoLinks.cs BuildTownLanguageList): columns, like the lists on /languages. */
.sp-main .sp-az-all { margin: 0 0 30px; }
.sp-main .sp-az-all summary { display: inline-block; cursor: pointer; margin: 0 0 12px; padding: 6px 14px; border: 1px solid #6fc19c; border-radius: 4px; color: #1c7a4a; font-weight: 700; }
/* .sp-main ul is a grid of ticked items (above): this list is plain text in columns. */
.sp-main .sp-az { display: block; columns: 4 130px; column-gap: 20px; list-style: none; padding: 0; margin: 0; }
.sp-main .sp-az li { break-inside: avoid; padding: 2px 0; font-size: 15px; line-height: 1.5; }
.sp-main .sp-az li::before { content: none; display: none; }