/*
Theme Name: Betheme Child
Theme URI: https://themes.muffingroup.com/betheme
Author: Muffin group
Author URI: https://muffingroup.com
Description: Child Theme for Betheme
Template: betheme
Version: 2.0.2
*/

/* Design tokens: source of truth is DESIGN.md at the project root. */
:root {
	--q-navy: #05145a;       /* Harbor Navy: headings, header/footer, hero */
	--q-cyan: #14c8ec;       /* Signal Cyan: dark backgrounds only */
	--q-link: #0670a0;       /* Link Blue: small text and buttons on light (5.5:1) */
	--q-accent: #0a8cc4;     /* Accent Blue: large text and icons only (3.8:1) */
	--q-ink: #3a4150;        /* Body Ink */
	--q-form-ink: #1b2230;   /* Form Ink */
	--q-mist: #f4f7fa;       /* Manifest Mist: route cards */
	--q-grey: #fafafb;       /* Section Grey */
	--q-hairline: #d3deea;   /* 1px card border */
	--q-field: #8a94a6;      /* form field edge */
	--q-error: #b3261e;      /* validation messages */
	--q-font-ui: 'Arimo', Arial, sans-serif;
	--q-font-text: 'Source Serif 4', Georgia, 'Times New Roman', serif;
	--q-radius-sm: 4px;
	--q-radius-md: 6px;
}


/* Quadra Logistics: tighter menu spacing so logo, 7 items and CTA fit on one row */
#Top_bar #menu > ul > li > a span:not(.description) {
	padding-left: 12px;
	padding-right: 12px;
}

/* Lucide icons: shortcode output + theme glyph replacements */
.lucide-icon { display: inline-block; vertical-align: middle; flex: none; }
.lucide-icon.inline { vertical-align: -3px; margin-right: 8px; }

/* list_check bullets use Lucide "check" instead of the theme font glyph */
ul.list_check li:before {
	content: "";
	font-family: inherit;
	width: 18px;
	height: 18px;
	top: 3px;
	background-color: var(--q-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.25%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22 /%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.25%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22 /%3E%3C/svg%3E") center / contain no-repeat;
}

/* button arrows use Lucide "arrow-right" */
.button .button_icon i.icon-right-open,
a.button .button_icon i.icon-right-open {
	font-size: 0;
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.25%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22 /%3E %3Cpath d=%22m12 5 7 7-7 7%22 /%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.25%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 12h14%22 /%3E %3Cpath d=%22m12 5 7 7-7 7%22 /%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Polish pass ---- */

/* Contrast: var(--q-accent) is 3.8:1 on white. Small text and filled buttons use a darker shade (5.5:1). */
#Content a:not(.button):not(.lucide-icon),
#Content p .themecolor,
#Content h6 .themecolor,
.mfn-footer a:not(.button) { text-decoration-thickness: 1px; text-underline-offset: 3px; }
#Content p a:not(.button) { color: var(--q-link); text-decoration: underline; }
a.button.button_theme,
a.button.action_button,
#Top_bar a.action_button { background-color: var(--q-link) !important; color: #fff !important; }
a.button:hover { filter: brightness(1.12); }

/* Body copy: Arimo 300 grey is too faint. Use 400 and a darker grey, never under 15px. */
#Content p, #Content li { color: var(--q-ink); font-weight: 400; font-size: 17px; line-height: 1.7; }
#Content p.big { font-size: 19px; line-height: 1.7; }
#Content .section[style*="color"] p, #Content [style*="color: #fff"] { color: #fff; }

/* Keyboard focus: visible ring on every interactive element */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
.button:focus-visible { outline: 3px solid var(--q-cyan); outline-offset: 2px; }
#Content a:focus-visible, #Content input:focus-visible, #Content textarea:focus-visible { outline-color: var(--q-accent); }

/* Language switch: uppercase code, bigger tap area */
#Top_bar .menu-item-language a span, #Top_bar #menu li[class*="lang-item"] > a span { text-transform: uppercase; letter-spacing: .04em; }

/* Equal-height cards: columns in one row stretch, card background fills the column */
.mcb-wrap-inner { align-items: stretch; }
.column.one-third > .mcb-column-inner,
.column.one-third > .mcb-column-inner > .column_attr { height: 100%; }
.column.one-third > .mcb-column-inner > .column_attr { padding: 32px 28px; border-radius: 4px; }

/* Route cards: same card treatment as the home boxes, with a full hairline border (no side stripe) */
.column_attr:has(> h3.qh-5) {
	background: var(--q-mist);
	border: 1px solid var(--q-hairline);
	border-radius: 6px;
	padding: 24px 28px 22px !important;
	height: 100%;
}
.column:has(> .mcb-column-inner > .column_attr > h3.qh-5) { margin-bottom: 20px; }
.column:has(> .mcb-column-inner > .column_attr > h3.qh-5) > .mcb-column-inner { height: 100%; }
.column_attr:has(> h3.qh-5) p { margin-bottom: 0; }

/* Card titles are h3 (no skipped heading levels) but keep the old h4/h5/h6 visual sizes */
h3.qh { font-weight: 700; letter-spacing: 0; }
h3.qh-6 { font-size: 16px; line-height: 1.35; }
h3.qh-5 { font-size: 21px; line-height: 1.3; }
h3.qh-4 { font-size: 25px; line-height: 1.25; }

/* Service cards: image and text panel read as one card; check list rows without stray rules */
ul.list_check li { border-bottom: 0 !important; padding-bottom: 6px; }
ul.list_check li:after { display: none; }
ul.list_check li:before { top: 5px; }
.column_attr > .column.one-fourth { text-align: left; }

/* Contact form: left-aligned labels, visible field edges, sane textarea height */
.wpcf7 form p { margin: 0; }
.wpcf7 form br { display: none; }
.wpcf7 form label { display: block; text-align: left; font-weight: 600; color: var(--q-navy); font-size: 15px; margin-bottom: 14px; }
.wpcf7 form input[type="text"], .wpcf7 form input[type="email"], .wpcf7 form input[type="tel"],
.wpcf7 form input[type="date"], .wpcf7 form textarea {
	display: block; width: 100%; margin-top: 6px; background: #fff; color: var(--q-form-ink);
	border: 1.5px solid var(--q-field); border-radius: 4px; padding: 12px 14px; font-size: 16px; box-shadow: none;
}
.wpcf7 form input:focus, .wpcf7 form textarea:focus { border-color: var(--q-link); box-shadow: 0 0 0 3px rgba(10,140,196,.25); }
.wpcf7 form textarea { min-height: 110px; height: 110px; resize: vertical; }
.wpcf7 form input[type="submit"] { background: var(--q-link); color: #fff; border: 0; border-radius: 4px; padding: 14px 28px; font-size: 16px; min-height: 48px; cursor: pointer; }
.wpcf7-not-valid-tip { color: var(--q-error); font-size: 14px; }

/* Page-title bar aligns with content grid */
#Subheader .title { padding-left: 11px; }
/* Balanced wrapping: no one-word last lines in intros and headings */
#Content h1, #Content h2, #Content h3, #Content p.big { text-wrap: balance; }
/* Every button without an explicit colour uses the accessible accent (white on var(--q-link) = 5.5:1) */
a.button:not([style*="background"]) { background-color: var(--q-link) !important; color: #fff !important; }

/* Mobile: stack service cards, keep tap targets >= 44px */
@media (max-width: 767px) {
	.column.one-third > .mcb-column-inner,
	.column.one-third > .mcb-column-inner > .column_attr { height: auto; }
	a.button { min-height: 44px; }
	#Content p.big { font-size: 18px; }
}

/* Button on navy: label and arrow follow the anchor's navy color (theme forces the label white) */
a.button[style*="14c8ec"] .button_label,
a.button[style*="14c8ec"] .button_icon,
a.button[style*="14c8ec"] .button_icon i { color: var(--q-navy) !important; }
a.button[style*="background-color:#fff"] .button_label,
a.button[style*="background-color:#fff"] .button_icon i { color: var(--q-form-ink) !important; }


/* Typography pairing: Arimo for UI and headings, Source Serif 4 for running text */
body, .button, button, input, textarea, select, #Top_bar, .mfn-footer, #Footer, h1, h2, h3, h4, h5, h6 { font-family: var(--q-font-ui); }
#Content p, #Content li, .post-desc, .the_content { font-family: var(--q-font-text); }
/* Short UI lines stay in Arimo: card metadata, contact facts, form text, check lists.
   Prefixed with #Content so they outrank the paragraph rule above. */
#Content .column_attr:has(> h3.qh) p,
#Content .column_attr:has(> h3.qh) p a,
#Content .wpcf7 form, #Content .wpcf7 form p, #Content .wpcf7 form label,
#Content .wpcf7 form input, #Content .wpcf7 form textarea,
#Content .wpcf7-response-output, #Content .wpcf7-not-valid-tip,
#Content ul.list_check li { font-family: var(--q-font-ui); }

/* Blog list: card titles at heading-3 scale so long titles stay at 2-3 lines */
.blog_wrapper .post-item .post-title h2,
.blog_wrapper .post-item h2.entry-title { font-size: 26px; line-height: 1.25; }