/* ===== Wanlai Elementary 萬來國小 — shared site chrome =====
   Topbar + wave photo banner + footer, used by every page (including the
   older Moon-Lute / Word of the Day / Festivals / News pages, which keep
   their own inline styles). Variables are scoped to the chrome blocks so
   they never override a page's own :root palette.
   Color: crest green #009241 + crest red #DA251C (from the school crest).
   ============================================================ */
.tb,.chero,.ft{
  --c-green:#009241;--c-green-deep:#0A5A2E;--c-green-soft:#E3F3E8;
  --c-red:#DA251C;--c-red-deep:#A3170F;--c-red-soft:#FDE9E7;
  --c-ink:#1F2A24;--c-ink-soft:#4F5D55;--c-line:#E2ECE5;--c-max:1080px;
}

/* ===== Topbar ===== */
.tb{background:rgba(255,255,255,.95);border-bottom:1px solid var(--c-line);padding:11px 0;position:sticky;top:0;z-index:50;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-style:normal;}
.tb__inner{max-width:var(--c-max);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.tb__brand{display:flex;align-items:center;gap:12px;text-decoration:none;border:0;}
.tb__logo{width:46px;height:46px;object-fit:contain;flex-shrink:0;display:block;}
.tb__name{font-family:'Playfair Display','PingFang TC',serif;font-size:18px;font-weight:700;color:var(--c-green-deep);line-height:1.1;}
.tb__name small{display:block;font-family:'PingFang TC',sans-serif;font-size:12px;font-weight:500;color:var(--c-ink-soft);margin-top:3px;letter-spacing:.04em;}
.tb__nav{display:flex;gap:20px;flex-wrap:wrap;justify-content:flex-end;}
.tb__nav a{color:var(--c-ink);font-family:'Inter','PingFang TC',sans-serif;font-size:15px;font-weight:500;letter-spacing:.04em;text-decoration:none;border:0;transition:color .2s;}
.tb__nav a:hover{color:var(--c-red);}
.tb__nav a.is-active{color:var(--c-red);font-weight:700;}
@media(max-width:640px){.tb__inner{flex-direction:column;align-items:flex-start;gap:10px;}.tb__nav{gap:14px;justify-content:flex-start;}.tb__nav a{font-size:14px;}}

/* ===== Photo banner with wave edge ===== */
.chero{position:relative;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;color:#fff;text-align:left;
  background:linear-gradient(165deg,var(--b1,#009241),var(--b2,#0A5A2E) 54%,var(--b3,#063A1D));}
@media(min-width:720px){.chero{min-height:392px;}}
.chero--photo{background:var(--photo) var(--photo-pos,50% 50%)/cover no-repeat;}
@media(min-width:720px){.chero--photo{min-height:460px;}}
@media(min-width:1000px){.chero--photo{min-height:520px;}}
/* white wave + a crest-colored line that follows the curve */
.chero__wave{position:absolute;left:0;right:0;bottom:-1px;height:64px;z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='w' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230A5A2E'/%3E%3Cstop offset='.3' stop-color='%23009241'/%3E%3Cstop offset='.55' stop-color='%23DA251C'/%3E%3Cstop offset='.8' stop-color='%23009241'/%3E%3Cstop offset='1' stop-color='%230A5A2E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='%23ffffff' d='M0,58 C220,92 470,18 720,40 C970,62 1230,96 1440,52 L1440,90 L0,90 Z'/%3E%3Cpath fill='none' stroke='url(%23w)' stroke-width='7' d='M0,58 C220,92 470,18 720,40 C970,62 1230,96 1440,52'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;}
@media(min-width:720px){.chero__wave{height:92px;}}
.chero::before,.chero::after{content:"";position:absolute;border-radius:50%;filter:blur(38px);pointer-events:none;z-index:0;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.82),transparent 70%);}
.chero::before{width:320px;height:320px;left:-70px;top:-90px;opacity:.5;animation:heroOrb 15s ease-in-out infinite,heroGlow 7s ease-in-out infinite;}
.chero::after{width:240px;height:240px;right:7%;bottom:-30px;opacity:.4;animation:heroOrb 19s ease-in-out infinite reverse,heroGlow 9s ease-in-out infinite;}
.chero__fx{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.18) 50%,transparent 68%);background-size:240% 100%;animation:heroSweep 6.5s linear infinite;}
.chero__inner{position:relative;z-index:3;max-width:var(--c-max);margin:0 auto;width:100%;padding:0 24px 78px;}
@media(min-width:720px){.chero__inner{padding-bottom:104px;}}
.chero__inner>*{opacity:0;transform:translateY(22px);animation:bandUp .9s cubic-bezier(.2,.7,.2,1) forwards;}
.chero__inner h1{animation-delay:.12s;}
.chero__inner .h1-zh{animation-delay:.26s;}
.chero .eyebrow{display:inline-block;font-family:'Inter','PingFang TC',sans-serif;font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:#fff;background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.45);border-radius:99px;padding:5px 14px;margin-bottom:12px;text-shadow:0 1px 3px rgba(0,0,0,.6);}
@media(max-width:480px){.chero .eyebrow{font-size:11px;letter-spacing:.14em;padding:5px 12px;}}
.chero h1{margin:0;font-family:'Playfair Display','PingFang TC',serif;font-size:clamp(34px,6vw,58px);font-weight:800;line-height:1.05;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.75);-webkit-text-stroke:3px rgba(0,0,0,.75);paint-order:stroke fill;}
.chero .h1-zh{font-family:'PingFang TC',sans-serif;font-size:clamp(17px,2.2vw,23px);font-weight:600;margin-top:8px;color:rgba(255,255,255,.96);text-shadow:0 2px 18px rgba(0,0,0,.7),0 1px 4px rgba(0,0,0,.75);-webkit-text-stroke:1.6px rgba(0,0,0,.75);paint-order:stroke fill;}
.scrollcue{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:4;color:var(--c-green);font-size:26px;opacity:.9;animation:bob 1.8s ease-in-out infinite;}
@keyframes heroOrb{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(34px,-26px) scale(1.18);}}
@keyframes heroGlow{0%,100%{opacity:.36;}50%{opacity:.6;}}
@keyframes heroSweep{0%{background-position:130% 0;}100%{background-position:-130% 0;}}
@keyframes bandUp{to{opacity:1;transform:none;}}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}
@media(prefers-reduced-motion:reduce){.chero::before,.chero::after,.chero__fx,.scrollcue{animation:none;}.chero__inner>*{animation:none;opacity:1;transform:none;}}

/* ===== Footer =====
   The reset line neutralises the older pages' bare `footer{...}` /
   `footer a{...}` rules (centered italic text, underlined links). */
.ft{background:var(--c-green-deep);color:rgba(255,255,255,.82);padding:44px 0 34px;margin:0;text-align:left;font-family:'Inter','PingFang TC',sans-serif;font-style:normal;font-size:16px;line-height:1.6;letter-spacing:normal;border:0;}
.ft a{text-decoration:none;}
.ft__inner{max-width:var(--c-max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr;gap:26px;}
@media(min-width:760px){.ft__inner{grid-template-columns:1.6fr 1fr 1.1fr;gap:40px;}}
.ft__brand{display:flex;gap:14px;align-items:flex-start;}
.ft__brand .ft__logo{width:58px;height:58px;object-fit:contain;flex-shrink:0;display:block;}
.ft__brand h4{margin:0;font-family:'Playfair Display',serif;font-size:21px;color:#fff;font-weight:700;line-height:1.15;}
.ft__brand .zh{font-size:14px;color:rgba(255,255,255,.8);margin-top:3px;}
.ft__addr{margin-top:10px;font-size:14px;color:rgba(255,255,255,.74);line-height:1.65;}
.ft__col h5{margin:0 0 12px;font-family:'Playfair Display',serif;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#BFE6CB;}
.ft__col ul{list-style:none;margin:0;padding:0;}
.ft__col li{margin-bottom:8px;font-size:15px;color:rgba(255,255,255,.86);}
.ft__col li a{color:rgba(255,255,255,.88);border-bottom:1px dashed rgba(223,242,230,.5);}
.ft__col li a:hover{color:#fff;}
.ft__bottom{max-width:var(--c-max);margin:30px auto 0;padding:18px 24px 0;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:rgba(255,255,255,.64);text-align:center;line-height:1.7;}
.ft__bottom a{color:#BFE6CB;border-bottom:1px dashed rgba(223,242,230,.5);}
.ft__bottom a:hover{color:#fff;}

/* ===== Connect buttons (footer) ===== */
.ft-ctas{display:flex;flex-direction:column;gap:12px;margin-top:2px;}
.ft-ctas .cta-btn{background:var(--c-green-soft);color:var(--c-green-deep);border:0;border-radius:12px;padding:13px 18px;display:flex;align-items:center;gap:12px;text-decoration:none;box-shadow:0 6px 16px -8px rgba(0,0,0,.4);transition:transform .18s,background .18s,color .18s,box-shadow .18s;}
.ft-ctas .cta-btn:hover{background:#fff;color:var(--c-green-deep);transform:translateY(-4px);box-shadow:0 14px 30px -14px rgba(0,0,0,.45);}
.ft-ctas .cta-btn__ico{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--c-green-deep);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:800;transition:background .18s;}
.ft-ctas .cta-btn:hover .cta-btn__ico{background:var(--c-green-soft);}
.ft-ctas .cta-btn--fb .cta-btn__ico{color:#1877F2;font-family:'Inter',sans-serif;}
.ft-ctas .cta-btn__tx{flex:1;min-width:0;}
.ft-ctas .cta-btn__t{display:block;font-family:'Playfair Display',serif;font-size:17px;font-weight:700;line-height:1.2;}
.ft-ctas .cta-btn__zh{display:block;font-family:'PingFang TC',sans-serif;font-size:13px;margin-top:3px;font-weight:600;opacity:.94;}
.ft-ctas .cta-btn__arrow{font-size:20px;font-weight:700;flex-shrink:0;transition:transform .18s;}
.ft-ctas .cta-btn:hover .cta-btn__arrow{transform:translate(3px,-3px);}
.ft-ctas .cta-btn--archive{background:rgba(255,255,255,.07);border:1.5px dashed rgba(255,255,255,.4);color:#fff;box-shadow:none;}
.ft-ctas .cta-btn--archive:hover{background:rgba(255,255,255,.16);color:#fff;box-shadow:none;}
.ft-ctas .cta-btn--archive .cta-btn__ico{background:rgba(255,255,255,.14);color:#fff;}
.ft-ctas .cta-btn--archive:hover .cta-btn__ico{background:rgba(255,255,255,.24);}
.ft-ctas .cta-btn--archive .cta-btn__zh{color:rgba(255,255,255,.74);opacity:1;}
.ft-ctas .cta-btn--archive .cta-btn__arrow{color:rgba(255,255,255,.85);}