/**
 * Theme container overrides for Component Page template.
 * Sections are full viewport width; .tdt-section-inner keeps inner content max-width.
 */

/* Astra */
body.tdt-component-page.page-template-component-page .site-content > .ast-container,
body.tdt-component-page.page-template-component-page #content > .ast-container,
body.tdt-component-page.page-template-component-page.ast-plain-container .site-content > .ast-container {
	display: block;
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

body.tdt-component-page.page-template-component-page.ast-separate-container .site-content > .ast-container {
	padding-left: 0;
	padding-right: 0;
}

body.tdt-component-page.page-template-component-page #primary {
	margin-left: 0;
	margin-right: 0;
}

body.tdt-component-page.page-template-component-page .site-content .ast-container .entry-content {
	padding-left: 0;
	padding-right: 0;
}

/* Kadence */
body.tdt-component-page.page-template-component-page .content-container.site-container,
body.tdt-component-page.page-template-component-page .site-container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* GeneratePress */
body.tdt-component-page.page-template-component-page .site-content .grid-container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/* Generic theme wrappers */
body.tdt-component-page.page-template-component-page .site-content > .container,
body.tdt-component-page.page-template-component-page #content > .container,
body.tdt-component-page.page-template-component-page .site-content > .wrap,
body.tdt-component-page.page-template-component-page #content > .wrap {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

/*
 * Client theme overrides
 *
 * Add site-specific rules below when the active theme or plugins inject layout,
 * header/footer, or typography that must be adjusted only on Component Pages.
 * Always use the full prefix: body.tdt-component-page.page-template-component-page
 *
 * Example (Arteak): hide theme banner elements that should not appear on component pages:
 * body.tdt-component-page.page-template-component-page .opi-head-banner,
 * body.tdt-component-page.page-template-component-page .opi-bandamenuhide {
 *     display: none !important;
 * }
 *
 * See tdt-documentation.md — "Client theme overrides (theme-layout.css)".
 */

/* Hide Beaver Builder node that should not appear on Component Pages. */
body.tdt-component-page.page-template-component-page .fl-node-5fd775d05e6ba {
	display: none !important;
}

/*
 * Brand typography — Inter within TDT components / entry content only
 * (Do not target bare h2/p/li — that leaks into header/footer.)
 */
body.tdt-component-page.page-template-component-page #primary .entry-content,
body.tdt-component-page.page-template-component-page #primary .entry-content h1,
body.tdt-component-page.page-template-component-page #primary .entry-content h2,
body.tdt-component-page.page-template-component-page #primary .entry-content h3,
body.tdt-component-page.page-template-component-page #primary .entry-content p,
body.tdt-component-page.page-template-component-page #primary .entry-content li,
body.tdt-component-page.page-template-component-page #primary .entry-content a,
body.tdt-component-page.page-template-component-page #primary .entry-content button,
body.tdt-component-page.page-template-component-page #primary .entry-content blockquote,
body.tdt-component-page.page-template-component-page .tdt-modal,
body.tdt-component-page.page-template-component-page .tdt-modal h1,
body.tdt-component-page.page-template-component-page .tdt-modal h2,
body.tdt-component-page.page-template-component-page .tdt-modal h3,
body.tdt-component-page.page-template-component-page .tdt-modal p,
body.tdt-component-page.page-template-component-page .tdt-modal li,
body.tdt-component-page.page-template-component-page .tdt-modal a,
body.tdt-component-page.page-template-component-page .tdt-modal button {
	font-family: "Inter", Helvetica, Arial, sans-serif !important;
}

/*
 * Brand typography — H2 (component content only)
 * Component dark/coloured sections may override color only (e.g. white on navy/blue).
 */
body.tdt-component-page.page-template-component-page #primary .entry-content h2,
body.tdt-component-page.page-template-component-page .tdt-modal h2 {
	font-family: "Inter", Helvetica, Arial, sans-serif !important;
	font-size: 27px !important;
	font-weight: 600 !important;
	line-height: 1.25em !important;
	color: #302664 !important;
}

/*
 * Brand typography — body copy (matches Text Media paragraphs)
 */
body.tdt-component-page.page-template-component-page #primary .entry-content p,
body.tdt-component-page.page-template-component-page .tdt-modal p {
	font-size: 18px !important;
	line-height: 1.7em !important;
}

body.tdt-component-page.page-template-component-page #primary .entry-content li,
body.tdt-component-page.page-template-component-page .tdt-modal li {
	font-size: 16px !important;
	line-height: 1.7em !important;
}

/*
 * Brand CTA buttons — shared style (matches Text Media)
 */
body.tdt-component-page.page-template-component-page #primary .entry-content a.tdt-cta,
body.tdt-component-page.page-template-component-page #primary .entry-content button.tdt-cta,
body.tdt-component-page.page-template-component-page .tdt-modal a.tdt-cta,
body.tdt-component-page.page-template-component-page .tdt-modal button.tdt-cta {
	display: inline-block;
	padding: 14px 28px !important;
	background: #302664 !important;
	background-color: #302664 !important;
	color: #ffffff !important;
	text-decoration: none !important;
	text-transform: none !important;
	border: 0 !important;
	border-radius: 4px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4em !important;
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease;
}

body.tdt-component-page.page-template-component-page #primary .entry-content a.tdt-cta:hover,
body.tdt-component-page.page-template-component-page #primary .entry-content a.tdt-cta:focus,
body.tdt-component-page.page-template-component-page #primary .entry-content button.tdt-cta:hover,
body.tdt-component-page.page-template-component-page #primary .entry-content button.tdt-cta:focus,
body.tdt-component-page.page-template-component-page .tdt-modal a.tdt-cta:hover,
body.tdt-component-page.page-template-component-page .tdt-modal a.tdt-cta:focus,
body.tdt-component-page.page-template-component-page .tdt-modal button.tdt-cta:hover,
body.tdt-component-page.page-template-component-page .tdt-modal button.tdt-cta:focus {
	background: #f79239 !important;
	background-color: #f79239 !important;
	color: #ffffff !important;
	text-decoration: none !important;
	outline: none;
}

/*
 * Force normal casing on all component CTAs / buttons (override theme uppercase).
 * Kept last so it wins over theme + component skin rules.
 */
body.tdt-component-page.page-template-component-page a.tdt-cta,
body.tdt-component-page.page-template-component-page a.tdt-cta:link,
body.tdt-component-page.page-template-component-page a.tdt-cta:visited,
body.tdt-component-page.page-template-component-page a.tdt-cta:hover,
body.tdt-component-page.page-template-component-page a.tdt-cta:focus,
body.tdt-component-page.page-template-component-page a.tdt-cta:active,
body.tdt-component-page.page-template-component-page button.tdt-cta,
body.tdt-component-page.page-template-component-page button.tdt-cta:hover,
body.tdt-component-page.page-template-component-page button.tdt-cta:focus,
body.tdt-component-page.page-template-component-page button.tdt-cta:active,
body.tdt-component-page.page-template-component-page #primary .entry-content a.tdt-cta,
body.tdt-component-page.page-template-component-page #primary .entry-content a.tdt-cta:hover,
body.tdt-component-page.page-template-component-page #primary .entry-content a.tdt-cta:focus,
body.tdt-component-page.page-template-component-page #primary .entry-content button.tdt-cta,
body.tdt-component-page.page-template-component-page #primary .entry-content button.tdt-cta:hover,
body.tdt-component-page.page-template-component-page #primary .entry-content button.tdt-cta:focus,
body.tdt-component-page.page-template-component-page [class*="tdt-"] a.tdt-cta,
body.tdt-component-page.page-template-component-page [class*="tdt-"] button.tdt-cta,
body.tdt-component-page.page-template-component-page [class*="tdt-"] a.tdt-cta:hover,
body.tdt-component-page.page-template-component-page [class*="tdt-"] button.tdt-cta:hover,
body.tdt-component-page.page-template-component-page .tdt-modal a.tdt-cta,
body.tdt-component-page.page-template-component-page .tdt-modal button.tdt-cta,
body.tdt-component-page.page-template-component-page .wpforms-form button.wpforms-submit,
body.tdt-component-page.page-template-component-page .wpforms-form .wpforms-submit,
body.tdt-component-page.page-template-component-page .wpforms-form button.wpforms-submit:hover,
body.tdt-component-page.page-template-component-page .wpforms-form .wpforms-submit:hover {
	text-transform: none !important;
}