/* ==========================================================================
   Flourish Medical Group - brand layer
   Source: Flourish Brand Guidelines v1.0, August 2026
   --------------------------------------------------------------------------
   One place for colour, type and spacing. Elementor handles layout; it should
   reference these tokens rather than hard-coding hex values, so a brand change
   is a change to this file and nothing else.
   ========================================================================== */

:root {
	/* ---- Palette (guidelines s3). Navy and orange do the work. ---------- */
	--fl-navy:        #082C60;
	--fl-orange:      #F48438;
	--fl-white:       #FFFFFF;
	--fl-warm-ground: #F7F4F0;
	--fl-slate:       #4A5568;

	/* Tints and shades, derived - not new brand colours. Used for hover
	   states, borders and dividers where flat navy would be too heavy. */
	--fl-navy-900:    #051C3E;
	--fl-navy-700:    #0B3A7D;
	--fl-navy-100:    #E6EBF3;
	--fl-orange-600:  #D96D22;
	--fl-orange-100:  #FDEEE1;
	--fl-hairline:    #E4DED6;

	/* ---- Semantic roles -------------------------------------------------- */
	--fl-text:        var(--fl-navy);
	--fl-text-muted:  var(--fl-slate);
	--fl-text-invert: var(--fl-white);
	--fl-bg:          var(--fl-white);
	--fl-bg-alt:      var(--fl-warm-ground);
	--fl-bg-invert:   var(--fl-navy);
	--fl-accent:      var(--fl-orange);
	--fl-link:        var(--fl-navy-700);
	--fl-link-hover:  var(--fl-orange-600);
	--fl-focus:       var(--fl-orange);

	/* ---- Type (guidelines s4) ------------------------------------------- */
	--fl-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
	--fl-font-body:    "Source Sans 3", Calibri, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

	/* Fluid scale: comfortable on a phone, generous on a desktop, no jumps. */
	--fl-size-hero:    clamp(2.25rem,  1.55rem + 3.1vw, 4rem);      /* 36 - 64 */
	--fl-size-h1:      clamp(2rem,     1.50rem + 2.2vw, 3.25rem);   /* 32 - 52 */
	--fl-size-h2:      clamp(1.625rem, 1.32rem + 1.4vw, 2.5rem);    /* 26 - 40 */
	--fl-size-h3:      clamp(1.3125rem,1.16rem + 0.7vw, 1.75rem);   /* 21 - 28 */
	--fl-size-h4:      clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem); /* 18 - 21 */
	--fl-size-body:    clamp(1rem,     0.96rem + 0.2vw, 1.125rem);  /* 16 - 18, per guidelines */
	--fl-size-small:   0.9375rem;                                    /* 15 */
	--fl-size-eyebrow: 0.8125rem;                                    /* 13 */

	--fl-leading-tight: 1.15;
	--fl-leading-snug:  1.3;
	--fl-leading-body:  1.65;

	/* ---- Spacing, radii, shadow ----------------------------------------- */
	--fl-space-3xs: 0.25rem;
	--fl-space-2xs: 0.5rem;
	--fl-space-xs:  0.75rem;
	--fl-space-sm:  1rem;
	--fl-space-md:  1.5rem;
	--fl-space-lg:  2.5rem;
	--fl-space-xl:  4rem;
	--fl-space-2xl: 6rem;

	--fl-radius-sm: 4px;
	--fl-radius-md: 8px;
	--fl-radius-lg: 16px;

	/* Guidelines forbid drop shadows on the logo. Elsewhere, keep them
	   barely there - the look is clean and flat, not floating cards. */
	--fl-shadow-card:  0 1px 2px rgba(8, 44, 96, 0.04), 0 8px 24px rgba(8, 44, 96, 0.06);
	--fl-shadow-hover: 0 2px 4px rgba(8, 44, 96, 0.06), 0 16px 32px rgba(8, 44, 96, 0.10);

	--fl-content-width: 1200px;
	--fl-prose-width:   68ch;
	--fl-transition:    180ms ease;
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--fl-font-body);
	font-size: var(--fl-size-body);
	line-height: var(--fl-leading-body);
	color: var(--fl-text);
	background-color: var(--fl-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---- Headings: Playfair Display, navy, tight (guidelines s4) ----------- */
h1, h2, h3, h4, h5, h6,
.fl-display {
	font-family: var(--fl-font-display);
	color: var(--fl-navy);
	font-weight: 700;
	line-height: var(--fl-leading-tight);
	letter-spacing: -0.01em;
	margin-block: 0 var(--fl-space-sm);
	text-wrap: balance;
}

h1 { font-size: var(--fl-size-h1); }
h2 { font-size: var(--fl-size-h2); line-height: var(--fl-leading-snug); }
h3 { font-size: var(--fl-size-h3); line-height: var(--fl-leading-snug); font-weight: 600; }
h4 { font-size: var(--fl-size-h4); font-weight: 600; letter-spacing: 0; }

h5, h6 {
	font-family: var(--fl-font-body);
	font-size: var(--fl-size-small);
	font-weight: 600;
	letter-spacing: 0.02em;
}

p {
	margin-block: 0 var(--fl-space-sm);
	max-width: var(--fl-prose-width);
}

/* Body copy may be navy or slate, never orange for long passages. */
.fl-muted { color: var(--fl-text-muted); }

a {
	color: var(--fl-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color var(--fl-transition);
}

a:hover,
a:focus-visible {
	color: var(--fl-link-hover);
}

:focus-visible {
	outline: 3px solid var(--fl-focus);
	outline-offset: 2px;
	border-radius: var(--fl-radius-sm);
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Brand components
   ========================================================================== */

/* ---- Eyebrow: the small orange label above a section heading ----------- */
.fl-eyebrow {
	display: inline-block;
	font-family: var(--fl-font-body);
	font-size: var(--fl-size-eyebrow);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fl-orange-600);
	margin-block-end: var(--fl-space-2xs);
}

/* ---- The orange rule. A small accent, never a page border (s7). -------- */
.fl-rule {
	display: block;
	width: 64px;
	height: 3px;
	border: 0;
	background-color: var(--fl-orange);
	border-radius: 2px;
	margin-block: var(--fl-space-sm);
}

.fl-rule--center { margin-inline: auto; }

/* ---- Buttons. Primary CTA is orange with white type (s3, s8). ---------- */
.fl-btn,
.wp-block-button__link,
.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--fl-space-2xs);
	font-family: var(--fl-font-body);
	font-size: var(--fl-size-body);
	font-weight: 600;
	line-height: 1.2;
	padding: 0.875rem 1.75rem;
	border: 2px solid transparent;
	border-radius: var(--fl-radius-md);
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--fl-transition), border-color var(--fl-transition),
	            color var(--fl-transition), transform var(--fl-transition);
}

.fl-btn--primary,
.elementor-button {
	background-color: var(--fl-orange);
	color: var(--fl-white);
}

.fl-btn--primary:hover,
.elementor-button:hover,
.fl-btn--primary:focus-visible,
.elementor-button:focus-visible {
	background-color: var(--fl-orange-600);
	color: var(--fl-white);
	transform: translateY(-1px);
}

/* Secondary: navy outline. For "Call us" next to the booking button. */
.fl-btn--secondary {
	background-color: transparent;
	border-color: var(--fl-navy);
	color: var(--fl-navy);
}

.fl-btn--secondary:hover,
.fl-btn--secondary:focus-visible {
	background-color: var(--fl-navy);
	color: var(--fl-white);
}

/* On a navy field, the outline button reverses to white. */
.fl-invert .fl-btn--secondary {
	border-color: var(--fl-white);
	color: var(--fl-white);
}

.fl-invert .fl-btn--secondary:hover {
	background-color: var(--fl-white);
	color: var(--fl-navy);
}

/* ---- Surfaces ---------------------------------------------------------- */
.fl-surface-alt { background-color: var(--fl-bg-alt); }

.fl-invert {
	background-color: var(--fl-bg-invert);
	color: var(--fl-text-invert);
}

.fl-invert h1,
.fl-invert h2,
.fl-invert h3,
.fl-invert h4,
.fl-invert h5,
.fl-invert h6 {
	color: var(--fl-white);
}

.fl-invert .fl-eyebrow { color: var(--fl-orange); }
.fl-invert a           { color: var(--fl-white); }

/* ---- Card ------------------------------------------------------------- */
/* Background, border, radius and padding come from the Elementor container
   settings so they stay editable in the builder; only the shadow lives here. */
.fl-card {
	box-shadow: var(--fl-shadow-card);
	transition: box-shadow var(--fl-transition), transform var(--fl-transition);
}

/* Only cards that link somewhere lift on hover - a card that moves under the
   pointer but goes nowhere reads as broken. */
.fl-card--link:hover {
	box-shadow: var(--fl-shadow-hover);
	transform: translateY(-2px);
}

/* ---- Grid ------------------------------------------------------------- *
   Column widths are computed from the gap rather than set as a percentage.
   31.5% x 3 + two 24px gaps leaves ~18px spare on the right of a 1200px row,
   so every grid sat visibly left of the heading above it. A short last row
   (5 doctors in 3 columns) is centred by the container, not left-hugging.
   --width is the variable Elementor sizes containers by; !important beats the
   per-element percentage it writes into the post stylesheet. */
.fl-grid                  { --fl-grid-gap: 24px; }

/* Elementor gives nested containers 10px of default padding, which insets a
   grid's outer cards from the column edges every other band lines up on. */
.e-con.fl-grid {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}
.fl-grid.fl-grid--wide-gap { --fl-grid-gap: 30px; }

.fl-grid--2 > .e-con { --width: calc((100% - var(--fl-grid-gap)) / 2) !important; }
.fl-grid--3 > .e-con { --width: calc((100% - 2 * var(--fl-grid-gap)) / 3) !important; }
.fl-grid--4 > .e-con { --width: calc((100% - 3 * var(--fl-grid-gap)) / 4) !important; }

@media (max-width: 1024px) {
	.fl-grid:not(.fl-grid--stay-3) > .e-con {
		--width: calc((100% - var(--fl-grid-gap)) / 2) !important;
	}
}

/* One card per row on a phone. The selector is deliberately as specific as the
   tablet rule above (which needs :not()), so that this later rule wins - with
   plain ".fl-grid > .e-con" the tablet rule kept phones at two cramped columns.
   Grids of very short cards (travel times) opt into two columns instead. */
@media (max-width: 767px) {
	.e-con.fl-grid > .e-con { --width: 100% !important; }
	.e-con.fl-grid.fl-grid--mobile-2 > .e-con {
		--width: calc((100% - var(--fl-grid-gap)) / 2) !important;
	}
}

/* ==========================================================================
   Logo clear space (guidelines s2)
   Clear zone equals the height of the "F" in FLOURISH - roughly 40% of the
   stacked mark's height. Enforced here so no layout can crowd it.
   ========================================================================== */

.fl-logo {
	display: inline-block;
	padding: 0.4em;
}

.fl-logo img {
	display: block;
}

/* Minimum sizes from the guidelines - a guard rail, not a layout choice. */
.fl-logo--stacked img   { min-width: 180px; }
.fl-logo--landscape img { min-width: 280px; }
.fl-logo--icon img      { min-height: 32px; }

/* ==========================================================================
   Accessibility and motion
   ========================================================================== */

.fl-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.fl-skip-link {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: var(--fl-space-2xs) var(--fl-space-sm);
	background: var(--fl-navy);
	color: var(--fl-white);
	border-radius: 0 0 var(--fl-radius-md) 0;
}

.fl-skip-link:focus {
	left: 0;
	top: 0;
}

@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;
	}
}

/* ==========================================================================
   Print - patients do print the contact page
   ========================================================================== */

@media print {
	.fl-no-print,
	.elementor-location-header,
	.elementor-location-footer {
		display: none !important;
	}

	body {
		color: #000;
		background: #fff;
		font-size: 11pt;
	}
}

/* ==========================================================================
   Header utilities
   ========================================================================== */

/* Phone numbers and short CTAs must never break across lines - a wrapped
   "03 5174 6711" reads as three separate numbers. */
.fl-nowrap .elementor-button,
.fl-nowrap.elementor-widget-button .elementor-button-text {
	white-space: nowrap;
}

/* ==========================================================================
   Booking embed
   ========================================================================== */

/* Full width of the 1200px content column, so the widget's edges line up with
   the header above and the card row below. At 1000px it sat inset from both. */
.fl-booking-embed {
	width: 100%;
}

.fl-booking-embed iframe {
	display: block;
	width: 100%;
	min-height: 800px;
	border: 1px solid var(--fl-hairline);
	border-radius: var(--fl-radius-lg);
	background: var(--fl-white);
}

.fl-booking-fallback {
	padding: var(--fl-space-md);
	border: 1px solid var(--fl-hairline);
	border-radius: var(--fl-radius-lg);
	background: var(--fl-orange-100);
	color: var(--fl-navy);
}

/* ==========================================================================
   Notice - used where a page must state a constraint before the reader acts
   (privacy warning above the enquiry form, for example).
   ========================================================================== */

.fl-notice {
	padding: var(--fl-space-sm) var(--fl-space-md);
	border-left: 3px solid var(--fl-orange);
	border-radius: 0 var(--fl-radius-md) var(--fl-radius-md) 0;
	background: var(--fl-orange-100);
}

.fl-notice p { margin-block-end: 0; max-width: none; }

/* ==========================================================================
   Card grid
   Cards in a row must share a height, and their "learn more" link must sit on
   a common baseline - otherwise a two-line title in one card knocks the whole
   row out of alignment.
   ========================================================================== */

.fl-card {
	display: flex;
	flex-direction: column;
}

.fl-card > .elementor-widget-icon-list:last-child {
	margin-block-start: auto;
	padding-block-start: var(--fl-space-sm);
}

/* Card images: uniform aspect so a portrait and a landscape source sit level. */
.fl-card .elementor-widget-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---- Checklist (a doctor's areas of interest) --------------------------
   Grid rather than CSS columns so items read across in rows and the block
   stays the full content width, aligned with the card rows around it. */
.fl-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px 24px;
}

.fl-checklist li {
	position: relative;
	padding-inline-start: 30px;
	line-height: 1.5;
}

.fl-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.2em;
	width: 18px;
	height: 18px;
	/* Brand orange (--fl-orange, #F48438) circle with a white tick. */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23F48438'/%3E%3Cpath d='M10 15.6 6.7 12.3l-1.4 1.4L10 18.4l8.7-8.7-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 1024px) {
	.fl-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	.fl-checklist { grid-template-columns: 1fr; }
}

/* Doctor portraits are square by construction - keep them square. */
.fl-card--portrait .elementor-widget-image img {
	aspect-ratio: 1 / 1;
}

/* ==========================================================================
   Overflow guards
   --------------------------------------------------------------------------
   Flex items default to min-width:auto, so a column refuses to shrink below
   the intrinsic width of its content. On a phone that pushes long words and
   capped-width prose past the viewport, and the page scrolls sideways with
   text clipped at the right edge. Both fixes below are the root cause, not a
   hidden overflow.
   ========================================================================== */

.e-con,
.e-con-inner,
.e-child,
.elementor-widget,
.elementor-widget-container {
	min-width: 0;
}

/* The 68ch measure is for reading comfort on wide screens - it must never
   exceed the space actually available. */
p {
	max-width: min(var(--fl-prose-width), 100%);
}

/* Each content band's inner box inherits Elementor's 10px default padding on
   top of the band's own, adding 20px of dead space between every pair of
   bands. Vertical only, content pages only - header and footer untouched. */
[data-elementor-type="wp-page"] > .e-con.e-parent > .e-con,
[data-elementor-type="wp-post"] > .e-con.e-parent > .e-con {
	--padding-top: 0px;
	--padding-bottom: 0px;
}

/* The last paragraph or list in a text block carries no bottom margin - it
   stacked on top of section padding and made every band look bottom-heavy. */
.elementor-widget-text-editor p:last-child,
.elementor-widget-text-editor ul:last-child,
.elementor-widget-text-editor ol:last-child {
	margin-block-end: 0;
}

/* Long-form text (articles, privacy policy): subheadings need air above them
   or they read as part of the paragraph before. */
.elementor-widget-text-editor h2,
.elementor-widget-text-editor h3 {
	margin-block-start: 1.5em;
}
.elementor-widget-text-editor h2:first-child,
.elementor-widget-text-editor h3:first-child {
	margin-block-start: 0;
}

/* ...and when the copy is centred, the capped paragraph is centred too, or it
   sits left of the heading above it. */
.fl-text-center p {
	margin-inline: auto;
}

/* Long unbroken strings (an email address, a URL) must not set the floor. */
.elementor-widget-text-editor,
.elementor-widget-heading,
.elementor-icon-list-text {
	overflow-wrap: break-word;
}

/* ==========================================================================
   Sticky header
   Only the white main bar sticks; the navy utility bar above it scrolls away.
   That keeps the booking CTA and navigation reachable at any scroll depth
   without permanently surrendering a strip of the viewport.
   ========================================================================== */

.fl-sticky-bar {
	position: sticky;
	top: 0;
	z-index: 900;
	/* Opaque, not translucent: Elementor sections behind it use several
	   different grounds and a blur would show them smearing through. */
	background-color: var(--fl-white);
	transition: box-shadow 200ms ease;
}

/* Shadow only once it has actually detached from the utility bar, so the
   header sits flat at the top of the page. */
.fl-sticky-bar.is-stuck {
	box-shadow: 0 1px 2px rgba(8, 44, 96, 0.05), 0 8px 24px rgba(8, 44, 96, 0.08);
}

/* A sticky ancestor with clipped overflow silently kills position:sticky.
   Elementor sets overflow on containers in places, so clear it on the chain
   the header sits in. */
.ehf-header,
.ehf-header > .e-con,
.ehf-header .e-con-inner {
	overflow: visible;
}

/* Anchor links must not land underneath the sticky bar. */
:target { scroll-margin-top: 6rem; }

@media (max-width: 767px) {
	:target { scroll-margin-top: 4.5rem; }
}

/* Mobile header: one row, and the booking label shortens so 190px of logo,
   the menu toggle and a CTA all fit across a phone. */
@media (max-width: 767px) {
	/* Budget across a 390px phone: 148 logo + 30 toggle + 132 CTA + gaps. */
	.fl-sticky-bar .elementor-button { font-size: 0.8rem; letter-spacing: 0; }
	.fl-sticky-bar .elementor-widget-navigation-menu { flex-grow: 0; }
	.fl-header-row { gap: 10px !important; }
	.fl-header-row > * { min-width: 0; }
}

/* Elementor's default --flex-wrap-mobile:wrap turns the header into a three-row
   stack on a phone, which is far too tall to stick. Hold it to one row. */
.fl-header-row {
	flex-wrap: nowrap !important;
}

.fl-header-row > .elementor-widget-image { flex: 0 0 auto; }
.fl-header-row > .e-con                  { flex: 0 1 auto; }

/* The row is boxed, so its items actually sit inside .e-con-inner and the two
   rules above never matched - on a phone the 44px icon shrank to 26px and the
   menu toggle sat in the middle of the bar. */
@media (max-width: 767px) {
	.fl-header-row .elementor-widget-image { flex: 0 0 auto; }
	.fl-header-row .fl-header-nav {
		flex: 1 1 auto;
		--justify-content: flex-end;
		justify-content: flex-end;
	}
	/* The nav widget centres its own toggle inside itself - push it right. */
	.fl-header-nav .hfe-nav-menu__toggle { margin-inline: auto 0 !important; }
	/* Size the CTA block to its button. With a fixed width it shrank narrower
	   than "Book" and the button ran 4px off the right edge of the screen. */
	.fl-header-row .fl-header-cta {
		--width: auto !important;
		width: auto !important;
		flex: 0 0 auto;
	}

	/* Utility bar: two centred lines (bulk billed, phone) instead of a centred
	   line over a left-aligned two-line list. */
	.fl-util-right .elementor-icon-list-item:first-child { display: none; }
	.fl-util-right .elementor-icon-list-items { justify-content: center; }

	/* Cards: Elementor's default 20px gap between widgets stacks on top of each
	   widget's own margin, leaving big holes inside a single-column card. */
	.fl-grid > .e-con {
		--gap: 4px !important;
		--row-gap: 4px !important;
		--column-gap: 4px !important;
	}
}

/* ==========================================================================
   Footer grid
   Four columns on desktop, 2 x 2 on tablet and small laptops, and on a phone
   brand / [services | practice] / contact. As a wrapping flex row the footer
   collapsed into one narrow left-hand column at 1024px, 1,600px tall.
   ========================================================================== */

.fl-footer-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 40px 56px;
	align-items: start;
}

.fl-footer-grid .fl-footer-col {
	--width: auto !important;
	width: auto !important;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
}

@media (max-width: 1024px) {
	.fl-footer-grid > .e-con-inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 48px;
	}
}

@media (max-width: 767px) {
	.fl-footer-grid > .e-con-inner { gap: 32px 20px; }
	.fl-footer-brand,
	.fl-footer-contact { grid-column: 1 / -1; }
}

/* Link lists carry an invisible 1px icon that indented every link a few
   pixels right of its heading. */
.fl-footer-links .elementor-icon-list-icon { display: none !important; }
.fl-footer-links .elementor-icon-list-text { padding-inline-start: 0 !important; }

/* Copyright and "Privacy policy" share one baseline. */
.fl-footer-copy p { margin: 0; }