/*
Theme Name:   FlexSite - Viewpoint Management (Service Variant Demo)
Theme URI:    https://viewpointmanagement.com
Description:  FlexSite branded for Viewpoint Management LLC as a live demo of the Service-Based B2B/B2C variant: a palette sampled directly from the real viewpointmanagement.com site (Ink Navy / Midnight / Crimson / Deep Crimson / Steel Blue / Mist Blue / Warm Ivory / Slate Gray), Inter type, real service copy and the 5-credential showcase (MBE, PMP, DASM, Security+, SSCP). Forked from the generic FlexSite template -- the sellable master theme is untouched.
Author:       Viewpoint Management LLC
Author URI:   https://viewpointmanagement.com
Template:     kadence
Version:      1.0.7
Text Domain:  flexsite
*/

/* =========================================================
   FlexSite Child Theme Stylesheet
   This file only holds structural / section styling -- no
   hex colors anywhere below. Every color is a
   var(--wp--preset--color--*) custom property. Those
   variables are defined in exactly one place, theme.json's
   settings.color.palette -- and, as a guaranteed fallback in
   case a given WordPress/Kadence install doesn't reliably
   generate them itself, functions.php also defines them
   directly at :root from that same theme.json data (see
   flexsite_css_custom_properties()). Either way there is
   nowhere here that can drift out of sync with the brand
   palette, and deliberately no fallback hex on any var() call
   -- a missing/renamed slug should be obvious (nothing
   renders) rather than silently falling back to a stale guess.
   ========================================================= */

/* ---- Section rhythm: every section sits flush against its neighbors
   (zero margin -- backgrounds touch directly, no gap/seam of the page's
   base color showing through between them) and is told apart purely by
   which of the two light background tones it carries, assigned so no
   two adjacent sections ever share the same one (see the design table
   in patterns/patterns.php's file header). Padding is INSIDE each
   section only, for breathing room around its own content. ---- */
.flex-section {
	margin: 0;
	padding-top: clamp(28px, 4vw, 56px);
	padding-bottom: clamp(28px, 4vw, 56px);
}
/* Defensive reset: neither WordPress core nor Kadence should be adding
   margin around these Group blocks, but if either ever does, it would
   reintroduce exactly the "gap between sections" problem this is meant
   to prevent -- so it's pinned to zero explicitly rather than assumed. */
.entry-content > .flex-section,
.wp-block-post-content > .flex-section {
	margin-block: 0 !important;
}

.flex-section.bg-cream { background-color: var(--wp--preset--color--cream); }
.flex-section.bg-ink { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); }
.flex-section.bg-ink h1, .flex-section.bg-ink h2, .flex-section.bg-ink h3 { color: var(--wp--preset--color--cream); }
.flex-section.bg-taupe-tint { background-color: var(--wp--preset--color--taupe-light); }

/* ---- Simple, dependency-free card look for infobox / column cards ---- */
.flex-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--taupe);
	border-radius: 10px;
	padding: 20px;
}

/* ---- Eyebrow label used above section headings ---- */
.flex-eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--terracotta);
	margin-bottom: 8px;
}

/* ---- Stats numbers ---- */
.flex-stat-number {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	color: var(--wp--preset--color--terracotta);
	line-height: 1;
	display: block;
}

/* ---- Accessibility: visible focus states (WCAG) ---- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 3px solid var(--wp--preset--color--terracotta);
	outline-offset: 2px;
}

/* ---- Button hover: deepen to Deep Crimson rather than just fading ---- */
.wp-block-button__link:hover,
.wp-block-button__link:focus {
	background-color: var(--wp--preset--color--terracotta-dark) !important;
}

/* ---- Force core Gutenberg's own "has-{slug}-color" utility classes to
   win over the parent theme's base block styling. WordPress is meant to
   generate these rules itself from theme.json, but on at least one real
   install it wasn't reliably doing so and Kadence's own default colors
   (e.g. its own blue) were winning instead. Only the three slugs actually
   used via a block's color attribute in patterns/patterns.php need this
   (grep for backgroundColor/textColor there before adding another) --
   every value below is still a var() reference, never a literal hex. ---- */
.has-cream-background-color { background-color: var(--wp--preset--color--cream) !important; }
.has-cream-color { color: var(--wp--preset--color--cream) !important; }
.has-terracotta-background-color { background-color: var(--wp--preset--color--terracotta) !important; }
.has-taupe-color { color: var(--wp--preset--color--taupe) !important; }

/* ---- Elements that carry no explicit color attribute of their own --
   e.g. the "is-style-outline" button variant, and plain links inside
   paragraphs -- otherwise inherit the PARENT THEME's own default accent
   color (Kadence ships its own teal/blue by default) instead of ours.
   Setting them explicitly here, rather than leaving them to inherit,
   is what actually stops off-palette colors from showing through. ---- */
a { color: var(--wp--preset--color--terracotta); }
.wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--terracotta) !important;
	border-color: var(--wp--preset--color--terracotta) !important;
	background: none !important;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
	color: var(--wp--preset--color--white) !important;
	background: var(--wp--preset--color--terracotta) !important;
}

/* ---- Section visibility toggle hooks are injected inline by inc/customizer.php ---- */