/*!
Theme Name: Doctors Own
Theme URI: https://www.kadencewp.com/kadence-theme/
Description: Kadence child theme for the Doctors Own website.
Author: Eugene Shatskih
Author URI: https://upwork.com/freelancers/eugeneshatskih
Template: kadence
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: doctors-own
*/

/* ── Doctors Own design tokens ──
   Core colors live in the Kadence global palette (--global-palette1..9).
   These are the extra brand tokens that do not fit the 9 palette slots. */
:root {
	--do-teal: #2B7A8C;
	--do-teal-deep: #1F5C6B;
	--do-gold: #C8A26A;
	--do-gold-deep: #A8835A;
	--do-sage-surface: #EFEFE7;
	--do-sage-tint: #E9EFE7;
	--do-cream-warm: #F4F0E6;
	--do-divider: #E8E8E5;
	--do-font-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--do-font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--do-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--do-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	/* FoodMD sub-brand */
	--fm-emerald: #10B981;
	--fm-emerald-deep: #047857;
	--fm-amber: #F9A825;
	--fm-ink: #0B1F18;
	--fm-slate: #4F665E;

	/* RGB channels for translucent layers — use as rgba(var(--token), alpha).
	   Mirror the plugin's shared _tokens.scss so theme and block CSS share one
	   palette. (Colors inside SVG data-URIs stay literal — var() can't resolve
	   inside a url() string.) */
	--do-green-rgb: 45, 106, 62;
	--do-green-deep-rgb: 35, 79, 47;
	--do-gold-rgb: 200, 162, 106;
	--do-ink-rgb: 31, 36, 32;
	--do-white-rgb: 255, 255, 255;
	--do-sun-rgb: 255, 235, 180;

	/* Content container — single source of truth for the width + side padding
	   shared by the page header, the footer and every content block, so they
	   all line up on one vertical edge. Aliased straight to Kadence's own
	   container tokens so we also match the site header (logo/menu) and any
	   Kadence-rendered content. The plugin block containers and
	   .do-header-container read these (see _tokens.scss do-container mixin). */
	--do-container-max: var(--global-content-width, 1240px);
	--do-container-pad: var(--global-content-edge-padding, 1.5rem);
}

/* Editorial heading tracking from the design system. */
h1, h2, h3, h4 {
	letter-spacing: -0.02em;
	font-feature-settings: "ss01", "liga";
}

::selection {
	background: rgba(var(--do-green-rgb), 0.18);
}

/* ── Header ── */

/* ── Primary navigation ──
   Ported from .primary-nav of the design system onto Kadence markup.
   Add the CSS classes `is-emphasized` (gold divider, e.g. "Your Health")
   or `is-foodmd` (emerald dot) to menu items in Appearance > Menus. */
.main-navigation .primary-menu-container > ul.menu {
	display: flex;
	align-items: center;
	gap: 4px;
}

.main-navigation .primary-menu-container > ul.menu > li.menu-item > a {
	position: relative;
	padding: 10px 14px;
	font-family: var(--do-font-sans);
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: 0.005em;
	color: var(--global-palette3);
	transition: color 140ms var(--do-ease-out);
}

.main-navigation .primary-menu-container > ul.menu > li.menu-item > a:hover {
	color: var(--global-palette2);
}

/* Current page: deep green + short green underline. */
.main-navigation .primary-menu-container > ul.menu > li.menu-item.current-menu-item > a,
.main-navigation .primary-menu-container > ul.menu > li.menu-item.current-menu-ancestor > a {
	color: var(--global-palette2);
}

.main-navigation .primary-menu-container > ul.menu > li.menu-item.current-menu-item > a::after,
.main-navigation .primary-menu-container > ul.menu > li.menu-item.current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	bottom: 2px;
	left: 14px;
	right: 14px;
	height: 1.5px;
	background: var(--global-palette1);
}

/* Emphasized item: gold divider on the right (design: "Your Health"). */
.main-navigation .primary-menu-container > ul.menu > li.menu-item.is-emphasized {
	margin-right: 12px;
}
.main-navigation .primary-menu-container > ul.menu > li.menu-item.is-emphasized > a {
	margin-right: 12px;
	padding: 10px 18px 10px 14px;
	border-right: 1.5px solid var(--do-gold);
	color: var(--global-palette2);
	font-weight: 600;
}

.main-navigation .primary-menu-container > ul.menu > li.menu-item.is-emphasized > a:hover {
	color: var(--global-palette1);
}

/* FoodMD item: emerald color with a leading dot. */
.main-navigation .primary-menu-container > ul.menu > li.menu-item.is-foodmd > a {
	color: var(--fm-emerald-deep);
	font-weight: 600;
}

.main-navigation .primary-menu-container > ul.menu > li.menu-item.is-foodmd > a::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--fm-emerald);
	margin-right: 7px;
	vertical-align: 1px;
}

/* Add custom styles below this line. */

/* Smooth in-page anchor scrolling — "Explore the Books", the hero scroll cue,
   the "The Books" nav item, and footer sitemap anchors. Honors reduced-motion.
   Anchor targets carry their own scroll-margin-top to clear the header
   (e.g. .wp-block-doctors-own-books). */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* The custom footer block is full-bleed and manages its own inner width
   (.do-footer-container); drop Kadence's container padding inside the footer. */
.site-footer .site-container {
	padding: 0;
}

/* On pages with our custom Page Header the content is editorial full-bleed, so
   strip Kadence's boxed-content chrome (body.content-style-boxed): the
   content-area top gap, the .single-content top margin (hardcoded in core, no
   Customizer control), the boxed content-wrap padding and the card shadow — so
   the full-width sections (header, intro, …) stack flush like the design.
   (Body flag from inc/page-header.php.) */
.has-do-page-header .content-area {
	margin-top: 0;
}

.has-do-page-header .single-content {
	margin-top: 0;
}

.has-do-page-header .entry-content-wrap {
	padding: 0;
}

.has-do-page-header .entry.single-entry {
	box-shadow: none;
}

/* When a page leads with one of our full-bleed Hero blocks (do-hero / fm-hero)
   instead of the custom Page Header, kill the .single-content top margin that
   Kadence hardcodes in core (no Customizer control) so the Hero sits flush at
   the top of the content area. */
.single-content:has(> .do-hero:first-child),
.single-content:has(> .fm-hero:first-child) {
	margin-top: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   PAGE HEADER — replaces Kadence's entry-hero on singular pages.
   Ported from the design system's section.page-header (page-header--forest):
   art-directed forest gradient, bokeh light dots, a faded botanical frond and
   a film-grain overlay, holding breadcrumb + eyebrow + title + gold rule + lede.
   Rendered by inc/page-header.php into the kadence_hero_header slot.
   ───────────────────────────────────────────────────────────────────────── */
.page-header.page-header--forest {
	position: relative;
	overflow: hidden;
	padding: 96px 0 104px;
	/* Kadence's generic .page-header adds margin-bottom: var(--global-lg-spacing);
	   our forest header sits flush, so cancel it (higher-specificity wins). */
	margin-bottom: 0;
	background:
		/* warm filtered sunlight upper right */
		radial-gradient(ellipse 55% 45% at 88% 12%, rgba(255, 232, 178, 0.32) 0%, transparent 60%),
		/* secondary warm pool middle */
		radial-gradient(ellipse 40% 30% at 25% 35%, rgba(255, 232, 178, 0.16) 0%, transparent 65%),
		/* darker pool lower-left (vignette) */
		radial-gradient(ellipse 60% 60% at 8% 95%, rgba(8, 28, 18, 0.55) 0%, transparent 60%),
		/* base gradient */
		linear-gradient(135deg, #2a6638 0%, #214d2f 35%, #1a4842 75%, #163d4a 100%);
	color: #fff;
	font-family: var(--do-font-sans);
}

@media (max-width: 768px) {
	.page-header.page-header--forest {
		padding: 72px 0 80px;
	}
}

/* Layer 1: bokeh light dots — soft, irregular. Hidden when a photo backs the header. */
.page-header.page-header--forest::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 78% 18%, rgba(var(--do-sun-rgb), 0.28) 0%, rgba(var(--do-sun-rgb), 0) 1.2%),
		radial-gradient(circle at 82% 8%, rgba(var(--do-sun-rgb), 0.2) 0%, rgba(var(--do-sun-rgb), 0) 0.9%),
		radial-gradient(circle at 92% 28%, rgba(var(--do-sun-rgb), 0.18) 0%, rgba(var(--do-sun-rgb), 0) 0.8%),
		radial-gradient(circle at 72% 38%, rgba(var(--do-sun-rgb), 0.14) 0%, rgba(var(--do-sun-rgb), 0) 0.7%),
		radial-gradient(circle at 88% 60%, rgba(var(--do-sun-rgb), 0.1) 0%, rgba(var(--do-sun-rgb), 0) 0.7%),
		radial-gradient(circle at 35% 12%, rgba(var(--do-sun-rgb), 0.14) 0%, rgba(var(--do-sun-rgb), 0) 0.8%),
		radial-gradient(circle at 50% 22%, rgba(var(--do-sun-rgb), 0.1) 0%, rgba(var(--do-sun-rgb), 0) 0.7%);
	background-size: 100% 100%;
	pointer-events: none;
}

/* Layer 2: large faded botanical foliage on the right side. */
.page-header.page-header--forest::after {
	content: "";
	position: absolute;
	top: -40px;
	right: -80px;
	width: 620px;
	height: 720px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'><g fill='rgba(15,40,28,0.40)' stroke='rgba(15,40,28,0.32)' stroke-width='0.5' stroke-linecap='round'><path d='M 80 118 C 78 96, 72 72, 64 50 C 56 30, 52 12, 52 0' fill='none' stroke='rgba(20,50,35,0.30)' stroke-width='0.6'/><ellipse cx='62' cy='105' rx='12' ry='4' transform='rotate(-30 62 105)'/><ellipse cx='72' cy='93' rx='12' ry='4' transform='rotate(20 72 93)'/><ellipse cx='56' cy='80' rx='11' ry='3.6' transform='rotate(-30 56 80)'/><ellipse cx='66' cy='66' rx='11' ry='3.6' transform='rotate(20 66 66)'/><ellipse cx='54' cy='52' rx='10' ry='3.4' transform='rotate(-30 54 52)'/><ellipse cx='60' cy='38' rx='9' ry='3.2' transform='rotate(20 60 38)'/><ellipse cx='52' cy='24' rx='8' ry='3.0' transform='rotate(-30 52 24)'/><ellipse cx='56' cy='12' rx='6' ry='2.4' transform='rotate(15 56 12)'/><path d='M 30 120 C 28 100, 22 78, 14 54 C 6 32, 2 14, 2 0' fill='none' stroke='rgba(20,50,35,0.18)' stroke-width='0.4'/><ellipse cx='14' cy='106' rx='9' ry='3' transform='rotate(-30 14 106)' fill='rgba(15,40,28,0.22)'/><ellipse cx='22' cy='92' rx='9' ry='3' transform='rotate(20 22 92)' fill='rgba(15,40,28,0.22)'/><ellipse cx='10' cy='78' rx='8' ry='2.6' transform='rotate(-30 10 78)' fill='rgba(15,40,28,0.22)'/><ellipse cx='16' cy='64' rx='8' ry='2.6' transform='rotate(20 16 64)' fill='rgba(15,40,28,0.22)'/><ellipse cx='8' cy='50' rx='7' ry='2.4' transform='rotate(-30 8 50)' fill='rgba(15,40,28,0.22)'/></g></svg>");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: right top;
	pointer-events: none;
	opacity: 0.85;
}

/* With a background photo the bokeh/grain read as noise; keep only the frond faint. */
.page-header--image::before {
	display: none;
}

.page-header--image::after {
	opacity: 0.4;
}

/* Container layer above the decorations (z-index plumbing). Width + side
   padding come from the shared :root container tokens. */
.page-header.page-header--forest .do-header-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--do-container-max, 1240px);
	margin-inline: auto;
	padding-inline: var(--do-container-pad, 20px);
}

/* Subtle film grain over the whole thing. */
.page-header.page-header--forest .do-header-container::before {
	content: "";
	position: absolute;
	inset: -120px -200px -200px -200px;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/></svg>");
	mix-blend-mode: overlay;
	opacity: 0.7;
	pointer-events: none;
	z-index: -1;
}

/* Breadcrumb. */
.page-header.page-header--forest .crumbs {
	font-family: var(--do-font-sans);
	font-size: 11.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(var(--do-white-rgb), 0.6);
	margin-bottom: 28px;
}

.page-header.page-header--forest .crumbs a {
	color: rgba(var(--do-white-rgb), 0.78);
	text-decoration: none;
	transition: color 160ms;
}

.page-header.page-header--forest .crumbs a:hover {
	color: #fff;
}

.page-header.page-header--forest .crumbs .sep {
	margin: 0 10px;
	color: rgba(var(--do-white-rgb), 0.3);
}

.page-header.page-header--forest .crumbs .here {
	color: rgba(var(--do-white-rgb), 0.96);
}

/* Eyebrow (gold on the dark field). */
.page-header.page-header--forest .eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--do-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	line-height: 1;
	color: rgba(var(--do-gold-rgb), 0.92);
	margin-bottom: 22px;
}

.page-header.page-header--forest .eyebrow::before {
	content: "";
	width: 28px;
	height: 1.5px;
	flex-shrink: 0;
	background: rgba(var(--do-gold-rgb), 0.8);
}

.page-header.page-header--forest .eyebrow::after {
	content: "";
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.45;
	flex-shrink: 0;
	margin-left: -6px;
}

/* Brand lockup eyebrow: stacked serif name + tracked tagline.
   Ported from .eyebrow-lockup in the design system (About header). */
.page-header.page-header--forest .eyebrow-lockup {
	display: inline-flex;
	flex-direction: column;
	gap: 5px;
	margin-bottom: 24px;
}

.page-header.page-header--forest .eyebrow-lockup .el-name {
	font-family: var(--do-font-serif);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
	color: rgba(var(--do-gold-rgb), 0.96);
}

.page-header.page-header--forest .eyebrow-lockup .el-name sup {
	font-size: 0.5em;
	position: relative;
	top: -0.7em;
}

.page-header.page-header--forest .eyebrow-lockup .el-tag {
	font-family: var(--do-font-sans);
	font-weight: 600;
	font-size: 10.5px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	line-height: 1;
	color: rgba(var(--do-white-rgb), 0.62);
}

/* Headline. */
.page-header.page-header--forest h1 {
	font-family: var(--do-font-serif);
	font-weight: 600;
	font-size: clamp(2.2rem, 4.5vw + 0.5rem, 3.6rem);
	line-height: 1.06;
	letter-spacing: -0.022em;
	color: #fff;
	max-width: 22ch;
	margin: 0;
}

.page-header.page-header--forest h1 em {
	font-style: italic;
	color: var(--do-gold);
	font-weight: 600;
}

/* Gold rule. */
.page-header.page-header--forest .gold-rule {
	width: 48px;
	height: 2px;
	background: var(--do-gold);
	opacity: 0.85;
	border-radius: 2px;
	margin: 22px 0 4px;
}

/* Lede / description. */
.page-header.page-header--forest .lede {
	margin-top: 24px;
	max-width: 55ch;
	font-family: var(--do-font-sans);
	font-size: clamp(15.5px, 0.9vw + 0.5rem, 17.5px);
	line-height: 1.65;
	color: rgba(var(--do-white-rgb), 0.82);
}

.page-header.page-header--forest .lede strong {
	font-weight: 600;
}

.page-header.page-header--forest .lede em {
	color: rgba(var(--do-white-rgb), 0.96);
	font-style: italic;
}

/* ── Fluent Forms — match the site's editorial form styling ───────────────
   Light-context forms (e.g. the Contact page): inputs adopt the design's
   input language and the submit button mirrors the block .btn.btn-primary
   (solid green fill, cream label). The footer newsletter form keeps its own
   dark treatment via its more specific block-scoped rules
   (.wp-block-doctors-own-footer .nl-form …), so these globals don't touch it.
   Core colors come from the Kadence global palette (--global-palette1..9). */
.frm-fluent-form .ff-el-group {
	margin-bottom: 20px;
}

.frm-fluent-form .ff-el-input--label label {
	display: inline-block;
	margin-bottom: 7px;
	font-family: var(--do-font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--global-palette3, #1f2420);
}

/* All inputs, textareas and selects share .ff-el-form-control. */
.frm-fluent-form .ff-el-form-control {
	width: 100%;
	box-sizing: border-box;
	background: var(--global-palette9, #ffffff);
	border: 1px solid var(--do-divider, #e8e8e5);
	border-radius: 8px;
	padding: 13px 16px;
	font-family: var(--do-font-sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--global-palette3, #1f2420);
	box-shadow: none;
	transition: border-color 180ms var(--do-ease-out),
		box-shadow 180ms var(--do-ease-out),
		background 180ms var(--do-ease-out);
}

.frm-fluent-form textarea.ff-el-form-control {
	min-height: 150px;
	resize: vertical;
}

.frm-fluent-form .ff-el-form-control::placeholder {
	color: rgba(var(--do-ink-rgb), 0.42);
}

.frm-fluent-form .ff-el-form-control:focus {
	outline: none;
	background: #ffffff;
	border-color: var(--global-palette1, #2d6a3e);
	box-shadow: 0 0 0 3px rgba(var(--do-green-rgb), 0.16);
}

/* Submit button — mirrors the block .btn.btn-primary.
   Selector is over-qualified on purpose: FluentForm's generated styler emits
   `form.fluent_form_N .ff-btn-submit:not(.ff_btn_no_style)` (specificity 0,3,1),
   so we match its shape to win (0,3,2) while still sitting below the footer
   form's own rules (0,4,0+), which keep their dark/gold treatment. */
form.frm-fluent-form button.ff-btn-submit:not(.ff_btn_no_style) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 28px;
	border: 2px solid var(--global-palette1, #2d6a3e);
	border-radius: 8px;
	background: var(--global-palette1, #2d6a3e);
	color: var(--global-palette8, #fafaf7);
	font-family: var(--do-font-sans);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.005em;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(var(--do-green-deep-rgb), 0.48);
	transition: background 180ms var(--do-ease-out),
		color 180ms var(--do-ease-out),
		transform 140ms var(--do-ease-out),
		box-shadow 220ms var(--do-ease-out);
}

form.frm-fluent-form button.ff-btn-submit:not(.ff_btn_no_style):hover {
	background: var(--global-palette2, #234f2f);
	border-color: var(--global-palette2, #234f2f);
	color: var(--global-palette8, #fafaf7);
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(var(--do-green-deep-rgb), 0.32);
}

form.frm-fluent-form button.ff-btn-submit:not(.ff_btn_no_style):active {
	transform: scale(0.97);
}

/* Vertical breathing room around the FluentForm Gutenberg block (e.g. the
   Contact form), which otherwise sits flush under the page header. Scoped to
   the block wrapper so the footer's shortcode newsletter form is untouched. */
.fluentform.ff_guten_block {
	padding-block: clamp(56px, 7vw, 96px);
}