/*
 * Thistle Surveying - component hover and focus states.
 *
 * The export keeps these in per-page throwaway classes (.scp0, .scp8, .scpm
 * and friends). They are lifted here into real classes so every component
 * behaves the same way on every page. Layout still ships inline, per section,
 * the way the export does it.
 */

/* Buttons ------------------------------------------------------------- */

.tsv-btn { transition: background-color .14s ease, color .14s ease, border-color .14s ease, transform .14s ease; }
.tsv-btn:hover { text-decoration: none; }

.tsv-btn--green:hover,
.tsv-btn--hero-green:hover,
.tsv-btn--cta-green:hover { background: #17703D !important; }

.tsv-btn--outline:hover { background: #F0C040 !important; border-color: #F0C040 !important; }
.tsv-btn--hero-outline:hover { background: #F0C040 !important; color: #0D0D0D !important; }
.tsv-btn--cta-yellow:hover { background: #C9960E !important; }

/* Mega-menu ----------------------------------------------------------- */
/* The export never renders the panels, so .scpm:hover is in no stylesheet.
   #C9960E matches every other link hover in the design. */

.tsv-mega__link:hover { color: #C9960E; text-decoration: underline; }
.tsv-mega__viewall:hover { color: #0D0D0D; }

/* Cards --------------------------------------------------------------- */

.tsv-card-link:hover { color: #C9960E; text-decoration: underline; font-weight: 600; }
.tsv-card-cta:hover { background: #C9960E !important; }

.tsv-photo-card,
.tsv-related-card { transition: transform .14s ease, box-shadow .14s ease; }
.tsv-photo-card:hover,
.tsv-related-card:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }

/* Breadcrumbs and accordions ------------------------------------------ */

.tsv-crumb:hover { color: #C9960E; text-decoration: underline; }
.tsv-accordion__toggle:hover .tsv-accordion__sign { color: #C9960E; }

/* Carousel ------------------------------------------------------------ */

.tsv-carousel__prev:hover,
.tsv-carousel__next:hover { background: #F7F4EF !important; }

/* Quote form ---------------------------------------------------------- */

.tsv-quote-form__submit:hover { background: #17703D !important; }
.tsv-quote-form__lookup:hover { background: #2E2E2E !important; }

/* Areas grid --------------------------------------------------------- */
/* .scpc:hover in the export turns the whole card brand yellow. */

.tsv-area-card { transition: background-color .14s ease, border-color .14s ease; }
.tsv-area-card:hover { background: #F0C040 !important; border-color: #F0C040 !important; }

/* Why Thistle band (home) --------------------------------------------- */
/* .scpa / .scpb in the export. */

.tsv-why-cta { transition: background-color .14s ease, border-color .14s ease, color .14s ease; }
.tsv-why-cta--primary:hover { background: #17703D !important; }
.tsv-why-cta--secondary:hover { background: #FFFFFF !important; border-color: #FFFFFF !important; color: #0D0D0D !important; }

/* Reviews section ----------------------------------------------------- */
/* .scpd / .scpe in the export. */

.tsv-review-cta { transition: background-color .14s ease; }
.tsv-review-cta--write:hover { background: #C9960E !important; }
.tsv-review-cta--more:hover { background: #2E2E2E !important; }
.tsv-areas-cta:hover { background: #C9960E !important; }

/* Location tiles ------------------------------------------------------ */

.tsv-area-tile { transition: transform .14s ease, box-shadow .14s ease; }
.tsv-area-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.tsv-area-tile:hover .tsv-area-tile__foot { background: #C9960E !important; }

/* Valuation design ---------------------------------------------------- */

.tsv-tab:hover:not([aria-selected="true"]) { border-color: #F0C040 !important; }
.tsv-val-outline:hover { background: #FFFFFF !important; color: #0D0D0D !important; }
.tsv-val-related { transition: transform .14s ease, box-shadow .14s ease; }
.tsv-val-related:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important; }

/* Consultancy design -------------------------------------------------- */

.tsv-con-outline:hover { border-color: #0D0D0D !important; }
.tsv-con-phone:hover { background: #F0C040 !important; color: #0D0D0D !important; }
.tsv-con-related:hover { background: #F7F4EF; }

/* Chevron toggles (area tabs and FAQs) -------------------------------- */
/* The export draws an up chevron on the open row and a down one on the
   rest; one down chevron turned over does the same. */

.tsv-chev { transition: transform .15s ease; }
.tsv-chev-toggle[aria-expanded="true"] .tsv-chev { transform: rotate(180deg); }

/* Knowledge Hub article. .scp0-.scp3 in the export. */
.tsv-art-service { transition: background-color .14s ease, border-color .14s ease; }
.tsv-art-service:hover { border-color: #F0C040 !important; background: #EFEEEA; }
.tsv-art-quote:hover { background: #17703D !important; }
.tsv-art-call:hover { background: #0D0D0D !important; color: #F0C040 !important; }
.tsv-art-card { transition: border-color .14s ease, box-shadow .14s ease; }
.tsv-art-card:hover { border-color: #F0C040 !important; box-shadow: 0 12px 30px rgba(0, 0, 0, .1); }
.tsv-art-dark-call:hover { border-color: #F0C040 !important; }

/* Contact form. The design's focus state (style-focus in contact.dc.html) and .scp2:hover. */
.tsv-contact-form__field:focus { border-color: #F0C040 !important; box-shadow: inset 0 0 0 .5px #F0C040; }
.tsv-contact-form__field:user-invalid { border-color: #D9534F !important; }
.tsv-contact-form__submit { transition: background-color .14s ease; }
.tsv-contact-form__submit:hover { background: #17703D !important; }

/* .scp1:hover on the services and valuations landings: the plain "View all" card link. */
.tsv-card-link-cta { transition: gap .14s ease; }
.tsv-card-link-cta:hover { gap: 9px !important; text-decoration: underline; }

/* Category landing design. .scp0/.scp1:hover in the export; the primary button's hover colour depends on the page. */
.tsv-landing-primary { transition: background-color .14s ease; }
.tsv-landing-primary:hover { background: var(--tsv-hover) !important; }
.tsv-landing-call:hover { border-color: #0D0D0D !important; }
.tsv-landing-link:hover { text-decoration: underline; }

/* Housing disrepair design. .scp0-.scp2:hover in the export. */
.tsv-hd-primary { transition: background-color .14s ease; }
.tsv-hd-primary:hover { background: #17703D !important; }
.tsv-hd-call:hover { background: #F0C040 !important; border-color: #F0C040 !important; }
.tsv-hd-link:hover { text-decoration: underline; }

/* Forms (Phase 8): the design's invalid state is a red border; its text sits under the field. */
.tsv-form .is-invalid,
.tsv-form [aria-invalid="true"] { border-color: #D9534F !important; }
.tsv-form button[aria-busy="true"] { opacity: .7; cursor: progress; }
.tsv-form__success:focus { outline: none; }
.tsv-quote-form input:focus,
.tsv-quote-form select:focus,
.tsv-quote-form textarea:focus,
.tsv-newsletter input:focus { border-color: #F0C040 !important; }

/* Default pages (legal). */
.tsv-legal__toc-link { transition: background-color .14s ease, color .14s ease; }
.tsv-legal__toc-link:hover { background: #F7F4EF; color: #0D0D0D !important; text-decoration: none; }
.tsv-legal article a { color: #C9960E; text-decoration: underline; }
.tsv-legal__card strong { color: #0D0D0D; }
.tsv-legal article table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tsv-legal article th,
.tsv-legal article td { border: 1px solid #EFEBE4; padding: 8px 10px; text-align: left; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Search results pagination. */
.tsv-main .nav-links { display: flex; gap: 8px; flex-wrap: wrap; font-size: 14px; font-weight: 700; }
.tsv-main .nav-links a,
.tsv-main .nav-links span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #EFEBE4; border-radius: 6px; color: #0D0D0D; text-decoration: none; }
.tsv-main .nav-links .current { background: #F0C040; border-color: #F0C040; }
