/*
Theme Name:   Jen Thompson Financials
Theme URI:    https://jenthompsonfinancials.com
Description:  Kadence child theme for Jen Thompson Financials. Holds the site's custom styles so Kadence updates never overwrite them.
Author:       90 Leads
Template:     kadence
Version:      1.0.0
Text Domain:  jtf-kadence-child
*/

/* ------------------------------------------------------------
   Brand tokens (match Kadence global palette)
   ------------------------------------------------------------ */
:root {
	--jtf-orange: #FFC067;  /* CTA buttons */
	--jtf-sky: #66C4FF;     /* icons, hover */
	--jtf-aqua: #66F4FF;    /* small accents only */
	--jtf-slate: #7D99AA;   /* borders, decorative */
	--jtf-navy: #1F3443;    /* text, headings */
	--jtf-body: #3D5566;    /* secondary text (readable on white) */
	--jtf-link: #0E5E94;    /* links */
	--jtf-offwhite: #F7FAFC;
	--jtf-pale: #E6F6FF;
	--jtf-radius: 22px;
}

/* ------------------------------------------------------------
   Buttons: pill shape, navy text on orange
   ------------------------------------------------------------ */
.wp-block-button__link,
.kb-button,
.button,
input[type="submit"],
button[type="submit"],
.ff-btn-submit {
	border-radius: 999px !important;
	font-weight: 700 !important;
	padding: 0.9em 1.75em;
	color: var(--jtf-navy) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.wp-block-button__link:hover,
.kb-button:hover,
.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.ff-btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(31, 52, 67, 0.15);
}

/* Outline button style (add class "is-style-outline" or use the Outline block style) */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent !important;
	border: 2px solid var(--jtf-navy) !important;
}

/* ------------------------------------------------------------
   Utility classes - add these under Advanced > Additional CSS class
   ------------------------------------------------------------ */

/* Small uppercase label above headings: "PART-TIME CFO FOR SMALL BUSINESSES" */
.jtf-eyebrow {
	display: inline-block;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jtf-link);
	margin-bottom: 12px;
}
.jtf-eyebrow.is-pill {
	background: var(--jtf-pale);
	padding: 8px 14px;
	border-radius: 999px;
}
.jtf-on-dark .jtf-eyebrow { color: var(--jtf-aqua); }

/* Aqua highlighter under a few words of a headline:
   select words in a heading > Highlight / Inline class "jtf-highlight" */
.jtf-highlight,
mark.jtf-highlight {
	background: linear-gradient(transparent 62%, var(--jtf-aqua) 62%);
	color: inherit;
	padding: 0;
}

/* Rounded white card (service cards, article cards) */
.jtf-card {
	background: #FFFFFF;
	border-radius: var(--jtf-radius);
	padding: 30px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}
.jtf-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(31, 52, 67, 0.12);
}
.jtf-card--soft { background: var(--jtf-offwhite); }

/* Square icon tile behind a service icon */
.jtf-icon-tile {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--jtf-sky);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.jtf-icon-tile.is-orange { background: var(--jtf-orange); }

/* Numbered step circles ("Getting started is easy") */
.jtf-step-number {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--jtf-orange);
	color: var(--jtf-navy);
	font-size: 26px;
	font-weight: 800;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 18px;
}

/* Navy section: text and links readable on dark */
.jtf-on-dark,
.jtf-on-dark h1, .jtf-on-dark h2, .jtf-on-dark h3, .jtf-on-dark h4 { color: #FFFFFF; }
.jtf-on-dark p, .jtf-on-dark li { color: #D6E2EA; }
.jtf-on-dark a:not(.wp-block-button__link):not(.kb-button) { color: var(--jtf-aqua); }

/* Checklist rows inside the navy CFO section */
.jtf-checklist { list-style: none; padding: 0; margin: 0; }
.jtf-checklist li {
	position: relative;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 16px;
	padding: 18px 20px 18px 54px;
	margin-bottom: 14px;
}
.jtf-checklist li::before {
	content: "";
	position: absolute;
	left: 20px;
	top: 22px;
	width: 20px;
	height: 20px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366F4FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* Rounded photo frames */
.jtf-photo img { border-radius: 32px; }
.jtf-photo-round img { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Floating white badge over the hero photo */
.jtf-float-card {
	background: #FFFFFF;
	border-radius: 20px;
	padding: 18px 22px;
	box-shadow: 0 18px 40px rgba(31, 52, 67, 0.14);
}

/* ------------------------------------------------------------
   Forms (Fluent Forms) - soft rounded inputs
   ------------------------------------------------------------ */
.fluentform .ff-el-form-control {
	border: 1.5px solid #B9CAD5;
	border-radius: 12px;
	padding: 13px 14px;
	font-size: 16px;
	color: var(--jtf-navy);
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--jtf-sky);
	box-shadow: 0 0 0 3px rgba(102, 196, 255, 0.35);
	outline: none;
}
.fluentform .ff-el-input--label label { font-weight: 700; font-size: 14px; }
.fluentform .ff-btn-submit {
	background-color: var(--jtf-orange) !important;
	border: none !important;
	width: 100%;
	font-size: 17px;
}

/* ------------------------------------------------------------
   Header CTA: give the last menu item the class "jtf-menu-cta"
   (Appearance > Menus > Screen Options > CSS Classes)
   ------------------------------------------------------------ */
.main-navigation .menu > li.jtf-menu-cta > a {
	background: var(--jtf-orange);
	color: var(--jtf-navy) !important;
	border-radius: 999px;
	padding: 0.7em 1.3em !important;
	font-weight: 700;
	margin-left: 8px;
}
.main-navigation .menu > li.jtf-menu-cta > a:hover {
	background: var(--jtf-sky);
}

/* ------------------------------------------------------------
   Keyboard focus visible everywhere
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--jtf-sky);
	outline-offset: 3px;
}