/*
 * TM Base - foundations: reset, type, buttons, layout helpers, prose, forms.
 * Colours and sizes come from theme.json presets (--wp--preset--*), so a
 * client's palette flows through without editing this file.
 */

/* reset.css (Hello) loads first; this file only adds to it. */
html { scroll-behavior: smooth; }
body.tmb-site {
	font-family: var(--wp--preset--font-family--poppins, Poppins, system-ui, sans-serif);
	color: var(--wp--preset--color--ink, #3F4150);
	background: var(--wp--preset--color--white, #fff);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * Carried over from the Elementor kit (2473), which only loads on pages still
 * built in Elementor: the 18px base above, link colours, and page heading
 * defaults (sizes per breakpoint as the kit has them). Headings are limited to
 * page bodies so posts keep their own. Not carried over: the kit's fixed 18px
 * on every link, which made links larger than the text around them.
 * :where() keeps these at the weight of a bare element selector, so any
 * section or widget rule overrides them.
 */
:where(.tmb-site) a { color: var(--wp--preset--color--navy, #283071); }
:where(.tmb-site) a:hover { color: var(--wp--preset--color--burnt-orange, #C85A0E); }
:where(.tmb-site .tmb-page) h1 { font-size: 48px; font-weight: 600; line-height: 1.15; letter-spacing: -.5px; }
:where(.tmb-site .tmb-page) h2 { color: var(--wp--preset--color--navy, #283071); font-size: 36px; font-weight: 600; line-height: 1.25; letter-spacing: -.25px; }
:where(.tmb-site .tmb-page) h3 { color: var(--wp--preset--color--orange, #F57B20); font-size: 30px; font-weight: 700; line-height: 1.25; }
:where(.tmb-site .tmb-page) h4 { font-size: 22px; font-weight: 500; line-height: 1.35; }
@media (max-width: 1024px) {
	:where(.tmb-site .tmb-page) h1 { font-size: 40px; }
	:where(.tmb-site .tmb-page) h2 { font-size: 54px; letter-spacing: -2px; }
}
@media (max-width: 767px) {
	:where(.tmb-site .tmb-page) h1 { font-size: 32px; }
	:where(.tmb-site .tmb-page) h2 { font-size: 44px; }
}
.tmb-site :focus-visible { outline: 2px solid var(--wp--preset--color--orange, #F57B20); outline-offset: 2px; }

.tmb-site .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.tmb-site .tmb-skip {
	position: absolute; left: 12px; top: -60px; z-index: 100000;
	background: var(--wp--preset--color--navy, #283071); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.tmb-site .tmb-skip:focus { top: 12px; color: #fff; }

/* One content width for the whole site. */
.tmb-site .tmb-wrap { width: 100%; max-width: calc(1200px + 40px); margin: 0 auto; padding: 0 20px; }

/* Buttons: 54px tall, 8px corners, Poppins 700 16px. They change colour on
   hover and never grow (brand guide, section 04). */
.tmb-site .tmb-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 54px; padding: 12px 24px; border-radius: 8px; border: 2px solid transparent;
	font: 700 16px/1.2 var(--wp--preset--font-family--poppins, Poppins, sans-serif);
	text-decoration: none; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.tmb-site .tmb-btn--primary { background: var(--wp--preset--color--orange, #F57B20); border-color: var(--wp--preset--color--orange, #F57B20); color: #fff; box-shadow: 0 10px 24px -8px rgba(245, 123, 32, .5); }
.tmb-site .tmb-btn--primary:hover, .tmb-site .tmb-btn--primary:focus-visible { background: var(--wp--preset--color--burnt-orange, #C85A0E); border-color: var(--wp--preset--color--burnt-orange, #C85A0E); color: #fff; }
.tmb-site .tmb-btn--navy { background: var(--wp--preset--color--navy, #283071); border-color: var(--wp--preset--color--navy, #283071); color: #fff; }
.tmb-site .tmb-btn--navy:hover, .tmb-site .tmb-btn--navy:focus-visible { background: var(--wp--preset--color--deep-navy, #1B2150); border-color: var(--wp--preset--color--deep-navy, #1B2150); color: #fff; }
.tmb-site .tmb-btn--light { background: #fff; border-color: #fff; color: var(--wp--preset--color--navy, #283071); }
.tmb-site .tmb-btn--light:hover, .tmb-site .tmb-btn--light:focus-visible { background: var(--wp--preset--color--mist, #ECF0FB); border-color: var(--wp--preset--color--mist, #ECF0FB); color: var(--wp--preset--color--navy, #283071); }
.tmb-site .tmb-btn--sm { min-height: 46px; padding: 10px 24px; font-size: 14px; font-weight: 600; box-shadow: none; }

/* Small uppercase label over a heading. */
.tmb-site .tmb-eyebrow {
	display: inline-block; margin: 0 0 14px;
	font: 700 13px/1 var(--wp--preset--font-family--poppins, Poppins, sans-serif);
	letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--orange, #F57B20);
}

/* Long-form text (posts, plain pages). */
.tmb-site .tmb-prose { color: #20233A; font-size: 18px; line-height: 1.75; }
.tmb-site .tmb-prose > * { margin-top: 0; margin-bottom: 22px; }
.tmb-site .tmb-prose h2 { font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--wp--preset--color--navy, #283071); margin: 48px 0 16px; scroll-margin-top: 24px; }
.tmb-site .tmb-prose h3 { font-size: 21px; font-weight: 600; color: var(--wp--preset--color--navy, #283071); margin: 32px 0 12px; }
.tmb-site .tmb-prose ul, .tmb-site .tmb-prose ol { padding-left: 22px; }
.tmb-site .tmb-prose li { margin-bottom: 10px; line-height: 1.7; }
.tmb-site .tmb-prose a { color: #D9691A; text-decoration: underline; }
.tmb-site .tmb-prose a:hover { color: var(--wp--preset--color--burnt-orange, #C85A0E); }
.tmb-site .tmb-prose img { border-radius: 12px; }
.tmb-site .tmb-prose blockquote { border-left: 4px solid var(--wp--preset--color--orange, #F57B20); margin: 32px 0; padding: 6px 0 6px 24px; font-size: 22px; font-weight: 500; line-height: 1.5; color: var(--wp--preset--color--navy, #283071); }
.tmb-site .tmb-prose blockquote p:last-child { margin-bottom: 0; }

/* Search form. The bar is one piece: the field carries the border and the
   rounded left end, the button runs square into the right edge. Selectors name
   form + input + [name] to outrank the Elementor kit's input rules (0,3,1) on
   pages that still render through Elementor (the Blog page's search widget). */
.tmb-site form.tmb-search { display: flex; width: 100%; max-width: 940px; min-height: 55px; margin: 0; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: #fff; }
.tmb-site .tmb-search__field { position: relative; display: flex; flex: 1; min-width: 0; }
.tmb-site form.tmb-search input[type="search"][name="s"] {
	flex: 1; width: 100%; min-width: 0; height: auto; margin: 0; padding: 14px 18px; background: #fff;
	border: 1px solid #E2D9C8; border-right: 0; border-radius: 8px 0 0 8px; box-shadow: none;
	font: 400 16px/1.5 var(--wp--preset--font-family--poppins, Poppins, sans-serif); color: var(--wp--preset--color--navy, #283071);
}
.tmb-site form.tmb-search input[type="search"][name="s"]:focus { outline: none; border-color: #E2D9C8; }
.tmb-site form.tmb-search:focus-within { box-shadow: 0 0 0 2px var(--wp--preset--color--orange, #F57B20); }
.tmb-site form.tmb-search button[type="submit"] {
	flex: none; margin: 0; padding: 0 24px; border: 0; border-radius: 0;
	background: var(--wp--preset--color--orange, #F57B20); color: #fff;
	font: 600 16px/1 var(--wp--preset--font-family--poppins, Poppins, sans-serif); cursor: pointer;
}
.tmb-site form.tmb-search button[type="submit"]:hover { background: #CA651A; color: #fff; }

/* Scrolling hint, for a placeholder too long for the field (chrome.js decides).
   Kept in layout but invisible so it can be measured. */
.tmb-site .tmb-search__hint {
	position: absolute; top: 0; bottom: 0; left: 19px; right: 18px; display: flex; align-items: center;
	overflow: hidden; pointer-events: none; visibility: hidden; white-space: nowrap;
	font: 400 16px/1.5 var(--wp--preset--font-family--poppins, Poppins, sans-serif); color: #8A8FA8;
}
.tmb-site .tmb-search__track { display: inline-flex; flex: none; }
.tmb-site .tmb-search.is-scrolling input[type="search"][name="s"]::placeholder { color: transparent; }
.tmb-site .tmb-search.is-scrolling input[type="search"][name="s"]:placeholder-shown + .tmb-search__hint { visibility: visible; }
/* Pause at the start, slide to the end, pause, jump back. --tmb-hint-shift and
   --tmb-hint-time are set by chrome.js from how much text is hidden. */
.tmb-site .tmb-search.is-scrolling .tmb-search__track { animation: tmb-hint-scroll var(--tmb-hint-time, 6s) ease-in-out infinite; }
@keyframes tmb-hint-scroll {
	0%, 18% { transform: translateX(0); }
	72%, 100% { transform: translateX(var(--tmb-hint-shift, 0)); }
}

/* Block editor alignment inside full-width page content. */
.tmb-site .tmb-page > .alignwide { max-width: 1200px; margin-left: auto; margin-right: auto; }
.tmb-site .tmb-page > .alignfull { max-width: none; }

/* Links that should take their size from the surrounding text. While Elementor
   is installed its kit sets every link to 16px (.elementor-kit-2473 a); these
   rules hand the size back to the parent. Links with their own size elsewhere
   are not listed. */
.tmb-site .tmb-prose a, .tmb-site .tmb-fcontact a, .tmb-site .tmb-footer__legal a, .tmb-site .tmb-panel__slot a, .tmb-site .tmb-card__title a, .tmb-site .tmb-author a { font-size: inherit; line-height: inherit; letter-spacing: inherit; }
