/* Public site.
   The mockup carries its styling inline and that is preserved verbatim in the
   templates. This file holds only what inline styles cannot express: the base
   rules from the mockup's <style> block, and the hover states the mockup wrote
   as `style-hover` attributes (a prototype-only feature). Class names map one
   to one onto those attributes. */

html,body{margin:0;padding:0;background:#FFFFFF;color:#241A2E;
  font-family:"IBM Plex Sans","Noto Sans TC","PingFang HK","Microsoft JhengHei",sans-serif;
  -webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#4E1780;text-decoration:none}
a:hover{color:#3B0F5F;text-decoration:underline}
h1,h2,h3{text-wrap:balance;margin:0}
/* Every mockup page but the home page zeroes paragraph margins; the home page
   sets margin:0 inline on each of its paragraphs, so one rule serves both. */
p{text-wrap:pretty;margin:0}
:focus-visible{outline:2px solid #6E20A0;outline-offset:2px}

@keyframes bpc-roll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --- hover states, one class per distinct `style-hover` in the mockup --- */
.hov-nav:hover{color:#6E20A0;border-bottom:3px solid #E0C9F1;text-decoration:none}
.hov-menu:hover{background:#F8F3FC;color:#6E20A0;text-decoration:none}
.hov-menu-sub:hover{background:#F8F3FC;color:#6E20A0;border-left:3px solid #6E20A0;text-decoration:none}
.hov-btn-purple:hover{background:#3B0F5F;color:#fff;text-decoration:none}
.hov-btn-gold:hover{background:#F0B45C;color:#3B0F5F;text-decoration:none}
.hov-btn-ghost:hover{background:rgba(255,255,255,.12);color:#fff;text-decoration:none}
.hov-card:hover{box-shadow:0 4px 12px rgba(36,26,46,.13);text-decoration:none}
.hov-row:hover{background:#F8F3FC;text-decoration:none}
.hov-icon:hover{opacity:.85;text-decoration:none}
.hov-ctrl:hover{background:#F1E6F9}
.hov-hero-btn:hover{background:rgba(59,15,95,.8)}
.hov-pillar:hover{background:rgba(255,255,255,.12);text-decoration:none}
.hov-plain:hover{text-decoration:none}

/* The events viewport hides its scrollbar in the mockup via scrollbar-width;
   WebKit needs its own rule, which cannot be written inline. */
.events-viewport{scrollbar-width:none}
.events-viewport::-webkit-scrollbar{display:none}

/* Dropdown panels start hidden and are revealed by site.js. */
.nav-panel{opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity 200ms ease-out,transform 200ms ease-out}
.nav-panel.is-open{opacity:1;visibility:visible;transform:translateY(0)}

/* Mobile menu toggle: shown only where the nav would not fit.
   The nav and its panels carry the mockup's inline display/position styles,
   and an inline style beats any stylesheet rule that is not !important. */
.nav-toggle{display:none}
@media (max-width:900px){
  .nav-toggle{display:flex}
  .site-nav{display:none !important;width:100%;flex-direction:column;align-items:stretch !important;
    border-top:1px solid #E4E1EA;padding:8px 0 12px}
  /* The header is sticky, so an open menu taller than the screen used to stay pinned
     while the page scrolled behind it. It now scrolls on its own within the room
     below its top edge (--nav-room, set by site.js), and the page is held still.
     nowrap overrides the inline flex-wrap, which would fold a capped column sideways. */
  .site-nav.is-open{display:flex !important;flex-wrap:nowrap !important;max-height:var(--nav-room,70vh);overflow-y:auto;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  html.nav-locked{overflow:hidden}
  .site-nav [data-menu]{flex-direction:column;align-items:stretch !important}
  .site-nav .nav-panel{position:static !important;opacity:1;visibility:visible;transform:none;
    min-width:0 !important;box-shadow:none !important;border:0 !important;border-left:2px solid #E4E1EA !important;
    border-radius:0 !important;margin:0 0 4px 14px;padding:0 !important;max-height:none;display:none !important;
    overflow:visible !important;overscroll-behavior:auto !important}
  /* That last line: 組織及架構's panel scrolls on its own on desktop (inline overflow-y and
     overscroll-behavior). Stacked, it has nothing to scroll and would swallow the swipe. */
  .site-nav .nav-panel.is-open{display:flex !important}
}

/* Inner pages: in-page navigation beside the content. Below 860px the sidebar
   is dropped rather than stacked — the main menu already reaches every page. */
.bpc-side-layout{display:flex;gap:48px;align-items:flex-start}
.bpc-side-nav{flex:0 0 260px}
.bpc-side-content{flex:1;min-width:0}
@media (max-width:860px){.bpc-side-nav{display:none !important}}

/* 總監及領袖's chart: each post's card is indented one step under the post it reports to.
   A line drops from --tree-spine inside the parent's card; every card's elbow joins it from
   the top of its row to the card's middle, and every card but the last carries the line on
   past its own reports to the next one. Inline styles cannot draw these, hence the class. */
.bpc-tree{--tree-step:40px;--tree-spine:24px;--tree-gap:16px}
.bpc-tree,.bpc-tree ul{list-style:none;margin:0;padding:0}
.bpc-tree ul{padding-left:var(--tree-step)}
.bpc-tree li>div{position:relative}
.bpc-tree ul>li{position:relative;padding-top:var(--tree-gap)}
.bpc-tree ul>li:not(:last-child)::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--tree-spine) - var(--tree-step));border-left:2px solid #8D869C}
/* Measured from inside the card's 1px border, hence the -1px. */
.bpc-tree ul>li>div::before{content:"";position:absolute;box-sizing:border-box;top:calc(-1px - var(--tree-gap));height:calc(50% + 1px + var(--tree-gap));left:calc(var(--tree-spine) - var(--tree-step) - 1px);width:calc(var(--tree-step) - var(--tree-spine));border-left:2px solid #8D869C;border-bottom:2px solid #8D869C}
@media (max-width:600px){.bpc-tree{--tree-step:22px;--tree-spine:12px}}

/* The carousel controls sit bottom-right over the banner. On a narrow screen the
   call-to-action buttons run the full width and would sit underneath them, so the
   text is lifted clear: 24px offset + 44px controls + 28px gap. */
@media (max-width:760px){.hero-text-clear{padding-bottom:96px !important}}

/* The lightbox dialog lays itself out inline with display:flex, which would
   otherwise override the hidden attribute. */
.lightbox[hidden]{display:none !important}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:#3B0F5F;color:#fff;
  padding:10px 16px;border-radius:0 0 6px 0}
.skip-link:focus{left:0;color:#fff}

/* --- Rich text from the CMS -------------------------------------------
   Editors write body copy in Quill; these rules give it the same type as the
   hand-written prose in mockup/aboutus.dc.html, which sets the house style for
   long-form Chinese text. */
.richtext{font-size:16px;line-height:1.95;letter-spacing:.02em;color:#241A2E}
.richtext > *:first-child{margin-top:0}
.richtext > *:last-child{margin-bottom:0}
.richtext p{margin:0 0 18px}
.richtext h2{font-size:24px;font-weight:600;color:#3B0F5F;letter-spacing:.01em;margin:32px 0 14px;line-height:1.35}
.richtext h3{font-size:20px;font-weight:600;color:#3B0F5F;letter-spacing:.01em;margin:28px 0 12px;line-height:1.4}
.richtext h4{font-size:17px;font-weight:600;color:#4A4458;letter-spacing:.01em;margin:24px 0 10px}
.richtext ul,.richtext ol{margin:0 0 18px;padding-left:1.6em}
.richtext li{margin-bottom:8px}
.richtext a{color:#4E1780;text-decoration:underline}
.richtext a:hover{color:#3B0F5F}
.richtext strong{font-weight:600}
.richtext blockquote{margin:0 0 18px;padding:16px 20px;background:#F4F2F7;border-left:4px solid #E8A33D;
  border-radius:6px;font-size:15px;line-height:1.9;color:#4A4458}
.richtext pre{margin:0 0 18px;padding:14px 16px;background:#F4F2F7;border:1px solid #E4E1EA;border-radius:6px;
  font-family:ui-monospace,Menlo,monospace;font-size:13px;line-height:1.7;overflow-x:auto}
.richtext img{max-width:100%;height:auto;border-radius:6px;margin:8px 0}
.richtext hr{border:0;border-top:1px solid #E4E1EA;margin:28px 0}
.richtext table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px}
.richtext th{text-align:left;font-weight:600;color:#fff;background:#3B0F5F;padding:12px 16px}
.richtext td{border-bottom:1px solid #E4E1EA;padding:12px 16px;vertical-align:top}
/* Quill writes alignment and indentation as classes. */
.richtext .ql-align-center{text-align:center}
.richtext .ql-align-right{text-align:right}
.richtext .ql-align-justify{text-align:justify}
.richtext .ql-indent-1{padding-left:3em}
.richtext .ql-indent-2{padding-left:6em}
.richtext .ql-indent-3{padding-left:9em}

/* --- A circular's PDF, drawn into the page by assets/js/pdf-inline.js ----
   The section lays itself out inline with display:flex, which would otherwise
   override the hidden attribute it starts with. The ring is a shadow rather than
   a border so it takes no room from the page, whose shape must match the PDF's. */
.pdf-viewer[hidden]{display:none !important}
.pdf-page{position:relative;width:100%;background:#fff;box-shadow:0 0 0 1px #E4E1EA;overflow:hidden;
  --total-scale-factor:1;--scale-round-x:1px;--scale-round-y:1px}
.pdf-page canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pdf-link{position:absolute;z-index:2}
.pdf-link:focus-visible{outline:2px solid #6E20A0;outline-offset:1px}

/* PDF.js's text layer, copied from its web/pdf_viewer.css (6.3.289) and flattened,
   without the viewer's search highlighting: invisible text laid exactly over the
   picture, so the words can be selected, searched and read aloud. */
.pdf-page .textLayer{color-scheme:only light;position:absolute;text-align:initial;inset:0;overflow:clip;
  opacity:1;line-height:1;letter-spacing:normal;word-spacing:normal;-webkit-text-size-adjust:none;
  text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;caret-color:CanvasText;z-index:0;
  --min-font-size:1;--text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv:calc(1 / var(--min-font-size))}
.pdf-page .textLayer :is(span,br){color:transparent;position:absolute;white-space:pre;cursor:text;
  transform-origin:0% 0%;-webkit-user-select:text;user-select:text}
.pdf-page .textLayer > :not(.markedContent),
.pdf-page .textLayer .markedContent span:not(.markedContent){z-index:1;--font-height:0;
  font-size:calc(var(--text-scale-factor) * var(--font-height));--scale-x:1;--rotate:0deg;
  transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv))}
.pdf-page .textLayer .markedContent{display:contents}
.pdf-page .textLayer span[role="img"]{-webkit-user-select:none;user-select:none;cursor:default}
.pdf-page .textLayer ::selection{background:rgba(0,0,255,.25);color:transparent}
.pdf-page .textLayer br::selection{background:transparent}
.pdf-page .textLayer .endOfContent{display:block;position:absolute;inset:100% 0 0;z-index:0;cursor:default;
  -webkit-user-select:none;user-select:none}
.pdf-page .textLayer.selecting .endOfContent{top:0}
.pdf-page .textLayer[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}
.pdf-page .textLayer[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}
.pdf-page .textLayer[data-main-rotation="270"]{transform:rotate(270deg) translateX(-100%)}