/**
 * Embergrave Custom Theme for BookStack
 *
 * A dark fantasy theme featuring:
 * - Custom Storica font family for headings
 * - Dark mode with atmospheric background
 * - Custom 3:4 aspect ratio book cards with hover overlays
 * - Mobile-first responsive design
 * - Branded header customization
 */

/* ==========================================================================
   TYPOGRAPHY - Custom Fonts
   ========================================================================== */

/**
 * Storica Font Family Declaration
 * Complete weight range (400-900) for flexible typography
 */
@font-face {
    font-family: 'Storica';
    src: url('/theme/embergrave/fonts/Storica-Heavy.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Storica';
    src: url('/theme/embergrave/fonts/Storica-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Storica';
    src: url('/theme/embergrave/fonts/Storica-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Storica';
    src: url('/theme/embergrave/fonts/Storica-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Storica';
    src: url('/theme/embergrave/fonts/Storica-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Storica';
    src: url('/theme/embergrave/fonts/Storica-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/**
 * Heading Typography
 * Applies Storica font to all heading levels with appropriate weights
 */
h1 {
    font-family: 'Storica', serif !important;
    font-weight: 900 !important;
    font-size: 2.75em !important;
}

h2 {
    font-family: 'Storica', serif !important;
    font-weight: 800 !important;
    font-size: 2.33em !important;
}

h3 {
    font-family: 'Storica', serif !important;
    font-weight: 700 !important;
    font-size: 2.0em !important;
}

h4 {
    font-family: 'Storica', serif !important;
    font-weight: 600 !important;
    font-size: 1.5em !important;
}

h5 {
    font-family: 'Storica', serif !important;
    font-weight: 500 !important;
    font-size: 1.4em !important;
}

h6 {
    font-family: 'Storica', serif !important;
    font-weight: 500 !important;
    font-size: 1.3em !important;
}

/**
 * Component-Specific Typography
 */
.list-heading,
.embergrave-library-intro-title {
    font-family: 'Storica', serif !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   THEME - Dark Mode & Background
   ========================================================================== */

/**
 * Global Dark Mode Enforcement
 * Prevents users from switching to light mode for consistent branding
 * Features atmospheric background image with edge vignette effect
 */
html {
    background-color: #111 !important;
    color-scheme: only dark !important;
    background-image: url('/theme/embergrave/background-void.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

body {
    position: relative;
    background: transparent;
}

/**
 * Vignette Overlay
 * Creates subtle darkening on left/right edges for depth
 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.6) 0%,
        transparent 15%,
        transparent 85%,
        rgba(0, 0, 0, 0.6) 100%
    );
}

/**
 * Hide Theme Toggle Controls
 * Removes dark/light mode switcher to enforce consistent experience
 * Including the toggle option in user actions menu and sidebar
 */
.dark-mode-toggle,
[data-action="toggle-dark-mode"],
button[aria-label*="light mode"],
button[aria-label*="Light mode"],
.icon-item[data-action="toggle-dark-mode"],
a[data-action="toggle-dark-mode"],
button[data-action="toggle-dark-mode"],
form[action*="toggle-dark-mode"],
form[action*="toggle-dark-mode"] button {
    display: none !important;
}

/* Hide dark mode toggle list item in dropdowns */
li:has([data-action="toggle-dark-mode"]) {
    display: none !important;
}

/* ==========================================================================
   BOOK GRID - Layout & Card Structure
   ========================================================================== */

/**
 * Responsive Grid System
 * Auto-fit columns with 260px minimum ensures:
 * - Mobile: 1-2 columns
 * - Tablet: 2-3 columns
 * - Desktop (1400px+): 3-4 columns
 */
.grid.third {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    grid-row-gap: 1rem !important;
    grid-column-gap: 24px !important;
}

/**
 * Card Base Styling Reset
 * Removes BookStack defaults to allow custom card design
 * overflow: visible ensures drop-shadows render properly
 */
.grid-card {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/**
 * Hide Default BookStack Card Elements
 * Custom overlay system replaces these components
 */
.grid-card-content,
.grid-card-footer,
.grid-card .svg-icon,
.grid-card svg,
.featured-image-container-wrap,
.featured-image-container {
    display: none !important;
}

/**
 * Prevent Default Hover Opacity
 * Custom hover effects handle visual feedback
 */
.grid-card:hover .featured-image-container {
    opacity: 1 !important;
}

/* ==========================================================================
   BOOK CARDS - Custom Components
   ========================================================================== */

/**
 * Book Wrapper
 * Maintains 3:4 portrait aspect ratio (standard book dimensions)
 * overflow: visible allows drop-shadow effects
 */
.embergrave-book-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: visible;
}

/**
 * Aspect Ratio Fallback
 * For browsers without aspect-ratio support (IE, older Safari)
 * Uses padding-bottom percentage technique
 */
@supports not (aspect-ratio: 3 / 4) {
    .embergrave-book-wrapper {
        padding-bottom: 133.33%;
        height: 0;
    }

    .embergrave-book-wrapper > * {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/**
 * Book Cover Image
 * Static drop-shadow with transform-only hover animation for performance
 * Avoids layout thrashing by only animating transform property
 */
.embergrave-book-cover {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.4));
    transition: transform 0.25s ease;
}

/**
 * Hover Lift Effect
 * Subtle upward movement on card hover
 */
.embergrave-book-card:hover .embergrave-book-cover {
    transform: translateY(-4px);
}

/* ==========================================================================
   HOVER OVERLAY - Mobile-First Design
   ========================================================================== */

/**
 * Overlay Container
 * Hidden by default, revealed on hover
 * Responsive alignment: center on mobile/tablet, right-aligned on desktop
 * pointer-events: none allows click-through to underlying link
 */
.embergrave-book-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: 10;
}

@media screen and (min-width: 601px) {
    .embergrave-book-overlay {
        padding: 0.75rem;
    }
}

@media screen and (min-width: 881px) {
    .embergrave-book-overlay {
        justify-content: flex-end;
        padding: 1rem 2rem 1rem 1rem;
    }
}

/**
 * Show Overlay on Hover
 */
.embergrave-book-card:hover .embergrave-book-overlay {
    opacity: 1;
}

/**
 * Text Container
 * Maintains visual consistency with responsive sizing
 * Progressive sizing: 70% → 80% → 85% at larger viewports
 */
.embergrave-book-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70%;
    height: 70%;
    aspect-ratio: 3 / 4;
    max-width: 100%;
}

@media screen and (min-width: 601px) {
    .embergrave-book-info {
        width: 80%;
        height: 80%;
    }
}

@media screen and (min-width: 881px) {
    .embergrave-book-info {
        width: 85%;
        height: 85%;
    }
}

/**
 * Text Backdrop
 * Semi-transparent background for text readability
 * Multi-layer drop-shadow creates soft, professional blur
 */
.embergrave-text-backdrop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1rem;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.75);
    border-radius: 12px;
    box-sizing: border-box;
    box-shadow:
        0 0px 5px rgba(0, 0, 0, 1),
        0 0px 15px rgba(0, 0, 0, 0.9),
        0 0px 30px rgba(0, 0, 0, 0.8);
}

@media screen and (min-width: 601px) {
    .embergrave-text-backdrop {
        gap: 0.25rem;
    }
}

@media screen and (min-width: 881px) {
    .embergrave-text-backdrop {
        padding: 1.5rem;
        gap: 0.3rem;
    }
}

/* ==========================================================================
   TYPOGRAPHY - Book Card Text
   ========================================================================== */

/**
 * Book Title Styling
 * Color: #ffdb64 (warm gold for Embergrave brand)
 * Responsive sizing: larger on mobile for readability, smaller on desktop
 * Multi-layer text shadow for depth and readability
 */
.embergrave-book-title {
    color: #ffdb64 !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    margin: 0 0 0.5rem 0 !important;
    text-shadow:
        0 4px 4px rgba(0, 0, 0, 0.7),
        0 4px 8px rgba(0, 0, 0, 0.5),
        0 2px 2px rgba(0, 0, 0, 0.8) !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media screen and (min-width: 601px) {
    .embergrave-book-title {
        font-size: 0.85rem !important;
        margin: 0 0 0.3rem 0 !important;
    }
}

@media screen and (min-width: 881px) {
    .embergrave-book-title {
        font-size: 0.75rem !important;
        margin: 0 0 0.35rem 0 !important;
    }
}

/**
 * Book Description Styling
 * Color: #ffd7a8 (lighter gold for visual hierarchy)
 * Responsive sizing for optimal readability at each breakpoint
 */
.embergrave-book-description {
    color: #ffd7a8 !important;
    font-size: 0.7rem !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin: 0 !important;
    text-shadow:
        0 4px 4px rgba(0, 0, 0, 0.7),
        0 4px 8px rgba(0, 0, 0, 0.5),
        0 2px 2px rgba(0, 0, 0, 0.8) !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
}

@media screen and (min-width: 601px) {
    .embergrave-book-description {
        font-size: 0.65rem !important;
        line-height: 1.35 !important;
    }
}

@media screen and (min-width: 881px) {
    .embergrave-book-description {
        font-size: 0.7rem !important;
        line-height: 1.4 !important;
    }
}

/* ==========================================================================
   HEADER - Navigation & Branding
   ========================================================================== */

/**
 * Header Background
 * Custom dark gray (#222) independent of BookStack primary color setting
 */
#header.primary-background {
    background-color: #222222 !important;
}

/**
 * Logo Sizing
 */
.embergrave-logo .logo-image {
    height: 32px;
    width: auto;
}

/**
 * Header Link Spacing
 * Reduced horizontal padding for tighter navigation layout
 */
.header-links .links a {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/**
 * Custom Link Colors
 * Play link: warm gold (#ffd7a8)
 * Discord link: soft purple (#c09acf)
 */
.header-links .links a[href*="play.embergrave.com"] {
    color: rgb(255, 215, 168) !important;
}

.header-links .links a[href*="play.embergrave.com"] svg {
    fill: rgb(255, 215, 168) !important;
    color: rgb(255, 215, 168) !important;
}

.header-links .links a[href*="discord.gg"] {
    color: #c09acf !important;
}

.header-links .links a[href*="discord.gg"] svg {
    fill: #c09acf !important;
    color: #c09acf !important;
}

/* ==========================================================================
   LIBRARY INTRO - Hero Section
   ========================================================================== */

/**
 * Intro Section Container
 * Hero section above the books grid with atmospheric backdrop
 */
.embergrave-library-intro {
    position: relative;
    padding: 3rem 1rem;
    text-align: center;
}

/**
 * Radial Gradient Backdrop
 * Creates focal point behind intro content
 */
.embergrave-library-intro::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 1000px;
    height: 100%;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.5) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

/**
 * Content Wrapper
 */
.embergrave-library-intro-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

/**
 * Intro Title
 */
.embergrave-library-intro-title {
    font-size: 1.75rem !important;
    font-weight: 900;
    color: #ffdb64;
    margin: 0 0 1.5rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/**
 * Intro Description
 */
.embergrave-library-intro-description {
    font-size: 0.9rem !important;
    line-height: 1.7;
    color: #ffd7a8;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/**
 * Mobile Responsive Adjustments
 */
@media screen and (max-width: 768px) {
    .embergrave-library-intro {
        padding: 2rem 1rem;
    }

    .embergrave-library-intro-title {
        font-size: 1.6rem;
    }

    .embergrave-library-intro-description {
        font-size: 0.85rem;
    }
}

/**
 * Books Page Content Padding
 * Ensures consistent spacing around main content area
 */
.content-wrap.card {
    padding-top: 2.5rem !important;
}

/* ==========================================================================
   BORDERS & SHADOWS - Container Styling
   ========================================================================== */

/**
 * Content Container Border and Shadow
 * Adds a subtle border and shadow to the main content area on all pages
 */
.content-wrap.card {
    border: 1px solid #111 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/**
 * Header Border and Bottom Fade
 * Adds matching border and subtle dark fade to the bottom of the header
 */
header,
#header {
    border-bottom: 1px solid #111 !important;
    position: relative;
}

header::after,
#header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.05) 50%,
        transparent 100%
    );
}

/* ==========================================================================
   MOBILE HAMBURGER MENU - Alignment Fixes
   ========================================================================== */

/**
 * Mobile Menu Link Alignment
 * Ensures all header links in mobile dropdown use consistent grid alignment
 * Matches the styling of dropdown menu items (My Favourites, View Profile, etc.)
 */
/* @media screen and (max-width: 1199px) {
    header .header-links .links a {
        display: grid !important;
        grid-template-columns: 16px auto !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 8px 16px !important;
        text-align: start !important;
        line-height: 1.4 !important;
    }

    header .header-links .links a svg {
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
} */

/* ==========================================================================
   MOBILE LAYOUT FIXES - Under 1000px
   ========================================================================== */

/**
 * Mobile Tab Navigation Z-Index Fix
 * Ensures Info | Content tabs appear above other content elements
 */
.tri-layout-mobile-tabs {
    z-index: 50 !important;
}

/* ==========================================================================
   CONTENT AREA VIGNETTE - Dark Edge Fade
   ========================================================================== */

/**
 * Content Container Dark Fade
 * Adds a subtle dark gradient fade on left and right sides of the content card
 * Applied directly to the content-wrap.card container
 */
.content-wrap.card {
    position: relative;
}

.content-wrap.card::before,
.content-wrap.card::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    pointer-events: none;
    z-index: 1;
}

.content-wrap.card::before {
    left: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.05) 50%,
        transparent 100%
    );
    border-radius: 8px 0 0 8px;
}

.content-wrap.card::after {
    right: 0;
    background: linear-gradient(
        to left,
        rgba(0, 0, 0, 0.15) 0%,
        rgba(0, 0, 0, 0.05) 50%,
        transparent 100%
    );
    border-radius: 0 8px 8px 0;
}

/* ==========================================================================
   Z-INDEX LAYERING - Proper Stacking Order
   ========================================================================== */

/**
 * Stacking Context for Content Areas
 * Ensures content areas are properly layered with background effects
 */

/* Content cards and main content areas above background effects */
.content-wrap.card,
.card,
.tri-layout-middle {
    position: relative;
    z-index: 10;
}

/* Login, register, and special page containers */
.content-wrap,
.tri-layout-container {
    position: relative;
    z-index: 10;
}

/* Header stays above content */
header,
#header {
    position: relative;
    z-index: 100 !important;
}

/* Notifications must be above everything except foreground dust */
.notification {
    z-index: 999999 !important;
}

/* Popups and overlays above content */
.popup-body,
[overlay] {
    z-index: 95536 !important;
}

/* Ensure the body vignette stays behind content */
body::before {
    z-index: 1 !important;
}

/* ==========================================================================
   BOOK LIST VIEW - Cover Image Styling
   ========================================================================== */

/**
 * Book Cover in List View
 * - Removes the colored background (bg-book) that shows around PNG edges
 */
.entity-list-item-image {
    background-color: transparent !important;
}

.entity-list-item-image.bg-book,
.entity-list-item-image.bg-chapter,
.entity-list-item-image.bg-page {
    background-color: transparent !important;
}