/* ========================================================================
1. COVER PAGE: SYSTEM LAYOUT (Locked Screen & No UI)
======================================================================== */

html:has(#cover-page),
html:has(#cover-page) body {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
  height: 100vh !important;
  width: 100vw !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.coal:has(#cover-page) body,
html.navy:has(#cover-page) body,
html.ayu:has(#cover-page) body {
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
}

html:has(#cover-page) .sidebar,
html:has(#cover-page) .menu-bar,
html:has(#cover-page) .nav-chapters,
html:has(#cover-page) .mobile-topbar,
html:has(#cover-page) .nav-wrapper,
html:has(#cover-page) .nav-wide-wrapper,
html:has(#cover-page) a.nav-chapters,
html:has(#cover-page) a.mobile-nav-chapters {
  display: none !important;
}

html:has(#cover-page) .page-wrapper {
  background: transparent !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ========================================================================
2. COVER PAGE: CONTENT STYLING
======================================================================== */

#cover-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  text-align: center;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  animation: fadeIn 1.5s ease-out;
}

/* --- FIX 1: THE ARROW KILLER --- */
/* Restore the text, but kill the link behavior */
#cover-page .cover-title a.header {
  display: inline-block !important;
  visibility: visible !important;
  text-decoration: none !important;
  color: inherit !important;
  pointer-events: none !important; /* Makes it unclickable */
}

/* Remove the arrow (which is a pseudo-element on either the h1 or the a) */
#cover-page .cover-title::before,
#cover-page .cover-title::after,
#cover-page .cover-title a.header::before,
#cover-page .cover-title a.header::after {
  content: none !important;
  display: none !important;
}

/* LOGO */
#cover-page .cover-logo {
  height: 40vh !important;
  width: auto !important;
  margin-bottom: 2vh !important;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2));
}

/* TITLE */
#cover-page .cover-title {
  font-size: 10vmin !important;
  font-size: clamp(2rem, 10vmin, 6rem) !important;
  font-weight: 800;
  margin: 0;
  color: var(--fg);
  letter-spacing: -0.05em;
  line-height: 1.1;
}

/* SUBTITLE */
#cover-page .cover-subtitle {
  font-size: 2.5vmin !important;
  font-size: clamp(1rem, 3vmin, 2rem) !important;
  font-weight: 300;
  color: var(--fg);
  opacity: 0.9;
  margin-top: 1vh !important;
}

/* DIVIDER */
#cover-page .cover-divider {
  width: 10vw;
  height: 4px;
  background: var(--links);
  margin: 3vh auto !important;
  border-radius: 4px;
}

/* --- FIX 2: TIGHTEST POSSIBLE META --- */
#cover-page .cover-meta {
  margin-bottom: 4vh !important;
  color: var(--fg);
  opacity: 0.8;

  font-size: 2.5vmin !important;
  font-size: clamp(2.0rem, 2.5vmin, 1.2rem) !important;

  /* Force lines to be close together */
  line-height: 1.2 !important;
}

#cover-page .cover-meta p {
  /* Zero margin and padding ensures they stack directly */
  margin: 0 !important;
  padding: 0 !important;
}

#cover-page .cover-meta .version {
  font-size: 0.75em !important; /* 85% size of the author name */
  opacity: 0.8 !important;       /* Slightly fainter */
  margin-top: 0.8vh !important;  /* Add a small gap above it */
  font-family: 'Consolas', 'Monaco', monospace !important; /* Tech look */
}
/* BUTTON */
#cover-page .cover-button {
  display: inline-block;
  padding: 1.5vh 3vw !important;
  background-color: var(--links);
  color: white !important;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;

  font-size: 2.5vmin !important;
  font-size: clamp(1rem, 2.5vmin, 1.5rem) !important;

  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

#cover-page .cover-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  text-decoration: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ========================================================================
3. Sidebar Logo Styling
======================================================================== */
.sidebar-logo-link {
    display: block;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
    text-decoration: none !important; /* Remove underline from link */
    border: none !important;
}

.sidebar-logo {
    width: 30%;
    max-width: 180px;
    height: auto;
    opacity: 0.95;
    transition: transform 0.2s ease;
}

.sidebar-logo:hover {
    transform: scale(1.05);
    opacity: 1;
}

/* =========================================
   HIDE "COVER" TEXT LINK
   ========================================= */
/* Since the Logo now serves as the link to the Cover/Home,
   we hide the first text entry in the sidebar to avoid redundancy.
*/
.sidebar-scrollbox .chapter > li:first-child {
    display: none !important;
}
/* /* ========================================= */
   /* TOP BAR (MAIN PANEL) LOGO */
   /* ========================================= */ */
/* [> Ensure the title container uses Flexbox to align icon and text <] */
/* .menu-title { */
    /* display: flex !important; */
    /* align-items: center; */
    /* justify-content: center; */
/* } */

/* .top-bar-logo-link { */
    /* display: flex; [> Removes weird gap under images <] */
    /* align-items: center; */
    /* margin-right: 10px; [> Space between logo and text <] */
    /* text-decoration: none !important; */
    /* border: none !important; */
/* } */

/* .top-bar-logo { */
    /* height: 1.5em; [> Scale relative to the font size <] */
    /* width: auto; */
    /* transition: transform 0.2s ease; */
/* } */

/* .top-bar-logo:hover { */
    /* transform: scale(1.1); */
/* } */

/* [> Mobile Tweak: Ensure title text doesn't vanish if logo takes space <] */
/* @media only screen and (max-width: 600px) { */
    /* .menu-title { */
        /* font-size: 1.2rem; [> Slightly smaller text on mobile <] */
    /* } */
    /* .top-bar-logo { */
        /* height: 1.2em; */
    /* } */
/* } */