/* Unifont-JP: apply to Japanese character ranges so only Japanese glyphs use this font */
@font-face{
    font-family: 'Unifont-JP';
    src: url('unifont_jp-17.0.01.woff2') format('woff2'),
         url('unifont_jp-17.0.01.otf') format('opentype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    /* Common Japanese ranges: punctuation/kana/kanji/fullwidth */
    unicode-range: U+3000-30FF, U+3040-309F, U+30A0-30FF, U+31F0-31FF, U+4E00-9FFF, U+3400-4DBF, U+FF00-FFEF;
}

/* Replace bundled custom font with hosted Unifont files (WOFF2 preferred) */
@font-face{
    font-family: 'Unifont';
    /* Prefer WOFF2 for better compression and browser support, fall back to OTF, then local installs */
    src: url('unifont-17.0.01.woff2') format('woff2'),
         url('unifont-17.0.01.otf') format('opentype'),
         local('Unifont'), local('GNU Unifont');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root{ --bg:#0d0d0d; --fg:#f5f5f5; --muted:#aaa; }
html,body{height:100%}
body{
    background-color: transparent;
    color: var(--fg);
    display:flex; flex-direction:column; min-height:100vh;
    overflow-x:hidden;
    /* Prefer Unifont-JP for Japanese text, then Unifont, then system fallbacks */
    font-family: 'Unifont-JP', 'Unifont', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
html{ background-color: var(--bg); }

/* 背景畫布鋪滿（置於根背景之上、內容之下，利於混合） */
#hydra-canvas{
    position:fixed; inset:0; z-index:0;
    width:100vw; height:100vh; display:block; pointer-events:none;
    background:#000; /* 讓畫布有實色底，避免透明像素導致混合看起來不穩定 */
}

/* 內容層在畫布之上（不建立新的疊放上下文以利混合） */
.content-layer{ position:relative; }

/* Navbar / Footer 透明、無底色 */
nav.navbar, footer{
    background: transparent !important;
}
nav a{ color: var(--fg) !important; }
nav a:hover:not(.hero-invert){ color:#ffd6f6 !important; }
footer{ color: var(--muted); }

/* 固定 Footer 於底部，並確保層級在主內容之上；Navbar 也提升層級 */
nav.navbar{ z-index:2; position: relative; }
footer{
    position:fixed; left:0; right:0; bottom:0;
    width:100%; z-index:2;
}

/* Header/Footer 專屬畫布（僅覆蓋各自區域） */
#hydra-header, #hydra-footer{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%; display:block; pointer-events:none;
    background:#000;
}

/* 確保 header/footer 內容蓋在其各自畫布之上 */
nav.navbar > *, footer > *{ position: relative; z-index:1; }

/* Portrait 模式：品牌點擊展開下滑式「樹狀」選單 */
@media (orientation: portrait){
  #brand-toggle{ cursor:pointer; position: relative; }
  /* caret indicator */
  #brand-toggle::after{
    content: '▸';
    margin-left:.5rem; font-weight:700; display:inline-block; transform: translateY(-1px);
  }
  /* when open */
  #site-nav.menu-open #brand-toggle::after{ content:'▾'; }

  /* Ensure Bootstrap's .collapse doesn't hide the menu in portrait */
  #navMenu.collapse{ display:block !important; }

  /* collapse container becomes animated panel */
  #navMenu{
    overflow:hidden;
    max-height:0; transition:max-height .3s ease; width:100%;
  }
  #site-nav.menu-open #navMenu{ max-height: 320px; }

  /* Tree-like styling */
  #navMenu .navbar-nav{ align-items:flex-start; padding-left:.25rem; margin-left:.5rem; border-left:2px solid rgba(245,245,245,.35); }
  #navMenu .nav-item{ width:100%; }
  #navMenu .nav-link{ padding:.35rem .75rem; position:relative; display:block; }
  #navMenu .nav-link::before{
    content:''; position:absolute; left:-.5rem; top:1.05em; width:.5rem; height:1px; background: rgba(245,245,245,.35);
  }
}
 
 /* 版面結構：中間置中；讓文字可與背景正常混合（不要隔離） */
 main{
    min-height:100vh; display:flex; justify-content:center; align-items:center; text-align:center; padding:2rem;
}

/* 核心：文字對背景 difference → 自動反相 */
.hero-invert{
    /* 使用預設 display（h1/p 會是 block，確保直向排列） */
    mix-blend-mode:difference;
    color:#fff !important; /* 確保覆蓋 Bootstrap/nav 顏色規則，difference + 白色 更穩定反相 */
}

.hero-logo{
    mix-blend-mode:normal;
    display:inline-block;
    width:var(--logo-size,160px);
    height:auto;
    max-width:none;
    filter:invert(1);
}

/* Fallback：不支援時用陰影確保可讀性 */
@supports not (mix-blend-mode: difference){
    .hero-invert{ color:#f5f5f5; text-shadow:0 0 10px rgba(0,0,0,.6), 0 0 22px rgba(0,0,0,.4); }
}

/* 降動保護 */
@media (prefers-reduced-motion: reduce){
    #hydra-canvas{ display:none !important; }
}

/* Contact page helpers */
.qr-box{
    width: min(60vw, 220px);
    height: min(60vw, 220px);
    border: 2px dashed rgba(245,245,245,.6);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
}
.qr-box img{ max-width:100%; max-height:100%; border-radius:8px; }
.social-icons a{ color: var(--fg); opacity:.9; text-decoration: none; }
.social-icons a:hover{ color:#ffd6f6; opacity:1; }

/* Ensure elements marked as Japanese use Unifont-JP explicitly (helps when unicode-range misses something)
   Prefer using proper lang attributes on elements that contain Japanese text, e.g. <p lang="ja">...<p> */
:lang(ja), [lang|="ja"]{
    font-family: 'Unifont-JP', 'Unifont', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* small helper class in case you cannot set lang attributes everywhere */
.unifont-jp{ font-family: 'Unifont-JP', 'Unifont', sans-serif; }