/* Custom CSS for Background and Covers */

:root {
  --anzhiyu-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, .20);
  --anzhiyu-shadow-red: 0 8px 12px -3px rgba(233, 30, 99, .20);
  --anzhiyu-shadow-green: 0 8px 12px -3px rgba(42, 184, 89, .20);
  --anzhiyu-shadow-yellow: 0 8px 12px -3px rgba(255, 178, 0, .20);
  --anzhiyu-shadow-orange: 0 8px 12px -3px rgba(255, 114, 66, .20);
  --anzhiyu-shadow-violet: 0 8px 12px -3px rgba(128, 0, 128, .20);
}

/* Fixed Background Image Effect */
#web_bg {
  /* Ensure the background image covers the whole screen and is fixed */
  background-attachment: fixed !important;
  background-position: top center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* 
   Refined Background Strategy:
   1. Home (.full_page) & Archives/Tags (.not-home-page):
      - Use "Transparent + Fixed Body" strategy. 
      - We hide the header's own background (make it transparent) so it reveals the global #web_bg.
      - This ensures perfect alignment and no "scroll lag".
      - Assumption: These pages use the same image as #web_bg (configured in _config.yml).
   
   2. Posts (.post-bg):
      - Use "Scroll" strategy (Default).
      - We show the specific post cover image.
      - We use 'scroll' attachment so the image is sized to the header, not the viewport.
      - This prevents the "zoom" effect and the "1s jump" (transition from scroll to fixed).
*/

/* Global alignment fix (applies to all) */
#page-header {
  background-position: top center !important;
}

/* Home and Archive/Category/Tag Pages -> Transparent to show fixed #web_bg */
#page-header.full_page,
#page-header.not-home-page {
  background: transparent !important;
}

/* Post Pages -> Normal Scroll behavior to show custom covers correctly */
#page-header.post-bg {
  background-attachment: scroll !important;
  /* Ensure we don't force transparency here */
  background-color: transparent; /* Fallback */
}

/* 
   Force post covers (thumbnails) to retain the top part of the image.
   Butterfly uses .post_cover and img.post_bg usually.
*/
.recent-post-item .post_cover img.post_bg {
  object-position: top center !important;
}

/* 
   If there are other cover images, ensure they also follow this rule.
   e.g. adjacent posts cover
*/
.relatedPosts > .relatedPosts-list > div .cover {
    object-position: top center !important;
}

/* ==========================================================================
   New Modifications
   ========================================================================== */

/* 1. Transparent Footer */
#footer {
  background: transparent !important;
}
#footer::before {
  background: transparent !important;
}

/* 2. Custom Scrollbar (Orange Theme) */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background: #FF7242; /* Orange */
  border-radius: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 8px;
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #FF7242 transparent;
}

/* 3. Frosted Glass Effect (Glassmorphism) for Cards */
/* 
   Targeting:
   - Homepage posts (.recent-post-item)
   - Sidebar cards (.card-widget)
   - Article page container (#post)
   - Page container (#page)
   - Archive/Category/Tag containers (.article-sort-item doesn't have bg usually, but the container might)
*/

.recent-post-item,
.card-widget,
#page,
#archive,
#category,
#tag {
  background: rgba(255, 255, 255, var(--glass-opacity-light, 0.9)) !important; /* Semi-transparent white */
  backdrop-filter: blur(10px); /* Blur effect */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}

/* Specific rule for Article Page (#post) using its own opacity variable */
#post {
  background: rgba(255, 255, 255, var(--post-glass-opacity-light, 0.9)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 
   Apply Post Opacity to Page-Type Cards (like Message Board)
   The user requested: "留言板页面下正文卡片的透明度修改为和文章正文卡片透明度同样位置单独配置"
   In Butterfly, message boards and custom pages usually use the ID #page or class .page
   We will override #page to use the --post-glass-opacity variables instead of the general --glass-opacity.
*/
#page {
  background: rgba(255, 255, 255, var(--post-glass-opacity-light, 0.9)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Dark mode support for Frosted Glass */
[data-theme='dark'] .recent-post-item,
[data-theme='dark'] .card-widget,
[data-theme='dark'] #archive,
[data-theme='dark'] #category,
[data-theme='dark'] #tag {
  background: rgba(0, 0, 0, var(--glass-opacity-dark, 0.7)) !important; /* Semi-transparent black */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-theme='dark'] #post {
  background: rgba(0, 0, 0, var(--post-glass-opacity-dark, 0.7)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Apply Post Opacity to Page (Dark Mode) */
[data-theme='dark'] #page {
  background: rgba(0, 0, 0, var(--post-glass-opacity-dark, 0.7)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* 
   Special handling for swiper container:
   Adjust the container to match the swiper item style exactly (280px height, 12px radius).
   Instead of removing the background, we let it be the "card" background but ensure it fits perfectly.
*/
.recent-post-item.swiper-outer {
  height: 280px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  max-width: 100%; /* Ensure it does not exceed parent width */
  box-sizing: border-box; /* Include border/padding in width */
  width: 100%; /* Fill available space but respect max-width */
}

/* Ensure the swiper container inside fills the parent */
.recent-post-item.swiper-outer #swiper_container {
  height: 100% !important;
  margin: 0 !important;
  border-radius: 12px !important; /* Ensure inner container matches */
  width: 100% !important; /* Ensure inner container fills width */
  max-width: 100% !important;
}


/* 
   Special handling for friend link page card (#page):
   The user wants the outer card (the #page container) to match the inner flink cards style.
   But if #page already has the glass style above, we are good.
   However, user said "友链的页面卡片内的卡片要鼠标不移动到上方时背景和页面卡片一致的毛玻璃效果，鼠标移动后变白".
   
   It seems the user refers to the inner .flink-list-item cards.
*/

/* Targeting the flink list items (Inner Cards) */
.flink-list-item {
  transition: all 0.3s ease !important;
  /* 
     Match the outer card style (Glass effect) by default.
     Inheriting or repeating the glass variables.
  */
  /* Default background should be transparent or matching the card background */
  background: transparent !important; 
  /* Remove backdrop-filter here if it's already on the parent, or keep if needed */
  /* backdrop-filter: blur(5px); */ 
  border-radius: 8px; /* Consistent radius */
  /* Remove shadow by default */
  box-shadow: none !important; 
}

/* Hover Effect: Scale up, NO SHADOW, and TURN WHITE */
.flink-list-item:hover {
  transform: scale(1.02) !important; /* Very slight zoom */
  box-shadow: none !important; 
  z-index: 1; /* Bring to front */
  
  /* Turn White on Hover */
  background: #FFFFFF !important; 
}

/* Dark mode hover */
[data-theme='dark'] .flink-list-item:hover {
    background: #333333 !important; 
}

/* Text color behavior matching reference */

/* 1. Name/Title: Default font color, Hover turns to Theme Orange */
.flink-item-name {
  color: var(--font-color) !important;
  font-weight: bold;
}
.flink-list-item:hover .flink-item-name {
  color: #FF7242 !important; /* Theme Orange */
}

/* 2. Description: Default grey/text color, Hover STAYS THE SAME (Does not change color) */
.flink-item-desc {
  color: var(--text-color) !important; /* or grey */
}
.flink-list-item:hover .flink-item-desc {
  color: var(--text-color) !important; /* Force stay same */
}


/* Dark Mode Adjustments */
[data-theme='dark'] .flink-item-name {
    color: var(--font-color) !important;
}
[data-theme='dark'] .flink-list-item:hover .flink-item-name {
    color: #FF7242 !important;
}
[data-theme='dark'] .flink-item-desc {
    color: #aaaaaa !important; /* Light grey for dark mode desc */
}
[data-theme='dark'] .flink-list-item:hover .flink-item-desc {
    color: #aaaaaa !important; /* Stay light grey */
}

/* Ensure links inside don't mess up layout */
.flink-list-item a {
  display: block;
  height: 100%;
  width: 100%;
  color: inherit !important;
  text-decoration: none !important;
}

/* Avatar Zoom on hover (No Rotation) */
.flink-list-item:hover img {
  transform: scale(1.1) !important;
  transition: transform 0.3s ease-in-out;
}

/* ==========================================================================
   Black Box (Heimu) / Spoiler Effect
   Usage: <span class="heimu" title="You know too much">Secret Text</span>
   ========================================================================== */
.heimu, .spoiler {
  background-color: #252525;
  color: #252525;
  text-shadow: none;
  transition: color 0.3s;
  padding: 0 5px;
  border-radius: 2px;
}

.heimu:hover, .spoiler:hover,
.heimu:active, .spoiler:active {
  color: #fff;
}

/* Dark mode adaptation */
[data-theme='dark'] .heimu, 
[data-theme='dark'] .spoiler {
  background-color: #000;
  color: #000;
}

[data-theme='dark'] .heimu:hover, 
[data-theme='dark'] .spoiler:hover,
[data-theme='dark'] .heimu:active, 
[data-theme='dark'] .spoiler:active {
  color: #ccc;
}

/* ==========================================================================
   Global Article Title Hover Color
   User Request: Change hover color of article titles to Orange (#FF7242) globally
   ========================================================================== */
.article-title:hover {
  color: #D4481C !important;
}

.post-title:hover {
  color: #D4481C !important;
}

/* For recent posts titles in homepage */
#recent-posts > .recent-post-item > .recent-post-info > .article-title:hover {
  color: #D4481C !important;
}

/* For archive/category/tag list titles */
.article-sort-item-title:hover {
  color: #D4481C !important;
}

/* For adjacent post navigation (next/prev post) */
.relatedPosts > .relatedPosts-list > div .content .title:hover {
  color: #D4481C !important;
}