/* ==========================================================================
   2030 Taiwan Plus — unified header, footer and responsive corrections.
   Replaces the two legacy Vue-scoped header components with one nav that
   works without a JavaScript framework.
   ========================================================================== */

:root {
  --tp-coral:        #f97455;
  --tp-coral-dark:   #e35841;
  --tp-brown:        #653024;
  --tp-ink:          #2e2e2e;
  --tp-line:         rgba(45, 45, 45, .5);
  --tp-header-h:     70px;
  --tp-header-h-sm:  50px;
}

/* --- global: kill horizontal overflow -------------------------------- */
html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

html, body { max-width: 100%; overflow-x: hidden; }

img, svg, video { max-width: 100%; height: auto; }

/* --- header ---------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: var(--tp-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 39px;
  background: #fff;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .16);
  z-index: 1000;
}

.site-header__brand {
  color: var(--tp-brown);
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

/* hamburger ----------------------------------------------------------- */
.site-header__burger {
  display: none;
  position: relative;
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.site-header__burger span {
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: #a6a6a6;
  transition: transform .3s, opacity .3s, top .3s;
}
.site-header__burger span:nth-child(1) { top: 3px; }
.site-header__burger span:nth-child(2) { top: 11px; }
.site-header__burger span:nth-child(3) { top: 19px; }

.site-header__burger.is-active span:nth-child(1) { top: 11px; transform: rotate(45deg); }
.site-header__burger.is-active span:nth-child(2) { opacity: 0; transform: translateX(-100%); }
.site-header__burger.is-active span:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* nav ----------------------------------------------------------------- */
.nav__list {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item { position: relative; }

.nav__link {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 19px;
  border: 0;
  border-radius: 50px;
  background: var(--tp-coral);
  color: #fff;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s;
}
.nav__link:hover,
.nav__link:focus-visible { background: var(--tp-coral-dark); }
.nav__link.is-current    { background: var(--tp-coral-dark); }

/* dropdown caret */
.nav__toggle-sub { padding-right: 34px; }
.nav__toggle-sub::after {
  content: "";
  position: absolute;
  right: 16px; top: 50%;
  width: 7px; height: 7px;
  margin-top: -5px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  transition: transform .3s;
}
.nav__toggle-sub[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }

.nav__sub {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 172px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.nav__item--has-sub:hover .nav__sub,
.nav__item--has-sub:focus-within .nav__sub,
.nav__sub.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__sublink {
  display: block;
  padding: 10px 20px;
  color: var(--tp-brown);
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}
.nav__sublink:hover,
.nav__sublink:focus-visible { background: #fdeded; color: var(--tp-coral-dark); }
.nav__sublink.is-current    { color: var(--tp-coral-dark); font-weight: 500; }

/* --- footer ---------------------------------------------------------- */
.site-footer {
  padding: 40px 20px;
  border-top: 1px solid var(--tp-line);
  background: #fff;
  text-align: center;
}
.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.site-footer__nav a {
  color: var(--tp-brown);
  font-size: 15px;
  text-decoration: none;
  transition: color .2s;
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible { color: var(--tp-coral-dark); text-decoration: underline; }

.site-footer__copyright {
  margin: 0;
  color: var(--tp-ink);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

/* --- tablet ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .site-header { padding: 0 24px; }
  .nav__link   { height: 36px; padding: 0 14px; font-size: 15px; }
  .nav__toggle-sub { padding-right: 28px; }
  .nav__toggle-sub::after { right: 12px; }
}

/* --- mobile drawer --------------------------------------------------- */
@media (max-width: 768px) {
  .site-header {
    height: var(--tp-header-h-sm);
    padding: 0 15px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .16);
  }
  .site-header__brand  { font-size: 16px; letter-spacing: .64px; }
  .site-header__burger { display: block; }

  .site-nav {
    position: fixed;
    top: var(--tp-header-h-sm);
    right: 0;
    width: min(82vw, 320px);
    height: calc(100vh - var(--tp-header-h-sm));
    padding: 24px 0 40px;
    background: #fff;
    box-shadow: -4px 0 18px rgba(0, 0, 0, .12);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    transition: transform .3s ease;
  }
  .site-nav.is-open { transform: translateX(0); }

  .nav__list { display: block; }
  .nav__item { margin: 0; }

  .nav__link {
    width: 100%;
    height: auto;
    padding: 14px 24px;
    border-radius: 0;
    background: transparent;
    color: var(--tp-coral);
    font-size: 16px;
    text-align: left;
    justify-content: flex-start;
  }
  .nav__link:hover,
  .nav__link:focus-visible,
  .nav__link.is-current { background: #fdeded; color: var(--tp-coral-dark); }

  .nav__toggle-sub::after { border-color: var(--tp-coral); right: 24px; }

  /* accordion instead of flyout on touch */
  .nav__sub {
    position: static;
    min-width: 0;
    max-height: 0;
    padding: 0;
    border-radius: 0;
    background: #fcf6f4;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    overflow: hidden;
    transition: max-height .3s ease;
  }
  .nav__item--has-sub:hover .nav__sub,
  .nav__item--has-sub:focus-within .nav__sub { max-height: 0; }
  .nav__sub.is-open { max-height: 320px; }

  .nav__sublink { padding: 12px 24px 12px 40px; font-size: 15px; }

  .site-footer          { padding: 30px 16px; }
  .site-footer__nav ul  { gap: 10px 18px; margin-bottom: 18px; }
  .site-footer__nav a   { font-size: 14px; }
  .site-footer__copyright { font-size: 14px; }
}

@media (max-width: 375px) {
  .site-header__brand { font-size: 14px; }
  .site-nav { width: 88vw; }
}

/* --- scroll-to-top (JS-driven, was a Vue component) ------------------- */
.scrollToTop { cursor: pointer; }
.scrollToTop.active { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* --- accessibility --------------------------------------------------- */
:focus-visible { outline: 2px solid var(--tp-coral-dark); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Alignment fixes (2026-10-05)
   ========================================================================== */

/* header/footer render identically on every page, including 404 which
   ships its own body font stack */
.site-header,
.site-footer {
  font-family: "Noto Sans", "微軟正黑體", "Helvetica", "roboto", arial;
  line-height: 1.7;
}
.site-header__brand { line-height: 34px; }

/* home: the article slider lost its slides in cleanup, so the CTA was
   pinned to the right edge of an empty left column. Collapse the empty
   swiper and centre the CTA under the hero. */
.sliderBanner__content:not(:has(.swiper-slide > *)) .article-swiper,
.sliderBanner__content:not(:has(.swiper-slide > *)) .swiper-pagination { display: none; }
.sliderBanner__content:not(:has(.swiper-slide > *)) .sliderBanner__content__info {
  width: 100%;
  margin-bottom: 0;
  align-items: center;
}
.sliderBanner__content:not(:has(.swiper-slide > *)) .sliderBanner__content__info__btn {
  display: flex;
  justify-content: center;
}

/* FAQ: question text ran underneath the caret */
.textToggle__question { position: relative; padding-right: 24px; }

/* reward chart slider: stack slides in one cell, show the active one */
.donutPieSlider .article-swiper .swiper-wrapper { display: grid; transform: none !important; }
.donutPieSlider .article-swiper .swiper-slide { grid-area: 1 / 1; visibility: hidden; }
.donutPieSlider .article-swiper .swiper-slide.swiper-slide-active { visibility: visible; }
.donutPieSlider .slider-button {
  cursor: pointer;
  transition: opacity .2s ease, transform 160ms ease-out;
}
.donutPieSlider .slider-button.button-prev {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M0 22L22 0l2.1 2.1L4.2 22l19.9 19.9L22 44 0 22z' fill='%23f97455'/%3E%3C/svg%3E");
}
.donutPieSlider .slider-button.button-next {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27 44'%3E%3Cpath d='M27 22L5 44l-2.1-2.1L22.8 22 2.9 2.1 5 0l22 22z' fill='%23f97455'/%3E%3C/svg%3E");
}
@media (hover: hover) and (pointer: fine) {
  .donutPieSlider .slider-button:hover { opacity: .75; }
}
.donutPieSlider .slider-button:active { transform: scale(.94) !important; }
.donutPieSlider .slider-button.button-next { transform: none !important; }
.donutPieSlider .slider-button.is-disabled { opacity: .3; pointer-events: none; }

@media (max-width: 768px) {
  /* filters used a 7px gutter while the form above uses 30px */
  .sectionComments__filters__items { padding: 0 23px; }

  /* teal info box: icons overlapped the questionnaire URL */
  .questionsForm .questionsForm__info { padding-bottom: 40px; }
}