/*
Theme Name: Cameron and Franklin Child
Theme URI: https://cameronandfranklin.com
Description: Custom child theme for Cameron and Franklin (RIA Bookkeeping), built on Hello Elementor. v1.2.0 rebuilds the design system on Ana's June 2026 redesign (Montserrat, #0277B8 primary, asymmetric 35px cards). Developed by Ypsilon Digital.
Author: Ypsilon Digital
Author URI: https://ypsilon.digital
Template: hello-elementor
Version: 1.2.2
Text Domain: cameron-franklin-child
*/

/* =========================================================================
 * BRAND TOKENS — Ana's style guide (Cameron and Franklin - Guia de Estilo,
 * June 2026). Most colour + typography work is done in Elementor Site
 * Settings (the Kit); these variables keep any hand-rolled CSS in sync.
 *
 * Palette swatches: #1A1A1A · #FFFFFF · #0277B8 · #1B314F · #3E3E53
 * Dotted texture colour: #E3E3E3 @ 40% opacity.
 * Type: Montserrat only — Extra Bold (800) headings, Regular (400) body.
 * Cards: 35px radius on TOP-RIGHT + BOTTOM-LEFT corners (asymmetric).
 * Buttons: pill (radius 25px+), 230×50 baseline, black hover state.
 * ========================================================================= */
:root {
	--cf-blue:    #0277B8;   /* PRIMARY brand */
	--cf-navy:    #1B314F;   /* secondary / deep */
	--cf-slate:   #3E3E53;   /* body / paragraph text */
	--cf-ink:     #1A1A1A;   /* near-black: dark sections, headings, button hover */
	--cf-paper:   #FFFFFF;   /* default background */
	--cf-dot:     #E3E3E3;   /* dotted texture */
	--cf-rule:    #E5E7EB;   /* hairline dividers */

	/* Single typeface — Montserrat. ExtraBold for display, Regular for body. */
	--cf-font:           'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--cf-weight-heading: 800;
	--cf-weight-body:    400;

	--cf-radius-card: 35px;  /* asymmetric card corner radius (TR + BL) */
	--cf-radius-pill: 999px;
	--cf-radius-sm:   8px;

	--cf-shadow-card:       0 4px 18px rgba(27, 49, 79, 0.10);
	--cf-shadow-card-hover: 0 10px 36px rgba(27, 49, 79, 0.20);

	--cf-btn-min-w: 230px;
}

/* =========================================================================
 * 1. GLOBAL TYPOGRAPHY — Montserrat everywhere; Extra Bold headings.
 *    Body-prefix + !important to win against Elementor's Kit stylesheet
 *    until the Kit's Site Settings are re-pointed to Montserrat (Phase 3
 *    task — Elementor → Site Settings → Typography).
 * ========================================================================= */
body,
body p,
body li,
body input,
body textarea,
body select,
body button,
body .elementor-widget-text-editor,
body .elementor-widget-icon-list,
body .elementor-button {
	font-family: var(--cf-font);
	font-weight: var(--cf-weight-body);
	color: var(--cf-slate);
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .elementor-heading-title,
body .elementor-widget-heading .elementor-heading-title,
body .e-con .elementor-heading-title {
	font-family: var(--cf-font);
	font-weight: var(--cf-weight-heading);
	color: var(--cf-ink);
	letter-spacing: -0.01em;
}

/* Higher-specificity override — Elementor emits per-widget rules and the Kit
   points typography at --e-global-typography-* vars. !important + the
   .elementor-page chain wins those battles. */
body.elementor-page h1,
body.elementor-page h2,
body.elementor-page h3,
body.elementor-page h4,
body.elementor-page h5,
body.elementor-page h6,
body.elementor-page .elementor-heading-title,
body.elementor-page .elementor-element .elementor-heading-title {
	font-family: var(--cf-font) !important;
	font-weight: var(--cf-weight-heading) !important;
}

/* Force the Kit's CSS custom properties onto Montserrat so any widget reading
   var(--e-global-typography-*-font-family) lands on Montserrat. */
:root,
.elementor-kit-14,
body.elementor-page {
	--e-global-typography-primary-font-family:   'Montserrat';
	--e-global-typography-secondary-font-family: 'Montserrat';
	--e-global-typography-text-font-family:      'Montserrat';
	--e-global-typography-accent-font-family:    'Montserrat';
	--e-global-typography-primary-font-weight:   800;
	--e-global-typography-secondary-font-weight: 800;
}

/* =========================================================================
 * 2. BUTTONS — pill, 230×50 baseline, black hover. Use the .cf-btn utilities
 *    on native Elementor button/link widgets (Advanced > CSS Classes), or
 *    rely on the card-scoped button classes below. Final per-section button
 *    placement happens in Phase 4.
 * ========================================================================= */
.cf-btn,
body .cf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--cf-btn-min-w);
	min-height: 50px;
	padding: 12px 32px;
	border-radius: var(--cf-radius-pill);
	border: 2px solid transparent;
	font-family: var(--cf-font);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1.1;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

/* Primary — blue fill, white text → black on hover */
.cf-btn--primary,
body .cf-btn--primary {
	background: var(--cf-blue);
	color: var(--cf-paper);
	border-color: var(--cf-blue);
}
.cf-btn--primary:hover,
body .cf-btn--primary:hover {
	background: var(--cf-ink);
	border-color: var(--cf-ink);
	color: var(--cf-paper);
	transform: translateY(-1px);
}

/* Navy — deep fill → black on hover */
.cf-btn--navy,
body .cf-btn--navy {
	background: var(--cf-navy);
	color: var(--cf-paper);
	border-color: var(--cf-navy);
}
.cf-btn--navy:hover,
body .cf-btn--navy:hover {
	background: var(--cf-ink);
	border-color: var(--cf-ink);
	color: var(--cf-paper);
}

/* Ghost / "What's included" — black fill, white text → white fill, black
   border + text on hover (per style guide). */
.cf-btn--ghost,
body .cf-btn--ghost {
	background: var(--cf-ink);
	color: var(--cf-paper);
	border-color: var(--cf-ink);
}
.cf-btn--ghost:hover,
body .cf-btn--ghost:hover {
	background: var(--cf-paper);
	color: var(--cf-ink);
	border-color: var(--cf-ink);
}

/* =========================================================================
 * 3. CARDS — Pricing / Add-On / Services share one visual language.
 *    Blue (#0277B8) surface, white text, asymmetric 35px corners on the
 *    TOP-RIGHT + BOTTOM-LEFT (Ana's spec). Icon circles come pre-rendered
 *    inside Ana's icon SVGs, so the icon slot only sizes + centres them
 *    (no synthetic gradient, no invert filter).
 *
 *    .cf-service-* classes are emitted by the cf_services_masonry widget
 *    (kept available for the Pricing section in Phase 4).
 * ========================================================================= */
body .cf-service-card,
body .cf-pricing-card,
body .cf-addon-card {
	display: flex;
	flex-direction: column;
	background: var(--cf-blue);
	color: var(--cf-paper);
	padding: 40px 36px;
	border-top-left-radius: 0;
	border-top-right-radius: var(--cf-radius-card);
	border-bottom-right-radius: 0;
	border-bottom-left-radius: var(--cf-radius-card);
	box-shadow: var(--cf-shadow-card);
	overflow: hidden;
}

body .cf-service-card h1, body .cf-service-card h2, body .cf-service-card h3, body .cf-service-card h4, body .cf-service-card p, body .cf-service-card li,
body .cf-pricing-card h1, body .cf-pricing-card h2, body .cf-pricing-card h3, body .cf-pricing-card h4, body .cf-pricing-card p, body .cf-pricing-card li,
body .cf-addon-card h1, body .cf-addon-card h2, body .cf-addon-card h3, body .cf-addon-card h4, body .cf-addon-card p, body .cf-addon-card li,
body .cf-service-card .elementor-heading-title,
body .cf-pricing-card .elementor-heading-title,
body .cf-addon-card .elementor-heading-title {
	color: var(--cf-paper);
}

/* Icon slot — Ana's icon SVG already contains the gradient sphere. */
body .cf-service-icon,
body .cf-card-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 90px;
	margin: 0 0 20px;
}
body .cf-service-icon img,
body .cf-service-icon svg,
body .cf-card-icon img,
body .cf-card-icon svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Card text rhythm */
body .cf-service-title,
body .cf-pricing-title {
	font-family: var(--cf-font);
	font-weight: var(--cf-weight-heading);
	font-size: 30px;
	line-height: 1.05;
	margin: 0 0 6px;
}
body .cf-service-price,
body .cf-pricing-price {
	font-family: var(--cf-font);
	font-weight: var(--cf-weight-heading);
	font-size: clamp(28px, 3.5vw, 40px);
	line-height: 1;
	margin: 0 0 6px;
}
body .cf-service-subtitle,
body .cf-pricing-tagline {
	font-size: 14px;
	font-style: italic;
	opacity: 0.9;
	margin: 0 0 16px;
}
body .cf-service-description {
	font-size: 16px;
	line-height: 1.6;
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.92);
}
body .cf-service-bullets,
body .cf-pricing-card ul {
	list-style: disc;
	padding-left: 22px;
	margin: 4px 0 20px;
	color: rgba(255, 255, 255, 0.95);
}
body .cf-service-bullets li,
body .cf-pricing-card ul li {
	font-size: 15px;
	line-height: 1.5;
	padding: 3px 0;
}
body .cf-service-bullets li::marker,
body .cf-pricing-card ul li::marker {
	color: var(--cf-paper);
}

/* Card button stack — pushed to the card foot so CTAs bottom-align. */
body .cf-service-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	width: 100%;
}

/* In-card primary CTA (dark pill on the blue card) → inverts on hover. */
body .cf-service-button,
body .cf-pricing-card .cf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	background: var(--cf-ink);
	color: var(--cf-paper);
	border: 2px solid var(--cf-ink);
	border-radius: var(--cf-radius-pill);
	font-family: var(--cf-font);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	transition: background 200ms ease, color 200ms ease, transform 200ms ease;
	cursor: pointer;
}
body .cf-service-button:hover {
	background: var(--cf-paper);
	color: var(--cf-ink);
	transform: translateY(-1px);
}

/* Secondary / "What's included" — outline pill above the primary CTA. */
body .cf-service-button-secondary,
body .cf-whats-included,
body a.cf-whats-included {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: auto;
	padding: 9px 22px;
	background: transparent;
	color: var(--cf-paper);
	border: 1px solid var(--cf-paper);
	border-radius: var(--cf-radius-pill);
	font-family: var(--cf-font);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.2;
	transition: background 200ms ease, color 200ms ease, transform 200ms ease;
	cursor: pointer;
}
body .cf-service-button-secondary:hover,
body .cf-whats-included:hover,
body a.cf-whats-included:hover {
	background: var(--cf-paper);
	color: var(--cf-blue);
	transform: translateY(-1px);
}

/* Reveal primitive used by the cf_services_masonry widget JS (kept so the
   widget still animates if used in Phase 4). */
.cf-reveal-left {
	opacity: 0;
	transform: translateX(-48px);
	transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--cf-reveal-delay, 0ms);
}
.cf-reveal-left.cf-revealed {
	opacity: 1;
	transform: translateX(0);
}

/* =========================================================================
 * 4. SECTION COLOUR HELPERS — alternating dark / light backgrounds.
 *    Dark = #1A1A1A (ink). The dotted-texture decoration is now a real
 *    asset (Ana's desktop/tablet/mobile pattern SVGs) placed via Elementor
 *    in Phase 4 — no synthetic radial-gradient dots here anymore.
 * ========================================================================= */
body .cf-section--dark {
	background-color: var(--cf-ink);
	color: var(--cf-paper);
}
body .cf-section--dark h1,
body .cf-section--dark h2,
body .cf-section--dark h3,
body .cf-section--dark h4,
body .cf-section--dark p,
body .cf-section--dark li {
	color: var(--cf-paper);
}
body .cf-section--light {
	background-color: var(--cf-paper);
	color: var(--cf-slate);
}
body .cf-section--light h1,
body .cf-section--light h2,
body .cf-section--light h3,
body .cf-section--light h4 {
	color: var(--cf-ink);
}

/* =========================================================================
 * 5. HEADER / NAVBAR
 *    - 80px tall header (Ana's compact header).
 *    - Logo sized to fit (header logo art is wide ~450×57).
 *    - "Free Consultation" menu item → pill button (celeste bg + white text;
 *      hover inverts to white bg + celeste text, matching the hero CTA).
 *    - Suppress the Elementor nav/button hover underline on any header
 *      button widget (lean replacement for the v1.1.x id-scoped block;
 *      header may be rebuilt in Phase 4, so this is class/location based).
 * ========================================================================= */
body .elementor-location-header > .elementor,
body .elementor-location-header .e-con,
body .elementor-location-header .elementor-section {
	min-height: 80px;
}

body .elementor-location-header .elementor-widget-image img,
body .elementor-location-header .elementor-widget-theme-site-logo img,
body.elementor-page .elementor-location-header img {
	max-height: 60px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
}

/* Free Consultation CTA — add class "cf-cta-button" to the menu item, or the
   rule auto-applies to a header link whose href contains "contact". */
body .elementor-location-header .menu-item.cf-cta-button > a,
body .elementor-location-header .menu-item:has(> a[href*="contact"]) > a {
	background: var(--cf-blue);
	color: var(--cf-paper) !important;
	padding: 12px 28px !important;
	border-radius: var(--cf-radius-pill);
	font-weight: 700;
	letter-spacing: 0.04em;
	transition: background-color 200ms ease, transform 200ms ease;
}
body .elementor-location-header .menu-item.cf-cta-button > a:hover,
body .elementor-location-header .menu-item.cf-cta-button > a:focus,
body .elementor-location-header .menu-item:has(> a[href*="contact"]) > a:hover,
body .elementor-location-header .menu-item:has(> a[href*="contact"]) > a:focus,
body .elementor-location-header .elementor-nav-menu a.elementor-item[href*="contact"]:hover,
body .elementor-location-header .elementor-nav-menu a.elementor-item[href*="contact"]:focus {
	background-color: var(--cf-paper) !important;   /* white */
	color: var(--cf-blue) !important;               /* celeste — was white-on-white (default link blue) */
	transform: translateY(-1px);
}

/* Kill the hover underline / pointer line on header button widgets + CTA. */
body .elementor-location-header .elementor-widget-button .elementor-button::before,
body .elementor-location-header .elementor-widget-button .elementor-button::after,
body .elementor-location-header .cf-cta-button > a::before,
body .elementor-location-header .cf-cta-button > a::after {
	display: none !important;
	content: none !important;
}
body .elementor-location-header .elementor-widget-button .elementor-button,
body .elementor-location-header .elementor-widget-button .elementor-button:hover,
body .elementor-location-header .cf-cta-button > a,
body .elementor-location-header .cf-cta-button > a:hover {
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}

/* =========================================================================
 * 6. FOOTER — dark (#1A1A1A) with stacked logo, nav links, contact items
 *    (free-consultation + email icons) and QuickBooks badges. Generic,
 *    class/location based — per-widget IDs are re-pointed in Phase 4 once
 *    Ana's footer is built.
 * ========================================================================= */
body .elementor-location-footer,
body footer.cf-footer {
	background: var(--cf-ink);
	color: var(--cf-paper);
	padding: 56px 0 32px;
}

body .elementor-location-footer a,
body .elementor-location-footer .menu-item a,
body .elementor-location-footer .elementor-item,
body .elementor-location-footer .elementor-icon-list-text {
	color: var(--cf-paper);
	text-decoration: none;
	transition: color 200ms ease;
}
body .elementor-location-footer a:hover,
body .elementor-location-footer .menu-item a:hover,
body .elementor-location-footer .elementor-item:hover,
body .elementor-location-footer .elementor-icon-list-text:hover {
	color: var(--cf-blue);
}

/* QuickBooks badge row sizing (Ana supplies a single combined badges SVG). */
body .elementor-location-footer .cf-footer-badges,
body .elementor-location-footer .cf-quickbooks-badges {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	flex-wrap: wrap;
}
body .elementor-location-footer .cf-footer-badges img,
body .elementor-location-footer .cf-quickbooks-badges img {
	max-height: 110px;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* =========================================================================
 * 7. GRAVITY FORMS — tighter vertical rhythm on the Orbital theme.
 *    Per feedback_gravity_forms_orbital_styling: do NOT touch
 *    grid-template-columns / .gfield--width-* — only spacing here. Input,
 *    label and button colours for the dark-photo Contact section are
 *    finalised in WP Customizer in Phase 4.
 * ========================================================================= */
body .gform_wrapper.gravity-theme,
body .gform_wrapper {
	--gform-theme-control-margin-bottom: 14px;
	--gf-ctrl-spacing-unit: 6px;
	--gform-theme-field-control-margin-bottom: 14px;
	--gform-theme-field-row-gap: 14px;
}
body .gform_wrapper .gform_fields,
body .gform_wrapper.gravity-theme .gform_fields {
	grid-row-gap: 14px;
	row-gap: 14px;
}
body .gform_wrapper .gfield,
body .gform_wrapper.gravity-theme .gfield {
	margin-bottom: 0;
	padding-bottom: 0;
}
body .gform_wrapper .gfield_label,
body .gform_wrapper.gravity-theme .gfield_label {
	margin-bottom: 4px;
	padding-bottom: 0;
	line-height: 1.3;
}
body .gform_wrapper .ginput_container,
body .gform_wrapper.gravity-theme .ginput_container {
	margin-top: 0;
	padding-top: 0;
}
body .gform_wrapper .gform_footer,
body .gform_wrapper.gravity-theme .gform_footer {
	margin-top: 16px;
	padding-top: 0;
}

/* =========================================================================
 * 8. MISC — selection colour + smooth anchor scrolling.
 * ========================================================================= */
::selection {
	background: var(--cf-blue);
	color: var(--cf-paper);
}
html {
	scroll-behavior: smooth;
}

/* =========================================================================
 * 9. RESPONSIVE
 *    Ana's decisions (2026-06-07): pricing/cards collapse to 1 column on
 *    tablet AND mobile. Dotted texture shows on all breakpoints (handled by
 *    the asset placement in Phase 4).
 * ========================================================================= */
@media (max-width: 1024px) {
	body .cf-pricing-grid,
	body .cf-addons-grid,
	body .cf-services-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Hero H1 — clamp so Ana's large desktop size (110px) doesn't overflow phones. */
@media (max-width: 768px) {
	body .cf-hero h1,
	body .cf-hero .elementor-heading-title {
		font-size: clamp(32px, 9vw, 60px) !important;
		line-height: 1.05;
	}
	body .elementor-location-footer,
	body footer.cf-footer {
		padding: 40px 20px 24px;
		text-align: center;
	}
	body .elementor-location-footer .cf-footer-badges,
	body .elementor-location-footer .cf-quickbooks-badges {
		justify-content: center;
	}
	/* Safety net against rogue horizontal scroll on phones. */
	html, body {
		overflow-x: hidden;
		max-width: 100vw;
	}
}

@media (max-width: 480px) {
	body .cf-service-card,
	body .cf-pricing-card,
	body .cf-addon-card {
		padding: 28px 22px;
	}
	body .elementor-location-footer .cf-footer-badges img,
	body .elementor-location-footer .cf-quickbooks-badges img {
		max-height: 80px;
	}
}