/* ============================================================
   main.css — Shared styles for Xinru Center (EN + ZH)
   Asset URLs use absolute paths so this file works from any
   sub-directory (e.g. /zh/).
   ============================================================ */

:root {
  --amber:      #b8903a;
  --amber-lt:   #d4aa55;
  --amber-text: #8a6a22; /* darkened for WCAG AA text contrast */
  --sage:       #6a8a58;
  --sage-dk:    #3d5530;
  --teal:       #5a8880;
  --parchment:  #faf6ed;
  --tan:        #e8ddc4;
  --earth:      #6b5d42; /* darkened for WCAG AA text contrast (was #8a7a58) */
  --dark:      #2c3020;
  --text:      #3a3220;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Lato',sans-serif; color:var(--text); background:var(--parchment); }

/* ── SKIP LINK ── */
.skip-link {
  position:absolute; top:-100%; left:0; z-index:999;
  background:var(--sage-dk); color:#fff; padding:10px 20px;
  font-size:14px; font-weight:700; text-decoration:none;
}
.skip-link:focus { top:0; }

/* ── GLOBAL FOCUS STYLES ── */
:focus-visible {
  outline:3px solid var(--amber);
  outline-offset:3px;
}

/* ── NAV ── */
nav {
  background:#fff;
  border-bottom:2px solid var(--tan);
  box-shadow:0 2px 10px rgba(0,0,0,0.06);
  position:sticky; top:0; z-index:100;
}
.nav-row {
  padding:14px 64px;
  display:flex; align-items:center; justify-content:space-between;
}
.nav-logo a { display:inline-block; line-height:0; }
.nav-logo img { height:54px; }
nav ul { list-style:none; display:flex; gap:32px; }
nav ul li a {
  color:var(--sage-dk); text-decoration:none; font-size:13px;
  letter-spacing:1.5px; text-transform:uppercase; font-weight:600;
}
nav ul li a:hover { color:var(--amber); }
.nav-actions { display:flex; align-items:center; gap:14px; }
.nav-cta {
  background:var(--sage-dk); color:#fff; padding:9px 22px;
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  text-decoration:none; font-weight:700; cursor:pointer;
  border:none; font-family:'Lato',sans-serif;
}
.nav-cta:hover { background:var(--sage); }

/* ── LANGUAGE SWITCHER ── */
.lang-switcher {
  font-size:12px; letter-spacing:1px; font-weight:700;
  color:var(--sage-dk); text-decoration:none;
  padding-left:14px; border-left:1px solid var(--tan);
  white-space:nowrap;
}
.lang-switcher:hover { color:var(--amber); }

/* ── HAMBURGER ── */
.hamburger {
  display:none; flex-direction:column; gap:5px; cursor:pointer;
  background:none; border:none; padding:4px;
}
.hamburger span {
  display:block; width:24px; height:2px; background:var(--sage-dk);
  transition:opacity 0.2s;
}

/* ── MOBILE DROPDOWN MENU ── */
.mobile-menu { display:none; border-top:1px solid var(--tan); }
.mobile-menu.open { display:block; }
.mobile-menu a {
  display:block; padding:15px 24px;
  color:var(--sage-dk); text-decoration:none;
  font-size:13px; letter-spacing:1.5px; text-transform:uppercase; font-weight:600;
  border-bottom:1px solid var(--tan);
}
.mobile-menu a:hover { background:var(--parchment); }
.mobile-menu-contact {
  display:block; width:100%; padding:15px 24px;
  background:var(--sage-dk); color:#fff; text-align:left;
  font-size:12px; letter-spacing:2px; text-transform:uppercase;
  font-weight:700; cursor:pointer; border:none; font-family:'Lato',sans-serif;
}
.mobile-menu-contact:hover { background:var(--sage); }

/* Offset anchors so sticky nav doesn't cover headings */
#about, #programs, #events { scroll-margin-top: 86px; }

/* ── HERO ── */
.hero {
  position:relative; height:580px;
  display:flex; align-items:center;
}
.hero::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to right, rgba(44,48,32,0.85) 38%, rgba(44,48,32,0.1) 100%);
}
.hero-content { position:relative; z-index:2; padding:0 72px; max-width:640px; }
.hero-content .eyebrow {
  font-size:11px; letter-spacing:4px; text-transform:uppercase;
  color:var(--amber-lt); margin-bottom:18px; display:block;
}
.hero-content h1 {
  font-family:'Cormorant Garamond',serif; font-size:64px; font-weight:700;
  color:#fff; line-height:1.1; margin-bottom:12px;
}
.hero-name {
  font-family:'Cormorant Garamond',serif; font-size:22px; font-style:italic;
  color:var(--amber-lt); letter-spacing:2px; margin-bottom:24px; display:block;
}
.hero-content p { color:rgba(255,255,255,0.88); font-size:16px; line-height:1.9; margin-bottom:36px; }
.hero-btns { display:flex; gap:14px; }
.hero-btns .btn-solid {
  background:var(--amber); color:#fff; padding:13px 36px; font-size:13px;
  font-weight:700; letter-spacing:2px; text-transform:uppercase; text-decoration:none;
}
.hero-btns .btn-solid:hover { background:var(--amber-lt); }
.hero-btns .btn-ghost {
  border:2px solid rgba(255,255,255,0.7); color:#fff; padding:13px 36px;
  font-size:13px; letter-spacing:2px; text-transform:uppercase; text-decoration:none;
}
.hero-btns .btn-ghost:hover { background:rgba(255,255,255,0.1); }

/* ── INFO BAR ── */
.info-bar { background:var(--amber); display:flex; justify-content:center; }
.info-item {
  padding:18px 52px; text-align:center; color:var(--dark);
  border-right:1px solid rgba(0,0,0,0.15); flex:1; max-width:300px;
}
.info-item:last-child { border-right:none; }
.info-item .label {
  font-size:11px; text-transform:uppercase; letter-spacing:2px;
  font-weight:700; color:var(--dark); margin-bottom:5px;
}
.info-item .value { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:700; }

/* ── ABOUT ── */
.about { display:grid; grid-template-columns:1fr 1fr; min-height:520px; }
.about-img {
  background:url('../assets/calligraphy-class-instructor.jpg') center/cover no-repeat;
}
.about-text { padding:72px 64px; background:#fff; }
.about-text .eyebrow {
  font-size:10px; letter-spacing:4px; text-transform:uppercase;
  color:var(--sage-dk); margin-bottom:14px; display:block;
}
.about-text h2 {
  font-family:'Cormorant Garamond',serif; font-size:44px; font-weight:700;
  color:var(--dark); line-height:1.1; margin-bottom:8px;
}
.about-tag {
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--amber-text); font-weight:700; display:block; margin-bottom:24px;
}
.about-text p { font-size:15px; color:#4a4030; line-height:2; margin-bottom:16px; }
.about-text .quote {
  border-left:3px solid var(--amber); padding:14px 20px;
  background:var(--parchment); font-family:'Cormorant Garamond',serif;
  font-style:italic; color:var(--earth); margin:24px 0; font-size:16px; line-height:1.8;
}

/* ── PROGRAMS ── */
.programs { background:var(--tan); padding:80px 64px; }
.sec-eyebrow {
  text-align:center; font-size:10px; letter-spacing:4px; text-transform:uppercase;
  color:var(--sage-dk); margin-bottom:12px;
}
.sec-title {
  text-align:center; font-family:'Cormorant Garamond',serif; font-size:44px;
  font-weight:700; color:var(--dark); margin-bottom:6px;
}
.sec-sub { text-align:center; font-size:14px; color:var(--earth); margin-bottom:52px; margin-top:4px; }
.prog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1100px; margin:0 auto; }
.prog-card { background:#fff; overflow:hidden; border-top:4px solid var(--amber); }
.prog-card .prog-img { width:100%; height:220px; object-fit:cover; display:block; }
.prog-card .prog-body { padding:28px; }
.prog-card .prog-body .cn-char {
  font-family:'Noto Serif SC',serif; font-size:36px; color:var(--amber-text);
  display:block; margin-bottom:10px;
}
.prog-card .prog-body h3 {
  font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700;
  color:var(--dark); margin-bottom:10px;
}
.prog-card .prog-body p { font-size:14px; color:#5a4a30; line-height:1.9; }

/* ── GALLERY ── */
.gallery { display:grid; grid-template-columns:repeat(4,1fr); height:280px; }
.gallery-cell { background-size:cover; }

/* ── EVENTS ── */
.events { padding:80px 64px; max-width:1100px; margin:0 auto; }
.events-intro { text-align:center; font-size:14px; color:var(--earth); margin-top:6px; margin-bottom:0; }
.events-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.event-card {
  border:1px solid var(--tan); padding:30px; background:#fff;
  border-top:3px solid var(--teal); display:flex; flex-direction:column;
}
.event-card.hidden { display:none; }
.event-card .date {
  font-size:11px; text-transform:uppercase; letter-spacing:2px;
  color:var(--sage-dk); margin-bottom:10px; font-weight:700;
}
.event-card h3 {
  font-family:'Cormorant Garamond',serif; font-size:22px; font-weight:700;
  color:var(--dark); margin-bottom:10px;
}
.event-card p { font-size:13px; color:#5a4a30; line-height:1.9; margin-bottom:8px; }
.read-more-btn {
  background:none; border:none; cursor:pointer; padding:0; margin-bottom:16px;
  font-size:13px; color:var(--sage-dk); text-decoration:underline; align-self:flex-start;
}
.read-more-btn:hover { color:var(--amber); }
.btn-register { margin-top:auto; }
.btn-register {
  display:inline-block; background:var(--sage-dk); color:#fff;
  padding:9px 18px; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; text-decoration:none; font-weight:700;
  text-align:center; align-self:flex-start;
}
.btn-register:hover { background:var(--sage); }
.events-load-more { text-align:center; margin-top:40px; }
.btn-load-more {
  background:none; border:2px solid var(--sage-dk); color:var(--sage-dk);
  padding:11px 36px; font-size:12px; letter-spacing:2px; text-transform:uppercase;
  font-weight:700; cursor:pointer; font-family:'Lato',sans-serif;
}
.btn-load-more:hover { background:var(--sage-dk); color:#fff; }

/* ── FOOTER ── */
footer { background:var(--sage-dk); padding:52px 64px 30px; }
.footer-top {
  display:flex; justify-content:space-between; align-items:start;
  max-width:1100px; margin:0 auto 36px;
}
.footer-logo img {
  height:52px; filter:brightness(0) invert(1); opacity:0.9;
  margin-bottom:12px; display:block;
}
.footer-tagline {
  font-family:'Cormorant Garamond',serif; font-style:italic;
  color:rgba(255,255,255,0.65); font-size:15px;
}
.footer-col h4 {
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:var(--amber-lt); margin-bottom:14px;
}
.footer-col a, .footer-col p {
  font-size:13px; color:rgba(255,255,255,0.82); line-height:2.2;
  display:block; text-decoration:none;
}
.footer-col a:hover { color:#fff; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,0.15); padding-top:22px; font-size:12px;
  text-align:center; color:rgba(255,255,255,0.65); max-width:1100px; margin:0 auto;
}

/* ── CONTACT MODAL ── */
.modal-overlay {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(44,48,32,0.75); align-items:center; justify-content:center;
}
.modal-overlay.open { display:flex; }
.modal-box {
  background:#fff; padding:52px 48px; max-width:480px; width:90%;
  position:relative; text-align:center; border-top:4px solid var(--amber);
}
.modal-close {
  position:absolute; top:16px; right:20px; font-size:22px; cursor:pointer;
  color:var(--earth); background:none; border:none; line-height:1;
}
.modal-close:hover { color:var(--dark); }
.modal-eyebrow {
  font-size:10px; letter-spacing:4px; text-transform:uppercase;
  color:var(--sage-dk); margin-bottom:12px;
}
.modal-box h2 {
  font-family:'Cormorant Garamond',serif; font-size:32px; font-weight:700;
  color:var(--dark); margin-bottom:20px;
}
.modal-box p { font-size:15px; color:#4a4030; line-height:1.9; margin-bottom:24px; }
.modal-email {
  display:inline-block; color:var(--sage-dk); font-size:17px;
  font-weight:700; text-decoration:none; letter-spacing:0.5px;
}
.modal-email:hover { color:var(--amber); }

/* ── TABLET ── */
@media (max-width:1024px) and (min-width:769px) {
  .nav-row { padding:14px 32px; }
  .hero-content { padding:0 40px; }
  .hero-content h1 { font-size:48px; }
  .programs { padding:60px 32px; }
  .prog-grid { grid-template-columns:repeat(2,1fr); }
  .events { padding:60px 32px; }
  .events-grid { grid-template-columns:repeat(2,1fr); }
  footer { padding:48px 32px 24px; }
  .footer-top { gap:28px; }
}

/* ── MOBILE ── */
@media (max-width:768px) {
  .nav-row { padding:12px 20px; }
  nav ul { display:none; }
  .nav-cta { display:none; }
  .nav-logo img { height:40px; }
  .hamburger { display:flex; }

  #about, #programs, #events { scroll-margin-top: 70px; }

  .hero { height:440px; }
  .hero::before { background:rgba(44,48,32,0.75); }
  .hero-content { padding:0 24px; max-width:100%; }
  .hero-content .eyebrow { font-size:10px; letter-spacing:2px; }
  .hero-content h1 { font-size:36px; }
  .hero-name { font-size:18px; }
  .hero-content p { font-size:14px; margin-bottom:28px; }
  .hero-btns { flex-direction:column; gap:10px; }
  .hero-btns a { text-align:center; padding:12px 20px; }

  .info-bar { flex-direction:column; }
  .info-item {
    max-width:100%; border-right:none;
    border-bottom:1px solid rgba(0,0,0,0.12); padding:14px 24px;
  }
  .info-item:last-child { border-bottom:none; }

  .about { grid-template-columns:1fr; }
  .about-img { height:280px; }
  .about-text { padding:40px 24px; }
  .about-text h2 { font-size:30px; }

  .programs { padding:48px 20px; }
  .sec-title { font-size:30px; }
  .prog-grid { grid-template-columns:1fr; }

  .gallery { grid-template-columns:repeat(2,1fr); height:auto; }
  .gallery-cell { height:160px; }

  .events { padding:48px 20px; }
  .events-grid { grid-template-columns:1fr; }

  footer { padding:40px 24px 20px; }
  .footer-top { flex-direction:column; gap:28px; }

  .modal-box { padding:40px 28px; }
}