/* ============================================
   Modern Elegant – CSS starter template
   Author: ChatGPT | May 2025
   License: MIT
============================================ */

/* 1. Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600&family=Lora:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap');

/* 2. CSS Custom Properties */
:root{
  /* Palette */
  --clr-primary:#3E54AC;
  --clr-secondary:#FFB703;
  --clr-bg:#F9F9FC;
  --clr-dark:#22223B;
  --clr-light:#FFFFFF;

  /* Typography */
  --ff-sans:'Noto Sans SC','Raleway',sans-serif;
  --ff-serif:'Noto Sans SC','Lora',serif;
  --fs-base:calc(1rem + .25vw);
  --radius:1rem;
  --shadow-sm:0 4px 12px rgba(0,0,0,.06);
  --shadow-md:0 6px 20px rgba(0,0,0,.1);
}

/* 3. Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--ff-sans);
  font-size:var(--fs-base);
  background:var(--clr-bg);
  color:var(--clr-dark);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;border-radius:var(--radius);}
a{text-decoration:none;color:inherit;}
h1,h2,h3,h4,h5,h6{font-family:var(--ff-serif);font-weight:600;color:var(--clr-primary);}
section{padding:4rem min(6vw,3rem);}
.container{max-width:1200px;margin-inline:auto;}

/* 4. Components */
/* Button */
.btn{
  display:inline-block;
  padding:.75rem 1.75rem;
  background:var(--clr-primary);
  color:var(--clr-light);
  border:none;
  border-radius:var(--radius);
  cursor:pointer;
  font-weight:600;
  transition:background .3s,transform .2s;
}
.btn:hover{background:#2c3e8c;transform:translateY(-2px);}
.btn--secondary{background:var(--clr-secondary);color:var(--clr-dark);}
.btn--secondary:hover{background:#e2a403;}

/* Card */
.card{
  background:var(--clr-light);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow .3s transform .3s;
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px);}
.card__body{padding:1.5rem;}

/* --- Layout shell --- */
.navbar {
  background: #fff;
  box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.nav-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: .5rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
/* Make sure the link itself is a flexbox container */
.nav-logo{
  display:flex;
  align-items:center;   /* vertical centering */
  gap:.5rem;            /* space between icon and text */
  line-height:1;        /* prevents extra top/bottom padding on the text */
}

/* Logo image */
.logo-icon{
  height:36px;          /* pick a size that matches your nav bar */
  width:auto;
  display:block;        /* removes inline-image descender space */
  object-fit:contain;
}

/* Optional: small tweak if the text still looks low/high */
.nav-logo span{
  display:inline-block;
  transform:translateY(0px);   /* adjust ±1–2 px until it feels perfect */
}
.brand-text { font-size: 1.15rem; font-weight: 600; color: #222; }

/* Link list */
.nav-links {
  list-style: none;
  display: flex;
  gap: 1.2rem;
}
.nav-links a { text-decoration: none; color: #222; font-weight: 500; }
.btn--secondary { padding: .4rem .9rem; border-radius: 4px; background: #316ad3; color: #fff; }

/* Hamburger (hidden on desktop) */
.hamburger {
  display: none;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  gap: .25rem;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #222;
  transition: transform .3s ease;
}

/* --- Mobile tweaks --- */
@media (max-width: 768px) {
  .brand-text { font-size: 1rem; }

  /* show burger, hide links */
  .hamburger { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    background: #fff;
    padding: 1rem;
    gap: .8rem;
    display: none;           /* collapse by default */
    box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
  }
  .nav-links.open { display: flex; }
}

/* Hero */
.hero{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;align-items:center;
}
.hero h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:1rem;}
.hero p{margin-bottom:2rem;max-width:45ch;}
.hero-img{box-shadow:var(--shadow-md);}

/* Grid utility */
.grid-3{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}

/* Footer */
footer{
  background:var(--clr-primary);
  color:var(--clr-light);
  text-align:center;
  padding:2rem 1rem;
  font-size:.9rem;
}

/* Space out biography paragraphs */
.profile article p{
  margin: 0 0 1rem;   /* top | right/left | bottom  (1 rem ≈ 16 px) */
}

/* optional: avoid extra space after the last paragraph */
.profile article p:last-child{
  margin-bottom: 0;
}

/* STACK cards vertically on every screen */
.contact-wrap{
    max-width: 700px;           /* keeps the column comfortably narrow */
    margin-inline: auto;        /* center the stack */
    display: grid;
    gap: 2.5rem;                /* space between cards */
    grid-template-columns: 1fr; /* ← force a single column */
}
.contact-card{
    background:var(--clr-light);
    border-radius:var(--radius);
    box-shadow:var(--shadow-sm);
    padding:2rem;
    display:grid;
    gap:1rem;
}
.contact-card iframe{height:350px;width:100%}

/* Form grid spacing */
.contact-form{display:grid;gap:1rem}

/* “Stay Connected” list */
.contact-list{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.contact-list li{
display:flex;align-items:center;gap:.6rem;
line-height:1.4;
}
.contact-list i{min-width:1.2rem;text-align:center}

/* Brand colours */
.icon-email      { color:#D44638; }  /* Gmail red */
.icon-phone      { color:#0096FF; }  /* calm blue */
.icon-wechat     { color:#07C160; }  /* WeChat green */
.icon-xhs        { color:#FF2442; }  /* Xiaohongshu red */
.icon-instagram  { color:#E1306C; }  /* IG rose */
.icon-youtube    { color:#FF0000; }  /* YouTube red */