/* ==========================================================================
   Titania Project – brand layer on top of Avada
   --------------------------------------------------------------------------
   1. Tokens (light + dark)
   2. Avada palette swap for dark mode
   3. Base
   4. Sections (Avada Containers with tp-* classes)
   5. Components
   6. Header / footer helpers
   7. Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
	--tp-anthracite: #0E1116;
	--tp-warm-white: #F7F8F6;
	--tp-emerald: #10B981;
	--tp-emerald-dark: #065F46;
	--tp-grey: #6B7280;

	--tp-bg: #F7F8F6;
	--tp-bg-alt: #FFFFFF;
	--tp-surface: #FFFFFF;
	--tp-text: #0E1116;
	--tp-muted: #6B7280;
	--tp-border: #E2E5E0;
	--tp-link: #065F46;            /* text links: dark green, readable on light */
	--tp-accent: #10B981;          /* icons, lines, buttons */
	--tp-accent-soft: rgba(16, 185, 129, .10);
	--tp-dark-bg: #0E1116;         /* header, footer, CTA */
	--tp-dark-text: #EEF0EC;
	--tp-dark-muted: #9CA3AF;
	--tp-shadow: 0 1px 2px rgba(14, 17, 22, .04), 0 8px 24px rgba(14, 17, 22, .06);
	--tp-radius: 12px;

	--tp-font-head: var(--h1_typography-font-family, "Montserrat", "Inter", system-ui, sans-serif);
	--tp-font-body: var(--body_typography-font-family, "Inter", system-ui, sans-serif);
	--tp-sec-pad: 104px;
}

html[data-theme="dark"] {
	--tp-bg: #0E1116;
	--tp-bg-alt: #121720;
	--tp-surface: #171D26;
	--tp-text: #EEF0EC;
	--tp-muted: #9CA3AF;
	--tp-border: #252C37;
	--tp-link: #10B981;
	--tp-accent-soft: rgba(16, 185, 129, .12);
	--tp-dark-bg: #0A0D11;
	--tp-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
}

/* 2. Avada palette swap ----------------------------------------------------
   Avada (7.6+) drives its colours from the Global Color Palette variables
   --awb-color1 (lightest) ... --awb-color8 (darkest). Set the palette in
   Avada > Options > Colors as listed in the README; dark mode swaps it here. */
html[data-theme="dark"] {
	--awb-color1: #0E1116;
	--awb-color2: #121720;
	--awb-color3: #252C37;
	--awb-color5: #34D399;
	--awb-color6: #9CA3AF;
	--awb-color7: #D1D5DB;
	--awb-color8: #EEF0EC;
	color-scheme: dark;
}

/* 3. Base ------------------------------------------------------------------ */
html, body, #wrapper, #main, .fusion-body #main {
	background-color: var(--tp-bg);
}
body {
	color: var(--tp-text);
	transition: background-color .25s, color .25s;
	-webkit-font-smoothing: antialiased;
}
#main h1, #main h2, #main h3, #main h4,
#main .fusion-title-heading {
	color: var(--tp-text);
	letter-spacing: -.01em;
}
#main a { color: var(--tp-link); }
#main .tp-sec-dark h1, #main .tp-sec-dark h2, #main .tp-sec-dark h3,
#main .tp-sec-dark .fusion-title-heading { color: #fff; }
/* Avada colours Title elements through --awb-text-color with a stronger selector: feed it our tokens. */
.fusion-body #wrapper .fusion-title.tp-title .fusion-title-heading { color: var(--tp-text); }
.fusion-body #wrapper .tp-sec-dark .fusion-title.tp-title .fusion-title-heading { color: #fff; }

/* Balanced line breaks: no single orphan word on the last line of a heading. */
#main h1, #main h2, #main h3, #main h4, .tp-quote-box .tp-big, .tp-lead, .tp-cta-lead { text-wrap: balance; }
#main p, #main li { text-wrap: pretty; }

/* Full-width template: no extra padding around builder content. */
.fusion-body #main.width-100 { padding-top: 0; padding-bottom: 0; }

/* 4. Sections -------------------------------------------------------------- */
.fusion-fullwidth.tp-sec {
	padding-top: var(--tp-sec-pad) !important;
	padding-bottom: var(--tp-sec-pad) !important;
	background-color: var(--tp-bg) !important;
	position: relative;
}
.fusion-fullwidth.tp-sec-alt { background-color: var(--tp-bg-alt) !important; }
.fusion-fullwidth.tp-sec-dark { background-color: var(--tp-dark-bg) !important; color: var(--tp-dark-text); }
.fusion-fullwidth.tp-sec-tight { --tp-sec-pad: 72px; }

.tp-sec-head { margin-bottom: 40px !important; }
.tp-sec-head .fusion-column-wrapper,
.tp-narrow .fusion-column-wrapper { max-width: 720px; }

.tp-eyebrow {
	display: inline-block;
	font: 600 .78rem/1 var(--tp-font-head);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tp-accent);
	margin-bottom: 18px;
}
.tp-title .fusion-title-heading { margin: 0 0 .45em !important; }
.tp-h1 .fusion-title-heading {
	font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
	line-height: 1.12 !important;
	font-weight: 700 !important;
}
.tp-lead { color: var(--tp-muted); font-size: 1.08rem; margin-top: 0; }
.tp-lead-lg { font-size: 1.18rem; max-width: 600px; margin-bottom: 30px; }
.tp-muted { color: var(--tp-muted); }

/* Hero */
.fusion-fullwidth.tp-hero { --tp-sec-pad: 96px; overflow: hidden; }
.fusion-fullwidth.tp-hero-page { --tp-sec-pad: 88px; border-bottom: 1px solid var(--tp-border); }
.tp-hero .fusion-builder-row { align-items: center; }
.tp-hero-visual {
	background: var(--tp-surface);
	border: 1px solid var(--tp-border);
	border-radius: 16px;
	padding: 24px;
	box-shadow: var(--tp-shadow);
}
.tp-hero-visual svg { width: 100%; height: auto; display: block; }
.tp-node rect { fill: var(--tp-bg); stroke: var(--tp-border); stroke-width: 1.2; }
.tp-node.tp-core rect { fill: var(--tp-accent-soft); stroke: var(--tp-accent); }
.tp-node text { font: 600 13px var(--tp-font-head); fill: var(--tp-text); }
.tp-node text.tp-sub { font: 400 11px var(--tp-font-body); fill: var(--tp-muted); }
.tp-link { stroke: var(--tp-accent); stroke-width: 1.5; fill: none; stroke-dasharray: 4 6; animation: tp-flow 1.6s linear infinite; }
@keyframes tp-flow { to { stroke-dashoffset: -20; } }
@media (prefers-reduced-motion: reduce) { .tp-link { animation: none; } }
.tp-vis-cap {
	display: flex; justify-content: space-between; gap: 12px;
	font-size: .8rem; color: var(--tp-muted);
	margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tp-border);
}
.tp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tp-accent); margin-right: 8px; }

/* At a glance box (service hero) */
.tp-glance {
	background: var(--tp-surface);
	border: 1px solid var(--tp-border);
	border-radius: 16px;
	padding: 28px;
	box-shadow: var(--tp-shadow);
}
#main .tp-glance-title { font-size: 1rem; margin: 18px 0 12px; }
.tp-glance ul { list-style: none; margin: 0; padding: 0; }
.tp-glance li {
	padding: 9px 0 9px 26px; border-top: 1px solid var(--tp-border);
	position: relative; font-size: .94rem;
}
.tp-glance li::before {
	content: ""; position: absolute; left: 2px; top: 15px;
	width: 10px; height: 6px; border-left: 2px solid var(--tp-accent); border-bottom: 2px solid var(--tp-accent);
	transform: rotate(-45deg);
}

/* Credibility strip */
.fusion-fullwidth.tp-strip {
	--tp-sec-pad: 44px;
	background-color: var(--tp-bg-alt) !important;
	border-top: 1px solid var(--tp-border);
	border-bottom: 1px solid var(--tp-border);
}

/* 5. Components ------------------------------------------------------------ */

/* Icons */
.tp-icon {
	width: 46px; height: 46px; border-radius: 10px;
	background: var(--tp-accent-soft); color: var(--tp-accent);
	display: inline-grid; place-items: center; margin-bottom: 18px;
}
.tp-icon .tp-ico { width: 22px; height: 22px; }

/* Facts */
.tp-fact { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.tp-fact .tp-icon { width: auto; height: auto; background: none; margin: 2px 0 0; flex: none; }
.tp-fact .tp-ico { width: 26px; height: 26px; }
.tp-fact strong { display: block; font: 600 .98rem/1.3 var(--tp-font-head); margin-bottom: 4px; color: var(--tp-text); }
.tp-fact span { font-size: .9rem; color: var(--tp-muted); line-height: 1.45; display: block; }
.tp-facts-stack .tp-fact { padding: 18px 0; border-bottom: 1px solid var(--tp-border); margin: 0; }

/* Area labels */
.tp-area { margin-top: 28px !important; margin-bottom: 14px !important; }
.tp-area-label {
	display: flex; align-items: center; gap: 14px;
	font: 600 .78rem/1 var(--tp-font-head); letter-spacing: .16em; text-transform: uppercase;
	color: var(--tp-muted);
}
.tp-area-label::after { content: ""; flex: 1; height: 1px; background: var(--tp-border); }

/* Cards (Avada column with class tp-card) */
.tp-card > .fusion-column-wrapper {
	background: var(--tp-surface) !important;
	border: 1px solid var(--tp-border);
	border-radius: var(--tp-radius);
	padding: 30px !important;
	height: 100%;
	box-sizing: border-box;
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
.tp-card { margin-bottom: 20px !important; }
.fusion-layout-column.tp-card { align-self: stretch; }
.tp-card > .fusion-column-wrapper .fusion-text:last-child { margin-bottom: 0; }
.tp-card:not(.tp-card-static):hover > .fusion-column-wrapper {
	border-color: var(--tp-accent);
	transform: translateY(-2px);
	box-shadow: var(--tp-shadow);
}
#main .tp-card h3 { font-size: 1.12rem; margin: 0 0 .5em; color: var(--tp-text); }
.tp-card p { color: var(--tp-muted); font-size: .95rem; margin-bottom: 14px; }
.tp-card-static p { margin-bottom: 0; }
.tp-more { font: 600 .88rem/1 var(--tp-font-head); color: var(--tp-link); }
.tp-more::after { content: " \2192"; }
.tp-card-wide .fusion-text { display: grid; grid-template-columns: auto 1fr auto; column-gap: 28px; align-items: center; }
.tp-card-wide .tp-icon { margin: 0; grid-row: span 2; }
.tp-card-wide h3, .tp-card-wide p { grid-column: 2; }
.tp-card-wide .tp-more { grid-column: 3; grid-row: 1 / span 2; }

/* Process steps */
.tp-step > .fusion-column-wrapper { border-top: 2px solid var(--tp-border); padding-top: 22px !important; position: relative; }
.tp-step > .fusion-column-wrapper::before {
	content: ""; position: absolute; top: -2px; left: 0; width: 56px; height: 2px; background: var(--tp-accent);
}
.tp-step-num { display: block; font: 700 .9rem/1 var(--tp-font-head); color: var(--tp-accent); margin-bottom: 22px; }
#main .tp-step h3 { font-size: 1.12rem; }
.tp-step p { color: var(--tp-muted); font-size: .95rem; }

/* Phases (How we work) */
.tp-phase-head, .tp-phase-body { border-top: 1px solid var(--tp-border); padding-top: 34px !important; padding-bottom: 34px !important; }
#main .tp-phase-title { font-size: 1.5rem; }
.tp-get-label { font: 600 .78rem/1 var(--tp-font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--tp-muted); margin: 22px 0 10px; }

/* Checklist */
.tp-check { list-style: none; margin: 0; padding: 0; }
.tp-check li { position: relative; padding: 20px 0 20px 38px; border-bottom: 1px solid var(--tp-border); }
.tp-check li:first-child { padding-top: 6px; }
.tp-check li::before {
	content: ""; position: absolute; left: 4px; top: 27px;
	width: 13px; height: 7px; border-left: 2px solid var(--tp-accent); border-bottom: 2px solid var(--tp-accent);
	transform: rotate(-45deg);
}
.tp-check li:first-child::before { top: 13px; }
.tp-check strong { display: block; font-family: var(--tp-font-head); font-weight: 600; margin-bottom: 4px; color: var(--tp-text); }
.tp-check span { color: var(--tp-muted); font-size: .97rem; }
.tp-check-compact li { padding: 8px 0 8px 32px; border: 0; }
.tp-check-compact li::before, .tp-check-compact li:first-child::before { top: 14px; }
.tp-check-compact li:first-child { padding-top: 8px; }

/* Quote box */
.tp-quote-box {
	background: var(--tp-anthracite); color: var(--tp-dark-text);
	border-radius: 16px; padding: 44px; margin-bottom: 20px;
}
html[data-theme="dark"] .tp-quote-box { background: var(--tp-surface); border: 1px solid var(--tp-border); }
.tp-bar { width: 48px; height: 3px; background: var(--tp-emerald); margin-bottom: 26px; }
.tp-quote-box .tp-big { font: 600 1.45rem/1.4 var(--tp-font-head); margin-bottom: 18px; color: #fff; }
.tp-quote-box .tp-muted { color: var(--tp-dark-muted); margin: 0; }
.tp-why-right .fusion-column-wrapper { justify-content: center; }

/* CTA */
.tp-cta .fusion-column-wrapper { align-items: center; text-align: center; }
.tp-cta .fusion-text { text-align: center; }
.tp-cta .fusion-button.tp-btn { margin-right: 0; }
.tp-cta-title .fusion-title-heading { text-align: center !important; max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
.tp-cta .tp-title { justify-content: center; }
.tp-cta .tp-cta-lead { color: var(--tp-dark-muted); max-width: 560px; margin: 0 auto 30px !important; font-size: 1.1rem; }

/* Buttons (Avada Button element with tp-btn classes) */
.fusion-button.tp-btn {
	border-radius: 6px !important;
	padding: 14px 26px !important;
	font-family: var(--tp-font-head) !important;
	font-weight: 600 !important;
	font-size: .95rem !important;
	letter-spacing: .02em !important;
	line-height: 1 !important;
	text-transform: none !important;
	border: 1.5px solid transparent !important;
	box-shadow: none !important;
	margin: 0 10px 10px 0;
	transition: background-color .2s, border-color .2s, color .2s;
}
.fusion-button.tp-btn .fusion-button-text { color: inherit !important; }
.fusion-button.tp-btn { display: inline-flex !important; width: auto !important; }
.fusion-button.tp-btn-primary { background: var(--tp-emerald) !important; color: var(--tp-anthracite) !important; }
.fusion-button.tp-btn-primary:hover, .fusion-button.tp-btn-primary:focus { background: var(--tp-emerald-dark) !important; color: #fff !important; }
.fusion-button.tp-btn-ghost { background: transparent !important; border-color: var(--tp-border) !important; color: var(--tp-text) !important; }
.fusion-button.tp-btn-ghost:hover, .fusion-button.tp-btn-ghost:focus { border-color: var(--tp-accent) !important; }
.tp-sec-dark .fusion-button.tp-btn-ghost { border-color: rgba(255, 255, 255, .25) !important; color: #fff !important; }

/* FAQ (Avada Accordion with class tp-faq) */
.tp-faq .panel { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--tp-border) !important; box-shadow: none !important; }
.tp-faq .panel-title a { color: var(--tp-text) !important; font-family: var(--tp-font-head) !important; font-weight: 600 !important; padding: 18px 0 !important; }
.tp-faq .panel-title a .fa-fusion-box,
.tp-faq .fusion-toggle-icon-wrapper { background: var(--tp-accent-soft) !important; color: var(--tp-accent) !important; }
.tp-faq .panel-body, .tp-faq .toggle-content { color: var(--tp-muted); padding: 0 0 20px !important; }

/* Contact */
.tp-next { list-style: none; margin: 0 0 36px; padding: 0; counter-reset: n; }
.tp-next li { counter-increment: n; position: relative; padding: 0 0 18px 44px; }
.tp-next li::before {
	content: counter(n); position: absolute; left: 0; top: 0;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--tp-accent-soft); color: var(--tp-accent);
	font: 700 .85rem/28px var(--tp-font-head); text-align: center;
}
.tp-next strong { display: block; color: var(--tp-text); }
.tp-next span { color: var(--tp-muted); font-size: .95rem; }
#main .tp-h3 { font-size: 1.15rem; margin: 0 0 18px; }
.tp-contact-aside > .fusion-column-wrapper {
	background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 16px; padding: 32px !important;
}

/* Company details list */
.tp-company { display: grid; grid-template-columns: max-content 1fr; gap: 10px 24px; margin: 0; }
.tp-company dt { color: var(--tp-muted); font-size: .9rem; }
.tp-company dd { margin: 0; color: var(--tp-text); font-weight: 500; }

/* Long text (legal pages) */
.tp-prose { max-width: 760px; }
.tp-prose h2 { font-size: 1.3rem !important; margin: 2em 0 .6em !important; }
.tp-prose p, .tp-prose li { color: var(--tp-text); }
.tp-prose .tp-company { margin-bottom: 1em; }

/* Notes visible only to logged-in users (setup hints, draft banners). */
.tp-admin-note { display: none; }
.logged-in .tp-admin-note {
	display: block; margin-bottom: 24px; padding: 14px 18px;
	border: 1px dashed var(--tp-accent); border-radius: 8px;
	background: var(--tp-accent-soft); color: var(--tp-text); font-size: .92rem;
}

/* 6. Header / footer helpers ---------------------------------------------- */

/* Header Layout container: give it the class tp-header */
.tp-header, .fusion-tb-header .tp-header { background-color: var(--tp-dark-bg) !important; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.tp-header .fusion-menu-element-wrapper a,
.tp-header .awb-menu__main-a { color: #D7DBD4 !important; }
.tp-header .awb-menu__main-a:hover { color: #fff !important; }
.tp-header .awb-menu__sub-ul { background: #151A21 !important; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; }
.tp-header .awb-menu__sub-a { color: #D7DBD4 !important; }
.tp-header .awb-menu__sub-a:hover { color: #fff !important; background: rgba(16, 185, 129, .1) !important; }

.tp-logo { display: inline-flex; align-items: center; line-height: 0; }
.tp-logo img { height: 40px; width: auto; display: block; }

.tp-theme-toggle {
	width: 40px; height: 40px; border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, .14); background: transparent; color: #D7DBD4;
	display: inline-grid; place-items: center; cursor: pointer; padding: 0;
}
.tp-theme-toggle:hover, .tp-theme-toggle:focus-visible { border-color: var(--tp-emerald); color: #fff; }
.tp-theme-toggle svg { width: 18px; height: 18px; }
.tp-theme-toggle .tp-sun { display: none; }
html[data-theme="dark"] .tp-theme-toggle .tp-sun { display: block; }
html[data-theme="dark"] .tp-theme-toggle .tp-moon { display: none; }

/* Footer: put [tp_footer] in a Footer Layout container with class tp-footer-wrap */
.tp-footer-wrap, .fusion-tb-footer .tp-footer-wrap { background-color: var(--tp-dark-bg) !important; }
.tp-footer { color: var(--tp-dark-muted); font-size: .92rem; padding: 72px 0 28px; }
.tp-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 52px; }
.tp-footer-brand p { margin-top: 22px; max-width: 320px; color: var(--tp-dark-muted); }
.tp-footer h4 {
	font: 600 .75rem/1 var(--tp-font-head) !important; letter-spacing: .16em; text-transform: uppercase;
	color: #fff !important; margin: 0 0 18px !important;
}
.tp-footer ul { list-style: none; margin: 0; padding: 0; }
.tp-footer li { margin-bottom: 10px; }
.tp-footer a { color: var(--tp-dark-muted) !important; }
.tp-footer a:hover { color: var(--tp-emerald) !important; }
.tp-footer-legal {
	border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 24px;
	display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: .82rem;
}

/* 7. Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.tp-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px) {
	:root { --tp-sec-pad: 72px; }
	.fusion-fullwidth.tp-hero { --tp-sec-pad: 56px; }
	.fusion-fullwidth.tp-hero-page { --tp-sec-pad: 56px; }
	.tp-hero-visual-col, .tp-hero-aside { margin-top: 36px !important; }
	.tp-card-wide .fusion-text { display: block; }
	.tp-card-wide .tp-icon { margin-bottom: 18px; }
	.tp-phase-body { border-top: 0; padding-top: 0 !important; }
	.tp-quote-box { padding: 30px; }
}
@media (max-width: 560px) {
	.tp-footer-grid { grid-template-columns: 1fr; }
	.tp-company { grid-template-columns: 1fr; gap: 2px; }
	.tp-company dd { margin-bottom: 10px; }
	.tp-vis-cap { flex-direction: column; }
}

/* Header Layout created by the setup command */
.tp-header .fusion-text.tp-hdr-text { margin: 0 !important; line-height: 0; }
.tp-header .fusion-text.tp-hdr-text p { margin: 0; }
.tp-hdr-actions .fusion-button.tp-btn { margin: 0 0 0 12px; }
.tp-hdr-actions .fusion-column-wrapper, .tp-hdr-logo .fusion-column-wrapper { gap: 0; }
@media (max-width: 1024px) {
	.fusion-button.tp-hdr-cta { display: none !important; }
	.tp-hdr-actions .fusion-column-wrapper { justify-content: flex-end !important; }
}
@media (max-width: 640px) {
	.tp-logo img { height: 32px; }
}