/*
Theme Name:   Eminence Grey
Theme URI:    https://eminencegrey.ai
Description:  Custom child theme for Eminence Grey, built on Kadence.
Author:       Cloverjet Incorporated
Author URI:   https://cloverjet.com
Template:     kadence
Version:      1.0.0
Requires PHP: 7.4
Text Domain:  eminence-grey
*/

/* ==========================================================================
   Brand tokens
   Colors are set in Customizer > Colors (Kadence global palette 1-9);
   these aliases map brand names to those slots so custom CSS stays readable.
   ========================================================================== */
:root {
	--eg-purple:         var(--global-palette1); /* #694E9B */
	--eg-purple-dark:    var(--global-palette2); /* #392958 */
	--eg-black:          var(--global-palette3); /* #000000 */
	--eg-charcoal:       var(--global-palette4); /* #333333 */
	--eg-blue-gray-dark: var(--global-palette5); /* #3B475B */
	--eg-blue-gray:      var(--global-palette6); /* #597199 */
	--eg-line:           var(--global-palette7); /* #D5D8DD */
	--eg-paper:          var(--global-palette8); /* #F7F8FA */
	--eg-white:          var(--global-palette9); /* #FFFFFF */

	/* Accent for text, numbers and lines on the dark background (purple is too dark to read there). */
	--eg-lav: #cbb8ee;

	/* Glow violet from the client's comp (sampled ~#9351FA, nudged lighter for margin):
	   5.2:1 on the page background, 4.9:1 on the closing band. Not for text on the hero
	   or band backgrounds, and never white text on it (3.8:1); use dark text instead. */
	--eg-glow: #9d61fa;
	--eg-glow-soft: rgb(157 97 250 / 0.45);

	/* Aptos Narrow pending licensed webfont files; Archivo Narrow is the fallback. */
	--eg-font: "Aptos Narrow", "Archivo Narrow", sans-serif;
}

/* ==========================================================================
   Text utilities (add under Advanced > Additional CSS class)
   ========================================================================== */

/* Small label above a heading. Use on a Paragraph block, never a Heading. */
.eg-eyebrow {
	display: block;
	margin: 0 0 20px;
	color: var(--eg-lav);
	font-size: 0.75rem;
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Section number ("01") beside or above a section heading. Paragraph block. */
.eg-section-no {
	margin: 0;
	color: var(--eg-lav);
	font-size: 0.75rem;
	line-height: 1.5;
}

/* ==========================================================================
   Content spacing
   Kadence's .single-content rules give every heading 1.5em top margin and
   every paragraph --global-md-spacing bottom margin. These tighten the
   label -> heading -> copy stack and trim edges inside columns/groups.
   ========================================================================== */
.single-content .eg-eyebrow {
	margin: 0 0 20px;
}

.single-content .eg-section-no {
	margin: 0 0 12px;
}

.single-content :is(.eg-eyebrow, .eg-section-no) + :is(h1, h2, h3, h4) {
	margin-top: 0;
}

.single-content :is(.kt-inside-inner-col, .wp-block-group__inner-container, .wp-block-group, .wp-block-column) > :first-child {
	margin-top: 0;
}

.single-content :is(.kt-inside-inner-col, .wp-block-group__inner-container, .wp-block-group, .wp-block-column) > :last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Layout: match the wireframe's gutters and breakpoints (900 / 600 / 360)
   ========================================================================== */

/* Side padding scales 24px -> 80px with the viewport, 20px on phones.
   Overrides the Customizer "Content Edge Spacing" value. */
:root {
	--global-content-edge-padding: clamp(24px, 5vw, 80px);
}

@media (max-width: 600px) {
	:root {
		--global-content-edge-padding: 20px;
	}
}

/* Row Layouts: stack columns at 600px (deck) instead of Kadence's 767px.
   Add class "eg-stack-600" to the Row Layout and set its Mobile Layout to "Inherit". */
@media (max-width: 600px) {
	.eg-stack-600 > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 20px;
	}
}

/* ==========================================================================
   Content type scale (from the wireframe)
   ========================================================================== */
.single-content h2 {
	font-size: clamp(1.5rem, 2.2vw, 2.3rem);
	font-weight: 500;
	line-height: 1.16;
	text-wrap: balance;
}

/* Left column beside a form: keeps copy to a readable width.
   Add class "eg-form-intro" to the Kadence column. */
.eg-form-intro p {
	max-width: 45ch;
}

/* Notice paragraph (sensitive-information notice, disclaimers). */
.single-content .eg-form-notice {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--eg-line);
	color: var(--eg-charcoal);
	font-size: 1rem;
	line-height: 1.5;
}

/* Section number sits beside its heading, baseline-aligned (wireframe .section-title).
   Applies automatically when a Paragraph with "eg-section-no" is directly followed by an H2/H3. */
.single-content :is(.kt-inside-inner-col, .wp-block-group__inner-container, .wp-block-group):has(> .eg-section-no + :is(h2, h3)) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 24px;
	align-items: baseline;
	align-content: start;
}

.single-content :is(.kt-inside-inner-col, .wp-block-group__inner-container, .wp-block-group):has(> .eg-section-no + :is(h2, h3)) > * {
	grid-column: 1 / -1;
}

.single-content :is(.kt-inside-inner-col, .wp-block-group__inner-container, .wp-block-group):has(> .eg-section-no + :is(h2, h3)) > :is(.eg-section-no, .eg-section-no + h2, .eg-section-no + h3) {
	grid-column: auto;
	margin-bottom: 0;
}

@media (max-width: 600px) {
	.single-content :is(.kt-inside-inner-col, .wp-block-group__inner-container, .wp-block-group):has(> .eg-section-no + :is(h2, h3)) {
		column-gap: 16px;
	}
}

/* ==========================================================================
   Buttons: one style everywhere (core Button, Kadence Advanced Button)
   Violet outline (default and Outline style look the same), square, arrow at the end.
   Add "eg-no-arrow" to drop the arrow.
   Outline (core Button "Outline" style, or Kadence Advanced Button
   style "Outline") = transparent with a dark purple border.
   ========================================================================== */
.single-content :is(.wp-block-button .wp-block-button__link, .wp-block-kadence-advancedbtn .kb-button) {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 36px;
	min-height: 46px;
	padding: 10px 20px;
	border: 1px solid var(--eg-glow);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--eg-black); /* white text; arrow follows the text (currentColor). Border carries the color. */
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.single-content :is(.wp-block-button .wp-block-button__link, .wp-block-kadence-advancedbtn .kb-button):is(:hover, :focus-visible) {
	background: var(--eg-glow);
	border-color: var(--eg-glow);
	box-shadow: 0 0 24px var(--eg-glow-soft);
	color: #08090e; /* dark text: 5.2:1 on the violet */
}

.single-content :is(.wp-block-button.is-style-outline .wp-block-button__link, .wp-block-kadence-advancedbtn .kb-button.kb-btn-global-outline) {
	background: transparent;
	border-color: var(--eg-glow); /* violet outline */
	color: var(--eg-black); /* white text and arrow */
}

.single-content :is(.wp-block-button.is-style-outline .wp-block-button__link, .wp-block-kadence-advancedbtn .kb-button.kb-btn-global-outline):is(:hover, :focus-visible) {
	background: var(--eg-glow);
	border-color: var(--eg-glow);
	box-shadow: 0 0 24px var(--eg-glow-soft);
	color: #08090e; /* dark text: 5.2:1 on the violet (white would be 3.8:1) */
}

/* Visited buttons stay white. Kadence's :visited rules (outline buttons especially)
   outrank the rules above and turn the text violet after a page has been visited. */
.single-content :is(.wp-block-button .wp-block-button__link, .wp-block-button.is-style-outline .wp-block-button__link, .wp-block-kadence-advancedbtn .kb-button):visited:not(:hover, :focus-visible) {
	background: transparent;
	color: var(--eg-black);
}

.single-content :is(.wp-block-button:not(.eg-no-arrow) .wp-block-button__link, .wp-block-kadence-advancedbtn:not(.eg-no-arrow) .kb-button)::after {
	content: "";
	flex-shrink: 0;
	width: 0.8em;
	height: 0.8em;
	margin: 0;
	background-color: currentColor;
	-webkit-mask: var(--eg-arrow-icon) center / contain no-repeat;
	mask: var(--eg-arrow-icon) center / contain no-repeat;
	transition: transform 0.2s ease;
}

.single-content :is(.wp-block-button .wp-block-button__link, .wp-block-kadence-advancedbtn .kb-button):is(:hover, :focus-visible)::after {
	transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
	.single-content :is(.wp-block-button .wp-block-button__link, .wp-block-kadence-advancedbtn .kb-button),
	.single-content :is(.wp-block-button .wp-block-button__link, .wp-block-kadence-advancedbtn .kb-button)::after {
		transition: none;
	}
}