@charset "utf-8";
/* ------------------------------------------------------------------
   responsive-fixes.css
   Remediation layer for wmg2025warmup.org.tw.
   Loaded last, after page.css / page_r-1.css, so it wins on conflict.
   Scope is deliberately narrow: it repairs overflow caused by legacy
   CMS markup and does not restyle the theme.
   ------------------------------------------------------------------ */

/* 1. Consistent box model -------------------------------------------------
   The theme mixes content-box and border-box. Padded full-width blocks
   overflow their parent on narrow screens as a result. */
*, *::before, *::after { box-sizing: border-box; }

/* 2. Kill horizontal page scroll ----------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; overflow-x: hidden; }

/* 3. Media never exceeds its container ----------------------------------- */
img, svg, video, canvas, object, embed {
  max-width: 100%;
  height: auto;
}

/* 4. Tables ---------------------------------------------------------------
   The CMS editor hardcoded pixel widths on <td> (width:261px, 260px, 277px
   and similar) across ~256 pages. Two <td> at 261px force a 522px minimum,
   which breaks every phone viewport. Below the desktop breakpoint the fixed
   widths are released so cells can reflow; .table-responsive is the safety
   net for genuinely wide tables. Author !important is required because the
   widths are inline styles. */
.table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive > table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: collapse;
}

@media (max-width: 991px) {
  .table-responsive > table {
    table-layout: auto;
  }
  .table-responsive > table td,
  .table-responsive > table th {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  /* Tables wider than the viewport keep their shape and scroll instead of
     squashing text into single characters per line. */
  .table-responsive > table[data-wide="1"] {
    width: auto !important;
    min-width: 100%;
  }
}

/* 5. Long unbroken strings ------------------------------------------------
   URLs, order numbers and ID strings in content were pushing the layout
   wider than the viewport. */
p, li, dd, td, th, h1, h2, h3, h4, h5, h6, .cnt, .content {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* 6. Embedded video -------------------------------------------------------
   YouTube embeds carry width="560" height="315" attributes. */
iframe {
  max-width: 100%;
}

/* 7. Form controls --------------------------------------------------------
   Registration forms use fixed-width inputs that overflow on mobile, and
   sub-16px font sizes trigger iOS auto-zoom on focus. */
@media (max-width: 767px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  select,
  textarea {
    max-width: 100%;
    font-size: 16px;
  }
}

/* 8. Pre / code blocks --------------------------------------------------- */
pre { max-width: 100%; overflow-x: auto; }

/* 9. Accessibility ---------------------------------------------------------
   The theme's :::-style skip links are visually hidden by positioning them
   off-canvas; make sure they return on keyboard focus. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #0070BC;
  outline-offset: 2px;
}

/* 10. Site map page ------------------------------------------------------- */
.sitemap-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 110px 20px 60px;
}
@media (min-width: 992px) {
  .sitemap-wrap { padding-top: 40px; }
}
.sitemap-wrap h1 {
  font-size: 1.75rem;
  color: #0070BC;
  border-bottom: 3px solid #0070BC;
  padding-bottom: 12px;
  margin-bottom: 8px;
}
.sitemap-wrap .sitemap-intro {
  color: #666;
  font-size: 1rem;
  margin: 0 0 32px;
}
.sitemap-wrap h2 {
  font-size: 1.25rem;
  color: #222;
  margin: 32px 0 12px;
  padding-left: 12px;
  border-left: 5px solid #0070BC;
}
.sitemap-wrap ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px 24px;
}
@media (min-width: 768px) {
  .sitemap-wrap ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
  .sitemap-wrap ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sitemap-wrap li { margin: 0; }
.sitemap-wrap li a {
  display: block;
  padding: 9px 4px;
  color: #333;
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid #eee;
  overflow-wrap: break-word;
}
.sitemap-wrap li a:hover,
.sitemap-wrap li a:focus {
  color: #0070BC;
  background: #f4f9fd;
}

/* 11. Header: logo and menu share one row ---------------------------------
   index.css and page.css reserve 450px for the logo at every desktop width
   and page_r-1.css only scales it down part of the way, so between 1024px
   and ~1500px the menu ran past the right edge and was clipped by the
   overflow-x rule above. All three stylesheets now follow one scale, sized
   for the full 7-item menu plus a 17px Windows scrollbar, with the member
   link hidden (section 13). The sticky header (.header-fixed) draws a 302px
   logo panel, which covered the first menu item between 1024px and 1279px. */
@media (min-width: 992px) and (max-width: 1023.98px) {
  /* The fixed hamburger (#bar-nav) sits at the far left in this range. */
  header .header-container #header-top #logo { flex: 0 0 250px; }
  header .header-container #header-top #logo img { height: 60px !important; }
  header .header-container #header-top #logo .logo-img .logo-img-a { padding: 20px 40px 20px 60px; }
}
@media (min-width: 1024px) {
  nav ul.nav-ul { padding: 0; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  header .header-container #header-top #logo { flex: 0 0 230px; }
  header .header-container #header-top #logo img { height: 60px !important; }
  header .header-container #header-top #logo .logo-img .logo-img-a { padding: 30px 40px; }
  .header-fixed .header-container #header-top #logo .logo-img .logo-img-a { padding: 20px 40px; }
  nav ul.nav-ul > li a { font-size: 1.125rem; padding: 10px; }
}
@media (min-width: 1280px) and (max-width: 1439.98px) {
  header .header-container #header-top #logo { flex: 0 0 400px; }
  header .header-container #header-top #logo img { height: 90px !important; }
  header .header-container #header-top #logo .logo-img .logo-img-a { padding: 30px 80px; }
  nav ul.nav-ul > li a { font-size: 1.25rem; padding: 10px; }
}

/* 12. Footer ----------------------------------------------------------------
   The 45 older pages lack the inline <style> that stops the logo column from
   shrinking. The column shrank while the image kept its 200px width and
   covered the service hours / email / phone lines. */
@media (min-width: 992px) {
  footer .foot-logo { flex: 0 0 230px; width: 230px; margin: 0; }
  footer .foot-logo img { max-width: 160px !important; }
  footer .foot-c .fl { flex: 1 1 auto; min-width: 0; }
}
/* The fixed LINE and back-to-top buttons sit in the bottom-right corner. At
   the end of a page they covered the footer badges (desktop) and the
   copyright links (mobile), so footer content stays clear of that column. */
@media (min-width: 992px) and (max-width: 1439.98px) {
  footer .foot-c { padding-right: 80px; }
}
@media (max-width: 991.98px) {
  footer .foot-c .fl .fl2 { padding-right: 56px; }
}

/* 13. Member features hidden ------------------------------------------------
   Member login / sign-up, 紅利點數兌換 points redemption and 報名查詢修改
   registration lookup cannot work on this static site. Those pages were
   deleted on 2026-10-02 (301s in .htaccess / nginx.txt) and their links
   removed. What is left here: #member-area stays in the HTML because
   template.js uses it as the anchor that moves #nav-wrap back into the
   header when the window widens, and it still holds the 會員Line登入
   button on the 45 older pages. The third side-menu tab (報名查詢修改,
   now linking to "/" everywhere) stays in the HTML so that
   `.menu-aside a:last-of-type { margin: 0 }` keeps applying to it, not to
   立即報名. */
#member-area,
.menu-aside > a:nth-of-type(3) {
  display: none !important;
}

/* 14. Sticky header without the jump -----------------------------------------
   From 992px the header sits in the page flow, and template.js switches it
   to position:fixed (.header-fixed) as soon as the page scrolls. That pulled
   all content up by the header's height. On the 43 registration pages, whose
   inline script auto-scrolls on load, the jump left the page title under
   the header. Reserving the header's height while it is fixed removes the
   jump. The heights are the unscrolled header from section 11. */
@media (min-width: 992px) {
  body:has(> header.header-fixed) { padding-top: 60px; }
}
@media (min-width: 1024px) {
  body:has(> header.header-fixed) { padding-top: 110px; }
}
@media (min-width: 1280px) {
  body:has(> header.header-fixed) { padding-top: 113px; }
}

/* 15. Stacking on phones and tablets ----------------------------------------
   Below 1024px #tab-menu (活動簡章 / 立即報名) had z-index 100000. While
   scrolling it slid over the fixed header and hamburger, and it cut across
   the announcement popup (Magnific Popup, z-index 1042-1046). 100 matches
   the desktop value in the theme. */
@media (max-width: 1023.98px) {
  div#tab-menu { z-index: 100; }
}
/* The popup's close button (35px square, top right) sat on the first line
   of the notice text. */
div#pop-block { padding-top: 44px; }