/* =============================================================
   GLOSS. Skin — Component layer
   Loads after generate-style + tokens.css.
   Provides brand utilities and concrete component styles for
   GenerateBlocks / Gutenberg content authored against the
   design system.
   ============================================================= */

/* ---------- Container override (1140px brand max) ---------- */
.gs-theme .grid-container.grid-parent,
.gs-theme .inside-article,
.gs-theme .inside-page-header,
.gs-theme .inside-content {
	max-width: var(--gs-container-max);
}

/* ---------- Page surface ---------- */
.gs-theme {
	background-color: var(--gs-bg-page);
}

/* ---------- Headings — brand voice (period at the end is on-brand) ---------- */
.gs-theme h1,
.gs-theme h2,
.gs-theme h3,
{
	font-family: var(--gs-font-display);
	color: var(--gs-text-primary);
	font-weight: var(--gs-weight-bold);
	letter-spacing: 0;
}

.gs-theme h1 { font-size: var(--gs-text-6xl); line-height: var(--gs-leading-tight); }
.gs-theme h2 { font-size: var(--gs-text-4xl); line-height: var(--gs-leading-normal); }
.gs-theme h3 { font-size: var(--gs-text-3xl); line-height: var(--gs-leading-relaxed); }
.gs-theme h4 { font-size: var(--gs-text-2xl); line-height: var(--gs-leading-snug); }

/* ---------- Body & links ---------- */
.gs-theme,
.gs-theme li {
	font-family: var(--gs-font-body);
	font-size: var(--gs-text-base);
	color: var(--gs-text-body);
	line-height: var(--gs-leading-loose);
}

.gs-theme a {
	color: var(--wp--preset--color--surface-white);
	transition: color 150ms ease, opacity 150ms ease;
}
.gs-theme a:hover { color: var(--gs-color-navy-deep); }

/* ---------- Buttons (extending parent + GenerateBlocks) ---------- */
.gs-theme .wp-block-button__link,
.gs-theme .gb-button,
.gs-theme .button,
.gs-theme button[type="submit"],
.gs-theme input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gs-space-2);
	padding: 12px 28px;
	border: 0;
	border-radius: var(--gs-radius-pill);
	background: var(--gs-gradient-primary);
	color: var(--gs-text-inverse);
	font-family: var(--gs-font-body);
	font-size: var(--gs-text-base);
	font-weight: var(--gs-weight-bold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}
.gs-theme .wp-block-button__link:hover,
.gs-theme .gb-button:hover,
.gs-theme .button:hover,
.gs-theme button[type="submit"]:hover,
.gs-theme input[type="submit"]:hover {
	transform: translateY(-1px);
	box-shadow: var(--gs-shadow-btn);
	color: var(--gs-text-inverse);
}

/* Button — magenta variant */
.gs-theme .is-style-magenta .wp-block-button__link,
.gs-theme .gs-btn-magenta {
	background: var(--gs-color-magenta);
}

/* Button — dark variant */
.gs-theme .is-style-dark .wp-block-button__link,
.gs-theme .gs-btn-dark {
	background: #000;
}

/* Button — light variant */
.gs-theme .is-style-light .wp-block-button__link,
.gs-theme .gs-btn-light {
	background: var(--gs-bg-page);
	color: var(--gs-text-primary);
}
.gs-theme .is-style-light .wp-block-button__link:hover,
.gs-theme .gs-btn-light:hover { color: var(--gs-text-primary); }

/* Button — outline */
.gs-theme .is-style-outline .wp-block-button__link,
.gs-theme .gs-btn-outline {
	background: transparent;
	color: var(--gs-text-primary);
	box-shadow: inset 0 0 0 1px var(--gs-border-soft);
}
.gs-theme .is-style-outline .wp-block-button__link:hover,
.gs-theme .gs-btn-outline:hover { color: var(--gs-text-primary); }

/* Compact button (matches Penpot 14/700 chip) */
.gs-theme .is-style-sm .wp-block-button__link,
.gs-theme .gs-btn-sm {
	padding: 8px 20px;
	font-size: var(--gs-text-sm);
}

/* ---------- Cards (mapped onto gb-container/wp-block-group) ---------- */
.gs-theme .gs-card,
.gs-theme .is-style-card .wp-block-group,
.gs-theme .is-style-card.gb-container {
	background: var(--gs-bg-white);
	border-radius: var(--gs-radius-2xl);
	box-shadow: var(--gs-shadow-card);
	padding: var(--gs-space-8);
}

.gs-theme .is-style-card-tint .wp-block-group,
.gs-theme .is-style-card-tint.gb-container,
.gs-theme .gs-card-tint { background: var(--gs-bg-tint); }

.gs-theme .is-style-card-flat .wp-block-group,
.gs-theme .is-style-card-flat.gb-container,
.gs-theme .gs-card-flat {
	background: var(--gs-bg-white);
	box-shadow: none;
	border: 1px solid var(--gs-border-default);
	padding: var(--gs-space-8);
	border-radius: var(--gs-radius-2xl);
}

/* Article card — softer radius + faint shadow + hairline divider */
.gs-theme .is-style-article-card .wp-block-group,
.gs-theme .is-style-article-card.gb-container {
	background: var(--gs-bg-tint);
	border-radius: var(--gs-radius-lg);
	box-shadow: var(--gs-shadow-card-faint);
	padding: var(--gs-space-8);
	border-bottom: 1px solid var(--gs-text-muted);
}

/* Pricing card — bigger price treatment */
.gs-theme .is-style-pricing-card .wp-block-group,
.gs-theme .is-style-pricing-card.gb-container {
	background: var(--gs-bg-white);
	border-radius: var(--gs-radius-2xl);
	box-shadow: var(--gs-shadow-card);
	padding: var(--gs-space-10);
	text-align: center;
}

/* ---------- Chips / tags ---------- */
.gs-theme .gs-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border-radius: var(--gs-radius-pill);
	background: var(--gs-bg-page);
	color: var(--gs-text-muted);
	font-family: var(--gs-font-body);
	font-size: var(--gs-text-sm);
	font-weight: var(--gs-weight-medium);
	text-decoration: none;
}
.gs-theme .gs-chip-magenta  { background: var(--gs-color-magenta);   color: var(--gs-text-inverse); }
.gs-theme .gs-chip-gradient { background: var(--gs-gradient-primary); color: var(--gs-text-inverse); }

/* ---------- Forms (Formidable, GenerateBlocks Forms, native) ---------- */
.gs-theme input[type="text"],
.gs-theme input[type="email"],
.gs-theme input[type="tel"],
.gs-theme input[type="url"],
.gs-theme input[type="password"],
.gs-theme input[type="search"],
.gs-theme input[type="number"],
.gs-theme select,
.gs-theme textarea,
.gs-theme .frm_form_field input,
.gs-theme .frm_form_field textarea,
.gs-theme .frm_form_field select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--gs-border-default);
	border-radius: var(--gs-radius-md);
	background: var(--gs-bg-white);
	font-family: var(--gs-font-body);
	font-size: var(--gs-text-base);
	color: var(--gs-text-form);
	outline: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
	box-shadow: none;
}

.gs-theme input:focus,
.gs-theme select:focus,
.gs-theme textarea:focus,
.gs-theme .frm_form_field input:focus,
.gs-theme .frm_form_field textarea:focus {
	border-color: var(--gs-color-magenta);
	box-shadow: 0 0 0 3px rgba(176, 28, 225, 0.15);
}

.gs-theme label,
.gs-theme .frm_primary_label {
	font-family: var(--gs-font-body);
	font-size: var(--gs-text-base);
	font-weight: var(--gs-weight-light);
	color: var(--gs-text-form);
	line-height: var(--gs-leading-snug);
}

/* ---------- Marquee (hero strapline) ---------- */
.gs-marquee {
	overflow: hidden;
	width: 100%;
	display: flex;
}
.gs-marquee__track {
	display: inline-flex;
	gap: 64px;
	padding-inline: 32px;
	white-space: nowrap;
	font-family: var(--gs-font-body);
	font-size: var(--gs-text-5xl);
	font-weight: var(--gs-weight-medium);
	color: var(--gs-color-magenta);
	animation: gs-marquee 28s linear infinite;
}
.gs-marquee--sm .gs-marquee__track { font-size: var(--gs-text-2xl); }
@keyframes gs-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.gs-marquee__track { animation: none; }
}

/* ---------- Halos (decorative ellipses) ---------- */
.gs-halo {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.gs-halo--pink { box-shadow: var(--gs-shadow-glow-pink); }
.gs-halo--teal { box-shadow: var(--gs-shadow-glow-teal); }

/* ---------- Stat block ---------- */
.gs-stat__value {
	font-family: var(--gs-font-body);
	font-size: var(--gs-text-2xl);
	font-weight: var(--gs-weight-bold);
	line-height: var(--gs-leading-snug);
	color: var(--gs-text-primary);
	display: block;
}
.gs-stat__label {
	font-family: var(--gs-font-body);
	font-size: var(--gs-text-base);
	color: var(--gs-text-body);
	line-height: var(--gs-leading-snug);
}

/* ---------- Pagination dots ---------- */
.gs-dots {
	display: inline-flex;
	gap: var(--gs-space-2);
	align-items: center;
}
.gs-dots__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gs-border-neutral-alt);
	transition: transform 150ms ease, background-color 150ms ease;
}
.gs-dots__dot.is-active {
	width: 14px;
	height: 14px;
	background: var(--gs-color-magenta);
}

/* ---------- Star rating ---------- */
.gs-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--gs-rating-star);
	font-size: var(--gs-text-md);
}

/* ---------- Sections ---------- */
.gs-theme .gs-section,
.gs-theme .is-style-section .wp-block-group,
.gs-theme .is-style-section.gb-container {
	padding-block: var(--gs-space-24);
}
.gs-theme .gs-section--tight,
.gs-theme .is-style-section-tight .wp-block-group,
.gs-theme .is-style-section-tight.gb-container { padding-block: var(--gs-space-16); }

.gs-theme .gs-section--compact,
.gs-theme .is-style-section-compact .wp-block-group,
.gs-theme .is-style-section-compact.gb-container { padding-block: var(--gs-space-12); }

/* Container narrow variant for FAQ / lede */
.gs-theme .is-style-narrow .wp-block-group,
.gs-theme .is-style-narrow.gb-container {
	max-width: var(--gs-section-narrow);
	margin-inline: auto;
}

/* ---------- Header (GeneratePress site header) ---------- */
.gs-theme .site-header {
	background-color: var(--gs-bg-white);
	min-height: var(--gs-header-height);
}
.gs-theme .main-navigation .main-nav ul li a {
	font-family: var(--gs-font-body);
	font-size: var(--gs-text-base);
	font-weight: var(--gs-weight-medium);
	color: var(--gs-text-primary);
}
.gs-theme .main-navigation .main-nav ul li.current-menu-item > a,
.gs-theme .main-navigation .main-nav ul li > a:hover {
	color: var(--gs-color-magenta);
}

/* Header-attached CTA — turn the last menu item into a gradient pill */
.gs-theme .main-navigation .main-nav ul li.menu-item-cta > a {
	background: var(--gs-gradient-primary);
	color: var(--gs-text-inverse);
	border-radius: var(--gs-radius-pill);
	padding: 10px 22px;
	margin-left: var(--gs-space-3);
}

/* ---------- Footer ---------- */
.gs-theme .site-footer,
.gs-theme .footer-widgets {
	background: #434343;
	color: #F1F6FB;
}
.gs-theme .site-footer a,
.gs-theme .footer-widgets a {
	color: #F1F6FB;
	text-decoration: underline;
	text-decoration-color: rgba(241, 246, 251, 0.5);
}
.gs-theme .site-footer a:hover { color: var(--gs-color-glow-pink); }
.gs-theme .copyright-bar {
	font-family: var(--gs-font-body);
	font-size: var(--gs-text-xs);
	opacity: 0.6;
	color: #F1F6FB;
}

/* ---------- Responsive scaling ---------- */
@media (max-width: 1280px) {
	.gs-theme h1 { font-size: 56px; }
	.gs-theme h2 { font-size: 42px; }
	.gs-theme .gs-section { padding-block: 80px; }
}

@media (max-width: 768px) {
	.gs-theme h1 { font-size: 44px; line-height: 1.05; }
	.gs-theme h2 { font-size: 32px; }
	.gs-theme h3 { font-size: 28px; }
	.gs-theme h4 { font-size: 22px; }
	.gs-theme .gs-section          { padding-block: 64px; }
	.gs-theme .gs-section--tight   { padding-block: 48px; }
	.gs-theme .gs-section--compact { padding-block: 32px; }
	.gs-marquee__track { font-size: 36px; }
}

@media (max-width: 480px) {
	.gs-theme h1 { font-size: 36px; }
	.gs-theme h2 { font-size: 28px; }
}