/*
Theme Name: HealthSkill Clinic
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: healthskill
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* With that gap gone, main carries its own vertical padding so templates this
   theme does not author (WooCommerce shop, product, cart…) still clear the
   header and footer. A descendant selector, not a child one: WooCommerce wraps
   the single-product main in an extra group. Templates built from full-bleed
   sections opt out with is-flush and let the sections own the rhythm. */
.wp-site-blocks main {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}
.wp-site-blocks main.is-flush {
	padding-block: 0;
}

:root {
	--site-line: var( --wp--preset--color--line );
	--site-surface: var( --wp--preset--color--surface );
	--site-ink: var( --wp--preset--color--contrast );
}

/* === header === */
.site-header {
	border-bottom: 1px solid var( --site-line );
	background: var( --wp--preset--color--base );
}
.site-brand {
	gap: 0.65rem;
	align-items: baseline;
}
.brand-tag {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--secondary );
	background: var( --site-surface );
	border: 1px solid var( --site-line );
	border-radius: 3px;
	padding: 0.1rem 0.5rem;
	margin: 0;
	letter-spacing: 0.02em;
}
.site-nav .wp-block-navigation-item a {
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 600;
	font-size: var( --wp--preset--font-size--small );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var( --site-ink );
}
.site-nav .wp-block-navigation-item a:hover {
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

/* === footer === */
.site-footer .brand-tag {
	background: transparent;
	border-color: rgba(255,255,255,0.3);
	color: var( --wp--preset--color--base );
}
.footer-note {
	opacity: 0.75;
	max-width: 34ch;
}
.footer-copy {
	opacity: 0.6;
	margin-top: 0.6rem !important;
	font-size: var( --wp--preset--font-size--small );
}
.site-footer .wp-block-navigation-item a {
	font-size: var( --wp--preset--font-size--small );
	text-decoration: none;
}
.site-footer .wp-block-navigation-item a:hover {
	text-decoration: underline;
}
/* === hero === */
.hero {
	padding-block: clamp( 3.5rem, 8vw, 6.5rem ) clamp( 3rem, 6vw, 5rem );
}
.eyebrow {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--secondary );
	background: var( --site-surface );
	border: 1px solid var( --site-line );
	border-radius: 3px;
	padding: 0.2rem 0.65rem;
	margin: 0 0 0.5rem;
	letter-spacing: 0.02em;
}
.hero-lede {
	color: var( --site-ink );
	opacity: 0.82;
	max-width: 56ch;
}
.hero-lede code {
	font-family: var( --wp--preset--font-family--mono );
	background: var( --site-surface );
	padding: 0.1rem 0.35rem;
	border-radius: 3px;
	font-size: 0.9em;
}
/* === skill-md-explainer === */
.section-what-is {
	padding-block: clamp( 3rem, 6vw, 5rem );
}
.is-style-panel {
	background: var( --wp--preset--color--contrast );
	border-radius: 6px;
	padding: 1.5rem;
}
.code-panel-label {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--base );
	opacity: 0.6;
	margin: 0 0 0.75rem;
}
.code-panel .wp-block-code {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--mono );
	font-size: 0.85rem;
	line-height: 1.65;
	white-space: pre-wrap;
	word-break: break-word;
}
.section-what-is ul {
	margin-top: 1rem;
	padding-left: 1.1rem;
}
.section-what-is li {
	margin-bottom: 0.5rem;
}
/* === skill-cards === */
.section-why {
	padding-block: clamp( 3.5rem, 7vw, 6rem );
}
.feature-number {
	font-family: var( --wp--preset--font-family--mono );
	color: var( --wp--preset--color--primary );
	font-size: var( --wp--preset--font-size--small );
	margin: 0 0 0.35rem;
	opacity: 0.7;
}
.section-healthcare {
	padding-block: clamp( 3.5rem, 7vw, 6rem );
}
.category-row {
	gap: 1rem;
}
.category-tile {
	flex: 1 1 220px;
}
.is-style-card {
	background: var( --wp--preset--color--base );
	border: 1px solid var( --site-line );
	border-radius: 6px;
	padding: 1.5rem;
}
.category-tile h3 {
	margin-top: 0;
}
.section-cta {
	padding-block: clamp( 3rem, 6vw, 4.5rem );
}
.cta-button .wp-element-button {
	background: var( --wp--preset--color--base );
	color: var( --wp--preset--color--contrast );
}
.cta-button .wp-element-button:hover {
	background: var( --wp--preset--color--surface );
}
/* === badges-and-repo === */
.section-skills-intro {
	padding-block: clamp( 3rem, 6vw, 5rem ) clamp( 1.5rem, 3vw, 2rem );
}
.section-skills-list {
	padding-block: clamp( 1rem, 3vw, 2rem ) clamp( 3.5rem, 7vw, 6rem );
}
.skill-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.skill-card .wp-block-post-excerpt {
	flex-grow: 1;
	opacity: 0.82;
}
.skill-badge {
	font-family: var( --wp--preset--font-family--mono );
	font-size: 0.75rem;
	color: var( --wp--preset--color--secondary );
	background: var( --site-surface );
	border: 1px solid var( --site-line );
	border-radius: 3px;
	padding: 0.15rem 0.55rem;
	display: inline-block;
	margin-bottom: 0.75rem;
}
.skill-badge a {
	color: inherit;
	text-decoration: none;
}
.skill-card .wp-block-post-title {
	margin-top: 0;
	margin-bottom: 0.5rem;
}
.skill-card .wp-block-post-title a {
	color: var( --site-ink );
}
.skill-card .wp-block-post-title a:hover {
	color: var( --wp--preset--color--primary );
}
/* === buttons === */
.repo-button {
	margin-top: auto;
	padding-top: 1rem;
}
.repo-button .wp-element-button {
	font-family: var( --wp--preset--font-family--mono );
	font-weight: 500;
	border-color: var( --site-line );
	color: var( --site-ink );
}
.repo-button .wp-element-button:hover {
	background: var( --wp--preset--color--primary );
	border-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}
.is-style-outline .wp-element-button {
	border-width: 1px;
}
/* === single-skill === */
.single-skill-head {
	padding-bottom: var( --wp--preset--spacing--50 );
	border-bottom: 1px solid var( --site-line );
	margin-bottom: var( --wp--preset--spacing--50 );
}
.single-skill-head .wp-block-post-title {
	margin: 0.5rem 0 1.25rem;
}
/* === responsive === */