/*
Theme Name: MTS Store
Theme URI: https://store.mientrungsoft.com
Description: Custom storefront theme for Mien Trung Soft — styled to match mientrungsoft.com (blue brand palette, Inter, soft rounded cards). Pairs with the MTS Store plugin to render the SuiteCRM plugin marketplace.
Author: Mien Trung Soft
Author URI: https://mientrungsoft.com
Version: 1.0.4
Text Domain: mts-store-theme
*/

/* =========================================================
   Brand tokens — lifted from mientrungsoft.com
   ========================================================= */
:root{
	--mt-primary:#1565c0;
	--mt-primary-soft:#e3f2fd;
	--mt-primary-dark:#0d47a1;
	--mt-accent:#1976d2;
	--mt-bg:#f8faff;
	--mt-text:#1a1a2e;
	--mt-muted:#6c757d;
	--mt-line:#e5e7eb;
	--mt-border-subtle:rgba(15,23,42,.06);
	--mt-radius:1.25rem;
	--mt-radius-sm:.75rem;
	--mt-shadow-soft:0 18px 45px rgba(15,23,42,.10);
	--mt-shadow-chip:0 10px 25px rgba(15,23,42,.08);
	--mt-nav-height:72px;
	--mt-gradient:linear-gradient(135deg,#1565c0 0%,#0d47a1 100%);
	--mt-gradient-light:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%);
}

/* =========================================================
   Base
   ========================================================= */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
	margin:0;
	font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	color:var(--mt-text);
	background:var(--mt-bg);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
a{ color:var(--mt-primary); text-decoration:none; }
a:hover{ color:var(--mt-primary-dark); }
img{ max-width:100%; height:auto; }
h1,h2,h3,h4{ color:var(--mt-text); font-weight:800; line-height:1.2; }

.mt-container{ max-width:1180px; margin:0 auto; padding:0 24px; }

.mt-btn{
	display:inline-flex; align-items:center; gap:8px;
	background:var(--mt-gradient); color:#fff !important;
	font-weight:700; font-size:14px;
	padding:11px 22px; border-radius:999px; border:0;
	box-shadow:var(--mt-shadow-chip); cursor:pointer;
	transition:transform .12s ease, box-shadow .12s ease;
}
.mt-btn:hover{ transform:translateY(-2px); box-shadow:var(--mt-shadow-soft); color:#fff; }
.mt-btn-ghost{
	background:#fff; color:var(--mt-primary) !important;
	border:1px solid var(--mt-line); box-shadow:none;
}
.mt-btn-ghost:hover{ background:var(--mt-primary-soft); }

/* =========================================================
   Header / navigation  (white sticky bar, like the main site)
   ========================================================= */
.mt-site-header{
	position:sticky; top:0; z-index:1000;
	background:rgba(255,255,255,.92);
	backdrop-filter:saturate(180%) blur(10px);
	border-bottom:1px solid var(--mt-border-subtle);
}
.mt-nav{
	height:var(--mt-nav-height);
	display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.mt-logo-link{ display:inline-flex; align-items:center; }
.mt-logo{ height:38px; width:auto; display:block; }
.mt-nav-menu{
	list-style:none; display:flex; align-items:center; gap:26px;
	margin:0; padding:0;
}
.mt-nav-menu a{
	color:var(--mt-text); font-weight:600; font-size:14.5px;
	padding:6px 2px; position:relative;
}
.mt-nav-menu a:hover{ color:var(--mt-primary); }
.mt-nav-menu .current-menu-item > a,
.mt-nav-menu .current_page_item > a{ color:var(--mt-primary); }
.mt-nav-right{ display:flex; align-items:center; gap:16px; }

.mt-nav-toggle{
	display:none; background:none; border:0; cursor:pointer;
	width:40px; height:40px; padding:8px;
}
.mt-nav-toggle span{ display:block; height:2px; background:var(--mt-text); margin:5px 0; border-radius:2px; transition:.2s; }

/* =========================================================
   Footer  (dark navy, brand gradient — mirrors the main site)
   ========================================================= */
.mt-site-footer{
	background:linear-gradient(160deg,#0d1b3e 0%,#0d47a1 100%);
	color:#c7d2fe; margin-top:64px;
	padding:56px 0 28px;
}
.mt-footer-grid{
	display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
}
.mt-footer-logo{ height:40px; width:auto; margin-bottom:16px; filter:brightness(0) invert(1); opacity:.95; }
.mt-footer-about{ font-size:14px; color:#aeb9e0; max-width:320px; }
.mt-footer-col h4{ color:#fff; font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin:0 0 16px; }
.mt-footer-col ul{ list-style:none; margin:0; padding:0; }
.mt-footer-col li{ margin-bottom:10px; }
.mt-footer-col a{ color:#c7d2fe; font-size:14px; }
.mt-footer-col a:hover{ color:#fff; }
.mt-footer-contact div{ font-size:14px; margin-bottom:10px; color:#c7d2fe; }
.mt-footer-contact b{ color:#fff; font-weight:600; }
.mt-footer-bottom{
	border-top:1px solid rgba(255,255,255,.12);
	margin-top:40px; padding-top:22px;
	display:flex; justify-content:space-between; align-items:center; gap:16px;
	font-size:13px; color:#93a3d8; flex-wrap:wrap;
}
.mt-footer-langs{ display:flex; gap:14px; }
.mt-footer-langs a{ color:#93a3d8; }
.mt-footer-langs a:hover{ color:#fff; }

/* =========================================================
   Generic page / post content
   ========================================================= */
.mt-page{ padding:48px 0; }
.mt-page-title{ font-size:32px; margin:0 0 24px; }
.mt-content{ max-width:760px; }
.mt-content p{ color:#33405a; }

/* =========================================================
   Retint the MTS Store plugin to the blue brand palette.
   The plugin exposes these as :root vars specifically so a
   theme can override them without touching its markup.
   Loaded AFTER the plugin CSS (dependency in functions.php).
   ========================================================= */
:root{
	--mts-indigo:#1565c0;
	--mts-indigo-2:#1976d2;
	--mts-sky:#42a5f5;
	--mts-navy:#0d1b3e;
	--mts-navy-2:#0d47a1;
	--mts-navy-3:#1565c0;
	--mts-bg:#f8faff;
}
/* eyebrow / hero accents to match the blue palette */
.mts-hero-section{ background:radial-gradient(ellipse at top left,#1565c0 0%,#0d1b3e 60%) !important; }
.mts-eyebrow{ color:#bbdefb !important; background:rgba(21,101,192,.25) !important; border-color:rgba(66,165,245,.4) !important; }
.mts-pin{ background:var(--mt-primary-soft) !important; color:var(--mt-primary) !important; }

/* Keep hero copy light — the theme's global dark heading colour must not win here. */
.mts-hero-section h1,
.mts-hero-inner h1{ color:#ffffff !important; }
.mts-hero-inner h1 span{ background:linear-gradient(90deg,#8ed1fc,#42a5f5) !important; -webkit-background-clip:text !important; background-clip:text !important; color:transparent !important; }
.mts-hero-inner p{ color:#dbe4ff !important; }

/* SEO intro block on the home page */
.mts-seo-intro{ padding-top:8px; }
.mts-seo-intro-inner{ max-width:820px; }
.mts-seo-intro h2{ font-size:24px; margin:6px 0 12px; }
.mts-seo-intro p{ color:#33405a; font-size:15.5px; line-height:1.75; }
.mts-seo-intro a{ color:var(--mt-primary); text-decoration:underline; }
.mts-seo-cats{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; font-size:13.5px; }
.mts-seo-cats > span{ color:var(--mt-muted); font-weight:600; }
.mts-seo-cats a{
	background:var(--mt-primary-soft); color:var(--mt-primary-dark);
	padding:5px 12px; border-radius:20px; text-decoration:none; font-weight:600;
}
.mts-seo-cats a:hover{ background:var(--mt-gradient-light); }

/* Breadcrumbs in theme */
.mts-breadcrumb{ margin:0 0 22px; }
.mts-breadcrumb-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; line-height:1.5; }
.mts-breadcrumb-item{ display:inline-flex; align-items:center; color:var(--mt-muted); }
.mts-breadcrumb-item a{ color:var(--mt-muted); text-decoration:none; font-weight:500; transition:color .15s; }
.mts-breadcrumb-item a:hover{ color:var(--mt-primary); text-decoration:underline; }
.mts-breadcrumb-separator{ color:#cbd5e1; font-size:13px; user-select:none; }
.mts-breadcrumb-item.active{ color:var(--mt-text); font-weight:600; }

/* Active tab color override */
.mts-tab.active{ color:var(--mt-primary) !important; border-bottom-color:var(--mt-primary) !important; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:860px){
	.mt-nav-toggle{ display:block; }
	.mt-nav-menu{
		position:absolute; top:var(--mt-nav-height); left:0; right:0;
		flex-direction:column; align-items:flex-start; gap:0;
		background:#fff; border-bottom:1px solid var(--mt-border-subtle);
		padding:8px 24px 16px; display:none;
	}
	.mt-nav-menu.is-open{ display:flex; }
	.mt-nav-menu li{ width:100%; }
	.mt-nav-menu a{ display:block; padding:12px 0; width:100%; }
	.mt-footer-grid{ grid-template-columns:1fr; gap:32px; }
}