/* TLM Communications Website — base styles. Page layouts are Elementor; this is the shell around them. */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(../fonts/montserrat-latin.woff2) format("woff2");
}
@font-face {
	font-family: "Josefin Sans";
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url(../fonts/josefin-sans-latin.woff2) format("woff2");
}

:root {
	--tlm-blue: #0068cd;
	--tlm-red: #d90000;
	--tlm-red-dark: #ad0000;
	--tlm-ink: #212121;
	--tlm-muted: #555555;
	--tlm-line: #dddddd;
	--tlm-pale: #f2f7fc;
	--tlm-body-font: "Montserrat", Arial, sans-serif;
	--tlm-heading-font: "Josefin Sans", Arial, sans-serif;
	--tlm-gutter: clamp(20px, 3.5vw, 50px);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: #ffffff;
	color: var(--tlm-ink);
	font-family: var(--tlm-body-font);
	font-size: 16px;
	font-weight: 300; /* Montserrat Light, as on theloopmarketing.com */
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--tlm-ink);
	font-family: var(--tlm-heading-font);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	overflow-wrap: break-word;
}
h1 { font-weight: 600; }
h3, h4, h5, h6 { font-weight: 500; }
strong, b { font-weight: 600; }

/* Paragraphs start flush so spacing comes from Elementor (widget margin / Paragraph Spacing). */
p { margin: 0 0 1em; }

a { color: var(--tlm-blue); }
a:hover { color: var(--tlm-red); }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; }

:focus-visible { outline: 3px solid var(--tlm-blue); outline-offset: 3px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.tlm-skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000;
	padding: 10px 16px;
	background: var(--tlm-ink);
	color: #ffffff;
	text-decoration: none;
}
.tlm-skip-link:focus { top: 16px; color: #ffffff; }

.tlm-content:focus { outline: none; }

/* Buttons used outside Elementor (404, fallbacks). */
.tlm-button {
	display: inline-block;
	padding: 14px 26px;
	border: 2px solid var(--tlm-red);
	background: var(--tlm-red);
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
}
.tlm-button:hover { border-color: var(--tlm-red-dark); background: var(--tlm-red-dark); color: #ffffff; }

.tlm-eyebrow {
	margin: 0 0 12px;
	color: var(--tlm-blue);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Pages and posts not built with Elementor. */
.tlm-entry {
	max-width: 820px;
	margin: 0 auto;
	padding: 64px var(--tlm-gutter) 80px;
}
.tlm-entry-title { font-size: clamp(32px, 4vw, 48px); }
.tlm-404 { text-align: center; padding-block: 96px; }
.tlm-post-list { padding-left: 1.2em; }

/* Fallback header (only when no Elementor header template is assigned). */
.tlm-header { border-bottom: 1px solid var(--tlm-line); }
.tlm-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px var(--tlm-gutter);
}
.tlm-header .custom-logo { display: block; width: 126px; height: auto; }
.tlm-site-name { color: var(--tlm-ink); font-family: var(--tlm-heading-font); font-size: 22px; font-weight: 700; text-decoration: none; }
.tlm-menu, .tlm-footer-menu { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.tlm-menu a { color: var(--tlm-ink); text-decoration: none; }
.tlm-menu a:hover, .tlm-menu .current-menu-item > a { color: var(--tlm-blue); }
.tlm-menu-toggle { display: none; padding: 10px; border: 0; background: none; cursor: pointer; }
.tlm-menu-toggle-bars, .tlm-menu-toggle-bars::before, .tlm-menu-toggle-bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--tlm-ink);
	content: "";
}
.tlm-menu-toggle-bars { position: relative; }
.tlm-menu-toggle-bars::before { position: absolute; top: -7px; }
.tlm-menu-toggle-bars::after { position: absolute; top: 7px; }

@media (max-width: 767px) {
	.tlm-header-inner { flex-wrap: wrap; }
	.tlm-menu-toggle { display: block; }
	.tlm-nav { display: none; width: 100%; }
	.tlm-nav.is-open { display: block; }
	.tlm-menu { flex-direction: column; gap: 0; }
	.tlm-menu a { display: block; padding: 10px 0; border-top: 1px solid var(--tlm-line); }
}

/* Fallback footer. */
.tlm-footer { border-top: 1px solid var(--tlm-line); color: var(--tlm-muted); font-size: 14px; }
.tlm-footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding: 24px var(--tlm-gutter);
}
.tlm-footer-inner p { margin: 0; }
.tlm-footer-menu a { color: var(--tlm-muted); }