/* =====================================================================
   Trilliant Digital: global styles (header + footer)
   Loaded on every page that uses one of this theme's templates, before
   the page's own stylesheet. Everything here is prefixed "td-" so page
   styles cannot change the header or footer, and vice versa.
   ===================================================================== */

/* ---- design tokens (same values as the page designs) ---- */
:root {
	--brand-blue: #1279ac;
	--brand-green: #3e9a7b;
	--royal-blue: #123c9e;
	--deep-navy: #0b1c38;
	--cream: #eceec9;
	--cream-text: #3a3d18;
	--ink: #16233c;
	--white: #ffffff;
	--porcelain: #f7fafd;
	--hairline: #d9e2ec;
	--pale-blue: #b9c9e4;
	--muted: #8a9ab5;
	--slate: #5b6b82;
	--brand-green-light-40: #8bc2b0;
	--royal-blue-light-20: #4163b1;
	--royal-blue-dark-20: #0e307e;
	--cta-royal: #1a50c4;
	--cta-royal-deep: #123c9e;
	--f-head: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--f-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--f-accent: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--r-pill: 999px;
	--gutter: clamp(16px, 4vw, 40px);
	--ease: cubic-bezier(.2, .7, .2, 1);
	--td-header-h: 76px;
}

/* ---- minimal base (page stylesheets add their own on top) ---- */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--td-header-h) + 8px) }
body.td-site { margin: 0; background: var(--white); color: var(--slate); font: 400 1.0625rem/1.65 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden }
.td-sprite { position: absolute; width: 0; height: 0; overflow: hidden }
.td-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round }

.td-skip { position: absolute; left: 12px; top: -100px; z-index: 1000; padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--white); font: 700 .9rem/1 var(--f-head); text-decoration: none }
.td-skip:focus { top: 12px }

/* ======================== HEADER ======================== */
.td-header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding-top: env(safe-area-inset-top, 0px); background: var(--white); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s }
.td-header.is-scrolled, .td-header.is-menu-open { border-bottom-color: var(--hairline); box-shadow: 0 10px 30px -24px rgba(22, 35, 60, .45) }
/* logged-in admins: sit below the WordPress toolbar */
.admin-bar .td-header { top: var(--wp-admin--admin-bar--height, 32px) }

.td-header__in { display: flex; align-items: center; gap: 24px; width: 100%; max-width: 1290px; height: var(--td-header-h); margin-inline: auto; padding-inline: var(--gutter) }
.td-logo { display: block; flex: none; width: 168px; line-height: 0 }
.td-logo img { display: block; width: 100%; height: auto; max-width: none }
.td-nav { margin-left: auto }

/* menu, shared by desktop and mobile */
.td-menu, .td-menu__sub { list-style: none; margin: 0; padding: 0 }
.td-menu a, .td-menu button { text-decoration: none; -webkit-tap-highlight-color: transparent }
.td-menu__link { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 10px 14px; border: 0; border-radius: var(--r-pill); background: none; font: 600 .9rem/1 var(--f-head); color: var(--ink); cursor: pointer; transition: color .2s, background-color .2s }
.td-menu__link:hover, .td-menu__item.is-current > .td-menu__link, .td-menu__item.is-ancestor > .td-menu__link, .td-menu__item.is-open > .td-menu__link { background: var(--porcelain); color: var(--brand-blue) }
.td-menu__chev { font-size: .9rem; stroke-width: 2.2; transition: rotate .2s var(--ease) }
.td-menu__item.is-open > * > .td-menu__chev, .td-menu__item.is-open > .td-menu__link .td-menu__chev { rotate: 180deg }
.td-menu__toggle { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0 0 0 -10px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer }
.td-menu__toggle:hover { background: var(--porcelain); color: var(--brand-blue) }
.td-menu__sublink { display: block; padding: 10px 12px; border-radius: 10px; font: 600 .88rem/1.3 var(--f-head); color: var(--ink); transition: color .2s, background-color .2s }
.td-menu__sublink:hover, .td-menu__sublink[aria-current="page"] { background: var(--porcelain); color: var(--brand-blue) }
.td-header :focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px }

/* desktop: one row, dropdown panels */
.td-menu--desktop { display: flex; align-items: center; gap: 2px }
.td-menu--desktop .td-menu__item { position: relative; display: flex; align-items: center }
.td-menu--desktop .td-menu__sub { position: absolute; top: calc(100% + 10px); left: 0; z-index: 10; min-width: 260px; padding: 8px; background: var(--white); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: 0 24px 48px -24px rgba(22, 35, 60, .4); opacity: 0; visibility: hidden; translate: 0 6px; transition: opacity .2s, translate .2s var(--ease), visibility 0s .2s }
.td-menu--desktop .td-menu__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px } /* hover bridge */
.td-menu--desktop .td-menu__item.is-open > .td-menu__sub,
.td-menu--desktop .td-menu__item.has-sub:focus-within > .td-menu__sub { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .2s, translate .2s var(--ease) }
@media (hover: hover) {
	.td-menu--desktop .td-menu__item.has-sub:hover > .td-menu__sub { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .2s, translate .2s var(--ease) }
}

/* header button */
.td-cta { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 10px; min-height: 46px; padding: 0 8px 0 20px; border-radius: var(--r-pill); background: var(--cta-royal); color: var(--white); font: 800 .92rem/1 var(--f-accent); white-space: nowrap; text-decoration: none; transition: background-color .18s, transform .18s }
.td-cta:hover { background: var(--cta-royal-deep); color: var(--white); transform: translateY(-1px) }
.td-cta__arrow { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); font-size: 1.1rem }
.td-cta__arrow .td-ico { stroke-width: 2 }
.td-cta--block { width: 100%; margin-top: 16px; min-height: 52px }

/* burger + mobile panel */
.td-burger { display: none; place-items: center; width: 44px; height: 44px; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--ink); font-size: 1.4rem; cursor: pointer }
.td-burger__close, .td-header.is-menu-open .td-burger__open { display: none }
.td-header.is-menu-open .td-burger__close { display: block }
.td-mobile { display: none }

@media (max-width: 1080px) {
	.td-nav, .td-header__in > .td-cta { display: none }
	.td-burger { display: grid }
	.td-mobile { display: block; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - var(--td-header-h) - env(safe-area-inset-top, 0px)); max-height: calc(100dvh - var(--td-header-h) - env(safe-area-inset-top, 0px)); overflow-y: auto; padding: 8px var(--gutter) 22px; background: var(--white); border-bottom: 1px solid var(--hairline); opacity: 0; visibility: hidden; translate: 0 -10px; transition: opacity .25s, translate .25s var(--ease), visibility 0s .25s }
	.td-header.is-menu-open .td-mobile { opacity: 1; visibility: visible; translate: 0 0; transition: opacity .25s, translate .25s var(--ease) }

	.td-menu--mobile .td-menu__item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--hairline) }
	.td-menu--mobile .td-menu__link { flex: 1; justify-content: space-between; padding: 16px 2px; border-radius: 0; background: none; font-size: 1rem; text-align: left }
	.td-menu--mobile .td-menu__link:hover, .td-menu--mobile .is-current > .td-menu__link, .td-menu--mobile .is-ancestor > .td-menu__link, .td-menu--mobile .is-open > .td-menu__link { background: none; color: var(--brand-blue) }
	.td-menu--mobile .td-menu__toggle { width: 44px; height: 44px; margin: 0 }
	.td-menu--mobile .td-menu__sub { display: none; flex-basis: 100%; padding: 0 0 12px 10px }
	.td-menu--mobile .td-menu__item.is-open > .td-menu__sub { display: block }
	.td-menu--mobile .td-menu__sublink { padding: 11px 12px; font-size: .95rem }
}
@media (max-width: 782px) { .admin-bar .td-header { top: 46px } }
@media (max-width: 600px) { .admin-bar .td-header { top: 0 } } /* the toolbar scrolls away on phones */

/* ======================== FOOTER ======================== */
.td-footer { background: var(--deep-navy); color: var(--pale-blue); overflow: hidden; font: 400 .92rem/1.6 var(--f-body) }
.td-footer a { color: inherit; text-decoration: none; transition: color .2s }
.td-footer a:hover, .td-footer a[aria-current="page"] { color: var(--cream) }
.td-footer__band { border-bottom: 1px solid var(--royal-blue-dark-20); padding-top: 56px; overflow: hidden }
.td-footer__wordmark { font: 800 clamp(4rem, 15.5vw, 13.5rem)/.8 var(--f-head); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--royal-blue-light-20); white-space: nowrap; text-align: center; transform: translateY(6%); user-select: none }
.td-footer__wrap { width: 100%; max-width: 1290px; margin-inline: auto; padding-inline: var(--gutter) }
.td-footer__grid { display: flex; flex-wrap: wrap; gap: 40px; padding-block: 64px 40px }
.td-footer__brand { flex: 1.4 1 280px; display: grid; gap: 18px; align-content: start }
.td-footer__brand img { display: block; width: 180px; height: auto; max-width: 100% }
.td-footer__brand p { margin: 0; max-width: 36ch }
.td-footer__col { flex: 1 1 160px; min-width: 0 }
.td-footer__title { margin: 0 0 18px; font: 700 .8rem/1 var(--f-accent); letter-spacing: .14em; text-transform: uppercase; color: var(--white) }
.td-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px }
.td-footer__list li { display: flex; gap: 10px }
.td-footer__list--contact .td-ico { margin-top: 4px; color: var(--brand-green-light-40) }
.td-footer__socials { display: flex; gap: 8px }
.td-footer__socials a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--royal-blue-dark-20); border-radius: 10px; color: var(--pale-blue); transition: background-color .25s, color .25s, border-color .25s }
.td-footer__socials a:hover { background: var(--cream); border-color: var(--cream); color: var(--cream-text) }
.td-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 22px; border-top: 1px solid var(--royal-blue-dark-20); font-size: .84rem }
@media (max-width: 760px) { .td-footer__brand { flex-basis: 100% } }

/* ======================== PLACEHOLDER PAGES ======================== */
.td-placeholder { min-height: 60vh; padding-top: var(--td-header-h) }

@media (prefers-reduced-motion: reduce) {
	.td-header, .td-header *, .td-footer * { transition: none !important }
}