:root{
  --rf-bg:#05070a;
  --rf-panel:#0b1018;
  --rf-line:rgba(255,255,255,.12);
  --rf-text:#f7f9fc;
  --rf-muted:#98a4b3;
  --rf-blue:#59b8ff;
  --rf-cyan:#5ce8ff;
  --rf-violet:#8a72ff;
  --rf-header-height:72px;
  --rf-header-anchor-offset:88px;
}

/*
 * 固定頁首高度補償
 * - 頁面有 .rock-site-header-spacer：使用 spacer 佔位
 * - 頁面漏放 spacer：自動在 body 頂部補上相同高度
 * - 避免 fixed 頁首蓋住首頁、文章頁與一般頁面的第一個區塊
 */
html{
  scroll-padding-top:var(--rf-header-anchor-offset);
}

body:has(.rock-site-header):not(:has(.rock-site-header-spacer)){
  padding-top:var(--rf-header-height);
}

.rock-site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:2147483000;
  width:100%;
  height:var(--rf-header-height);
  border-bottom:1px solid rgba(255,255,255,.09);
  background:rgba(5,7,10,.88);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.rock-site-header-spacer{
  display:block;
  width:100%;
  height:var(--rf-header-height);
  min-height:var(--rf-header-height);
  flex:0 0 var(--rf-header-height);
}

.rock-site-header__inner{
  width:min(1180px,calc(100% - 28px));
  height:100%;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.rock-site-header__brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--rf-text);
  text-decoration:none;
}

.rock-site-header__mark{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(92,232,255,.24);
  border-radius:12px;
  background:linear-gradient(
    135deg,
    rgba(92,232,255,.14),
    rgba(138,114,255,.16)
  );
  color:#fff;
  font-size:20px;
  font-weight:950;
  box-shadow:0 0 24px rgba(89,184,255,.09);
}

.rock-site-header__brand-text{
  min-width:0;
}

.rock-site-header__brand-text strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.02em;
}

.rock-site-header__brand-text span{
  display:block;
  margin-top:3px;
  color:#8290a0;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
}

.rock-site-header__desktop{
  display:flex;
  align-items:center;
  gap:6px;
}

.rock-site-header__desktop a{
  min-height:42px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  color:#bec7d2;
  text-decoration:none;
  border-radius:11px;
  font-size:13px;
  font-weight:800;
}

.rock-site-header__desktop a:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}


/* =========================
漢堡選單
========================= */

.rock-site-menu{
  position:relative;
  flex:0 0 auto;
}

.rock-site-menu summary{
  list-style:none;
  width:44px;
  height:44px;
  cursor:pointer;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:rgba(255,255,255,.04);
}

.rock-site-menu summary::-webkit-details-marker{
  display:none;
}

.rock-site-menu__icon{
  position:relative;
  width:19px;
  height:14px;
}

.rock-site-menu__icon::before,
.rock-site-menu__icon::after,
.rock-site-menu__icon span{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:99px;
  background:#edf4fb;
}

.rock-site-menu__icon::before{
  top:0;
}

.rock-site-menu__icon span{
  top:6px;
}

.rock-site-menu__icon::after{
  bottom:0;
}

.rock-site-menu__panel{
  position:absolute;
  top:54px;
  right:0;
  width:min(330px,calc(100vw - 28px));
  padding:14px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:20px;
  background:rgba(7,11,17,.97);
  box-shadow:0 26px 70px rgba(0,0,0,.48);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}

.rock-site-menu__top{
  padding:10px 10px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.rock-site-menu__top strong{
  display:block;
  font-size:16px;
  color:#f7f9fc;
}

.rock-site-menu__top span{
  display:block;
  margin-top:5px;
  color:#8793a3;
  font-size:12px;
}

.rock-site-menu__links{
  display:grid;
  gap:4px;
  margin-top:10px;
}

.rock-site-menu__links a{
  min-height:44px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#d6dee8;
  text-decoration:none;
  border-radius:11px;
  font-size:13px;
  font-weight:800;
}

.rock-site-menu__links a:hover{
  background:rgba(255,255,255,.05);
}

.rock-site-menu__contact{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px;
}

.rock-site-menu__contact a{
  min-height:48px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:13px;
  text-decoration:none;
  font-size:13px;
  font-weight:900;
}

.rock-site-menu__phone{
  color:#041019;
  background:linear-gradient(
    110deg,
    #5ce8ff,
    #59b8ff
  );
}

.rock-site-menu__line{
  color:#fff;
  border:1px solid rgba(138,114,255,.34);
  background:linear-gradient(
    110deg,
    rgba(89,184,255,.15),
    rgba(138,114,255,.22)
  );
}


/* =========================
RWD
========================= */

@media(max-width:900px){

  .rock-site-header__desktop{
    display:none;
  }

}

@media(max-width:600px){

  :root{
    --rf-header-height:64px;
    --rf-header-anchor-offset:78px;
  }

  .rock-site-header__inner{
    width:min(100% - 20px,1180px);
  }

  .rock-site-header__mark{
    width:36px;
    height:36px;
    flex-basis:36px;
  }

  .rock-site-header__brand-text strong{
    font-size:14px;
  }

  .rock-site-header__brand-text span{
    font-size:9px;
  }

  .rock-site-menu__panel{
    top:50px;
  }

  .rock-site-menu__contact{
    grid-template-columns:1fr;
  }

}