/* ==========================================================================
   BOOTSTRAP BRIDGE
   --------------------------------------------------------------------------
   Bootstrap 5.3 builds every component out of CSS custom properties. So rather
   than overriding Bootstrap's rules with heavier selectors, we hand it our
   design tokens. Change a colour in Theme Options and .btn, .card, .navbar,
   .accordion, .pagination and the form controls all follow.

   No literal values in this file — everything reads from 01-tokens.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Global Bootstrap variables
   -------------------------------------------------------------------------- */

:root {

	/* Brand colours. The -rgb pairs are what Bootstrap uses for its rgba()
	   shadows and tints, and they come from the same tokens as the hexes. */
	--bs-primary: var(--mtfs-theme-2);
	--bs-primary-rgb: var(--mtfs-theme-2-rgb);

	--bs-secondary: var(--mtfs-gray);
	--bs-secondary-rgb: var(--mtfs-gray-rgb);

	--bs-dark: var(--mtfs-black-2);
	--bs-dark-rgb: var(--mtfs-black-2-rgb);

	--bs-light: var(--mtfs-gray-2);

	--bs-white: var(--mtfs-white);
	--bs-white-rgb: var(--mtfs-white-rgb);

	/* Typography */
	--bs-body-font-family: var(--mtfs-font-body);
	--bs-body-font-size: var(--mtfs-size-body-1);
	--bs-body-line-height: var(--mtfs-line-height);
	--bs-paragraph-margin-bottom: var(--mtfs-space-5);
	--bs-body-color: var(--mtfs-color-body);
	--bs-body-bg: var(--mtfs-white);
	--bs-heading-color: var(--mtfs-color-heading);
	--bs-secondary-color: var(--mtfs-color-muted);

	/* Links */
	--bs-link-color: var(--mtfs-color-primary);
	--bs-link-color-rgb: var(--mtfs-theme-2-rgb);
	--bs-link-hover-color: var(--mtfs-color-primary-hover);

	/* Borders and corners */
	--bs-border-color: var(--mtfs-color-border);
	--bs-border-radius: var(--mtfs-radius);
	--bs-border-radius-sm: var(--mtfs-radius-sm);
	--bs-border-radius-lg: var(--mtfs-radius);

	/* Surfaces */
	--bs-secondary-bg: var(--mtfs-color-surface);
	--bs-tertiary-bg: var(--mtfs-color-surface);
}

/* .text-muted is used across the templates for small meta text. */
.text-muted {
	color: var(--mtfs-color-muted) !important;
}


/* --------------------------------------------------------------------------
   2. Container width
   --------------------------------------------------------------------------
   --mtfs-container is the CONTENT width taken from the design (1280px). A
   Bootstrap container carries half a gutter of padding on each side, so the
   gutter is added back into max-width — otherwise every element would land
   12px inside where the design puts it.
   -------------------------------------------------------------------------- */

/* A row sets its gutter on itself, but a container's padding reads the same
   variable — so a row with a wider gutter than the container's default hangs
   12px past the viewport once the container stops being centred. Telling the
   container about the gutter puts the row's negative margins back inside the
   padding, and the max-width below adds the gutter back so the content edge
   does not move. */
.container:has(> .row.g-5) {
	--bs-gutter-x: 3rem;
}

@media (min-width: 992px) {

	.container:has(> .row.g-lg-5) {
		--bs-gutter-x: 3rem;
	}
}

@media (min-width: 1200px) {

	.container,
	.container-sm,
	.container-md,
	.container-lg,
	.container-xl,
	.container-xxl {
		max-width: calc(var(--mtfs-container) + var(--bs-gutter-x, 1.5rem));
	}
}


/* --------------------------------------------------------------------------
   3. Buttons
   --------------------------------------------------------------------------
   Each variant sets only Bootstrap's own --bs-btn-* variables, which is why
   hover, focus, active and disabled states keep working with no extra rules.
   -------------------------------------------------------------------------- */

.btn {
	--bs-btn-font-family: var(--mtfs-font-heading);
	--bs-btn-font-size: var(--mtfs-size-button);
	--bs-btn-font-weight: var(--mtfs-weight-button);
	--bs-btn-padding-y: var(--mtfs-space-3);
	--bs-btn-padding-x: var(--mtfs-space-5);
	--bs-btn-border-radius: var(--mtfs-radius-sm);
	--bs-btn-line-height: 1.4;
	--bs-btn-focus-box-shadow: var(--mtfs-focus-ring);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mtfs-space-2);

	/* The design draws every button at one height. Padding alone landed at
	   48px, so the height is set here and the padding is left to control the
	   width — a long label still gets its breathing room. */
	min-height: var(--mtfs-cta-h);
}

/* Primary — solid blue. "Request Quote" */
.btn-primary {
	--bs-btn-color: var(--mtfs-white);
	--bs-btn-bg: var(--mtfs-color-primary);
	--bs-btn-border-color: var(--mtfs-color-primary);
	--bs-btn-hover-color: var(--mtfs-white);
	--bs-btn-hover-bg: var(--mtfs-color-primary-hover);
	--bs-btn-hover-border-color: var(--mtfs-color-primary-hover);
	--bs-btn-active-color: var(--mtfs-white);
	--bs-btn-active-bg: var(--mtfs-color-primary-hover);
	--bs-btn-active-border-color: var(--mtfs-color-primary-hover);
	--bs-btn-disabled-color: var(--mtfs-white);
	--bs-btn-disabled-bg: var(--mtfs-color-primary);
	--bs-btn-disabled-border-color: var(--mtfs-color-primary);
}

/* Secondary — solid gray. "Explore Products" */
.btn-secondary {
	--bs-btn-color: var(--mtfs-white);
	--bs-btn-bg: var(--mtfs-gray);
	--bs-btn-border-color: var(--mtfs-gray);
	--bs-btn-hover-color: var(--mtfs-white);
	--bs-btn-hover-bg: var(--mtfs-black-2);
	--bs-btn-hover-border-color: var(--mtfs-black-2);
	--bs-btn-active-color: var(--mtfs-white);
	--bs-btn-active-bg: var(--mtfs-black-2);
	--bs-btn-active-border-color: var(--mtfs-black-2);
	--bs-btn-disabled-color: var(--mtfs-white);
	--bs-btn-disabled-bg: var(--mtfs-gray);
	--bs-btn-disabled-border-color: var(--mtfs-gray);
}

/* Outline — white fill, blue border. "Explore Products" */
.btn-outline-primary {
	--bs-btn-color: var(--mtfs-color-primary);
	--bs-btn-bg: var(--mtfs-white);
	--bs-btn-border-color: var(--mtfs-color-primary);
	--bs-btn-hover-color: var(--mtfs-white);
	--bs-btn-hover-bg: var(--mtfs-color-primary);
	--bs-btn-hover-border-color: var(--mtfs-color-primary);
	--bs-btn-active-color: var(--mtfs-white);
	--bs-btn-active-bg: var(--mtfs-color-primary-hover);
	--bs-btn-active-border-color: var(--mtfs-color-primary-hover);
}

/* Accent — solid orange, for a highlight call to action. */
.btn-accent {
	--bs-btn-color: var(--mtfs-white);
	--bs-btn-bg: var(--mtfs-color-accent);
	--bs-btn-border-color: var(--mtfs-color-accent);
	--bs-btn-hover-color: var(--mtfs-white);
	--bs-btn-hover-bg: var(--mtfs-color-accent-hover);
	--bs-btn-hover-border-color: var(--mtfs-color-accent-hover);
	--bs-btn-active-color: var(--mtfs-white);
	--bs-btn-active-bg: var(--mtfs-color-accent-hover);
	--bs-btn-active-border-color: var(--mtfs-color-accent-hover);
}

/* Link — blue text with a trailing arrow, no box. "Learn More" */
.btn-link {
	--bs-btn-color: var(--mtfs-color-primary);
	--bs-btn-hover-color: var(--mtfs-color-primary-hover);
	--bs-btn-padding-x: 0;
	--bs-btn-padding-y: 0;

	/* It is a line of text, not a button, so it does not take the button
	   height above — that padded every "Read More" out to 52px and made the
	   blog cards a line and a half taller than the design. */
	min-height: 0;

	text-decoration: none;
}

.btn-link:hover {
	text-decoration: none;
}

/* Hover -------------------------------------------------------------------
   Three things move together: the button lifts a little, picks up a shadow
   tinted with its own colour, and its trailing icon slides forward. The
   easing is a soft overshoot curve so it feels responsive rather than linear.

   transform and box-shadow only — neither triggers layout, so a row of
   buttons never reflows on hover. */

.btn {
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

.btn:hover {
	transform: translateY(-2px);
}

/* Pressing puts it back down, so the button feels physical. */
.btn:active {
	transform: translateY(0);
	transition-duration: 0.05s;
}

.btn-primary:hover {
	box-shadow: 0 8px 20px -6px rgba(var(--mtfs-theme-2-rgb), 0.55);
}

.btn-secondary:hover {
	box-shadow: 0 8px 20px -6px rgba(var(--mtfs-gray-rgb), 0.5);
}

.btn-accent:hover {
	box-shadow: 0 8px 20px -6px rgba(var(--mtfs-theme-1-rgb), 0.55);
}

.btn-outline-primary:hover {
	box-shadow: 0 8px 20px -6px rgba(var(--mtfs-theme-2-rgb), 0.35);
}

/* The text link has no box, so it slides instead of lifting. */
.btn-link:hover {
	transform: none;
	box-shadow: none;
}

.btn .mtfs-icon {
	transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover .mtfs-icon {
	transform: translateX(4px);
}

/* On a dark background the outline button inverts to white. */
.mtfs-section--dark .btn-outline-primary,
.mtfs-cta--image .btn-outline-primary {
	--bs-btn-color: var(--mtfs-white);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--mtfs-outline-on-dark);
	--bs-btn-hover-color: var(--mtfs-black-2);
	--bs-btn-hover-bg: var(--mtfs-white);
	--bs-btn-hover-border-color: var(--mtfs-white);
}


/* --------------------------------------------------------------------------
   4. Forms
   -------------------------------------------------------------------------- */

.form-control,
.form-select {
	--bs-border-radius: var(--mtfs-radius-sm);

	padding: var(--mtfs-space-3) var(--mtfs-space-4);
	border-color: var(--mtfs-color-border);

	/* Body leading is set for reading prose, and it made a five-row textarea
	   overshoot the design by a line and a half. Controls take the tighter
	   leading the design draws them with. */
	line-height: var(--mtfs-line-height-control);
}

.form-control:focus,
.form-select:focus {
	border-color: var(--mtfs-color-primary);
	box-shadow: var(--mtfs-focus-ring);
}

.form-control::placeholder {
	color: var(--mtfs-color-muted);
	opacity: 1;
}

.form-label {
	margin-bottom: var(--mtfs-space-2);
	font-weight: 600;
	color: var(--mtfs-color-heading);
}

.form-check-input:checked {
	background-color: var(--mtfs-color-primary);
	border-color: var(--mtfs-color-primary);
}

.form-check-input:focus {
	border-color: var(--mtfs-color-primary);
	box-shadow: var(--mtfs-focus-ring);
}


/* --------------------------------------------------------------------------
   5. Cards
   -------------------------------------------------------------------------- */

.card {
	--bs-card-border-color: var(--mtfs-color-border);
	--bs-card-border-radius: var(--mtfs-radius);
	--bs-card-spacer-y: var(--mtfs-space-6);
	--bs-card-spacer-x: var(--mtfs-space-6);
	--bs-card-cap-bg: var(--mtfs-color-surface);
	--bs-card-bg: var(--mtfs-white);

	transition: box-shadow var(--mtfs-transition), transform var(--mtfs-transition);
}

.card:hover {
	box-shadow: var(--mtfs-shadow);
	transform: translateY(-2px);
}

/* Keep every card image the same shape regardless of what was uploaded. */
.card-img-top {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.mtfs-card__media {
	overflow: hidden;
	border-radius: var(--mtfs-radius) var(--mtfs-radius) 0 0;
}

.card:hover .card-img-top {
	transform: scale(1.04);
}

.card-title {
	font-size: var(--mtfs-size-h5);
}

.card-title a {
	color: var(--mtfs-color-heading);
	text-decoration: none;
}

.card-title a:hover {
	color: var(--mtfs-color-primary);
}


/* --------------------------------------------------------------------------
   6. Accordion
   -------------------------------------------------------------------------- */

/* The frames draw the FAQ as separate white cards on the tinted band — no
   outline, 24 apart, 74 tall closed — rather than Bootstrap's single bordered
   stack. Opening one adds a hairline under its question and the answer below,
   inset to the same 24 as the text. */
.accordion {
	--bs-accordion-border-color: transparent;
	--bs-accordion-border-width: 0;
	--bs-accordion-border-radius: var(--mtfs-radius);
	--bs-accordion-inner-border-radius: var(--mtfs-radius);
	--bs-accordion-bg: var(--mtfs-white);
	--bs-accordion-btn-padding-y: var(--mtfs-faq-pad);
	--bs-accordion-btn-padding-x: var(--mtfs-faq-pad);
	--bs-accordion-body-padding-x: 0;
	--bs-accordion-body-padding-y: var(--mtfs-faq-pad);
	--bs-accordion-active-bg: var(--mtfs-white);
	--bs-accordion-active-color: var(--mtfs-color-heading);
	--bs-accordion-btn-focus-box-shadow: var(--mtfs-focus-ring);
}

.accordion-item {
	margin-bottom: var(--mtfs-faq-gap);
	border-radius: var(--mtfs-radius);
}

.accordion-item:last-child {
	margin-bottom: 0;
}

/* A question is set in the heading colour but at body weight — measured off
   the frames, where the string comes to 320px and only regular weight does. */
.accordion-button {
	font-family: var(--mtfs-font-heading);
	font-weight: var(--mtfs-weight-body);
	line-height: var(--mtfs-line-height);
	color: var(--mtfs-color-heading);
}

/* The rule between question and answer stops short of the card's edge, so it
   belongs to the answer's own box rather than to the card. */
.accordion-body {
	margin-inline: var(--mtfs-faq-pad);
	border-top: var(--mtfs-hairline) solid var(--mtfs-color-border);
	font-size: var(--mtfs-size-body-2);
	line-height: var(--mtfs-line-height-answer);
}

/* Bootstrap's chevron is a coloured background image, which cannot read a CSS
   variable. Swapping it for a mask lets the arrow inherit currentColor, so it
   matches the icon set and follows the accordion's active colour. */
.accordion-button::after {
	width: 1.1rem;
	height: 1.1rem;
	background-image: none;

	/* The frames draw the chevron in the accent orange whether the panel is
	   open or shut, so it does not follow the question's colour. */
	background-color: var(--mtfs-color-accent);
	-webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") center / contain no-repeat;
}


/* --------------------------------------------------------------------------
   7. Pagination
   -------------------------------------------------------------------------- */

.pagination {
	--bs-pagination-color: var(--mtfs-color-heading);
	--bs-pagination-bg: var(--mtfs-white);
	--bs-pagination-border-color: var(--mtfs-color-border);
	--bs-pagination-border-radius: var(--mtfs-radius-sm);
	--bs-pagination-hover-color: var(--mtfs-white);
	--bs-pagination-hover-bg: var(--mtfs-color-primary);
	--bs-pagination-hover-border-color: var(--mtfs-color-primary);
	--bs-pagination-active-bg: var(--mtfs-color-primary);
	--bs-pagination-active-border-color: var(--mtfs-color-primary);
	--bs-pagination-focus-box-shadow: var(--mtfs-focus-ring);

	gap: var(--mtfs-space-2);
}

/* WordPress marks the current page with .current, not Bootstrap's .active. */
.pagination .page-link.current {
	background: var(--mtfs-color-primary);
	border-color: var(--mtfs-color-primary);
	color: var(--mtfs-white);
}

.page-link {
	min-width: 2.75rem;
	text-align: center;
}


/* --------------------------------------------------------------------------
   8. Navigation
   --------------------------------------------------------------------------
   Bootstrap colours the current item through `.navbar-nav .nav-link.active`,
   which outranks the theme's own `.mtfs-nav .nav-link` — so the current page
   was picking up Bootstrap's default rather than the design's slate. Point
   the variables at the palette instead of escalating specificity to win it
   back, which is what the rest of this file does for every other component.
   -------------------------------------------------------------------------- */

.navbar-nav {
	--bs-nav-link-color: var(--mtfs-color-body);
	--bs-nav-link-hover-color: var(--mtfs-color-primary);

	/* The design draws the current page in the same slate as its neighbours;
	   05-header.css marks it with a permanent underline instead. */
	--bs-navbar-active-color: var(--mtfs-color-body);
}


/* --------------------------------------------------------------------------
   9. Dropdowns (navigation submenus)
   -------------------------------------------------------------------------- */

.dropdown-menu {
	--bs-dropdown-bg: var(--mtfs-white);
	--bs-dropdown-border-color: var(--mtfs-color-border);
	--bs-dropdown-border-radius: 0 0 var(--mtfs-radius-sm) var(--mtfs-radius-sm);
	--bs-dropdown-link-color: var(--mtfs-color-heading);
	--bs-dropdown-link-hover-bg: var(--mtfs-color-surface);
	--bs-dropdown-link-hover-color: var(--mtfs-color-primary);
	--bs-dropdown-link-active-bg: var(--mtfs-color-surface);
	--bs-dropdown-link-active-color: var(--mtfs-color-primary);
	--bs-dropdown-item-padding-y: var(--mtfs-space-3);
	--bs-dropdown-item-padding-x: var(--mtfs-space-4);
	--bs-dropdown-min-width: 14rem;

	margin-top: 0;
	box-shadow: var(--mtfs-shadow-lg);
}


/* --------------------------------------------------------------------------
   10. Offcanvas (mobile navigation drawer)
   -------------------------------------------------------------------------- */

.offcanvas {
	--bs-offcanvas-width: min(340px, 88vw);
	--bs-offcanvas-padding-x: 0;
	--bs-offcanvas-padding-y: 0;
	--bs-offcanvas-bg: var(--mtfs-white);
}

.offcanvas-header {
	padding: var(--mtfs-space-4);
	border-bottom: 1px solid var(--mtfs-color-border);
}


/* --------------------------------------------------------------------------
   11. Tables inside editor content
   -------------------------------------------------------------------------- */

.mtfs-prose table {
	width: 100%;
	margin-bottom: var(--mtfs-space-5);
	border: 1px solid var(--mtfs-color-border);
}

.mtfs-prose th,
.mtfs-prose td {
	padding: var(--mtfs-space-3);
	border: 1px solid var(--mtfs-color-border);
}

.mtfs-prose th {
	background: var(--mtfs-color-surface);
	color: var(--mtfs-color-heading);
}