/*
Theme Name: West Financial Services
Theme URI: https://westfinancialservicesllc.com
Description: Child theme for West Financial Services LLC. All design tokens live in theme.json; this file holds only what theme.json cannot express. Never edit the parent theme.
Author: West Financial Services LLC
Template: twentytwentyfive
Version: 1.0.19
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wfs-child
*/

/* -------------------------------------------------------------------------
   1. Parent-theme compatibility aliases

   Twenty Twenty-Five's own styles reference a few colour tokens from its
   palette that this child theme replaces. Aliasing them keeps any leftover
   parent rule rendering in brand colours instead of falling back to nothing.
   ------------------------------------------------------------------------- */

:root {
	--wp--preset--color--contrast: var( --wp--preset--color--ink );
	--wp--preset--color--accent-4: var( --wp--preset--color--accent );
	--wp--preset--color--accent-6: var( --wp--preset--color--primary );
}

/* -------------------------------------------------------------------------
   2. Button style variations

   Registered in functions.php. theme.json can only style block variations
   that core registers, so custom ones are styled here.
   ------------------------------------------------------------------------- */

/* Gold — the secondary CTA. Gold text on a light background fails contrast,
   so gold is only ever used as a background behind near-black text. */
.wp-block-button.is-style-wfs-gold > .wp-block-button__link {
	background-color: var( --wp--preset--color--accent );
	border-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--ink );
}

.wp-block-button.is-style-wfs-gold > .wp-block-button__link:hover,
.wp-block-button.is-style-wfs-gold > .wp-block-button__link:focus,
.wp-block-button.is-style-wfs-gold > .wp-block-button__link:active {
	background-color: #b8831c;
	border-color: #b8831c;
	color: var( --wp--preset--color--ink );
}

/* Ghost on dark — for buttons sitting on a primary-green band. */
.wp-block-button.is-style-wfs-ghost-light > .wp-block-button__link {
	background-color: transparent;
	border-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--base );
}

.wp-block-button.is-style-wfs-ghost-light > .wp-block-button__link:hover,
.wp-block-button.is-style-wfs-ghost-light > .wp-block-button__link:focus,
.wp-block-button.is-style-wfs-ghost-light > .wp-block-button__link:active {
	background-color: var( --wp--preset--color--base );
	border-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--primary );
}

/* -------------------------------------------------------------------------
   3. Sections on a dark background

   Any group with the primary or primary-dark background flips its headings,
   text and links to white so contrast holds without per-block overrides.
   ------------------------------------------------------------------------- */

.has-primary-background-color,
.has-primary-dark-background-color {
	color: var( --wp--preset--color--base );
}

.has-primary-background-color :where( h1, h2, h3, h4, h5, h6 ),
.has-primary-dark-background-color :where( h1, h2, h3, h4, h5, h6 ) {
	color: var( --wp--preset--color--base );
}

.has-primary-background-color :where( a:not(.wp-element-button) ),
.has-primary-dark-background-color :where( a:not(.wp-element-button) ) {
	color: var( --wp--preset--color--base );
}

.has-primary-background-color :where( a:not(.wp-element-button) ):hover,
.has-primary-dark-background-color :where( a:not(.wp-element-button) ):hover {
	color: var( --wp--preset--color--accent );
}

/* On dark green, gold clears 3:1 — fine for large display type, never body. */
.has-primary-background-color .has-accent-color,
.has-primary-dark-background-color .has-accent-color {
	color: var( --wp--preset--color--accent );
}

/* Cover blocks (photo bands with the dark overlay) count as dark sections
   too: flip links to white so they don't disappear into the photo. */
.wp-block-cover :where( a:not(.wp-element-button) ) {
	color: var( --wp--preset--color--base );
}

.wp-block-cover :where( a:not(.wp-element-button) ):hover {
	color: var( --wp--preset--color--accent );
}

.wp-block-cover :where( h1, h2, h3, h4, h5, h6 ) {
	color: var( --wp--preset--color--base );
}

/* -------------------------------------------------------------------------
   3b. Header dropdown panels

   The Services and Resources submenus: white card with a soft shadow,
   roomy tap targets, no underline noise.
   ------------------------------------------------------------------------- */

.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--surface );
	border-radius: 8px;
	box-shadow: var( --wp--preset--shadow--lifted, 0 12px 32px rgba(23,53,46,0.14) );
	min-width: 15rem;
	padding: 0.5rem 0;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1.25rem;
}

.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var( --wp--preset--color--surface );
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   3c. Jobber-inspired elements (2026-10-06)

   Header phone, pricing checklists and badge, service-card outcome eyebrows.
   ------------------------------------------------------------------------- */

.wfs-header-phone {
	margin: 0;
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 600;
	white-space: nowrap;
}

.wfs-header-phone a {
	color: var( --wp--preset--color--primary );
	text-decoration: none;
}

.wfs-header-phone a:hover {
	text-decoration: underline;
}

ul.wfs-checklist {
	list-style: none;
	padding-left: 0;
	margin-top: 0.75rem;
}

ul.wfs-checklist li {
	position: relative;
	padding-left: 1.6rem;
}

ul.wfs-checklist li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var( --wp--preset--color--primary );
	font-weight: 700;
}

.wfs-tier-badge {
	display: inline-block;
	margin: 0 0 0.5rem;
	padding: 0.2rem 0.9rem;
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--ink );
	border-radius: 999px;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wfs-card-eyebrow {
	margin: 0 0 0.25rem;
	color: var( --wp--preset--color--primary );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   4. Focus visibility

   A single, obvious focus ring everywhere. Gold on white is too low-contrast
   to read as text but works as a 3px ring paired with a dark outer edge.
   ------------------------------------------------------------------------- */

:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: 3px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
	border-radius: 3px;
}

/* -------------------------------------------------------------------------
   5. Forms

   16px minimum on inputs stops iOS Safari zooming the page on focus.
   ------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
select,
textarea {
	font-family: inherit;
	font-size: max( 1rem, 1.0625rem );
	line-height: 1.5;
	padding: 0.75rem 0.9rem;
	border: 1px solid #8a9a92;
	border-radius: 6px;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--ink );
	width: 100%;
	max-width: 100%;
}

label {
	font-weight: 600;
	display: inline-block;
	margin-bottom: 0.35rem;
}

/* -------------------------------------------------------------------------
   6. Image placeholders

   The brief calls for labelled placeholders rather than sourced or generated
   imagery. Wrap a paragraph in a group with the class below and write the
   one-line description of what belongs there as the paragraph text.
   ------------------------------------------------------------------------- */

.wfs-image-placeholder,
.wfs-content-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 16rem;
	padding: var( --wp--preset--spacing--50 );
	background-color: var( --wp--preset--color--surface );
	border: 2px dashed #8a9a92;
	border-radius: 8px;
	color: var( --wp--preset--color--muted );
	font-size: var( --wp--preset--font-size--small );
}

.wfs-image-placeholder p,
.wfs-content-placeholder p {
	margin: 0;
}

.wfs-image-placeholder::before {
	content: "IMAGE — ";
	font-weight: 600;
	letter-spacing: 0.08em;
}

/* -------------------------------------------------------------------------
   7. Readability details for the audience

   Phone-first, often outdoors, often over 40. Slightly looser body leading is
   already set in theme.json; these stop long words breaking the layout and
   keep list spacing from collapsing.
   ------------------------------------------------------------------------- */

body {
	overflow-wrap: break-word;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

:where( .entry-content ) li + li {
	margin-top: 0.5rem;
}

@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Pricing grid: equal-height cards with the call-to-action pinned to the
   bottom, so all three buttons sit on one line (owner request 2026-10-12). */
.wfs-pricing-grid > .wp-block-group {
	display: flex;
	flex-direction: column;
}

.wfs-pricing-grid > .wp-block-group > .wp-block-buttons {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--40);
}