/* ============================================================
   Combined overrides: Dimension hero + brand fonts, ALL scoped
   under #tools-canvas. Loaded after Massively's (also scoped)
   main.css. Because every rule is scoped, nothing here can reach
   the site header/footer chrome rendered outside #tools-canvas.
   ============================================================ */

/* ---- Brand fonts (DM Serif Display headings, Inter body) ---- */
@import url("https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap");

#tools-canvas,
#tools-canvas input, #tools-canvas select, #tools-canvas textarea,
#tools-canvas button, #tools-canvas .button {
	font-family: "Inter", Helvetica, sans-serif !important;
}
#tools-canvas h1, #tools-canvas h2, #tools-canvas h3,
#tools-canvas h4, #tools-canvas h5, #tools-canvas h6 {
	font-family: "DM Serif Display", Georgia, serif !important;
	font-weight: 400;
}

/* ============================================================
   Dimension hero, transplanted from dimension/main.css and
   scoped to #dim-hero (which lives inside #tools-canvas). Real
   values; hero background is the generated brand image.
   ============================================================ */
#dim-hero {
	position: relative;
	min-height: clamp(460px, 80vh, 720px);
	overflow: hidden;
	background: #1b1f22;
	color: #ffffff;
}

#dim-hero .dh-bg {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 1;
}
#dim-hero .dh-bg:before,
#dim-hero .dh-bg:after {
	content: '';
	display: block;
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
}
#dim-hero .dh-bg:before {
	background-image: linear-gradient(to top, rgba(19, 21, 25, 0.45), rgba(19, 21, 25, 0.45)), url("../../images/dim-overlay.png");
	background-size: auto, 256px 256px;
	background-position: center, center;
	background-repeat: no-repeat, repeat;
	z-index: 2;
}
#dim-hero .dh-bg:after {
	background-image: url("../../images/hero.webp");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 1;
}

#dim-hero .dh-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: clamp(460px, 80vh, 720px);
	width: 100%;
	padding: 4rem 2rem;
	z-index: 3;
	text-align: center;
}

#dim-hero .dh-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-image: radial-gradient(rgba(0, 0, 0, 0.25) 25%, rgba(0, 0, 0, 0) 55%);
	max-width: 100%;
	text-align: center;
}
#dim-hero .dh-header > * {
	position: relative;
	margin-top: 3.5rem;
}
#dim-hero .dh-header > *:before {
	content: '';
	display: block;
	position: absolute;
	top: calc(-3.5rem - 1px);
	left: calc(50% - 1px);
	width: 1px;
	height: calc(3.5rem + 1px);
	background: #ffffff;
}
#dim-hero .dh-header > :first-child { margin-top: 0; }
#dim-hero .dh-header > :first-child:before { display: none; }

#dim-hero .logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.5rem;
	height: 5.5rem;
	border: solid 1px #ffffff;
	border-radius: 100%;
}
#dim-hero .logo .icon:before { font-size: 2rem; }

#dim-hero .content {
	border-style: solid;
	border-color: #ffffff;
	border-top-width: 1px;
	border-bottom-width: 1px;
	max-width: 100%;
}
#dim-hero .content .inner {
	padding: 2.75rem 2rem;
	max-width: 40rem;
}
#dim-hero .content h1 {
	font-size: 3.25rem;
	line-height: 1.1;
	margin: 0 0 1rem 0;
	color: #ffffff;
}
#dim-hero .content p {
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-size: 0.8rem;
	line-height: 2;
	margin: 0;
	color: #ffffff;
}

#dim-hero nav ul {
	display: inline-flex;
	margin: 0;
	list-style: none;
	padding-left: 0;
	border: solid 1px #ffffff;
	border-radius: 4px;
}
#dim-hero nav ul li {
	padding-left: 0;
	border-left: solid 1px #ffffff;
}
#dim-hero nav ul li:first-child { border-left: 0; }
#dim-hero nav ul li a {
	display: block;
	min-width: 7.5rem;
	height: 2.75rem;
	line-height: 2.75rem;
	padding: 0 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-size: 0.8rem;
	color: #ffffff;
	text-decoration: none;
	border-bottom: 0;
}
#dim-hero nav ul li a:hover { background-color: rgba(255, 255, 255, 0.075); }

@media screen and (max-width: 736px) {
	#dim-hero .dh-header > * { margin-top: 2rem; }
	#dim-hero .dh-header > *:before { top: calc(-2rem - 1px); height: calc(2rem + 1px); }
	#dim-hero .logo { width: 4.75rem; height: 4.75rem; }
	#dim-hero .content .inner { padding: 2.5rem 1rem; }
	#dim-hero .content h1 { font-size: 2.5rem; }
}
@media screen and (max-width: 480px) {
	#dim-hero nav ul { flex-direction: column; min-width: 10rem; max-width: 100%; }
	#dim-hero nav ul li { border-left: 0; border-top: solid 1px #ffffff; }
	#dim-hero nav ul li:first-child { border-top: 0; }
	#dim-hero nav ul li a { width: 100%; min-width: 0; }
}

/* ============================================================
   Newsletter band (advertises the general "Long Look" newsletter).
   2-class selectors on the form controls beat Massively's scoped
   input/button rules without !important.
   ============================================================ */
#tools-canvas .tools-newsletter {
	background: #2A9D8F;
	color: #ffffff;
	padding: 4rem 2rem;
	text-align: center;
}
#tools-canvas .tools-newsletter__inner { max-width: 44rem; margin: 0 auto; }
#tools-canvas .tools-newsletter h2 {
	color: #ffffff;
	font-size: 2rem;
	line-height: 1.15;
	margin: 0 0 1rem 0;
}
#tools-canvas .tools-newsletter p {
	color: #eafaf6;
	font-size: 1rem;
	line-height: 1.7;
	margin: 0 auto;
}
#tools-canvas .tools-newsletter .tools-signup {
	display: flex;
	gap: 0.5rem;
	max-width: 30rem;
	margin: 1.75rem auto 0.85rem;
}
#tools-canvas .tools-newsletter .tools-signup__email {
	flex: 1;
	min-width: 0;
	padding: 0.85rem 1rem;
	border: 0;
	border-radius: 4px;
	background: #ffffff;
	color: #1B2D4F;
	font-size: 1rem;
	box-shadow: none;
}
#tools-canvas .tools-newsletter .tools-signup__btn {
	background: #1B2D4F;
	color: #ffffff;
	border: 0;
	border-radius: 4px;
	padding: 0.85rem 1.6rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}
#tools-canvas .tools-newsletter .tools-signup__btn:hover { background: #16243f; }
#tools-canvas .tools-newsletter .tools-signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
#tools-canvas .tools-newsletter .tools-signup__status { color: #ffffff; font-weight: 600; margin: 0.5rem 0 0; }
#tools-canvas .tools-newsletter__fine { font-size: 0.8rem; color: #d6f1ec; margin: 0; }

@media screen and (max-width: 480px) {
	#tools-canvas .tools-newsletter .tools-signup { flex-direction: column; }
}

/* ============================================================
   Tools page only: dark CTA strip behind the original WHITE "book"
   boxes, giving a clear colour line down into the original light
   link columns below. combined.css loads on this template alone,
   so this touches no other page's footer. The boxes and the link
   section keep their normal light styling; only the strip behind
   them goes dark, and the "15-minute" fine print flips to light.
   ============================================================ */
.exhale-footer__cta-strip { background-color: #141414 !important; }
.exhale-cta-fine { color: #dcdcdc !important; }

/* ============================================================
   Worksheet card Download button: filled Deep Navy (#1B2D4F) with
   white text, replacing Massively's ghost/outline default (a dark
   blue outline that hovered to a light tint). Opt-in via the
   .tools-download class so only the worksheet Download buttons
   change; the apps' Open/Notify buttons keep the default style.
   Scoped to #tools-canvas .actions.
   ============================================================ */
#tools-canvas .actions .button.tools-download {
	background-color: #1B2D4F;
	box-shadow: none;
	color: #ffffff !important; /* beat the chrome's armored `a { color: ... !important }` (Download is an <a>) */
}
#tools-canvas .actions .button.tools-download:hover {
	background-color: #16243f;
	color: #ffffff !important;
}
#tools-canvas .actions .button.tools-download:active {
	background-color: #122039;
	color: #ffffff !important;
}


/* ============================================================
   Toolkit v3 additions (tk2-): a light name search over the
   Massively cards, and a homepage-style browse-by-topic picker
   (topic menu + picture panel). Scoped under #tools-canvas; the
   v1 cards (.posts/.actions/.image), hero, and newsletter are
   untouched. Palette: the four brand inks only.
   ============================================================ */

/* ---- Light name search ---- */
#tools-canvas .tk2-search { margin: 0 0 2.5rem; text-align: center; }
#tools-canvas .tk2-search input[type="search"] {
	width: 100%; max-width: 30rem; height: 3rem; margin: 0 auto;
	padding: 0 1.1rem; border: 1px solid #cfe3df; border-radius: 8px;
	background: #ffffff; color: #333; font-size: 1rem; box-shadow: none;
}
#tools-canvas .tk2-search input[type="search"]:focus { border-color: #2A9D8F; outline: none; box-shadow: 0 0 0 3px rgba(42,157,143,.18); }
#tools-canvas .tk2-noresults { text-align: center; color: #555; font-style: italic; margin: 0 0 2rem; }

/* ---- Browse by topic: menu + picture panel (the homepage pattern) ---- */
#tools-canvas .tk2-browse { display: flex; gap: 2.5rem; align-items: flex-start; margin: 0 0 1rem; }
#tools-canvas .tk2-browse__menu {
	flex: 0 0 16rem; display: flex; flex-direction: column; gap: .15rem;
	border-right: 1px solid #E6F5F4; padding-right: 1.5rem;
}
#tools-canvas .tk2-topic {
	display: block; width: 100%; text-align: left; cursor: pointer;
	padding: .7rem .75rem; border: 0; border-left: 3px solid transparent;
	background: none; color: #1B2D4F; font-size: 1.05rem; line-height: 1.3;
	box-shadow: none; transition: color .15s, border-color .15s;
}
#tools-canvas .tk2-topic:hover { color: #2A9D8F; }
#tools-canvas .tk2-topic[aria-selected="true"] { color: #2A9D8F; border-left-color: #2A9D8F; font-weight: 600; }
#tools-canvas .tk2-topic:focus-visible { outline: 2px solid #2A9D8F; outline-offset: 2px; }

#tools-canvas .tk2-browse__panel { flex: 1; min-width: 0; }
#tools-canvas .tk2-panel__media { width: 100%; border-radius: 14px; overflow: hidden; background: #E6F5F4; }
#tools-canvas .tk2-panel__img { width: 100%; height: auto; display: block; }
#tools-canvas .tk2-panel__body { text-align: center; padding: 1.25rem 1rem 0; }
#tools-canvas .tk2-panel__title { margin: 0 0 .35rem; color: #1B2D4F; }
#tools-canvas .tk2-panel__tag { margin: 0 0 .85rem; color: #555; }
#tools-canvas .tk2-panel__link { color: #2A9D8F; font-weight: 600; }
#tools-canvas .tk2-panel__link:hover { text-decoration: underline; }

@media screen and (max-width: 736px) {
	#tools-canvas .tk2-browse { flex-direction: column; gap: 1.5rem; }
	#tools-canvas .tk2-browse__menu {
		flex: none; flex-direction: row; flex-wrap: wrap; gap: .5rem;
		border-right: 0; border-bottom: 1px solid #E6F5F4; padding: 0 0 1.1rem;
	}
	#tools-canvas .tk2-topic {
		width: auto; border-left: 0; border-radius: 999px;
		padding: .5rem .95rem; background: #E6F5F4; font-size: .9rem;
	}
	#tools-canvas .tk2-topic[aria-selected="true"] { background: #2A9D8F; color: #ffffff; border-left: 0; }
}