/**
 * Industry pack: Solar PV — complete site design system.
 *
 * This file is the entire Solar visual identity. It is intentionally
 * UNLAYERED so it wins over the layered master tokens and components
 * without touching any template markup.
 *
 * Design language
 * - Deep-sea navy surfaces, warm paper pages, sun-amber reserved for
 *   glow, markers and large display accents — never for small text.
 * - Buttons pair dark-on-light or light-on-dark exclusively, so button
 *   labels always clear 7:1 contrast in every state, including visited.
 * - Cards carry a sun-rise top bar; the footer is a full-bleed navy
 *   chart room with four true columns on desktop, stacked on mobile.
 */

:root {
	--ww-navy: #0c2b3a;
	--ww-navy-2: #10485e;
	--ww-ink: #101f28;
	--ww-body-copy: #33454f;
	--ww-muted: #5b6f79;
	--ww-faint: #8ba0aa;
	--ww-accent: #ffb627;
	--ww-accent-deep: #8a4e0b;
	--ww-paper: #faf6ee;
	--ww-surface: #ffffff;
	--ww-tint: #eaf2f5;
	--ww-line: #dfe7ea;
	--ww-positive: #1e7f4f;
	--ww-radius-md: 12px;
	--ww-shell-width: 1200px;
}

/* ---------- global rhythm ---------- */

body {
	background: var(--ww-paper);
}

a {
	color: var(--ww-accent-deep);
	text-underline-offset: 2px;
}

a:hover {
	color: var(--ww-navy);
}

/* ---------- buttons: never text-on-amber ---------- */

.ww-button {
	min-height: 50px;
	border-radius: 14px;
	padding: 0 24px;
	font-size: 0.9rem;
}

.ww-button-primary,
.ww-button-primary:visited,
.ww-page-shell a.ww-button-primary,
.ww-page-shell a.ww-button-primary:visited {
	border: 2px solid var(--ww-navy);
	background: var(--ww-navy);
	color: #ffffff;
	box-shadow: 0 10px 24px rgb(12 43 58 / 0.25);
}

.ww-button-primary:hover,
.ww-button-primary:focus-visible,
.ww-page-shell a.ww-button-primary:hover {
	border-color: var(--ww-navy-2);
	background: var(--ww-navy-2);
	color: #ffffff;
}

.ww-button-secondary {
	border: 2px solid var(--ww-line);
	background: var(--ww-surface);
	color: var(--ww-navy);
}

.ww-button-secondary:hover {
	border-color: var(--ww-navy);
	color: var(--ww-navy);
}

/* ---------- header: white masthead ---------- */

.ww-site-header {
	background: var(--ww-surface);
	border-bottom: 1px solid var(--ww-line);
}

.ww-brand,
.ww-brand__name {
	color: var(--ww-navy);
}

.ww-site-nav a {
	color: var(--ww-body-copy);
	font-weight: 700;
}

.ww-site-nav a:hover,
.ww-site-nav a[aria-current="page"] {
	color: var(--ww-navy);
}

.ww-site-nav a[aria-current="page"] {
	border-bottom: 2px solid var(--ww-accent);
	text-shadow: none;
}

.ww-header-link {
	color: var(--ww-body-copy);
}

.ww-header-link:hover {
	color: var(--ww-navy);
}

.ww-header-cta,
.ww-header-cta:visited {
	border: 2px solid var(--ww-navy);
	border-radius: 999px;
	background: var(--ww-navy);
	color: #ffffff;
	box-shadow: none;
}

.ww-header-cta:hover,
.ww-header-cta:focus-visible {
	background: var(--ww-navy-2);
	border-color: var(--ww-navy-2);
	color: #ffffff;
}

.ww-site-header .ww-lang-switcher__link {
	color: var(--ww-muted);
}

.ww-site-header .ww-lang-switcher__current {
	color: var(--ww-navy);
}

/* Mobile masthead: the master styles hard-coded white-on-dark for the
   toggle and separators. On the Solar light header that rendered an
   invisible hamburger, so every one of those is remapped here. */
.ww-menu-toggle {
	border: 1px solid var(--ww-line);
	background: var(--ww-surface);
	color: var(--ww-navy);
}

@media (hover: hover) {
	.ww-menu-toggle:hover {
		border-color: var(--ww-navy);
		background: var(--ww-tint);
		color: var(--ww-navy);
	}
}

.ww-menu-toggle:focus-visible {
	outline: 2px solid var(--ww-navy);
	outline-offset: 2px;
}

@media (max-width: 1040px) {
	/* Explicit and unlayered so the mobile toggle can never be lost to a
	   cascade-order change: without it the mobile header has no navigation. */
	html.ww-has-menu .ww-menu-toggle {
		display: inline-flex;
	}

	.ww-has-menu .ww-site-nav {
		border-bottom: 1px solid var(--ww-line);
	}

	.ww-site-header__inner.is-menu-open .ww-header-actions {
		border-top: 1px solid var(--ww-line);
	}

	.ww-has-menu .ww-site-nav a {
		color: var(--ww-navy);
	}
}

/* ---------- hero: night-sky gradient with sun glow ---------- */

.ww-block--hero.ww-home-hero {
	background-color: #0c2b3a;
	background-image:
		radial-gradient(640px 420px at 82% 18%, rgb(255 182 39 / 0.3), transparent 65%),
		linear-gradient(90deg, rgb(12 43 58 / 0.6) 0%, rgb(12 43 58 / 0.25) 58%, transparent 100%),
		url('../img/hero-wave.svg');
	background-position: center;
	background-size: cover;
	border-bottom: 4px solid var(--ww-accent);
}

.ww-home-hero .ww-eyebrow {
	color: var(--ww-accent) !important;
	letter-spacing: 0.12em;
}

/* Dark surfaces keep the bright amber for small text; it is the light
   surfaces that must use --ww-accent-deep. */
[data-ww-page-key="ww-guides"] .ww-page-intro .ww-eyebrow,
.ww-block--hero .ww-eyebrow {
	color: var(--ww-accent);
}

.ww-block--hero .ww-home-hero__inner h1,
.ww-home-hero h1 {
	color: #ffffff !important;
	font-size: clamp(2.6rem, 1.4rem + 5vw, 4.3rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
	max-width: 16ch;
	text-transform: none;
}

.ww-home-hero .ww-lede {
	color: #cfdee4;
	font-size: 1.08rem;
	max-width: 46ch;
}

.ww-home-hero .ww-button-primary,
.ww-home-hero .ww-button-primary:visited {
	border-color: #ffffff;
	background: #ffffff;
	color: var(--ww-navy);
	box-shadow: 0 12px 28px rgb(0 0 0 / 0.3);
}

.ww-home-hero .ww-button-primary:hover {
	background: var(--ww-accent);
	border-color: var(--ww-accent);
	color: var(--ww-ink);
}

.ww-home-hero .ww-button-secondary {
	border: 2px solid rgb(255 255 255 / 0.55);
	background: transparent;
	color: #ffffff;
}

.ww-home-hero .ww-button-secondary:hover {
	border-color: #ffffff;
	background: rgb(255 255 255 / 0.12);
	color: #ffffff;
}

.ww-hero__proof {
	color: #ffffff;
}

.ww-hero__proof li {
	border: 1px solid rgb(255 255 255 / 0.25);
	border-radius: 999px;
	padding: 6px 14px 6px 10px;
	background: rgb(255 255 255 / 0.08);
}

/* ---------- one shell, one rhythm ----------

   Root cause of the "everything looks slightly off" report: the master
   theme ships THREE competing horizontal primitives — .ww-page-hero
   (centred, 920px), the .ww-block shell (left, 1136px) and raw
   .ww-shell--wide children (left, 1200px). Measured left edges on one
   viewport were 120 / 152 / 327 / 340 / 497. Everything below collapses
   them onto a single 1136px content column, so header, bands, cards and
   footer all share the same left and right edges at every breakpoint. */

.ww-page-hero,
.ww-archive-intro,
[data-ww-page-key="ww-guides"] .ww-page-intro {
	padding-inline: max(var(--ww-gutter-mobile), calc(50vw - 568px));
}

.ww-page-hero {
	margin: 0 0 48px calc(50% - 50vw);
	background: var(--ww-tint);
	border-bottom: 1px solid var(--ww-line);
	text-align: left;
}

.ww-page-hero__inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 52px 0 54px;
}

.ww-page-hero h1 {
	margin: 10px 0 0;
	max-width: 820px;
}

.ww-page-hero .ww-lede {
	margin: 14px 0 0;
	max-width: 680px;
}

.ww-page-hero .ww-breadcrumbs {
	justify-content: flex-start;
}

/* Children of the wide shell carry no gutter of their own in the master
   styles, which left archives 32px wider than every other page. */
.ww-shell > .ww-grid,
.ww-shell > .ww-pagination,
.ww-shell > .ww-list-meta,
.ww-shell > .ww-empty,
.ww-shell > .ww-calculator-selector,
.ww-shell > .ww-topic-nav,
.ww-shell > .ww-calculator-category-nav,
.ww-calculator-directory > .ww-grid,
.ww-calculator-directory > .ww-topic-nav,
.ww-calculator-directory > .ww-pagination {
	padding-right: var(--ww-gutter);
	padding-left: var(--ww-gutter);
}

/* ---------- section headings ---------- */

.ww-eyebrow,
.ww-card__label {
	color: var(--ww-accent-deep);
	letter-spacing: 0.1em;
}

.ww-section-heading h2 {
	letter-spacing: -0.015em;
}

.ww-card__action,
.ww-text-link {
	color: var(--ww-accent-deep);
	font-size: 0.85rem;
}

/* ---------- cards: sun-rise top bar ---------- */

.ww-card {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--ww-line);
	border-radius: 18px;
	background: var(--ww-surface);
	box-shadow: 0 2px 10px rgb(12 43 58 / 0.05);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ww-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--ww-accent), #ffd97a 55%, var(--ww-positive));
}

.ww-card:hover {
	transform: translateY(-4px);
	border-color: var(--ww-navy);
	box-shadow: 0 16px 34px rgb(12 43 58 / 0.14);
}

.ww-card__title {
	font-size: 1.12rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.ww-card__title a {
	color: var(--ww-navy);
	text-decoration: none;
}

.ww-card__title a:hover {
	color: var(--ww-navy-2);
	text-decoration: underline;
	text-decoration-color: var(--ww-accent);
	text-decoration-thickness: 3px;
}

.ww-card__body {
	color: var(--ww-body-copy);
}

/* ---------- home section spacing ---------- */

.ww-home-main .ww-block--section {
	padding-top: 64px;
}

.ww-home-grid {
	gap: 24px;
}

/* ---------- footer: navy chart room, four true columns ---------- */

.ww-site-footer {
	padding: 48px 0 32px;
	background: linear-gradient(180deg, #0c2b3a, #082130);
	border-top: 4px solid var(--ww-accent);
	color: #cfdee4;
	font-size: 0.85rem;
}

.ww-site-footer__inner {
	display: grid;
	gap: 28px;
	width: 100%;
	max-width: var(--ww-shell-width);
	margin-right: auto;
	margin-left: auto;
	padding-right: var(--ww-gutter);
	padding-left: var(--ww-gutter);
}

.ww-site-footer__primary {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.15fr);
	gap: 48px;
	align-items: start;
	width: 100%;
	max-width: none;
	margin: 0;
}

.ww-footer-nav {
	margin: 0;
	padding: 0;
}

.ww-footer-nav--columns {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
}

.ww-footer-nav--columns .ww-footer-nav__col {
	min-width: 0;
}

.ww-site-footer__copy > p {
	color: #9fb3bc;
	max-width: 34ch;
}

.ww-site-footer__brand {
	color: #ffffff;
}

.ww-site-footer__brand:hover {
	color: var(--ww-accent);
}

.ww-footer-nav__title {
	color: #ffffff;
	letter-spacing: 0.1em;
}

.ww-footer-nav__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
}

.ww-footer-nav a {
	color: #d7e3e8;
	min-height: 40px;
	font-weight: 600;
}

.ww-footer-nav a:hover {
	color: var(--ww-accent);
}

.ww-site-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	max-width: none;
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid rgb(255 255 255 / 0.15);
}

.ww-site-footer__disclosure {
	color: #9fb3bc;
}

/* ---------- focus visibility ---------- */

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--ww-accent);
	outline-offset: 2px;
}

/* ---------- responsive ---------- */

@media (max-width: 1040px) {
	.ww-site-footer__primary {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.ww-footer-nav--columns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 24px;
	}
}

@media (max-width: 760px) {
	.ww-site-footer {
		padding: 36px 0 26px;
		font-size: 0.8rem;
	}

	.ww-site-footer__inner {
		padding-right: var(--ww-gutter-mobile);
		padding-left: var(--ww-gutter-mobile);
	}
}

/* ---------- one gutter everywhere ----------

   The master theme only switched the HEADER and FOOTER to a 20px mobile
   gutter while every content section kept 32px, so on phones the brand
   and the footer sat 12px to the left of every card. Redefining the token
   once normalises every consumer of --ww-gutter at once. */

@media (max-width: 760px) {
	:root {
		--ww-gutter: var(--ww-gutter-mobile);
	}
}

@media (max-width: 560px) {
	.ww-home-hero .ww-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.ww-home-hero .ww-button {
		width: 100%;
	}

	.ww-button + .ww-button {
		margin-left: 0;
	}

	.ww-footer-nav--columns {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.ww-hero__proof {
		gap: 8px;
	}
}