/* --------------------------------------------------------------------
 * Light mode — Hobby Workshop
 * White background, ink text, supernova yellow accent stays constant.
 * Custom-written for this page's actual elements (not the full stock
 * template, which covers a lot of features this single page doesn't use).
 * -------------------------------------------------------------------- */

/* ------------------------------------------------------------- *
 * Global variables
 * Note: dark/light are reversed by convention in this theme —
 * "dark color" becomes the light one and vice versa in light mode.
 * ------------------------------------------------------------- */

body.tt-lightmode-on {
	--tt-dark-color: #FFFFFF;
	--tt-light-color: #0A0A0A;

	--tt-bg-color: #FFFFFF;
	--tt-text-color: #0A0A0A;
	--tt-text-muted-color: #1a1a1a; /* Was mid-gray — kept near-black so muted text still reads as black, not washed out */
	--tt-border-color: rgb(10 10 10 / 30%); /* Was a faint 12% — bumped up so dividers/borders actually read as black */

	--tt-linear-text-bg-color: rgb(0 0 0 / 15%);

	--tt-ball-border-color: #bbb;

	/* Nav/icons overlaying the hero photo stay readable regardless of
	   site theme — the photo itself doesn't change with light/dark. */
	--tt-force-to-light-color: #efedea;
}


/* ------------------------------------------------------------- *
 * Smooth transition between modes
 * ------------------------------------------------------------- */

body,
#tt-header,
.tt-header-inner,
.tt-section,
.tt-footer-inner,
.tt-btn,
.tt-btn-outline,
.tt-btn-secondary,
.tt-stte-card,
.tt-hac-item,
.tt-ppl-item,
.tt-avlist-item,
a {
	transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
}


/* ------------------------------------------------------------- *
 * Style switch button
 * ------------------------------------------------------------- */

.tt-style-switch {
	position: relative;
	margin-left: 24px;
	display: flex;
	align-items: center;
}
@media (max-width: 1024px) {
	.tt-style-switch {
		margin-left: 0;
		margin-right: 20px;
	}
}

.tt-style-switch-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background-color: rgb(255 201 1 / 14%);
	color: var(--tt-main-color);
	line-height: 1;
	font-size: 15px;
	cursor: pointer;
	border-radius: 100%;
	transition: background-color .3s, color .3s, transform .2s;
}
.tt-style-switch-inner:hover {
	background-color: var(--tt-main-color);
	color: var(--tt-dark-color);
	transform: scale(1.08);
}

.tt-stsw-dark {
	display: none;
}
body.tt-lightmode-on .tt-stsw-dark {
	display: block;
}
body.tt-lightmode-on .tt-stsw-light {
	display: none;
}


/* ------------------------------------------------------------- *
 * Selection color
 * ------------------------------------------------------------- */

body.tt-lightmode-on ::selection {
	color: #FFFFFF;
	-webkit-text-fill-color: #FFFFFF;
	text-shadow: none;
	background: var(--tt-main-color);
}
body.tt-lightmode-on ::-moz-selection {
	color: #FFFFFF;
	-webkit-text-fill-color: #FFFFFF;
	text-shadow: none;
	background: var(--tt-main-color);
}


/* ------------------------------------------------------------- *
 * Logo — pinned "HOBBY" needs to flip with the theme (it's
 * hardcoded off-white for dark mode so it stays distinct from the
 * yellow "WORKSHOP" span, but that reads badly on white). The
 * preloader text is NOT included here: its overlay bars stay ink
 * black in both themes (--tt-page-trans-overlay-bg-color isn't
 * swapped), so the loader text must stay light in light mode too —
 * flipping it to black here made it invisible on its own background.
 * ------------------------------------------------------------- */

body.tt-lightmode-on .tt-logo-text a {
	color: #0A0A0A;
}


/* ------------------------------------------------------------- *
 * Header background-noise overlay: tone it down on white so it
 * doesn't read as dirty/gray.
 * ------------------------------------------------------------- */

body.tt-lightmode-on .tt-bg-noise:before {
	opacity: .04;
}


/* ------------------------------------------------------------- *
 * Testimonial cards — already a light card in dark mode (for
 * contrast against the dark page); on a white page they need a
 * bold black border to stay visually separated from the background.
 * ------------------------------------------------------------- */

body.tt-lightmode-on .tt-stte-card {
	border: 1.5px solid #0A0A0A;
	box-shadow: 0 4px 18px rgb(10 10 10 / 8%);
}


/* ------------------------------------------------------------- *
 * Outline buttons ("Get a Quote" x5, "Join Them", "How It Works")
 * These are yellow border/text everywhere by default (brand accents
 * pass in theme.css). On white, that reads as thin and washed out —
 * switch them to a bold black outline instead. Yellow is still doing
 * plenty of work elsewhere (headings, fill buttons, tags, numbers),
 * so this doesn't lose the accent, it balances it with heavy black.
 * ------------------------------------------------------------- */

body.tt-lightmode-on .tt-btn-outline {
	box-shadow: inset 0 0 0 2px #0A0A0A;
}
body.tt-lightmode-on .tt-btn-outline > *,
body.tt-lightmode-on .tt-btn-outline > *::after {
	color: #0A0A0A;
}
body.tt-lightmode-on .tt-btn-outline:hover {
	box-shadow: inset 0 0 0 2px #0A0A0A;
	background-color: #0A0A0A;
}
body.tt-lightmode-on .tt-btn-outline:hover > *,
body.tt-lightmode-on .tt-btn-outline:hover > *::after {
	color: #FFFFFF;
}


/* ------------------------------------------------------------- *
 * Big section headlines ("HOW IT WORKS", "ABOUT US", "BUILT
 * RIGHT", etc.) — solid supernova yellow at that size washes out
 * against white. Switch them to bold black ink in light mode;
 * yellow keeps doing its job on tags, buttons, numbers and the
 * small eyebrow subtitles above each one.
 * ------------------------------------------------------------- */

body.tt-lightmode-on .tt-heading-title.tt-text-reveal > span {
	color: #0A0A0A;
}


/* ------------------------------------------------------------- *
 * Contrast fix: "GET STARTED" and other .tt-btn-secondary buttons
 * sit on a yellow background and use var(--tt-dark-color) for their
 * text — which this file intentionally flips to white for other
 * uses, but that means white-on-yellow here. Pin it to real ink.
 * ------------------------------------------------------------- */

body.tt-lightmode-on .tt-btn-secondary > *,
body.tt-lightmode-on .tt-btn-secondary > *::after {
	color: #0A0A0A;
}

/* Same contrast issue on the round CTA button's hover fill */
body.tt-lightmode-on .tt-big-round-ptn-inner:hover,
body.tt-lightmode-on .tt-big-round-ptn-inner:focus {
	color: #0A0A0A;
}


/* ------------------------------------------------------------- *
 * Horizontal accordion (Services) — active/first item
 * ------------------------------------------------------------- */

@media (min-width: 1025px) {
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item:first-child,
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item.active {
		background-color: var(--tt-light-color);
		color: var(--tt-dark-color);
		border-color: transparent;
	}
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item:first-child.inactive {
		background-color: var(--tt-bg-color);
		color: var(--tt-text-color);
		border-color: var(--tt-border-color);
	}
	/* The active item's card is solid black — the "Get a Quote" button
	   inside it needs to switch from black-on-white to white-on-black,
	   or it disappears. */
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item:first-child .tt-btn-outline,
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item.active .tt-btn-outline {
		box-shadow: inset 0 0 0 2px var(--tt-dark-color);
	}
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item:first-child .tt-btn-outline > *,
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item:first-child .tt-btn-outline > *::after,
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item.active .tt-btn-outline > *,
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item.active .tt-btn-outline > *::after {
		color: var(--tt-dark-color);
	}
}
@media (max-width: 1024px) {
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item {
		background-color: var(--tt-light-color);
		color: var(--tt-dark-color);
		border-color: transparent;
	}
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item .tt-btn-outline > *,
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item .tt-btn-outline > *:after {
		color: var(--tt-dark-color);
	}
	body.tt-lightmode-on .tt-hac-alter-hover .tt-hac-item .tt-btn-outline {
		box-shadow: inset 0 0 0 2px var(--tt-dark-color);
	}
}


/* ------------------------------------------------------------- *
 * "Get Started" pill button — was off-white bg / dark text in
 * dark mode via a plain .tt-btn-secondary rule; keep it yellow
 * in both modes (the brand accents pass already handles this via
 * var(--tt-main-color), so nothing extra needed here) — this note
 * is left so the next edit knows why there's no override below.
 * ------------------------------------------------------------- */