/*
Theme Name: GMT Trade Portal
Theme URI: https://gmining.best4taste.cn
Description: Professional red corporate front-end theme for Global Mining Trade — customer & supplier portal with a world-map hero. Integrates with the GMT ERP plugin [gmt_portal] shortcode.
Author: GMT ERP
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: gmt-trade-portal
*/

:root{
  --red-1:#5e0a0a;
  --red-2:#9e1414;
  --red-3:#cf1717;
  --red-4:#ff3b30;
  --gold:#e6b54a;
  --ink:#120c0b;
  --soft:#574c4b;
  --line:#eadcdc;
  --white:#fff;
  --canvas:#fcfafa;
  --shadow:0 10px 40px rgba(94,10,10,.16);
  --shadow-sm:0 2px 10px rgba(94,10,10,.09);
  --shadow-card:0 1px 3px rgba(21,16,15,.06),0 10px 30px rgba(21,16,15,.05);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--canvas);line-height:1.6;font-size:16px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:var(--red-2);text-decoration:none;transition:color .15s}
a:hover{color:var(--red-3)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{letter-spacing:-.02em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.gmt-container{max-width:1200px;margin:0 auto;padding:0 28px}

/* ── Buttons ────────────────────────────────────────────────── */
.gmt-btn{display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--red-2)!important;
  font-weight:700;font-size:15px;padding:13px 26px;border-radius:11px;box-shadow:var(--shadow-sm);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s;border:none;cursor:pointer;letter-spacing:.01em}
.gmt-btn:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--red-1)!important}
.gmt-btn--ghost{background:rgba(255,255,255,.08);color:#fff!important;border:1.5px solid rgba(255,255,255,.45);backdrop-filter:blur(4px)}
.gmt-btn--ghost:hover{background:rgba(255,255,255,.16);color:#fff!important}
.gmt-btn--lg{padding:16px 36px;font-size:16px;border-radius:13px}
.gmt-btn--red{background:linear-gradient(135deg,var(--red-2),var(--red-3));color:#fff!important;box-shadow:0 6px 20px rgba(207,23,23,.34)}
.gmt-btn--red:hover{color:#fff!important;box-shadow:0 10px 28px rgba(207,23,23,.45)}

/* ── Header / Nav ───────────────────────────────────────────── */
.gmt-site-header{
  background:linear-gradient(180deg,#5e0a0a,#480808);
  color:#fff;position:sticky;top:0;z-index:100;
  box-shadow:0 4px 18px rgba(72,8,8,.35);
}
.gmt-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:24px}
.gmt-brand{display:flex;align-items:center;gap:13px;color:#fff}
.gmt-brand__logo{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);overflow:hidden;flex-shrink:0}
.gmt-brand__logo img{max-width:100%;max-height:100%;object-fit:contain}
.gmt-brand__logo svg{width:27px;height:27px;fill:#fff}
.gmt-brand__name{font-size:19px;font-weight:800;line-height:1.05;letter-spacing:-.01em}
.gmt-brand__tag{font-size:11.5px;color:rgba(255,255,255,.85);letter-spacing:.02em;font-weight:500}
.gmt-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.gmt-menu>li{position:relative}
.gmt-menu>li>a{
  color:#fff;font-size:15px;font-weight:600;padding:9px 16px;border-radius:9px;
  transition:color .15s,background .15s;
}
.gmt-menu>li>a:hover{background:rgba(255,255,255,.1);color:#fff}
.gmt-menu>li.current-menu-item>a{background:rgba(255,255,255,.14);color:#fff}
.gmt-menu-toggle{display:none;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;padding:4px 8px}

/* ── Hero with world map ────────────────────────────────────── */
.gmt-hero{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(120% 120% at 80% 0%,#b81616 0%,#9e1414 38%,#5e0a0a 100%)}
.gmt-hero__map{position:absolute;inset:0 0 0 35%;z-index:1;opacity:.38;
  background-position:right center;background-repeat:no-repeat;background-size:auto 78%}
.gmt-hero__glow{position:absolute;z-index:1;right:-160px;top:-160px;width:560px;height:560px;
  background:radial-gradient(circle,rgba(230,181,74,.28),transparent 62%);pointer-events:none}
.gmt-hero__glow2{position:absolute;z-index:1;left:-120px;bottom:-180px;width:480px;height:480px;
  background:radial-gradient(circle,rgba(255,59,48,.4),transparent 64%);pointer-events:none}
.gmt-hero .gmt-container{position:relative;z-index:3}
.gmt-hero__inner{max-width:660px;padding:96px 0 110px}
.gmt-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.24);padding:7px 16px;border-radius:30px;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:22px;backdrop-filter:blur(4px)}
.gmt-hero__eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.gmt-hero h1{font-size:54px;font-weight:900;line-height:1.04;margin:0 0 20px;
  text-shadow:0 1px 2px rgba(0,0,0,.3)}
.gmt-hero h1 .accent{color:var(--gold)}
.gmt-hero p{font-size:19px;color:#fff;opacity:.95;margin:0 0 34px;max-width:560px;line-height:1.6}
.gmt-hero__cta{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:768px){.gmt-hero h1{font-size:36px}.gmt-hero__inner{padding:64px 0 76px}.gmt-hero__map{opacity:.28}}

/* Pulsing trade dots on the map */
.gmt-dot{position:absolute;z-index:2;width:9px;height:9px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(230,181,74,.7)}
.gmt-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--gold);
  animation:gmtPulse 2.6s infinite}
@keyframes gmtPulse{0%{box-shadow:0 0 0 0 rgba(230,181,74,.55);opacity:1}
  70%{box-shadow:0 0 0 18px rgba(230,181,74,0);opacity:.7}100%{box-shadow:0 0 0 0 rgba(230,181,74,0);opacity:1}}

/* ── Stats strip ────────────────────────────────────────────── */
.gmt-stats{background:var(--white);border-bottom:1px solid var(--line);box-shadow:var(--shadow-card);position:relative;z-index:5}
.gmt-stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.gmt-stat{padding:32px 20px;text-align:center;border-right:1px solid var(--line)}
.gmt-stat:last-child{border-right:none}
.gmt-stat__num{font-size:40px;font-weight:900;line-height:1;color:var(--red-3)}
.gmt-stat__lbl{font-size:12px;color:var(--soft);text-transform:uppercase;letter-spacing:.08em;margin-top:9px;font-weight:700}
@media(max-width:768px){.gmt-stats__grid{grid-template-columns:repeat(2,1fr)}.gmt-stat:nth-child(2){border-right:none}.gmt-stat:nth-child(1),.gmt-stat:nth-child(2){border-bottom:1px solid var(--line)}}

/* ── Sections ───────────────────────────────────────────────── */
.gmt-section{padding:86px 0}
.gmt-section--alt{background:var(--white)}
.gmt-section__head{text-align:center;max-width:660px;margin:0 auto 52px}
.gmt-section__eyebrow{color:var(--red-3);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.14em}
.gmt-section h2{font-size:38px;font-weight:900;margin:12px 0 14px;color:var(--ink)}
.gmt-section__head p{font-size:17px;color:var(--soft);margin:0;line-height:1.6}

/* ── Feature cards ──────────────────────────────────────────── */
.gmt-features{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.gmt-feature{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:32px;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,border-color .2s;box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.gmt-feature::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--red-2),var(--red-4));transition:width .3s}
.gmt-feature:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#f0c4c4}
.gmt-feature:hover::before{width:100%}
.gmt-feature__icon{width:56px;height:56px;border-radius:14px;
  background:linear-gradient(135deg,var(--red-2),var(--red-3));color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:27px;margin-bottom:20px;
  box-shadow:0 6px 16px rgba(158,20,20,.3)}
.gmt-feature h3{font-size:19px;font-weight:800;margin:0 0 9px}
.gmt-feature p{color:var(--soft);font-size:15px;margin:0;line-height:1.6}
@media(max-width:900px){.gmt-features{grid-template-columns:1fr}}

/* ── Portal band ────────────────────────────────────────────── */
.gmt-portal-band{position:relative;overflow:hidden;border-radius:24px;padding:56px;text-align:center;
  background:radial-gradient(120% 140% at 0% 0%,#b81616,#5e0a0a 70%);color:#fff;box-shadow:var(--shadow)}
.gmt-portal-band::after{content:"";position:absolute;right:-80px;bottom:-120px;width:380px;height:380px;
  background:radial-gradient(circle,rgba(230,181,74,.22),transparent 65%)}
.gmt-portal-band__in{position:relative;z-index:2}
.gmt-portal-band h2{color:#fff;font-size:32px;margin:0 0 12px}
.gmt-portal-band p{color:rgba(255,255,255,.86);font-size:17px;margin:0 0 28px}
.gmt-portal-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px;text-align:left}
.gmt-portal-card{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:26px;
  transition:.2s;backdrop-filter:blur(4px)}
.gmt-portal-card:hover{background:rgba(255,255,255,.15);transform:translateY(-3px)}
.gmt-portal-card__icon{font-size:32px;margin-bottom:12px}
.gmt-portal-card h4{margin:0 0 7px;font-size:18px;color:#fff;font-weight:800}
.gmt-portal-card p{font-size:13.5px;margin:0;color:rgba(255,255,255,.8)}
@media(max-width:900px){.gmt-portal-cards{grid-template-columns:1fr}.gmt-portal-band{padding:34px}}

/* ── Portal page wrapper ────────────────────────────────────── */
.gmt-portal-wrap{max-width:1200px;margin:36px auto;padding:0 28px;min-height:55vh}
.gmt-portal-hero{position:relative;overflow:hidden;border-radius:18px;padding:32px 38px;margin-bottom:26px;
  background:radial-gradient(120% 140% at 0% 0%,#b81616,#5e0a0a 75%);color:#fff;box-shadow:var(--shadow-sm)}
.gmt-portal-hero h1{margin:0;font-size:27px;font-weight:800}
.gmt-portal-hero p{margin:7px 0 0;color:rgba(255,255,255,.82);font-size:14px}

/* ── Content pages ──────────────────────────────────────────── */
.gmt-page{max-width:840px;margin:56px auto;padding:0 28px}
.gmt-page h1{font-size:40px;font-weight:900;color:var(--ink);margin:0 0 10px}
.gmt-page .gmt-lead{font-size:19px;color:var(--soft);margin-bottom:32px;line-height:1.6}
.gmt-page h2{color:var(--red-2);font-size:27px;margin-top:40px}
.gmt-content{font-size:16.5px;line-height:1.75}

/* ── Footer ─────────────────────────────────────────────────── */
.gmt-footer{background:#1a1110;color:rgba(255,255,255,.68);padding:56px 0 28px}
.gmt-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;margin-bottom:34px}
.gmt-footer h4{color:#fff;font-size:13px;margin:0 0 15px;text-transform:uppercase;letter-spacing:.08em}
.gmt-footer a{color:rgba(255,255,255,.68);display:block;padding:5px 0;font-size:14px;transition:.15s}
.gmt-footer a:hover{color:var(--red-4);transform:translateX(3px)}
.gmt-footer__brand{display:flex;align-items:center;gap:12px;margin-bottom:15px;color:#fff;font-weight:800;font-size:18px}
.gmt-footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:13px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:rgba(255,255,255,.55)}
@media(max-width:768px){.gmt-footer__grid{grid-template-columns:1fr;gap:28px}}

/* ── Mobile nav ─────────────────────────────────────────────── */
@media(max-width:880px){
  .gmt-menu-toggle{display:block}
  .gmt-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--red-1);padding:12px;gap:2px;display:none;box-shadow:var(--shadow);border-top:1px solid rgba(255,255,255,.1)}
  .gmt-menu.open{display:flex}
  .gmt-menu>li>a{padding:13px 16px;border-radius:8px}
  .gmt-brand__tag{display:none}
}

/* Portal CTA item (clean white pill) */
.gmt-menu .gmt-nav-cta>a,
.gmt-menu>li>a.gmt-btn{background:#fff!important;color:var(--red-2)!important;font-weight:700;
  box-shadow:0 2px 10px rgba(0,0,0,.18);padding:9px 22px!important;border-radius:10px;margin-left:10px;transition:transform .16s,box-shadow .16s}
.gmt-menu .gmt-nav-cta>a:hover,
.gmt-menu>li>a.gmt-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.26);background:#fff!important;color:var(--red-1)!important}