/* SolarListing integration layer for the SolarQuery v2.2 package. Loaded AFTER the client's three
   stylesheets (which stay unmodified). Only sqx-* classes — our additions the static package doesn't have:
   the account area, FREE badge, footer contact/social, enquiry integration controls and the thank-you page. */

/* Header account links: nav items placed before "For businesses" (same order in the mobile menu). The
   Logout form sits in the nav like a link; its button looks like the neighbouring nav links. */
.sqx-nav-logout{display:flex;align-items:center;margin:0}
.sqx-nav-logout>button{display:flex;align-items:center;min-height:44px;padding:0;border:0;background:none;font:inherit;font-weight:inherit;color:inherit;cursor:pointer;white-space:nowrap}
@media(max-width:84em){
  .sqx-nav-logout{display:block;border-bottom:1px solid #e8eee9}
  .sqx-nav-logout>button{width:100%;padding:15px 0;text-align:left}
}

/* FREE badge (Partner With Us). Dark text on brand teal: 6.26:1 (same pair as the client's primary button). */
.sqx-free-badge{display:inline-block;margin-left:.375rem;padding:.0625rem .5rem;border-radius:999px;background:var(--sq-brand);color:var(--sq-ink);font-size:.8125rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle;line-height:1.5}

/* Footer contact + social links. Font Awesome brand glyphs are loaded for both v2 layouts and v2 chrome. */
.sqx-footer-contact{display:flex;flex-direction:column;gap:.25rem;margin-top:1rem}
.sqx-social{display:flex;flex-wrap:wrap;gap:.5rem 1rem;list-style:none;margin:1rem 0 0;padding:0}
.sqx-social a{display:inline-flex;align-items:center;min-height:2.75rem}

/* Enquiry: fixed +91 prefix and the state/district fallback when a PIN can't be resolved. */
.sqx-phone{display:flex;align-items:stretch}
.sqx-phone>span{display:inline-flex;align-items:center;padding:0 .875rem;border:1px solid var(--sq-control-border,#718078);border-right:0;border-radius:8px 0 0 8px;background:var(--sq-surface);font-weight:700;color:var(--sq-ink)}
.sqx-phone>input{flex:1;min-width:0;border-radius:0 8px 8px 0!important}
.sqx-location-fallback{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem;margin-top:1rem}
.sqx-location-fallback label{display:block;font-weight:600;margin-bottom:.375rem}
.sqx-location-fallback select{width:100%}
.sqx-email-fallback{margin-top:1rem;padding:1rem 1.125rem;border:1px solid var(--sq-border);border-radius:12px;background:var(--sq-surface)}
.sqx-email-fallback p{margin:0 0 .75rem}
.sqx-partner-block{max-width:44rem;margin:3rem auto;padding:2rem;border:1px solid var(--sq-border);border-radius:var(--sq-radius);background:var(--sq-surface)}

/* Thank-you page (restyled for v2; same content and progressive-profile hand-off as v1). */
.sqx-ty{max-width:46rem;margin:0 auto;padding:3.5rem 0 4.5rem}
.sqx-ty-card{border:1px solid var(--sq-border);border-radius:var(--sq-radius);padding:2.25rem 2rem;background:#fff;box-shadow:var(--sq-shadow)}
.sqx-ty-tick{display:flex;align-items:center;justify-content:center;width:3.75rem;height:3.75rem;border-radius:50%;background:var(--sq-soft-teal);color:var(--sq-action-dark);margin-bottom:1.25rem}
.sqx-ty-tick .sq-icon{width:1.75rem;height:1.75rem}
.sqx-ty h1{font-size:clamp(1.875rem,3vw,2.5rem);margin:0 0 .5rem}
.sqx-ty-ref{display:inline-block;margin:1rem 0 1.5rem;padding:.25rem 1rem;border-radius:999px;background:var(--sq-soft-teal);font-weight:700;color:var(--sq-ink)}
.sqx-ty-summary{margin:0 0 1.5rem;padding:1rem 1.25rem;border:1px solid var(--sq-border);border-radius:12px;background:var(--sq-surface)}
.sqx-ty-summary div{display:flex;justify-content:space-between;gap:1rem;padding:.375rem 0;border-bottom:1px solid var(--sq-border)}
.sqx-ty-summary div:last-child{border-bottom:0}
.sqx-ty-summary dt{color:var(--sq-muted);flex:0 0 auto;white-space:nowrap}
.sqx-ty-summary dd{margin:0;font-weight:700;text-align:right}
.sqx-ty-next{margin:0 0 1.5rem;padding:1rem 1.25rem;border-left:4px solid var(--sq-brand);background:var(--sq-surface);border-radius:0 12px 12px 0}
.sqx-ty-next strong{display:block;margin-bottom:.375rem}
.sqx-ty-track{margin:0 0 1.5rem;padding:1rem 1.25rem;border:1px solid var(--sq-border);border-radius:12px;background:var(--sq-surface)}
.sqx-v2 main .sqx-ty-track a{font-weight:700;text-decoration:underline}
.sqx-ty-added{margin:0 0 1.25rem;padding:.75rem 1rem;border:1px solid var(--sq-brand);border-radius:12px;background:var(--sq-surface);font-weight:700}
.sqx-ty-pp{padding:1.5rem;border:2px solid var(--sq-brand);border-radius:var(--sq-radius)}
.sqx-ty-pp ul{margin:.75rem 0 1.25rem;padding-left:1.25rem}
.sqx-ty-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.sqx-ty-actions .sq-button{flex:1 1 12rem;justify-content:center}
.sqx-ty-actions .sqx-ty-skip{display:inline-flex;flex:1 1 12rem;align-items:center;justify-content:center;min-height:2.75rem;border:1px solid var(--sq-control-border,#718078);border-radius:8px;font-weight:700;color:var(--sq-ink);text-decoration:none;padding:.5rem 1rem;text-align:center}

/* Legal / CMS pages inside the v2 layout. */
.sqx-legal{max-width:52rem;margin:0 auto;padding:3rem 0 4.5rem}
.sqx-legal h1{margin:0 0 1.5rem}
.sqx-legal-body{line-height:1.75}
.sqx-legal-body h2{font-size:1.5rem;margin:2rem 0 .75rem}
.sqx-legal-body h3{font-size:1.25rem;margin:1.5rem 0 .5rem}
.sqx-legal-body a{text-decoration:underline;color:var(--sq-action-dark)}
.sqx-legal-body ul,.sqx-legal-body ol{padding-left:1.5rem}
.sqx-legal-body table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}
.sqx-legal-body td,.sqx-legal-body th{border:1px solid var(--sq-border);padding:.5rem}

/* Partner-interest fields the static form doesn't have. */
.sqx-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Error pages (404 / 410 / 500 ...) in the v2 layout. */
.sqx-error{max-width:44rem;margin:0 auto;padding:4.5rem 0 5.5rem}
.sqx-error h1{font-size:clamp(2rem,4vw,3rem);margin:.5rem 0 1rem}
.sqx-error p{font-size:1.125rem;color:var(--sq-muted);margin:0 0 2rem}
.sqx-error-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem}
.sqx-error-link{display:inline-flex;align-items:center;min-height:2.75rem;font-weight:700;color:var(--sq-action-dark);text-decoration:underline;text-underline-offset:.2em}

/* Admin preview of the enquiry page: nothing is sent (codes and submit are simulated in the browser). */
.sqx-admin-preview{margin:0 0 1.5rem;padding:1rem 1.25rem;border:2px solid #b45309;border-radius:12px;background:#fffbeb;color:var(--sq-ink)}
.sqx-admin-preview strong{display:block;font-size:1.0625rem;margin-bottom:.25rem}
.sqx-admin-preview p{margin:0;font-size:1rem}

/* ===== v2 design tweaks (shared): navigation without underlines, in-content links, focus styles =====
   Tokens. Brand teal #04BFA5 is only 2.33:1 on white, so text and focus rings use the client's own darker
   brand teals (both from the package palette family):
   --sqx-nav-active  #067364  5.76:1 on white: hover / active / current-page colour of navigation links.
   --sqx-link        #068164  4.85:1 on white, 4.53:1 on the light surface, 3.01:1 against body text (#242a29):
                     links inside body text may drop the underline (WCAG 1.4.1, technique G183) and get it back
                     on hover/focus. Against the muted grey text (#596561) NO colour can reach 3:1 while staying
                     readable, so links inside muted text keep their underline (see "exceptions" below).
   --sqx-focus       #067364  2px keyboard focus ring (5.76:1 on white); --sqx-focus-on-dark #04BFA5 on the
                     dark green sections (5.0:1 on #213b31). Pointer focus on fields: teal border + soft shadow. */
:root{--sqx-nav-active:#067364;--sqx-link:#068164;--sqx-focus:#067364;--sqx-focus-on-dark:#04bfa5;--sqx-focus-soft:rgba(4,191,165,.22)}
.sq-why-section,.sq-home-hero-visual,.sq-equipment,.sq-panel-art{--sqx-focus:var(--sqx-focus-on-dark)}

/* 1. Navigation (header, mega menu, business menu, footer, breadcrumb): never underlined; brand teal on
      hover/active and for the current page (aria-current="page", App\Support\V2Nav). */
:is(.sq-header,.sq-footer,.sq-breadcrumb) a:not(.sqx-keep-underline){text-decoration:none}
:is(.sq-header,.sq-footer,.sq-breadcrumb) a:not(.sq-button):is(:hover,:active,[aria-current=page]),
.sq-header :is(.sq-nav-trigger,.sqx-nav-logout>button,.sq-partner-signin):is(:hover,:active),
.sq-breadcrumb [aria-current=page]{color:var(--sqx-nav-active)}
:is(.sq-navigation,.sq-footer) a[aria-current=page]{font-weight:600}
.sq-account-dropdown{position:relative;flex:none}
.sq-account-trigger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--sq-border);border-radius:50%;background:#fff;color:var(--sq-ink)}
.sq-account-trigger:hover,.sq-account-trigger[aria-expanded=true]{border-color:#b6d7c6;background:#eef7f2;color:var(--sq-action-dark)}
.sq-account-trigger .sq-icon{width:23px;height:23px}
.sq-account-panel{position:absolute;top:calc(100% + 12px);right:0;z-index:2;width:190px;padding:8px;background:#fff;border:1px solid #dce7df;border-radius:10px;box-shadow:0 16px 32px #122d2320}
.sq-account-panel>a,.sq-account-panel form button{display:flex;align-items:center;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:6px;background:none;color:var(--sq-ink);font:inherit;text-align:left}
.sq-account-panel>a:hover,.sq-account-panel form button:hover{background:var(--sq-v2-soft);color:var(--sq-action-dark)}
.sq-account-panel form{margin:0}
@media(max-width:84em){.sq-account-trigger{width:40px;height:40px}}
@media(max-width:47.9375em){.sq-account-trigger{width:37px;height:37px}}
.sq-mega-column>a[aria-current=page]>.sq-icon{opacity:1}

/* 2. Links inside body text: link colour, no underline at rest, underline on hover and keyboard focus. */
.sqx-v2 main :is(p,li,dd,label,.sq-check,.sq-field-help,.sqx-legal-body,.sq-aside-note) a:not(.sq-button):not(.sqx-ty-skip):not(.sqx-error-link){color:var(--sqx-link);text-decoration:none;text-underline-offset:.2em;text-decoration-thickness:.08em}
.sqx-v2 main :is(p,li,dd,label,.sq-check,.sq-field-help,.sqx-legal-body,.sq-aside-note) a:not(.sq-button):not(.sqx-ty-skip):not(.sqx-error-link):is(:hover,:focus-visible){text-decoration:underline}
/*    Consent sentences (checkbox labels with the Privacy Policy link) use the body text colour instead of the
      package's muted grey, so their link can drop the underline and still differ by 3.01:1 from the text. */
.sqx-v2 .sq-check>span{color:var(--sq-ink)}
/*    Exceptions: inside muted (grey) helper text the 3:1 difference is impossible, so the underline stays. */
.sqx-v2 main :is(.sq-field-help,.sq-aside-note,small) a:not(.sq-button):not(.sqx-ty-skip):not(.sqx-error-link){text-decoration:underline}
.sqx-error-link{text-decoration:none}
.sqx-error-link:is(:hover,:focus-visible){text-decoration:underline}

/* 3. Focus. Mouse/touch clicks never draw a ring (:focus-visible); keyboard focus draws a thin 2px brand ring
      (replaces the package's 3px dark outline + white halo). Fields are special: browsers treat a mouse click
      into a text field as :focus-visible, so focus-source.js marks how focus arrived (data-sqx-modality on
      <html>, set on focus only). Pointer → teal border + soft teal shadow; keyboard (or no JS) → the ring. */
:focus:not(:focus-visible){outline:none}
[tabindex="-1"]:focus:not(:focus-visible){outline:none;box-shadow:none}
:is(a,button,summary,input,select,textarea,label,[tabindex]):focus-visible,
:is(.sq-segmented button,.sq-solution-tabs>button,.sq-partner-options button):focus-visible{outline:2px solid var(--sqx-focus);outline-offset:2px;box-shadow:none}
:is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):focus{border-color:var(--sqx-focus)}
[data-sqx-modality=pointer] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea):focus{outline:none;box-shadow:0 0 0 3px var(--sqx-focus-soft)}
.sq-postcode-bar:focus-within,.sq-large-input:focus-within{outline:2px solid var(--sqx-focus);outline-offset:2px}
/* the wrapper shows the focus; the field inside it doesn't add a second ring or shadow (beats the pointer rule) */
:is(.sq-postcode-bar,.sq-large-input):focus-within :is(input,select):is(:focus,:focus-visible):not(#sqx-none){outline:none;box-shadow:none}
[data-sqx-modality=pointer] :is(.sq-postcode-bar,.sq-large-input):focus-within{outline:none;border-color:var(--sqx-focus);box-shadow:0 0 0 3px var(--sqx-focus-soft)}
@media(forced-colors:active){
  :is(a,button,summary,input,select,textarea,label,[tabindex]):focus-visible,
  :is(.sq-postcode-bar,.sq-large-input):focus-within{outline:2px solid Highlight}
  [data-sqx-modality=pointer] :is(input,select,textarea):focus{outline:2px solid Highlight}
}

/* Live PIN lookup: hero status line + step 2 location summary (hero PIN UX fix). */
.sqx-pin-status{display:flex;align-items:center;gap:.375rem;margin:.375rem 0 0;font-weight:600;color:var(--sq-ink);min-height:1.5rem}
.sqx-pin-status:empty{margin:0;min-height:0}
.sqx-pin-status[data-kind=ok]{color:var(--sq-action-dark)}
.sqx-pin-status[data-kind=pending]{color:var(--sq-muted);font-weight:400}
.sqx-pin-status[data-kind=error]{color:#843126}
.sqx-pin-status .sq-icon,#sq-location-status .sq-icon,.sqx-location-summary .sq-icon{width:1.125rem;height:1.125rem;flex:0 0 auto;vertical-align:-.2em}
.sqx-location-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin:0 0 1.25rem;padding:.75rem 1rem;border:1px solid var(--sq-border);border-radius:12px;background:var(--sq-surface)}
.sqx-location-summary[hidden]{display:none}
.sqx-location-summary strong{overflow-wrap:anywhere}
.sqx-v2 main .sqx-location-summary a.sqx-location-change{font-weight:700;color:var(--sqx-link,#068164);text-decoration:underline;text-underline-offset:.2em;min-height:2.75rem;display:inline-flex;align-items:center}

/* v2 footer refresh — isolated to the v2 chrome partial. */
.sqx-services-locations{border-top:1px solid #d9e6df;padding:2rem 0 1.75rem;background:#fff}
.sqx-services-locations-heading{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:.9rem}
.sqx-services-locations-heading h2{font-size:1.125rem;line-height:1.5;margin:0;color:#1d332b}
.sqx-services-locations-heading p{font-size:1rem;line-height:1.5;margin:0;color:#52645b;text-align:right}
.sqx-services-locations-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55rem 1.5rem;list-style:none;padding:0;margin:0}
.sqx-services-locations-list li{min-width:0;margin:0;font-size:1rem;line-height:1.6}
.sqx-services-locations-list a{display:block;color:#355848;text-decoration:none!important;overflow-wrap:anywhere}
.sqx-services-locations-list a:hover{color:#087a67;text-decoration:none!important}
.sq-footer-v2.sqx-footer{--sqx-footer-bg:#173f35;background:var(--sqx-footer-bg);color:#e0f0e8;border:0;padding:2.75rem 0 0}
.sqx-footer-intro{padding-bottom:1.75rem}
.sqx-footer-intro .sq-brand{display:inline-flex;align-items:center;box-sizing:border-box;width:11rem;max-width:100%;margin-bottom:1rem;padding:.4rem .55rem;background:#fff;border-radius:.5rem}
.sqx-footer-intro .sq-brand img{width:100%;height:auto}
.sqx-footer-v2 .sqx-footer-wordmark{color:#173f35!important;font-size:1.5rem;font-weight:800;letter-spacing:.015em;line-height:1}
.sqx-footer-v2 .sqx-footer-wordmark .sqx-footer-wordmark-accent{color:#04bfa5!important}
.sqx-footer-tagline{margin:0;color:#e0f0e8;font-size:1rem;line-height:1.6}
.sqx-footer-contact{display:flex;flex-direction:row;flex-wrap:wrap;gap:.65rem 2rem;margin-top:1rem}
.sqx-footer.sq-footer-v2 a,.sqx-footer.sq-footer-v2 a:visited{color:#c8f2df;text-decoration:none!important}
.sqx-footer-contact a{font-size:1rem;line-height:1.55;overflow-wrap:anywhere}
.sqx-footer-contact a span{color:#fff;font-weight:600}
.sqx-footer.sq-footer-v2 a:hover,.sqx-footer.sq-footer-v2 a:active{color:#73e8cf;text-decoration:none!important}
.sqx-footer.sq-footer-v2 a[aria-current=page]{color:#c8f2df}
.sqx-footer.sq-footer-v2 a[aria-current=page]:is(:hover,:active){color:#73e8cf}
.sqx-footer.sq-footer-v2 a:focus-visible{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 3px #73e8cf}
.sqx-footer-divider{height:1px;background:#4a7165;margin:0 0 1.75rem}
.sqx-footer-columns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
.sqx-footer-column{min-width:0}
.sqx-footer-column h2{color:#fff;font-size:1.125rem;line-height:1.5;font-weight:650;margin:0 0 .7rem}
.sqx-footer-column ul{list-style:none;padding:0;margin:0}
.sqx-footer-column li{margin:0}
.sqx-footer-column a,.sqx-footer-market,.sqx-footer-plain{display:inline-flex;align-items:center;gap:.5rem;min-height:2.5rem;padding:.35rem 0;color:#c8f2df;font-size:1rem;line-height:1.55;overflow-wrap:anywhere}
.sqx-footer-market,.sqx-footer-plain{color:#e0f0e8}
.sqx-footer-column .sqx-social{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.sqx-social li{margin:0}
.sqx-footer-column .sqx-social a{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:1px solid #7fa899;border-radius:50%;font-size:1rem}
.sqx-footer-bottom{margin-top:1.75rem;background:#0e3028;color:#e0f0e8}
.sqx-footer-bottom .sq-container{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.5rem;padding-top:1.1rem;padding-bottom:1.1rem}
.sqx-footer-bottom p{margin:0;color:#e0f0e8;font-size:.9375rem;line-height:1.5}
.sqx-footer-bottom .sqx-footer-design-credit{margin-left:auto;text-align:right}
.sqx-footer-bottom .sqx-footer-design-credit a{color:#e0f0e8}
@media(max-width:64em){
 .sqx-services-locations-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sqx-footer-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem}
}
@media(max-width:47.9375em){
 .sqx-services-locations-heading{align-items:flex-start;flex-direction:column;gap:.2rem}
 .sqx-services-locations-heading p{text-align:left}
 .sqx-services-locations-list{grid-template-columns:1fr;gap:.25rem}
 .sq-footer-v2.sqx-footer{padding:2rem 0 1.25rem}
 .sqx-footer-contact{gap:.4rem 1.25rem}
 .sqx-footer-columns{gap:1rem 1.25rem}
 .sqx-footer-bottom .sq-container{align-items:flex-start}
}
