/* ============================================================
   julianflower.com 升級後樣式修正（覆蓋用）
   貼到後台：/admin/system/customized_css_list
   這份會被輸出到 customize/customized_css.css，
   載入順序在 static/css/style_b/main.css 之後，所以會蓋過佈景預設值。
   ============================================================ */

/* ↓↓↓ @import 一定要留在整份 CSS 的最前面，往下移就會被瀏覽器忽略 ↓↓↓
   （用途見最後一段「3. 字型」） */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@400;500;700&family=Playfair+Display:wght@400;500;700&display=swap');


/* ------------------------------------------------------------
   1. 作品集圖片牆（首頁 #img-waterfall）——還原舊版樣式
   問題：新版把「hover 才浮出標題」改成「圖片下方常駐標題卡」，
        且 .grid-item 的 10px 內距被拿掉，圖片全部貼在一起。
   ------------------------------------------------------------ */

/* 1-1 恢復圖片之間的間距（舊版是 padding:10px） */
#img-waterfall .grid .grid-item {
  padding: 10px;
}

/* 1-2 hover 遮罩改回深色（新版誤設成 rgba(255,255,255,.3) 白色，
       蓋在照片上會整片泛白） */
#img-waterfall .grid .grid-item .img-box::before {
  background-color: rgba(0, 0, 0, 0.35);
}

/* 1-3 移除新版中央的放大鏡圖示（舊版沒有） */
#img-waterfall .grid .grid-item .img-box::after {
  content: none;
}

/* 1-4 標題改回「壓在圖片左下、hover 才淡入」
   ⚠ z-index:2 一定要留著。新佈景的 .img-box::before（遮罩）帶了 z-index:1，
     .img-text 若是預設的 auto，遮罩會畫在白字「上面」，白字就會被壓成灰色。 */
#img-waterfall .grid .grid-item .img-text {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 12px 14px;
  margin: 0;
  text-align: left;
  opacity: 0;
  transition: 0.4s ease-in;
  pointer-events: none;
}

#img-waterfall .grid .grid-item:hover .img-text {
  opacity: 1;
}

#img-waterfall .grid .grid-item:hover .img-box::before {
  visibility: visible;
  opacity: 1;
}

#img-waterfall .grid .grid-item .img-text .img-link {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.95);
  pointer-events: auto;
}

#img-waterfall .grid .grid-item .img-text .img-link:hover,
#img-waterfall .grid .grid-item .img-text .img-link:active {
  color: #fff;
}

#img-waterfall .grid .grid-item .img-box {
  cursor: zoom-in;
}


/* ------------------------------------------------------------
   2. Logo 被縮小：325×124 → 114×44
   真正的兇手不是 .navbar-brand，而是新佈景多加的固定寬度格子
   .navi-item:nth-child(2){ flex:0 0 160px; max-width:160px; height:75px }
   舊佈景沒有這條規則。已在正式站實測過，改完 logo 回到 324×124，
   選單不會擠爆、也不會產生橫向捲軸。
   ------------------------------------------------------------ */
.navbar .navi-item:nth-child(2) {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 340px;
  flex: 0 0 340px;
  max-width: 340px;
  height: auto;
}

.navbar .navi-item:nth-child(2) .navbar-brand {
  max-width: 325px;
}

.navbar .navi-item:nth-child(2) > .container {
  padding-left: 0;
  padding-right: 0;
}


/* ------------------------------------------------------------
   2-B. Logo 太貼左邊 —— 補回舊版的左側留白

   舊版 logo 不是獨立元素，它是選單 <ul> 的第一個項目，
   而那個 <ul> 用 justify-content: space-around，首尾會自動各留半格，
   所以 logo 左緣落在 104px。

   新版把 logo 拆成專屬格子 .navi-item:nth-child(2)，
   格子寬度 ≈ logo 寬 + 右邊距，剛好塞滿 → justify-content: center 失效 → 整個貼左。

   下面把格子加寬 68px 並改成左對齊，logo 左緣回到 104px（與舊版一致）。
   實測 1440px / 1024px / 993px（桌機版最窄）皆為單行、無橫向捲軸，
   993px 時選單右側仍有 72px 餘裕。
   ------------------------------------------------------------ */
.navbar .navi-item:nth-child(2) {
  -ms-flex: 0 0 408px;
  flex: 0 0 408px;
  max-width: 408px;
  padding-left: 68px;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

/* 若還想讓「選單第一項」的起點也更靠近舊版，把上面三個數字改成 456px 即可
   （padding-left 維持 68px）。實測 993px 仍為單行、餘裕 68px。
   差別只在選單整體再往右 44px，logo 位置不變。 */


/* ------------------------------------------------------------
   3. 字型——舊版全站是襯線體（Noto Serif TC），新版變成黑體
   新版 CSS 標題指定了 "Playfair Display"，但頁面根本沒去 Google
   載入這支字，所以標題實際掉回黑體。
   字型的 @import 已經放在本檔最上面（CSS 規定 @import 必須在最前面）。
   若後台會把多筆記錄串接輸出，請確保這筆排在第一筆，否則 @import 會失效。
   ------------------------------------------------------------ */
body {
  font-family: "Noto Serif TC", "微軟正黑體", "Heiti TC", "LiHei Pro",
               "Open Sans", HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navbar {
    display: flex;
    align-items: flex-end;
}