/* =================================================================
   TONGYI ENVIRONMENTAL SERVICES — COMMON.CSS
   Non-invasive shared layer:
     - CSS variables (tokens)
     - Preloader (scoped under #tongyi-preloader)
     - Unified buttons (scoped under .btn-outline / .btn-solid)
     - Optional unified hero (scoped under .tongyi-hero)
     - Light typography tokens that pages can adopt with var(--font-*)

   IMPORTANT: This file does NOT use universal selectors,
   does NOT redefine <img> sizing, and does NOT use !important.
   Each page's own CSS keeps full authority over its layout.
   ================================================================= */

:root {
    /* Brand colors */
    --tongyi-green: rgb(1, 101, 1);
    --tongyi-green-dark: #014301;
    --tongyi-green-soft: #4ea84e;
    --tongyi-green-light: #e6f7e6;
    --tongyi-text: #1f2d1f;
    --tongyi-muted: #5b6b5b;
    --tongyi-shadow: 0 8px 24px rgba(0, 0, 0, .12);

    /* Typography tokens — exposed for pages that want consistency
       (existing pages keep their own font choices automatically) */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
                 'Helvetica Neue', Arial, sans-serif;
    --font-display: 'Poppins', var(--font-sans);

    --fs-h1: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
    --fs-h2: clamp(1.45rem, 1.05rem + 1.6vw, 2.15rem);
    --fs-h3: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
    --fs-h4: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem);
    --fs-body: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
    --fs-small: 0.875rem;

    --lh-tight: 1.25;
    --lh-base:  1.65;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
}

/* ----------------------------------------------------------------
   PRELOADER — fully scoped, cannot affect anything else
   ---------------------------------------------------------------- */
#tongyi-preloader {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center,
                #ffffff 0%,
                #f4faf4 60%,
                #e6f7e6 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity .55s ease;
}
#tongyi-preloader.is-hidden { opacity: 0; pointer-events: none; }

#tongyi-preloader .preloader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
#tongyi-preloader .preloader-logo-wrap {
    position: relative;
    width: 130px;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: tongyiPulse 1.6s ease-in-out infinite;
}
#tongyi-preloader .preloader-logo {
    width: 92px;
    height: 92px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
    padding: 8px;
    box-shadow: 0 6px 22px rgba(1, 101, 1, .18);
    z-index: 2;
    max-width: none;            /* protect from page resets */
}
#tongyi-preloader .preloader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid rgba(1, 101, 1, .15);
    border-top-color: var(--tongyi-green);
    animation: tongyiSpin 1.1s linear infinite;
}
#tongyi-preloader .preloader-text {
    color: var(--tongyi-green);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-weight: 600;
    letter-spacing: .5px;
    font-size: 15px;
}
#tongyi-preloader .preloader-bar {
    width: 160px;
    height: 4px;
    background: rgba(1, 101, 1, .12);
    border-radius: 4px;
    overflow: hidden;
}
#tongyi-preloader .preloader-bar span {
    display: block;
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, var(--tongyi-green), var(--tongyi-green-soft));
    border-radius: 4px;
    animation: tongyiBar 1.2s ease-in-out infinite;
}
@keyframes tongyiSpin { to { transform: rotate(360deg); } }
@keyframes tongyiPulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.06); }
}
@keyframes tongyiBar {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(260%); }
}
@media (prefers-reduced-motion: reduce) {
    #tongyi-preloader .preloader-logo-wrap,
    #tongyi-preloader .preloader-bar span,
    #tongyi-preloader .preloader-ring { animation: none; }
}

/* ============================================================
   UNIFIED BUTTONS — IDENTICAL to .btn-outline in index.php
   Authoritative: uses !important on the visual properties so
   page-level overrides cannot diverge. All "Read More" /
   "Learn More" links across the entire site look the same.
   ============================================================ */
.btn-outline,
a.btn-outline,
.read-more,
a.read-more,
.readmore-link,
a.readmore-link,
.learn-more,
a.learn-more,
.learn-more-link,
a.learn-more-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 20px !important;
    border: 2px solid var(--tongyi-green) !important;
    background: transparent !important;
    color: var(--tongyi-green) !important;
    font-family: var(--font-sans) !important;
    font-weight: 600 !important;
    font-size: clamp(0.82rem, 0.4vw + 0.78rem, 0.95rem) !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
    text-transform: none !important;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
    white-space: nowrap;
}
.btn-outline i,
.read-more i,
.readmore-link i,
.learn-more i,
.learn-more-link i {
    font-size: 0.78rem !important;
    transition: transform 0.25s ease !important;
}
.btn-outline:hover,
.btn-outline:focus-visible,
.read-more:hover,
.readmore-link:hover,
.learn-more:hover,
.learn-more-link:hover {
    background: var(--tongyi-green) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border-color: var(--tongyi-green) !important;
}
.btn-outline:hover i,
.read-more:hover i,
.readmore-link:hover i,
.learn-more:hover i,
.learn-more-link:hover i {
    transform: translateX(4px) !important;
}
/* Hide any underline pseudo a page might add */
.read-more::after,
.readmore-link::after,
.learn-more::after,
.learn-more-link::after { display: none !important; }

/* Solid CTA variant (used by 404 page etc.) */
.btn-solid,
a.btn-solid {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 9px 20px !important;
    border-radius: 6px !important;
    background: var(--tongyi-green) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 2px solid var(--tongyi-green) !important;
    font-weight: 600 !important;
    font-size: clamp(0.82rem, 0.4vw + 0.78rem, 0.95rem) !important;
    line-height: 1.2 !important;
    transition: all 0.25s ease !important;
    cursor: pointer;
}
.btn-solid:hover,
.btn-solid:focus-visible {
    background: var(--tongyi-green-dark) !important;
    border-color: var(--tongyi-green-dark) !important;
    color: #ffffff !important;
}

@media (max-width: 576px) {
    .btn-outline, a.btn-outline,
    .read-more, a.read-more,
    .readmore-link, a.readmore-link,
    .learn-more, a.learn-more,
    .learn-more-link, a.learn-more-link,
    .btn-solid, a.btn-solid {
        padding: 8px 16px !important;
        font-size: 0.82rem !important;
    }
}

/* ----------------------------------------------------------------
   UNIFIED GREEN HERO — fully opt-in via .tongyi-hero wrapper.
   New pages can use this for a consistent banner.
   ---------------------------------------------------------------- */
.tongyi-hero {
    position: relative;
    background: linear-gradient(135deg,
                var(--tongyi-green) 0%,
                var(--tongyi-green-dark) 100%);
    color: #fff;
    text-align: center;
    padding: 0 24px;
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.tongyi-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0, transparent 35%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,.08) 0, transparent 40%);
    pointer-events: none;
}
.tongyi-hero .tongyi-hero-inner {
    position: relative;
    max-width: 880px;
    z-index: 1;
}
.tongyi-hero h1 {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 14px;
    letter-spacing: .3px;
    color: #fff;
}
.tongyi-hero p {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem);
    max-width: 720px;
    margin: 0 auto;
    opacity: .95;
    line-height: 1.65;
    color: rgba(255, 255, 255, .95);
}
.tongyi-hero .breadcrumb-bar {
    margin-top: 18px;
    font-size: .85rem;
    color: rgba(255, 255, 255, .85);
}
.tongyi-hero .breadcrumb-bar a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, .5);
}
.tongyi-hero .breadcrumb-bar a:hover { border-bottom-style: solid; }

@media (max-width: 992px) {
    .tongyi-hero { min-height: 300px; }
}
@media (max-width: 576px) {
    .tongyi-hero { min-height: 260px; }
}

/* ============================================================
   GREEN HERO UNIFICATION — ONE REUSABLE RULE FOR EVERY PAGE
   Uses [class*="-hero"] to match every hero class name:
     .company-hero, .contact-hero, .blog-hero, .edu-hero,
     .clients-hero-section, .carbon-hero, .esg-hero,
     .climate-hero, .resilience-hero, .industries-hero,
     .tech-hero, .specialist-hero, .tongyi-hero, etc.
   Homepage video hero is explicitly excluded.
   Fluid sizes via clamp() — smoothly responsive on
   mobile → tablet → laptop → big screen.
   ============================================================ */
body section[class*="-hero"]:not(.index-hero-section),
body section.tongyi-hero,
body section.hero-section {
    /* Geometry — IDENTICAL on every page (exact height, not min-height) */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: linear-gradient(135deg, var(--tongyi-green) 0%, var(--tongyi-green-dark) 100%) !important;
    color: #ffffff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    /* Exact fluid height — same value on every page at every viewport */
    height: clamp(300px, 14vw + 230px, 500px) !important;
    min-height: clamp(300px, 14vw + 230px, 500px) !important;
    max-height: clamp(300px, 14vw + 230px, 500px) !important;
    /* Padding-top clears the fixed header */
    padding-top: clamp(110px, 6vw + 80px, 170px) !important;
    padding-right: clamp(16px, 2vw + 8px, 40px) !important;
    padding-bottom: clamp(30px, 2vw + 20px, 60px) !important;
    padding-left: clamp(16px, 2vw + 8px, 40px) !important;
    /* Kill all margins — kills the white strip above the hero */
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative;
    overflow: hidden;
}

/* Decorative overlay — single soft corner triangle, no grids, no box */
body section[class*="-hero"]:not(.index-hero-section)::before,
body section.tongyi-hero::before,
body section.hero-section::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><path d='M0,0 L100,0 L100,100 Z' fill='rgba(255,255,255,0.05)'/></svg>") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
/* Make sure nothing else paints a second decorative layer */
body section[class*="-hero"]:not(.index-hero-section)::after,
body section.tongyi-hero::after,
body section.hero-section::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* Hide any decorative boxes / bubbles / circles a page may add inside its hero
   (clients page had .clients-bubble divs that rendered as visible boxes) */
body section[class*="-hero"]:not(.index-hero-section) [class*="bubble"],
body section[class*="-hero"]:not(.index-hero-section) .floating-bubble,
body section[class*="-hero"]:not(.index-hero-section) [class*="shape"],
body section[class*="-hero"]:not(.index-hero-section) [class*="decoration"],
body section[class*="-hero"]:not(.index-hero-section) [class*="circle"] {
    display: none !important;
}

/* Whatever inner wrapper the page uses, center it consistently */
body section[class*="-hero"]:not(.index-hero-section) > *,
body section.tongyi-hero > *,
body section.hero-section > * {
    max-width: 960px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative;
    z-index: 2;
}

/* Hero TITLE — identical fluid size on every page */
body section[class*="-hero"]:not(.index-hero-section) h1,
body section.tongyi-hero h1,
body section.hero-section h1 {
    font-family: var(--font-display) !important;
    font-size: clamp(1.55rem, 1.8vw + 1.1rem, 3rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 16px !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Hero SUBTITLE / paragraph — identical fluid size on every page */
body section[class*="-hero"]:not(.index-hero-section) p,
body section[class*="-hero"]:not(.index-hero-section) .subtitle,
body section.tongyi-hero p,
body section.tongyi-hero .subtitle,
body section.hero-section p,
body section.hero-section .subtitle {
    font-family: var(--font-sans) !important;
    font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.2rem) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    max-width: 780px !important;
    margin: 0 auto 8px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Floating decorative bubbles a few pages add — hide them so
   the hero is visually identical across pages */
section[class*="-hero"]:not(.index-hero-section) .floating-bubble,
section[class*="-hero"]:not(.index-hero-section) [class*="bubble"],
.hero-section .floating-bubble {
    display: none !important;
}

/* ============================================================
   WHITE-GAP FIX
   Several pages set body { padding-top } AND a hero
   { margin-top } to clear the fixed header — together they
   create a visible white strip above the hero. We override
   both so the hero sits flush behind the header.
   ============================================================ */
body { padding-top: 0 !important; }

/* ============================================================
   UNIFY BODY FONT across every page (Company_Info etc. were
   using bigger system fonts) — same family used by the homepage
   ============================================================ */
body,
body * {
    font-family: var(--font-sans);
}
/* But preserve icon fonts (Font Awesome / Bootstrap Icons) */
body i.fa,   body i.fas,   body i.far,   body i.fab,
body i.bi,   body [class*="fa-"]::before, body [class^="fa-"]::before {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free",
                 "Font Awesome", FontAwesome, "bootstrap-icons" !important;
}

/* ============================================================
   DISABLE CARD HOVER LIFT (blog posts, etc.) — user requested
   ============================================================ */
.blog-post:hover,
.blog-card:hover,
.card:hover,
.service-card:hover,
.education-card:hover,
.industry-card:hover,
.client-card:hover,
.theme-card:hover,
.testimonial-card:hover,
[class*="-card"]:hover,
[class*="-post"]:hover {
    transform: none !important;
}

/* ----------------------------------------------------------------
   UTILITIES
   ---------------------------------------------------------------- */
.tongyi-skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
}
.tongyi-skip-link:focus {
    left: 12px;
    top: 12px;
    background: #fff;
    color: var(--tongyi-green);
    padding: 8px 14px;
    z-index: 100000;
    border-radius: 6px;
}