/* AGEC 2018 lab site — shared styles
   Palette follows the xaringan slide theme (style_duo). */

:root{
  --cream:#FDF7E9;
  --gold:#EFBE43;
  --gold-soft:#F6DB96;
  --green:#33734D;          /* NTU AgEcon emblem green */
  --ink:#333333;
  --ink-soft:#6b6355;
  --link:#4466B0;
  --card:#FFFFFF;
  --line:#EADFC6;
  color-scheme: light;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Lato","Helvetica Neue","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Martel",Georgia,"PingFang TC","Microsoft JhengHei",serif;
  font-weight:400;
  color:var(--ink);
}

code{
  font-family:"Fira Mono",Consolas,monospace;
  font-size:.9em;
  border:1px solid var(--gold-soft);
  padding:1px 5px;
  border-radius:4px;
  background:#fffdf6;
}

a{color:var(--link);}
.wrap{max-width:920px;margin:0 auto;padding:0 24px;}

/* ============================================================
   Landing page (index.html) — fills the viewport, never scrolls
   ============================================================ */

body.landing{
  height:100dvh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(12px,3vh,32px) 20px;
  background:
    radial-gradient(circle at 50% 18%, #fffdf5 0%, var(--cream) 62%);
}

.hero{
  width:100%;
  min-width:0;
  max-width:780px;
  max-height:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px,2.2vh,22px);
}

/* align-items:center sizes children to fit-content, so cap them or long
   headings refuse to wrap and push the page sideways */
.hero > *{max-width:100%;}

.emblem{
  width:clamp(96px,17vh,168px);
  height:auto;
  border-radius:20px;
  box-shadow:0 10px 28px rgba(51,115,77,.26);
  flex-shrink:0;
}

.hero h1{
  font-size:clamp(1.5rem,4.4vw,2.6rem);
  line-height:1.15;
  margin:0;
  font-weight:700;
  color:var(--link);
}

.hero .zh{
  margin:0;
  font-size:clamp(.95rem,2.3vw,1.2rem);
  color:var(--ink-soft);
}

.pills{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:0;padding:0;list-style:none;
}
.pills li{
  background:var(--gold-soft);
  color:#5a4a1d;
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  padding:3px 12px;
  border-radius:999px;
}

/* entrance tiles */
.doors{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(10px,1.8vh,18px);
  margin-top:clamp(2px,1vh,8px);
}

.door{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:clamp(14px,2.6vh,26px) 18px;
  text-decoration:none;
  color:var(--ink);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.door:hover,.door:focus-visible{
  transform:translateY(-3px);
  border-color:var(--gold);
  box-shadow:0 8px 22px rgba(51,51,51,.12);
  outline:none;
}
.door svg{
  width:clamp(26px,4.4vh,38px);
  height:auto;
  stroke:var(--green);
  stroke-width:1.7;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.door-title{
  font-family:"Martel",Georgia,"PingFang TC","Microsoft JhengHei",serif;
  font-size:clamp(1rem,2.5vw,1.25rem);
  font-weight:700;
  color:var(--link);
}
.door-desc{
  margin:0;
  min-width:0;
  font-size:clamp(.8rem,1.9vw,.92rem);
  color:var(--ink-soft);
  line-height:1.45;
  overflow-wrap:break-word;
}

.hero .contact{
  margin:0;
  font-size:clamp(.76rem,1.8vw,.88rem);
  color:var(--ink-soft);
}

/* short screens: drop the emblem shadow weight and tighten further */
@media (max-height:520px){
  .emblem{width:clamp(64px,13vh,96px);border-radius:14px;}
  .hero{gap:8px;}
  .pills{display:none;}
}

@media (max-width:560px){
  .doors{grid-template-columns:1fr;}
  /* icon on the left, title over description on the right */
  .door{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"icon title" "icon desc";
    column-gap:14px;
    row-gap:2px;
    align-items:center;
    text-align:left;
    padding:14px 16px;
  }
  .door svg{grid-area:icon;width:28px;}
  .door-title{grid-area:title;}
  .door-desc{grid-area:desc;}
}

/* ============================================================
   Content pages (about.html, slides.html)
   ============================================================ */

.page-head{
  background:var(--cream);
  border-bottom:4px solid var(--gold);
  padding:26px 0 30px;
}
.back{
  display:inline-flex;align-items:center;gap:7px;
  font-size:.88rem;font-weight:700;letter-spacing:.04em;
  text-decoration:none;color:var(--link);
  margin-bottom:16px;
}
.back:hover{text-decoration:underline;}
.page-head h1{
  font-size:clamp(1.7rem,4vw,2.3rem);
  margin:0 0 6px;
  font-weight:700;
  color:var(--link);
}
.page-head .zh{margin:0;color:var(--ink-soft);font-size:1.02rem;}

section{padding:40px 0;border-bottom:1px solid var(--line);}
section:last-of-type{border-bottom:none;}
h2{
  font-size:1.45rem;margin:0 0 22px;padding-bottom:8px;
  border-bottom:2px solid var(--gold);display:inline-block;
}
p{margin:0 0 14px;}
.lead{max-width:62ch;}

/* weekly slide list */
.weeks{list-style:none;padding:0;margin:0;display:grid;gap:14px;}
.week{
  background:var(--card);border:1px solid var(--line);border-left:5px solid var(--gold);
  border-radius:6px;padding:18px 22px;
}
.week-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px;margin-bottom:6px;}
.week-no{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.week-date{font-size:.9rem;color:var(--ink-soft);}
.week-title{font-size:1.12rem;font-weight:700;margin:0 0 4px;}
.week-title a{text-decoration:none;}
.week-title a:hover{text-decoration:underline;}
.week-topics{margin:0;color:var(--ink-soft);font-size:.95rem;}
.pending{background:#fffdf6;border-left-style:dashed;}

/* holiday / no-class week */
.holiday{
  background:linear-gradient(180deg,#fdfaf2,var(--cream));
  border-left:5px dashed var(--green);
  text-align:center;
}
.holiday .week-head{justify-content:center;}
.holiday .week-title{
  font-family:"Martel",Georgia,"PingFang TC","Microsoft JhengHei",serif;
  font-weight:400;margin-bottom:8px;
}
.holiday .week-title::before{
  content:"\2726";display:block;color:var(--gold);
  font-size:1.5rem;line-height:1;margin-bottom:8px;
}
.holiday .week-topics{max-width:52ch;margin:0 auto;}
.holiday .tag{background:#dff0e6;color:var(--green);}

/* info cards */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:20px 22px;}
.card h3{margin:0 0 12px;font-size:1.08rem;font-weight:700;}
.card ul{margin:0;padding-left:1.1em;}
.card li{margin-bottom:7px;}
li::marker{color:var(--gold);}
.tag{
  display:inline-block;background:var(--gold-soft);color:#5a4a1d;
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 9px;border-radius:999px;vertical-align:middle;
}

/* staff table */
.table-scroll{overflow-x:auto;}
table{border-collapse:collapse;width:100%;font-size:.97rem;}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;}
th{font-weight:700;color:var(--ink-soft);font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;}
.sub{color:var(--ink-soft);font-size:.9rem;}

.note{background:#fffdf6;border:1px solid var(--gold-soft);border-radius:6px;padding:16px 20px;margin-top:22px;font-size:.95rem;}
.note strong{color:#8a6a12;}
/* highlighter band behind the text — must clone across line breaks, and must
   cover the whole x-height or it reads as a strikethrough */
.hl{
  background:linear-gradient(transparent 6%, var(--gold-soft) 6%, var(--gold-soft) 94%, transparent 94%);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  font-weight:700;
  padding:0 3px;
}

footer{padding:30px 0 46px;color:var(--ink-soft);font-size:.9rem;}

@media (max-width:600px){
  body{font-size:16px;}
}