/*
 * Base: typography, buttons, focus, forms, cards, badges.
 * Components are named .sgc-* so they can be used from block "Additional CSS class" fields.
 */

/* ---------- page ---------- */
html { scroll-padding-top: 88px; }
body {
	background: var(--sgc-bg);
	color: var(--sgc-ink);
	font-family: var(--sgc-font-body);
	-webkit-font-smoothing: antialiased;
}
::selection { background: var(--sgc-accent-soft); color: var(--sgc-heading); }

/* ---------- type ---------- */
h1, h2, h3, h4, h5, h6,
.sgc-display, .sgc-price, .sgc-brand-name, .sgc-brand-mark {
	font-family: var(--sgc-font-display);
	color: var(--sgc-heading);
	text-wrap: balance;
}
h1, h2, .sgc-display { letter-spacing: -.02em; }
h1, .entry-title, .page-title { font-weight: 800; }
.entry-content p, .sgc-muted-text { text-wrap: pretty; }
.sgc-muted, .sgc-muted-text { color: var(--sgc-muted); }
.sgc-small { font-size: .875rem; }
a { color: var(--sgc-brand); text-underline-offset: 3px; }
a:hover { color: var(--sgc-brand-hover); }

/* ---------- focus (keyboard) ---------- */
:focus { outline: none; }
:focus-visible,
.sgc-acct:focus-visible,
.main-navigation a:focus-visible {
	outline: 3px solid var(--sgc-brand) !important;
	outline-offset: 2px;
	border-radius: 6px;
}
.screen-reader-text:focus { outline: 3px solid var(--sgc-brand); }

/* ---------- buttons ---------- */
:root {
	--global-palette-btn-bg: var(--sgc-brand);
	--global-palette-btn-bg-hover: var(--sgc-brand-hover);
	--global-palette-btn: var(--sgc-on-brand);
	--global-palette-btn-hover: var(--sgc-on-brand);
}
.sgc-btn,
.wp-block-button__link,
.wp-element-button,
.button,
button.button,
input[type="submit"],
input[type="button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: var(--sgc-radius-btn);
	border: 1.5px solid transparent;
	background: var(--sgc-brand);
	color: var(--sgc-on-brand);
	font-family: var(--sgc-font-body);
	font-weight: 700;
	font-size: .78rem;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
	box-shadow: var(--sgc-btn-shadow);
	cursor: pointer;
	transition: background-color .15s, color .15s, border-color .15s;
}
.sgc-btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	background: var(--sgc-brand-hover);
	color: var(--sgc-on-brand);
}

/* Secondary: outlined in dusty rose. Block style "Outline" and .sgc-btn-ghost. */
.sgc-btn-ghost,
.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline,
.button.sgc-btn-ghost {
	background: transparent;
	border-color: var(--sgc-brand);
	color: var(--sgc-heading);
	box-shadow: none;
}
.sgc-btn-ghost:hover,
.is-style-outline > .wp-block-button__link:hover,
.button.sgc-btn-ghost:hover {
	background: var(--sgc-accent-soft);
	border-color: var(--sgc-brand);
	color: var(--sgc-heading);
}
.sgc-btn-sm { padding: 9px 14px; font-size: .72rem; }
.sgc-btn-block { width: 100%; }
button[disabled], .button[disabled], .button.disabled { opacity: .45; cursor: not-allowed; }

/* ---------- forms ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], input[type="date"], select, textarea {
	width: 100%;
	padding: 12px 14px;
	border-radius: var(--sgc-radius-field);
	border: 1.5px solid var(--sgc-line);
	background: var(--sgc-surface);
	color: var(--sgc-ink);
	font-family: var(--sgc-font-body);
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: none;
}
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible {
	border-color: var(--sgc-brand);
	outline: none !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sgc-brand) 45%, transparent);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--sgc-brand); width: 18px; height: 18px; }
::placeholder { color: color-mix(in srgb, var(--sgc-muted) 75%, transparent); }

/* Form labels: small uppercase, burgundy. */
.sgc-label,
form label:not(.sgc-plain-label):not(:has(input[type="checkbox"])):not(:has(input[type="radio"])) {
	font-weight: 700;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--sgc-heading);
}

/* ---------- surfaces ---------- */
.sgc-card {
	background: var(--sgc-surface);
	border: 1px solid var(--sgc-line);
	border-radius: var(--sgc-radius-card);
	padding: 26px;
	box-shadow: var(--sgc-card-shadow);
	transition: border-color .2s;
}
a.sgc-card, .sgc-card.is-link { text-decoration: none; color: inherit; }
a.sgc-card:hover, .sgc-card.is-link:hover, .sgc-card:focus-within { border-color: var(--sgc-brand); }
.sgc-card > :first-child { margin-top: 0; }
.sgc-card > :last-child { margin-bottom: 0; }

/* Badges: small uppercase, wide letter-spacing, on a rose tint. */
.sgc-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	background: var(--sgc-sage-light); /* Category pills: class types, levels. */
	color: var(--sgc-sage-dark);
	font-family: var(--sgc-font-body);
	font-size: .64rem;
	font-weight: 700;
	line-height: 1.6;
	text-transform: uppercase;
	letter-spacing: .12em;
}
.sgc-badge.is-gold { background: var(--sgc-sage-light); color: var(--sgc-sage-dark); } /* "Most popular" (class name kept for templates). */
.sgc-badge.is-solid { background: var(--sgc-brand); color: var(--sgc-on-brand); }
.sgc-badge.is-ok { background: var(--sgc-ok); color: var(--sgc-on-ok); } /* Status pills: Included, Purchased, Booked, Active. */
.sgc-badge.is-success { background: var(--sgc-ok-soft); color: var(--sgc-ok-ink); }
.sgc-badge.is-warn { background: var(--sgc-warn-soft); color: var(--sgc-warn); }
.sgc-badge.is-plain { background: var(--sgc-surface-2); color: var(--sgc-muted); }

.sgc-price { font-weight: 850; font-size: 2.8rem; line-height: 1; color: var(--sgc-heading); }
.sgc-price small { font-size: 1rem; font-weight: 500; }

.sgc-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .93rem; }
.sgc-ticks li { display: flex; gap: 10px; }
.sgc-ticks li::before {
	content: "";
	width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; border-radius: 50%;
	background: var(--sgc-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23A66B77' stroke-width='2'/%3E%3C/svg%3E") center/16px no-repeat;
}

.sgc-progress { height: 6px; border-radius: 6px; background: var(--sgc-surface-2); overflow: hidden; }
.sgc-progress > span { display: block; height: 100%; background: var(--sgc-ok); }

/* Notices from any plugin share one look. */
.sgc-notice {
	padding: 14px 18px;
	border-radius: 14px;
	background: var(--sgc-surface-2);
	color: var(--sgc-ink);
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* "Back" above the checkout titles (prototype). */
.sgc-back { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--sgc-muted); text-decoration: none; margin-bottom: 10px; }
.sgc-back::before { content: "←" / ""; }
.sgc-back:hover { color: var(--sgc-heading); text-decoration: underline; text-underline-offset: 3px; }