/*
Theme Name:   Wintercreek
Theme URI:    https://wintercreekresort.com
Description:  Kadence child theme for Wintercreek. Encodes the design constitution: palette tokens, the four-size type scale, spacing scale, one dark band, one motion behaviour.
Author:       Anders Pylypchuk
Template:     kadence
Version:      1.0.2
Text Domain:  wintercreek
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Palette — the five brand colours, nothing else */
	--wc-bone:   #EBEBE9;
	--wc-moss:   #85B0A4;
	--wc-forest: #467C6A;
	--wc-spruce: #006938;
	--wc-soil:   #453B35;

	/* Roles */
	--wc-paper:  var(--wc-bone);
	--wc-ink:    var(--wc-soil);
	--wc-accent: var(--wc-forest);
	--wc-rule:   var(--wc-moss);

	/* Type families (Adobe Fonts kit fdj8sng) */
	--wc-serif: schoolbook, Georgia, "Times New Roman", serif;
	--wc-label: trade-gothic-next-condensed, "Arial Narrow", Arial, sans-serif;
	--wc-ui:    effra, "Helvetica Neue", Arial, sans-serif;

	/* The four type sizes — the only sizes on the site */
	--wc-size-display: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
	--wc-size-heading: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--wc-size-body:    1.125rem;
	--wc-size-label:   0.75rem;

	/* Spacing scale */
	--wc-space-1: 0.5rem;
	--wc-space-2: 1rem;
	--wc-space-3: 1.5rem;
	--wc-space-4: 2.5rem;
	--wc-space-5: 4rem;
	--wc-space-6: 6.5rem;
	--wc-space-7: 10rem;

	/* Layout */
	--wc-measure: 34rem;   /* comfortable reading line */
	--wc-wide:    72rem;

	/* The one motion behaviour */
	--wc-settle-duration: 1.1s;
	--wc-ease: cubic-bezier(0.2, 0.6, 0.2, 1);

	/* Kadence's colour palette is set in the Customizer (Colors → Global Palette);
	   only its font variables are overridden here. */
	--global-body-font-family:    var(--wc-serif);
	--global-heading-font-family: var(--wc-serif);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body {
	background: var(--wc-paper);
	color: var(--wc-ink);
	font-family: var(--wc-serif);
	font-size: var(--wc-size-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

.site,
.content-bg,
body.content-style-unboxed .site {
	background: var(--wc-paper);
}

p,
li {
	font-size: var(--wc-size-body);
}

em,
i {
	font-style: italic;
}

strong,
b {
	font-weight: 400; /* SchoolBook Regular only — emphasis is italic, not bold */
	font-style: italic;
}

img {
	height: auto;
	max-width: 100%;
}

/* No orphaned last words */
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

.has-text-align-center {
	text-wrap: balance;
}

::selection {
	background: var(--wc-moss);
	color: var(--wc-soil);
}

/* ==========================================================================
   3. Type — four sizes, mapped
   ========================================================================== */

h1,
.wc-display {
	font-family: var(--wc-serif);
	font-size: var(--wc-size-display);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--wc-ink);
}

h2,
h3,
.wc-heading {
	font-family: var(--wc-serif);
	font-size: var(--wc-size-heading);
	font-weight: 400;
	line-height: 1.25;
	color: var(--wc-ink);
}

h4,
h5,
h6,
.wc-label {
	font-family: var(--wc-label);
	font-size: var(--wc-size-label);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wc-accent);
}

/* MMXXVI — once per page */
.wc-mmxxvi {
	font-family: var(--wc-label);
	font-size: var(--wc-size-label);
	font-weight: 700;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--wc-accent);
}

.wc-measure {
	max-width: var(--wc-measure);
}

/* ==========================================================================
   4. Links, buttons, forms
   ========================================================================== */

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--wc-rule);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: text-decoration-color 0.2s ease;
}

a:hover,
a:focus-visible {
	color: inherit;
	text-decoration-color: currentColor;
}

:focus-visible {
	outline: 1px solid var(--wc-forest);
	outline-offset: 3px;
}

/* Buttons state, never sell: quiet, square, spaced capitals */
.wp-block-button__link,
.wp-element-button,
button,
input[type="submit"],
.button {
	font-family: var(--wc-label);
	font-size: var(--wc-size-label);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	background: var(--wc-forest);
	color: var(--wc-bone);
	border: 1px solid var(--wc-forest);
	border-radius: 0;
	padding: 1em 2em;
	box-shadow: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover,
button:hover,
input[type="submit"]:hover,
.button:hover {
	background: transparent;
	color: var(--wc-forest);
	border-color: var(--wc-forest);
}

.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wc-forest);
}

input,
select,
textarea {
	font-family: var(--wc-ui);
	font-size: var(--wc-size-body);
	color: var(--wc-ink);
	background: #FFFFFF;
	border: 1px solid var(--wc-moss);
	border-radius: 0;
}

/* ==========================================================================
   5. Header & navigation
   ========================================================================== */

#masthead,
.site-header-wrap,
.site-header-row-container-inner {
	background: var(--wc-paper);
}

.main-navigation .primary-menu-container > ul > li.menu-item > a,
.mobile-navigation ul li > a,
.site-footer .footer-navigation a {
	font-family: var(--wc-label);
	font-size: var(--wc-size-label);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wc-ink);
	text-decoration: none;
}

.main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.main-navigation .primary-menu-container > ul > li.current-menu-item > a {
	color: var(--wc-forest);
}

.site-branding .site-title {
	font-family: var(--wc-serif);
	font-size: var(--wc-size-heading);
	font-weight: 400;
	color: var(--wc-forest);
}

/* ==========================================================================
   6. The dark band — one per page
   ========================================================================== */

.wc-band {
	background: var(--wc-soil);
	color: var(--wc-bone);
	padding-block: var(--wc-space-6);
}

.wc-band h1,
.wc-band h2,
.wc-band h3,
.wc-band p,
.wc-band a {
	color: var(--wc-bone);
}

.wc-band h4,
.wc-band h5,
.wc-band h6,
.wc-band .wc-label,
.wc-band .wc-mmxxvi {
	color: var(--wc-moss);
}

.wc-band a {
	text-decoration-color: var(--wc-moss);
}

/* ==========================================================================
   7. The one motion behaviour — settle
   Add the class "wc-settle" to any block (Advanced → Additional CSS class).
   ========================================================================== */

@keyframes wc-settle {
	from {
		opacity: 0;
		transform: translateY(0.5rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.wc-settle {
	animation: wc-settle var(--wc-settle-duration) var(--wc-ease) both;
}

@media (prefers-reduced-motion: reduce) {
	.wc-settle {
		animation: none;
	}

	a,
	button,
	.wp-block-button__link {
		transition: none;
	}
}

/* ==========================================================================
   8. Footer
   ========================================================================== */

.site-footer,
.site-footer-wrap {
	background: var(--wc-paper);
	color: var(--wc-ink);
}

.site-footer .site-info {
	font-family: var(--wc-label);
	font-size: var(--wc-size-label);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wc-accent);
}