/*
Theme Name: MaTri
Theme URI: https://ma-tri.com
Description: MaTri marketing child theme for Greenshift — brand palette + animated logo.
Author: MaTri
Version: 0.1.0
Template: greenshift
Text Domain: matri
*/
/* ==========================================================================
Resources page — category cards (2026 resource-library redesign)
Palette comes from Greenshift global vars: --gs-color-navy / lime / amber /
cream. Styled here in the child theme (enqueued site-wide) rather than the
Greenshift global-classes store since the cards are a self-contained block.
========================================================================== */
.matri-resources__sub,
.matri-resources .matri-section__sub {
max-width: 680px;
margin-left: auto;
margin-right: auto;
}
.matri-resources__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
margin-top: 2.5rem;
}
.matri-resources__card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(1, 67, 88, 0.08);
border-radius: 16px;
padding: 1.75rem 1.75rem 0.75rem;
box-shadow: 0 10px 30px rgba(1, 67, 88, 0.06);
}
.matri-resources__card-head {
display: flex;
align-items: center;
gap: 0.85rem;
padding-bottom: 1rem;
margin-bottom: 0.5rem;
border-bottom: 3px solid var(--gs-color-amber);
}
.matri-resources__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--gs-color-lime);
color: var(--gs-color-navy);
}
.matri-resources__icon-img { width: 24px; height: 24px; display: block; }
.matri-resources__card-title {
margin: 0;
font-size: 1.2rem;
font-weight: 900;
color: var(--gs-color-navy);
letter-spacing: 0.01em;
}
.matri-resources__list {
list-style: none;
margin: 0;
padding: 0;
}
.matri-resources__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.85rem 0;
border-bottom: 1px solid rgba(1, 67, 88, 0.08);
}
.matri-resources__item:last-child { border-bottom: 0; }
.matri-resources__doc {
font-weight: 700;
color: var(--gs-color-navy);
line-height: 1.3;
}
.matri-resources__actions {
flex: 0 0 auto;
display: flex;
gap: 0.5rem;
}
.matri-res-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: var(--gs-color-lime);
color: var(--gs-color-navy);
padding: 0.45rem 1rem;
border-radius: 999px;
font-weight: 800;
font-size: 0.85rem;
text-decoration: none;
white-space: nowrap;
transition: background 0.15s ease, transform 0.15s ease;
}
.matri-res-btn::before {
content: "\2193"; /* down arrow — signals download */
font-weight: 900;
}
.matri-res-btn:hover {
background: var(--gs-color-navy);
color: #fff;
transform: translateY(-1px);
}
@media (max-width: 720px) {
.matri-resources__grid { grid-template-columns: 1fr; }
.matri-resources__item { flex-wrap: wrap; }
}
/* Footer now has 3 columns (Documents, Contact Us, brand) after dropping the
Resources column — override the global 4-track grid so the brand stays
right-aligned with no empty trailing track. */
.matri-footer .matri-footer__inner { grid-template-columns: 1fr 1.2fr 1.4fr; }
/* Header logo: the "Freshinset Solutions" mark is two lines (taller, 2.56:1)
vs the old single-line wordmark, so bump it above the global 34px and trim
the brand's vertical padding to keep the header height stable. */
.matri-header .matri-header__brand-img { height: 50px; }
.matri-header .matri-header__brand { padding-top: 0.55rem; padding-bottom: 0.55rem; }
/* Blue rule lives on the header's bottom edge (under the logo / nav / language
links), so it appears on every page. The home hero therefore drops its own
top border — the line above it now comes from the header — and keeps only its
bottom border. Same 10px navy as before. */
.matri-header { border-bottom: 10px solid var(--gs-color-navy); }
.matri-hero:not(.matri-hero--intro-only) { border-top: 0; }
/* LinkedIn mark — real glyph (white SVG) on the dark footer, replacing the
old placeholder "in" text badge. Higher specificity than the global
.matri-footer__social rule so the white circle/italic text styling drops. */
.matri-footer .matri-footer__social {
background: transparent;
width: auto;
height: auto;
border-radius: 0;
opacity: 0.85;
transition: opacity 0.15s ease;
}
.matri-footer .matri-footer__social:hover { opacity: 1; }
.matri-footer__social-img { display: block; width: 24px; height: 24px; }
/* Footer contact: the "Contact Us:" label now sits inline with a green email
link (was a "Contact Us" column header above an "Email: ..." link). The two
classes beat the global `.matri-footer a` white/block rule. */
.matri-footer__contact-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; padding: .3rem 0; }
.matri-footer__contact-label { font-weight: 400; font-size: .95rem; }
.matri-footer a.matri-footer__email { display: inline; padding: 0; color: var(--gs-color-lime); font-weight: 700; }
.matri-footer a.matri-footer__email:hover { text-decoration: underline; }
/* Footer brand lockup: Freshinset Solutions + matri side by side, split by a
vertical rule, replacing the single stacked Freshinset mark. Both marks still
whiten via the existing .matri-footer__brand img brightness/invert filter. */
.matri-footer .matri-footer__brand { display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem; }
.matri-footer .matri-footer__brand img { margin: 0; }
/* Sizes match the supplied lockup reference: matri ≈ 0.565× the (two-line)
Freshinset Solutions height, divider ≈ full height, ~14px gap each side. */
.matri-footer .matri-footer__brand-fi { height: 54px; }
/* matri ships pre-coloured (white letters + lime leaves) for the navy footer,
so exempt it from the brand img whitening filter that flattens its leaves. */
.matri-footer .matri-footer__brand-matri { height: 30px; filter: none; }
.matri-footer__brand-divider { width: 2px; height: 50px; background: rgba(255, 255, 255, 0.55); flex: 0 0 auto; }
/* Mobile (<=900px, matching the global-classes collapse breakpoint): force the
remaining multi-column sections to a single column so nothing stays side-by-
side on a phone. The global query already collapses how/products/feature-band/
vidre/talk/footer; these are the sections it misses. */
@media (max-width: 900px) {
/* Footer brand lockup centres when the footer stacks. */
.matri-footer .matri-footer__brand { justify-content: center; }
/* MaTri Sure: the box|image grid stacks (text + steps over the product
image); drop the desktop -260px overlap pull + tall visual that only make
sense beside the banner on desktop. */
.matri-sure__grid { grid-template-columns: 1fr !important; margin-top: 1.5rem; gap: 1.5rem; }
.matri-sure__visual { min-height: 0; padding-top: 0; }
.matri-sure__steps { padding-left: 1.25rem; padding-right: 0; }
.matri-sure__left .matri-btn { margin-left: 1.25rem; }
/* MaTri System: colored num+label fills the full width as one row and the
value answer sits full width beneath it. Shrink the corner radius so the
rounded notch no longer eats into the colored block. */
.matri-system__step { grid-template-columns: auto 1fr !important; border-radius: 0 16px 0 16px; }
.matri-system__value { grid-column: 1 / -1 !important; }
/* MaTri Tablets: copy spans the full width, overlapping the product image
behind it (was pinned to the left half of a 2-col grid). */
.matri-tablets-band__inner { grid-template-columns: 1fr !important; }
/* MaTri Powder: heading runs to the full width (drop the 420px pouch
reserve), bullets become a single column, and the pouch sits inline
below (no -220px overlap pull on mobile). */
.matri-powder-band__inner { padding-right: 1.5rem !important; }
.matri-powder-bullets__inner { grid-template-columns: 1fr !important; }
.matri-powder-bullets__list { grid-template-columns: 1fr !important; }
.matri-powder-bullets__image { margin-top: 1rem !important; max-width: 240px; justify-self: center; }
/* Vidre+ band stacks to one column too (image above the copy). Doubled
class beats the global-classes `180px 1fr !important` rule regardless of
stylesheet order. */
.matri-vidre-band__inner.matri-vidre-band__inner { grid-template-columns: 1fr !important; gap: 1rem !important; }
.matri-vidre-band__image.matri-vidre-band__image { max-width: 220px !important; margin: 0 auto !important; }
.matri-vidre-band__body { text-align: center !important; }
}
/* Sticky footer for the chrome-less blank template (resources pages): keep the
theme's layout containers untouched (making entry-content flex breaks the
constrained-layout full-width breakout) and instead grow the content section
so header + section + footer fills the viewport, leaving no background strip
below the footer on tall screens. The subtracted value ~= header + footer
height; erring small keeps it strip-free across breakpoints. */
.page-template-blank .matri-resources { min-height: calc(100vh - 402px); }
/* Contact modal: the Message row spans the full form width and its textarea
fills it (CF7's default textarea cols left it narrow and offset); the Cancel
button drops its border. Specificity/!important needed to beat the
higher-specificity global modal rules. */
.matri-cf7-grid .matri-cf7-full { grid-column: 1 / -1; }
/* The Message is the last
inside the grid, so the global
`.wpcf7 p:last-of-type{display:flex;justify-content:flex-end}` (intended for
the actions row) was shrink-wrapping its label to the right. Force it back to
block so the textarea fills the row. */
.matri-contact-modal .matri-cf7-grid .matri-cf7-full { display: block; }
.matri-contact-modal .matri-cf7-grid .matri-cf7-full > label { display: block; width: 100%; }
.matri-contact-modal__panel textarea { width: 100% !important; box-sizing: border-box; display: block; }
.matri-contact-modal .matri-cf7-actions .matri-btn--outline,
.matri-contact-modal .matri-cf7-actions .matri-cf7-cancel { border: 0 !important; }